更换图标

src/components/AppFooter.vue

@@ -22,13 +22,18 @@ const props = defineProps({
 
 const isIOS = uni.getDeviceInfo().osName === "ios";
 const tabs = {
-  首页: "home",
+  VIP: "vip",
   智能弓: "mall",
   计分本: "tab-point-book",
   勋章: "medal",
   个人中心: "user",
 };
 const onTabChange = (index) => {
+  if (index === 0) {
+    return uni.navigateTo({
+      url: "/pages/be-vip",
+    });
+  }
   if (index === 1) {
     return uni.navigateTo({
       url: "/pages/device-intro",
@@ -50,11 +55,6 @@ const onTabChange = (index) => {
   }
   // props.onChange(index);
 };
-const getTabSrc = (key, index) => {
-  return `../static/tab-${tabs[key]}${
-    props.selected === index ? "" : "-o"
-  }.png`;
-};
 </script>
 
 <template>
@@ -66,13 +66,13 @@ const getTabSrc = (key, index) => {
       @click="onTabChange(index)"
       :class="index === 2 ? 'point-book-tab' : ''"
     >
-      <image v-if="index !== 2" :src="getTabSrc(key, index)" mode="widthFix" />
+      <image
-      <image v-else src="../static/tab-point-book.png" mode="widthFix" />
-      <text
         v-if="index !== 2"
-        :style="{ color: index === selected ? '#f7cb74' : '#8E7D5C' }"
+        :src="`../static/tab-${tabs[key]}.png`"
-        >{{ key }}</text
+        mode="widthFix"
-      >
+      />
+      <image v-else src="../static/tab-point-book.png" mode="widthFix" />
+      <text v-if="index !== 2">{{ key }}</text>
     </button>
   </view>
 </template>
@@ -83,26 +83,27 @@ const getTabSrc = (key, index) => {
   width: 100vw;
   position: relative;
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
   background: linear-gradient(
       180deg,
       rgba(70, 55, 34, 0.75) 0%,
-      rgba(5, 11, 25, 0.58) 100%
+      rgba(5, 11, 25, 0.58) 77%
     ),
     #000000;
-  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06); */
 }
 .footer > button {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 20%;
+  width: 19%;
+  color: #8e7d5c;
 }
 .footer > button > image {
-  width: 44rpx;
+  width: 46rpx;
-  height: 44rpx;
+  height: 46rpx;
 }
 .footer > button > text {
   font-weight: 500;
@@ -111,10 +112,11 @@ const getTabSrc = (key, index) => {
 }
 .point-book-tab {
   overflow: unset;
+  margin: 0 1%;
 }
 .point-book-tab > image {
   width: 144rpx !important;
   height: 144rpx !important;
-  transform: translateY(-10rpx);
+  transform: translateY(-20rpx);
 }
 </style>

src/components/TopRank.vue

@@ -132,6 +132,7 @@ onBeforeUnmount(() => {
   align-items: center;
   height: 80rpx;
   margin-top: 20rpx;
+  margin-left: 1rpx;
 }
 .rank-item > view:first-child {
   position: relative;