tab与添加主页

Yi.Vue3.x.Vant/src/layout/bottom/index.vue

@@ -3,9 +3,9 @@
   <van-tabbar-item icon="home-o" to="/">主页</van-tabbar-item>
   <van-tabbar-item icon="search">发现</van-tabbar-item>
 
-  <van-tabbar-item>
+  <van-tabbar-item @click="show = true">
     <template #icon="props">
-        <van-icon name="add-square" color="#1989fa" size="3rem" />
+        <van-icon class="add" name="add-square" color="#1989fa" size="3rem" />
       <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
     </template>
   </van-tabbar-item>
@@ -13,8 +13,45 @@
   <van-tabbar-item icon="friends-o">商城</van-tabbar-item>
   <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
 </van-tabbar>
+
+<van-action-sheet v-model:show="show" >
+
+
+    <van-button class="btn1 btn " type="primary" >发图文</van-button>
+  <van-button class="btn" type="primary">发视频</van-button>
+  <van-button class="btn" type="primary">发文章</van-button>
+  <van-button class="btn" type="primary">发二手</van-button>
+
+
+  
+  <van-icon  class="icon" name="cross" size="1.5rem" @click="show=false"/>
+
+
+</van-action-sheet>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 const active = ref(0);
+const show = ref(false);
 </script>
+<style>
+.btn1
+{
+  margin-top: 3rem !important;
+}
+.btn{
+  border-radius:0.5rem;
+  height: 4rem;
+  width:90%;
+margin: 0.5rem 1rem 0.5rem 1rem;
+}
+  .content {
+    padding: 16px 16px 160px;
+  }
+  .icon{
+    margin-bottom: 1.5rem;
+  }
+  .add{
+    margin-top: 0.2rem;
+  }
+</style>

Yi.Vue3.x.Vant/src/layout/main/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-tab class="tabs"/>
+    <app-tab />
 </template>
 <script setup lang="ts">
     import { ref } from 'vue'
@@ -7,11 +7,6 @@
 
 </script>
 <style scoped>
-.tabs{
-position: absolute;
-top: 0;
-left: 0;
 
-}
 </style>
     

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

@@ -1,22 +1,38 @@
 <template > 
-  <van-tabs   v-model:active="active" offset-top="0" :sticky="true" class="tabs">
-    <van-tab title="关注" to="/follow"></van-tab>
-    <van-tab title="推荐" to="/recommend"></van-tab>
-    <van-tab title="广场"></van-tab>
-    <van-tab title="视频"></van-tab>
-
-    <router-view />
+<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">
+  <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>
+</van-col>
+<van-col span="4"  class="icon"><van-icon name="search" size="1.6rem" /></van-col>
+</van-row>
+</van-sticky>
+
+
+<router-view />
+<div style="min-height: 100rem;"></div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 const active = ref(1);
 </script>
 <style scoped>
-.tabs{
-  width: 25rem;
+.row{
+  background-color: #FFFFFF;
+  min-width: 24rem;
 }
-.view{
-  margin: auto;
+.tab{
+
+}
+.icon{
+ padding-top: 0.6rem;
+}
+.tabs {
+  width: 100%;
 }
 </style>