"更多章节"页小改版

src/views/MoreContent.vue

@@ -99,25 +99,49 @@
         </div>
 
         <div class="mo-zhu-group">
-          <div class="button-group">
-            <div
-              class="poem animation-show-long-hide"
+          <div class="button-group animation-show-long-hide">
+            <img
+              class="splitter"
+              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              alt=""
+              draggable="false"
+            >
+            <button
+              class="button"
               @click="onClickEntryAtMoZhu('PoemList')"
             >
               人文
-            </div>
-            <div
-              class="animation-show-long-hide"
+            </button>
+            <img
+              class="splitter"
+              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              alt=""
+              draggable="false"
+            >
+            <button
+              class="button"
               @click="onClickEntryAtMoZhu('PaintingList')"
             >
               画作
-            </div>
-            <div
-              class="animation-show-long-hide"
+            </button>
+            <img
+              class="splitter"
+              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              alt=""
+              draggable="false"
+            >
+            <button
+              class="button"
               @click="onClickEntryAtMoZhu('BambooBook')"
             >
               竹谱
-            </div>
+            </button>
+            <img
+              class="splitter"
+              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              alt=""
+              draggable="false"
+            >
           </div>
           <div class="group-title">
             墨竹
@@ -290,14 +314,13 @@ const OpenScene = () => {
 </script>
 
 <style lang="less" scoped>
-.button-common-style {
+.button-common-style{
   font-family: KaiTi;
   font-weight: 400;
-  font-size: calc(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+  font-size: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   writing-mode: vertical-lr;
   letter-spacing: 0.2em;
   white-space: pre;
-  color: #b8ae7a;
   cursor: pointer;
 }
 
@@ -376,8 +399,9 @@ const OpenScene = () => {
           top: calc(
             208px * v-bind("windowHeight") / v-bind("windowHeightDesign")
           );
+          color: #474747;
           left: 0;
-          background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
+          background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
@@ -405,19 +429,17 @@ const OpenScene = () => {
         > .button-group {
           position: absolute;
           width: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          top: calc(75px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          top: calc(90px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           left: 0;
           display: flex;
           flex-direction: column;
-          gap: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          > div {
+          align-items: center;
+          >img.splitter{
+            width: 100%;
+          }
+          > button {
             .button-common-style();
-            padding-left: 0.12em;
-            background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center center;
-            padding-top: calc(3px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            color: #b8ae7a;
           }
         }
         > div.group-title {
@@ -442,15 +464,15 @@ const OpenScene = () => {
         > .button-group {
           position: absolute;
           width: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          top: calc(232px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          top: calc(200px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           left: 0;
           display: flex;
           flex-direction: column;
           gap: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           > div {
             .button-common-style();
-            padding-left: 0.12em;
-            background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
+            color: #474747;
+            background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
             background-size: contain;
             background-repeat: no-repeat;
             background-position: center center;