加载后台数据,更新内容信息

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_zbrx1cqxr8pycik9.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_vito22cq6ncanhfr.css">
   {{ HEAD }}
   <script>
     (function (w, d) {

components/mobile/Home.vue

@@ -18,7 +18,7 @@
         <div class="home-input">
           <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="keyword"
                  @focus.stop.prevent="onFocus()"/>
-          <span @click="onSearch()"><i class="fa fa-camera-retro"></i></span>
+          <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
         </div>
       </div>
     </div>
@@ -66,7 +66,7 @@
     <div class="home-search-list" v-if="associate && keyword">
       <div>
         <div class="search-list-top">
-          <h5>历史搜索：<i class="fa fa-camera-retro"></i></h5>
+          <h5>历史搜索：<i class="iconfont icon-delete"></i></h5>
           <div class="search-list-item">
             <a href="#">smk212121288</a>
             <a href="#">CPU</a>
@@ -77,7 +77,7 @@
           </div>
         </div>
         <div class="search-list-bottom">
-          <h5><i class="fa fa-camera-retro"></i>热搜器件</h5>
+          <h5><i class="iconfont icon-remensousuo"></i>热搜器件</h5>
           <span v-for="item in hotwords">
           <nuxt-link to="item.url" >{{item.name}}</nuxt-link>
         </span>
@@ -131,202 +131,208 @@
     font-size:.28rem;
     margin-bottom:1rem;
     margin-top:.88rem;
-  .home-header{
-    width:100%;
-    padding-top:1.3rem;
-    background:#ecede2;
-    padding-bottom:1rem;
-  .home-top{
-    text-align: center;
-    margin-bottom:.4rem;
-  p{
-    font-size:.32rem;
-    color:rgb(23,21,26);
-  }
-  }
-  .home-search{
-    width:6rem;
-    line-height: .3rem;
-    margin:0 auto;
-  ul{
-    display:inline-flex;
-  li{
-    flex:1;
-    text-align:center;
-  span{
-    display:inline-block;
-    width:.72rem;
-    line-height:.32rem;
-    height:.32rem;
-    background: #fff;
-    color:#000;
-    border-radius: .05rem .05rem 0 0 ;
-  }
-  }
-  li.active{
-  span{
-    background: #3c7cf5;
-    color:#fff;
-    cursor:pointer;
-  }
-  }
-  }
-  input{
-    width:6rem;
-    padding: 0 1.2rem 0 .16rem;
-    margin-right:-1rem;
-    font-size:.24rem;
-    line-height: .61rem;
-    border:.02rem solid #3c7cf5;
-    border-radius:.05rem;
-  }
-  span{
-    display:inline-block;
-    text-align: center;
-    width:1rem;
-    height:.63rem;
-    line-height: .63rem;
-    font-size:.23rem;
-    border-left:none;
-    border-radius:   0 .05rem .05rem 0;
-    background: #3c7cf5;
-    color:#fff;
-  }
-  }
-  }
-  }
-  .home-main{
-    width:100%;
-    display:flex;
-    justify-content:space-between;
-    flex-wrap:wrap;
-    text-align: center;
-    padding-top:1rem;
-    background: #f7fbff;
-  }
-  .home-main a.home-main-content {
-    width:33%;
-    margin-bottom:.55rem;
-  }
-  .home-main .home-main-content div{
-    border-radius: .2rem;
-    width:1.14rem;
-    height:1.14rem;
-    margin:0 auto;
-    position:relative;
-  }
-  .home-main .home-main-content div:first-child{
-    background:rgb(255,48,100);
-  }
-  .home-main .home-main-content:nth-child(2) div{
-    background:rgb(250,103,67);
-  }
-  .home-main .home-main-content:nth-child(3) div {
-    background: rgb(252, 184, 54);
-  }
-  .home-main .home-main-content:nth-child(4) div{
-    background:rgb(99,147,255);
-  }
-  .home-main .home-main-content:nth-child(5) div{
-    background:rgb(67,201,173);
-  }
-  .home-main .home-main-content:last-child div{
-    background:rgb(135,201,79);
-  }
-  .home-main .home-main-content div>img{
-    width: .8rem;
-    height:.8rem;
-    position:absolute;
-    left:50%;
-    top:50%;
-    margin-left:-36%;
-    margin-top:-36%;
-  }
+    .home-header{
+      width:100%;
+      padding-top:1.3rem;
+      background:#ecede2;
+      padding-bottom:1rem;
+      .home-top{
+        text-align: center;
+        margin-bottom:.4rem;
+        p{
+          font-size:.32rem;
+          color:rgb(23,21,26);
+        }
+      }
+      .home-search{
+        width:6rem;
+        line-height: .3rem;
+        margin:0 auto;
+        ul{
+          display:inline-flex;
+        li{
+          flex:1;
+          text-align:center;
+          >span{
+             display:inline-block;
+             width:.72rem;
+             line-height:.33rem;
+             height:.33rem;
+             background: #fff;
+             color:#000;
+             border-radius: .05rem .05rem 0 0 ;
+           }
+          }
+          li.active span{
+              background: #3c7cf5;
+              color:#fff;
+              cursor:pointer;
+          }
+        }
+        .home-input{
+          input{
+            width:6rem;
+            padding: 0 1.2rem 0 .16rem;
+            margin-right:-1rem;
+            font-size:.24rem;
+            line-height: .64rem;
+            border:.02rem solid #3c7cf5;
+            border-radius:.05rem;
+          }
+          span{
+             display:inline-block;
+             text-align: center;
+             width:1rem;
+             height:.65rem;
+             line-height: .64rem;
+             font-size:.23rem;
+             border-left:none;
+             border-radius:   0 .05rem .05rem 0;
+             background: #3c7cf5;
+             color:#fff;
+            i{
+              font-size: .33rem;
+            }
+          }
+        }
+      }
+    }
+    }
+    .home-main{
+      width:100%;
+      display:flex;
+      justify-content:space-between;
+      flex-wrap:wrap;
+      text-align: center;
+      padding-top:1rem;
+      background: #f7fbff;
+    }
+    .home-main a.home-main-content {
+      width:33%;
+      margin-bottom:.55rem;
+    }
+    .home-main .home-main-content div{
+      border-radius: .2rem;
+      width:1.14rem;
+      height:1.14rem;
+      margin:0 auto;
+      position:relative;
+    }
+    .home-main .home-main-content div:first-child{
+      background:rgb(255,48,100);
+    }
+    .home-main .home-main-content:nth-child(2) div{
+      background:rgb(250,103,67);
+    }
+    .home-main .home-main-content:nth-child(3) div {
+      background: rgb(252, 184, 54);
+    }
+    .home-main .home-main-content:nth-child(4) div{
+      background:rgb(99,147,255);
+    }
+    .home-main .home-main-content:nth-child(5) div{
+      background:rgb(67,201,173);
+    }
+    .home-main .home-main-content:last-child div{
+      background:rgb(135,201,79);
+    }
+    .home-main .home-main-content div>img{
+      width: .8rem;
+      height:.8rem;
+      position:absolute;
+      left:50%;
+      top:50%;
+      margin-left:-36%;
+      margin-top:-36%;
+    }
 
