做一些更新修改

src/views/Home/bannerPage.vue

@@ -26,6 +26,9 @@ export default {
         require("@/assets/images/banner/3.png"),
         require("@/assets/images/banner/4.png"),
         require("@/assets/images/banner/5.png"),
+        require("@/assets/images/banner/6.png"),
+        require("@/assets/images/banner/7.png"),
+        require("@/assets/images/banner/8.png"),
       ],
     };
   },

src/views/Home/homePage.vue

@@ -13,7 +13,8 @@
           <img src="@/assets/images/home/title-white.png" alt="" />
         </div>
         <div class="explore" @click="() => {
-          state = 'info';
+          state = 'product';
+          changeType(dataAll.product.list[0])
         }
           ">
           开始探索
@@ -30,7 +31,7 @@
         </div>
         <div class="list">
           <!-- 简介 -->
-          <div class="list-item" style="animation-duration: 3s" @click="() => {
+          <!-- <div class="list-item" style="animation-duration: 3s" @click="() => {
             state = 'info';
           }
             ">
@@ -44,6 +45,22 @@
               </div>
             </div>
             <div class="right" v-show="state === 'info'"></div>
+          </div> -->
+          <!-- 简介 -->
+          <div class="list-item" style="animation-duration: 4.5s" @click="() => {
+            state = 'product';
+          }
+            ">
+            <div class="content" :class="{ contentAc: state === 'product' }">
+              <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.product.id + 1}${state === 'product' ? '_Ac' : ''
+                }.png`)
+                " alt="" />
+              <div class="item-right">
+                <div class="top">{{ dataAll.product.name }}</div>
+                <div class="bottom">{{ dataAll.product.disc }}</div>
+              </div>
+            </div>
+            <div class="right" v-show="state === 'product'"></div>
           </div>
           <!-- 全景 -->
           <div class="list-item" style="animation-duration: 3.5s" @click="() => {
@@ -115,22 +132,7 @@
             </div>
             <div class="right" v-show="state === 'video'"></div>
           </div>
-          <!-- 馆藏 -->
-          <div class="list-item" style="animation-duration: 4.5s" @click="() => {
-            state = 'product';
-          }
-            ">
-            <div class="content" :class="{ contentAc: state === 'product' }">
-              <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.product.id + 1}${state === 'product' ? '_Ac' : ''
-                }.png`)
-                " alt="" />
-              <div class="item-right">
-                <div class="top">{{ dataAll.product.name }}</div>
-                <div class="bottom">{{ dataAll.product.disc }}</div>
-              </div>
-            </div>
-            <div class="right" v-show="state === 'product'"></div>
-          </div>
+
         </div>
       </div>
       <!-- 列表右侧 -->
@@ -203,10 +205,19 @@
             </div>
           </div>
           <div class="result-box" id="result-box-div">
-            <div class="result-html" v-html="productHtml"></div>
+            <!-- 日期排布 -->
+            <div v-show="productActive === '大事纪'" class="category-box">
+              <div class="box-item" v-for="item in daShiJiList" :key="item.id" @click="changeYear(item)">
+                {{ item.year }}
+                <div class="bottomAc" v-show="productYearActive == item"></div>
+              </div>
+            </div>
+            <div class="result-html" v-if="productActive === '大事纪'" :style="{marginTop: productActive === '大事纪' ?'80px':'' }">
+              <div v-html="item.text" v-for="item in productYearActive.list" :key="item.text"></div>
+            </div>
+            <div v-else class="result-html" v-html="productHtml"></div>
           </div>
         </div>
-
         <!-- 视频 -->
         <div class="video-box" v-show="state == 'video'">
           <div class="v-list">
@@ -226,8 +237,7 @@
                 <div class="content-item" @click="isOpenVideo = true, curOpenVideoItem = item">
                   <img src="@/assets/images/home/play.png" alt="">
                   <img class="line" src="@/assets/images/new/qjbg.png" alt="" />
-                  <video 
-                    :src="`${baseUrl}/video/${item.link}`"></video>
+                  <video :src="`${baseUrl}/video/${item.link}`"></video>
                   <div>{{ item.name }}</div>
                 </div>
               </swiper-slide>
