布展详情模板完善

src/views/display/components/BlueStyle.vue

@@ -156,8 +156,8 @@
               <svg-icon icon-class="jianjie"></svg-icon>
               <span>展览简介</span>
             </div>
-            <div class="intro-content-container">
-              {{ displayDetail.intro }}
+            <div class="intro-content-container" v-html="displayDetail.intro">
+             
             </div>
           </div>
           <div
@@ -415,8 +415,6 @@ import Card from "@/views/personal/components/Card";
 import Video from "@/components/Video";
 import { previewFile } from "@/utils/index";
 import ChStyleUnit from "./ChStyleUnit.vue";
-import { swiper, swiperSlide } from "vue-awesome-swiper";
-import "swiper/dist/css/swiper.css";
 import MenuList from "@/components/MenuList";
 
 export default {
@@ -427,8 +425,6 @@ export default {
     Video,
     Card,
     ChStyleUnit,
-    swiper,
-    swiperSlide,
     MenuList,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
@@ -453,43 +449,8 @@ export default {
       dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
       dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
       page: null,
-      swiperOption: {
-        // autoplay: false,
-        effect: "fade",
-        pagination: {
-          el: ".swiper-pagination",
-          type: "custom",
-          clickable: true,
-          renderCustom: function (swiper, current, total) {
-            var customPaginationHtml = "";
-            for (var i = 0; i < total; i++) {
-              //判断哪个分页器此刻应该被激活
-              if (i == current - 1) {
-                customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
-              } else {
-                customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
-              }
-            }
-            return `<span id="page">` + customPaginationHtml + `</span>`;
-          },
-        },
-        on: {
-          click: function (e) {
-            let page = document.getElementById("page");
-            var item = e.target;
-            var lists = Array.from(page.querySelectorAll("img"));
-            let index = lists.indexOf(item);
-            vm.swiper.slideTo(index);
-          },
-        },
-      },
     };
   },
-  computed: {
-    swiper() {
-      return this.$refs.mySwiper.swiper;
-    },
-  },
   async mounted() {
     this.loadDetail();
   },
@@ -781,12 +742,13 @@ export default {
             .basic-info {
               .body-item {
                 display: flex;
+                align-items: center;
                 .label {
                   display: flex;
                   align-items: center;
                   width: 140px;
-                  margin-right: 26px;
-                  margin-bottom: 10px;
+                  // margin-right: 26px;
+                  // margin-bottom: 10px;
                   font-weight: bold;
                   color: #858585;
                   .svg-icon {

src/views/display/components/ChStyle-unit.vue

@@ -36,7 +36,7 @@
           <div class="unit-content">
             <div class="unit-title">{{ item.title }}</div>
 
-            <div class="unit-intro">{{ item.intro }}</div>
+            <div class="unit-intro" v-html="item.intro"></div>
           </div>
         </div>
         <div class="units-title">

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>
@@ -80,67 +69,40 @@
               </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"
-              >
-                {{ displayDetail.intro }}
+              <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">
@@ -154,16 +116,12 @@
             <div class="right">
               <a class="clearfix" @click="unitVisible = true">
                 <svg-icon icon-class="book"></svg-icon>
-                详情</a
-              >
+                详情
+              </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">
@@ -179,41 +137,18 @@
           </div>
         </div>
 
-        <div
-          class="lts-content"
-          v-if="
+        <div class="lts-content" v-if="
             displayDetail.literatureVo && displayDetail.literatureVo.length > 0
-          "
-        >
+          ">
           <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)">
@@ -226,36 +161,28 @@
         </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 "./ChStyle-unit.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 "./ChStyle-unit.vue";
+  import DetailDialog from "./detail-dialog.vue";
+  export default {
     components: {
       AudioPlayer,
       ReaderOperations,
@@ -456,30 +383,34 @@ export default {
         this.$emit("reload");
       },
     },
-};
+  };
 </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;
+
     .custom-title-prefix,
     .custom-title-suffix {
       width: 27px;
       height: 27px;
       margin: 15px;
+
       img {
         width: 100%;
         height: 100%;
       }
     }
+
     .custom-title-text {
       font-size: 40px;
       font-family: KaiTi;
@@ -487,15 +418,18 @@ export default {
       color: #0f0f0f;
       line-height: 114px;
     }
-}
-/**公共样式结束 */
+  }
+
+  /**公共样式结束 */
 
-/**样式开始 */
-.display-detail {
+  /**样式开始 */
+  .display-detail {
     overflow: hidden;
+
     .content {
       width: 100%;
       overflow: hidden;
+
       .content-item {
         width: 100%;
       }
@@ -508,14 +442,17 @@ export default {
         display: flex;
         justify-content: center;
         position: relative;
+
         .view-box {
           position: relative;
           width: 1200px;
+
           .slide-group {
             display: flex;
             position: absolute;
             height: 100%;
             transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
+
             /**保证能够最开始刚好有四格卡在中间*/
             // transform: translateX(-900px);
             .slide-item {
@@ -523,6 +460,7 @@ export default {
               height: 100%;
               position: relative;
               margin-right: 1px;
+
               img {
                 width: 300px;
                 height: 100%;
@@ -540,16 +478,19 @@ export default {
           width: 100%;
           height: 100%;
           justify-content: center;
+
           .center-img {
             width: 1200px;
             transform: translateY(-25px);
             position: relative;
             filter: drop-shadow(2px 4px 6px #f8f8f8);
+
             img {
               transform: translateX(-10px);
               width: 1230px;
             }
           }
+
           .left-layer,
           .right-layer {
             flex: 1;
@@ -572,6 +513,7 @@ export default {
           padding: 50px;
           position: relative;
           border: 1px solid #d3d3d37a;
+
           .title {
             font-size: 50px;
             font-family: KaiTi;
@@ -581,35 +523,43 @@ export default {
             display: flex;
             justify-content: space-between;
             align-items: center;
+
             .view-count {
               font-size: 18px;
               margin-top: 10px;
               color: #999;
               font-weight: normal;
+
               .svg-icon {
                 margin-right: 10px;
               }
             }
           }
+
           .desc-and-tools {
             display: flex;
             justify-content: space-between;
+
             .desc {
               display: flex;
+
               .item {
                 display: flex;
                 margin-right: 16px;
+
                 .label,
                 .value {
                   font-size: 18px;
                   color: #0f0f0f;
                   line-height: 36px;
                 }
+
                 .label {
                   margin-left: 8px;
                 }
               }
             }
+
             .tools {
               width: 280px;
             }
@@ -621,10 +571,13 @@ export default {
             border: 1px dashed #b1b0af;
             margin: 42px 0;
           }
+
           .intro-and-video {
             display: flex;
+
             .intro-container {
               flex: 1;
+
               .intro-title {
                 font-size: 40px;
                 font-family: KaiTi;
@@ -632,6 +585,7 @@ export default {
                 color: #0f0f0f;
                 margin-bottom: 43px;
                 position: relative;
+
                 &::after {
                   content: "";
                   display: inline-block;
@@ -643,6 +597,7 @@ export default {
                   bottom: -12px;
                 }
               }
+
               .intro-content {
                 font-size: 16px;
                 font-family: Microsoft YaHei;
@@ -653,6 +608,7 @@ export default {
                 margin-left: 8px;
               }
             }
+
             .videos {
               flex: 1;
               position: relative;
@@ -676,9 +632,11 @@ export default {
             align-items: center;
             background-color: #fff;
             transition: all 0.5s ease;
+
             &:hover {
               box-shadow: 0 0 14px rgb(0 0 0 / 40%);
             }
+
             img {
               width: 60px;
               height: 60px;
@@ -691,6 +649,7 @@ export default {
         0% {
           transform: rotateZ(0deg);
         }
+
         100% {
           transform: rotateZ(360deg);
         }
@@ -700,6 +659,7 @@ export default {
         0% {
           transform: rotateZ(0deg);
         }
+
         100% {
           transform: rotateZ(360deg);
         }
@@ -707,7 +667,8 @@ export default {
 
       .animation-play-paused {
         animation-play-state: paused;
-      -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+        -webkit-animation-play-state: paused;
+        /* Safari 和 Chrome */
       }
 
       /**展览单元 */
@@ -716,10 +677,12 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .units-content {
           ul {
             li {
               margin-bottom: 20px;
+
               .unit-title {
                 font-size: 36px;
                 font-family: KaiTi;
@@ -729,6 +692,7 @@ export default {
                 display: flex;
                 justify-content: center;
               }
+
               .unit-intro {
                 font-size: 16px;
                 font-family: Microsoft YaHei;
@@ -737,10 +701,13 @@ export default {
                 text-indent: 36px;
                 margin-bottom: 10px;
               }
+
               .unit-imgs {
                 width: 100%;
+
                 .img-item {
                   width: 100%;
+
                   img {
                     width: 100%;
                   }
@@ -750,6 +717,7 @@ export default {
           }
         }
       }
+
       /**关联文献 */
       .lts {
         // background-color: aquamarine;
@@ -757,6 +725,7 @@ export default {
         flex-direction: column;
         align-items: center;
         margin-top: 100px;
+
         .lts-content {
           display: flex;
           justify-content: center;
@@ -767,25 +736,30 @@ export default {
         }
       }
     }
-}
-.right {
+  }
+
+  .right {
     float: right;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
+
     a {
       font-size: 22px;
     }
+
     .clearfix {
       clear: both;
     }
+
     a:hover {
       cursor: pointer;
       color: #2069c4;
     }
-}
-.unit-detail-full {
+  }
+
+  .unit-detail-full {
     position: fixed;
     top: 0;
     left: 0;
@@ -793,27 +767,32 @@ export default {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 99;
-  > i {
+
+    >i {
       color: #fff;
       font-size: 24px;
       position: absolute;
       top: 20px;
       right: 20px;
       z-index: 10;
+
       &:hover {
         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">
-    <div class="units-content-item" v-for="(unit, index) in units" :key="index">
-      <div class="unit-title">{{ unit.title }}</div>
-      <div class="unit-intro">{{ unit.intro }}</div>
-      <div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
-        <div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
-          <img :src="$getFullUrl(i.pressUrl||i.url)" />
-        </div>
-      </div>
-      <ChStyleUnit
-        :units="unit.children"
-        v-if="unit.children && unit.children.length > 0"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ChStyleUnit",
-  props: {
-    units: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.units-content-item {
-  margin-bottom: 20px;
-  .unit-title {
-    font-size: 36px;
-    font-family: KaiTi;
-    font-weight: 400;
-    color: #4e392c;
-    line-height: 83px;
-    display: flex;
-    justify-content: center;
-  }
-  .unit-intro {
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #444444;
-    text-indent: 36px;
-    margin-bottom: 10px;
-    line-height: 32px;
-  }
-  .unit-imgs {
-    width: 100%;
-    .img-item {
-      width: 100%;
-      img {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>

src/views/display/components/RedStyle.vue

@@ -140,7 +140,7 @@
         <div class="wrapper">
           <div class="custom-title">展览简介</div>
           <div class="intro-content">
-            <div class="intro-content-container">{{ displayDetail.intro }}</div>
+            <div class="intro-content-container" v-html="displayDetail.intro"></div>
           </div>
           <div
             class="intro-video"
@@ -201,7 +201,7 @@
                   </div>
                   <div class="unit-name-intro" v-if="i == 0">
                     <div class="unit-name">{{ currentUnit.title }}</div>
-                    <div class="unit-intro">{{ currentUnit.intro }}</div>
+                    <div class="unit-intro" v-html="currentUnit.intro "></div>
                   </div>
                 </el-col>
               </el-row>

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].url}')`"></div>
           <p>
             <span class="title">{{ node.title }}</span>
             <span class="seq">{{ node.unit }}</span>
@@ -35,12 +24,12 @@
           </p>
         </div>
         <div class="article-content" v-else @click="handlePageChange(i)">
-          <div class="content-detail">{{ list[i - 1].intro }}</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">{{ list[list.length - 1].intro }}</div>
+          <div class="content-detail" v-html="list[list.length - 1].intro"></div>
         </div>
       </div>
     </div>
@@ -48,7 +37,7 @@
 </template>
 
 <script>
-export default {
+  export default {
     props: {
       data: {
         type: Array,
@@ -99,17 +88,18 @@ export default {
         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;
@@ -124,6 +114,7 @@ export default {
       box-shadow: 0px -5px 0 2px #8f712fdb;
     } */
     }
+
     .book-page {
       position: absolute;
       // width: 800px;
@@ -134,14 +125,17 @@ export default {
       transform-origin: 0 0;
       border-left: 2px solid #8f712fdb;
       box-shadow: 6px 6px 0 2px #8f712fdb;
+
       &.active {
         z-index: 1;
       }
+
       &.flipped {
         //   z-index: 1;
         transform: rotateY(-180deg);
       }
-    > div {
+
+      >div {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -149,6 +143,7 @@ export default {
         backface-visibility: hidden;
         background-color: #bfa277;
       }
+
       .book-cover {
         display: flex;
         justify-content: space-between;
@@ -157,7 +152,7 @@ export default {
         width: 100%;
         height: 100%;
 
-      > .img {
+        >.img {
           width: 600px;
           height: 400px;
           background-size: cover;
@@ -165,19 +160,23 @@ export default {
           background-position: 50% 50%;
           margin: 50px auto;
         }
-      > p {
+
+        >p {
           display: flex;
-        > span {
+
+          >span {
             display: block;
             text-align: center;
             font-size: 22px;
             font-weight: 600;
             font-family: "楷体";
             writing-mode: tb-rl;
+
             &.title {
               color: #850e0e;
               font-size: 30px;
             }
+
             &.seq {
               padding-bottom: 100px;
               margin-left: 20px;
@@ -185,31 +184,38 @@ export default {
           }
         }
       }
+
       .article-title {
         @extend .book-cover;
         transform: rotateY(180deg);
-      > .img {
+
+        >.img {
           border-radius: 10px;
         }
       }
+
       .article-big-title {
         display: flex;
         justify-content: center;
         align-items: center;
         transform: rotateY(180deg);
-      > p {
+
+        >p {
           font-size: 36px;
           text-align: center;
           font-family: "华文行楷";
-        > span {
+
+          >span {
             display: block;
             margin: 20px;
+
             &.title {
               color: #fff2b3;
             }
           }
         }
       }
+
       .article-content {
         width: 100%;
         height: 100%;
@@ -221,5 +227,5 @@ export default {
         text-indent: 32px;
       }
     }
-}
+  }
 </style>
\ No newline at end of file