-  .home-main .home-main-content p{
-    font-size:.28rem;
-    color:rgb(51,51,51);
-    line-height: .52rem;
-  }
-  .home-main .home-main-content h2{
-    font-size:.3rem;
-    color:#ff7800;
-    line-height: .32rem;
-    margin:0;
-    margin-top:.1rem;
-  }
+    .home-main .home-main-content p{
+      font-size:.28rem;
+      color:rgb(51,51,51);
+      line-height: .52rem;
+    }
+    .home-main .home-main-content h2{
+      font-size:.3rem;
+      color:#ff7800;
+      line-height: .32rem;
+      margin:0;
+      margin-top:.1rem;
+    }
 
-  /*  搜索记录  */
-  .home-search-list {
-    position:absolute;
-    top:4.5rem;
-    width:100%;
-    min-height: 4rem;
-    background: #fff;
-  }
-  .home-search-list div{
-    width:6.55rem;
-    margin:0 auto;
-    margin-top:.1rem;
-    padding-bottom:.2rem;
-  .search-list-top{
-  h5{
-    font-size:.3rem;
-    position:relative;
-    line-height: .4rem;
-    color:rgb(102,102,102);
-  i{
-    position:absolute;
-    right:0;
-  }
-  }
-  .search-list-item{
-  a{
-    display:inline-block;
-    font-size:.28rem;
-    line-height: .45rem;
-    color:rgb(102,102,102);
-    background: #fff;
-    padding:0 .1rem;
-    width:2.18rem;
-    overflow:hidden;
-    text-overflow : ellipsis;
-  &:nth-child(2){
-     border-left:1px solid #a5a6a6;
-     border-right:1px solid #a5a6a6;
-     text-align: center;
-   }
-  &:nth-child(5){
-     border-left:1px solid #a5a6a6;
-     border-right:1px solid #a5a6a6;
-     text-align: center;
-   }
-  }
-  }
-  }
-  .search-list-bottom{
-    margin-top:-.07rem;
-  h5{
-    color:rgb(255,120,0);
-    font-size:.3rem;
-    text-align: center;
-  i{
-    margin-right:.15rem;
-  }
-  }
-  a{
-    display:inline-block;
-    font-size:.24rem;
-    color:rgb(255,120,0);
-    background: #fff;
-    max-width:1.62rem;
-    line-height: .35rem;
-    padding:0 .1rem;
-    border:1px solid rgb(255,120,0);
-    overflow:hidden;
-    text-overflow : ellipsis;
-    margin-left:.12rem;
-  }
-  }
+    /*  搜索记录  */
+    .home-search-list {
+      position:absolute;
+      top:4.5rem;
+      width:100%;
+      min-height: 4rem;
+      background: #fff;
+    }
+    .home-search-list div{
+      width:6.55rem;
+      margin:0 auto;
+      margin-top:.1rem;
+      padding-bottom:.2rem;
+    .search-list-top{
+    h5{
+      font-size:.3rem;
+      position:relative;
+      line-height: .4rem;
+      color:rgb(102,102,102);
+    i{
+      position:absolute;
+      right:.2rem;
+      top:.1rem;
+      color:#4f8afb;
+      font-size: .35rem;
+    }
+    }
+    .search-list-item{
+    a{
+      display:inline-block;
+      font-size:.28rem;
+      line-height: .45rem;
+      color:rgb(102,102,102);
+      background: #fff;
+      padding:0 .1rem;
+      width:2.18rem;
+      overflow:hidden;
+      text-overflow : ellipsis;
+    &:nth-child(2){
+       border-left:1px solid #a5a6a6;
+       border-right:1px solid #a5a6a6;
+       text-align: center;
+     }
+    &:nth-child(5){
+       border-left:1px solid #a5a6a6;
+       border-right:1px solid #a5a6a6;
+       text-align: center;
+     }
+    }
+    }
+    }
+    .search-list-bottom{
+      margin-top:-.07rem;
+    h5{
+      color:rgb(255,120,0);
+      font-size:.3rem;
+      text-align: center;
+    i{
+      margin-right:.15rem;
+    }
+    }
+    a{
+      display:inline-block;
+      font-size:.24rem;
+      color:rgb(255,120,0);
+      background: #fff;
+      max-width:1.62rem;
+      line-height: .35rem;
+      padding:0 .1rem;
+      border:1px solid rgb(255,120,0);
+      overflow:hidden;
+      text-overflow : ellipsis;
+      margin-left:.12rem;
+    }
+    }
   }
 </style>

components/mobile/MobileFooter.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="mobile-footer">
     <span :class="activeType=='home'?'active':''" @click="activeType='home'">
-      <nuxt-link to="/"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
+      <nuxt-link to="/">
+        <i :class="activeType=='home'?'iconfont icon-shouye':'iconfont icon-shouye1'"></i><p>首页</p>
+      </nuxt-link>
     </span>
     <span :class="activeType=='shops'?'active':''" @click="activeType='shops'">
-      <nuxt-link to="/mobile/shop"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
+      <nuxt-link to="/mobile/shop">
+        <i :class="activeType=='shops'?'iconfont icon-dianpu':'iconfont icon-dianpu1'"></i><p>店铺</p>
+      </nuxt-link>
     </span>
     <span :class="activeType=='user'?'active':''" @click="activeType='user'">
-      <nuxt-link to="/mobile/user"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
+      <nuxt-link to="/mobile/user">
+        <i :class="activeType=='user'?'iconfont icon-icon':'iconfont icon-wo'"></i><p>我</p>
+      </nuxt-link>
     </span>
   </div>
 </template>
@@ -26,24 +32,31 @@
     position:fixed;
     bottom:0;
     width:100%;
-    height:49px;
+    height:.98rem;
     display:flex;
     text-align: center;
     justify-content:space-between;
-    border-top:1px solid #ccc;
+    border-top:.02rem solid #ccc;
     background: #ffffff;
   }
   .mobile-footer span{
     flex:1;
-    font-size:16px;
+    font-size:.32rem;
     color:#b0b0b0;
-    padding-top:5px;
+    padding-top:.1rem;
   }
 
   .mobile-footer span a{
     color:#b0b0b0;
   }
 
