feat: 无障碍模式

src/App.vue

@@ -1,24 +1,39 @@
 <template>
+  <div class="enhanced" :class="{ active: enhanced }" @click="store.SET_ENHANCED(false)" />
   <div id="app">
     <router-view />
-
     <PublicComponent />
   </div>
 </template>
 
 <script setup>
 import PublicComponent from '@/components/PublicComponent/PublicComponent.vue'
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
+
+const store = useStore()
+const { enhanced } = storeToRefs(store)
 </script>
 <style>
 body,
 html,
 #app {
+  position: relative;
   width: 100vw;
   height: 100vh;
   background-color: var(--global-appBackground);
   overflow: hidden;
 }
 
+.enhanced {
+  height: 0px;
+  transition: height 0.5s ease-in-out;
+  background: 0 bottom / 100% 600px url(./enhancedBg.png);
+}
+.enhanced.active {
+  height: 600px;
+}
+
 .zoom-enter-active {
   transition: all 0.3s;
   transition-timing-function: cubic-bezier(0.75, 0, 0.24, 1);

src/base/Temperature/Temperature.vue

@@ -13,7 +13,7 @@ const { weather, icon } = useWeather()
 
 <style lang="scss" scoped>
 .Temperature-wrapper {
-  position: fixed;
+  position: absolute;
   top: 48px;
   right: 68px;
   height: 44px;

src/base/Time/Time.vue

@@ -15,7 +15,7 @@ const { dateRef, whichWeekRef } = useDay()
 
 <style lang="scss" scoped>
 .time {
-  position: fixed;
+  position: absolute;
   top: 48px;
   left: 659px;
   font-family: 'Montserrat';
@@ -27,7 +27,7 @@ const { dateRef, whichWeekRef } = useDay()
   z-index: 11;
 }
 .month {
-  position: fixed;
+  position: absolute;
   top: 54px;
   left: 783px;
   font-family: 'Montserrat';
@@ -39,7 +39,7 @@ const { dateRef, whichWeekRef } = useDay()
   color: var(--time-monthColor);
 }
 .week {
-  position: fixed;
+  position: absolute;
   top: 70px;
   left: 783px;
   font-family: 'Montserrat';

src/components/Map/Map.vue

@@ -101,20 +101,7 @@ const { shop } = storeToRefs(store)
   height: 28px;
   z-index: 128;
 }
-.other-pop {
-  height: 36px;
-  background: #ad9c85;
-  border: 2px solid #ffffff;
-  border-radius: 20px;
-  position: fixed;
-  padding: 0 24px;
-  font-size: 16px;
-  line-height: 24px;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  user-select: none;
-}
+
 @media (min-aspect-ratio: 1/1) {
   #mapContainer {
     top: 280px;

src/components/PublicComponent/PublicComponent.vue

@@ -12,6 +12,13 @@
 
   <Temperature />
   <Time />
+  <div class="bottom">
+    <div class="qrcode1"></div>
+    <div class="qrcode2"></div>
+    <div class="btn" @click="store.SET_ENHANCED(!enhanced)">
+      <div class="text">{{ enhanced ? '关闭' : '开启' }}</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -31,7 +38,7 @@ const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
 const router = useRouter()
 const route = useRoute()
 const store = useStore()
-const { shop, sidebarList, language } = storeToRefs(store)
+const { shop, sidebarList, language, enhanced } = storeToRefs(store)
 
 const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
 const { title, countDownGif, countDownNum, send, checkHandleScreen } = useHandleScreen(handleScreen)
@@ -83,6 +90,49 @@ watch(route, to => {
   left: 60px;
   top: 32px;
 }
+.bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 120px;
+  background: center / cover no-repeat url(./bg.png);
+  z-index: 100;
+  .qrcode1 {
+    position: absolute;
+    top: 10px;
+    left: 68px;
+    width: 100px;
+    height: 100px;
+    background: center / cover no-repeat url(./qrcode.JPG);
+  }
+  .qrcode2 {
+    position: absolute;
+    top: 10px;
+    left: 337px;
+    width: 100px;
+    height: 100px;
+    background: center / cover no-repeat url(./qrcode2.JPG);
+  }
+  .btn {
+    position: absolute;
+    width: 160px;
+    height: 56px;
+    left: 852px;
+    top: 32px;
+    .text {
+      position: absolute;
+      width: 80px;
+      height: 38px;
+      left: 56px;
+      top: 9px;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      color: #ffffff;
+    }
+  }
+}
 </style>
 <style>
 .box {

src/layouts/View.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="view-container" :style="{ backgroundImage: theme.images.backgroundImg ? `url(${theme.images.backgroundImg})` : '' }">
+  <div class="view-container" :class="{ enhanced }" :style="{ backgroundImage: theme.images.backgroundImg ? `url(${theme.images.backgroundImg})` : '' }">
     <div :class="['bgTop', long ? 'long' : '', mid ? 'mid' : '']"></div>
     <slot />
   </div>
@@ -10,7 +10,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 
 const store = useStore()
-const { theme } = storeToRefs(store)
+const { theme, enhanced } = storeToRefs(store)
 
 defineProps({
   long: {
@@ -26,11 +26,13 @@ defineProps({
 
 <style lang="scss" scoped>
 .view-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
   background: var(--global-background);
+
   .bgTop {
     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);

src/store/root/actions.js

@@ -52,5 +52,8 @@ export const actions = {
   },
   SET_THEME(data) {
     this.theme = data
+  },
+  SET_ENHANCED(_) {
+    this.enhanced = _
   }
 }

src/store/root/state.js

@@ -16,7 +16,8 @@ export const state = () => ({
   isUseSpeech: 1, //是否使用语音 0:不使用 1: 使用
   mapData: null,
   theme: null,
-  facility: null
+  facility: null,
+  enhanced: false
 })
 
 export const is4k = () => {

src/views/Guide/Guide.vue

@@ -1,6 +1,5 @@
 <template>
   <View>
-    <Teleport to="body">
     <ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
       <div style="display: inline-block; white-space: nowrap">
         <div
@@ -14,8 +13,6 @@
         </div>
       </div>
     </ScrollView>
-    </Teleport>
-    <Teleport to="body">
     <div class="control-area">
       <div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp">
         <div class="map-item" @click="handleMapIcon(item, index)" v-for="(item, index) of buttonList" :key="item.name">
@@ -23,10 +20,8 @@
           <span class="map-name">{{ switchLanguage(item, 'name') }}</span>
         </div>
       </div>
-        <img src="../../assets/images/map/hands.svg" alt="" class="hands" />
     </div>
-    </Teleport>
-
+    <img src="../../assets/images/map/hands.svg" alt="" class="hands" />
     <div class="shop-list-wrapper">
       <BrandScroll v-if="initiated" :shop="shop" :need-focus="true" @click="handleShop" @nav="handleShopNav" :list="selectedShopList" :config="config" />
     </div>
@@ -213,101 +208,6 @@ const handleFacility = async fac => {
 </script>
 
 <style lang="scss" scoped>
-.allFloors {
-  position: absolute;
-  top: 408px;
-  left: 0;
-  right: 0;
-  height: 642px;
-  background: var(--guide-allFloorBg);
-  z-index: 100;
-  .row {
-    height: 76px;
-    display: flex;
-    &.current {
-      .left {
-        position: relative;
-        color: rgba(0, 0, 0, 0.8);
-        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
-        &::after {
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          height: 20px;
-          display: flex;
-          content: '您在本层';
-          background: var(--guide-currentBg);
-          font-weight: 700;
-          font-size: 12px;
-          color: var(--guide-currentColor);
-          align-items: center;
-          justify-content: center;
-        }
-      }
-      .right {
-        background: #fff;
-      }
-    }
-    .left {
-      flex: 0 0 150px;
-      font-family: 'Montserrat';
-      font-style: normal;
-      font-weight: 700;
-      font-size: 28px;
-      line-height: 96%;
-
-      display: flex;
-      align-items: center;
-      text-align: center;
-      justify-content: center;
-
-      /* W/100% */
-
-      color: #ffffff;
-    }
-    .right {
-      flex: 1;
-      display: flex;
-      padding: 0 68px;
-      border-bottom: 1px solid #fff;
-      .format {
-        flex: 1;
-        font-weight: 700;
-        font-size: 20px;
-        line-height: 23px;
-        display: flex;
-        align-items: center;
-        color: rgba(0, 0, 0, 0.8);
-      }
-      .facs {
-        flex: 0;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        .fac {
-          display: flex;
-          flex-direction: column;
-          img {
-            width: 36px;
-            height: 36px;
-            margin-bottom: 8px;
-          }
-          font-weight: 700;
-          font-size: 12px;
-          line-height: 14px;
-          text-align: center;
-          color: rgba(0, 0, 0, 0.6);
-          align-items: center;
-        }
-        .fac + .fac {
-          margin-left: 16px;
-        }
-      }
-    }
-  }
-}
 .floors-list {
   position: absolute;
   left: 0;
@@ -343,13 +243,6 @@ const handleFacility = async fac => {
 
     color: var(--guide-floorColor);
     transition: all 0.5s;
-    &.all {
-      width: 150px;
-      font-weight: 700;
-      font-size: 18px;
-      line-height: 96%;
-      vertical-align: bottom;
-    }
     &.current {
       background: rgba(0, 0, 0, 0.1);
       &::after {
@@ -374,119 +267,7 @@ const handleFacility = async fac => {
     }
   }
 }
-.floors-list-h {
-  position: absolute;
-  right: 510px;
-  width: 100px;
-  top: 280px;
-  height: calc(100vh - 280px);
-  z-index: 60;
-  display: block;
-  overflow: hidden;
-  background: var(--guide-floorBg);
-  &.all {
-    width: calc(100vw - 510px);
-    background: var(--guide-allFloorBgH);
-  }
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .floor-wrapper {
-    width: 100%;
-    display: flex;
-  }
-  .all-item {
-    flex: 1;
-    display: flex;
-    padding: 0 68px;
-    &.current {
-      background: #fff;
-    }
 
-    border-bottom: 1px solid #fff;
-    .format {
-      flex: 1;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 23px;
-      display: flex;
-      align-items: center;
-      color: rgba(0, 0, 0, 0.8);
-      justify-content: flex-end;
-      text-align: right;
-    }
-    .facs {
-      flex: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      .fac {
-        display: flex;
-        flex-direction: column;
-        img {
-          width: 36px;
-          height: 36px;
-          margin-bottom: 8px;
-        }
-        font-weight: 700;
-        font-size: 12px;
-        line-height: 14px;
-        text-align: center;
-        color: rgba(0, 0, 0, 0.6);
-        align-items: center;
-      }
-      .fac + .fac {
-        margin-left: 16px;
-      }
-    }
-  }
-  .floors-item {
-    flex: 0 0 100px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    height: 94.44px;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 28px;
-    line-height: 96%;
-    text-align: center;
-    color: var(--guide-floorColor);
-    transition: all 0.5s;
-    &.all {
-      font-weight: 700;
-      font-size: 18px;
-      line-height: 96%;
-      vertical-align: bottom;
-    }
-    &.current {
-      background: rgba(0, 0, 0, 0.1);
-      &::after {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 20px;
-        display: flex;
-        content: '您在本层';
-        background: var(--guide-currentBg);
-        font-weight: 700;
-        font-size: 12px;
-        color: var(--guide-currentColor);
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    &.active {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
-      color: rgba(0, 0, 0, 0.8);
-    }
-  }
-}
 .shop-list-wrapper {
   position: absolute;
   width: 1080px;
@@ -526,16 +307,15 @@ const handleFacility = async fac => {
   right: 24px;
   top: 874px;
   z-index: 51;
-
+}
 .hands {
-    position: fixed;
+  position: absolute;
   top: 330px;
   right: 68px;
   width: 246px;
   height: 80px;
   z-index: 51;
 }
-}
 
 .map-control-wrapper {
   display: flex;

src/views/Nav/Nav.vue

@@ -46,34 +46,10 @@ useStatistics('navigation')
 </script>
 
 <style lang="scss" scoped>
-.top-right-wrapper {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 130px;
-  height: 499px;
-  left: 0;
-  top: 0px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
-  z-index: 51;
-  backdrop-filter: blur(20px);
-}
 .mr-20 {
   margin-right: 20px;
 }
-.hands {
-  position: fixed;
-  top: 37px;
-  right: 170px;
-  width: 246px;
-  z-index: 51;
-}
-.back-icon {
-  width: 132px;
-  margin-left: 22px;
-  margin-bottom: 16px;
-}
+
 .nav-methods {
   position: absolute;
   width: 100vw;