又up一波更新

src/views/HomeView.vue

@@ -212,7 +212,6 @@ const backFu = () => {
         draggable="false"
       >
       <div class="sub-text">
-        南京博物院<br>
         绢本 墨笔<br>
         元 李衎<br>
       </div>
@@ -359,7 +358,10 @@ const backFu = () => {
     <div
       class="fixed-desc"
       :class="{ 'fixed-desc4': curPageIndex == 4 }"
-      :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0,textIndent:'2em' }"
+      :style="{
+        opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0,
+        textIndent: '2em',
+      }"
       v-html="curFixedDesc"
     />
     <!-- 左滑提示 -->
@@ -421,6 +423,13 @@ const backFu = () => {
       @click="onClickGoNextPage"
     >
       知识探索
+      <div class="click-tip">
+        <img
+          src="@/assets/images/icon-home-click.png"
+          alt=""
+        >
+        <div>点击查看</div>
+      </div>
     </div>
 
     <!-- 返回按钮 -->
@@ -1108,6 +1117,28 @@ div {
     transform: translateX(-50%);
     background: url(@/assets/images/learn-more.png);
     background-size: 100% 100%;
+
+    > .click-tip {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      right: -40%;
+      bottom: -80%;
+      > img{
+        width: calc(
+          40 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+      }
+      > div {
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        font-family: "KaiTi";
+        color: #ffffff;
+      }
+    }
   }
 
   > .back-btn-main {
@@ -1197,7 +1228,11 @@ div {
       width: 100%;
       height: 140px;
       left: 0;
-      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+      background: linear-gradient(
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.4)
+      );
       position: absolute;
       bottom: 0;
       pointer-events: none;
@@ -1224,7 +1259,7 @@ div {
     > .text-box {
       width: 100%;
       overflow: auto;
-      padding:0 0px 40px 0px;
+      padding: 0 0px 40px 0px;
       &::-webkit-scrollbar {
         display: none;
       }
@@ -1294,7 +1329,11 @@ div {
       width: 100%;
       height: 140px;
       left: 0;
-      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+      background: linear-gradient(
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.4)
+      );
       // background: linear-gradient( 180deg, #d9d9d93f 0%, rgba(115,115,115,0) 100%);
       position: absolute;
       bottom: 0;

src/views/MoreContent.vue

@@ -481,7 +481,7 @@ body {
           left: -10%;
 
           .ROWtxtTab {
-            padding: 8px 0;
+            padding: 20px 0;
             background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
             background-size: contain;
             background-repeat: no-repeat;
@@ -489,7 +489,7 @@ body {
             font-family: KaiTi;
             font-weight: 400;
             writing-mode: vertical-lr;
-            letter-spacing: 0.2em;
+            letter-spacing: 0;
             white-space: pre;
             color: #b8ae7a;
             margin-bottom: 10px;
@@ -674,10 +674,10 @@ body {
 
     .ROW2 {
       .ROWtxt {
-        top: 33%;
+        top: 28%;
         left: 52%;
         .ROWtxtTabBox {
-          top: 61%;
+          top: 38%;
           left: -9%;
         }
       }
@@ -703,12 +703,12 @@ body {
         width: 198%;
         background: url(@/assets/images/game-bg.png);
         background-size: 100% 100%;
-        padding: 70%;
+        padding: 60%;
         white-space: nowrap;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-top: 62%;
+        margin-top: 40%;
         margin-left: -25%;
         font-size: 18px;
       }

src/views/PaintingList.vue

@@ -30,13 +30,13 @@
         :key="ageName"
         class="menu-item"
         :style="`max-width:${expandedAgeNameList.has(ageName)?'10000px':'26%'}`"
+        @click="onClickAge(ageName)"
       >
         <div
           class="cover"
           :style="{
             backgroundImage: `url(${ageRenderInfo[ageName].coverBg})`,
           }"
-          @click="onClickAge(ageName)"
         >
           <img
             class="age"
@@ -185,6 +185,7 @@
       v-show="isShowClickTip"
       class="click-tip"
       src="@/assets/images/icon-click-tip.png"
+      @click="onClickAge('宋')"
     >
 
     <Transition name="fade-in-out">
@@ -222,12 +223,16 @@ const menuElScrollLeft = ref(0)
 const isReady = ref(false)
 
 
+const newConfigExcel = configExcel['画作'].filter((item) => {
+  return item['标题'] !== '竹禽图卷' && item['标题'] !== '桃竹双凫图'
+})
+
 const menuInfo = {}
-const temp = configExcel['画作'].map((item) => {
+const temp = newConfigExcel.map((item) => {
   return item['朝代']
 })
 const ageList = Array.from(new Set(temp))
-for (const painting of configExcel['画作']) {
+for (const painting of newConfigExcel) {
   if (!menuInfo[painting['朝代']]) {
     menuInfo[painting['朝代']] = []
   }
@@ -369,7 +374,7 @@ const isShowPaintingStyleDesc = ref(false)
     >.menu-item{
       flex: 0 0 auto;
       min-width: 25%;
-      overflow: auto;
+      overflow: hidden;
       &::-webkit-scrollbar {
       display: none;
     }

src/views/ShuangGouSheSeDetail.vue

@@ -120,11 +120,11 @@ const curPercentage = computed(() => {
     <div class="title">
       <span
         :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
-        @click="curIndex == 0? openVideoBox():''"
+        @click="curIndex == 0 ? openVideoBox() : ''"
       >双钩</span>
       <span
         :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
-        @click="curIndex == 1? openVideoBox():''"
+        @click="curIndex == 1 ? openVideoBox() : ''"
       >设色</span>
       <!-- <img
         src="@/assets/images/icon_video.png"
@@ -135,11 +135,9 @@ const curPercentage = computed(() => {
       <div
         v-show="curIndex == 0"
         class="operation-video-tip"
-        style="top:-55%;right: -50%"
+        style="top: -55%; right: -50%"
       >
-        <div>
-          点击查看
-        </div>
+        <div>点击查看</div>
         <img
           class=""
           :src="require(`@/assets/images/icon-click-tip-green.png`)"
@@ -150,7 +148,7 @@ const curPercentage = computed(() => {
       <div
         v-show="curIndex == 1"
         class="operation-video-tip"
-        style="bottom:-55%;right: -50%;"
+        style="bottom: -55%; right: -50%"
       >
         <img
           class=""
@@ -158,9 +156,7 @@ const curPercentage = computed(() => {
           alt=""
           draggable="false"
         >
-        <div>
-          点击查看
-        </div>
+        <div>点击查看</div>
       </div>
       <!-- <img
         class=""
@@ -182,48 +178,6 @@ const curPercentage = computed(() => {
       />
     </div>
 
-    <!-- 视频box -->
-    <div
-      v-if="isShowVideoBox"
-      class="video-box"
-    >
-      <img
-        v-show="curIndex == 1"
-        class="bg-img"
-        src="@/assets/images/img_shese.jpg"
-        alt=""
-      >
-      <img
-        v-show="curIndex == 0"
-        class="bg-img"
-        src="@/assets/images/img_shuanggou.jpg"
-        alt=""
-      >
-      <OperationTip
-        class="operation-h-video"
-        text="向左划动"
-        direction="h"
-        :is-show="isShowOperationTip2"
-      />
-      <video
-        playsinline
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-        :poster="`${$env.BASE_URL}configMultiMedia/video/${
-          curIndex == 0 ? 'shuanggou' : 'shese'
-        }.png`"
-        :src="`${$env.BASE_URL}configMultiMedia/video/${
-          curIndex == 0 ? 'shuanggou' : 'shese'
-        }.mp4`"
-        controls
-      />
-      <div>{{ curIndex == 0 ? "双钩" : "设色" }}</div>
-      <BtnBack
-        class="video-box-close"
-        @click="closeVieoBox"
-      />
-    </div>
-
     <!-- <img
       class="text"
       src="@/assets/images/shuanggou-text.png"
@@ -285,6 +239,48 @@ const curPercentage = computed(() => {
       /> -->
     </div>
   </div>
+
+  <!-- 视频box -->
+  <div
+    v-if="isShowVideoBox"
+    class="video-box"
+  >
+    <img
+      v-show="curIndex == 1"
+      class="bg-img"
+      src="@/assets/images/img_shese.jpg"
+      alt=""
+    >
+    <img
+      v-show="curIndex == 0"
+      class="bg-img"
+      src="@/assets/images/img_shuanggou.jpg"
+      alt=""
+    >
+    <!-- <OperationTip
+      class="operation-h-video"
+      text="向左划动"
+      direction="h"
+      :is-show="isShowOperationTip2"
+    /> -->
+    <video
+      playsinline
+      webkit-playsinline="true"
+      x5-video-player-type="h5"
+      :poster="`${$env.BASE_URL}configMultiMedia/video/${
+        curIndex == 0 ? 'shuanggou' : 'shese'
+      }.png`"
+      :src="`${$env.BASE_URL}configMultiMedia/video/${
+        curIndex == 0 ? 'shuanggou' : 'shese'
+      }.mp4`"
+      controls
+    />
+    <div>{{ curIndex == 0 ? "双钩" : "设色" }}</div>
+    <BtnBack
+      class="video-box-close"
+      @click="closeVieoBox"
+    />
+  </div>
 </template>
 
 <style lang="less" scoped>
@@ -339,10 +335,10 @@ const curPercentage = computed(() => {
         // left: 9px;
         font-weight: 400;
         font-family: KaiTi;
-        color: #7B916B;
+        color: #7b916b;
         text-align: center;
         font-size: 18px;
-        writing-mode:vertical-rl;
+        writing-mode: vertical-rl;
       }
     }
   }
@@ -377,59 +373,6 @@ const curPercentage = computed(() => {
     }
   }
 
-  .video-box {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    .operation-h-video {
-      position: fixed;
-      left: 50%;
-      transform: translateX(-50%);
-      top: -34vh;
-      z-index: 21;
-    }
-    .video-box-close {
-      position: absolute;
-      bottom: calc(
-        15 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
-      );
-      left: 25px;
-    }
-    > .bg-img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    > video {
-      width: 100%;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-    > div {
-      color: #ffffff;
-      position: absolute;
-      bottom: 10%;
-      font-size: calc(
-        24 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      line-height: calc(
-        29 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      font-family: "KingHwa_OldSong";
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
   .text {
     display: flex;
     position: absolute;
@@ -499,6 +442,60 @@ const curPercentage = computed(() => {
     }
   }
 }
+.video-box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  .operation-h-video {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    top: -34vh;
+    z-index: 21;
+  }
+  .video-box-close {
+    position: absolute;
+    left: calc(
+      30 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: calc(
+      20 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+  }
+  > .bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  > video {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  > div {
+    color: #ffffff;
+    position: absolute;
+    bottom: 10%;
+    font-size: calc(
+      24 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    line-height: calc(
+      29 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    font-family: "KingHwa_OldSong";
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
 </style>
-import { transform } from 'lodash';import { transform } from 'lodash';import {
-translate } from "element-plus";