+  .mobile-footer span a i{
+    font-size:.3rem;
+  }
+  .mobile-footer span a p{
+    font-size:.22rem;
+  }
+
   .mobile-footer span.active a{
     color:#3976f4;
   }

components/mobile/MobileHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mobile-modal">
+    <div class="mobile-modal" v-if="false">
       <div class="mobile-modal-box">
         <div class="mobile-modal-header">联系方式</div>
         <div class="mobile-modal-content">
@@ -59,24 +59,29 @@
   @import '~assets/scss/mobileCommon';
   .mobile-header{
     width:100%;
+    position:fixed;
+    top:0;
     z-index:10000;
-    height: .88rem;
-    line-height: .88rem;
+    height:.88rem;
     display:flex;
     justify-content:space-around;
     align-items:center;
-    border-bottom:.01rem solid #ccc;
+    border-bottom:.02rem solid #ccc;
     background: #3e82f5;
     padding:0 .2rem 0 .1rem;
     color:#fff;
   }
   .mobile-header p{
     flex:1;
-    font-size:.3rem;
+    font-size:.36rem;
     text-align: center;
-    margin-top:.1rem;
+    margin-top:.2rem;
   }
   .mobile-header a{
+    font-size:.28rem;
     color:#fff;
   }
+  .mobile-header a:last-child{
+    font-size:.4rem;
+  }
 </style>

