up

web/src/assets/css/ariaGlobalStyle.less

@@ -3,11 +3,11 @@
 .aria-active {
   .aria-theme-default {
     &:focus {
-      outline: 3px solid red;
+      outline: 3px solid red !important;
     }
     * {
       &:focus {
-        outline: 3px solid red;
+        outline: 3px solid red !important;
       }
     }
   }
@@ -18,7 +18,7 @@
     &:focus {
       outline: 3px solid black;
     }
-    * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
+    *:not(.aria-theme-independent) {
       background-color: white !important;
       color: black !important;
       &:focus {
@@ -44,7 +44,7 @@
     &:focus {
       outline: 3px solid yellow;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: blue !important;
       color: yellow !important;
       &:focus {
@@ -70,7 +70,7 @@
     &:focus {
       outline: 3px solid black;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: yellow !important;
       color: black !important;
       &:focus {
@@ -96,7 +96,7 @@
     &:focus {
       outline: 3px solid yellow;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: black !important;
       color: yellow !important;
       &:focus {

web/src/components/Switch.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="track aria-theme-independent" :class="value ? 'on' : 'off'"
+    @click.passive="onClick"
+    @keydown.enter.passive="onEnter"
+  >
+    <div class="slider"></div>
+    <input v-show="false" type="checkbox" :id="id">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    id: {
+      type: String,
+      default: '',
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value)
+    },
+    onEnter() {
+      this.$emit('input', !this.value)
+    },
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.track {
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  position: relative;
+  transition: all 0.3s;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  .slider {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: white;
+    position: absolute;
+    top: 2px;
+  }
+}
+.off {
+  background: #DCDFE6;
+  .slider {
+    left: 2px;
+    right: auto;
+  }
+}
+.on {
+  background: #AB3434;
+  .slider {
+    left: auto;
+    right: 2px;
+  }
+}
+</style>

web/src/config.js

@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) {
     break;
 }
 
-const version = 'v0523.1411'
+const version = 'v0523.1916'
 
 module.exports = {
   publicPath,

web/src/views/Visit/Visit2.vue

@@ -41,16 +41,14 @@
       <ul>
         <!-- 第一个内容 -->
         <li class="title">
-          <div class="showCon" @click="cutFlag('one')"></div>
-          <span tabindex="0">Guidelines for Reservations</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'one' }"
-            @keydown.enter.passive="cutFlag('one')"
-            tabindex="0"
-            aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+          <div class="showCon" aria-label="Button" @click="cutFlag('one')">
+            <span>Guidelines for Reservations</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'one' }"
+              @keydown.enter.passive="cutFlag('one')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarOne: flag === 'one' }">
             <p style="text-align: center"><br /></p>
             <p>
@@ -372,16 +370,19 @@
         </li>
         <!-- 第二个内容 -->
         <li class="title title2">
-          <div class="showCon" @click="cutFlag('tow')"></div>
-          <span tabindex="0">Group Visit</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'tow' }"
-            @keydown.enter.passive="cutFlag('tow')"
+          <div
+            class="showCon"
             tabindex="0"
             aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+            @click="cutFlag('tow')"
+          >
+            <span>Group Visit</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'tow' }"
+              @keydown.enter.passive="cutFlag('tow')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarTow: flag === 'tow' }">
             <table data-sort="sortDisabled">
               <tbody>
@@ -484,16 +485,14 @@
         </li>
         <!-- 第三个内容 -->
         <li class="title title3">
-          <div class="showCon" @click="cutFlag('three')"></div>
-          <span tabindex="0">Relevant Information</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'three' }"
-            @keydown.enter.passive="cutFlag('three')"
-            tabindex="0"
-            aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+          <div class="showCon" tabindex="0" aria-label="Button" @click="cutFlag('three')">
+            <span tabindex="0">Relevant Information</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'three' }"
+              @keydown.enter.passive="cutFlag('three')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarThree: flag === 'three' }">
             <p><br /></p>
             <p tabindex="0">
@@ -683,33 +682,30 @@ export default {
         background: url("../../assets/images/Visit/m-28.jpg") no-repeat;
         .showCon{
           cursor: pointer;
-          position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 50px;
+          span {
+            margin-left: 10px;
+          }
+          .arrow {
+            float: right;
+            cursor: pointer;
+            width: 50px;
+            height: 50px;
+            background: url("../../assets/images/Visit/m-31.png") no-repeat center
+              left;
+          }
+          .arrow-up {
+            background: url("../../assets/images/Visit/m-32.png") no-repeat center
+              left;
+          }
         }
-        span {
-          margin-left: 10px;
-        }
-        .arrow {
-          float: right;
-          cursor: pointer;
-          width: 50px;
-          height: 50px;
-          background: url("../../assets/images/Visit/m-31.png") no-repeat center
-            left;
-        }
-        .arrow-up {
-          background: url("../../assets/images/Visit/m-32.png") no-repeat center
-            left;
-        }
-        div {
+        .in-sidebar {
           font-size: 18px;
           line-height: 28px;
           color: #000;
-        }
-        .in-sidebar {
           height: 0px;
           overflow: hidden;
           transition: all 0.3s;

web/src/views/accessibility.vue

@@ -844,14 +844,15 @@ export default {
         styleNode.innerHTML = `
           .aria-control-target {
             transform: scale(${zoomFactors[this.ariaSettings.zoomLevel]});
-            transform-origin: top left;
+            transform-origin: left top;
           }
           .aria-no-zoom {
             transform: scale(${1 / zoomFactors[this.ariaSettings.zoomLevel]});
-            transform-origin: top left;
+            transform-origin: left top;
           }
         `
       }
+      document.documentElement.scrollLeft = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2
     },
     updateThemeClass() {
       this.$nextTick(() => {
@@ -1001,10 +1002,10 @@ export default {
     },
     onClickScreenReaderMode() {
       if (this.ariaSettings.readMode === 'point') {
-        this.$eventBus.$emit('request-read', "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.$eventBus.$emit('request-read', "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.$eventBus.$emit('request-read', "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.$eventBus.$emit('request-read', "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'
       }
     },
@@ -1215,7 +1216,7 @@ a {
         &:hover {
           background-color: #4D2128;
         }
-        &.special-color {
+        &.special-color:not(:hover) {
           background-color: #701c12;
         }
         img {
@@ -1290,7 +1291,7 @@ a {
         &:hover {
           background-color: #4D2128;
         }
-        &.special-color {
+        &.special-color:not(:hover) {
           background-color: #701c12;
         }
         img {

web/src/views/layout/index.vue

@@ -60,12 +60,20 @@
                 Caring Mode
               </label>
               &nbsp;
-              <el-switch v-model="loveFlag" active-color="#AB3434"
+              <MySwitch
+                v-model="loveFlag"
                 id="caring-mode-switch"
                 tabindex="0"
                 aria-label="Button"
                 aria-description="Caring Mode"
-              />
+              ></MySwitch>
+              <!-- 为了让组件内部也能更换主题色，所以不再使用第三方组件 -->
+              <!-- <el-switch v-model="loveFlag" active-color="#AB3434"
+                id="caring-mode-switch"
+                tabindex="0"
+                aria-label="Button"
+                aria-description="Caring Mode"
+              /> -->
             </li>
           </ul>
         </div>
@@ -76,15 +84,25 @@
           aria-label aria-description="You've reached the seach field, please use the tab key to browse the content."
           tabindex="0"
         >
-          <el-input
+          <div class="input-wrapper">
+            <input
+              type="text"
+              autocomplete="off"
+              placeholder="search..."
+              v-model="searchTxt"
+              tabindex="0"
+              aria-description="search"
+            />
+          </div>
+          <!-- <el-input
             placeholder="search..."
             suffix-icon="el-icon-search"
             v-model="searchTxt"
             tabindex="0"
             aria-description="search"
           >
-          </el-input>
-          <div class="btnn" @click="search"></div>
+          </el-input> -->
+          <!-- <div class="btnn" @click="search"></div> -->
         </div>
       </div>
       <!-- 嵌套路由 -->
@@ -115,7 +133,7 @@
       </div>
       <!-- 固定的二维码和游戏 -->
       <div
-        class="rightNav" data-aria-viewport-area tabindex="0"
+        class="rightNav aria-theme-independent" data-aria-viewport-area tabindex="0"
         aria-label aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
       >
         <ul class="rightIco" >
@@ -148,11 +166,13 @@
 <script>
 import Accessibility from '/src/views/accessibility.vue'
 import { topData } from "./data";
+import MySwitch from "/src/components/Switch.vue";
 
 export default {
   name: "Layout",
   components: {
     Accessibility,
+    MySwitch,
   },
   data() {
     //这里存放数据
@@ -354,21 +374,47 @@ export default {
     ::-webkit-input-placeholder {
       color: #000000;
     }
-    /deep/.el-input__icon {
-      font-size: 20px;
-      line-height: 30px;
-      color: #ca000a;
-    }
-    .btnn {
-      cursor: pointer;
-      z-index: 99;
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 40px;
+    .input-wrapper {
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      width: 100%;
       height: 30px;
-      border-radius: 15px;
+      input {
+        font-size: 14px;
+        background-color: #FFF;
+        border: 1px solid #DCDFE6;
+        box-sizing: border-box;
+        color: #606266;
+        display: inline-block;
+        outline: 0;
+        padding: 0 15px;
+        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+        width: 100%;
+        height: 30px;
+        border-radius: 15px;
+        line-height: 30px;
+        padding-right: 30px;
+        &:focus {
+          border-color: #ca000a;
+        }
+      }
     }
+    // /deep/.el-input__icon {
+    //   font-size: 20px;
+    //   line-height: 30px;
+    //   color: #ca000a;
+    // }
+    // .btnn {
+    //   cursor: pointer;
+    //   z-index: 99;
+    //   position: absolute;
+    //   right: 0px;
+    //   top: 0px;
+    //   width: 40px;
+    //   height: 30px;
+    //   border-radius: 15px;
+    // }
   }
 }
 .rightNav {