Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo into master

web/src/Help.vue

@@ -3,42 +3,42 @@
     <Accessibility />
     <main class="aria-control-target">
       <nav>
-        <h1>Catalogue</h1>
+        <h1 tabindex="0">Catalogue</h1>
         <section class="overview-wrapper">
-          <h2><a href="#Overview">Overview</a></h2>
+          <h2><a tabindex="0" href="#Overview">Overview</a></h2>
           <section class="overview-list">
             <h3>
-              <a href="#What is the definition of website content accessibility?">
+              <a tabindex="0" href="#What is the definition of website content accessibility?">
                 What is the definition of website content accessibility?
               </a>
             </h3>
             <h3>
-              <a href="#What website accessibility features does this website provide?">
+              <a tabindex="0" href="#What website accessibility features does this website provide?">
                 What website accessibility features does this website provide?
               </a>
             </h3>
             <h3>
-              <a href="#What is included in the navigational functionality feature?">
+              <a tabindex="0" href="#What is included in the navigational functionality feature?">
                 What is included in the navigational functionality feature?
               </a>
             </h3>
             <h3>
-              <a href="#What is included in the accessibility features for website browsing?">
+              <a tabindex="0" href="#What is included in the accessibility features for website browsing?">
                 What is included in the accessibility features for website browsing?
               </a>
             </h3>
             <h3>
-              <a href="#How to use the accessibility toolbar when browsing the website?">
+              <a tabindex="0" href="#How to use the accessibility toolbar when browsing the website?">
                 How to use the accessibility toolbar when browsing the website?
               </a>
             </h3>
             <h3>
-              <a href="#What is the functionality of a cross cursor?">
+              <a tabindex="0" href="#What is the functionality of a cross cursor?">
                 What is the functionality of a cross cursor?
               </a>
             </h3>
             <h3>
-              <a href="#How do visitors who are visually impaired or elderly browse this website?">
+              <a tabindex="0" href="#How do visitors who are visually impaired or elderly browse this website?">
                 How do visitors who are visually impaired or elderly browse this website?
               </a>
             </h3>
@@ -47,18 +47,18 @@
         <div class="splitter" />
         <section>
           <h2>
-            <a href="#Keyboard navigation">
+            <a tabindex="0" href="#Keyboard navigation">
               Keyboard navigation
             </a>
           </h2>
           <section>
             <h3>
-              <a href="#Accessibility (Keyboard navigation)">
+              <a tabindex="0" href="#Accessibility (Keyboard navigation)">
                 Accessibility (Keyboard navigation)
               </a>
             </h3>
             <h3>
-              <a href="#Web navigation (Keyboard navigation)">
+              <a tabindex="0" href="#Web navigation (Keyboard navigation)">
                 Web navigation (Keyboard navigation)
               </a>
             </h3>
@@ -66,82 +66,82 @@
         </section>
       </nav>
       <article>
-        <h1>Accessibility Guidelines</h1>
+        <h1 tabindex="0">Accessibility Guidelines</h1>
         <div class="splitter" />
         <section>
-          <h2 id="Overview">
+          <h2 tabindex="0" id="Overview">
             Overview
           </h2>
           <section>
-            <h3 id="What is the definition of website content accessibility?">
+            <h3 tabindex="0" id="What is the definition of website content accessibility?">
               What is the definition of website content accessibility?
             </h3>
-            <p>The term "website content accessibility" refers to no matter whether the non-disabled or the disabled, youth or elder can benefit from information technology, anyone can obtain and use website content in an equal, convenient, and barrier-free manner under any circumstances.</p>
+            <p tabindex="0">The term "website content accessibility" refers to no matter whether the non-disabled or the disabled, youth or elder can benefit from information technology, anyone can obtain and use website content in an equal, convenient, and barrier-free manner under any circumstances.</p>
           </section>
           <section>
-            <h3 id="What website accessibility features does this website provide?">
+            <h3 tabindex="0" id="What website accessibility features does this website provide?">
               What website accessibility features does this website provide?
             </h3>
-            <p>
+            <p tabindex="0">
               This website mainly implements the following two accessibility features:
             </p>
             <ol>
-              <li>Improves navigational functionality</li>
-              <li>Accessibility feature for website browsing</li>
+              <li tabindex="0">Improves navigational functionality</li>
+              <li tabindex="0">Accessibility feature for website browsing</li>
             </ol>
           </section>
           <section>
