76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<cover-view class="cover-view-ctn">
|
|
<cover-view
|
|
class="cover-tabbar-item"
|
|
v-for="(item, index) in tabbar.items"
|
|
:key="item.text"
|
|
@tap="sheep.$router.go(item.url)"
|
|
>
|
|
<cover-view class="content-box">
|
|
<cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
|
|
<cover-view class="active-line" v-show="activeUrl === item.url" />
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, unref } from 'vue';
|
|
import sheep from '@/sheep';
|
|
import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
|
|
|
|
const tabbar = computed(() => {
|
|
return sheep.$store('app').template.basic?.tabbar;
|
|
});
|
|
|
|
const props = defineProps({
|
|
activeUrl: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cover-view-ctn {
|
|
width: 100%;
|
|
height: 50px;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: -1px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
|
|
z-index: 9999;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
background: #fff;
|
|
|
|
.cover-tabbar-item {
|
|
flex: 1;
|
|
|
|
.content-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 32px;
|
|
|
|
.tabbar-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.active-line {
|
|
width: 20rpx;
|
|
height: 1rpx;
|
|
background: #000;
|
|
position: absolute;
|
|
left: calc(50% - 10rpx);
|
|
bottom: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|