city-gather/src/subPack-film/components/tabbar.vue

<script setup lang="ts">
import router from '@/router'

defineProps({
  active: {
    type: Number,
    default: 0,
  },
})

const tabList = reactive([
  { title: '首页', icon: '', path: 'film-index' },
  { title: '电影/影院', icon: '', path: 'film-movie' },
  { title: '订单', icon: '', path: 'film-order' },
])

function handleItem(name: string) {
  router.replace({ name })
}
</script>

<template>
  <view>
    <view class="tabbar">
      <view v-for="(item, index) in tabList" :key="index" class="item pt20rpx" @click="handleItem(item.path)">
        <i class="iconfont text-44rpx" :class="[active == index ? 'text-[var(--them-color)]' : '']">{{ item.icon }}</i>
        <view class="title" :class="[active == index ? 'active' : '']">
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.tabbar{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 166rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    z-index: 99999;
    .item{
        flex: 1;
        text-align: center;
        .img{
            width: 44rpx;
            height: 44rpx;
            margin-top: 20rpx;
        }
        .title{
            font-size: 20rpx;
            color: #AAAAAA;
            margin-top: 8rpx;
            &.active{
                color: #222222;
            }
        }

    }
}
</style>