upp

web/src/views/About/index.vue

@@ -1,20 +1,26 @@
 <!--  -->
 <template>
   <div class="About">
-    <div class="banWrapper"
+    <div
+      class="banWrapper"
       data-aria-viewport-area
       tabindex="0"
       aria-label
       aria-description="You've reached the banner area of the About page; this page has one image; please use the tab key to go through the content."
     >
-      <div class="ban aria-theme-independent"
+      <div
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="About"
       ></div>
     </div>
-    <div class="pos" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
+    <div
+      class="pos"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
     >
       <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
       <Router-link
@@ -34,13 +40,26 @@
         About>
       </Router-link>
     </div>
-    <div class="director" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the From the Director section, please use the tab key to navigate through the content."
+    <div
+      class="director"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the From the Director section, please use the tab key to navigate through the content."
     >
-      <div v-if="themeIdx === 0" class="director-title-for-focus" tabindex="0" aria-description="From the Director"></div>
-      <div v-if="themeIdx !== 0" class="director-title-visible" tabindex="0">From the Director</div>
+      <div
+        v-if="themeIdx === 0"
+        class="director-title-for-focus"
+        tabindex="0"
+        aria-description="From the Director"
+      ></div>
+      <div v-if="themeIdx !== 0" class="director-title-visible" tabindex="0">
+        From the Director
+      </div>
       <div class="text-wrapper">
-        <p tabindex="0">Welcome to the website of the Capital Museum of China.</p>
+        <p tabindex="0">
+          Welcome to the website of the Capital Museum of China.
+        </p>
         <p tabindex="0">
           We are looking forward to your visit. The Capital Museum is a palace
           of Beijing culture. Its collections relate to the long development of
@@ -69,60 +88,61 @@
         Read More
       </p>
     </div>
-    <div class="history" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the History section, please use the tab key to go through the content."
+    <div
+      class="history"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the History section, please use the tab key to go through the content."
     >
-      <div v-if="themeIdx === 0" class="history-title-for-focus" tabindex="0" aria-description="History"></div>
-      <div v-if="themeIdx !== 0" class="history-title-visible" tabindex="0">History</div>
-      <div class="text-wrapper" >
-        <p tabindex="0">
-          <span
-            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-          >
-            The Capital Museum, located in the Confucius Temple, was prepared
-            in 1953 and formally opened in 1981.
-          </span>
-        </p>
-        <p><br /></p>
-        <p tabindex="0">
-          <span
-            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-          >
-            As a major cultural construction project in Beijing in the "10th
-            Five-Year Plan", the new complex of the Capital Museum, approved by
-            the Beijing Municipal Government in 1999, further approved by the
-            State Council after being submitted by the National Development and
-            Reform Commission in 2001, commenced its construction in December
-            2001.
-          </span>
-        </p>
-        <p><br /></p>
-        <p tabindex="0">
-          <span
-            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-          >
-            The new Capital Museum had the trial operation in December 2005 and
-            was officially opened on May 18, 2006. With its magnificent
-            architecture, abundant exhibitions, advanced technology and complete
-            functions, the Capital Museum contributes to Beijing's standing as a
-            famous historical and cultural city, a cultural centre and an
-            international metropolis and ranks among the first class museums
-            both at home and abroad and is regarded as one of the first "State
-            First-class Museums" in 2008.
-          </span>
-        </p>
+      <div class="hisMain">
+        <div class="hisTitle">History</div>
+        <div class="hisRowBox">
+          <div class="hisRow" v-for="item in hisData" :key="item.id">
+            <img :src="`/data/About/his/${item.id}.png`" alt="" />
+            <div class="hisHover" @click="hisInfo = item">
+              <div class="hisHoverTitle" v-html="item.title"></div>
+              <div class="hisHoverBtn">Enter</div>
+            </div>
+          </div>
+          <!-- 点击出来的详情文字 -->
+          <div class="hisTxt" v-if="hisInfo.id">
+            <div class="hisTxtMain">
+              <div class="hisTxt1" v-html="hisInfo.title"></div>
+              <div class="hisTxt2" v-html="hisInfo.txt"></div>
+            </div>
+            <!-- 返回按钮 -->
+            <div class="hisBack" @click="hisInfo = {}"></div>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="partner" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the Patrners & Connections section, please use the tab key to go through the information."
+    <div
+      class="partner"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the Patrners & Connections section, please use the tab key to go through the information."
     >
