1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <template>
- <footer class="tab-ctnr">
- <ul class="tab-box">
- <li v-for="(item,index) in items">
- <router-link :to="item.paths">
- <img v-if="$route.path == item.paths" :src="item.imgT">
- <img v-else :src="item.imgF">
- <p :class="{active:$route.path==item.paths}">{{item.name}}</p>
- </router-link>
- </li>
- </ul>
- </footer>
- </template>
- <script type="text/javascript">
- export default{
- data(){
- return {
- items:[
- {paths: '/home',name:'首页',
- imgT:require('../assets/img/首页-选中.png'),
- imgF:require('../assets/img/首页-未选.png')
- },
- {paths: '/contract',name:'合同',
- imgT:require('../assets/img/合同-选中.png'),
- imgF:require('../assets/img/合同-未选.png')
- },
- {paths: '/linkman',name:'联系人',
- imgT:require('../assets/img/联系人-选中.png'),
- imgF:require('../assets/img/联系人-未选.png')
- },
- {paths: '/mine',name:'我的',
- imgT:require('../assets/img/我-选中.png'),
- imgF:require('../assets/img/我-未选.png')
- },
- ]
- }
- }
- }
- </script>
- <style scoped>
- .tab-ctnr{
- width: 100%;
- position: fixed;
- bottom: 0;
- left: 0;
- background-color: #fff;
- .tab-box{
- height: 1.332623rem;
- display: flex;
- justify-content: space-around;
- font-family: FZLTHJW--GB1-0;
- font-size: 0;
- p{
- color: #a2a2a2;
- font-size: 22px;/*px*/
- }
- p.active{
- color: #60c0ff;
- }
- img{
- width: 0.861111rem;
- height: 0.861111rem;
- }
- }
- }
-
- </style>
|