完成首页UI

src/components/AppFooter.vue

@@ -1,34 +1,60 @@
 <script setup>
-function handleClickGithub() {
-  if (typeof window !== 'undefined' && window.open) {
-    window.open('https://github.com/uni-helper/create-uni')
-  }
-  else {
-    uni.showToast({
-      icon: 'none',
-      title: '请使用浏览器打开',
-    })
-  }
+import { ref } from "vue";
+
+const activeTab = ref("member");
+
+const tabs = [
+  { id: "member", image: "../static/tab-vip.png" },
+  { id: "growth", image: "../static/tab-grow.png" },
+  { id: "shop", image: "../static/tab-mall.png" },
+];
+
+function handleTabClick(tabId) {
+  activeTab.value = tabId;
 }
 </script>
 
 <template>
-  <view class="footer" @click="handleClickGithub">
-    <image class="uni-helper-github__image" src="/static/github.svg" />
+  <view class="footer">
+    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
+    <view
+      v-for="(tab, index) in tabs"
+      :key="tab.id"
+      class="tab-item"
+      :class="{ active: activeTab === tab.id }"
+      @click="handleTabClick(tab.id)"
+    >
+      <image
+        :src="tab.image"
+        :style="{
+          width: index === 1 ? '100px' : '40px',
+          transform: index === 1 ? '' : 'translateY(10px)',
+        }"
+        mode="widthFix"
+      />
+    </view>
   </view>
 </template>
 
-<style>
-.footer{
-  position: absolute;
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #888;
+<style scoped>
+.footer {
+  height: 90px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
-.uni-helper-github__image {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
+
+.footer-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  transform: translateX(5px);
+}
+
+.tab-item {
+  z-index: 1;
 }
 </style>