tab与添加主页

Yi.Vue3.x.Vant/components.d.ts

@@ -22,9 +22,13 @@ declare module '@vue/runtime-core' {
     VanList: typeof import('vant/es')['List']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanRow: typeof import('vant/es')['Row']
+    VanSpace: typeof import('vant/es')['Space']
+    VanSticky: typeof import('vant/es')['Sticky']
     VanTab: typeof import('vant/es')['Tab']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTabs: typeof import('vant/es')['Tabs']
+    VantCol: typeof import('vant/es')['tCol']
+    VantRow: typeof import('vant/es')['tRow']
   }
 }

Yi.Vue3.x.Vant/src/App.vue

@@ -10,15 +10,5 @@ import HelloWorld from './components/HelloWorld.vue'
 </template>
 
 <style scoped>
-.logo {
+
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
 </style>

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-sticky :offset-top="0">
-    <van-tab title="关注" to="/follow"></van-tab>
+<van-row class="row"  >
-    <van-tab title="推荐" to="/recommend"></van-tab>
+  <van-col span="4" class="icon"><van-icon name="sign" size="1.6rem"/></van-col>
-    <van-tab title="广场"></van-tab>
+<van-col span="16">
-    <van-tab title="视频"></van-tab>
+  <van-tabs   v-model:active="active"  class="tabs" sticky >
-
+    <van-tab title="关注" to="/follow" class="tab" ></van-tab>
-    <router-view />
+    <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{
+.row{
-  width: 25rem;
+  background-color: #FFFFFF;
+  min-width: 24rem;
 }
-.view{
+.tab{
-  margin: auto;
+
+}
+.icon{
+ padding-top: 0.6rem;
+}
+.tabs {
+  width: 100%;
 }
 </style>

Yi.Vue3.x.Vant/src/router/index.ts

@@ -30,6 +30,12 @@ export const constantRoutes = [
               component: () => import('@/view/main/follow.vue'),
               name: 'Follow',
             },
+            {
+              path: '/square',
+              component: () => import('@/view/main/square.vue'),
+              name: 'Square',
+            },
+            
           ]
         }
       ]

Yi.Vue3.x.Vant/src/style.css

@@ -63,7 +63,7 @@ button:focus-visible {
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0rem;
   text-align: center;
 }
 

Yi.Vue3.x.Vant/src/view/main/follow.vue

@@ -1,3 +1,16 @@
-<template>
+<template >
-    这里是关注页面
+    <van-row  >
-</template>
+<van-col span="24">
+    <div class="test">这里是关注页面</div>
+</van-col>
+
+    </van-row>
+   
+
+</template>
+<style scoped>
+.test
+{
+
+}
+</style>

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -23,7 +23,7 @@
           <span class="subtitle">一小时前</span>
         </van-col>
 
-        <van-col span="6">
+        <van-col span="6" class="down">
           <van-icon name="arrow-down" @click="show = true" />
         </van-col>
 
@@ -143,11 +143,14 @@ const onRefresh = () => {
   padding-top: 1rem;
   margin-bottom: 1rem;
   padding-left: 1rem;
+  padding-right: 1rem;
 }
 .rowBody {
   text-align: left;
   background-color: white;
   min-height: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .title {
   padding-top: 1rem;
@@ -176,4 +179,9 @@ color: #CBCBCB;
 .bottomRow{
   color: #979797;
 }
+.down
+{
+  text-align: right;
+  padding-right: 0.5rem;
+}
 </style>

Yi.Vue3.x.Vant/src/view/main/square.vue

@@ -0,0 +1,16 @@
+<template >
+    <van-row  >
+<van-col span="24">
+    <div class="test">这里是广场页面</div>
+</van-col>
+
+    </van-row>
+   
+
+</template>
+<style scoped>
+.test
+{
+
+}
+</style>