绘画列表页 样式优化

src/App.vue

@@ -41,7 +41,7 @@ const store = useStore()
 
 <style lang="less">
 html, body {
-  overscroll-behavior: none;
+  // overscroll-behavior: none;
   overflow: hidden;
   height: 100%;
 }

src/views/PaintingListMenu.vue

@@ -12,13 +12,19 @@
       >
         <div
           class="cover"
+          :style="{
+            backgroundImage: `url(${ageRenderInfo[ageName].coverBg})`,
+          }"
           @click="onClickAge(ageName)"
         >
-          <div class="age">
-            {{ ageName }}
-          </div>
+          <img
+            class="age"
+            :src="ageRenderInfo[ageName].artFontImg"
+            alt=""
+            draggable="false"
+          >
           <div class="age-en">
-            {{ `${ageCnToEn[ageName]} dynasty` }}
+            {{ `${ageRenderInfo[ageName].En} dynasty` }}
           </div>
           <div class="author-list">
             {{ getAuthorList(paintingGroup).join('\\') }}
@@ -38,8 +44,15 @@
             v-if="ageName === '宋'"
             class="special-desc"
           >
-            <!-- <img class="logo" src="@/assets/images/" alt="" draggable="false"> -->
-            <p>{{ specialDesc }}</p>
+            <img
+              class="title"
+              src="@/assets/images/painting-menu-special-content-title.png"
+              alt=""
+              draggable="false"
+            >
+            <p class="desc">
+              {{ specialDesc }}
+            </p>
             <button class="see-more" />
           </div>
           <div
@@ -48,7 +61,18 @@
             class="painting-item"
           >
             <div class="top-wrap">
-              <div class="author">
+              <div
+                class="author"
+                :class="{
+                  long: item['作者'].length >= 6,
+                }"
+              >
+                <img
+                  class="bg"
+                  src="@/assets/images/decoration-sun.png"
+                  alt=""
+                  draggable="false"
+                >
                 {{ item['作者'] }}
               </div>
               <div class="title">
@@ -129,11 +153,27 @@ for (const painting of configExcel['画作']) {
   }
   menuInfo[painting['朝代']].push(painting)
 }
-const ageCnToEn = {
-  '宋': 'Song',
-  '元': 'Yuan',
-  '明': 'Ming',
-  '清': 'Qing',
+const ageRenderInfo = {
+  '宋': {
+    En: 'Song',
+    artFontImg: require(`@/assets/images/painting-menu-item-title-song.png`),
+    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-song.png`),
+  },
+  '元': {
+    En: 'Yuan',
+    artFontImg: require(`@/assets/images/painting-menu-item-title-yuan.png`),
+    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-yuan.png`),
+  },
+  '明': {
+    En: 'Ming',
+    artFontImg: require(`@/assets/images/painting-menu-item-title-ming.png`),
+    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-ming.png`),
+  },
+  '清': {
+    En: 'Qing',
+    artFontImg: require(`@/assets/images/painting-menu-item-title-qing.png`),
+    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-qing.png`),
+  },
 }
 function getAuthorList(paintingGroup) {
   const temp = paintingGroup.map((item) => {
@@ -167,7 +207,7 @@ function onClickAge(ageName) {
     expandedAgeNameList.value.add(ageName)
   }
 }
-const specialDesc = configExcel['其他'][3]['修篁树石图'][1]['作品简介'].split('\n')[0]
+const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介'].split('\n')[0]
 
 const isShowOperationTip = ref(true)
 watch(menuElScrollLeft, (v) => {
@@ -201,20 +241,20 @@ watch(menuElScrollLeft, (v) => {
       align-items: center;
       >.cover{
         flex: 0 0 auto;
-        height: 100%;
+        height: calc(534 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-right: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         writing-mode: vertical-lr;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
         >.age{
-          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: KingHwa_OldSong, KingHwa_OldSong;
-          font-weight: 400;
-          font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          color: #fff;
-          line-height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-top: calc(171 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
         >.age-en{
-          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: KingHwa_OldSong, KingHwa_OldSong;
           font-weight: 400;
           font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -222,7 +262,7 @@ watch(menuElScrollLeft, (v) => {
           line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
         >.author-list{
-          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: KaiTi, KaiTi;
           font-weight: 400;
           font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -244,17 +284,42 @@ watch(menuElScrollLeft, (v) => {
         transition: width 1s;
         overflow: hidden;
         display: flex;
+        align-items: flex-end;
+        padding-bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-color: #f9f7f2;
         height: 100%;
         >.special-desc{
           flex: 0 0 auto;
-          >img.logo{
-
+          width: calc(v-bind('specialDescWidthWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          >img.title{
+            flex: 0 0 auto;
+            width: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            margin-right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
-          >p{
-
+          >p.desc{
+            writing-mode: vertical-lr;
+            font-family: KaiTi, KaiTi;
+            font-weight: 400;
+            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            color: #476446;
+            line-height: 2;
+            text-align: justified;
+            height: calc(552 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            letter-spacing: 0.15em;
           }
           >button.see-more{
+            width: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(94 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            background-image: url(@/assets/images/see-more-btn.png);
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center center;
+            margin-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            transform: translateY(180%);
 
           }
         }
@@ -269,11 +334,11 @@ watch(menuElScrollLeft, (v) => {
           flex-direction: column;
           align-items: center;
           >.top-wrap{
-            height: 0;
-            width: 0;
-            margin-top: calc(297 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             margin-bottom: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             >.author{
               writing-mode: vertical-lr;
               font-family: KingHwa_OldSong, KingHwa_OldSong;
@@ -281,9 +346,22 @@ watch(menuElScrollLeft, (v) => {
               font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
               color: #474747;
               white-space: pre;
-              position: absolute;
-              right: 0;
-              bottom: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              transform: translateY(-50%);
+              margin-right: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              position: relative;
+              letter-spacing: 0.3em;
+              >img.bg{
+                width: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translate(-34%, 9%);
+                z-index: -1;
+              }
+            }
+            >.author.long{
+              transform: initial;
+              letter-spacing: initial;
             }
             >.title{
               writing-mode: vertical-lr;
@@ -292,9 +370,8 @@ watch(menuElScrollLeft, (v) => {
               font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
               color: #474747;
               white-space: pre;
-              position: absolute;
-              left: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              bottom: 0;
+              margin-right: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              letter-spacing: 0.2em;
             }
             >.type{
               writing-mode: vertical-lr;
@@ -303,9 +380,7 @@ watch(menuElScrollLeft, (v) => {
               font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
               color: #474747;
               white-space: pre;
-              position: absolute;
-              left: calc(31 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              letter-spacing: 0.2em;
             }
           }
           >.img-wrap{