📦 更改图片和样式

src/assets/scss/main.scss

@@ -3,6 +3,8 @@
 @use "./components.scss";
 @use "./news.scss";
 @use "./colors.scss" as *;
+@use "sass:list";
+@use "sass:math";
 
 body,
 html {
@@ -270,7 +272,90 @@ $small-banner-height: 445px;
   }
 }
 
-//
+//Card box
+
+.main-card-box {
+  position: relative;
+  min-height: 330px;
+  color: #fff;
+  margin-right: 24px;
+  overflow: hidden;
+  //transform: translateX(-50%);
+
+  .content {
+    position: absolute;
+    inset: 24px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+      font-family: SourceHanSerifCNBold;
+      font-size: 1.5rem;
+      margin: 0;
+      margin-bottom: 32px;
+    }
+    .descs {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      .box {
+        flex: 1 1 50%;
+        margin-bottom: 32px;
+        cursor: pointer;
+        color: #fff;
+        text-decoration: none;
+
+        h5 {
+          font-size: 1rem;
+          font-weight: normal;
+          margin: 0;
+        }
+        p {
+          font-family: Impact;
+          font-weight: normal;
+          font-size: 2.8rem;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  $background-types: (
+    type1: (url('@/assets/images/index/BoxPrinting2.png'), url('@/assets/images/index/Box3.jpg')),
+    type2: (url('@/assets/images/index/BoxPrinting1.png'), url('@/assets/images/index/Box1.png')),
+    type3: (url('@/assets/images/index/BoxPrinting4.png'), url('@/assets/images/index/Box2.jpg'))
+  );
+
+  @each $typeName, $type in $background-types {
+    &.#{$typeName} {
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: list.nth($type, 2);
+        z-index: 0;
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        right: -10px;
+        width: 180px;
+        height: 180px;
+        background-size: 180px;
+        background-image: list.nth($type, 1);
+        z-index: 1;
+      }
+    }
+  }
+
+  &.type3 .descs div {
+    flex-basis: 33%;
+    margin-bottom: 22px;
+  }
+}
 
 @media (max-width: 1280px) {
   .main-section {
@@ -333,6 +418,10 @@ $small-banner-height: 445px;
       flex-direction: column;
     }
   }
+  .main-card-box {
+    width: auto;
+    transform: translateX(20px);
+  }
 }
 @media (max-width: 500px) {
   .main-header-box {

src/pages/index.vue

@@ -399,88 +399,6 @@ const recordData = await useSSrSimpleDataLoader('record', async () => {
 @use "sass:math";
 @use '@/assets/scss/colors.scss' as *;
 
-.main-card-box {
-  position: relative;
-  min-height: 330px;
-  color: #fff;
-  margin-right: 24px;
-  overflow: hidden;
-  //transform: translateX(-50%);
-
-  .content {
-    position: absolute;
-    inset: 24px;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-
-    h4 {
-      font-family: SourceHanSerifCNBold;
-      font-size: 1.5rem;
-      margin: 0;
-      margin-bottom: 32px;
-    }
-    .descs {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      .box {
-        flex: 1 1 50%;
-        margin-bottom: 32px;
-        cursor: pointer;
-        color: #fff;
-        text-decoration: none;
-
-        h5 {
-          font-size: 1rem;
-          font-weight: normal;
-          margin: 0;
-        }
-        p {
-          font-family: Impact;
-          font-weight: normal;
-          font-size: 2.8rem;
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  $background-types: (
-    type1: (url('@/assets/images/index/BoxPrinting2.png'), url('@/assets/images/index/Box3.jpg')),
-    type2: (url('@/assets/images/index/BoxPrinting1.png'), url('@/assets/images/index/Box1.png')),
-    type3: (url('@/assets/images/index/BoxPrinting4.png'), url('@/assets/images/index/Box2.jpg'))
-  );
-
-  @each $typeName, $type in $background-types {
-    &.#{$typeName} {
-      &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-image: list.nth($type, 2);
-        z-index: 0;
-      }
-      &::before {
-        content: '';
-        position: absolute;
-        bottom: -10px;
-        right: -10px;
-        width: 180px;
-        height: 180px;
-        background-size: 180px;
-        background-image: list.nth($type, 1);
-        z-index: 1;
-      }
-    }
-  }
-
-  &.type3 .descs div {
-    flex-basis: 33%;
-    margin-bottom: 22px;
-  }
-}
 .main-introd {
   position: relative;
   height: 750px;
@@ -632,10 +550,6 @@ const recordData = await useSSrSimpleDataLoader('record', async () => {
       width: 100%;
     }
   }
-  .main-card-box {
-    width: auto;
-    transform: translateX(20px);
-  }
 }
 </style>
 

src/pages/introduction/book.vue

@@ -6,6 +6,7 @@
     :pageSize="8"
     :load="loadData"
     :loadDetail="loadDetail"
+    defaultImage="https://mncdn.wenlvti.net/app_static/minnan/BookDefaultImage.jpg"
   />
 </template>