zhusenlin/Yi.Admin
1
0
Fork 0
mirror of https://gitee.com/ccnetcore/Yi synced 2026-04-23 01:46:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
橙子
2022-10-14 02:18:25 +08:00
parent 8456320884
commit 88073aaa20
37 changed files with 132 additions and 1766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Yi.Vue3.x.Vant/src/layout/bottom/index.vue
View File

@@ -1,17 +1,14 @@
<template>
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o" to="/">主页</van-tabbar-item>
<van-tabbar-item icon="search">发现</van-tabbar-item>
<van-tabbar v-model="active" active-color="#FF689B" inactive-color="#9C9C9C" @change="onChange" z-index="100">
<van-tabbar-item v-for="item in tabbar.slice(0,2)" :to="item.to" :icon="item.icon">{{item.title}}</van-tabbar-item>
<van-tabbar-item @click="show = true">
<template #icon="props">
<van-icon class="add" name="add-square" color="#1989fa" size="3rem" />
<van-icon class="add" name="add-square" color="#FF689B" size="3rem" />
<!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
</template>
</van-tabbar-item>
<van-tabbar-item icon="friends-o">商城</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
<van-tabbar-item v-for="item in tabbar.slice(3)" :to="item.to" :icon="item.icon">{{item.title}}</van-tabbar-item>
</van-tabbar>
<van-action-sheet v-model:show="show" >
@@ -33,6 +30,25 @@
import { ref } from 'vue'
const active = ref(0);
const show = ref(false);
let tabbar=ref([
{icon:"wap-home",to:"/",title:"主页"},
{icon:"location-o",to:"",title:"发现"},
{icon:"",to:"",title:""},
{icon:"friends-o",to:"",title:"商城"},
{icon:"setting-o",to:"/my",title:"我的"},
])
const onChange=(index:number)=>{
tabbar.value=[
{icon:"wap-home-o",to:"/",title:"主页"},
{icon:"location-o",to:"",title:"发现"},
{icon:"",to:"",title:""},
{icon:"friends-o",to:"",title:"商城"},
{icon:"setting-o",to:"/my",title:"我的"},
];
tabbar.value[index].icon=tabbar.value[index].icon.replace("-o","")
}
</script>
<style>
.btn1

15
Yi.Vue3.x.Vant/src/layout/tab/index.vue
View File

@@ -3,10 +3,8 @@
<van-row class="row" >
<van-col span="4" class="icon"><van-icon name="sign" size="1.6rem"/></van-col>
<van-col span="16">
<van-tabs v-model:active="active" class="tabs" sticky >
<van-tab title="关注" to="/follow" class="tab" ></van-tab>
<van-tab title="推荐" to="/recommend" class="tab" ></van-tab>
<van-tab title="广场" to="/square" class="tab" ></van-tab>
<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>
</van-tabs>
</van-col>
<van-col span="4" class="icon"><van-icon name="search" size="1.6rem" /></van-col>
@@ -20,6 +18,11 @@
<script setup lang="ts">
import { ref } from "vue";
const active = ref(1);
const tabs=ref([
{title:"关注",to:"/follow"},
{title:"推荐",to:"/recommend"},
{title:"广场",to:"/square"},
])
</script>
<style scoped>
.row{
@@ -35,4 +38,8 @@ const active = ref(1);
.tabs {
width: 100%;
}
.icon .van-icon
{
color:#FF689B;
}
</style>