fix: 🧩 首页优化

src/i18n/lang/en.json

@@ -11,5 +11,6 @@
   "dispoint": "Activity and Discount",
   "service": "Service",
   "school": "College Of Culture",
-  "hot": "Hot Shop"
+  "hot": "Hot Shop",
+  "searB": "Search Brand"
 }

src/i18n/lang/tw.json

@@ -11,5 +11,6 @@
   "dispoint": "優惠與活動",
   "service": "貼心服務",
   "school": "文化學院",
-  "hot": "熱門店鋪"
+  "hot": "熱門店鋪",
+  "searB": "搜索品牌"
 }

src/i18n/lang/zh.json

@@ -11,5 +11,6 @@
   "dispoint": "优惠与活动",
   "service": "贴心服务",
   "school": "文化学院",
-  "hot": "热门店铺"
+  "hot": "热门店铺",
+  "searB": "搜索品牌"
 }

src/views/Index/Middle.vue

@@ -1,20 +1,64 @@
 <template>
   <Transition name="zoom">
     <div class="middle-container">
-      <div class="brand" @click="go('brand')"></div>
-      <div class="activity" @click="go('activity')"></div>
-      <div class="art" @click="go('art')"></div>
-      <div class="school" @click="go('school')"></div>
-      <div class="service" @click="go('service')"></div>
-      <div class="member" @click="go('member')"></div>
-      <div class="parking" @click="go('parking')"></div>
+      <div class="brand" @click="go('brand')">
+        <div class="txt_w">{{ switchLanguage(list[0], 'title') }}</div>
+        <div class="sear">{{ $t('searB') }}</div>
+      </div>
+      <div class="activity" @click="go('activity')">
+        <div class="txt">{{ switchLanguage(list[1], 'title') }}</div>
+      </div>
+      <div class="art" @click="go('art')">
+        <div class="txt_w">{{ switchLanguage(list[6], 'title') }}</div>
+      </div>
+      <div class="school" @click="go('school')">
+        <div class="txt_w">{{ switchLanguage(list[5], 'title') }}</div>
+      </div>
+      <div class="service" @click="go('service')">
+        <div class="txt_w">{{ switchLanguage(list[3], 'title') }}</div>
+      </div>
+      <div class="member" @click="go('member')">
+        <div class="txt_w">{{ switchLanguage(list[2], 'title') }}</div>
+      </div>
+      <div class="parking" @click="go('parking')">
+        <div class="txt">{{ switchLanguage(list[4], 'title') }}</div>
+      </div>
     </div>
   </Transition>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-
+const list = [
+  {
+    title: '店铺导航',
+    titleEn: 'Brand'
+  },
+  {
+    title: '优惠活动',
+    titleEn: 'Activity'
+  },
+  {
+    title: '会员尊享',
+    titleEn: 'Member'
+  },
+  {
+    title: '客户服务',
+    titleEn: 'Service'
+  },
+  {
+    title: '停车缴费',
+    titleEn: 'Parking'
+  },
+  {
+    title: '文化学院',
+    titleEn: 'School'
+  },
+  {
+    title: '艺术中心',
+    titleEn: 'Art'
+  }
+]
 const router = useRouter()
 function go(path: string) {
   router.push(path)
@@ -31,16 +75,32 @@ function go(path: string) {
   .brand {
     @include ab(0, 0, 1);
 
+    position: relative;
     width: 270px;
     height: 536px;
+    padding-top: 32px;
+    padding-left: 24px;
     background: url('@/assets/images/index/brand.png') no-repeat;
     background-size: 100% 100%;
+    .sear {
+      position: absolute;
+      top: 125px;
+      left: 24px;
+      font-size: 16px;
+      font-family: 'font_regular';
+      color: rgb(255 255 255 / 80%);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    }
   }
   .activity {
     @include ab(0, 280px, 1);
 
     width: 520px;
     height: 263px;
+    padding-top: 32px;
+    padding-left: 24px;
     background: url('@/assets/images/index/activity.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -49,6 +109,8 @@ function go(path: string) {
 
     width: 220px;
     height: 263px;
+    padding-top: 24px;
+    padding-left: 24px;
     background: url('@/assets/images/index/art.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -57,6 +119,8 @@ function go(path: string) {
 
     width: 290px;
     height: 263px;
+    padding-top: 24px;
+    padding-left: 24px;
     background: url('@/assets/images/index/school.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -65,6 +129,8 @@ function go(path: string) {
 
     width: 255px;
     height: 263px;
+    padding-top: 24px;
+    padding-left: 24px;
     background: url('@/assets/images/index/ser.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -73,6 +139,8 @@ function go(path: string) {
 
     width: 255px;
     height: 263px;
+    padding-top: 24px;
+    padding-left: 24px;
     background: url('@/assets/images/index/member.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -81,8 +149,26 @@ function go(path: string) {
 
     width: 520px;
     height: 263px;
+    padding-top: 32px;
+    padding-left: 24px;
     background: url('@/assets/images/index/park.png') no-repeat;
     background-size: 100% 100%;
   }
 }
+.txt {
+  font-size: 36px;
+  font-family: 'font_bold';
+  color: rgb(0 0 0 / 90%);
+  font-style: normal;
+  font-weight: 700;
+  line-height: 44px;
+}
+.txt_w {
+  font-size: 34px;
+  font-family: 'font_bold';
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 51px;
+}
 </style>