底部按钮

assets/scss/cus-client/cus-client-common.scss

@@ -766,17 +766,19 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 /* 底部跳转 */
 .bottom-btn-box{
   height: 50px;position: fixed;bottom: 0;left: 0;right: 0;font-size: 0;background: #fff;z-index: 99999;border-top: 1px solid #ccc;
+  li{width: 25%;margin: 0;padding: 0;}
+  a{width: 100%;height: 50px;line-height: 1;display: inline-block;text-align: center;font-size: 13px;color: #333;margin: 6px 0;}
   i{width:22px;height: 22px;background-size:cover;display: block;margin: 0 auto 3px;}
-  a{width: 25%;display: inline-block;text-align: center;font-size: 13px;color: #333;margin: 6px 0;}
-  a:nth-child(1) i{background-image: url("~static/images/icons/shouye.svg");}
-  a:nth-child(2) i{background-image: url("~static/images/icons/tiyan.svg");}
-  a:nth-child(3) i{background-image: url("~static/images/icons/dianhua.svg");}
-  a:nth-child(4) i{background-image: url("~static/images/icons/zixun.svg");}
-  a.active{color: #2881db;}
-  a.active:nth-child(1) i{background-image: url("~static/images/icons/shouye-a.svg");}
-  a.active:nth-child(2) i{background-image: url("~static/images/icons/tiyan-a.svg");}
-  a.active:nth-child(3) i{background-image: url("~static/images/icons/dianhua-a.svg");}
-  a.active:nth-child(4) i{background-image: url("~static/images/icons/zixun-a.svg");}
+  span{color: #333;}
+  li:nth-child(1) i{background-image: url("~static/images/icons/shouye.svg");}
+  li:nth-child(2) i{background-image: url("~static/images/icons/tiyan.svg");}
+  li:nth-child(3) i{background-image: url("~static/images/icons/dianhua.svg");}
+  li:nth-child(4) i{background-image: url("~static/images/icons/zixun.svg");}
+  li.is-active span{color: #2881db;}
+  li.is-active:nth-child(1) i{background-image: url("~static/images/icons/shouye-a.svg");}
+  li.is-active:nth-child(2) i{background-image: url("~static/images/icons/tiyan-a.svg");}
+  li.is-active:nth-child(3) i{background-image: url("~static/images/icons/dianhua-a.svg");}
+  li.is-active:nth-child(4) i{background-image: url("~static/images/icons/zixun-a.svg");}
 
 }
 

components/bottomMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="client-footer">
+  <div class="bottom-btn-box">
       <el-menu
         :default-active="activeNav"
         :class="navClass"
@@ -8,7 +8,7 @@
       >
         <template v-for="(item,index) in footerData" >
           <el-menu-item :index="`${item.url}`" >
-            <nuxt-link  :to="item.url">{{item.name}}</nuxt-link>
+            <nuxt-link  :to="item.url"><i></i><span>{{item.name}}</span></nuxt-link>
           </el-menu-item>
         </template>
       </el-menu>

components/footer.vue

@@ -65,11 +65,6 @@
       <p>大连栋科软件工程有限公司 版权所有</p>
       <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备09022904号-18</a>
     </div>
-    <div class="bottom-btn-box">
-      <a :href="item.url" v-for="(item,index) in footerData" :key="index">
-        <i></i><span>{{item.name}}</span>
-      </a>
-    </div>
   </div>
 </template>