优化中国风主题

src/views/display/components/ChStyle.vue

 <template>
   <div class="display-detail">
     <div class="content" id="content">
-      <div class="
+      <div
+        class="
           content-item
           sliders
           wow
           animate__animated animate__fadeInRightBig
-        " ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0">
+        "
+        ref="imgs"
+        v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
+       
+      >
         <div class="view-box">
-          <div class="slide-group" :style="{
+          <div
+            class="slide-group"
+            :style="{
               width: sildeGroupWidth,
               left: slideGroupleft + 'px',
-            }">
-            <div class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
+            }"
+          >
+            <div
+              class="slide-item"
+              v-for="(item, index) in displayDetail.imagesVo"
+              :key="index"
+            >
               <img :src="$getFullUrl(item.pressUrl || item.url)" alt="" />
               <div class="modal"></div>
             </div>
@@ -57,9 +69,7 @@
                 <el-col class="item" v-if="dicts.displayCharacter">
                   <div class="label">展览性质：</div>
                   <div class="value">
-                    {{
-                    dicts.displayCharacter[displayDetail.displayCharacter]
-                    }}
+                    {{ dicts.displayCharacter[displayDetail.displayCharacter] }}
                   </div>
                 </el-col>
                 <el-col class="item">
@@ -69,40 +79,66 @@
               </el-row>
             </div>
             <div class="tools wow animate__animated animate__fadeIn">
-              <ReaderOperations :loveCount="displayDetail.loveCount"
-                :loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount"
-                :collectCountStatus="Boolean(displayDetail.collectCountStatus)" :sourceId="displayDetail.exhibitionId"
-                :title="displayDetail.title" :sourceType="'biz_exhibition'" @reload="reload" :selectColor="'#892325'" />
+              <ReaderOperations
+                :loveCount="displayDetail.loveCount"
+                :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
+                :collectCount="displayDetail.collectCount"
+                :collectCountStatus="Boolean(displayDetail.collectCountStatus)"
+                :sourceId="displayDetail.exhibitionId"
+                :title="displayDetail.title"
+                :sourceType="'biz_exhibition'"
+                @reload="reload"
+                :selectColor="'#892325'"
+              />
             </div>
           </div>
           <div class="divider"></div>
           <div class="intro-and-video">
             <div class="intro-container">
-              <div class="intro-title wow animate__animated animate__fadeInLeft">
+              <div
+                class="intro-title wow animate__animated animate__fadeInLeft"
+              >
                 展览简介
               </div>
-              <div class="intro-content wow animate__animated animate__fadeInLeft" v-html="displayDetail.intro">
-
-              </div>
+              <div
+                class="intro-content wow animate__animated animate__fadeInLeft"
+                v-html="displayDetail.intro"
+              ></div>
             </div>
-            <div v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
-              class="videos wow animate__animated animate__fadeInRight">
+            <div
+              v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
+              class="videos wow animate__animated animate__fadeInRight"
+            >
               <el-carousel>
-                <el-carousel-item v-for="item in displayDetail.videosVo" :key="item.fileId">
+                <el-carousel-item
+                  v-for="item in displayDetail.videosVo"
+                  :key="item.fileId"
+                >
                   <Video :url="$getFullUrl(item.url)" />
                 </el-carousel-item>
               </el-carousel>
             </div>
           </div>
-          <div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
-            @click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0">
+          <div
+            class="audio"
+            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
+            @click="handleClickAudio"
+            v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
+          >
             <!-- <svg-icon icon-class="music"></svg-icon> -->
             <img src="@/assets/imgs/display/normal/music-red.png" alt="" />
-            <AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
+            <AudioPlayer
+              style="display: none"
+              :url="$getFullUrl(displayDetail.audiosVo[0].url)"
+              ref="AudioPlayer"
+            />
           </div>
         </div>
       </div>
-      <div class="content-item units" v-if="displayDetail.exhibitionUnits.length > 0">
+      <div
+        class="content-item units"
+        v-if="displayDetail.exhibitionUnits.length > 0"
+      >
         <div class="wrapper">
           <div class="custom-title wow animate__animated animate__fadeInLeft">
             <div class="custom-title-prefix">
@@ -116,15 +152,24 @@
             <div class="right">
               <a class="clearfix" @click="unitVisible = true">
                 <svg-icon icon-class="book"></svg-icon>
-                详情
+                翻页模式
               </a>
             </div>
           </div>
 
-          <ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" />
+          <ChStyleUnit
+            :units="node"
+            v-for="node in displayDetail.exhibitionUnits"
+            :key="node.euId"
+          />
         </div>
       </div>
-      <div class="content-item lts">
+      <div
+        class="content-item lts"
+        v-if="
+          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
+        "
+      >
         <div class="wrapper">
           <div class="custom-title wow animate__animated animate__fadeInUp">
             <div class="custom-title-prefix">
@@ -137,18 +182,36 @@
           </div>
         </div>
 
-        <div class="lts-content" v-if="
-            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
-          ">
+        <div class="lts-content">
           <div class="wrapper wow animate__animated animate__fadeInUp">
-            <el-table :data="displayDetail.literatureVo" :header-cell-style="{
+            <el-table
+              :data="displayDetail.literatureVo"
+              :header-cell-style="{
                 background: '#eeeeee',
                 color: '#333',