@@ -263,8 +273,9 @@
       v-show="state == 'full'" v-for="item in dataAll.full.vLabels" @click="handlequanjing(item)"
       :key="item.id + 'full'" :style="{ top: item.top, right: item.right }">
       <img v-if="item.class == 'mxd'" :src="item.id == activequanjing ? mxda : mxd" alt="" />
+      <img v-else-if="item.class == 'youke'" style="transform: scale(1.1);margin-top: 10px;" :src="item.id == activequanjing ? youkea : youke" alt="" />
       <img v-else :src="item.id == activequanjing ? lable3a : lable3" alt="" />
-      <div style="width: 100%">{{ item.name }}</div>
+      <div style="width: 100%">{{  item.displayName? item.displayName : item.name }}</div>
     </div>
     <!-- 展馆标签 -->
     <div class="v-labels" :class="{
@@ -284,7 +295,7 @@
       <img v-else-if="item.class == 'chenlie'" :src="item.id == activeScene ? chenliea : chenlie" alt="" />
       <img v-else-if="item.class == 'cunbu'" :src="item.id == activeScene ? cunbua : cunbu" alt="" />
       <img v-else :src="item.id == activeScene ? lable3a : lable3" alt="" />
-      <div :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu', }">{{ item.title2 }}</div>
+      <div :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu', }">{{ item.title3 }}</div>
     </div>
     <!-- 馆藏详情 -->
     <div class="productBanner" v-if="state == 'product'">
