优化中国风主题

src/views/display/components/ChStyleUnit.vue

 <template>
   <div class="units-content">
     <p>{{ units.title }}</p>
-    <ul>
+    <div class="units-content-intro" v-html="units.intro">
+    </div>
+    <ul v-if="units.children && units.children.length > 0">
       <li
         v-for="(item, index) in units.children"
         :key="index"
@@ -30,7 +32,12 @@
               class="img-item"
               v-if="item.imagesVo && item.imagesVo.length > 0"
             >
-              <img :src="$getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)" alt="" />
+              <img
+                :src="
+                  $getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)
+                "
+                alt=""
+              />
             </div>
           </div>
           <div class="unit-content">
@@ -41,7 +48,8 @@
         </div>
         <div class="units-title">
           <p>
-            <span v-html="changeTitle(item.title)"></span>
+            <!-- <span v-html="changeTitle(item.title)"></span> -->
+            <span v-html="item.title" style="writing-mode: vertical-rl;"></span>
           </p>
           <span></span>
         </div>
@@ -79,16 +87,28 @@ export default {
 
 <style lang="scss" scoped>
 .units-content {
+  margin: 100px 0;
   > p {
     font-size: 32px;
     font-weight: 600;
     text-align: center;
-    font-family: "华文行楷";
+    font-family: "KaiTi";
+    margin-bottom: 60px;
+  }
+  .units-content-intro{
+    font-size: 16px;
+    color: #333;
+    text-indent: 32px;
+    line-height: 2.5;
   }
   ul {
     display: flex;
     flex-wrap: nowrap;
     overflow: auto;
+    border: 3px solid rgb(139 123 90);
+    box-shadow: 9px 20px 10px rgb(0 0 0 / 30%);
+    height: 660px;
+    
     li {
       // margin-bottom: 20px;
       width: calc(var(--i) * 100%);
@@ -96,11 +116,13 @@ export default {
       overflow: hidden;
       // flex-shrink: 0;
       position: relative;
+      height: 100%;
       &.active {
         width: 100%;
         flex-shrink: 0;
 
         > .unit-node {
+          width: 100%;
           filter: none;
           /* > .unit-imgs {
                   width: 100%;
@@ -130,20 +152,23 @@ export default {
         line-height: 83px;
         display: flex;
         justify-content: center;
+        width: 76%;
+        line-height: 1.2;
       }
       .unit-intro {
         font-size: 16px;
         font-family: Microsoft YaHei;
         font-weight: 400;
-        // color: #444444;
-        color: #e2e2e2;
+        color: #333;
+        // color: #e2e2e2;
         text-indent: 36px;
         // margin-bottom: 10px;
         // margin-top: 20px;
         line-height: 1.8;
       }
       .unit-imgs {
-        width: 100%;
+        // width: 100%;
+        width: 50%;
         // width: 500px;
         height: 100%;
         flex-shrink: 0;
@@ -153,10 +178,11 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          // height: 100%;
+          height: 100%;
           img {
             width: 100%;
-            // height: 100%;
+            height: 100%;
+            object-fit: cover;
             transition: 0.6s;
           }
         }
@@ -164,7 +190,8 @@ export default {
       .unit-node {
         width: 1200px;
         // width: calc(100vw - 26%);
-        height: 550px;
+        // width: 100%;
+        height: 100%;
         display: flex;
         overflow: hidden;
         transition: 0.6s;
@@ -181,12 +208,17 @@ export default {
           right: 0;
           width: 50%;
           height: 100%;
+
+          // background-image: linear-gradient(
+          //   to right,
+          //   rgba(0, 0, 0, 0) 0%,
+          //   rgba(0, 0, 0, 0.7) 40%
+          // );
           background-image: linear-gradient(
             to right,
-            rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 0.7) 40%
+            rgba(171, 147, 94, 0.3) 0%,
+            rgba(171, 147, 94, 0.7) 40%
           );
-
           > .unit-title {
             position: absolute;
             top: 100px;
@@ -209,16 +241,23 @@ export default {
         height: 100%;
         transition: 0.6s;
         > p {
-          color: #fff;
+          // color: #6e4e06;
+          color: #000;
           position: absolute;
           left: 0;
           top: 0;
           margin: 0;
           font-size: 28px;
           font-family: "楷体";
-          padding: 16px;
+          padding: 46px 16px;
           height: calc(100% - 32px);
-          box-shadow: 10px 0px 21px 0 #9b7e3f inset;
+          // box-shadow: 40px 0px 40px 0 #9b7e3f inset;
+          box-shadow: #9b7e3f 44px 24px 57px 10px inset;;
+          // background-color: rgba(155, 126, 63, 0.8);
+          background-color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
       }
     }

src/views/display/components/detail-dialog.vue

 <template>
   <div class="detail-book">
     <div v-if="list.length > 0">
-      <div class="book-page" v-for="(node, i) in list" :key="i"
-        :class="{ active: i === activePage, flipped: i < activePage }">
-        <div class="article-title" @click="handlePageChange(i, true)" v-if="node.imagesVo[0]">
-          <div class="img" :style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"></div>
+      <div
+        class="book-page"
+        v-for="(node, i) in list"
+        :key="i"
+        :class="{ active: i === activePage, flipped: i < activePage }"
+      >
+        <div
+          class="article-title"
+          @click="handlePageChange(i, true)"
+          v-if="node.imagesVo[0]"
+        >
+          <div
+            class="img"
+            :style="`background-image: url('${
+              node.imagesVo[0] && node.imagesVo[0].pressUrl
+            }')`"
+          ></div>
           <p>
             <span class="title">{{ node.title }}</span>
             <span class="seq">{{ node.unit }}</span>
           </p>
         </div>
-        <div class="article-big-title" v-else @click="handlePageChange(i, true)">
+        <div
+          class="article-big-title"
+          v-else
+          @click="handlePageChange(i, true)"
+        >
+          <!-- <div class="page-button prev">上一页</div> -->
           <p>
             <span class="seq">{{ node.unit }}</span>
             <span class="title">{{ node.title }}</span>
           </p>
         </div>
         <div class="book-cover" v-if="i === 0" @click="handlePageChange(i)">
-          <div class="img" :style="`background-image: url('${img}')`">
-          </div>
+          <div class="img" :style="`background-image: url('${img}')`"></div>
           <p>
             <span>{{ title }}</span>
           </p>
         </div>
         <div class="article-content" v-else @click="handlePageChange(i)">
-          <div class="content-detail" v-html="list[i - 1].intro "></div>
+          <!-- <div class="page-button next">下一页</div> -->
+          <div class="content-detail" v-html="list[i - 1].intro"></div>
         </div>
       </div>
       <div class="book-page">
         <div class="article-content">
-          <div class="content-detail" v-html="list[list.length - 1].intro"></div>
+          <div
+            class="content-detail"
+            v-html="list[list.length - 1].intro"
+          ></div>
         </div>
       </div>
     </div>
@@ -37,7 +58,7 @@
 </template>
 
 <script>
-  export default {
+export default {
   props: {
     data: {
       type: Array,
@@ -87,23 +108,23 @@
       return list;
     },
   },
-  };
+};
 </script>
 
 <style lang="scss" scoped>
-  .detail-book {
+.detail-book {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 800px;
   perspective: 1000px;
 
-    >div {
+  > div {
     // position: absolute;
     position: absolute;
     // width: 800px;
     width: 48%;
-      height: 600px;
+    height: 70vh;
     top: 50%;
     left: 50%;
     transform: translate(0%, -50%);
@@ -134,7 +155,7 @@
       transform: rotateY(-180deg);
     }
 
-      >div {
+    > div {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -147,23 +168,25 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-        padding: 30px;
+      padding: 40px 30px;
       width: 100%;
       height: 100%;
 
-        >.img {
-          width: 600px;
-          height: 400px;
+      > .img {
+        // width: 600px;
+        // height: 400px;
+        width: 80%;
+        height: 80%;
         background-size: cover;
         background-repeat: no-repeat;
         background-position: 50% 50%;
         margin: 50px auto;
       }
 
-        >p {
+      > p {
         display: flex;
 
-          >span {
+        > span {
           display: block;
           text-align: center;
           font-size: 22px;
@@ -188,8 +211,8 @@
       @extend .book-cover;
       transform: rotateY(180deg);
 
-        >.img {
-          border-radius: 10px;
+      > .img {
+        // border-radius: 10px;
       }
     }
 
@@ -198,13 +221,13 @@
       justify-content: center;
       align-items: center;
       transform: rotateY(180deg);
-
-        >p {
+      // position: relative;
+      > p {
         font-size: 36px;
         text-align: center;
         font-family: "华文行楷";
 
-          >span {
+        > span {
           display: block;
           margin: 20px;
 
@@ -224,7 +247,29 @@
       font-weight: 600;
       font-family: "仿宋";
       text-indent: 32px;
+      overflow-y: auto;
+      .content-detail {
+        font-size: 20px;
       }
     }
   }
+}
+
+.page-button {
+  font-size: 24px;
+  padding: 10px 20px;
+  border-radius: 30px;
+  border: 1px solid #fff2b3;
+  color: #fff2b3;
+  cursor: pointer;
+  position: relative;
+}
+.prev {
+  left: -7vw;
+  bottom: -29vh;
+}
+.next {
+  right: -7vw;
+  bottom: -29vh;
+}
 </style>
\ No newline at end of file