搞搞搞

src/App.vue

@@ -1,5 +1,79 @@
 <template>
-  <router-view />
+  <div class="app-wrap">
+    <div class="top-bar">
+      <img
+        class="logo"
+        src="@/assets/images/logo.png"
+        alt=""
+        draggable="false"
+      >
+      <menu class="tab-bar">
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 1
+          }"
+        >
+          要素地图
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 2
+          }"
+        >
+          锡善之城
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 3
+          }"
+        >
+          慈善博物馆
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 4
+          }"
+        >
+          慈善云学校
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 5
+          }"
+        >
+          慈善广场
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 6
+          }"
+        >
+          爱心林场
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 7
+          }"
+        >
+          慈善堂
+        </button>
+        <button
+          :class="{
+            active: $route.meta.tabIdx === 8
+          }"
+        >
+          留言反馈
+        </button>
+      </menu>
+      <div class="right-button-wrap">
+        <button class="shop" />
+        <button class="user" />
+      </div>
+    </div>
+    <div class="content-area">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -10,22 +84,25 @@ import { useStore } from "vuex"
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+
+
 </script>
 
 <style lang="less">
-// html, body {
-//   overscroll-behavior: none;
-//   overflow: hidden;
-// }
+html, body {
+  // overscroll-behavior: none;
+  // overflow: hidden;
+  height: 100%;
+}
 
 // * {
 //   user-select: none;
 //   -webkit-touch-callout: none;
 // }
 
-// #app {
-//   height: 100%;
-// }
+#app {
+  height: 100%;
+}
 
 // // 360浏览器不支持not()
 // input, textarea {
@@ -113,4 +190,113 @@ const store = useStore()
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+</style>
+
+<style lang="less" scoped>
+.app-wrap{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-image: url(@/assets/images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >.top-bar{
+    flex: 0 0 auto;
+    height: 89px;
+    background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    >img.logo{
+      flex: 0 0 auto;
+    }
+    >menu.tab-bar{
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 55px;
+      >button{
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 22px;
+        color: #FFFFFF;
+        line-height: 26px;
+        position: relative;
+        z-index: 0;
+        &:hover{
+          font-weight: bold;
+          color: #589498;
+        }
+        &.active{
+          font-weight: bold;
+          color: #589498;
+          perspective: 1000px;
+          &::before{
+            content: '';
+            display: block;
+            position: absolute;
+            width: 127px;
+            height: 8px;
+            background: #589498;
+            clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
+            left: 50%;
+            top: -31px;
+            transform: translate(-50%, 0);
+          }
+          &::after{
+            content: '';
+            display: block;
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            top: 100%;
+            height: 12px;
+            background: #FFE794;
+            filter: blur(15.945178985595703px);
+          }
+        }
+      }
+    }
+    >.right-button-wrap{
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      >button.shop{
+        width: 42px;
+        height: 42px;
+        background-image: url(@/assets/images/icon_shop.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        &:hover{
+          background-image: url(@/assets/images/icon_shop-active.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+      }
+      >button.user{
+        width: 42px;
+        height: 42px;
+        background-image: url(@/assets/images/icon_user.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        &:hover{
+          background-image: url(@/assets/images/icon_user-active.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+      }
+    }
+  }
+  >.content-area{
+    flex: 1 0 1px;
+    position: relative;
+  }
+}
 </style>

src/router/index.js

@@ -5,9 +5,72 @@ import HomeView from '../views/HomeView.vue'
 const routes = [
   {
     path: '/',
+    redirect: '/tab-1',
+  },
+  {
+    path: '/tab-1',
     name: 'HomeView',
     component: HomeView,
+    meta: {
+      tabIdx: 1
+    }
   },
+  // {
+  //   path: '/tab-2',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 2
+  //   }
+  // },
+  // {
+  //   path: '/tab-3',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 3
+  //   }
+  // },
+  // {
+  //   path: '/tab-4',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 4
+  //   }
+  // },
+  // {
+  //   path: '/tab-5',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 5
+  //   }
+  // },
+  // {
+  //   path: '/tab-6',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 6
+  //   }
+  // },
+  // {
+  //   path: '/tab-7',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 7
+  //   }
+  // },
+  // {
+  //   path: '/tab-8',
+  //   name: 'HomeView',
+  //   component: HomeView,
+  //   meta: {
+  //     tabIdx: 8
+  //   }
+  // },
 ]
 
 const router = createRouter({