feat: 首页左上部分

4 years ago · fa2efb5916
31 changed files with 6817 additions and 133 deletions
--- a/package.json
+++ b/package.json
@ -3,6 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
+    "start": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
--- a/src/assets/images/sidebar/activity.png
+++ b/src/assets/images/sidebar/activity.png
--- a/src/assets/images/sidebar/brand.png
+++ b/src/assets/images/sidebar/brand.png
--- a/src/assets/images/sidebar/foods.png
+++ b/src/assets/images/sidebar/foods.png
--- a/src/assets/images/sidebar/guide.png
+++ b/src/assets/images/sidebar/guide.png
--- a/src/assets/images/sidebar/index.png
+++ b/src/assets/images/sidebar/index.png
--- a/src/assets/images/sidebar/mall.png
+++ b/src/assets/images/sidebar/mall.png
--- a/src/assets/images/sidebar/member.png
+++ b/src/assets/images/sidebar/member.png
--- a/src/assets/images/sidebar/movie.png
+++ b/src/assets/images/sidebar/movie.png
--- a/src/assets/images/sidebar/parking.png
+++ b/src/assets/images/sidebar/parking.png
--- a/src/assets/images/sidebar/service.png
+++ b/src/assets/images/sidebar/service.png
--- a/src/base/Temperature/Temperature.vue
+++ b/src/base/Temperature/Temperature.vue
@ -2,7 +2,6 @@
  <div class="Temperature-wrapper">
    <div class="temperature">{{ weather.temperature_Now }}°</div>
    <i class="iconfont weather-icon" :class="icon.icon"></i>
-    <div class="line"></div>
  </div>
 </template>

@ -14,29 +13,27 @@ const { weather, icon } = useWeather()

 <style lang="scss" scoped>
 .Temperature-wrapper {
+  position: fixed;
+  top: 48px;
+  right: 68px;
+  height: 44px;
  display: flex;
-  flex-direction: column;
  align-items: center;
 }
 .weather-icon {
-  color: var(--color-black-opacity-4);
-  font-size: 30px;
+  color: #000000;
+  font-size: 36px;
  font-weight: bolder;
  font-family: 'font_bold';
-  margin-bottom: 32px;
 }
 .temperature {
-  font-weight: bolder;
-  color: var(--color-black-opacity-6);
-  font-family: 'font_bold';
-  font-size: 26px;
-  padding-bottom: 5px;
-}
-.line {
-  margin-bottom: 32px;
-  height: 1px;
-  width: 44px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 1px;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  letter-spacing: 0.05em;
+  color: #000000;
+  margin-right: 12px;
 }
 </style>
--- a/src/base/Time/Time.vue
+++ b/src/base/Time/Time.vue
@ -1,7 +1,7 @@
 <template>
-  <div class="right">{{ currentTime }}</div>
-  <div class="month common">{{ formatDay(dateRef) }}</div>
-  <div class="week common">{{ whichWeekRef }}</div>
+  <div class="time">{{ currentTime }}</div>
+  <div class="month">{{ formatDay(dateRef) }}</div>
+  <div class="week">{{ whichWeekRef }}</div>
 </template>

 <script setup>
@ -14,22 +14,36 @@ const { dateRef, whichWeekRef } = useDay()
 </script>

 <style lang="scss" scoped>
