feat: 🚀 周边交通界面

src/components/Search/Hot.vue

@@ -3,7 +3,7 @@
     <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 v-for="item in list" :key="item.shopCode" class="shop_item" @click="show(item)">
           <div class="top">
             <img v-lazy="item.logoUrl" alt="" />
           </div>
@@ -23,11 +23,18 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { getIndexJson } from '@/http/api/base'
+import { useRootStore } from '@/store/root'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 const list = ref<HotSearch[]>()
 getIndexJson().then(({ data }) => {
   list.value = data.hotSearch
 })
+
+const store = useRootStore()
+function show(item: any) {
+  store.SET_SHOP(item)
+  store.SET_SHOW_DETAIL(true)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -51,6 +58,7 @@ getIndexJson().then(({ data }) => {
     display: grid;
     gap: 12px 12px;
     grid-template-columns: 1fr 1fr 1fr;
+    padding-bottom: 10px;
     .shop_item {
       width: 230px;
       height: 270px;

src/components/Search/Key.vue

@@ -2,14 +2,22 @@
   <div class="key-container">
     <div class="inp">
       <img src="@/assets/images/search/searchi.png" alt="" />
-      <div class="ph">搜索</div>
+      <div v-if="!word" class="ph">搜索</div>
+      <div v-if="word" class="keyword">{{ word }}</div>
+      <div v-if="word" class="line animate__animated animate__fadeIn animate__infinite"></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 }">
+        <li
+          v-for="(item, index) of letter"
+          :key="item"
+          class="letter"
+          :class="{ 'active-btn': current === index }"
+          @click="handleLetter(item, index)"
+        >
           {{ item }}
         </li>
-        <li class="letter del" :class="{ 'active-btn': current === 37 }">
+        <li class="letter del" :class="{ 'active-btn': current === 37 }" @click="del()">
           <img src="@/assets/images/search/del.png" alt="" />
         </li>
       </ul>
@@ -19,7 +27,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+type Props = {
+  word: string
+}
 
+const props = defineProps<Props>()
+const emit = defineEmits(['change', 'del'])
 // 键盘按钮列表
 const letter = [
   'Q',
@@ -50,12 +63,29 @@ const letter = [
   'M'
 ]
 const current = ref(-1)
+// 点击键盘其他按键
+function handleLetter(item: string | number, index: number) {
+  if (current.value === index) {
+    current.value = -1
+  }
+  if (props.word.length < 10) {
+    emit('change', item)
+    current.value = index
+  }
+}
+
+// 删除
+function del() {
+  emit('del')
+}
 </script>
 
 <style lang="scss" scoped>
 .key-container {
   margin: 68px 52px 286px 100px;
   .inp {
+    @include fl();
+
     position: relative;
     width: 714px;
     height: 80px;
@@ -78,6 +108,21 @@ const current = ref(-1)
       font-weight: 700;
       line-height: 36px;
     }
+    .keyword {
+      margin-right: 12px;
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #9b8c85;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
+    }
+
+    .line {
+      width: 3px;
+      height: 32px;
+      background: #be9b75;
+    }
   }
   .board-container {
     width: 714px;
@@ -124,4 +169,24 @@ const current = ref(-1)
     }
   }
 }
+
+@keyframes gradient {
+  0% {
+    background: #f4f4f4;
+  }
+  25% {
+    color: #fff;
+    background: #9b8c85;
+  }
+  50% {
+    color: #fff;
+    background: #9b8c85;
+  }
+  75% {
+    background: #f4f4f4;
+  }
+  100% {
+    background: #f4f4f4;
+  }
+}
 </style>

src/components/Search/Result.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="result-container">
+    <ScrollView class="myScoll" :list="list" :pull-up="false">
+      <div class="shop_list">
+        <div v-for="item in list" :key="item.shopCode" class="shop_item" @click="show(item)">
+          <div class="left">
+            <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 { useRootStore } from '@/store/root'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+type ShopList = {
+  list: Shop[]
+}
+defineProps<ShopList>()
+const store = useRootStore()
+function show(item: Shop) {
+  store.SET_SHOP(item)
+  store.SET_SHOW_DETAIL(true)
+}
+</script>
+
+<style lang="scss" scoped>
+.result-container {
+  width: 714px;
+  height: 694px;
+  padding-top: 64px;
+  padding-left: 65px;
+  background: #fff;
+  border-radius: 12px;
+  .myScoll {
+    overflow: hidden;
+    height: 630px;
+  }
+  .shop_list {
+    display: grid;
+    gap: 32px 180px;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 10px;
+    .shop_item {
+      @include fl();
+
+      width: 192px;
+      height: 80px;
+      .left {
+        @include fl(center);
+
+        width: 80px;
+        height: 80px;
+        margin-right: 16px;
+        background: #fff;
+        border: 1px solid rgb(155 140 133 / 50%);
+        border-radius: 4px;
+        img {
+          width: 64px;
+          height: 64px;
+        }
+      }
+      .info {
+        width: 96px;
+        height: 60px;
+        .name {
+          @include no-wrap;
+
+          width: 96px;
+          height: 32px;
+          margin-bottom: 6px;
+          font-size: 24px;
+          font-family: 'font_bold';
+          color: #736661;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
+        }
+        .right {
+          @include fl();
+          img {
+            width: 18px;
+            height: 18px;
+            margin-right: 4px;
+          }
+          .hose_num {
+            font-size: 14px;
+            font-family: 'font_bold';
+            color: #9b8c85;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Search/Search.vue

@@ -1,24 +1,63 @@
 <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 />
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+    <div class="search-container">
+      <img class="close" src="@/assets/images/search/close.png" alt="" @click="close" />
+      <div class="bg">
+        <Quick />
+        <div class="content">
+          <Key :word="word" @del="del" @change="change" />
+          <Hot v-if="!word" />
+          <Result v-if="word" :list="selectedShopList" />
+        </div>
       </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script setup lang="ts">
+import { toRefs, ref, watch } from 'vue'
+import { useRootStore } from '@/store/root'
 import Quick from './Quick.vue'
 import Hot from './Hot.vue'
 import Key from './Key.vue'
+import Result from './Result.vue'
+const store = useRootStore()
+const selectedShopList = ref()
+const { shopList } = toRefs(store)
 const emits = defineEmits(['close'])
+// 关闭弹窗
 function close() {
   emits('close')
 }
+const word = ref('')
+
+// 搜索
+function change(item: string | number) {
+  if (word.value.length < 10) {
+    word.value += item
+  }
+}
+
+// 删除
+function del() {
+  word.value = word.value.slice(0, -1)
+}
+// 监听搜索词
+watch(
+  () => word,
+  newVal => {
+    if (newVal.value.length) {
+      selectedShopList.value = shopList.value.filter(
+        item => item.initials?.includes(newVal.value) || item.shopName.includes(newVal.value) || item.shopNameEn?.includes(newVal.value)
+      )
+    } else {
+      selectedShopList.value = []
+    }
+  },
+  {
+    deep: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>

src/components/Traffics/Traffics.vue

@@ -0,0 +1,135 @@
+<template>
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
+    <div class="traffic-container">
+      <div class="left">
+        <img class="bg" src="@/assets/images/traffic.png" alt="" />
+      </div>
+      <div class="right">
+        <div class="title">{{ $t('road') + ':' }}</div>
+        <div class="road-list">
+          <div v-for="item in list" :key="item.name" class="road">
+            <div class="w" :style="'background:' + item.color"></div>
+            <div class="type">{{ switchLanguage(item, 'name') }}</div>
+          </div>
+        </div>
+        <div class="info-container">
+          <div class="item">
+            <div class="name">博览路：</div>
+            <div class="road" style="margin-right: 24px">
+              <div class="w" style="background: #68b753"></div>
+              <div>{{ switchLanguage(item, 'name') }}</div>
+            </div>
+            <div class="road">
+              <div class="w" style="background: #f5bd44"></div>
+              <div>{{ switchLanguage(item, 'name') }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { switchLanguage } from '@/plugins/switchLanguage'
+
+const list = [
+  {
+    name: '畅通',
+    nameEn: 'Clear',
+    color: '#68B753'
+  },
+  {
+    name: '缓行',
+    nameEn: 'Slow',
+    color: '#F5BD44'
+  },
+  {
+    name: '拥堵',
+    nameEn: 'Jam',
+    color: '#E53F3B'
+  },
+  {
+    name: '非常拥堵',
+    nameEn: 'Very Congested',
+    color: '#A91A1F'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.traffic-container {
+  @include fl(flex-start, flex-start);
+
+  position: fixed;
+  top: 306px;
+  left: 112px;
+  .left {
+    position: relative;
+    width: 1218px;
+    height: 600px;
+    .bg {
+      position: absolute;
+      top: 0;
+      left: 236px;
+      z-index: 10;
+      width: 693px;
+      height: 420px;
+    }
+  }
+  .right {
+    margin-left: 59px;
+    .title {
+      margin-bottom: 24px;
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #736661;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
+    }
+    .road-list {
+      @include fl();
+
+      margin-bottom: 48px;
+    }
+    .road {
+      @include fl();
+
+      margin-right: 40px;
+      .w {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+      .type {
+        font-size: 20px;
+        font-family: 'font_regular';
+        color: #9b8c85;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 28px;
+      }
+    }
+    .info-container {
+      width: 452px;
+      height: 356px;
+      padding: 40px 48px 12px;
+      background: #fff;
+      border-radius: 16px;
+      .item {
+        margin-bottom: 48px;
+        .name {
+          margin-right: 40px;
+          font-size: 20px;
+          font-family: 'font_bold';
+          color: #736661;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}
+</style>

src/composables/useHandleScreen.ts

@@ -84,9 +84,11 @@ export const useHandleScreen = (callback: () => void) => {
   onMounted(() => {
     //获取返回首页和进入屏保的具体时间
     getBackTime().then(({ data }) => {
-      totalTime.value = data
+      const noWallpaper = data[1] === 0 //判断有无屏保 为0时没有
+      const paperTime = noWallpaper ? -1 : data[1]
+      totalTime.value = [data[0], paperTime]
       toIndexTime.value = data[0]
-      toWallpaperTime.value = data[1]
+      toWallpaperTime.value = paperTime
     })
   })
   return {

src/i18n/lang/en.json

@@ -21,5 +21,6 @@
   "service": "Service",
   "school": "College Of Culture",
   "hot": "Hot Shop",
-  "searB": "Search Brand"
+  "searB": "Search Brand",
+  "road": "Traffic"
 }

src/i18n/lang/tw.json

@@ -21,5 +21,6 @@
   "service": "貼心服務",
   "school": "文化學院",
   "hot": "熱門店鋪",
-  "searB": "搜索品牌"
+  "searB": "搜索品牌",
+  "road": "路況說明"
 }

src/i18n/lang/zh.json

@@ -21,5 +21,6 @@
   "service": "贴心服务",
   "school": "文化学院",
   "hot": "热门店铺",
-  "searB": "搜索品牌"
+  "searB": "搜索品牌",
+  "road": "路况说明"
 }

src/views/Activity/Activity.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="po">{{ $t('dispoint') }}</div>
-  <Transition name="zoom">
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
     <div class="carousel">
       <Carousel :ac-list="aclist" />
     </div>
-  </Transition>
+  </transition>
 </template>
 
 <script setup lang="ts">

src/views/Index/Index.vue

@@ -1,6 +1,8 @@
 <template>
   <Top />
-  <Middle />
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
+    <Middle />
+  </transition>
 </template>
 
 <script setup lang="ts">

src/views/Member/Member.vue

@@ -1,8 +1,10 @@
 <template>
   <typeBtnGroup class="top" :list="list" />
-  <div class="carousel">
-    <Carousel :ac-list="memberInfo" />
-  </div>
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
+    <div class="carousel">
+      <Carousel :ac-list="memberInfo" />
+    </div> </transition
+  >>
 </template>
 
 <script setup lang="ts">

src/views/School/School.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="po">{{ $t('school') }}</div>
-  <Transition name="zoom">
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
     <div class="carousel">
       <Carousel :ac-list="aclist" />
     </div>
-  </Transition>
+  </transition>
 </template>
 
 <script setup lang="ts">

src/views/ServiceList/ServiceList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="po">{{ $t('service') }}</div>
-  <Transition name="zoom">
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
     <div class="list-container">
       <div class="list">
         <div v-for="item in serviceList" :key="item.name" class="list-item">
@@ -9,7 +9,7 @@
         </div>
       </div>
     </div>
-  </Transition>
+  </transition>
   <div class="btn" @click="go">
     <span class="text">导航至</span>
     <span class="textC">服务台</span>