components/mobile/search/brandList.vue

@@ -3,7 +3,7 @@
     <div class="brand-list-content">
       <div class="brand-list-top">
         <span>品牌墙</span>
-        <span>展开<i></i></span>
+        <span @click="onclick()">展开<i class="iconfont icon-jiantoushang"></i></span>
       </div>
       <div class="brand-list-item">
         <img src="/images/component/default.png"/>
@@ -34,7 +34,7 @@
       }
       span:last-child{
         font-size:.28rem;
-        i{}
+        color:#53a0f7;
       }
     }
     .brand-list-item{

components/mobile/search/goodList.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="detail-brand" >
     <div v-for="(item, index) in productList.components" v-if="productList.components">
-      <div class="brand-item">
-        <p>型号：<span>{{item.code}}</span></p>
-        <p>品牌：<span>{{item.brand.nameCn}}</span></p>
-        <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
-        <i></i>
-      </div>
+      <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.uuid">
+        <div class="brand-item">
+          <p>型号：<span>{{item.code}}</span></p>
+          <p>品牌：<span>{{item.brand.nameCn}}</span></p>
+          <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
+          <i class="iconfont icon-shoucang"></i>
+        </div>
+      </nuxt-link>
     </div>
-
   </div>
 </template>
 
@@ -35,6 +36,7 @@
     border-radius:.1rem;
     background: #fff;
     padding:.2rem;
+    position:relative;
   p{
     font-size:.28rem;
     line-height:.4rem;
@@ -42,7 +44,14 @@
     margin:0;
   span{}
   }
-  i{}
+  i{
+    display:block;
+    position:absolute;
+    top:.2rem;
+    right:.1rem;
+    font-size:.4rem;
+    color:#ff7800;
+  }
   }
   }
 </style>