-      <div v-if="themeIdx === 0" class="partners-title-for-focus" tabindex="0" aria-description="Partners & Connections"></div>
-      <div v-if="themeIdx !== 0" class="partners-title-visible" tabindex="0">Partners & Connections</div>
-      <ul >
-        <li v-for="(item, index) in link" :key="index"
+      <div
+        v-if="themeIdx === 0"
+        class="partners-title-for-focus"
+        tabindex="0"
+        aria-description="Partners & Connections"
+      ></div>
+      <div v-if="themeIdx !== 0" class="partners-title-visible" tabindex="0">
+        Partners & Connections
+      </div>
+      <ul>
+        <li
+          v-for="(item, index) in link"
+          :key="index"
           class="aria-theme-independent"
         >
-          <a :href="item.name" target="_blank" :title="item.pop"
+          <a
+            :href="item.name"
+            target="_blank"
+            :title="item.pop"
             tabindex="0"
             aria-label="Image link"
             :aria-description="item.pop"
@@ -147,26 +167,44 @@
         aria-description="See More"
       />
     </div>
-    <div class="contact" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the Contact section, please use the tab key to go through the information."
+    <div
+      class="contact"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the Contact section, please use the tab key to go through the information."
     >
-      <div v-if="themeIdx === 0" class="contact-title-for-focus" tabindex="0" aria-description="Contact"></div>
-      <div v-if="themeIdx !== 0" class="contact-title-visible" tabindex="0">Contact</div>
-      <p tabindex="0">Official website of Capital Museum: <a :href="$homePageUrl" tabindex="0">{{$homePageUrl}}</a></p>
+      <div
+        v-if="themeIdx === 0"
+        class="contact-title-for-focus"
+        tabindex="0"
+        aria-description="Contact"
+      ></div>
+      <div v-if="themeIdx !== 0" class="contact-title-visible" tabindex="0">
+        Contact
+      </div>
+      <p tabindex="0">
+        Official website of Capital Museum:
+        <a :href="$homePageUrl" tabindex="0">{{ $homePageUrl }}</a>
+      </p>
       <p tabindex="0">
         Telephone reservation (individual visitors):
         <span tabindex="0">+86 (10) 63393339</span>
       </p>
       <p tabindex="0">
-        Telephone reservation (group visitors): <span tabindex="0">+86 (10) 63370458</span>
+        Telephone reservation (group visitors):
+        <span tabindex="0">+86 (10) 63370458</span>
+      </p>
+      <p tabindex="0">
+        Inquiry Hotline: <span tabindex="0">+86 (10) 63370491</span>
       </p>
-      <p tabindex="0">Inquiry Hotline: <span tabindex="0">+86 (10) 63370491</span></p>
-      <p >
-        <a href="mailto:ICD@capitalmuseum.org.cn"
+      <p>
+        <a
+          href="mailto:ICD@capitalmuseum.org.cn"
           tabindex="0"
           aria-description="Email Us"
         >
-          <img src="/data/About/youxiang.jpg"/>
+          <img src="/data/About/youxiang.jpg" />
         </a>
       </p>
     </div>
@@ -174,7 +212,9 @@
 </template>
 
 <script>
