Merge branch 'dev' of company:project-shenyangk11/sy_k11_H_base_daoshi_vue_ts into dev

3 years ago · 5f51b62d68
18 changed files with 727 additions and 9 deletions
--- a/public/static/offline/JSON/index.json
+++ b/public/static/offline/JSON/index.json
@ -1 +1,311 @@
-{"code":200,"msg":"操作成功","data":{"temperature":"15","columnList":[{"moduleType":1,"name":"美食","nameEn":"","introduce":"","introduceEn":"","crossFileCode":"","verticalFileCode":""},{"moduleType":2,"name":"游玩","nameEn":"","introduce":"","introduceEn":"","crossFileCode":"","verticalFileCode":""},{"moduleType":3,"name":"购物","nameEn":"","introduce":"","introduceEn":"","crossFileCode":"","verticalFileCode":""}],"hotSearch":[{"logoCode":"Jrw0_ifPRL40HwIJuQMv7","logoUrl":"/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png","shopCode":"N58iWdPNw2wAB0X8BxmW1","shopName":"星巴克","building":"A","buildingCode":"suG1YjUhWnvRBJm3ULnCo","buildingOrder":0,"floor":"L1","floorCode":"-vH5uZXijKrzlJQIIIkba","floorOrder":4,"xaxis":"","yaxis":"","navXaxis":"","navYaxis":""}],"status":"多云转阴"}}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": {
+    "temperature": "15",
+    "columnList": [
+      {
+        "moduleType": 1,
+        "name": "美食",
+        "nameEn": "",
+        "introduce": "",
+        "introduceEn": "",
+        "crossFileCode": "",
+        "verticalFileCode": ""
+      },
+      {
+        "moduleType": 2,
+        "name": "游玩",
+        "nameEn": "",
+        "introduce": "",
+        "introduceEn": "",
+        "crossFileCode": "",
+        "verticalFileCode": ""
+      },
+      {
+        "moduleType": 3,
+        "name": "购物",
+        "nameEn": "",
+        "introduce": "",
+        "introduceEn": "",
+        "crossFileCode": "",
+        "verticalFileCode": ""
+      }
+    ],
+    "hotSearch": [
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv71",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv72",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv73",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv74",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv75",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv76",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv77",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv78",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv79",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv70",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv712",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv713",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv714",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv715",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv716",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv717",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      },
+      {
+        "logoCode": "Jrw0_ifPRL40HwIJuQMv718",
+        "logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png",
+        "shopCode": "N58iWdPNw2wAB0X8BxmW1",
+        "shopName": "星巴克",
+        "building": "A",
+        "buildingCode": "suG1YjUhWnvRBJm3ULnCo",
+        "buildingOrder": 0,
+        "floor": "L1",
+        "floorCode": "-vH5uZXijKrzlJQIIIkba",
+        "floorOrder": 4,
+        "xaxis": "",
+        "yaxis": "",
+        "navXaxis": "",
+        "navYaxis": ""
+      }
+    ],
+    "status": "多云转阴"
+  }
+}
--- a/src/assets/images/search/close.png
+++ b/src/assets/images/search/close.png
--- a/src/assets/images/search/del.png
+++ b/src/assets/images/search/del.png
--- a/src/assets/images/search/position.png
+++ b/src/assets/images/search/position.png
--- a/src/assets/images/search/quickBg.png
+++ b/src/assets/images/search/quickBg.png
--- a/src/assets/images/search/search.png
+++ b/src/assets/images/search/search.png
--- a/src/assets/images/search/searchi.png
+++ b/src/assets/images/search/searchi.png
--- a/src/components/Search/Hot.vue
+++ b/src/components/Search/Hot.vue
@ -0,0 +1,107 @@
+<template>
+  <div class="hot-container">
+    <div class="title">{{ $t('hot') }}</div>
+    <ScrollView class="myScoll" :list="list" :pull-up="false">
+      <div class="shop_list">
+        <div v-for="item in list" :key="item.shopCode" class="shop_item">
+          <div class="top">
+            <img v-lazy="item.logoUrl" alt="" />
+          </div>
+          <div class="info">
+            <div class="name">{{ switchLanguage(item, 'shopName') }}</div>
+            <div class="right">
+              <img src="@/assets/images/search/position.png" alt="" />
+              <div class="hose_num">{{ item.houseNumber }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ScrollView>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getIndexJson } from '@/http/api/base'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+const list = ref<HotSearch[]>()
+getIndexJson().then(({ data }) => {
+  list.value = data.hotSearch
+})
+</script>
+
+<style lang="scss" scoped>
+.hot-container {
+  width: 714px;
+
+  .title {
+    margin-bottom: 24px;
+    font-size: 36px;
+    font-family: 'font_bold';
+    color: #595447;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 44px;
+  }
+  .myScoll {
+    overflow: hidden;
+    height: 626px;
+  }
+  .shop_list {
+    display: grid;
+    gap: 12px 12px;
+    grid-template-columns: 1fr 1fr 1fr;
+    .shop_item {
+      width: 230px;
+      height: 270px;
+      .top {
+        @include fl(center);
+
+        width: 230px;
+        height: 230px;
+        margin-bottom: 16px;
+        background: #fff;
+        border-radius: 8px;
+        img {
+          width: 180px;
+          height: 180px;
+        }
+      }
+      .info {
+        @include fl(space-between);
+
+        width: 230px;
+        height: 24px;
+        .name {
+          @include no-wrap;
+
+          max-width: 140px;
+          height: 24px;
+          font-size: 16px;
+          font-family: 'font_bold';
+          color: rgb(0 0 0 / 60%);
+          font-style: normal;
+          font-weight: 700;
+          line-height: 24px;
+        }
+        .right {
+          @include fl();
+          img {
+            width: 14px;
+            height: 16px;
+            margin-right: 6px;
+          }
+          .hose_num {
+            font-size: 14px;
+            font-family: 'font_bold';
+            color: #a6976f;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Search/Key.vue
+++ b/src/components/Search/Key.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="key-container">
+    <div class="inp">
+      <img src="@/assets/images/search/searchi.png" alt="" />
+      <div class="ph">搜索</div>
+    </div>
+    <div class="board-container">
+      <ul class="letter-items">
+        <li v-for="(item, index) of letter" :key="item" class="letter" :class="{ 'active-btn': current === index }">
+          {{ item }}
+        </li>
+        <li class="letter del" :class="{ 'active-btn': current === 37 }">
+          <img src="@/assets/images/search/del.png" alt="" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 键盘按钮列表
+const letter = [
+  'Q',
+  'W',
+  'E',
+  'R',
+  'T',
+  'Y',
+  'U',
+  'I',
+  'O',
+  'P',
+  'A',
+  'S',
+  'D',
+  'F',
+  'G',
+  'H',
+  'J',
+  'K',
+  'L',
+  'Z',
+  'X',
+  'C',
+  'V',
+  'B',
+  'N',
+  'M'
+]
+const current = ref(-1)
+</script>
+
+<style lang="scss" scoped>
+.key-container {
+  margin: 68px 52px 286px 100px;
+  .inp {
+    position: relative;
+    width: 714px;
+    height: 80px;
+    padding: 22px 40px;
+    margin-bottom: 4px;
+    background: #fff;
+    border-radius: 12px;
+    img {
+      position: absolute;
+      top: 12px;
+      right: 29px;
+      width: 56px;
+      height: 56px;
+    }
+    .ph {
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #9f9585;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
+    }
+  }
+  .board-container {
+    width: 714px;
+    height: 256px;
+    padding: 32px 41px;
+    background: #fff;
+    border-radius: 12px;
+    .letter-items {
+      display: flex;
+      width: 632px;
+      flex-wrap: wrap;
+      .letter {
+        @include fl(center);
+
+        width: 56px;
+        height: 56px;
+        margin-right: 8px;
+        margin-bottom: 12px;
+        font-size: 20px;
+        font-family: 'font_bold';
+        color: #9f9585;
+        background: #f4f4f4;
+        border-radius: 75px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 28px;
+        &:nth-child(10) {
+          margin-right: 0;
+        }
+        &:nth-child(11) {
+          margin-left: 25px;
+        }
+        &:nth-child(19) {
+          margin-right: 24px;
+        }
+      }
+      .active-btn {
+        animation: gradient 3s ease 1;
+      }
+      .del {
+        width: 184px;
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Search/Quick.vue
+++ b/src/components/Search/Quick.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="quick-container">
+    <div class="quick-item">
+      <img class="sea" src="@/assets/images/search/search.png" alt="" />
+      <div class="text">
+        {{ $t('search_home') }}
+      </div>
+    </div>
+    <div v-for="item in fac" :key="item.code" class="quick-item" @click="handleFacility(item)">
+      <div class="top">
+        <img v-if="item.abbreviation === 'xsj'" src="@/assets/images/index/toilet.png" alt="" />
+        <img v-if="item.abbreviation === 'tcc'" src="@/assets/images/index/parking.png" alt="" />
+        <img v-if="item.abbreviation === 'fwt'" src="@/assets/images/index/service.png" alt="" />
+      </div>
+      <div class="text">
+        {{ switchLanguage(item, 'name') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { useRootStore } from '@/store/root'
+import { useFacilityNav } from '@/composables/useFacilityNav'
+const store = useRootStore()
+const { facilityList } = toRefs(store)
+const { handleFacility } = useFacilityNav() //公共设施导航
+const fac = computed(() => {
+  return facilityList.value.filter(item => item.abbreviation === 'xsj' || item.abbreviation === 'tcc' || item.abbreviation === 'fwt')
+})
+</script>
+
+<style lang="scss" scoped>
+.quick-container {
+  @include fl();
+
+  width: 1680px;
+  height: 162px;
+  padding: 21px 560px;
+  background: url('@/assets/images/search/quickBg.png') no-repeat;
+  background-size: 100% 100%;
+  border-radius: 24px 0 0;
+  .quick-item {
+    @include fl(center);
+
+    width: 80px;
+    height: 120px;
+    margin-right: 80px;
+    flex-direction: column;
+    .sea {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+    .top {
+      @include fl(center);
+
+      width: 80px;
+      height: 80px;
+      background: #fff;
+      border-radius: 50%;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+    .text {
+      margin-top: 16px;
+      font-size: 16px;
+      font-family: 'font_regular';
+      color: #84754e;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+</style>
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@ -0,0 +1,51 @@
+<template>
+  <div class="search-container">
+    <img class="close" src="@/assets/images/search/close.png" alt="" @click="close" />
+    <div class="bg">
+      <Quick />
+      <div class="content">
+        <Key />
+        <Hot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Quick from './Quick.vue'
+import Hot from './Hot.vue'
+import Key from './Key.vue'
+const emits = defineEmits(['close'])
+function close() {
+  emits('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.search-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+  width: 1920px;
+  height: 1080px;
+  padding: 80px 120px;
+  background: rgb(0 0 0 / 50%);
+  .close {
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    width: 100px;
+    height: 100px;
+  }
+  .bg {
+    background: #efeeea;
+    border-radius: 24px;
+  }
+  .content {
+    @include fl(flex-start, flex-start);
+
+    margin-top: 64px;
+  }
+}
+</style>
--- a/src/http/api/base/index.ts
+++ b/src/http/api/base/index.ts
@ -18,3 +18,6 @@ export const getBackTime = () => request<[number, number]>({ url: `/JSON/getBack

 //手写地址
 export const getHandWriting = (data: WrittenQuery) => request<string[]>({ url: 'http://saas.1000my.com:8014/words', method: 'post', data })
+
+// 获取首页数据
+export const getIndexJson = () => request({ url: `/JSON/index.json` })
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@ -19,5 +19,6 @@
  },
  "dispoint": "Activity and Discount",
  "service": "Service",
-  "school": "College Of Culture"
+  "school": "College Of Culture",
+  "hot": "Hot Shop"
 }
--- a/src/i18n/lang/tw.json
+++ b/src/i18n/lang/tw.json
@ -19,5 +19,6 @@
  },
  "dispoint": "優惠與活動",
  "service": "貼心服務",
-  "school": "文化學院"
+  "school": "文化學院",
+  "hot": "熱門店鋪"
 }
--- a/src/i18n/lang/zh.json
+++ b/src/i18n/lang/zh.json
@ -19,5 +19,6 @@
  },
  "dispoint": "优惠与活动",
  "service": "贴心服务",
-  "school": "文化学院"
+  "school": "文化学院",
+  "hot": "热门店铺"
 }
--- a/src/types/hot.d.ts
+++ b/src/types/hot.d.ts
@ -0,0 +1,17 @@
+declare interface HotSearch {
+  logoCode: string
+  logoUrl: string
+  shopCode: string
+  shopName: string
+  building: string
+  buildingCode: string
+  buildingOrder: number
+  floor: string
+  floorCode: string
+  floorOrder: number
+  xaxis: string
+  yaxis: string
+  navXaxis: string
+  navYaxis: string
+  houseNumber: string
+}
--- a/src/views/Index/Top.vue
+++ b/src/views/Index/Top.vue
@ -1,7 +1,7 @@
 <template>
  <Transition name="zoom">
    <div class="top-container">
-      <div class="top-item">
+      <div class="top-item" @click="show = true">
        <div class="top">
          <img src="@/assets/images/index/search.png" alt="" />
        </div>
@ -9,7 +9,7 @@
          {{ $t('search_home') }}
        </div>
      </div>
-      <div v-for="item in fac" :key="item.code" class="top-item">
+      <div v-for="item in fac" :key="item.code" class="top-item" @click="handleFacility(item)">
        <div class="top">
          <img v-if="item.abbreviation === 'xsj'" src="@/assets/images/index/toilet.png" alt="" />
          <img v-if="item.abbreviation === 'tcc'" src="@/assets/images/index/parking.png" alt="" />
@ -21,17 +21,26 @@
      </div>
    </div>
  </Transition>
+  <Search v-if="show" @close="close" />
 </template>

 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { ref, toRefs, computed } from 'vue'
 import { useRootStore } from '@/store/root'
+import { useFacilityNav } from '@/composables/useFacilityNav'
+import Search from '@/components/Search/Search.vue'

 const store = useRootStore()
 const { facilityList } = toRefs(store)
+const { handleFacility } = useFacilityNav() //公共设施导航
 const fac = computed(() => {
  return facilityList.value.filter(item => item.abbreviation === 'xsj' || item.abbreviation === 'tcc' || item.abbreviation === 'fwt')
 })
+
+const show = ref(false)
+function close() {
+  show.value = false
+}
 </script>

 <style lang="scss" scoped>
--- a/src/views/ServiceList/ServiceList.vue
+++ b/src/views/ServiceList/ServiceList.vue
@ -10,20 +10,32 @@
      </div>
    </div>
  </Transition>
-  <div class="btn">
+  <div class="btn" @click="go">
    <span class="text">导航至</span>
    <span class="textC">服务台</span>
  </div>
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, toRefs } from 'vue'
+import { useRootStore } from '@/store/root'
 import { getServiceList } from '@/http/api/serviceList/index'
+import { useFacilityNav } from '@/composables/useFacilityNav'
+
+const store = useRootStore()
+const { facilityList } = toRefs(store)
+const { handleFacility } = useFacilityNav() //公共设施导航
 // 服务信息
 const serviceList = ref<ServiceInfo[]>([])
 getServiceList().then(({ data }) => {
  serviceList.value = data.serveList
 })
+function go() {
+  const arr = facilityList.value.filter(item => item.abbreviation === 'fwt')
+  if (arr.length !== 0) {
+    handleFacility(arr[0])
+  }
+}
 </script>

 <style lang="scss" scoped>