style: 修改十里红妆样式

src/stores/types.ts

@@ -16,12 +16,21 @@ export interface IList {
   labelBgPath: string
   info: string
   infoColor: string
-  list: {
-    id: number
-    imgs: string[]
-    title: string
-    author?: string
-    subtitle: string
-    content: string
+  list: IItem[]
+  subLabelColor?: string
+  sub?: {
+    label: string
+    labelCSS?: string
+    preface: string
+    list: IItem[]
   }[]
 }
+
+export interface IItem {
+  id: number
+  imgs: string[]
+  title: string
+  author?: string
+  subtitle: string
+  content: string
+}

src/views/Birds/index.scss

@@ -174,7 +174,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
+    margin: 0 auto 20px;
     padding: 46px 46px 0;
     width: 680px;
     height: 560px;

src/views/Wedding/index.scss

@@ -3,10 +3,39 @@
   --van-tab-active-text-color: #ffe6b6;
   --van-tab-font-size: 34px;
   --van-tabs-line-height: 112px;
-  --van-padding-sm: 52px;
+  --van-padding-sm: 56px;
   --van-padding-xs: 38px;
   --van-tabs-nav-background: #fff6e4;
 
+  .slhz {
+    margin-top: -20px;
+    padding: 0 60px;
+
+    img {
+      width: 100%;
+    }
+    p {
+      padding: 18px 0 28px;
+      font-size: 24px;
+      color: #4f6763;
+      text-align: center;
+    }
+  }
+  .slhzdcs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 500px;
+    }
+    p {
+      padding: 18px 0 46px;
+      font-size: 24px;
+      text-align: center;
+      color: #4f6763;
+    }
+  }
   &__bg {
     position: absolute;
     top: 0;
@@ -148,7 +177,12 @@
     display: block;
     width: 219px;
     margin: 0 auto;
-    padding: 80px 0 45px;
+    padding: 80px 0 100px;
+
+    &.label {
+      padding-bottom: 0px;
+      width: 618px;
+    }
   }
   &__preface {
     color: #7f0007;
@@ -165,6 +199,33 @@
     line-height: 50px;
     text-indent: 2em;
   }
+  &-class {
+    .wedding-cards {
+      padding-bottom: 60px;
+    }
+    &__title {
+      position: relative;
+      padding: 30px 54px 40px;
+
+      p {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -6px 0 0 4px;
+        max-width: 80px;
+        font-size: 36px;
+        line-height: 36px;
+        transform: translate(-50%, -50%);
+      }
+      img {
+        width: 100%;
+      }
+    }
+    > p {
+      padding: 0 70px 40px;
+      text-indent: 2em;
+    }
+  }
   &-cards {
     padding: 0 25px 20px;
   }
@@ -213,6 +274,24 @@
   .van-tab {
     z-index: 2;
 
+    &--active {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 25px;
+        left: 0;
+        width: 180px;
+        height: 64px;
+        z-index: -1;
+        background: url('@/assets/images/wedding/btn_select@2x-min.png') no-repeat center / contain;
+      }
+    }
+    &:not(:first-child):not(:nth-child(6)).van-tab--active::after {
+      left: 40px;
+      width: 314px;
+      height: 64px;
+      background-image: url('@/assets/images/wedding/btn_select_long@2x-min.png');
+    }
     &__panel {
       position: relative;
       padding: 0 30px;
@@ -227,21 +306,22 @@
   }
   .van-tabs {
     &__line {
-      bottom: 52px;
-      width: 180px;
-      height: 64px;
-      background: none;
-      border: none;
+      display: none;
+      // bottom: 52px;
+      // width: 180px;
+      // height: 64px;
+      // background: none;
+      // border: none;
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: url('@/assets/images/wedding/btn_select@2x-min.png') no-repeat center / contain;
-      }
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   top: 0;
+      //   left: 0;
+      //   width: 100%;
+      //   height: 100%;
+      //   background: url('@/assets/images/wedding/btn_select@2x-min.png') no-repeat center / contain;
+      // }
     }
   }
 }

src/views/Wedding/index.vue

@@ -9,14 +9,19 @@
       <div class="wedding__bg b0" :style="{ background: '#FFF6E4' }" />
     </van-tab>
 
-    <van-tab v-for="item in model.list" :title="item.label" :key="item.id" :name="item.id">
-      <img class="wedding__title" :src="item.labelImg" />
+    <van-tab v-for="(item, idx) in model.list" :title="item.label" :key="item.id" :name="item.id">
+      <img class="wedding__title label" :src="item.labelImg" />
 
       <div v-if="item.info" class="wedding__info">
         <p :style="{ color: item.infoColor }" v-html="item.info" />
       </div>
 
-      <div class="wedding-cards">
+      <div v-if="item.id === 2" class="slhz">
+        <img src="@/assets/images/wedding/1.jpeg" />
+        <p>【十里红妆老照片】</p>
+      </div>
+
+      <div v-if="item.list.length" class="wedding-cards">
         <div
           v-for="subItem in item.list"
           :key="subItem.id"
@@ -30,6 +35,48 @@
         </div>
       </div>
 
+      <template v-if="item.sub">
+        <div v-for="(subItem, subIdx) in item.sub" :key="subItem.label" class="wedding-class">
+          <div
+            class="wedding-class__title"
+            :style="{ color: item.subLabelColor || item.infoColor }"
+          >
+            <p :style="subItem.labelCSS">{{ subItem.label }}</p>
+            <img :src="`./shilihz/label0${idx + 1}@2x-min.png`" />
+          </div>
+
+          <p :style="{ color: item.infoColor }" v-html="subItem.preface" />
+
+          <div v-if="item.id === 2 && subIdx === 0" class="slhzdcs">
+            <img src="@/assets/images/wedding/2.jpeg" />
+            <p>【南宋高宗】</p>
+
+            <img src="@/assets/images/wedding/3.jpeg" />
+            <p>【清末新娘】</p>
+          </div>
+
+          <div v-if="subItem.list.length" class="wedding-cards">
+            <div
+              v-for="ssItem in subItem.list"
+              :key="ssItem.id"
+              class="wedding-card"
+              @click="handleCard(item.id, ssItem.id)"
+            >
+              <div class="wedding-card__img">
+                <van-image
+                  lazy-load
+                  fit="contain"
+                  width="100%"
+                  height="100%"
+                  :src="ssItem.imgs[0]"
+                />
+              </div>
+              <p class="wedding-card__title limit-line">{{ ssItem.title }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+
       <div v-if="item.bgColor" :class="['wedding__bg', `b${item.id}`]">
         <div :style="{ background: item.bgColor }" />
       </div>

src/wedding.vue

@@ -40,6 +40,9 @@ const back = () => {
 <style lang="scss">
 @import '@/assets/base.scss';
 
+#app {
+  overflow: hidden;
+}
 .van-floating-bubble {
   --van-floating-bubble-size: 116px;
   --van-floating-bubble-border-radius: 0;