-            <h3 id="What is included in the navigational functionality feature?">
+            <h3 tabindex="0" id="What is included in the navigational functionality feature?">
               What is included in the navigational functionality feature?
             </h3>
-            <p>It fully supports mouse operation and keyboard navigation, making it easier to accommodate the usage preferences of certain groups.</p>
+            <p tabindex="0">It fully supports mouse operation and keyboard navigation, making it easier to accommodate the usage preferences of certain groups.</p>
           </section>
           <section>
-            <h3 id="What is included in the accessibility features for website browsing?">
+            <h3 tabindex="0" id="What is included in the accessibility features for website browsing?">
               What is included in the accessibility features for website browsing?
             </h3>
             <ol>
-              <li>Accessibility features can be enabled or disabled for website browsing;</li>
-              <li>Interface can be reset;</li>
-              <li>Mouse pointer can be resized;</li>
-              <li>Cross cursor feature is supported;</li>
-              <li>Four types of interface colors can be altered;</li>
-              <li>Interface can be magnified and reduced;</li>
-              <li>Volume can be adjusted;</li>
-              <li>Screen reader is provided;</li>
-              <li>Textbox mode can be enabled;</li>
+              <li tabindex="0">Accessibility features can be enabled or disabled for website browsing;</li>
+              <li tabindex="0">Interface can be reset;</li>
+              <li tabindex="0">Mouse pointer can be resized;</li>
+              <li tabindex="0">Cross cursor feature is supported;</li>
+              <li tabindex="0">Four types of interface colors can be altered;</li>
+              <li tabindex="0">Interface can be magnified and reduced;</li>
+              <li tabindex="0">Volume can be adjusted;</li>
+              <li tabindex="0">Screen reader is provided;</li>
+              <li tabindex="0">Textbox mode can be enabled;</li>
             </ol>
           </section>
           <section>
-            <h3 id="How to use the accessibility toolbar when browsing the website?">
+            <h3 tabindex="0" id="How to use the accessibility toolbar when browsing the website?">
               How to use the accessibility toolbar when browsing the website?
             </h3>
-            <p>
+            <p tabindex="0">
               This website provides the ability to enable and disable accessibility features. There is a "caring mode" button in the accessibility toolbar at the top of the website homepage.
             </p>
           </section>
           <section>
-            <h3 id="What is the functionality of a cross cursor?">
+            <h3 tabindex="0" id="What is the functionality of a cross cursor?">
               What is the functionality of a cross cursor?
             </h3>
-            <p>On this page, the cross cursor is represented by two red reference lines in a horizontal and vertical position, which assists visually challenged visitors in enhancing their reading experience.</p>
+            <p tabindex="0">On this page, the cross cursor is represented by two red reference lines in a horizontal and vertical position, which assists visually challenged visitors in enhancing their reading experience.</p>
           </section>
           <section>
-            <h3 id="How do visitors who are visually impaired or elderly browse this website?">
+            <h3 tabindex="0" id="How do visitors who are visually impaired or elderly browse this website?">
               How do visitors who are visually impaired or elderly browse this website?
             </h3>
-            <p>This website has accessibility features for visually challenged and elderly users. The accessibility toolbar enables users to select the appropriate text size and interface color to promote the browsing experience of the webpage's content. Also, the cross-cursor feature allows locating the texts both horizontally and vertically. Additionally, users can select whether to receive content on the webpage via screen reader or not based on their own needs.</p>
+            <p tabindex="0">This website has accessibility features for visually challenged and elderly users. The accessibility toolbar enables users to select the appropriate text size and interface color to promote the browsing experience of the webpage's content. Also, the cross-cursor feature allows locating the texts both horizontally and vertically. Additionally, users can select whether to receive content on the webpage via screen reader or not based on their own needs.</p>
           </section>
         </section>
         <section>
-          <h2 id="Keyboard navigation">
+          <h2 tabindex="0" id="Keyboard navigation">
             Keyboard navigation
           </h2>
           <section>
-            <h3 id="Accessibility (Keyboard navigation)">
+            <h3 tabindex="0" id="Accessibility (Keyboard navigation)">
               Accessibility (Keyboard navigation)
             </h3>
-            <p>
+            <p tabindex="0">
               All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
             </p>
             <table>
@@ -152,63 +152,63 @@
                 <col class="shortcut">
               </colgroup>
               <tr>
