style: 修改主页样式

src/locale/en.json

@@ -2,6 +2,7 @@
   "tabbar.home": "Home",
   "tabbar.income": "Income",
   "tabbar.mine": "Mine",
+  "home.missionCenter": "Mission Center",
   "home.vip": "VIP Membership",
   "search.placeholder": "Search",
   "search.filterPrice": "All Price",

src/pages.json

@@ -93,7 +93,12 @@
     },
     {
       "path": "pages/missionCenter/missionCenter",
-      "type": "page"
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Mission Center",
+        "navigationBarBackgroundColor": "#fff"
+      }
     },
     {
       "path": "pages/search/search",

src/pages/index/index.vue

@@ -50,6 +50,44 @@ function onChange(e) {
   // console.log(e)
 }
 
+// 导航图标
+const navIcons = ref([
+  {
+    image: '/static/index/home-vip.png',
+    title: 'home.missionCenter',
+    size: '100rpx',
+    url: '/pages/missionCenter/missionCenter',
+  },
+  {
+    image: '/static/index/home-vip.png',
+    title: 'home.vip',
+    size: '100rpx',
+  },
+  {
+    image: '/static/index/home-vip.png',
+    title: 'home.vip',
+    size: '112rpx',
+  },
+  {
+    image: '/static/index/home-vip.png',
+    title: 'home.vip',
+    size: '100rpx',
+  },
+  {
+    image: '/static/index/home-vip.png',
+    title: 'home.vip',
+    size: '100rpx',
+  },
+])
+
+function toPage(url: string) {
+  if (url) {
+    uni.navigateTo({
+      url,
+    })
+  }
+}
+
 // 新品列表
 const newProducts = ref([
   {
@@ -146,38 +184,10 @@ function queryList(pageNo, pageSize) {
     />
     <view class="px-24rpx pb-24rpx">
       <view class="flex items-end justify-between pb-22rpx pt-24rpx">
-        <view class="flex items-center justify-between">
-          <view class="flex flex-col items-center">
-            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
-            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
-              {{ $t('home.vip') }}
-            </view>
-          </view>
-          <view class="flex flex-col items-center">
-            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
-            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
-              {{ $t('home.vip') }}
-            </view>
-          </view>
-        </view>
-        <view class="flex flex-col items-center">
-          <image src="/static/index/home-vip.png" class="h-112rpx w-112rpx" />
+        <view v-for="(item, index) in navIcons" :key="index" class="flex flex-col items-center" @click="toPage(item.url)">
+          <image :src="item.image" :class="[`h-${item.size}`, `w-${item.size}`]" />
           <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
-            {{ $t('home.vip') }}
-          </view>
-        </view>
-        <view class="flex items-center justify-between">
-          <view class="flex flex-col items-center">
-            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
-            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
-              {{ $t('home.vip') }}
-            </view>
-          </view>
-          <view class="flex flex-col items-center">
-            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
-            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
-              {{ $t('home.vip') }}
-            </view>
+            {{ $t(item.title) }}
           </view>
         </view>
       </view>