feat: 首页tabs

src/views/Index/Index.vue

@@ -26,7 +26,12 @@
           <div class="bottom-right"></div>
         </div>
       </div>
-      <div class="r2"></div>
+      <div class="r2">
+        <div class="item" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
+          <div class="icon"><img :src="tab.icon" /></div>
+          <div class="title">{{ switchLanguage(tab, 'title') }}</div>
+        </div>
+      </div>
       <!-- <div class="cards pos">
         <div class="card" @click="handleCard(item)" v-for="item of cardsList" :key="item.moduleType">
           <h1 class="name">{{ item.name }}</h1>
@@ -56,6 +61,7 @@ const guideDesc = ref('')
 const hotRecommend = computed(() => indexList.value.hotSearch.slice(0, 5) ?? [])
 const cardsList = computed(() => indexList.value.columnList ?? [])
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
+
 getBrandList().then(({ data: { allShopNum, industryFatherList } }) => {
   const spFormat = industryFatherList.find(({ isSpecial }) => isSpecial)
   guideDesc.value = `全场${allShopNum}个品牌${spFormat ? `，其中${spFormat.shopNum}个${spFormat.industryName}品牌` : ''}`
@@ -98,6 +104,7 @@ function handleHot(item) {
         color: rgba(0, 0, 0, 0.8);
       }
       .row {
+        margin-top: 16px;
         .item {
           position: relative;
           display: inline-block;
@@ -210,11 +217,32 @@ function handleHot(item) {
     }
     .r2 {
       display: flex;
+      margin-top: 40px;
       .item {
         display: flex;
         flex-direction: column;
         flex: 1;
         height: 151px;
+        justify-content: space-between;
+        .icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 118px;
+          background: #ffffff;
+          border-radius: 24px;
+          img {
+            width: 80px;
+            height: 80px;
+          }
+        }
+        .title {
+          font-weight: 700;
+          font-size: 18px;
+          line-height: 21px;
+          text-align: center;
+          color: rgba(0, 0, 0, 0.8);
+        }
       }
       .item + .item {
         margin-left: 24px;
@@ -243,13 +271,6 @@ function handleHot(item) {
     margin-bottom: 110px;
   }
 
-  .title {
-    margin-bottom: 16px;
-    font-family: 'font_bold';
-    font-weight: 700;
-    font-size: 24;
-    color: var(--color-white-opacity);
-  }
   .scroll {
     height: 59px;
     overflow: hidden;