Files
Yi.Admin/Yi.Vue3.x.Vant/src/layout/tab/index.vue

46 lines
949 B
Vue
Raw Normal View History

2022-10-05 23:54:53 +08:00
<template >
2022-10-09 00:14:17 +08:00
<van-sticky :offset-top="0">
<van-row class="row" >
<van-col span="4" class="icon"><van-icon name="sign" size="1.6rem"/></van-col>
<van-col span="16">
2022-10-14 02:18:25 +08:00
<van-tabs v-model:active="active" class="tabs" sticky swipeable color="#FF689B">
<van-tab v-for="item in tabs" :title="item.title" :to="item.to" class="tab" :style="{fontSize: 0 + 'px'}" ></van-tab>
2022-10-05 23:54:53 +08:00
</van-tabs>
2022-10-09 00:14:17 +08:00
</van-col>
<van-col span="4" class="icon"><van-icon name="search" size="1.6rem" /></van-col>
</van-row>
</van-sticky>
<router-view />
2022-10-11 16:48:25 +08:00
<div style=""></div>
2022-10-05 23:54:53 +08:00
</template>
<script setup lang="ts">
import { ref } from "vue";
const active = ref(1);
2022-10-14 02:18:25 +08:00
const tabs=ref([
{title:"关注",to:"/follow"},
{title:"推荐",to:"/recommend"},
{title:"广场",to:"/square"},
])
2022-10-05 23:54:53 +08:00
</script>
<style scoped>
2022-10-09 00:14:17 +08:00
.row{
background-color: #FFFFFF;
min-width: 24rem;
}
.tab{
}
.icon{
padding-top: 0.6rem;
2022-10-05 23:54:53 +08:00
}
2022-10-09 00:14:17 +08:00
.tabs {
width: 100%;
2022-10-05 23:54:53 +08:00
}
2022-10-14 02:18:25 +08:00
.icon .van-icon
{
color:#FF689B;
}
2022-10-05 23:54:53 +08:00
</style>