-import accessibilityMixin from "/src/views/accessibilityMixin.js"
+import accessibilityMixin from "/src/views/accessibilityMixin.js";
+
+import { hisData } from "./data";
 
 export default {
   name: "About",
@@ -183,13 +223,24 @@ export default {
   data() {
     //这里存放数据
     return {
+      hisData,
+      hisInfo: {},
       link: [
-        {name:"http://www.edo-tokyo-museum.or.jp/en/",pop:'Edo-Tokyo Museum'},
-        {name:"https://en.shm.ru/",pop:'Russian State Historical Museum'},
-        {name:"https://www.rom.on.ca/en",pop:'Royal Ontario Museum'},
-        {name:"https://museum.seoul.go.kr/eng/index.do",pop:'Seoul Museum of History'},
-        {name:"https://museumsvictoria.com.au/",pop:'Museums Victoria'},
-        {name:"https://www.vmfa.museum/",pop:'Virginia Museum of Fine Arts'},
+        {
+          name: "http://www.edo-tokyo-museum.or.jp/en/",
+          pop: "Edo-Tokyo Museum",
+        },
+        { name: "https://en.shm.ru/", pop: "Russian State Historical Museum" },
+        { name: "https://www.rom.on.ca/en", pop: "Royal Ontario Museum" },
+        {
+          name: "https://museum.seoul.go.kr/eng/index.do",
+          pop: "Seoul Museum of History",
+        },
+        { name: "https://museumsvictoria.com.au/", pop: "Museums Victoria" },
+        {
+          name: "https://www.vmfa.museum/",
+          pop: "Virginia Museum of Fine Arts",
+        },
       ],
     };
   },
@@ -203,7 +254,10 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.$eventBus.$emit('request-read', `You've reached the About page. This page contains one navigation section, eight window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+    this.$eventBus.$emit(
+      "request-read",
+      `You've reached the About page. This page contains one navigation section, eight window sections, and one interactive section. To choose an area, please hit the shortcut key.`
+    );
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -290,33 +344,146 @@ export default {
     clear: both;
     width: 100%;
     height: 501px;
-    background-image: url("/data/About/au3.gif");
-    background-repeat: no-repeat;
-    background-position: center top;
-    > .history-title-for-focus {
-      position: absolute;
-      width: 150px;
-      height: 40px;
-      left: calc(50% - 509px);
-      transform: translateX(-50%);
-      top: 85px;
-    }
-    > .history-title-visible {
-      position: absolute;
-      left: calc(50% - 509px);
-      transform: translateX(-50%);
-      top: 95px;
-      font-size: 24px;
-      line-height: 1;
-      font-weight: bold;
-    }
-    & > .text-wrapper {
-      width: 1120px;
+    background-image: url("/data/About/au3.png");
+    background-size: 100% 100%;
+    .hisMain {
+      text-align: center;
+      width: 1190px;
       margin: 0 auto;
-      padding-top: 165px;
-      font-size: 16px;
-      color: #656565;
-      line-height: 20px;
+      padding-top: 40px;
+      .hisTitle {
+        color: #0e0e0e;
+        font-size: 30px;
+        font-weight: 700;
+        margin-bottom: 30px;
+      }
+      .hisRowBox {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        position: relative;
+        .hisRow {
+          width: 280px;
+          height: 360px;
+          position: relative;
+          border-radius: 8px;
+          overflow: hidden;
+          transition: all 0.1s;
+          & > img {
+            width: 100%;
+            height: 100%;
+          }
+          .hisHover {
+            cursor: pointer;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.1s;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #cb0707;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10px 10px 70px;
+            .hisHoverTitle {
+              color: #fff;
+              font-size: 18px;
+              line-height: 26px;
+            }
+            .hisHoverBtn {
+              position: absolute;
+              bottom: 40px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 130px;
+              height: 42px;
+              color: #fff;
+              font-size: 20px;
+              border: 1px solid #fff;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          &:hover {
+            transform: scale(1.1);
+            .hisHover {
+              opacity: 1;
+              pointer-events: auto;
+            }
+          }
+        }
+        .hisTxt {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 99;
+          background-color: #fff;
+          border-radius: 4px;
+          box-shadow: 0 0 8px 4px #ccc;
+          padding: 20px 20px 40px;
+          .hisTxtMain {
+            overflow-y: auto;
+            padding: 0 20px;
+            width: 100%;
+            height: 100%;
+            .hisTxt1 {
+              color: #cb0707;
+              line-height: 26px;
+              font-size: 22px;
+              font-weight: 700;
+              margin-bottom: 15px;
+            }
+            .hisTxt2 {
+              text-align: left;
+              font-size: 14px;
+              color: #444444;
+              line-height: 20px;
+              /deep/p {
+                margin-bottom: 15px;
+              }
+              /deep/b {
+                display: block;
+                font-weight: 700;
+              }
+            }
+            &::-webkit-scrollbar {
+              /*滚动条整体样式*/
+              width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+              height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+              /*滚动条里面小方块*/
+              border-radius: 10px;
+              -webkit-box-shadow: inset 0 0 5px transparent;
+              background: #d9d9d9;
+            }
+            &::-webkit-scrollbar-track {
+              /*滚动条里面轨道*/
+              -webkit-box-shadow: inset 0 0 5px transparent;
+              border-radius: 10px;
+              background: transparent;
+            }
+          }
+          .hisBack {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 99;
+            cursor: pointer;
+            background-image: url("/data/About/his/back.png");
+            background-size: 100% 100%;
+          }
+        }
+      }
     }
   }
   .partner {
@@ -433,7 +600,8 @@ export default {
     & > p {
       padding: 10px 0;
       font-size: 14px;
-      & > span, a {
+      & > span,
+      a {
         color: rgb(255, 0, 0);
       }
     }

web/src/views/Publications/index.vue

@@ -128,7 +128,7 @@ export default {
       else if (id <= 23) temp = 2018;
       else if (id <= 29) temp = 2017;
       else if (id === 30) temp = 2021;
-      else if (id <= 31) temp = 2022;
+      else if (id <= 36) temp = 2022;
       else if (id <= 37) temp = 2023;
       return temp;
     },

webM/src/views/About/index.vue

@@ -46,28 +46,17 @@
       <!-- 2 -->
       <div id="About2">
         <h3 class="title">History</h3>
-        <p>
-          The Capital Museum, located in the Confucius Temple, was prepared in
-          1953 and formally opened in 1981.
-        </p>
-        <p>
-          As a major cultural construction project in Beijing in the "10th
-          Five-Year Plan", the new complex of the Capital Museum, approved by
-          the Beijing Municipal Government in 1999, further approved by the
-          State Council after being submitted by the National Development and
-          Reform Commission in 2001, commenced its construction in December
-          2001.
-        </p>
-        <p>
-          The new Capital Museum had the trial operation in December 2005 and
-          was officially opened on May 18, 2006. With its magnificent
-          architecture, abundant exhibitions, advanced technology and complete
-          functions, the Capital Museum contributes to Beijing's standing as a
-          famous historical and cultural city, a cultural centre and an
-          international metropolis and ranks among the first class museums both
-          at home and abroad and is regarded as one of the first "State
-          First-class Museums" in 2008.
-        </p>
+        <div class="hisBox">
+          <div
+            class="hisRow"
+            @click="hisInfo = item"
+            v-for="item in hisData"
+            :key="item.id"
+          >
+            <img :src="`/data/About/his/${item.id}m.png`" alt="" />
+            <div v-html="item.title"></div>
+          </div>
+        </div>
       </div>
       <!-- 3 -->
       <div id="About3">
@@ -90,7 +79,7 @@
       <div id="About4">
         <h3 class="title">Contact</h3>
         <div class="pp">Official website of Capital Museum:</div>
-        <p class="indexUrl">https://zzbbh.4dage.com/shouBoM/index.html</p>
+        <p class="indexUrl">https://en.capitalmuseum.org.cn/#/Layout/Home</p>
         <div class="pp">Telephone reservation (individual visitors):</div>
         <p>+86 (10) 63393339</p>
         <div class="pp">Telephone reservation (group visitors):</div>
@@ -99,16 +88,31 @@
         <p>+86 (10) 63370491</p>
       </div>
     </div>
+    <!-- 点击历史出来的弹窗 -->
+    <div class="hisMainBox" :class="{ hisMainBoxAc: hisInfo.id }">
+      <div class="hisMainBox1">
+        <div class="hisTxt1" v-html="hisInfo.title"></div>
+        <div class="hisTxt2" v-html="hisInfo.txt"></div>
+      </div>
+      <!-- 返回按钮 -->
+      <div class="hisBack" @click="hisInfo = {}"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import { hisData } from "./data";
+
 export default {
   name: "About",
   components: {},
   data() {
     //这里存放数据
     return {
+      // hisData----------
+      hisData,
+      hisInfo: {},
+
       menaSon: false,
       idMate: 0,
       tabData: [
@@ -321,8 +325,38 @@ export default {
       border-bottom: 1px solid #ccc;
     }
     #About2 {
-      padding: 40px 10px;
+      padding: 40px 0px;
       border-bottom: 1px solid #ccc;
+      .hisBox {
+        display: flex;
+        flex-wrap: wrap;
+        .hisRow {
+          width: 48%;
+          margin: 0 4% 6% 0;
+          background-color: #fff;
+          border-radius: 6px;
+          box-shadow: 0 0 3px 3px #ccc;
+          & > img {
+            width: 100%;
+          }
+          & > div {
+            height: 59px;
+            font-size: 12px;
+            padding: 8px 10px;
+            line-height: 16px;
+            display: -webkit-box;
+            overflow: hidden;
+            white-space: normal !important;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
+          &:nth-of-type(2n) {
+            margin-right: 0;
+          }
+        }
+      }
     }
     #About3 {
       padding: 40px 0;
@@ -356,14 +390,70 @@ export default {
       }
     }
   }
-    .curSorll {
-      max-width: 500px;
-      z-index: 99;
-      position: fixed;
-      top: 0;
+  .curSorll {
+    max-width: 500px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .hisMainBox {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+    padding: 40px 20px 80px;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+    .hisMainBox1 {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      box-shadow: 0 0 8px 4px #ccc;
+      border-radius: 6px;
+      padding: 20px 14px;
+      .hisTxt1 {
+        color: #cb0707;
+        line-height: 20px;
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 15px;
+      }
+      .hisTxt2 {
+        text-align: left;
+        font-size: 14px;
+        color: #444444;
+        line-height: 18px;
+        /deep/p {
+          margin-bottom: 15px;
+        }
+        /deep/b {
+          display: block;
+          font-weight: 700;
+        }
+      }
+    }
+    .hisBack {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
+      z-index: 99;
+      background-image: url("/data/About/his/back.png");
+      background-size: 100% 100%;
     }
+  }
+  .hisMainBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 @media screen and (max-width: 370px) {
   #About3 {

webM/src/views/Visit/VisitInfo.vue

@@ -22,7 +22,7 @@
       <p>
         There are 3,600 daily personal booking places, available through website
         (3000 places) and telephone (600 places). The website
-        <a href="#/" class="indexUrl">https://zzbbh.4dage.com/shouBoM/index.html</a> offers 24-hour service, and the
+        <a href="#/" class="indexUrl">https://en.capitalmuseum.org.cn/#/Layout/Home</a> offers 24-hour service, and the
         telephone <br/>+86 (10) 63393339 service is available from 09:00 to 17:00. One
         person is only allowed to book one ticket.
       </p>
@@ -95,7 +95,7 @@
         Museum will make a publicannouncement in advance. Please visit the
         official website or inquire by telephone for detailed information.
       </p>
-      <p class="indexUrl">Official website: https://zzbbh.4dage.com/shouBoM/index.html</p>
+      <p class="indexUrl">Official website: https://en.capitalmuseum.org.cn/#/Layout/Home</p>
       <p>Phone: +86 (10) 63370491</p>
     </div>
   </div>

webM/src/views/bottom/Use.vue

@@ -42,13 +42,13 @@
         <p class="indexUrl">
           (1) For non-commercial, non-profit and non-advertising uses, author's
           name and source of the used article or picture, "首都博物馆网站" or
-          "https://zzbbh.4dage.com/shouBoM/index.html", should be attached.
+          "https://en.capitalmuseum.org.cn/#/Layout/Home", should be attached.
         </p>
         <p class="indexUrl">
           (2) For business, profit-making and advertising use, you should obtain
           consent of the original author, and attach the name of that author,
           limits of authority and the source, "首都博物馆网站"or
-          "https://zzbbh.4dage.com/shouBoM/index.html".
+          "https://en.capitalmuseum.org.cn/#/Layout/Home".
         </p>
         <p>
           (3) Any modification and cancellation of any articles or pictures