-              }" :row-style="tableRowStyle">
-              <el-table-column prop="name" label="名称" align="center"></el-table-column>
-              <el-table-column prop="authors" label="作者" align="center"></el-table-column>
-              <el-table-column prop="date" label="出版时间" align="center"></el-table-column>
-              <el-table-column align="center" prop="source" label="出版所在刊物"></el-table-column>
+              }"
+              :row-style="tableRowStyle"
+            >
+              <el-table-column
+                prop="name"
+                label="名称"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="authors"
+                label="作者"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="date"
+                label="出版时间"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="source"
+                label="出版所在刊物"
+              ></el-table-column>
               <el-table-column label="阅读" align="center">
                 <template slot-scope="scope">
                   <div class="pdf-img" @click="handleViewLt(scope.row)">
@@ -161,28 +224,36 @@
         </div>
       </div>
     </div>
-    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
     <div class="unit-detail-full" v-if="unitVisible">
       <i class="el-icon-close" @click="unitVisible = false"></i>
       <transition name="el-fade-in-linear">
-        <detail-dialog :data="displayDetail.exhibitionUnits" :title="displayDetail.title"
-          :img="displayDetail.faceImageUrl" v-if="unitVisible"></detail-dialog>
+        <detail-dialog
+          :data="displayDetail.exhibitionUnits"
+          :title="displayDetail.title"
+          :img="displayDetail.faceImageUrl"
+          v-if="unitVisible"
+        ></detail-dialog>
       </transition>
     </div>
   </div>
 </template>
 
 <script>
-  import AudioPlayer from "@/components/AudioPlayer";
-  import ReaderOperations from "@/components/ReaderOperations";
-  import Card from "@/views/personal/components/Card";
-  import Video from "@/components/Video";
-  import MenuList from "@/components/MenuList";
-  import { previewFile } from "@/utils/index";
-  // import ChStyleUnit from "./ChStyleUnit.vue";
-  import ChStyleUnit from "./ChStyleUnit.vue";
-  import DetailDialog from "./detail-dialog.vue";
-  export default {
+import AudioPlayer from "@/components/AudioPlayer";
+import ReaderOperations from "@/components/ReaderOperations";
+import Card from "@/views/personal/components/Card";
+import Video from "@/components/Video";
+import MenuList from "@/components/MenuList";
+import { previewFile } from "@/utils/index";
+// import ChStyleUnit from "./ChStyleUnit.vue";
+import ChStyleUnit from "./ChStyleUnit.vue";
+import DetailDialog from "./detail-dialog.vue";
+export default {
   components: {
     AudioPlayer,
     ReaderOperations,
@@ -220,6 +291,7 @@
   },
   async mounted() {
     this.loadDetail();
+
   },
   destroyed() {
     //同时在destroyed回调中移除监听：
@@ -246,8 +318,8 @@
         this.loadWidth();
 
         if (
-            this.displayDetail.videosVo &&
-            this.displayDetail.videosVo.length > 0
+          this.displayDetail.audiosVo &&
+          this.displayDetail.audiosVo.length > 0
         ) {
           this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
           this.$refs.AudioPlayer.play();
@@ -288,6 +360,7 @@
         addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
       }
     },
+
     firefoxListenFun(e) {
       var obj = e.target;
       var onmousewheel;
@@ -382,19 +455,23 @@
     reload() {
       this.$emit("reload");
     },
+
+    handleMouseEnter(e) {
+      console.log(e);
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  // 中国风主题样式
-  /**公共样式开始 */
-  .wrapper {
+// 中国风主题样式
+/**公共样式开始 */
+.wrapper {
   // width: 1200px;
   width: calc(100% - 26%); //左右两边各自留13%
-  }
+}
 
-  .custom-title {
+.custom-title {
   display: flex;
   align-items: center;
   position: relative;
@@ -418,14 +495,14 @@
     color: #0f0f0f;
     line-height: 114px;
   }
-  }
+}
 
-  /**公共样式结束 */
+/**公共样式结束 */
 
-  /**样式开始 */
-  .display-detail {
+/**样式开始 */
+.display-detail {
   overflow: hidden;
-
+  padding-bottom: 60px;
   .content {
     width: 100%;
     overflow: hidden;
@@ -515,7 +592,7 @@
         border: 1px solid #d3d3d37a;
 
         .title {
-            font-size: 50px;
+          font-size: 40px;
           font-family: KaiTi;
           font-weight: bold;
           color: #0f0f0f;
@@ -561,7 +638,7 @@
           }
 
           .tools {
-              width: 280px;
+            width: 300px;
           }
         }
 
@@ -736,9 +813,9 @@
       }
     }
   }
-  }
+}
 
-  .right {
+.right {
   float: right;
   position: absolute;
   right: 0;
@@ -757,9 +834,9 @@
     cursor: pointer;
     color: #2069c4;
   }
-  }
+}
 
-  .unit-detail-full {
+.unit-detail-full {
   position: fixed;
   top: 0;
   left: 0;
@@ -768,7 +845,7 @@
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 99;
 
-    >i {
+  > i {
     color: #fff;
     font-size: 24px;
     position: absolute;
@@ -780,19 +857,19 @@
       cursor: pointer;
     }
   }
-  }
+}
 
-  ::v-deep .el-carousel {
+::v-deep .el-carousel {
   height: 100%;
-  }
+}
 
-  ::v-deep .el-carousel__container {
+::v-deep .el-carousel__container {
   height: 100%;
-  }
+}
 
-  ::v-deep .el-carousel__item--card {
+::v-deep .el-carousel__item--card {
   width: 100%;
   height: 100%;
   transform: translateX(0) scale(1) !important;
-  }
+}
 </style>
\ No newline at end of file

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