@@ -323,6 +334,9 @@ export default {
       offsetTopArr: [],
       detailId: null,
       productActive: "历史",
+      // 大事纪高亮月份
+      productYearActive: {},
+      daShiJiList: [],
       productHtml: "",
       activeStep: 1,
       activeScene: 102,
@@ -338,6 +352,8 @@ export default {
       changurla: require("@/assets/images/new/chaochang2.png"),
       mxd: require("@/assets/images/new/fys.png"),
       mxda: require("@/assets/images/new/fysa.png"),
+      youke: require("@/assets/images/new/youke.png"),
+      youkea: require("@/assets/images/new/youkea.png"),
       chenlie: require("@/assets/images/new/chenlie.png"),
       chenliea: require('@/assets/images/new/chenliea.png'),
       cunbu: require('@/assets/images/new/cunbu.png'),
@@ -467,7 +483,7 @@ export default {
       let navIndex = 0;
       if (this.state == "scene") {
         const scrollTop = document.getElementById("scroll-scenes").scrollTop;
-        this.sceneState = scrollTop <= 400;
+        this.sceneState = scrollTop <= 200;
         if (!this.sceneoffsetTopArr) return;
         for (let n = 0; n < this.sceneoffsetTopArr.length; n++) {
           // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
@@ -512,28 +528,37 @@ export default {
       });
     },
     getInitData() {
+      console.log('初始化数据', item, this.introduction)
+      // 原来简介细节
       this.$request.get("/show/intro/detail").then((res) => {
         this.introData = {
           ...res.data,
           rtf: decodeURIComponent(res.data.rtf.replace(/%/g, "%25")),
         };
-        console.log(this.introData);
-      });
-      this.$request.get("/show/about/getList").then((res) => {
-        let introduction = [];
-        res.data.map((ele) => {
-          introduction.push({
-            ...ele,
-            rtf: unescape(ele.rtf),
-          });
-        });
-        this.introduction = introduction;
-        let item = (this.introduction && this.introduction[0]) || false;
-        console.log("rtfitem", item, introduction);
-        if (item) {
-          this.changeType(item);
-        }
       });
+      // // 新简介细节（从后台获取）
+      // this.$request.get("/show/about/getList").then((res) => {
+      //   let introduction = [];
+      //   res.data.map((ele) => {
+      //     introduction.push({
+      //       ...ele,
+      //       rtf: unescape(ele.rtf),
+      //     });
+      //   });
+      //   this.introduction = introduction;
+      //   let item = (this.introduction && this.introduction[0]) || false;
+      //   if (item) {
+      //     this.changeType(item);
+      //   }
+      // });
+
+      this.introduction = this.dataAll.product.list
+      let item = (this.introduction && this.introduction[0]) || false;
+
+      if (item) {
+        this.changeType(item)
+      }
+      // 从本地data.js中获取数据
     },
     openHtml(href, id) {
       if (!href) return;
@@ -553,11 +578,16 @@ export default {
     changeType(item) {
       console.log("changeType", item);
       this.productActive = item.name;
+      item.name === '大事纪' ? (this.daShiJiList = item.list, this.changeYear(item.list[0])) : ''
       // this.productHtml = item.rtf?decodeURIComponent(item.rtf): item.text;
       this.productHtml = unescape(item.rtf || item.text);
       let parent = document.getElementById("result-box-div");
       parent.scrollTop = 0;
     },
+
+    changeYear(item) {
+      this.productYearActive = item
+    },
     getResultProduces() {
       this.resultProduces = this.dataAll.product.content.filter((item) => {
         if (this.curCategoryType == "全部") {
@@ -611,7 +641,7 @@ export default {
     },
   },
   created() {
-    this.getInitData();
+    // this.getInitData();
   },
   mounted() {
     // this.getCategoryType();
@@ -643,9 +673,10 @@ export default {
 ::-webkit-scrollbar {
   width: 2px;
   /* 设置滚动条宽度 */
-  height: 10px;
+  height: 3px;
   /* 若为垂直滚动条，可设置高度 */
   background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 50px;
   /* 设置滚动条背景颜色 */
 }
 
@@ -665,10 +696,12 @@ export default {
   opacity: 0;
   /* 或者 visibility: hidden; */
 }
-.swiper-button-next{
+
+.swiper-button-next {
   right: -50px;
 }
-.swiper-button-prev{
+
+.swiper-button-prev {
   left: -50px
 }
 
@@ -961,6 +994,14 @@ export default {
           font-weight: bold;
           border-bottom: 1px solid #2c655d;
 
+          ::-webkit-scrollbar {
+            /* 设置滚动条宽度 */
+            height: 1px;
+            /* 若为垂直滚动条，可设置高度 */
+            background-color: rgba(0, 0, 0, 0.1);
+            /* 设置滚动条背景颜色 */
+          }
+
           .list-item {
             width: auto;
             height: 100%;
@@ -968,6 +1009,7 @@ export default {
             flex-direction: column;
             justify-content: space-between;
             cursor: pointer;
+            white-space: nowrap;
 
             .bottomAc {
               width: 100%;
@@ -1056,6 +1098,10 @@ export default {
           font-weight: bold;
           border-bottom: 1px solid #2c655d;
 
+          ::-webkit-scrollbar {
+            display: none
+          }
+
           .list-item {
             width: auto;
             height: 100%;
@@ -1064,6 +1110,7 @@ export default {
             justify-content: space-between;
             cursor: pointer;
             margin-right: 40px;
+            white-space: nowrap;
 
             .bottomAc {
               width: 100%;
@@ -1201,7 +1248,7 @@ export default {
             color: #142c23;
             line-height: 24px;
             position: absolute;
-            right: 12%;
+            right: 11%;
             top: 120px;
           }
 
@@ -1357,25 +1404,66 @@ export default {
 
         .result-box {
           display: flex;
+          flex-direction: column;
           // overflow-x: scroll;
           // overflow-y: hidden;
           justify-items: center;
           height: calc(100% - 55px);
+          overflow-x: hidden;
           overflow-y: scroll;
           // align-items: center;
           font-family: Source Han Sans SC, Source Han Sans SC;
           font-weight: 500;
           font-size: 20px;
-          color: #ffffff;
+          color: #ffffff !important;
           line-height: 36px;
           letter-spacing: 1px;
           text-align: left;
           font-style: normal;
 
+          .category-box::after {
+            content: "";
+            display: table;
+            clear: both;
+          }
+
+          .category-box {
+            // display: flex;
+            max-width: 100%;
+            height: 45px;
+
+            .box-item {
+              width: 60px;
+              text-align: center;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              cursor: pointer;
+              margin: 0 15px;
+              float: left;
+
+              .bottomAc {
+                width: 100%;
+                height: 4px;
+                background: #2cd196;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+                margin-top: 5px;
+              }
+            }
+          }
+
+
           .result-html {
+            margin-top: 15px;
+
             img {
               margin: 15px 0;
             }
+
+            p {
+              color: #fff;
+            }
           }
         }
       }