-                <th>Help:</th>
-                <td>(Shift + /)</td>
-                <th>Quit:</th>
-                <td>(Shift + Q)</td>
+                <th tabindex="0">Help:</th>
+                <td tabindex="0">(Shift + /)</td>
+                <th tabindex="0">Quit:</th>
+                <td tabindex="0">(Shift + Q)</td>
               </tr>
               <tr>
-                <th>Reset:</th>
-                <td>(Shift + 1)</td>
-                <th>Volume:</th>
-                <td>(Shift + 2)</td>
+                <th tabindex="0">Reset:</th>
+                <td tabindex="0">(Shift + 1)</td>
+                <th tabindex="0">Volume:</th>
+                <td tabindex="0">(Shift + 2)</td>
               </tr>
               <tr>
-                <th>Speech rate:</th>
-                <td>(Shift + 3)</td>
-                <th>Reading method:</th>
-                <td>(Shift + 4)</td>
+                <th tabindex="0">Speech rate:</th>
+                <td tabindex="0">(Shift + 3)</td>
+                <th tabindex="0">Reading method:</th>
+                <td tabindex="0">(Shift + 4)</td>
               </tr>
               <tr>
-                <th>Color scheme:</th>
-                <td>(Shift + 5)</td>
-                <th>Zoom in:</th>
-                <td>(Shift + 6)</td>
+                <th tabindex="0">Color scheme:</th>
+                <td tabindex="0">(Shift + 5)</td>
+                <th tabindex="0">Zoom in:</th>
+                <td tabindex="0">(Shift + 6)</td>
               </tr>
               <tr>
-                <th>Zoom out:</th>
-                <td>(Shift + 7)</td>
-                <th>Cursor style:</th>
-                <td>(Shift + 8)</td>
+                <th tabindex="0">Zoom out:</th>
+                <td tabindex="0">(Shift + 7)</td>
+                <th tabindex="0">Cursor style:</th>
+                <td tabindex="0">(Shift + 8)</td>
               </tr>
               <tr>
-                <th>Cross cursor:</th>
-                <td>(Shift + 9)</td>
-                <th>Display mode:</th>
-                <td>(Shift + 0)</td>
+                <th tabindex="0">Cross cursor:</th>
+                <td tabindex="0">(Shift + 9)</td>
+                <th tabindex="0">Display mode:</th>
+                <td tabindex="0">(Shift + 0)</td>
               </tr>
               <tr>
-                <th>Shortcut:</th>
-                <td>(Shift + D)</td>
-                <th>Text-to-Speech:</th>
-                <td>(Shift + N)</td>
+                <th tabindex="0">Shortcut:</th>
+                <td tabindex="0">(Shift + D)</td>
+                <th tabindex="0">Text-to-Speech:</th>
+                <td tabindex="0">(Shift + N)</td>
               </tr>
               <tr>
-                <th>Navigation:</th>
-                <td>(Alt + 1)</td>
-                <th>Viewport:</th>
-                <td>(Alt + 2)</td>
+                <th tabindex="0">Navigation:</th>
+                <td tabindex="0">(Alt + 1)</td>
+                <th tabindex="0">Viewport:</th>
+                <td tabindex="0">(Alt + 2)</td>
               </tr>
               <tr>
-                <th>Interactive port:</th>
-                <td>(Alt + 3)</td>
-                <th />
-                <td />
+                <th tabindex="0">Interactive port:</th>
+                <td tabindex="0">(Alt + 3)</td>
+                <th tabindex="0" />
+                <td tabindex="0" />
               </tr>
             </table>
           </section>
           <section>
-            <h3 id="Web navigation (Keyboard navigation)">
+            <h3 tabindex="0" id="Web navigation (Keyboard navigation)">
               Web navigation (Keyboard navigation)
             </h3>
             <table>
@@ -219,16 +219,16 @@
                 <col class="shortcut">
               </colgroup>
               <tr>
-                <th>Browsing:</th>
-                <td>(Tab)</td>
-                <th>Reverse:</th>
-                <td>(Shift + Tab)</td>
+                <th tabindex="0">Browsing:</th>
+                <td tabindex="0">(Tab)</td>
+                <th tabindex="0">Reverse:</th>
+                <td tabindex="0">(Shift + Tab)</td>
               </tr>
               <tr>
