名片—商城首页

src/main.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import App from './App'
+import Style from './static/less/cx-style.less'
 
 Vue.config.productionTip = false
 
 App.mpType = 'app'
 
 const app = new Vue({
-  ...App
+  ...App,
+  Style
 })
 app.$mount()

src/pages/card/card.vue

@@ -101,7 +101,6 @@
                           <div class="whoLooksCareMe">
                             <p class="text">谁收藏了我</p>
                             <p class="arrow">></p>
-                            <div class="clear"></div>
                           </div>
                           <div class="clear"></div>
                         </div>
@@ -289,9 +288,222 @@
                       </div>
                     </div>
 
-                    <div v-if="modelSwitchType == 'shop'">
-                      名片内容
+                    <div class="shopModel" v-if="modelSwitchType == 'shop'">
+                      <div class="switchDiv">
+                        <img class="switchPic" src="/static/images/btn_open.png">
+                        <p class="text">启用商城</p>
+                      </div>
+                      <div class="searchDiv">
+                          <img class="searchPic" src="/static/images/search.png">
+                          <input class="input" type="text" placeholder="按姓名、公司或职位搜索">
+                      </div>
+                      <div class="optionBox">
+                        <div class="options">
+                          <p class="text1">好课推荐</p>
+                          <p class="text1">实用教程</p>
+                          <p class="text1">生活美学</p>
+                          <p class="labelText">标签设置</p>
+                        </div>
+                        <div class="separate"></div>
+                        <p class="allOption">全部</p>
+                      </div>
+                      <div class="everyModel">
+
+                        <!-- banner -->
+                        <div class="titleBox">
+                          <p class="text">banner</p>
+                          <img class="arrowPic" src="/static/images/triangleArrow.png">
+                          <img class="morePic" src="/static/images/more.png">
+                        </div>
+
+                        <div class="bannerBox">
+                          <div class="bannerPicBox">
+                            <img class="bannerPic" src="/static/images/bannerImg.png">
+                          </div>
+                        </div>
+
+                        <!-- 背景 -->
+                        <div class="haveBgDiv">
+                          <!-- 精品课程 -->
+                          <div class="titleBox bg">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <div class="goodsListBox">
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                                <p class="goodsSign">热门</p>
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <!-- 查看更多 -->
+                            <div class="showMoreBox">
+                              <p class="title">查看更多</p>
+                            </div>
+                          </div>
+
+                          <!-- 精品课程 -->
+                          <div class="titleBox">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                          
+                          <div class="BoutiqueClass">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic.jpg">
+                              <p class="commentText">
+                                我想说点什么呢？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+                              </p>
+                            </div>
+                          </div>
+
+                          <!-- 最新课程 -->
+                          <div class="titleBox">
+                            <p class="text">最新课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <!-- 最新课程列表 -->
+                          <div class="newClassBox">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic2.jpg">
+                            </div>
+                            <div class="detailBox">
+                              <p class="title">
+                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
+                              </p>
+                              <p class="describeText">
+                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
+                              </p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="newClassBox">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic2.jpg">
+                            </div>
+                            <div class="detailBox">
+                              <p class="title">
+                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
+                              </p>
+                              <p class="describeText">
+                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
+                              </p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- 查看更多 -->
+                          <div class="showMoreBox">
+                            <p class="title">查看更多</p>
+                          </div>
+
+                          <!-- 精品课程 -->
+                          <div class="titleBox">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <div class="slideSwitch">
+                            <div class="classRecommendBox"> <!--Recommend=>推荐-->
+                              <div class="classRecommendPicBox">
+                                <img class="classRecommendPic" src="/static/images/testBgPic.jpg">
+                                <div class="topBox">
+                                  <p class="text1">好课推荐</p>
+                                  <p class="text2">共50门 | 每日更新</p>
+                                </div>
+                                <div class="bottomBox">
+                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text2">查看全部 50门 ></p>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="classRecommendBox2"> <!--Recommend=>推荐-->
+                              <div class="classRecommendPicBox">
+                                <img class="classRecommendPic" src="/static/images/testBgPic2.jpg">
+                                <div class="topBox">
+                                  <p class="text1">好课推荐</p>
+                                  <p class="text2">共50门 | 每日更新</p>
+                                </div>
+                                <div class="bottomBox">
+                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text2">查看全部 50门 ></p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!--新增模块-->
+                          <div class="addNewModel">
+                            <p class="text">新增模块</p>
+                          </div>
+
+                        </div>
+
+
+                      </div>
                     </div>
+
                     <div v-if="modelSwitchType == 'show'">
                       展厅内容
                     </div>