-.right {
-  padding-top: 56px;
-  font-size: 26px;
-  font-family: 'font_bold';
+.time {
+  position: fixed;
+  top: 48px;
+  left: 659px;
+  font-family: 'Montserrat';
+  font-style: normal;
  font-weight: 700;
-  color: var(--color-black-opacity-6);
-  margin-bottom: 8px;
+  font-size: 36px;
+  line-height: 44px;
+  color: #000;
 }
-.week {
-  margin-bottom: 32px;
+.month {
+  position: fixed;
+  top: 54px;
+  left: 783px;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 16px;
 }
-.common {
-  font-family: 'font_bold';
+.week {
+  position: fixed;
+  top: 70px;
+  left: 783px;
+  font-family: 'Montserrat';
+  font-style: normal;
  font-weight: 700;
-  font-size: 12px;
-  color: var(--color-black-opacity-4);
-  text-align: right;
+  font-size: 13px;
+  line-height: 16px;
+  color: #516dd8;
 }
 </style>
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/src/components/PublicComponent/PublicComponent.vue
@ -17,10 +17,9 @@
  <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
    <Search v-if="showSearch" />
  </Transition>
-
-  <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
-    <Sidebar v-show="$route.meta.showMenu" />
-  </Transition>
+  <Temperature />
+  <Time />
+  <SearchBar />
 </template>

 <script setup>
@ -31,13 +30,14 @@ import { useRouter, useRoute } from 'vue-router'
 import { useHandleScreen } from '@/composables/useHandleScreen'
 import { useLogout } from '@/composables/useLogout'
 import { useInitMap } from '@/composables/useInitMap'
-
 import Map from '@/components/Map/Map.vue'
 const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
 const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
-const Sidebar = defineAsyncComponent(() => import('@/components/Sidebar/Sidebar.vue'))
 const BrandDetail = defineAsyncComponent(() => import('@/components/BrandDetail/BrandDetail.vue'))
 const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
+const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
+const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
+const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))

 const router = useRouter()
 const route = useRoute()
--- a/src/components/PublicComponent/SearchBar.vue
+++ b/src/components/PublicComponent/SearchBar.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="row">
+    <div class="back" v-if="$route.path !== '/index'" @click="() => $router.push('/')"></div>
+    <div class="bar">
+      <div class="icon"></div>
+      <div class="stick"></div>
+      <div class="placeholder">精确查询品牌/公共设施</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.row {
+  position: fixed;
+  top: 260px;
+  left: 68px;
+  right: 68px;
+  height: 100px;
+  display: flex;
+  .back {
+    width: 130px;
+    height: 100px;
+    margin-right: 40px;
+    background: center / cover no-repeat url(./back.png);
+    box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
+    border-radius: 24px;
+  }
+  .bar {
+    flex: 1;
+    height: 100px;
+    background: #ffffff;
+    box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
+    border-radius: 24px;
+    display: flex;
+    padding-left: 40px;
+    align-items: center;
+    .icon {
+      width: 56px;
+      height: 56px;
+      background: center / cover no-repeat url(./icon.png);
+    }
+    .stick {
+      width: 4px;
+      height: 38px;
+      background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%);
+      margin: 0 32px;
+    }
+    .placeholder {
+      font-family: 'HarmonyOS Sans SC';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 23px;
+      color: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+</style>
--- a/src/components/PublicComponent/back.png
+++ b/src/components/PublicComponent/back.png
--- a/src/components/PublicComponent/icon.png
+++ b/src/components/PublicComponent/icon.png
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@ -1,23 +1,17 @@
 <template>
  <div class="sidebar-wrapper">
-    <Time />
-    <Temperature />
    <div class="menu-list" @click="goPage(item)" :class="{ active: selectedModule === item.title }" v-for="item of sidebarList" :key="item.title">
      <img :src="item.icon" alt="" />
      <span class="text">{{ item.title }}</span>
      <span class="text-en">{{ item.titleEn }}</span>
    </div>
-    <Language />
  </div>
 </template>

 <script setup>
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
-import Language from '../Language/Language.vue'
 import { useRouter } from 'vue-router'
-import Temperature from '@/base/Temperature/Temperature.vue'
-import Time from '@/base/Time/Time.vue'

 const router = useRouter()
 const store = useStore()
@ -53,6 +47,7 @@ function goPage(item) {
    width: 110px;
    height: 140px;
    margin-bottom: 10px;
+
    &::before,
    &::after {
      position: absolute;
@ -64,12 +59,14 @@ function goPage(item) {
      border-radius: 8px;
      transition: bottom 0.5s;
    }
+
    &.active {
      &::before {
        background-color: #fff;
        z-index: 3;
        bottom: 4px;
      }
+
      &::after {
        background: var(--color-linear-lightgoldenyellow);
        z-index: 2;
@ -77,12 +74,14 @@ function goPage(item) {
        height: 136px;
      }
    }
+
    img {
      position: relative;
      width: 80px;
      height: 80px;
      z-index: 10;
    }
+
    .text {
      position: relative;
      z-index: 10;
@ -92,6 +91,7 @@ function goPage(item) {
      font-size: 14px;
      padding: 4px 0;
    }
+
    .text-en {
      position: relative;
      z-index: 10;
--- a/src/components/Sidebar/list.js
+++ b/src/components/Sidebar/list.js
@ -1,42 +1,14 @@
 export const sidebarList = [
-  {
-    icon: require('@/assets/images/sidebar/index.png'),
-    title: '首页',
-    moduleName: 'home',
-    titleEn: 'HOME',
-    path: '/'
-  },
-  {
-    icon: require('@/assets/images/sidebar/guide.png'),
-    title: '地图导览',
-    moduleName: 'home',
-    titleEn: 'MAP',
-    path: '/guide'
-  },
-  {
-    icon: require('@/assets/images/sidebar/brand.png'),
-    title: '品牌列表',
-    moduleName: 'brand',
-    titleEn: 'BRAND',
-    path: '/brand'
-  },
-  {
-    icon: require('@/assets/images/sidebar/foods.png'),
-    title: '特色美食',
-    moduleName: 'food',
-    titleEn: 'FOOD',
-    path: '/foods'
-  },
  {
    icon: require('@/assets/images/sidebar/activity.png'),
-    title: '活动精选',
+    title: '商场活动',
    moduleName: 'activity',
    titleEn: 'SELECTION',
    path: '/activity'
  },
  {
    icon: require('@/assets/images/sidebar/member.png'),
-    title: '会员专享',
+    title: '尊享会员',
    moduleName: 'member',
    titleEn: 'MEMBER',
    path: '/member'
@ -50,16 +22,51 @@ export const sidebarList = [
  },
  {
    icon: require('@/assets/images/sidebar/movie.png'),
-    title: '热门电影',
+    title: '影视天地',
    moduleName: 'movie',
    titleEn: 'MOVIE',
    path: '/movie'
  },
  {
-    icon: require('@/assets/images/sidebar/service.png'),
-    title: '商场服务',
-    titleEn: 'SERVICE',
-    moduleName: 'service',
-    path: '/service'
+    icon: require('@/assets/images/sidebar/mall.png'),
+    title: '商场介绍',
+    moduleName: 'mall',
+    titleEn: 'MALL',
+    path: '/mall'
  }
+  // {
+  //   icon: require('@/assets/images/sidebar/index.png'),
+  //   title: '首页',
+  //   moduleName: 'home',
+  //   titleEn: 'HOME',
+  //   path: '/'
+  // },
+  // {
+  //   icon: require('@/assets/images/sidebar/guide.png'),
+  //   title: '地图导览',
+  //   moduleName: 'home',
+  //   titleEn: 'MAP',
+  //   path: '/guide'
+  // },
+  // {
+  //   icon: require('@/assets/images/sidebar/brand.png'),
+  //   title: '品牌列表',
+  //   moduleName: 'brand',
+  //   titleEn: 'BRAND',
+  //   path: '/brand'
+  // }
+  // {
+  //   icon: require('@/assets/images/sidebar/foods.png'),
+  //   title: '特色美食',
+  //   moduleName: 'food',
+  //   titleEn: 'FOOD',
+  //   path: '/foods'
+  // },
+  // {
+  //   icon: require('@/assets/images/sidebar/service.png'),
+  //   title: '商场服务',
+  //   titleEn: 'SERVICE',
+  //   moduleName: 'service',
+  //   path: '/service'
+  // }
 ]
--- a/src/composables/useDay.js
+++ b/src/composables/useDay.js
@ -3,7 +3,7 @@ import { useStore } from '@/store/root'

 export const useDay = () => {
  const days = {
-    zh: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    zh: ['SUN', 'MON', 'TUES', 'WED', 'THU', 'FRI', 'SAT'],
    en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    tw: ['星期日', '星期壹', '星期二', '星期三', '星期四', '星期五', '星期六']
  }
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@ -84,7 +84,7 @@
  "from": "Data from Alibaba Cloud",
  "hot": "Popular recommendation",
  "current": "current floor",
-  "hotSearch": "Vientiane hot search",
+  "hotSearch": "Hot search",
  "saoma": "Scan the code to enter the applet",
  "tuijian": "Member recommendation",
  "year": "The Mixc Anniversary Offer",
--- a/src/i18n/lang/tw.json
+++ b/src/i18n/lang/tw.json
@ -85,7 +85,7 @@
  "update": "最後更新",
  "hot": "熱門推薦",
  "current": "當前樓層",
-  "hotSearch": "萬象熱搜",
+  "hotSearch": "大家都在找",
  "saoma": "掃碼進入小程序",
  "tuijian": "會員推薦",
  "year": "萬象城週年優惠",
--- a/src/i18n/lang/zh.json
+++ b/src/i18n/lang/zh.json
@ -85,7 +85,7 @@
  "update": "最后更新",
  "hot": "热门推荐",
  "current": "当前楼层",
-  "hotSearch": "万象热搜",
+  "hotSearch": "大家都在找",
  "saoma": "扫码进入小程序",
  "tuijian": "会员推荐",
  "year": "万象城周年优惠",
--- a/src/views/Brand/Brand.vue
+++ b/src/views/Brand/Brand.vue
@ -35,7 +35,6 @@
        </div>
      </div>
    </div>
-
  </View>
 </template>

--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@ -1,28 +1,40 @@
 <template>
  <div class="index-container">
-    <img src="../../assets/images/mall_logo.png" class="mall_logo" alt="" />
-    <div class="top pos">
-      <div class="top-left">
-        <div class="text">超快搜<i>quick</i></div>
-        <p class="text-en">search</p>
+    <div class="header">
+      <div class="hot-search">
+        <h1 class="title">{{ $t('hotSearch') }}</h1>
+        <div class="row">
+          <div class="item" v-for="(item, i) of hotRecommend" :key="item.shopId" @click="handleHot(item)">
+            <img class="medal" v-if="i === 0" src="./fir.svg" />
+            <img class="medal" v-if="i === 1" src="./sec.svg" />
+            <img class="medal" v-if="i === 2" src="./thi.svg" />
+            <div class="text">{{ item.shopName }}</div>
+          </div>
+        </div>
      </div>
-      <MockInput />
    </div>
-    <div class="hot-search pos">
-      <h1 class="title">{{ $t('hotSearch') }}</h1>
-      <ScrollView class="scroll" :list="hotRecommend" scroll-x>
-        <div class="scroll-content">
-          <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleHot(item)">{{ item.shopName }}</div>
+    <div class="content">
+      <div class="r1">
+        <div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
+          <div class="top">
+            <div class="title">找店</div>
+            <div class="meta">{{ guideDesc }}</div>
+            <img src="./guideImg.svg" />
+          </div>
+          <div class="meta1">当前位置<img src="./pos.svg" /></div>
+          <div class="meta2">{{ bf }}</div>
+          <div class="bottom-right"></div>
        </div>
-      </ScrollView>
-    </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>
-        <h1 class="sub-title">{{ item.nameEn }}</h1>
-        <p class="introduce">{{ switchLanguage(item, 'introduce') }}</p>
-        <img :src="config.sourceUrl + item.crossFileUrl" alt="" class="bg" />
      </div>
+      <div class="r2"></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>
+          <h1 class="sub-title">{{ item.nameEn }}</h1>
+          <p class="introduce">{{ switchLanguage(item, 'introduce') }}</p>
+          <img :src="config.sourceUrl + item.crossFileUrl" alt="" class="bg" />
+        </div>
+      </div> -->
    </div>

    <router-view />
@ -30,19 +42,29 @@
 </template>

 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
-import MockInput from '@/components/MockInput/MockInput.vue'
+import { getBrandList } from '@/http/brand/api'

 const router = useRouter()
 const store = useStore()
-const { indexList, config, shopList } = storeToRefs(store)
+const { indexList, currentFloor, buildingList, shopList, sidebarList, selectedModule } = storeToRefs(store)
+const guideDesc = ref('')

-const hotRecommend = computed(() => indexList.value.hotSearch ?? [])
+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}品牌` : ''}`
+})
+
+const goPage = item => {
+  store.SET_SELECTED_MODULE(item.title)
+  router.push(item.path)
+}

 function handleCard(item) {
  router.push('/index/waterfall?type=' + item.moduleType)
@ -57,34 +79,149 @@ function handleHot(item) {

 <style lang="scss" scoped>
 .index-container {
+  display: flex;
+  flex-direction: column;
  height: 1920px;
  position: relative;
-  padding-left: 170px;
-  .mall_logo {
-    position: absolute;
-    top: 56px;
-    right: 40px;
-    width: 108px;
-  }
+  .header {
+    width: 100%;
+    height: 515px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
+    padding: 392px 0 0 68px;
+    .hot-search {
+      .title {
+        font-style: normal;
+        font-weight: 900;
+        font-size: 20px;
+        line-height: 23px;
+        color: rgba(0, 0, 0, 0.8);
+      }
+      .row {
+        .item {
+          position: relative;
+          display: inline-block;
+          width: 176px;
+          height: 52px;

-  &::before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--color-linear-blue);
-    z-index: 0;
-  }
-  .pos {
-    position: relative;
-    z-index: 2;
+          background: rgba(255, 255, 255, 0.8);
+          border-radius: 100px;
+          .text {
+            text-align: center;
+            font-weight: 900;
+            font-size: 16px;
+            line-height: 52px;
+            color: rgba(0, 0, 0, 0.6);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            padding: 0 32px;
+          }
+
+          .medal {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            left: 4px;
+            top: -10px;
+          }
+        }
+        .item + .item {
+          margin-left: 24px;
+        }
+      }
+    }
  }
-  .top {
-    padding-top: 220px;
-    padding-bottom: 29px;
+  .content {
+    width: 100%;
+    flex: 1;
+    background: #dee6f6;
+    padding: 40px 68px 0 68px;
+    .r1 {
+      display: flex;
+      height: 557px;
+      .guide {
+        position: relative;
+        width: 339px;
+        height: 557px;
+        background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+        border-radius: 32px;
+        overflow: hidden;
+        padding: 460px 0 0 40px;
+
+        .top {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 432px;
+          background: linear-gradient(180deg, #435acd 0%, #749cf3 100%);
+          border-radius: 32px;
+          padding: 40px;
+          z-index: 1;
+          .title {
+            font-style: normal;
+            font-weight: 900;
+            font-size: 56px;
+            line-height: 66px;
+            color: #ffffff;
+          }
+          .meta {
+            margin-top: 8px;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 19px;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          img {
+            margin-top: 40px;
+            width: 259px;
+          }
+        }
+        .bottom-right {
+          position: absolute;
+          width: 108px;
+          height: 156px;
+          right: 0;
+          bottom: 0;
+          background: rgba(255, 255, 255, 0.2);
+        }
+        .meta1 {
+          display: inline-flex;
+          font-weight: 700;
+          font-size: 20px;
+          line-height: 23px;
+          color: rgba(0, 0, 0, 0.6);
+          margin-bottom: 6px;
+          img {
+            width: 20px;
+            height: 20px;
+            margin-left: 4px;
+          }
+        }
+        .meta2 {
+          font-weight: 900;
+          font-size: 32px;
+          line-height: 38px;
+          color: #000000;
+        }
+      }
+    }
+    .r2 {
+      display: flex;
+      .item {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 151px;
+      }
+      .item + .item {
+        margin-left: 24px;
+      }
+    }
  }
+
  .text {
    font-size: 88px;
    font-weight: 700;
--- a/src/views/Index/fir.svg
+++ b/src/views/Index/fir.svg
@ -0,0 +1,50 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="#D9D9D9"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint0_linear_299_18805)"/>
+<g filter="url(#filter0_d_299_18805)">
+<rect x="3.8125" y="2" width="24.381" height="24.381" rx="12.1905" fill="url(#paint1_linear_299_18805)"/>
+<g filter="url(#filter1_i_299_18805)">
+<g clip-path="url(#clip0_299_18805)">
+<rect x="6.125" y="4.31635" width="19.7486" height="19.7486" rx="9.87429" fill="url(#paint2_linear_299_18805)"/>
+<path d="M14.9761 19.8438V9.77975L16.3361 11.0917H12.8961V8.64375H18.1441V19.8438H14.9761Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_299_18805" x="3.32488" y="2" width="25.3562" height="25.3562" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.487619"/>
+<feGaussianBlur stdDeviation="0.24381"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.690196 0 0 0 0 0.356863 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_299_18805"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_299_18805" result="shape"/>
+</filter>
+<filter id="filter1_i_299_18805" x="6.125" y="4.31635" width="19.7486" height="20.3581" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.975238"/>
+<feGaussianBlur stdDeviation="0.304762"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.9125 0 0 0 0 0.672969 0 0 0 0 0.330781 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_299_18805"/>
+</filter>
+<linearGradient id="paint0_linear_299_18805" x1="16" y1="21.9872" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5AD75"/>
+<stop offset="0.5746" stop-color="#F6CA69"/>
+</linearGradient>
+<linearGradient id="paint1_linear_299_18805" x1="16.003" y1="2" x2="16.003" y2="26.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDF3B9"/>
+<stop offset="1" stop-color="#F8DE91"/>
+</linearGradient>
+<linearGradient id="paint2_linear_299_18805" x1="15.9993" y1="4.31635" x2="15.9993" y2="24.0649" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F6D995"/>
+<stop offset="1" stop-color="#E9B060"/>
+</linearGradient>
+<clipPath id="clip0_299_18805">
+<rect x="6.125" y="4.31635" width="19.7486" height="19.7486" rx="9.87429" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/views/Index/guideImg.svg
+++ b/src/views/Index/guideImg.svg
@ -0,0 +1,14 @@
+<svg width="259" height="219" viewBox="0 0 259 219" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H84V85.1667H0V0ZM0 92.2638H46.9V117.611H83.9998V177.431H46.8998V177.43H0V92.2638ZM0 184.528H84V219H0V184.528ZM173.6 0H90.2998V85.1667H173.6V0ZM116.2 117.611H173.6V219H116.2V117.611ZM259 0H198.8V85.1667H259V0ZM198.8 117.611H259V150.056H198.8V117.611ZM259 156.139H198.8V219H259V156.139Z" fill="white" fill-opacity="0.1"/>
+<path d="M100 173.5V120.293C100 111.457 107.163 104.293 116 104.293H171C179.837 104.293 187 97.1297 187 88.2931V61" stroke="url(#paint0_linear_3_32)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M198 61L188.573 49.0015C187.772 47.9824 186.228 47.9824 185.427 49.0015L176 61" stroke="white" stroke-width="6" stroke-linecap="round"/>
+<circle cx="100" cy="168" r="21" fill="white" fill-opacity="0.2"/>
+<circle cx="100" cy="168" r="11" fill="white" fill-opacity="0.4"/>
+<circle cx="100" cy="168" r="6" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_3_32" x1="159.5" y1="65.5" x2="131.399" y2="181.892" gradientUnits="userSpaceOnUse">
+<stop offset="0.212475" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/views/Index/pos.svg
+++ b/src/views/Index/pos.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17.4167L14.125 13.2917C14.9408 12.4759 15.4963 11.4365 15.7213 10.3049C15.9463 9.17337 15.8308 8.00051 15.3892 6.93465C14.9477 5.86878 14.2 4.95777 13.2408 4.31682C12.2815 3.67587 11.1537 3.33377 10 3.33377C8.8463 3.33377 7.71851 3.67587 6.75924 4.31682C5.79997 4.95777 5.05229 5.86878 4.61076 6.93465C4.16923 8.00051 4.05368 9.17337 4.27871 10.3049C4.50374 11.4365 5.05926 12.4759 5.875 13.2917L10 17.4167ZM10 19.7734L4.69667 14.47C3.64779 13.4211 2.93349 12.0847 2.64411 10.6299C2.35473 9.17504 2.50326 7.66704 3.07092 6.2966C3.63858 4.92616 4.59987 3.75483 5.83324 2.93072C7.0666 2.10661 8.51665 1.66675 10 1.66675C11.4834 1.66675 12.9334 2.10661 14.1668 2.93072C15.4001 3.75483 16.3614 4.92616 16.9291 6.2966C17.4968 7.66704 17.6453 9.17504 17.3559 10.6299C17.0665 12.0847 16.3522 13.4211 15.3033 14.47L10 19.7734ZM10 10.8334C10.442 10.8334 10.866 10.6578 11.1785 10.3452C11.4911 10.0326 11.6667 9.60871 11.6667 9.16668C11.6667 8.72466 11.4911 8.30073 11.1785 7.98817C10.866 7.67561 10.442 7.50002 10 7.50002C9.55798 7.50002 9.13405 7.67561 8.82149 7.98817C8.50893 8.30073 8.33334 8.72466 8.33334 9.16668C8.33334 9.60871 8.50893 10.0326 8.82149 10.3452C9.13405 10.6578 9.55798 10.8334 10 10.8334ZM10 12.5C9.11595 12.5 8.2681 12.1488 7.64298 11.5237C7.01786 10.8986 6.66667 10.0507 6.66667 9.16668C6.66667 8.28263 7.01786 7.43478 7.64298 6.80966C8.2681 6.18454 9.11595 5.83335 10 5.83335C10.8841 5.83335 11.7319 6.18454 12.357 6.80966C12.9821 7.43478 13.3333 8.28263 13.3333 9.16668C13.3333 10.0507 12.9821 10.8986 12.357 11.5237C11.7319 12.1488 10.8841 12.5 10 12.5Z" fill="black" fill-opacity="0.6"/>
+</svg>
--- a/src/views/Index/sec.svg
+++ b/src/views/Index/sec.svg
@ -0,0 +1,55 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="#D9D9D9"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint0_linear_299_18809)"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint1_linear_299_18809)"/>
+<g filter="url(#filter0_d_299_18809)">
+<rect x="3.8125" y="2" width="24.381" height="24.381" rx="12.1905" fill="url(#paint2_linear_299_18809)"/>
+<g filter="url(#filter1_i_299_18809)">
+<g clip-path="url(#clip0_299_18809)">
+<rect x="6.125" y="4.31683" width="19.7486" height="19.7486" rx="9.87429" fill="url(#paint3_linear_299_18809)"/>
+<path d="M11.8514 20.0325V18.0485L16.0434 14.1285C16.3421 13.8512 16.5608 13.6059 16.6994 13.3925C16.8488 13.1792 16.9448 12.9872 16.9874 12.8165C17.0408 12.6352 17.0674 12.4699 17.0674 12.3205C17.0674 11.9579 16.9448 11.6752 16.6994 11.4725C16.4648 11.2699 16.1074 11.1685 15.6274 11.1685C15.2221 11.1685 14.8434 11.2592 14.4914 11.4405C14.1394 11.6219 13.8514 11.8939 13.6274 12.2565L11.2754 10.9445C11.6914 10.2405 12.2941 9.6752 13.0834 9.24853C13.8728 8.82186 14.8168 8.60853 15.9154 8.60853C16.7794 8.60853 17.5368 8.7472 18.1874 9.02453C18.8381 9.30186 19.3448 9.69653 19.7074 10.2085C20.0808 10.7205 20.2674 11.3232 20.2674 12.0165C20.2674 12.3792 20.2194 12.7419 20.1234 13.1045C20.0274 13.4565 19.8408 13.8352 19.5634 14.2405C19.2968 14.6352 18.8968 15.0779 18.3634 15.5685L15.0354 18.6405L14.5074 17.5205H20.5714V20.0325H11.8514Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_299_18809" x="3.32488" y="2" width="25.3562" height="25.3562" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.487619"/>
+<feGaussianBlur stdDeviation="0.24381"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.486275 0 0 0 0 0.435294 0 0 0 0 0.427451 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_299_18809"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_299_18809" result="shape"/>
+</filter>
+<filter id="filter1_i_299_18809" x="6.125" y="4.31683" width="19.7486" height="20.3581" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.975238"/>
+<feGaussianBlur stdDeviation="0.304762"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 0.454902 0 0 0 0 0.45098 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_299_18809"/>
+</filter>
+<linearGradient id="paint0_linear_299_18809" x1="16" y1="21.9872" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5AD75"/>
+<stop offset="0.5746" stop-color="#F6CA69"/>
+</linearGradient>
+<linearGradient id="paint1_linear_299_18809" x1="16" y1="21" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D6163"/>
+<stop offset="1" stop-color="#E9E9E9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_299_18809" x1="16.003" y1="2" x2="16.003" y2="26.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EBE6E6"/>
+<stop offset="1" stop-color="#C4BCBD"/>
+</linearGradient>
+<linearGradient id="paint3_linear_299_18809" x1="15.9993" y1="4.31683" x2="15.9993" y2="24.0654" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A9090"/>
+<stop offset="1" stop-color="#A19A9A"/>
+</linearGradient>
+<clipPath id="clip0_299_18809">
+<rect x="6.125" y="4.31683" width="19.7486" height="19.7486" rx="9.87429" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/views/Index/thi.svg
+++ b/src/views/Index/thi.svg
@ -0,0 +1,60 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="#D9D9D9"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint0_linear_299_18812)"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint1_linear_299_18812)"/>
+<path d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22V30.5789C24 31.271 23.3138 31.7539 22.6624 31.5202L16.3376 29.2515C16.1194 29.1732 15.8806 29.1732 15.6624 29.2515L9.33763 31.5202C8.68616 31.7539 8 31.271 8 30.5789V22Z" fill="url(#paint2_linear_299_18812)"/>
+<g filter="url(#filter0_d_299_18812)">
+<rect x="3.8125" y="2" width="24.381" height="24.381" rx="12.1905" fill="url(#paint3_linear_299_18812)"/>
+<g filter="url(#filter1_i_299_18812)">
+<g clip-path="url(#clip0_299_18812)">
+<rect x="6.125" y="4.31598" width="19.7486" height="19.7486" rx="9.87429" fill="url(#paint4_linear_299_18812)"/>
+<path d="M15.6594 20.2557C14.8808 20.2557 14.1021 20.1597 13.3234 19.9677C12.5554 19.7757 11.8834 19.5037 11.3074 19.1517L12.4594 16.7677C12.9074 17.0664 13.4034 17.2957 13.9474 17.4557C14.5021 17.6157 15.0408 17.6957 15.5634 17.6957C16.1074 17.6957 16.5394 17.5944 16.8594 17.3917C17.1794 17.1891 17.3394 16.9011 17.3394 16.5277C17.3394 16.1971 17.2061 15.9357 16.9394 15.7437C16.6728 15.5411 16.2354 15.4397 15.6274 15.4397H14.2994V13.4397L17.3074 10.1917L17.6114 11.2797H11.8834V8.83174H19.9794V10.8157L16.9714 14.0637L15.4194 13.1837H16.2834C17.6808 13.1837 18.7368 13.4984 19.4514 14.1277C20.1768 14.7464 20.5394 15.5464 20.5394 16.5277C20.5394 17.1677 20.3634 17.7704 20.0114 18.3357C19.6701 18.9011 19.1421 19.3651 18.4274 19.7277C17.7128 20.0797 16.7901 20.2557 15.6594 20.2557Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_299_18812" x="3.32488" y="2" width="25.3562" height="25.3562" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.487619"/>
+<feGaussianBlur stdDeviation="0.24381"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.7625 0 0 0 0 0.496701 0 0 0 0 0.365365 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_299_18812"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_299_18812" result="shape"/>
+</filter>
+<filter id="filter1_i_299_18812" x="6.125" y="4.31598" width="19.7486" height="20.3581" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.975238"/>
+<feGaussianBlur stdDeviation="0.304762"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.843137 0 0 0 0 0.580392 0 0 0 0 0.439216 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_299_18812"/>
+</filter>
+<linearGradient id="paint0_linear_299_18812" x1="16" y1="21.9872" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5AD75"/>
+<stop offset="0.5746" stop-color="#F6CA69"/>
+</linearGradient>
+<linearGradient id="paint1_linear_299_18812" x1="16" y1="21" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D6163"/>
+<stop offset="1" stop-color="#E9E9E9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_299_18812" x1="16" y1="21" x2="16" y2="33.3898" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D37D54"/>
+<stop offset="1" stop-color="#FFF7F3"/>
+</linearGradient>
+<linearGradient id="paint3_linear_299_18812" x1="16.003" y1="2" x2="16.003" y2="26.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4C1A4"/>
+<stop offset="1" stop-color="#E9956B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_299_18812" x1="15.9993" y1="4.31598" x2="15.9993" y2="24.0646" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4B69B"/>
+<stop offset="1" stop-color="#F0B89F"/>
+</linearGradient>
+<clipPath id="clip0_299_18812">
+<rect x="6.125" y="4.31598" width="19.7486" height="19.7486" rx="9.87429" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/yarn.lock
+++ b/yarn.lock