Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

src/views/HomeView.vue

@@ -227,6 +227,7 @@
         :painting-desc="homepagePaintingDesc.join('\n\n')"
         :author-desc="homepageAuthorDesc.join('\n\n')"
         :big-painting="require(`@/assets/images/home-painting-big.jpg`)"
+        :need-operation-tip="true"
         class="hotspot-detail painting-detail"
         @close="isShowPaintingDetail = false"
       />
@@ -448,7 +449,7 @@ const isShowHotspotDetail3 = ref(false)
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(59,64,60,0.67);
+    background: rgba(70, 82, 73, 0.67);
     backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   }
   >.startup{

src/views/HotspotDetail1.vue

@@ -104,7 +104,7 @@ const craftInfo = configText.craft
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(59,64,60,0.67);
+    background-color: rgba(48, 74, 56, 0.70);
     backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     z-index: -1;
   }

src/views/HotspotDetail3.vue

@@ -104,7 +104,7 @@ const craftInfo = configText.craft
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(59,64,60,0.67);
+    background-color: rgba(48, 74, 56, 0.70);
     backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     z-index: -1;
   }

src/views/PaintingDetail.vue

@@ -42,6 +42,7 @@
       </Transition>
     </div>
     <div
+      ref="descTextEl"
       class="desc-text"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
@@ -72,6 +73,13 @@
       </div>
     </div>
 
+    <OperationTip
+      v-if="needOperationTip"
+      class="operation-tip"
+      text=""
+      :is-show="isShowOperationTip"
+    />
+
     <BtnBack
       v-if="canClose"
       @click="emit('close')"
@@ -145,6 +153,30 @@ const props = defineProps({
         height: 1,
       }
     },
+  },
+  needOperationTip: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+/**
+ * 操作提示
+ */
+const needOperationTip = computed(() => {
+  return props.needOperationTip
+})
+const isShowOperationTip = ref(true)
+const descTextEl = ref(null)
+const descTextElScrollTop = ref(0)
+onMounted(() => {
+  descTextEl.value.addEventListener('scroll', (e) => {
+    descTextElScrollTop.value = descTextEl.value.scrollTop
+  })
+})
+watch(descTextElScrollTop, (v) => {
+  if (v > 0) {
+    isShowOperationTip.value = false
   }
 })
 
@@ -317,6 +349,11 @@ function showBigPainting() {
   }
   >.operation-tip{
     position: absolute;
+    right: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.operation-tip{
+    position: absolute;
     right: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }

src/views/PaintingList.vue

@@ -200,7 +200,8 @@ const ageRenderInfo = {
 
 function getAuthorList(paintingGroup) {
   const temp = paintingGroup.map((item) => {
-    return item['作者']
+    let author = item['作者']
+    return author.split('（')[0]
   })
   return Array.from(new Set(temp))
 }
@@ -254,7 +255,7 @@ watch(menuElScrollLeft, (v) => {
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #99ab8e;
+  background-color: #798F69;
   >ul{
     position: absolute;
     left: 0;
@@ -315,11 +316,14 @@ watch(menuElScrollLeft, (v) => {
         overflow: hidden;
         display: flex;
         align-items: flex-end;
-        padding-bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-color: #f9f7f2;
         height: 100%;
+        background-image: url(@/assets/images/bg-paper.jpg);
+        background-size: auto 100%;
+        background-repeat: repeat;
         >.special-desc{
           flex: 0 0 auto;
+          align-self: center;
           width: calc(v-bind('specialDescWidthWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           display: flex;
           justify-content: center;
@@ -363,6 +367,7 @@ watch(menuElScrollLeft, (v) => {
           display: flex;
           flex-direction: column;
           align-items: center;
+          margin-bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           >.top-wrap{
             margin-bottom: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             position: relative;

src/views/PoemList.vue

@@ -61,6 +61,12 @@
       class="button-back"
       @click="router.go(-1)"
     />
+    <Transition
+      v-show="isShowOperationTipShadow"
+      name="fade-out"
+    >
+      <div class="operation-tip-shadow" />
+    </Transition>
     <OperationTip
       class="operation-tip"
       text="下一首"
@@ -85,6 +91,9 @@
           <button
             v-for="(item, index) in menuList"
             :key="index"
+            :class="{
+              active: item === currentPoem['朝代']
+            }"
             @click="onClickMenuItem(item)"
           >
             <img
@@ -178,8 +187,13 @@ const isShowOperationTip = ref(true)
 watch(currentIdx, (v) => {
   if (isShowOperationTip.value) {
     isShowOperationTip.value = false
+    isShowOperationTipShadow.value = false
   }
 })
+const isShowOperationTipShadow = ref(true)
+setTimeout(() => {
+  isShowOperationTipShadow.value = false
+}, 2000)
 
 /**
  * 目录
@@ -324,6 +338,15 @@ function onClickMenuItem(menuItemName) {
   >.button-back{
     z-index: 10;
   }
+  >.operation-tip-shadow{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 20%;
+    background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
+    z-index: 9;
+  }
   >.operation-tip{
     position: absolute;
     left: 50%;
@@ -349,7 +372,7 @@ function onClickMenuItem(menuItemName) {
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(38,55,38,0.6);
+    background: rgba(102,123,82,0.6);
     border-radius: 0px 0px 0px 0px;
     backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     z-index: 15;
@@ -379,6 +402,9 @@ function onClickMenuItem(menuItemName) {
           height: 100%;
         }
       }
+      >button.active{
+        color: #F4E09D;
+      }
     }
     >button.close{
       position: absolute;