@@ -306,7 +518,7 @@
     export default {
         data() {
             return {
-                modelSwitchType: 'card',
+                modelSwitchType: 'shop',
                 showIndex: 0,
                 tran: 350,    //横轴
                 vert: 500     //纵轴
@@ -369,7 +581,7 @@
                 // console.log(wx.getSystemInfoSync());
             },
             handleChange(e) {
-              console.log(e);
+              // console.log(e);
               this.tran = e.detail.x;
               this.vert = e.detail.y;
               if (this.tran <= 188) {
@@ -386,570 +598,5 @@
 </script>
 
 <style lang="less">
-    .cx-card {
-         /*定位菜单*/
-        .moveMenuBox {
-            width: 100%;
-            height: 100%;
-            .moveMenuCont {
-                position: fixed;
-                z-index: 999;
-                width: 50rpx;
-                height: 50rpx;
-                .moveMenuPic {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .subject {
-                .topPic {
-                    width: 750rpx;
-                    height: 550rpx;
-                    .pic {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                .rightTopPic {
-                    position: absolute;
-                    top: 30rpx;
-                    right: 40rpx;
-                    width: 120rpx;
-                    height: 130rpx;
-                    .pic {
-                        margin-left: 20rpx;
-                        width: 80rpx;
-                        height: 60rpx;
-                    }
-                    .title {
-                        width: 120rpx;
-                        height: 42rpx;
-                        line-height: 42rpx;
-                        font-size: 30rpx;
-                        color: #fff;
-                    }
-                }
-                .contanter {
-                    .addCard {
-                        position: relative;
-                        top: -160rpx;
-                        margin-left: 20rpx;
-                        width: 710rpx;
-                        height: 430rpx;
-                        border-radius: 20rpx;
-                        background-color: #fff;
-                        box-shadow: 0 0 8rpx 8rpx rgba(0, 0, 0, 0.2);
-                        .addPic {
-                            margin: 132rpx 305rpx 20rpx 305rpx;
-                            width: 100rpx;
-                            height: 100rpx;
-                        }
-                        .add {
-                            text-align: center;
-                            color: #434656;
-                        }
-                    }
-                    .optionBox {
-                        margin: -100rpx 0 67rpx 20rpx;
-                        padding-left: 20rpx;
-                        width: 710rpx;
-                        height: auto;
-                        .switchCard {
-                            width: 195rpx;
-                            height: 42rpx;
-                            line-height: 42rpx;
-                            color: #50A8FC;
-                            font-size: 30rpx;
-                            float: left;
-                        }
-                        .modifyCard {
-                            width: 120rpx;
-                            height: 42rpx;
-                            margin-left: 195rpx;
-                            color: #50A8FC;
-                            font-size: 30rpx;
-                            float: left;
-                        }
-                        .setStyle {
-                            width: 120rpx;
-                            height: 42rpx;
-                            margin-left: 40rpx;
-                            color: #50A8FC;
-                            font-size: 30rpx;
-                            float: left;
-                        }
-                    }
-                    .shareCardBox {
-                        margin-left: 20rpx;
-                        width: 100%;
-                        .shareCard {
-                            margin-left: 47rpx;
-                            width: 530rpx;
-                            height: 96rpx;
-                            background: #50A8FC;
-                            border-radius: 43rpx;
-                            box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
-                            float: left;
-                            .text {
-                                margin: 23rpx auto;
-                                width: 144rpx;
-                                height: 50rpx;
-                                line-height: 50rpx;
-                                font-size: 36rpx;
-                                color: #fff;
-                            }
-                        }
-                        .qrCodeBox {
-                            margin-left: 30rpx;
-                            width: 85rpx;
-                            height: 105rpx;
-                            float: left;
-                            .qrCode {
-                                width: 54rpx;
-                                height: 54rpx;
-                                margin-left: 12rpx;
-                            }
-                            .text {
-                                width: 80rpx;
-                                height: 37rpx;
-                                line-height: 37rpx;
-                                color: #434656;
-                                font-size: 26rpx;
-                            }
-                        }
-                    }
-                    .modelSwitchBox {
-                        .optionsBox {
-                            margin-top: 80rpx;
-                            margin-left: 20rpx;
-                            padding: 0 75rpx;
-                            display: flex;
-                            .card {
-                                width: 60rpx;
-                                height: 42rpx;
-                                line-height: 42rpx;
-                                margin-right: 75rpx;
-                                font-size: 30rpx;
-                                justify-content: center;
-                            }
-                            .division {
-                                margin-right: 95rpx;
-                                justify-content: center;
-                                color: #979797;
-                            }
-                            .shop {
-                                width: 60rpx;
-                                height: 42rpx;
-                                line-height: 42rpx;
-                                margin-right: 75rpx;
-                                font-size: 30rpx;
-                                justify-content: center;
-                            }
-                            .show {
-                                width: 60rpx;
-                                height: 42rpx;
-                                line-height: 42rpx;
-                                font-size: 30rpx;
-                                justify-content: center;
-                            }
-                        }
-                        .cardModel {
-                            width: 100%;
-                            margin-top: 31rpx;
-                            .looksCareBox {
-                                margin-left: 20rpx;
-                                width: 100%;
-                                padding: 0 20rpx 0 20rpx;
-                                box-sizing: border-box;
-                                .looksCare {
-                                    margin-top: 31rpx;
-                                    .userAvatarBox {
-                                        display: flex;
-                                        float: left;
-                                        .avatarBox:not(:last-child) {
-                                            margin-right: 14rpx;
-                                        }
-                                        .avatarBox {
-                                            position: relative;
-                                            justify-content: center;
-                                            width: 85rpx;
-                                            height: 85rpx;
-                                            .avatar {
-                                                width: 80rpx;
-                                                height: 80rpx;
-                                                border-radius: 40rpx;
-                                            }
-                                            .crown {
-                                                position: absolute;
-                                                top: 0;
-                                                right: 0;
-                                                transform:rotate(45deg);
-                                                width: 28rpx;
-                                                height: 28rpx;
-                                            }
-                                            .Authentication {
-                                                position: absolute;
-                                                bottom: 0;
-                                                right: 0;
-                                                width: 28rpx;
-                                                height: 28rpx;
-                                            }
-                                        }
-                                    }
-                                    .whoLooksCareMe {
-                                        margin: 22rpx 0 22rpx 12rpx;
-                                        float: left;
-                                        width: 150rpx;
-                                        height: 37rpx;
-                                        /* display: flex;
-                                        flex-flow: row wrap; */
-                                        .text {
-                                            display: inline-block;
-                                            /* float: left; */
-                                            width: 130rpx;
-                                            height: 37rpx;
-                                            line-height: 37rpx;
-                                            font-size: 26rpx;
-                                            color: #434656;
-                                        }
-                                        .arrow {
-                                            display: inline-block;
-                                            /* float: left; */
-                                            width: 16rpx;
-                                            height: 26rpx;
-                                            line-height: 26rpx;
-                                            margin-left: 6rpx;
-                                            font-size: 34rpx;
-                                            color: #C7C7CC;
-                                        }
-                                    }
-                                }
-                            }
-                            .divisionDiv {
-                                margin: 40rpx 0;
-                                padding: 0 143rpx;
-                                .left {
-                                    color: #979797;
-                                    font-size: 26rpx;
-                                    display: inline-block;
-                                }
-                                .text {
-                                    margin: 0 20rpx;
-                                    width: 104rpx;
-                                    height: 37rpx;
-                                    font-size: 26rpx;
-                                    line-height: 37rpx;
-                                    color: #434656;
-                                    display: inline-block;
-                                }
-                                .right {
-                                    color: #979797;
-                                    font-size: 26rpx;
-                                    display: inline-block;
-                                }
-                            }
-                            .sign {
-                                margin-left: 30rpx;
-                                display: flex;
-                                flex-flow: row wrap;
-                                .signDetail:not(:last-child) {
-                                    margin-right: 20rpx;
-                                }
-                                .signDetail {
-                                    margin-top: 30rpx;
-                                    padding: 9rpx 24rpx 8rpx 32rpx;
-                                    width: auto;
-                                    height: 54rpx;
-                                    border: 1px solid #979797;
-                                    border-radius: 48rpx;
-                                    .pic {
-                                        width: 32rpx;
-                                        height: 32rpx;
-                                    }
-                                    .text {
-                                        margin-left: 16rpx;
-                                        display: inline;
-                                        min-width: 54rpx;
-                                        min-width: 108rpx;
-                                        height: 37rpx;
-                                        font-size: 26rpx;
-                                        line-height: 37rpx;
-                                        color: #434656;
-                                    }
-                                    .num {
-                                        margin-left: 16rpx;
-                                        display: inline;
-                                        min-width: 16rpx;
-                                        max-width: 29rpx;
-                                        height: 37rpx;
-                                        font-size: 26rpx;
-                                        line-height: 37rpx;
-                                        color: #434656;
-                                    }
-                                }
-                            }
-                            .mainContent {
-                                margin-top: 80rpx;
-                                .modelName {
-                                    .titleBox {
-                                        margin-top: 30rpx;
-                                        padding: 15rpx 40rpx;
-                                        box-sizing: border-box;
-                                        width: 100%;
-                                        height: 90rpx;
-                                        border-radius: 50rpx;
-                                        box-shadow: -10rpx 0 10rpx 2rpx rgba(0, 0, 0, .5),
-                                                    0 -10rpx 10rpx 2rpx rgba(0, 0, 0, .5);
-                                        .title {
-                                            margin-right: 6rpx;
-                                            width: 144rpx;
-                                            height: 50rpx;
-                                            line-height: 50rpx;
-                                            color: #434656;
-                                            font-size: 36rpx;
-                                            display: inline;
-                                        }
-                                        .titlePicBox {
-                                            display: inline;
-                                            .titlePic {
-                                                width: 29rpx;
-                                                height: 20rpx;
-                                            }
-                                        }
-                                    }
-                                }
-                                .contDetail {
-                                    margin: 30rpx 0;
-                                    height: 62rpx;
-                                    .audioCont {
-                                        .spot {
-                                            float: left;
-                                            .spotPic{
-                                                margin: 16rpx 20rpx 16rpx 0;
-                                                width: 30rpx;
-                                                height: 30rpx;
-                                            }
-                                        }
-                                        .vioceBox {
-                                            width: 261rpx;
-                                            height: 62rpx;
-                                            background-color: #50A8FC;
-                                            border-radius: 20rpx;
-                                            float: left;
-                                            .viocePic {
-                                                float: left;
-                                                margin: 13rpx 18rpx 12rpx 20rpx;
-                                                width: 34rpx;
-                                                height: 47rpx;
-                                            }
-                                            .text {
-                                                float: left;
-                                                margin: 10rpx 0;
-                                                width: 62rpx;
-                                                height: 42rpx;
-                                                color: #fff;
-                                                line-height: 42rpx;
-                                            }
-                                        }
-                                    }
-                                }
-                                .modelBox {
-                                    padding: 30rpx 40rpx;
-                                    width: 100%;
-                                    height: auto;
-                                    .articleBox1 {
-                                        margin-bottom: 30rpx;
-                                        .articlePic1 {
-                                            width: 670rpx;
-                                            height: 377rpx;
-                                        }
-                                    }
-                                    .articleCont1 {
-                                        margin-bottom: 30rpx;
-                                        .text {
-                                            width: 660rpx;
-                                            /* height: 210rpx; */
-                                            line-height: 42rpx;
-                                            font-size: 30rpx;
-                                            color: #434656;
-                                        }
-                                    }
-                                    .articleBox2{
-                                        margin-bottom: 30rpx;
-                                        .articlePic2 {
-                                            float: left;
-                                            margin-right: 30rpx;
-                                            width: 320rpx;
-                                            height: 320rpx;
-                                        }
-                                        .articlePic3 {
-                                            float: left;
-                                            width: 320rpx;
-                                            height: 320rpx;
-                                        }
-                                    }
-                                    .articleCont2 {
-                                        margin-bottom: 30rpx;
-                                        .text {
-                                            width: 660rpx;
-                                            font-size: 30rpx;
-                                            /* height: 210rpx; */
-                                            color: #434656;
-                                            line-height: 42rpx;
-                                        }
-                                    }
-                                    .articleCont3 {
-                                        margin-bottom: 30rpx;
-                                        .articlePic4 {
-                                            float: left;
-                                            margin-right: 30rpx;
-                                            width: 160rpx;
-                                            height: 160rpx;
-                                        }
-                                        .text {
-                                            float: left;
-                                            width: 480rpx;
-                                            /* height: 168rpx; */
-                                            line-height: 42rpx;
-                                            font-size: 30rpx;
-                                            color: #434656;
-                                        }
-                                    }
-                                    .teamArticleCont1 {
-                                        margin-top: 30rpx;
-                                        .teamArticlePic1 {
-                                            margin-left: 270rpx;
-                                            width: 160rpx;
-                                            height: 160rpx;
-                                            border-radius: 80rpx;
-                                            border: 2rpx solid #50A8FC;
-                                        }
-                                        .text {
-                                            margin: 20rpx auto;
-                                            width: 216rpx;
-                                            height: 50rpx;
-                                            line-height: 50rpx;
-                                            font-size: 36rpx;
-                                            color: #50A8FC;
-                                        }
-                                    }
-                                    .teamArticleCont2 {
-                                        margin-top: 10rpx;
-                                        .text {
-                                            width: 683rpx;
-                                            height: 111rpx;
-                                            color: #434656;
-                                            line-height: 37rpx;
-                                            font-size: 26rpx;
-                                        }
-                                    }
-                                    .teamArticleCont3 {
-                                        margin-top: 60rpx;
-                                        .teamArticlePi2 {
-                                            margin-left: 270rpx;
-                                            width: 160rpx;
-                                            height: 160rpx;
-                                            border-radius: 80rpx;
-                                            border: 2rpx solid #50A8FC;
-                                        }
-                                        .text {
-                                            margin: 20rpx auto;
-                                            width: 216rpx;
-                                            height: 50rpx;
-                                            line-height: 50rpx;
-                                            font-size: 36rpx;
-                                            color: #50A8FC;
-                                        }
-                                    }
-                                    .teamArticleCont4{
-                                        margin-top: 10rpx;
-                                        .text {
-                                            width: 683rpx;
-                                            height: 111rpx;
-                                            color: #434656;
-                                            line-height: 37rpx;
-                                            font-size: 26rpx;
-                                        }
-                                    }
-                                    .eventArticleBox {
-                                        margin-top: 30rpx;
-                                        .eventArticlePic1 {
-                                            margin-right: 30rpx;
-                                            width: 320rpx;
-                                            height: 427rpx;
-                                        }
-                                        .eventArticlePic2 {
-                                            width: 320rpx;
-                                            height: 427rpx;
-                                        }
-                                    }
-                                    .customArticle1 {
-                                        width: 100%;
-                                        margin-top: 20rpx;
-                                        .customArticlePic1 {
-                                            margin-right: 20rpx;
-                                            float: left;
-                                            width: 30rpx;
-                                            height: 30rpx;
-                                        }
-                                        .text {
-                                            float: left;
-                                            width: 620rpx;
-                                            color: #434656;
-                                            font-size: 30rpx;
-                                            line-height: 42rpx;
-                                        }
-                                    }
-                                    .customArticle2 {
-                                        .customArticlePic2 {
-                                            margin-right: 20rpx;
-                                            float: left;
-                                            width: 30rpx;
-                                            height: 30rpx;
-                                        }
-                                        .text {
-                                            float: left;
-                                            width: 620rpx;
-                                            color: #434656;
-                                            font-size: 30rpx;
-                                            line-height: 42rpx;
-                                        }
-                                    }
-                                }
-                                .addNewModel {
-                                    margin: 120rpx auto;
-                                    padding: 16rpx 86rpx;
-                                    box-sizing: border-box;
-                                    width: 300rpx;
-                                    height: 74rpx;
-                                    border-radius: 37rpx;
-                                    background-color: #50A8FC;
-                                    .text {
-                                        width: 128rpx;
-                                        height: 42rpx;
-                                        color: #fff;
-                                        line-height: 42rpx;
-                                        letter-spacing: 1.85rpx;
-                                        font-size: 30rpx;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .clear {
-                    clear: both;
-                }
-                .blueCss {
-                    color: #50A8FC;
-                    text-align: center;
-                    border-bottom: 2.5px solid #50A8FC;
-                }
-                .defaultCss {
-                    color: #434656;
-                }
-            }
-        }
-    }
+    
 </style>

src/static/less/cx-style.less

@@ -0,0 +1,1186 @@
+
+.cx-card {
+    // background-color: #F5F5F5;
+    /*定位菜单*/
+    .moveMenuBox {
+        width: 100%;
+        height: 100%;
+        .moveMenuCont {
+            position: fixed;
+            z-index: 999;
+            width: 50rpx;
+            height: 50rpx;
+
+            .moveMenuPic {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .subject {
+            .topPic {
+                width: 750rpx;
+                height: 550rpx;
+
+                .pic {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .rightTopPic {
+                position: absolute;
+                top: 30rpx;
+                right: 40rpx;
+                width: 120rpx;
+                height: 130rpx;
+
+                .pic {
+                    margin-left: 20rpx;
+                    width: 80rpx;
+                    height: 60rpx;
+                }
+
+                .title {
+                    width: 120rpx;
+                    height: 42rpx;
+                    line-height: 42rpx;
+                    font-size: 30rpx;
+                    color: #fff;
+                }
+            }
+
+            .contanter {
+                .addCard {
+                    position: relative;
+                    top: -160rpx;
+                    margin-left: 20rpx;
+                    width: 710rpx;
+                    height: 430rpx;
+                    border-radius: 20rpx;
+                    background-color: #fff;
+                    box-shadow: 0 0 8rpx 8rpx rgba(0, 0, 0, 0.2);
+
+                    .addPic {
+                        margin: 132rpx 305rpx 20rpx 305rpx;
+                        width: 100rpx;
+                        height: 100rpx;
+                    }
+
+                    .add {
+                        text-align: center;
+                        color: #434656;
+                    }
+                }
+
+                .optionBox {
+                    margin: -100rpx 0 67rpx 20rpx;
+                    padding-left: 20rpx;
+                    width: 710rpx;
+                    height: auto;
+                    .switchCard {
+                        width: 195rpx;
+                        height: 42rpx;
+                        line-height: 42rpx;
+                        color: #50A8FC;
+                        font-size: 30rpx;
+                        float: left;
+                    }
+
+                    .modifyCard {
+                        width: 120rpx;
+                        height: 42rpx;
+                        margin-left: 195rpx;
+                        color: #50A8FC;
+                        font-size: 30rpx;
+                        float: left;
+                    }
+
+                    .setStyle {
+                        width: 120rpx;
+                        height: 42rpx;
+                        margin-left: 40rpx;
+                        color: #50A8FC;
+                        font-size: 30rpx;
+                        float: left;
+                    }
+                }
+
+                .shareCardBox {
+                    margin-left: 20rpx;
+                    width: 100%;
+
+                    .shareCard {
+                        margin-left: 47rpx;
+                        width: 530rpx;
+                        height: 96rpx;
+                        background: #50A8FC;
+                        border-radius: 43rpx;
+                        box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
+                        float: left;
+
+                        .text {
+                            margin: 23rpx auto;
+                            width: 144rpx;
+                            height: 50rpx;
+                            line-height: 50rpx;
+                            font-size: 36rpx;
+                            color: #fff;
+                        }
+                    }
+
+                    .qrCodeBox {
+                        margin-left: 30rpx;
+                        width: 85rpx;
+                        height: 105rpx;
+                        float: left;
+
+                        .qrCode {
+                            width: 54rpx;
+                            height: 54rpx;
+                            margin-left: 12rpx;
+                        }
+
+                        .text {
+                            width: 80rpx;
+                            height: 37rpx;
+                            line-height: 37rpx;
+                            color: #434656;
+                            font-size: 26rpx;
+                        }
+                    }
+                }
+
+                .modelSwitchBox {
+                    .optionsBox {
+                        margin-top: 80rpx;
+                        margin-left: 20rpx;
+                        padding: 0 75rpx;
+                        display: flex;
+
+                        .card {
+                            width: 60rpx;
+                            height: 42rpx;
+                            line-height: 42rpx;
+                            margin-right: 75rpx;
+                            font-size: 30rpx;
+                            justify-content: center;
+                        }
+
+                        .division {
+                            margin-right: 95rpx;
+                            justify-content: center;
+                            color: #979797;
+                        }
+
+                        .shop {
+                            width: 60rpx;
+                            height: 42rpx;
+                            line-height: 42rpx;
+                            margin-right: 75rpx;
+                            font-size: 30rpx;
+                            justify-content: center;
+                        }
+
+                        .show {
+                            width: 60rpx;
+                            height: 42rpx;
+                            line-height: 42rpx;
+                            font-size: 30rpx;
+                            justify-content: center;
+                        }
+                    }
+
+                    .cardModel {
+                        width: 100%;
+                        margin-top: 31rpx;
+
+                        .looksCareBox {
+                            margin-left: 20rpx;
+                            width: 100%;
+                            padding: 0 20rpx 0 20rpx;
+                            box-sizing: border-box;
+
+                            .looksCare {
+                                margin-top: 31rpx;
+
+                                .userAvatarBox {
+                                    display: flex;
+                                    float: left;
+
+                                    .avatarBox:not(:last-child) {
+                                        margin-right: 14rpx;
+                                    }
+
+                                    .avatarBox {
+                                        position: relative;
+                                        justify-content: center;
+                                        width: 85rpx;
+                                        height: 85rpx;
+
+                                        .avatar {
+                                            width: 80rpx;
+                                            height: 80rpx;
+                                            border-radius: 40rpx;
+                                        }
+
+                                        .crown {
+                                            position: absolute;
+                                            top: 0;
+                                            right: 0;
+                                            transform: rotate(45deg);
+                                            width: 28rpx;
+                                            height: 28rpx;
+                                        }
+
+                                        .Authentication {
+                                            position: absolute;
+                                            bottom: 0;
+                                            right: 0;
+                                            width: 28rpx;
+                                            height: 28rpx;
+                                        }
+                                    }
+                                }
+
+                                .whoLooksCareMe {
+                                    margin: 22rpx 0 22rpx 12rpx;
+                                    float: left;
+                                    width: 165rpx;
+                                    height: 37rpx;
+                                    display: flex;
+
+                                    .text {
+                                        justify-content: flex-start;
+                                        width: 135rpx;
+                                        height: 37rpx;
+                                        line-height: 37rpx;
+                                        font-size: 26rpx;
+                                        color: #434656;
+                                    }
+
+                                    .arrow {
+                                        justify-content: flex-end;
+                                        width: 16rpx;
+                                        height: 26rpx;
+                                        line-height: 26rpx;
+                                        margin-left: 6rpx;
+                                        font-size: 34rpx;
+                                        color: #C7C7CC;
+                                    }
+                                }
+                            }
+                        }
+
+                        .divisionDiv {
+                            margin: 40rpx 0;
+                            padding: 0 143rpx;
+
+                            .left {
+                                color: #979797;
+                                font-size: 26rpx;
+                                display: inline-block;
+                            }
+
+                            .text {
+                                margin: 0 20rpx;
+                                width: 104rpx;
+                                height: 37rpx;
+                                font-size: 26rpx;
+                                line-height: 37rpx;
+                                color: #434656;
+                                display: inline-block;
+                            }
+
+                            .right {
+                                color: #979797;
+                                font-size: 26rpx;
+                                display: inline-block;
+                            }
+                        }
+
+                        .sign {
+                            margin-left: 30rpx;
+                            display: flex;
+                            flex-flow: row wrap;
+
+                            .signDetail:not(:last-child) {
+                                margin-right: 20rpx;
+                            }
+
+                            .signDetail {
+                                margin-top: 30rpx;
+                                padding: 9rpx 24rpx 8rpx 32rpx;
+                                width: auto;
+                                height: 54rpx;
+                                border: 1px solid #979797;
+                                border-radius: 48rpx;
+
+                                .pic {
+                                    width: 32rpx;
+                                    height: 32rpx;
+                                }
+
+                                .text {
+                                    margin-left: 16rpx;
+                                    display: inline;
+                                    min-width: 54rpx;
+                                    min-width: 108rpx;
+                                    height: 37rpx;
+                                    font-size: 26rpx;
+                                    line-height: 37rpx;
+                                    color: #434656;
+                                }
+
+                                .num {
+                                    margin-left: 16rpx;
+                                    display: inline;
+                                    min-width: 16rpx;
+                                    max-width: 29rpx;
+                                    height: 37rpx;
+                                    font-size: 26rpx;
+                                    line-height: 37rpx;
+                                    color: #434656;
+                                }
+                            }
+                        }
+
+                        .mainContent {
+                            margin-top: 80rpx;
+
+                            .modelName {
+                                .titleBox {
+                                    margin-top: 30rpx;
+                                    padding: 15rpx 40rpx;
+                                    box-sizing: border-box;
+                                    width: 100%;
+                                    height: 90rpx;
+                                    border-radius: 50rpx;
+                                    box-shadow: -10rpx 0 10rpx 2rpx rgba(0, 0, 0, .5),
+                                        0 -10rpx 10rpx 2rpx rgba(0, 0, 0, .5);
+
+                                    .title {
+                                        margin-right: 6rpx;
+                                        width: 144rpx;
+                                        height: 50rpx;
+                                        line-height: 50rpx;
+                                        color: #434656;
+                                        font-size: 36rpx;
+                                        display: inline;
+                                    }
+
+                                    .titlePicBox {
+                                        display: inline;
+
+                                        .titlePic {
+                                            width: 29rpx;
+                                            height: 20rpx;
+                                        }
+                                    }
+                                }
+                            }
+
+                            .contDetail {
+                                margin: 30rpx 0;
+                                height: 62rpx;
+
+                                .audioCont {
+                                    .spot {
+                                        float: left;
+
+                                        .spotPic {
+                                            margin: 16rpx 20rpx 16rpx 0;
+                                            width: 30rpx;
+                                            height: 30rpx;
+                                        }
+                                    }
+
+                                    .vioceBox {
+                                        width: 261rpx;
+                                        height: 62rpx;
+                                        background-color: #50A8FC;
+                                        border-radius: 20rpx;
+                                        float: left;
+
+                                        .viocePic {
+                                            float: left;
+                                            margin: 13rpx 18rpx 12rpx 20rpx;
+                                            width: 34rpx;
+                                            height: 47rpx;
+                                        }
+
+                                        .text {
+                                            float: left;
+                                            margin: 10rpx 0;
+                                            width: 62rpx;
+                                            height: 42rpx;
+                                            color: #fff;
+                                            line-height: 42rpx;
+                                        }
+                                    }
+                                }
+                            }
+
+                            .modelBox {
+                                padding: 30rpx 40rpx;
+                                width: 100%;
+                                height: auto;
+
+                                .articleBox1 {
+                                    margin-bottom: 30rpx;
+
+                                    .articlePic1 {
+                                        width: 670rpx;
+                                        height: 377rpx;
+                                    }
+                                }
+
+                                .articleCont1 {
+                                    margin-bottom: 30rpx;
+
+                                    .text {
+                                        width: 660rpx;
+                                        /* height: 210rpx; */
+                                        line-height: 42rpx;
+                                        font-size: 30rpx;
+                                        color: #434656;
+                                    }
+                                }
+
+                                .articleBox2 {
+                                    margin-bottom: 30rpx;
+
+                                    .articlePic2 {
+                                        float: left;
+                                        margin-right: 30rpx;
+                                        width: 320rpx;
+                                        height: 320rpx;
+                                    }
+
+                                    .articlePic3 {
+                                        float: left;
+                                        width: 320rpx;
+                                        height: 320rpx;
+                                    }
+                                }
+
+                                .articleCont2 {
+                                    margin-bottom: 30rpx;
+
+                                    .text {
+                                        width: 660rpx;
+                                        font-size: 30rpx;
+                                        /* height: 210rpx; */
+                                        color: #434656;
+                                        line-height: 42rpx;
+                                    }
+                                }
+
+                                .articleCont3 {
+                                    margin-bottom: 30rpx;
+
+                                    .articlePic4 {
+                                        float: left;
+                                        margin-right: 30rpx;
+                                        width: 160rpx;
+                                        height: 160rpx;
+                                    }
+
+                                    .text {
+                                        float: left;
+                                        width: 480rpx;
+                                        /* height: 168rpx; */
+                                        line-height: 42rpx;
+                                        font-size: 30rpx;
+                                        color: #434656;
+                                    }
+                                }
+
+                                .teamArticleCont1 {
+                                    margin-top: 30rpx;
+
+                                    .teamArticlePic1 {
+                                        margin-left: 270rpx;
+                                        width: 160rpx;
+                                        height: 160rpx;
+                                        border-radius: 80rpx;
+                                        border: 2rpx solid #50A8FC;
+                                    }
+
+                                    .text {
+                                        margin: 20rpx auto;
+                                        width: 216rpx;
+                                        height: 50rpx;
+                                        line-height: 50rpx;
+                                        font-size: 36rpx;
+                                        color: #50A8FC;
+                                    }
+                                }
+
+                                .teamArticleCont2 {
+                                    margin-top: 10rpx;
+
+                                    .text {
+                                        width: 683rpx;
+                                        height: 111rpx;
+                                        color: #434656;
+                                        line-height: 37rpx;
+                                        font-size: 26rpx;
+                                    }
+                                }
+
+                                .teamArticleCont3 {
+                                    margin-top: 60rpx;
+
+                                    .teamArticlePi2 {
+                                        margin-left: 270rpx;
+                                        width: 160rpx;
+                                        height: 160rpx;
+                                        border-radius: 80rpx;
+                                        border: 2rpx solid #50A8FC;
+                                    }
+
+                                    .text {
+                                        margin: 20rpx auto;
+                                        width: 216rpx;
+                                        height: 50rpx;
+                                        line-height: 50rpx;
+                                        font-size: 36rpx;
+                                        color: #50A8FC;
+                                    }
+                                }
+
+                                .teamArticleCont4 {
+                                    margin-top: 10rpx;
+
+                                    .text {
+                                        width: 683rpx;
+                                        height: 111rpx;
+                                        color: #434656;
+                                        line-height: 37rpx;
+                                        font-size: 26rpx;
+                                    }
+                                }
+
+                                .eventArticleBox {
+                                    margin-top: 30rpx;
+
+                                    .eventArticlePic1 {
+                                        margin-right: 30rpx;
+                                        width: 320rpx;
+                                        height: 427rpx;
+                                    }
+
+                                    .eventArticlePic2 {
+                                        width: 320rpx;
+                                        height: 427rpx;
+                                    }
+                                }
+
+                                .customArticle1 {
+                                    width: 100%;
+                                    margin-top: 20rpx;
+
+                                    .customArticlePic1 {
+                                        margin-right: 20rpx;
+                                        float: left;
+                                        width: 30rpx;
+                                        height: 30rpx;
+                                    }
+
+                                    .text {
+                                        float: left;
+                                        width: 620rpx;
+                                        color: #434656;
+                                        font-size: 30rpx;
+                                        line-height: 42rpx;
+                                    }
+                                }
+
+                                .customArticle2 {
+                                    .customArticlePic2 {
+                                        margin-right: 20rpx;
+                                        float: left;
+                                        width: 30rpx;
+                                        height: 30rpx;
+                                    }
+
+                                    .text {
+                                        float: left;
+                                        width: 620rpx;
+                                        color: #434656;
+                                        font-size: 30rpx;
+                                        line-height: 42rpx;
+                                    }
+                                }
+                            }
+
+                            .addNewModel {
+                                margin: 120rpx auto;
+                                padding: 16rpx 86rpx;
+                                box-sizing: border-box;
+                                width: 300rpx;
+                                height: 74rpx;
+                                border-radius: 37rpx;
+                                background-color: #50A8FC;
+                                .text {
+                                    width: 128rpx;
+                                    height: 42rpx;
+                                    color: #fff;
+                                    line-height: 42rpx;
+                                    letter-spacing: 1.85rpx;
+                                    font-size: 30rpx;
+                                }
+                            }
+                        }
+                    }
+                    .shopModel {
+                        .switchDiv {
+                            margin: 51rpx 0 36rpx 40rpx;
+                            width: 100%;
+                            height: 102rpx;
+                            display: flex;
+                            .switchPic {
+                                margin-top: 8rpx;
+                                width: 130rpx;
+                                height: 72rpx;
+                            }
+                            .text {
+                                margin: 24rpx 0 36rpx 10rpx;
+                                width: 120rpx;
+                                height: 42rpx;
+                                color: #434656;
+                                line-height: 42rpx;
+                                font-size: 30rpx;
+                            }
+                        }
+                        .searchDiv {
+                            margin: 0 30rpx 10rpx 30rpx;
+                            border: 1px solid #797979;
+                            border-radius: 46.5rpx;
+                            width: 690rpx;
+                            height: 74rpx;
+                            display: flex;
+                            .searchPic {
+                                width: 44rpx;
+                                height: 42rpx;
+                                margin: 16rpx 19rpx 16rpx 40rpx;
+                            }
+                            .input {
+                                margin-top: 7rpx;
+                                width: 565rpx;
+                                height: 60rpx;
+                                line-height: 54rpx;
+                                padding: 3rpx 5rpx;
+                                box-sizing: border-box;
+                            }
+                        }
+                        .optionBox {
+                            margin-top: 10rpx;
+                            padding: 15rpx 0;
+                            box-sizing: border-box;
+                            width: 100%;
+                            height: 80rpx;
+                            display: flex;
+                            .options {
+                                margin-left: 15rpx;
+                                padding: 15rpx 0;
+                                box-sizing: border-box;
+                                height: 80rpx;
+                                display: flex;
+                                .text1 {
+                                    margin-top: 4rpx;
+                                    margin-right: 30rpx;
+                                    width: 120rpx;
+                                    height: 42rpx;
+                                    line-height: 42rpx;
+                                    color: #4A4A4A;
+                                    font-size: 30rpx;
+                                }
+                                .labelText {
+                                    margin-right: 30rpx;
+                                    padding: 9rpx 12rpx 8rpx 12rpx;
+                                    box-sizing: border-box;
+                                    border-radius: 30rpx;
+                                    width: 125rpx;
+                                    height: 50rpx;
+                                    font-size: 24rpx;
+                                    line-height: 33rpx;
+                                    color: #50A8FC;
+                                    border: 1rpx solid #50A8FC;
+                                }
+                            }
+                            .separate {
+                                height: 60rpx;
+                                margin: 10rpx 0;
+                                border: 0.5px solid #979797;
+                            }
+                            .allOption {
+                                margin-top: 19rpx;
+                                margin-left: 30rpx;
+                                width: 60rpx;
+                                height: 42rpx;
+                                line-height: 42rpx;
+                                font-size: 30rpx;
+                                color: #4A4A4A;
+                            }
+                        }
+                        .everyModel {
+                            width: 100%;
+                            height: 50rpx;
+                            .titleBox {
+                                padding: 60rpx 0 0 30rpx;
+                                box-sizing: border-box;
+                                display: flex;
+                                .text {
+                                    width: 125rpx;
+                                    height: 50rpx;
+                                    line-height: 50rpx;
+                                    font-size: 36rpx;
+                                    color: #434656;
+                                }
+                                .arrowPic {
+                                    margin: 20rpx 475rpx 20rpx 10rpx;
+                                    width: 19rpx;
+                                    height: 10rpx;
+                                }
+                                .morePic {
+                                    margin: 20rpx 0;
+                                    width: 42rpx;
+                                    height: 10rpx;
+                                }
+                            }
+                            .bannerBox {
+                                margin-top: 30rpx;
+                                width: 100%;
+                                height: 417rpx;
+                                .bannerPicBox {
+                                    .bannerPic {
+                                        width: 100%;
+                                        height: 417rpx;
+                                    }
+                                }
+                            }
+                            .haveBgDiv {
+                                width: 100%;
+                                height: auto;
+                                background-color: #f5f5f5;
+                                .titleBox {
+                                    padding: 60rpx 0 0 30rpx;
+                                    box-sizing: border-box;
+                                    display: flex;
+
+                                    .text {
+                                        width: 144rpx;
+                                        height: 50rpx;
+                                        line-height: 50rpx;
+                                        font-size: 36rpx;
+                                        color: #434656;
+                                    }
+
+                                    .arrowPic {
+                                        margin: 20rpx 475rpx 20rpx 10rpx;
+                                        width: 19rpx;
+                                        height: 10rpx;
+                                    }
+
+                                    .morePic {
+                                        margin: 20rpx 0;
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                                .goodsListBox {
+                                    padding-left: 30rpx;
+                                    box-sizing: border-box;
+                                    background-color: #f5f5f5;
+                                    padding-top: 10rpx;
+                                    box-sizing: border-box;
+                                    display: flex;
+                                    flex-wrap: wrap;
+                                    .goodsList {
+                                        margin-top: 20rpx;
+                                        margin-right: 20rpx;
+                                        width: 335rpx;
+                                        height: 597rpx;
+                                        justify-content: space-between;
+                                        background-color: #fff;
+                                        border-radius: 20rpx;
+                                        .goodsImgBox {
+                                            position: relative;
+                                            .goodsPic {
+                                                width: 335rpx;
+                                                height: 335rpx;
+                                                border-radius: 20rpx 20rpx 0 0;
+                                            }
+                                            .goodsSign {
+                                                position: absolute;
+                                                bottom: 0;
+                                                left: 0;
+                                                width: 70rpx;
+                                                height: 40rpx;
+                                                line-height: 40rpx;
+                                                text-align: center;
+                                                color: #fff;
+                                                font-size: 24rpx;
+                                                border-radius: 0 100rpx 100rpx 0;
+                                                background-color: #D0021B;
+                                            }
+                                        }
+                                        .goodsTitle {
+                                            margin: 10rpx 13rpx 10rpx 10rpx;
+                                            width: 312rpx;
+                                            height: 66rpx;
+                                            line-height: 33rpx;
+                                            font-size: 24rpx;
+                                            color: #434656;
+                                        }
+                                        .goodsDescribe {
+                                            margin: 0 13rpx 30rpx 10rpx;
+                                            width: 312rpx;
+                                            height: 84rpx;
+                                            font-size: 20rpx;
+                                            line-height: 28rpx;
+                                            color: #9B9B9B;
+                                            overflow: hidden;
+                                            word-break: break-all;
+                                            -webkit-box-orient: vertical;
+                                            -webkit-line-clamp: 3;
+                                            text-overflow: ellipsis;
+                                        }
+                                        .numBox {
+                                            width: 315rpx;
+                                            height: 42rpx;
+                                            display: flex;
+                                            .goodsStock {
+                                                margin-top:14rpx;
+                                                margin-right: 139rpx;
+                                                padding-left: 10rpx;
+                                                width: 94rpx;
+                                                height: 28rpx;
+                                                font-size: 20rpx;
+                                                line-height: 28rpx;
+                                                color: #9B9B9B;
+                                            }
+                                            .goodsPrice {
+                                                width: 82rpx;
+                                                height: 42rpx;
+                                                line-height: 42rpx;
+                                                font-size: 30rpx;
+                                                color: #D0021B;
+                                            }
+                                        }
+                                    }
+                                    .showMoreBox {
+                                        margin-top: 40rpx;
+                                        width: 100%;
+                                        height: 45rpx;
+                                        background-color: #f5f5f5;
+                                        .title {
+                                            float: right;
+                                            margin-right:30rpx;
+                                            width: 120rpx;
+                                            height: 42rpx;
+                                            line-height: 42rpx;
+                                            font-size: 30rpx;
+                                            color: #434656;
+                                        }
+                                    }
+                                }
+                                .BoutiqueClass {
+                                    background-color: #f5f5f5;
+                                    .classPicBox {
+                                        position: relative;
+                                        margin: 30rpx 0 0 30rpx;
+                                        width: 690rpx;
+                                        height: 294rpx;
+                                        .classPic {
+                                            width: 100%;
+                                            height: 100%;
+                                        }
+                                        .commentText {
+                                            position: absolute;
+                                            bottom: 0;
+                                            left: 0;
+                                            padding: 14rpx 8rpx 13rpx 10rpx;
+                                            box-sizing: border-box;
+                                            width: 690rpx;
+                                            height: 60rpx;
+                                            line-height: 33rpx;
+                                            font-size: 24rpx;
+                                            color: #fff;
+                                            background-color: rgba(0, 0, 0, 0.5);
+                                        }
+                                    }
+                                }
+                                .newClassBox {
+                                    margin: 30rpx 40rpx;
+                                    width: 670rpx;
+                                    height: 217rpx;
+                                    border-radius: 20rpx;
+                                    display: flex;
+                                    background-color: #fff;
+                                    .classPicBox {
+                                        margin-right: 15rpx;
+                                        width: 217rpx;
+                                        height: 217rpx;
+                                        border-radius: 20rpx 0 0 20rpx;
+                                        .classPic {
+                                            border-radius: 20rpx 0 0 20rpx;
+                                            width: 100%;
+                                            height: 100%;
+                                        }
+                                    }
+                                    .detailBox {
+                                        .title{
+                                            margin: 20rpx 30rpx 10rpx 0;
+                                            width: 408rpx;
+                                            height: 33rpx;
+                                            line-height: 33rpx;
+                                            font-size: 24rpx;
+                                            color: #434656;
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            text-overflow: ellipsis;
+                                        }
+                                        .describeText {
+                                            width: 420rpx;
+                                            max-height: 84rpx;
+                                            line-height: 28rpx;
+                                            font-size: 20rpx;
+                                            color: #9B9B9B;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            word-break: break-all;
+                                            -webkit-box-orient: vertical;
+                                            -webkit-line-clamp: 3;
+                                        }
+                                        .numBox {
+                                            margin: 16rpx;
+                                            width: 100%;
+                                            height: 42rpx;
+                                            display: flex;
+                                            .goodsStock {
+                                                margin-top: 11rpx;
+                                                margin-right: 252rpx;
+                                                // padding-left: 10rpx;
+                                                width: 84rpx;
+                                                height: 28rpx;
+                                                font-size: 20rpx;
+                                                line-height: 28rpx;
+                                                color: #9B9B9B;
+                                            }
+                                            .goodsPrice {
+                                                width: 82rpx;
+                                                height: 42rpx;
+                                                line-height: 42rpx;
+                                                font-size: 30rpx;
+                                                color: #D0021B;
+                                            }
+                                        }
+                                    }
+                                }
+                                .showMoreBox {
+                                    margin-top: 40rpx;
+                                    width: 100%;
+                                    height: 45rpx;
+                                    .title {
+                                        float: right;
+                                        margin-right: 30rpx;
+                                        width: 120rpx;
+                                        height: 42rpx;
+                                        line-height: 42rpx;
+                                        font-size: 30rpx;
+                                        color: #434656;
+                                    }
+                                }
+                                .slideSwitch {
+                                    width: auto;
+                                    height: 430rpx;
+                                    overflow: auto;
+                                    // overflow-y: hidden;
+                                    display: flex;
+                                    // padding: 0 30rpx 10rpx 30rpx;
+                                    // padding-right: 30rpx;
+                                    // box-sizing: border-box;
+                                    &::-webkit-scrollbar {
+                                        display: none;
+                                    }
+                                    .classRecommendBox {
+                                        margin: 30rpx 30rpx 0 30rpx;
+                                        .classRecommendPicBox {
+                                            position: relative;
+                                            width: 420rpx;
+                                            height: 388rpx;
+                                            border-radius: 20rpx;
+                                            .classRecommendPic {
+                                                width: 100%;
+                                                height: 100%;
+                                                border-radius: 20rpx;
+                                            }
+                                            .topBox {
+                                                position: absolute;
+                                                top: 0;
+                                                left: 0;
+                                                width: 420rpx;
+                                                height: 140rpx;
+                                                border-radius: 20rpx 20rpx 0 0;
+                                                background:rgba(11, 24, 41, 0.8);
+                                                .text1 {
+                                                    margin: 30rpx 0 10rpx 30rpx;
+                                                    width: 120rpx;
+                                                    height: 42rpx;
+                                                    line-height: 42rpx;
+                                                    font-size: 30rpx;
+                                                    color: #fff;
+                                                }
+                                                .text2 {
+                                                    margin-left: 30rpx;
+                                                    width: 162rpx;
+                                                    height: 28rpx;
+                                                    line-height: 28rpx;
+                                                    font-size: 20rpx;
+                                                    color: #fff;
+                                                }
+                                            }
+                                            .bottomBox {
+                                                position: absolute;
+                                                bottom: 0;
+                                                left: 0;
+                                                padding-top: 10rpx;
+                                                box-sizing: border-box;
+                                                width: 420rpx;
+                                                height: 247rpx;
+                                                border-radius: 0 0 20rpx 20rpx;
+                                                background:rgba(11, 24, 41, 0.5);
+                                                .text1 {
+                                                    margin: 20rpx 23rpx 20rpx 30rpx;
+                                                    width: 362rpx;
+                                                    height: 33rpx;
+                                                    line-height: 33rpx;
+                                                    font-size: 24rpx;
+                                                    color: #fff;
+                                                    overflow: hidden;
+                                                    white-space: nowrap;
+                                                    text-overflow: ellipsis;
+                                                }
+                                                .text2 {
+                                                    margin-left: 60rpx;
+                                                    width: 155rpx;
+                                                    height: 28rpx;
+                                                    line-height: 28rpx;
+                                                    color: #fff;
+                                                    font-size: 20rpx;
+                                                }
+                                            }
+                                        }
+                                    }
+                                    .classRecommendBox2 {
+                                        margin: 30rpx 30rpx 0 0;
+                                        .classRecommendPicBox {
+                                            position: relative;
+                                            width: 420rpx;
+                                            height: 387rpx;
+                                            border-radius: 20rpx;
+                                            .classRecommendPic {
+                                                width: 100%;
+                                                height: 100%;
+                                                border-radius: 20rpx;
+                                            }
+                                            .topBox {
+                                                position: absolute;
+                                                top: 0;
+                                                left: 0;
+                                                width: 420rpx;
+                                                height: 140rpx;
+                                                border-radius: 20rpx 20rpx 0 0;
+                                                background:rgba(255, 255, 255, 0.8);
+                                                .text1 {
+                                                    margin: 30rpx 0 10rpx 30rpx;
+                                                    width: 120rpx;
+                                                    height: 42rpx;
+                                                    line-height: 42rpx;
+                                                    font-size: 30rpx;
+                                                    color: #000;
+                                                }
+                                                .text2 {
+                                                    margin-left: 30rpx;
+                                                    width: 162rpx;
+                                                    height: 28rpx;
+                                                    line-height: 28rpx;
+                                                    font-size: 20rpx;
+                                                    color: #000;
+                                                }
+                                            }
+                                            .bottomBox {
+                                                position: absolute;
+                                                bottom: 0;
+                                                left: 0;
+                                                padding-top: 10rpx;
+                                                box-sizing: border-box;
+                                                width: 420rpx;
+                                                height: 247rpx;
+                                                border-radius: 0 0 20rpx 20rpx;
+                                                background:rgba(255, 255, 255, 0.6);
+                                                .text1 {
+                                                    margin: 20rpx 23rpx 20rpx 30rpx;
+                                                    width: 362rpx;
+                                                    height: 33rpx;
+                                                    line-height: 33rpx;
+                                                    font-size: 24rpx;
+                                                    color: #000;
+                                                    overflow: hidden;
+                                                    white-space: nowrap;
+                                                    text-overflow: ellipsis;
+                                                }
+                                                .text2 {
+                                                    margin-left: 60rpx;
+                                                    width: 155rpx;
+                                                    height: 28rpx;
+                                                    line-height: 28rpx;
+                                                    color: #000;
+                                                    font-size: 20rpx;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                                .addNewModel {
+                                    margin: 100rpx auto;
+                                    padding: 16rpx 86rpx;
+                                    box-sizing: border-box;
+                                    width: 300rpx;
+                                    height: 74rpx;
+                                    border-radius: 37rpx;
+                                    background-color: #50A8FC;
+                                    .text {
+                                        width: 128rpx;
+                                        height: 42rpx;
+                                        color: #fff;
+                                        line-height: 42rpx;
+                                        letter-spacing: 1.85rpx;
+                                        font-size: 30rpx;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .clear {
+                clear: both;
+            }
+
+            .blueCss {
+                color: #50A8FC;
+                text-align: center;
+                border-bottom: 2.5px solid #50A8FC;
+            }
+
+            .defaultCss {
+                color: #434656;
+            }
+        }
+    }
+}