pages/mobile/shop/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="shop">
     <div class="shop-top">
-      <p><i></i><span>{{list.numberOfElements}}</span>家店铺</p>
-      <a href="#">全部</a>
+      <p><i class="iconfont icon-dianpu1"></i><span>{{list.numberOfElements}}</span>家店铺</p>
+      <span>全部 <i class="iconfont icon-jiantoushang"></i></span>
     </div>
     <div class="shop-list" v-for="item in list.content">
       <h3>{{item.storeName}}</h3>
@@ -15,7 +15,7 @@
           <p>电话：<span>{{item.enterprise.enTel}}</span></p>
           <p>传真：<span>{{item.enterprise.enFax}}</span></p>
           <p>商家介绍： <a href="#">点击查看</a></p>
-          <i></i>
+          <i class="iconfont icon-shoucang"></i>
         </div>
       </div>
     </div>
@@ -58,62 +58,78 @@
     height:1.14rem;
     padding:0 .3rem;
     background:#fff;
-  p{
-    font-size:.24rem;
-    color:#000;
-  span{
-    font-size:.3rem;
-    color:#f94f28;
-    margin:0 .1rem;
-  }
-  };
-  a{
-    font-size:.28rem;
-  }
+    p{
+      font-size:.24rem;
+      color:#000;
+      i{
+        font-size: .53rem;
+        color:#418ef7;
+      }
+      span{
+        font-size:.3rem;
+        color:#f94f28;
+        margin:0 .1rem;
+      }
+    }
+    >span{
+      font-size:.28rem;
+      color:#53a0f7;
+    }
   }
   .shop-list {
     background:#fff;
     margin-top:.12rem;
     padding-bottom:.28rem;
-  h3{
-    font-size:.32rem;
-    line-height: .8rem;
-    margin:0;
-    margin-left:.27rem;
-    margin-bottom:.14rem;
-  }
-  .list-item{
-    width:6.77rem;
-    margin-left:.39rem;
-    justify-content: space-around;
-    display:inline-flex;
-  .item-img{
-    position:relative;
-    width:2.42rem;
-    height:1.69rem;
-  i{
-    position:absolute;
-    top:0;
-    left:0;
-    background: url(/images/component/default.png);
-  }
-  img{
-    display:inline-block;
-    width:100%;
-    height:100%;
-  }
-  }
-  .list-item-phone{
-    width:3.95rem;
-    padding-top:.18rem;
-  p{
-    font-size:.28rem;
-    line-height: .45rem;
-    margin:0;
-  }
-  }
-  }
-  }
+    h3{
+      font-size:.32rem;
+      line-height: .8rem;
+      margin:0;
+      margin-left:.27rem;
+      margin-bottom:.14rem;
+    }
+    .list-item{
+      width:6.77rem;
+      margin-left:.39rem;
+      justify-content: space-around;
+      display:inline-flex;
+      .item-img{
+        position:relative;
+        width:2.42rem;
+        height:1.69rem;
+        i{
+          display:block;
+          position:absolute;
+          width:.65rem;
+          height:.33rem;
+          background: url(/imgs/shop/daili@2x.png)no-repeat;
+          background-size: .65rem .33rem;
+        }
+        img{
+          display:inline-block;
+          width:100%;
+          height:100%;
+        }
+      }
+      .list-item-phone{
+        width:3.95rem;
+        padding-top:.18rem;
+        position:relative;
+        p{
+          font-size:.28rem;
+          line-height: .45rem;
+          margin:0;
+        }
+        i{
+          display:block;
+          position:absolute;
+          top:.1rem;
+          right:.1rem;
+          font-size:.4rem;
+          color:#ff7800;
+        }
+      }
+    }
+    }
   }
 
 </style>

