TabBarLayout.vue 2.52 KB
Newer Older
zhangsan's avatar
1  
zhangsan committed
1 2 3 4
<template>
  <div class="tabbar-layout">
    <div class="content">
      <router-view v-slot="{ Component }">
zhangsan's avatar
1  
zhangsan committed
5
        <component :is="Component"/>
zhangsan's avatar
1  
zhangsan committed
6 7
      </router-view>
    </div>
zhangsan's avatar
1  
zhangsan committed
8

zhangsan's avatar
1  
zhangsan committed
9 10 11 12
    <div class="tab-view">
      <div 
        v-for="item in tabItems" 
        :key="item.path"
zhangsan's avatar
1  
zhangsan committed
13
        :class="route.name === item.name ? 'tab-item tab-item-active' : 'tab-item'" 
zhangsan's avatar
1  
zhangsan committed
14 15
        @click="handleChange(item.path)"
      >
zhangsan's avatar
1  
zhangsan committed
16 17
       <img class="tab-item-icon" v-if="route.name === item.name" :src="item.iconActive" alt="">
       <img class="tab-item-icon" v-else :src="item.icon" alt="">
zhangsan's avatar
1  
zhangsan committed
18 19 20 21 22 23 24 25
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
zhangsan's avatar
1  
zhangsan committed
26 27 28 29 30 31 32 33
import tab1 from '@/static/tabbar/1.png';
import tab1Active from '@/static/tabbar/a1.png';
import tab2 from '@/static/tabbar/2.png';
import tab2Active from '@/static/tabbar/a2.png';
import tab3 from '@/static/tabbar/3.png';
import tab3Active from '@/static/tabbar/a3.png';
import tab4 from '@/static/tabbar/4.png';
import tab4Active from '@/static/tabbar/a4.png';
zhangsan's avatar
1  
zhangsan committed
34
const router = useRouter();
zhangsan's avatar
1  
zhangsan committed
35 36
const route = useRoute();

zhangsan's avatar
1  
zhangsan committed
37 38

const tabItems = [
zhangsan's avatar
1  
zhangsan committed
39 40 41 42
  { name: 'home', path: '/home', title: '首页', icon: tab1, iconActive: tab1Active },
  { name: 'slzmj', path: '/slzmj', title: '申领助梦金', icon: tab2, iconActive: tab2Active },
  { name: 'czwj', path: '/czwj', title: '政策文件', icon: tab3, iconActive: tab3Active },
  { name: 'user', path: '/user', title: '我的', icon: tab4, iconActive: tab4Active },
zhangsan's avatar
1  
zhangsan committed
43 44 45 46 47 48 49 50 51
];

const handleChange = (path: string) => {
  router.push(path);
};
</script>

<style lang="scss" scoped>
.tabbar-layout {
zhangsan's avatar
1  
zhangsan committed
52
  height: 100vh;
zhangsan's avatar
1  
zhangsan committed
53 54 55 56
  display: flex;
  flex-direction: column;

  .content {
zhangsan's avatar
1  
zhangsan committed
57
    height: calc(100% - 50px);
zhangsan's avatar
1  
zhangsan committed
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
    overflow-y: auto;
    background-color: var(--bg-color);
  }
  
  .tab-view {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;

    .tab-item {
      flex: 1;
      text-align: center;
zhangsan's avatar
1  
zhangsan committed
78 79 80 81 82 83 84 85
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .tab-item-icon{
        width: 25px;
        height: 25px;
      }
zhangsan's avatar
1  
zhangsan committed
86
      span {
zhangsan's avatar
1  
zhangsan committed
87 88
        margin-top: 3px;
        font-size: 14px;
zhangsan's avatar
1  
zhangsan committed
89 90 91 92 93 94 95
        color: #666;
      }
    }

    .tab-item-active {
      flex: 1;
      text-align: center;
zhangsan's avatar
1  
zhangsan committed
96
     
zhangsan's avatar
1  
zhangsan committed
97 98 99 100 101 102 103
      span {
        color: #ff6b35;
      }
    }
  }
}
</style>