优化中国风主题

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;
         }
       }
     }