pages/mobile/user/_uuid.vue

@@ -3,7 +3,7 @@
     <div class="user-name">
       <img src="/images/component/default.png"/>
       <p>{{userName}}uu用户名</p>
-      <a href="#">全部收藏<i></i></a>
+      <span>全部收藏 <i class="iconfont icon-jiantoushang"></i></span>
     </div>
     <div class="shop-list">
       <h3>{{}}</h3>
@@ -16,7 +16,7 @@
           <p>电话：<span>0755-1234567</span></p>
           <p>传真：<span>0755-1234567</span></p>
           <p>商家介绍： <a href="#">点击查看</a></p>
-          <i></i>
+          <i class="iconfont icon-shoucang"></i>
         </div>
       </div>
     </div>
@@ -44,63 +44,80 @@
     margin-top:1rem;
     min-height: 10rem;
     background: #e2e4e6;
-  .user-name{
-    padding:.14rem .38rem .09rem .34rem;
-    background:#fff;
-    display:flex;
-    align-items: center;
-    width:100%;
-  img{
-    display: inline-block;
-    width:1.25rem;
-    height:1.25rem;
-    border:.04rem solid #c5dbfc;
-    border-radius: .05rem;
-  }
-  p{
-    font-size:.32rem;
-    margin:0;
-    margin-left:.25rem;
-    flex:1;
-  }
-  a{
-    font-size:.32rem;
-  }
-  }
-  .shop-list {
-    background:#fff;
-    margin-top:.12rem;
-    padding-bottom:.28rem;
-  h3{
-    font-size:.32rem;
-    line-height: .8rem;
-    margin:0;
-    margin-left:.27rem;
-    margin-bottom:.14rem;
-  }
-  .list-item{
-    width:6.77rem;
-    margin-left:.39rem;
-    justify-content: space-around;
-    display:inline-flex;
-  .item-img{
-    width:2.42rem;
-  i{}
-  img{
-    width:2.4rem;
-    height:1.69rem;
-  }
-  }
-  .list-item-phone{
-    width:3.95rem;
-    padding-top:.18rem;
-  p{
-    font-size:.28rem;
-    line-height: .45rem;
-    margin:0;
-  }
-  }
-  }
-  }
+    .user-name{
+      padding:.14rem .38rem .09rem .34rem;
+      background:#fff;
+      display:flex;
+      align-items: center;
+      width:100%;
+      img{
+        display: inline-block;
+        width:1.25rem;
+        height:1.25rem;
+        border:.04rem solid #c5dbfc;
+        border-radius: .05rem;
+      }
+      p{
+        font-size:.32rem;
+        margin:0;
+        margin-left:.25rem;
+        flex:1;
+      }
+      span{
+        font-size:.28rem;
+        color:#53a0f7;
+      }
+    }
+    .shop-list {
+      background:#fff;
+      margin-top:.12rem;
+      padding-bottom:.28rem;
+      h3{
+        font-size:.32rem;
+        line-height: .8rem;
+        margin:0;
+        margin-left:.27rem;
+        margin-bottom:.14rem;
+      }
+      .list-item{
+        width:6.77rem;
+        margin-left:.39rem;
+        justify-content: space-around;
+        display:inline-flex;
+        .item-img{
+          width:2.42rem;
+          i{
+            display:block;
+            position:absolute;
+            width:.65rem;
+            height:.33rem;
+            background: url(/imgs/shop/daili@2x.png)no-repeat;
+            background-size: .65rem .33rem;
+          }
+          img{
+            width:2.4rem;
+            height:1.69rem;
+          }
+        }
+        .list-item-phone{
+          width:3.95rem;
+          padding-top:.18rem;
+          position:relative;
+          p{
+            font-size:.28rem;
+            line-height: .45rem;
+            margin:0;
+          }
+          i{
+            display:block;
+            position:absolute;
+            top:.1rem;
+            right:.1rem;
+            font-size:.4rem;
+            color:#ff7800;
+          }
+        }
+      }
+    }
   }
 </style>