zhongde-website/components/experice/expericeIdea.vue

<template>
    <div id="experice_idea_wrap">
        <div class="experice_idea_box">
            <div class="experice_idea_title">
                <div class="experice_idea_titleC"><h2>建馆理念</h2></div>
                <p class="experice_idea_titleE">The future of smart city and the new retail era</p>
            </div>
            <div class="experice_idea_num_box">
                <div class="experice_idea_img"><img src="~/assets/images/experice/experice_idea_img.png"></div>
                <div class="experice_idea_intro"><p>精诚所至共创未来势，雄心壮志同筑梦想家</p></div>
                <div class="experice_idea_num">
                    <div class="experice_idea_num_desc1">
                        <p class="experice_idea_numbers">18</p>
                        <p>座城</p>
                        <p>每一座都是梦想的承载</p>
                    </div>
                    <div class="experice_idea_num_desc2">
                        <p class="experice_idea_numbers">365</p>
                        <p>家店</p>
                        <p>是梦想之光永不落的象征</p>
                    </div>
                </div>
                <div class="experice_idea_desc">
                    <p>Ⅰ、中国高端家具O2O新零售模式先行者。</p>
                    <p>Ⅱ、联手国际一线大牌设计师，打造生活家居新模式。</p>
                    <p>Ⅲ 、以美为本，创造体验式营销新高度。</p>
                    <p>Ⅳ、整合高端生活方式，打造城市顶级艺术生活综合体。</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'expericeIdea'
    }
</script>

<style scoped>
/*For what to start*/
    div#experice_idea_wrap {
        width:  100%;
        height:  auto;
    }

    .experice_idea_box {
        overflow:  hidden;
        width:  1200px;
        height:  auto;
        margin:  0 auto;
        padding:  150px 0 140px;
    }

    .experice_idea_title {
        width:  100%;
        height:  auto;
        padding-bottom:  54px;
        text-align:  center;
    }

    .experice_idea_titleC {
        overflow:  hidden;
        width:  100%;
        height:  40px;
        color: #22202b;
        font-size:  38px;
        font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
        font-weight: 900;
        line-height: 40px;
    }

    p.experice_idea_titleE {
        overflow:  hidden;
        width:  100%;
        height:  40px;
        color:  #858585;
        font-size:  14px;
        line-height: 40px;
    }

    .experice_idea_num_box {
        overflow:  hidden;
        width:  100%;
        height:  auto;
    }

    .experice_idea_img {
        overflow:  hidden;
        width:  576px;
        height: 306px;
        margin:  0 auto;
    }

    .experice_idea_intro {
        overflow:  hidden;
        width:  100%;
        height:  87px;
        color:  #858585;
        font-size:  18px;
        line-height:  87px;
        text-align:  center;
    }

    .experice_idea_num {
        overflow:  hidden;
        width:  100%;
        height:  auto;
        padding-bottom: 80px;
        border-bottom: 2px solid #d5d5d8;
    }

    .experice_idea_num_desc1 {
        float:  left;
        width:  600px;
        height:  auto;
        padding-left:  300px;
        box-sizing:  border-box;
        color: #858585;
        font-size: 18px;
        line-height: 32px;
        text-align: center;
    }

    .experice_idea_num_desc2 {
        float:  right;
        width: 600px;
        height: auto;
        padding-right: 280px;
        box-sizing: border-box;
        color: #858585;
        font-size:  18px;
        line-height: 32px;
        text-align:  center;
    }


    p.experice_idea_numbers {
        color: #22202b;
        font-size:  48px;
        font-weight:  bold;
        line-height: 40px;
    }

    .experice_idea_desc {
        overflow:  hidden;
        width:  100%;
        height:  auto;
        padding-top:  80px;
        padding-left: 370px;
        box-sizing:  border-box;
        color:  #858585;
        font-size:  18px;
        line-height: 26px;
        text-align: left;
    }
/*For what to start*/
</style>