Merge branch 'master' of http://face3d.4dage.com:7005/renyicun/NanjingMuseumWuJinZang into master

README.md

@@ -6,8 +6,6 @@
 ## 任一存的todos
 
 ### 优化
-内容扩展页 滚动锚点
-
 内容扩展页 按钮边框
 
 内容扩展页 标题装饰小圈
@@ -18,6 +16,9 @@
 
 内容扩展页 操作提示文字竖着
 
+### 开发
+竹林层次
+
 ### 保存成果
 组件：序列帧
 

src/components/OperationTip.vue

@@ -56,6 +56,16 @@ const props = defineProps({
   }
 })
 
+const color = computed(() => {
+  if (props.color === 'white') {
+    return '#fff'
+  } else if (props.color === 'green') {
+    return '#7B916B'
+  } else {
+    return props.color
+  }
+})
+
 const isShow = ref(true)
 const propIsShow = computed(() => {
   return props.isShow
@@ -76,7 +86,7 @@ setTimeout(() => {
   display: flex;
   align-items: center;
   >.text{
-    color: v-bind('props.color');
+    color: v-bind('color');
     margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: KaiTi, KaiTi;
     font-weight: 400;

src/views/MoreContent.vue

@@ -75,8 +75,15 @@
       </div>
     </div>
 
-    <div class="current-page">
-      {{ currentAnchorIdx }}
+    <div class="pagination">
+      <div
+        v-for="index in 3"
+        :key="index"
+        class="page-icon"
+        :class="{
+          active: index === currentAnchorIdx + 1
+        }"
+      />
     </div>
     <BtnBack
       @click="router.go(-1)"
@@ -250,6 +257,7 @@ const touchMove = (event) => {
   writing-mode: vertical-lr;
   letter-spacing: 0.2em;
   white-space: pre;
+  color: #B8AE7A;
 }
 .group-title-common-style{
   font-family: KingHwa_OldSong, KingHwa_OldSong;
@@ -289,7 +297,6 @@ const touchMove = (event) => {
         position: absolute;
         top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: 0;
-        color: #474747;
         .button-common-style();
       }
       >h2.group-title{
@@ -309,7 +316,6 @@ const touchMove = (event) => {
         display: flex;
         flex-direction: column;
         >button{
-          color: #B8AE7A;
           .button-common-style();
         }
       }
@@ -321,11 +327,25 @@ const touchMove = (event) => {
       }
     }
   }
-  >.current-page {
+  >.pagination {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 0;
+    bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    gap: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.page-icon{
+      width: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border-radius: 50%;
+      border: 1px solid #7B916B;
+      min-width: 6px;
+      min-height: 6px;
+    }
+    >.page-icon.active{
+      background: #7B916B;
+    }
   }
   >.operation-tip{
     position: absolute;

src/views/ShuanggouPaintingDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="painting-detail-list">
-    <div class="bg-left" />
+    <!-- <div class="bg-left" /> -->
     <Swiper
       class="painting-list"
       :initial-slide="Number(route.query.idx)"
@@ -103,8 +103,10 @@ const isShowOperationTip = ref(true)
     top: 0;
     width: 100%;
     height: 100%;
-    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
+    // backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+    // background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
+    background-image:url(@/assets/images/shuanggou-detail.jpg);
+    background-size: 100% 100%;
     .swiper-slide{
       >.painting-item{
         position: relative !important;

src/views/StartupView.vue

@@ -37,7 +37,7 @@
           alt=""
           draggable="false"
         >
-        <span.text>开始</span.text>
+        <span class="text">开始</span>
       </button>
     </Transition>
 
@@ -146,8 +146,8 @@ function onVideoEnd() {
     left: 50%;
     bottom: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translateX(-50%);
-    width: calc(71 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: KaiTi, KaiTi;
     font-weight: 400;
     font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -157,13 +157,13 @@ function onVideoEnd() {
       position: absolute;
       left: 50%;
       top: 50%;
-      transform: translate(-50%, -50%);
-      width: 140%;
-      height: 140%;
-      animation-name: spin;
-      animation-duration: 1s;
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
+      transform: translate(-47%, -47%);
+      width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      // animation-name: spin;
+      // animation-duration: 1s;
+      // animation-timing-function: linear;
+      // animation-iteration-count: infinite;
     }
     >.text{
       position: absolute;
@@ -182,13 +182,13 @@ function onVideoEnd() {
     object-fit: cover;
   }
 
-  @keyframes spin {
-    0% {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-  }
+  // @keyframes spin {
+  //   0% {
+  //     transform: translate(-50%, -50%) rotate(0deg);
+  //   }
+  //   100% {
+  //     transform: translate(-50%, -50%) rotate(360deg);
+  //   }
+  // }
 }
 </style>