<template>
    <div class="goods_topic">
        <Header></Header>
        <section class="section">
            <div class="section__header">
                <div class="container">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>商品专题</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>

            <div class="mains">
                <div class="content_up">
                    <div class="banner_one"></div>
                    <div class="banner_two"></div> 
                    <!-- <img class="banner_one" src='@assets/topic/banner_one.png' /> -->
                    <!-- <img class="banner_one" src="@assets/topic/banner_one.png" alt="" /> -->
                </div>
                <div class="content_down">

                </div>
                <div class="topic_detail">
                    <div class="titles">
                        <img src="@/assets/topic/icon_left.png" alt="" />
                        <span class="scheme">通关方案</span>
                        <img src="@/assets/topic/icon_right.png" alt="" />
                    </div>
                    <div class="min_title">2023年二级建造师考前培训</div>
                    <div class="details">
                        <div class="detail_one">

                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>
import Header from "@/components/header/index";
export default {
    name: '',
    components: { Header },
    data() {
        return {
            
        }
    }
}
</script>

<style lang="scss" scoped>
.goods_topic {
    width: 100%;
    .section {
        &__header {
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
    }
    .mains {
        // width: 100%;
        padding: 0px 116px;
        .content_up {
            width: 100%;
            height: 808px;
            .banner_one {
                width: 100%;
                height: 280px;
                background: url('../../assets/topic/banner_one.png') center center no-repeat;
                background-size: 100% 100%;
            }
            .banner_two {
                width: 100%;
                height: 528px;
                background: url('../../assets/topic/banner_bg.png') center center no-repeat;
                background-size: 100% 100%;
            }
            
        }
        .topic_detail {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 3444px;
            background: url('../../assets/topic/topic_bg.png') center center no-repeat;
            background-size: 100% 100%;
            
            .titles {
                margin-top: 109px;
                >img {
                    width: 32px;
                    height: 20px;
                }
                .scheme {
                    font-size: 48px;
                    font-weight: bold;
                    color: #363543;
                    margin: 0px 40px;
                }
            }
            .min_title {
                margin: 13px 0px 50px;
                font-size: 28px;
                font-weight: 500;
                color: #363543;
            }
            .details {
                .detail_one {
                    
                }
            }
        }
    }
}
</style>