-                <th>Open the link:</th>
-                <td>(Enter)</td>
-                <th />
-                <td />
+                <th tabindex="0">Open the link:</th>
+                <td tabindex="0">(Enter)</td>
+                <th tabindex="0" />
+                <td tabindex="0" />
               </tr>
             </table>
           </section>
@@ -245,6 +245,9 @@ export default {
   name: 'App',
   components: {
     Accessibility,
+  },
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Help page.`)
   }
 }
 </script>

web/src/config.js

@@ -0,0 +1,17 @@
+let publicPath = '/'
+switch (process.env.NODE_ENV) {
+  case 'development':
+    break;
+  case 'production':
+    publicPath = '/shouBo/'
+    break;
+  default:
+    break;
+}
+
+const version = 'v0519.1049'
+
+module.exports = {
+  publicPath,
+  version,
+}

web/src/help.js

@@ -1,9 +1,14 @@
 import Vue from 'vue'
 import Help from './Help.vue'
 import './assets/css/base.css'
+const config = require('./config.js')
+
+Vue.prototype.$eventBus = new Vue({})
 
 Vue.config.productionTip = false
 
+console.log(config.version);
+
 new Vue({
   render: h => h(Help),
 }).$mount('#app')

web/src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+const config = require('./config.js')
+
 //引入初始化样式
 import './assets/css/base.css'
 Vue.use(ElementUI);
@@ -15,9 +17,10 @@ Vue.prototype.$homePageUrl = location.origin + location.pathname
 Vue.prototype.$eventBus = new Vue({})
 
 Vue.config.productionTip = false
+
+console.log(config.version);
+
 new Vue({
   router,
   render: h => h(App)
-}).$mount('#app')
-
-
+}).$mount('#app')

web/src/utils.js

@@ -94,7 +94,8 @@ function extractTextForMagnify(e, allowRepeatd = false) {
 
   return {
     elemType,
-    elemDisc
+    elemDisc,
+    ariaNode: meaningfulNode,
   }
 }
 

web/src/views/accessibility.vue

@@ -28,7 +28,7 @@
         tabindex="0"
         aria-description="Close"
         type="button"
-        @click="onClickMagnifier"
+        @click="ariaSettings.isMagnifying = !ariaSettings.isMagnifying"
       >
         <img
           :src="assetUrls.closeMagnifyArea"
@@ -58,7 +58,7 @@
       <li>
         <button
           tabindex="0"
-          aria-description="Mute"
+          aria-description="Sound"
           type="button"
           @click="onClickMute"
         >
@@ -100,7 +100,7 @@
       <li>
         <button
           tabindex="0"
-          aria-description="Coor Modification"
+          aria-description="Color Modification"
           type="button"
           @click="onClickColorModification"
         >
@@ -203,6 +203,7 @@
           ref="shortcutBtnRef"
           :href="shortcutFileText"
           download="CapitalMuseum.url"
+          @click="onClickDownloadShortcut"
         >
           <img
             :src="assetUrls.shotcut"
@@ -213,6 +214,7 @@
       </li>
       <li>
         <button
+          class="special-color"
           tabindex="0"
           aria-description="Screen Reading Accessibility"
           type="button"
@@ -255,7 +257,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Navigation area"
+          aria-description="Navigation area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownNavigationArea"
           @click="onClickNavigationArea"
           type="button"
@@ -275,7 +277,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Window area"
+          aria-description="Window area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownWindowArea"
           @click="onClickWindowArea"
           type="button"
@@ -295,7 +297,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Interaction area"
+          aria-description="Interaction area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownInteractionArea"
           @click="onClickInteractionArea"
           type="button"
@@ -362,6 +364,7 @@
         class="image-button"
       >
         <button
+          class="special-color"
           tabindex="0"
           aria-description="Elerly services"
           type="button"
@@ -399,6 +402,7 @@ import utils from "/src/utils.js"
 import bigCursor from '/src/assets/images/accessibility/big-cursor.cur'
 import "/src/assets/css/ariaGlobalStyle.less"
 import assetUrls from '/src/assets/images/accessibility/index.js'
+const config = require('/src/config.js')
 
 const speechRateFactors = [
   0.75,
@@ -471,6 +475,9 @@ export default {
       navigationAreaNum: null,
       viewportAreaNum: null,
       interactionAreaNum: null,
+
+      focusedNode: null,
+      focudedNodeTimeoutId: null,
     }
   },
   watch: {
@@ -505,7 +512,7 @@ export default {
           this.$emit('show')
           this.$eventBus.$emit('aria-show')
         } else {
-          this.onClickReset()
+          this.reset()
           for (const iterator of document.body.classList) {
             if (iterator === 'aria-active') {
               document.body.classList.remove(iterator)
@@ -525,6 +532,7 @@ export default {
     'ariaSettings.readMode': {
       handler(v) {
         if (v === 'point') {
+          this.continueReadTaskId = null
           document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
             passive: true,
           })
@@ -646,6 +654,8 @@ export default {
       }
     })
   },
+  mounted() {
+  },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
       passive: true,
@@ -767,11 +777,11 @@ export default {
           this.onClickMagnifier()
         }
       } else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
+        this.onClickNavigationArea()
       } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
+        this.onClickWindowArea()
       } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
+        this.onClickInteractionArea()
       }
     },
     loadStoredSettings() {
@@ -829,7 +839,12 @@ export default {
         this.elemType = extractedText.elemType
         this.elemDisc = extractedText.elemDisc
 
-        this.planToPlayAudio()
+        if (extractedText.ariaNode === this.focusedNode) {
+          console.log('已经由于（可能是点击导致的）focus而朗读了，不用再因为hover而朗读了');
+          return
+        } else {
+          this.planToPlayAudio()
+        }
       }
     }, 500),
     onMouseOverForContinueRead(e) {
@@ -879,17 +894,33 @@ export default {
       if (extractedText) {
         this.elemType = extractedText.elemType
         this.elemDisc = extractedText.elemDisc
+
+        this.focusedNode = extractedText.ariaNode
+        clearTimeout(this.focusedNodeTimeoutId)
+        this.focusedNodeTimeoutId = setTimeout(() => {
+          this.focusedNode = null
+          this.focudedNodeTimeoutId = null
+        }, 1000);
+
         this.planToPlayAudio(this.continueReadTaskId)
       }
     },
-
-    onClickReset() {
+    reset() {
       const copy = { ...defaultAriaSettings }
       copy.isCompActive = this.ariaSettings.isCompActive
       this.ariaSettings = copy
     },
+    onClickReset() {
+      this.planToPlayAudio('', "You've reset the feature settings")
+      this.reset()
+    },
     onClickMute() {
       this.ariaSettings.isMuted = !this.ariaSettings.isMuted
+      if (this.ariaSettings.isMuted) {
+        // this.planToPlayAudio('', 'Sound off')
+      } else {
+        this.planToPlayAudio('', 'Sound on')
+      }
       if (this.audioPlayer) {
         this.audioPlayer.muted = this.ariaSettings.isMuted
       }
@@ -899,14 +930,23 @@ export default {
       if (this.ariaSettings.speechRateLevel === speechRateFactors.length) {
         this.ariaSettings.speechRateLevel = 0
       }
+      if (this.ariaSettings.speechRateLevel === 0) {
+        this.planToPlayAudio('', 'Speak slowly')
+      } else if (this.ariaSettings.speechRateLevel === 1) {
+        this.planToPlayAudio('', 'Speak normally')
+      } else if (this.ariaSettings.speechRateLevel === 2) {
+        this.planToPlayAudio('', 'Speak fast')
+      }
       if (this.audioPlayer) {
         this.audioPlayer.playbackRate = speechRateFactors[this.ariaSettings.speechRateLevel]
       }
     },
     onClickScreenReaderMode() {
       if (this.ariaSettings.readMode === 'point') {
+        this.planToPlayAudio('', "You've enabled continuous reading mode.Please move the mouse over on the text you need to read，it'll start reading the screen in 1 second. When reading the link, tap the Enter key to enter the corresponding page.")
         this.ariaSettings.readMode = 'continue'
       } else if (this.ariaSettings.readMode === 'continue') {
+        this.planToPlayAudio('', "You've enabled read-only mode.Please move the mouse over on the text you need to read，Blind users can operate the keyboard directly.")
         this.ariaSettings.readMode = 'point'
       }
     },
@@ -915,36 +955,69 @@ export default {
       if (this.ariaSettings.themeIdx === themeList.length) {
         this.ariaSettings.themeIdx = 0
       }
+      if (this.ariaSettings.themeIdx === 0) {
+        this.planToPlayAudio('', "Ajust to standard color.")
+      } else if (this.ariaSettings.themeIdx === 1) {
+        this.planToPlayAudio('', "Adjust to black lettering on white background.")
+      } else if (this.ariaSettings.themeIdx === 2) {
+        this.planToPlayAudio('', "Adjust to yellow lettering on blue background.")
+      } else if (this.ariaSettings.themeIdx === 3) {
+        this.planToPlayAudio('', "Adjust to black lettering on yellow background.")
+      } else if (this.ariaSettings.themeIdx === 4) {
+        this.planToPlayAudio('', "Adjust to yellow lettering on black background.")
+      }
     },
     onClickZoomIn() {
       if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
         return
       }
+      this.planToPlayAudio('', "Zooming in on page")
       this.ariaSettings.zoomLevel++
     },
     onClickZoomOut() {
       if (this.ariaSettings.zoomLevel === 0) {
         return
       }
+      this.planToPlayAudio('', "Zooming out on page")
       this.ariaSettings.zoomLevel--
     },
     onClickCursorStyle() {
       this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
+      if (this.ariaSettings.isBigCursor) {
+        this.planToPlayAudio('', "You've enabled the large cursor")
+      } else {
+        this.planToPlayAudio('', "You've disabled the large cursor")
+      }
     },
     onClickCrossCursor() {
       this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
+      if (this.ariaSettings.isCursorCrosshair) {
+        this.planToPlayAudio('', "You've enabled the cross cursor")
+      } else {
+        this.planToPlayAudio('', "You've disabled the cross cursor")
+      }
     },
     onClickMagnifier() {
       this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
+      if (this.ariaSettings.isMagnifying) {
+        this.planToPlayAudio('', "You've enabled the magnifier")
+      } else {
+        this.planToPlayAudio('', "You've disabled the magnifier")
+      }
     },
     onClickHelp() {
-      window.open('./help.html')
+      window.open(config.publicPath + 'help.html')
+    },
+    onClickDownloadShortcut() {
+      this.planToPlayAudio('', "You are downloading the shortcut. Double click the shortcut to reach the website.")
     },
     onClickElderlyServicesAreaEntry() {
       this.ariaSettings.menuMode = 'old'
+      this.planToPlayAudio('', "You've switched to the elderly services mode.")
     },
     onClickScreenReaderAreaEntry() {
       this.ariaSettings.menuMode = 'blind'
+      this.planToPlayAudio('', "You've switched to screen the reading accessibility mode.")
     },
     onMouseDownNavigationArea(e) {
       e.preventDefault()
@@ -1083,6 +1156,9 @@ a {
         &:hover {
           background-color: #4D2128;
         }
+        &.special-color {
+          background-color: #701c12;
+        }
         img {
           width: 50px;
           height: 50px;
@@ -1155,6 +1231,9 @@ a {
         &:hover {
           background-color: #4D2128;
         }
+        &.special-color {
+          background-color: #701c12;
+        }
         img {
           width: 50px;
           height: 50px;

web/src/views/bottom/Index.vue

@@ -41,7 +41,7 @@
             }`"
             tabindex="0"
             aria-label="Link"
-            aria-description="item.title"
+            :aria-description="item.title"
           ></div>
         </div>
         <div class="tow">
@@ -57,7 +57,7 @@
             }`"
             tabindex="0"
             aria-label="Link"
-            aria-description="item.title"
+            :aria-description="item.title"
           ></div>
         </div>
         <div class="three">
@@ -73,7 +73,7 @@
             }`"
             tabindex="0"
             aria-label="Link"
-            aria-description="item.title"
+            :aria-description="item.title"
           ></div>
         </div>
       </div>

web/src/views/layout/index.vue

@@ -384,7 +384,7 @@ export default {
     width: 100%;
     height: 164px;
     position: absolute;
-    top: 50%;
+    top: 60%;
     & > li {
       background-color: rgba(0, 0, 0, 0.8);
       text-align: center;

web/vue.config.js

@@ -1,22 +1,12 @@
 const webpack = require('webpack')
-
-let publicPath = '/'
-switch (process.env.NODE_ENV) {
-  case 'development':
-    break;
-  case 'production':
-    publicPath = '/shouBo/'
-    break;
-  default:
-    break;
-}
+const config = require('./src/config.js')
 
 module.exports = {
   pages: {
     main: 'src/main.js',
     help: 'src/help.js',
   },
-  publicPath,
+  publicPath: config.publicPath,
   configureWebpack: {
     module: {
       rules: [