修复单元title箭头覆盖在内容上导致看不清箭头的问题

src/views/display/components/BlueStyle.vue

@@ -20,20 +20,12 @@
         <!-- 展览基本信息 -->
         <div class="content-item display-detail_basic_info">
           <div class="info-container">
-            <div
-              v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
-              class="info-container-left"
-            >
-              <SlideImage
-                :imgList="displayDetail.imagesVo"
-                v-if="
+            <div v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" class="info-container-left">
+              <SlideImage :imgList="displayDetail.imagesVo" v-if="
                 displayDetail.imagesVo && displayDetail.imagesVo.length > 0
-                "
-              />
-              <SlideImage
-                :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
-                v-else-if="displayDetail.faceImagePressUrl"
-              />
+              " />
+              <SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
+                v-else-if="displayDetail.faceImagePressUrl" />
             </div>
             <div class="info-container-right">
               <div class="info-title">
@@ -50,8 +42,8 @@
                     <div class="body-item">
                       <span class="label">
                         <!-- <svg-icon icon-class="keyword"></svg-icon> -->
-                        关键词：</span
-                      >
+                        关键词：
+                      </span>
                       <span class="value">{{
                           displayDetail.keyword || "暂无"
                       }}</span>
@@ -79,8 +71,8 @@
                     <div class="body-item">
                       <span class="label">
                         <!-- <svg-icon icon-class="zldw"></svg-icon> -->
-                        展览单位：</span
-                      >
+                        展览单位：
+                      </span>
                       <span class="value">{{
                           displayDetail.deptName || "暂无"
                       }}</span>
@@ -88,8 +80,8 @@
                     <div class="body-item">
                       <span class="label">
                         <!-- <svg-icon icon-class="zldq"></svg-icon> -->
-                        展览地区：</span
-                      >
+                        展览地区：
+                      </span>
                       <span class="value">{{
                           displayDetail.regionName || "暂无"
                       }}</span>
@@ -104,56 +96,33 @@
                     /> -->
                   </div>
                   <div class="tools">
-                    <ReaderOperations
-                      :loveCount="displayDetail.loveCount"
+                    <ReaderOperations :loveCount="displayDetail.loveCount"
                       :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
-                      :collectCount="displayDetail.collectCount"
-                      :collectCountStatus="
+                      :collectCount="displayDetail.collectCount" :collectCountStatus="
                         Boolean(displayDetail.collectCountStatus)
-                      "
-                      :sourceId="displayDetail.exhibitionId"
-                      :title="displayDetail.title"
-                      :sourceType="'biz_exhibition'"
-                      @reload="reload"
-                    />
+                      " :sourceId="displayDetail.exhibitionId" :title="displayDetail.title"
+                      :sourceType="'biz_exhibition'" @reload="reload" />
                   </div>
                 </el-col>
               </el-row>
             </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">
             <img src="@/assets/imgs/display/normal/music.png" alt="" />
             <!-- <svg-icon icon-class="music"></svg-icon> -->
-            <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
-          class="content-item display-detail_tabbar"
-          id="tabbar"
-          :class="{ isFixed: isFixed }"
-        >
+        <div class="content-item display-detail_tabbar" id="tabbar" :class="{ isFixed: isFixed }">
           <span v-for="(item, index) in tabbarData" :key="index">
-            <span
-              @click="handleClickTabItem(item)"
-              :class="[
+            <span @click="handleClickTabItem(item)" :class="[
               'tab-item',
               currentTab && currentTab.domId == item.domId ? 'active' : '',
-              ]"
-              v-html="item.name"
-              v-if="
+            ]" v-html="item.name" v-if="
   displayDetail[item.domId] &&
   displayDetail[item.domId].length > 0
-              "
-            >
+">
             </span>
           </span>
         </div>
@@ -166,18 +135,11 @@
           </div>
           <div class="intro-content">
             <div class="left-box">简介</div>
-            <div
-              class="intro-content-container"
-              v-html="displayDetail.intro"
-            ></div>
+            <div class="intro-content-container" v-html="displayDetail.intro"></div>
           </div>
         </div>
 
-        <div
-          class="display-detail_virtual content-item"
-          v-if="displayDetail.virtualVo.length > 0"
-          id="virtualVo"
-        >
+        <div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0" id="virtualVo">
           <div class="custom_title">
             <div class="center">
               <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
@@ -185,12 +147,8 @@
             </div>
           </div>
           <div class="vr-content">
-            <div
-              class="img-container"
-              @click="handleToVR(item)"
-              v-for="(item, index) in displayDetail.virtualVo"
-              :key="index"
-            >
+            <div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
+              :key="index">
               <img :src="item.faceImagePressUrl" alt="" />
               <div class="modal">
                 <svg-icon icon-class="360"></svg-icon>
@@ -200,48 +158,31 @@
           </div>
         </div>
         <!-- 展览视频 -->
-        <div
-          id="videosVo"
-          class="content-item videos"
-          v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
-        >
+        <div id="videosVo" class="content-item videos"
+          v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
           <div class="video-title">
             <!-- <i class="el-icon-video-camera"></i> -->
             展览视频
           </div>
           <div class="video-names">
-            <div
-              class="video-item"
-              v-for="(item, index) in displayDetail.videosVo"
-              :key="index"
-              @click="handleChangeCurrentVideo(item)"
-            >
-              <div
-                :class="[
+            <div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
+              @click="handleChangeCurrentVideo(item)">
+              <div :class="[
                 'name',
                 currentVideo && item.fileId == currentVideo.fileId
                   ? 'active'
                   : '',
-                ]"
-              >
+              ]">
                 {{ item.name.split(".")[0] }}
               </div>
             </div>
           </div>
-          <video-player
-            v-if="currentVideo"
-            :src="$getFullUrl(currentVideo.url)"
-            class="video-box"
-          ></video-player>
+          <video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
         </div>
 
         <!--展览单元  -->
-        <div
-          class="content-item display-detail_units"
-          ref="units"
-          v-if="displayDetail.exhibitionUnits.length > 0"
-          id="exhibitionUnits"
-        >
+        <div class="content-item display-detail_units" ref="units" v-if="displayDetail.exhibitionUnits.length > 0"
+          id="exhibitionUnits">
           <div class="custom_title">
             <div class="center">
               <!-- <i class="el-icon-notebook-2"></i> -->
@@ -250,80 +191,57 @@
           </div>
           <div class="unit-container">
             <div class="unit-content-menu">
-              <swiper
-                class="swiper gallery-thumbs"
-                :options="swiperOptionThumbs"
-                ref="swiperThumbs"
-              >
-                <swiper-slide
-                  :class="[
+              <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
+                <swiper-slide :class="[
                   'slide-item',
                   item.euId == curUnit.euId ? 'active' : '',
-                  ]"
-                  v-for="(item, index) in displayDetail.exhibitionUnits"
-                  :key="index"
-                  @click.native="handleClickUnit(item)"
-                >
+                ]" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
+                  @click.native="handleClickUnit(item)">
                   {{ item.title }}
                 </swiper-slide>
+                <!-- <div class="swiper-button-prev" slot="button-prev">
+                  <i class="el-icon-arrow-left"></i>
+                </div>
+                <div class="swiper-button-next" slot="button-next">
+                  <i class="el-icon-arrow-right"></i>
+                </div> -->
+              </swiper>
               <div class="swiper-button-prev" slot="button-prev">
               <i class="el-icon-arrow-left"></i>
             </div>
             <div class="swiper-button-next" slot="button-next">
               <i class="el-icon-arrow-right"></i>
             </div>
-              </swiper>
             </div>
+            
             <div class="unit-content">
               <div class="unit-content-title">
                 {{ curUnit.title }}
               </div>
-              <div
-                class="text-indent unit-content_intro"
-                v-if="curUnit.intro"
-                v-html="curUnit.intro"
-              ></div>
-              <div
-                class="unit-content_images"
-                v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
-              >
+              <div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="curUnit.intro"></div>
+              <div class="unit-content_images" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0">
                 <div class="imgs-title">单元图片</div>
                 <div class="unit-imgs">
-                  <SlideImageGroup
-                    :imgList="curUnit.imagesVo"
-                    :needEnlarge="true"
-                  >
+                  <SlideImageGroup :imgList="curUnit.imagesVo" :needEnlarge="true">
                     <template slot-scope="{ item }" slot="img">
-                      <img
-                        :src="item.pressUrl"
-                        alt=""
-                        style="width: 100%; height: 100%; object-fit: contain"
-                      />
+                      <img :src="item.pressUrl" alt="" style="width: 100%; height: 100%; object-fit: contain" />
                     </template>
                   </SlideImageGroup>
                 </div>
               </div>
 
-              <div
-                class="unit-content_crs"
-                v-if="
+              <div class="unit-content_crs" v-if="
                 curUnit.culturalRelics && curUnit.culturalRelics.length > 0
-                "
-              >
+              ">
                 <div class="imgs-title">单元文物</div>
                 <SlideImageGroup :imgList="curUnit.culturalRelics">
                   <template slot-scope="{ item }" slot="img">
-                    <img
-                      :src="item.faceImagePressUrl"
-                      alt=""
-                      style="
+                    <img :src="item.faceImagePressUrl" alt="" style="
                         width: 100%;
                         height: 100%;
                         object-fit: fill;
                         cursor: pointer;
-                      "
-                      @click="handleToCr(item)"
-                    />
+                      " @click="handleToCr(item)" />
                   </template>
                   <template slot-scope="{ item }" slot="info">
                     <div class="name">{{ item.name }}</div>
@@ -343,29 +261,19 @@
         </div>
 
         <!--展览相关文物  -->
-        <div
-          class="content-item display-detail_relateRc"
-          ref="units"
-          v-if="
+        <div class="content-item display-detail_relateRc" ref="units" v-if="
           displayDetail.culturalRelicVo &&
           displayDetail.culturalRelicVo.length > 0
-          "
-          id="culturalRelicVo"
-        >
+        " id="culturalRelicVo">
           <div class="cr-title">展览文物</div>
           <SlideImageGroup :imgList="displayDetail.culturalRelicVo">
             <template slot-scope="{ item }" slot="img">
-              <img
-                :src="item.faceImagePressUrl"
-                alt=""
-                style="
+              <img :src="item.faceImagePressUrl" alt="" style="
                   width: 100%;
                   height: 100%;
                   object-fit: fill;
                   cursor: pointer;
-                "
-                @click="handleToCr(item)"
-              />
+                " @click="handleToCr(item)" />
             </template>
             <template slot-scope="{ item }" slot="info">
               <div class="name">{{ item.name }}</div>
@@ -373,13 +281,9 @@
           </SlideImageGroup>
         </div>
         <!-- 相关文献 -->
-        <div
-          class="content-item display-detail_lts"
-          v-if="
+        <div class="content-item display-detail_lts" v-if="
           displayDetail.literatureVo && displayDetail.literatureVo.length > 0
-          "
-          id="literatureVo"
-        >
+        " id="literatureVo">
           <div class="custom_title">
             <div class="center">
               <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
@@ -387,32 +291,18 @@
             </div>
           </div>
           <div class="lts-content">
-            <div
-              class="lt-item"
-              v-for="(item, index) in displayDetail.literatureVo"
-              :key="index"
-            >
+            <div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index">
               <span class="lt-order">[{{ index + 1 }}]</span>
-              <span class="lt-authors" v-if="item.authors"
-                >{{ item.authors }}.</span
-              >
-              <span class="lt-name" v-if="item.name" @click="handleViewLt(item)"
-                >{{ item.authors }}.</span
-              >
-              <span class="lt-source" v-if="item.source"
-                >{{ item.source }}.</span
-              >
+              <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
+              <span class="lt-name" v-if="item.name" @click="handleViewLt(item)">{{ item.authors }}.</span>
+              <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
               <span class="lt-date" v-if="item.date">{{ item.date }}</span>
             </div>
           </div>
         </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>
 </template>
 
@@ -697,6 +587,7 @@ export default {
   display: flex;
   justify-content: center;
 }
+
 .page-item {
   cursor: pointer;
 }
@@ -706,6 +597,7 @@ export default {
 // 中国风主题样式
 /**公共样式开始 */
 $titleFontFamily: SourceHanSerifCN-Bold;
+
 .custom-title {
   width: 50px;
   background-color: #d72f3f;
@@ -719,10 +611,12 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
   letter-spacing: 10px;
 }
+
 .content {
   background-color: #f3f3f3;
   min-height: 50vh;
 }
+
 .content-item {
   width: 100%;
   background-color: #fff;
@@ -730,20 +624,24 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
 .custom_title {
   padding: 50px 0 40px 0;
+
   .center {
     padding: 0 40px;
     display: flex;
     align-items: center;
+
     i {
       margin-right: 10px;
       font-size: 28px;
       color: $themeColor;
     }
+
     .svg-icon {
       font-size: 32px;
       color: $themeColor;
       margin-right: 10px;
     }
+
     .title {
       font-size: 26px;
       font-weight: 400;
@@ -768,6 +666,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   align-items: center;
   margin-right: 10px;
   cursor: pointer;
+
   img {
     width: 24px;
     height: 24px;
@@ -780,6 +679,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   top: 100px;
   z-index: 99;
 }
+
 /**公共样式结束 */
 
 /**样式开始 */
@@ -790,15 +690,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+
   /**轮播图 */
   .display-detail_imgs {
     height: 436px;
+
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
+
   .wrapper {
     width: 1200px;
     // padding: 0 13%;
@@ -806,6 +709,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     // width: 78%;
     display: flex;
     justify-content: center;
+
     .inner {
       width: 100%;
       // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
@@ -818,27 +722,33 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       // position: relative;
       margin: 0 70px;
       padding-bottom: 56px;
+
       /**基本信息 */
       .display-detail_basic_info {
         position: relative;
+
         .info-container {
           display: flex;
           justify-content: space-between;
           padding: 60px 36px;
           height: 100%;
           background-color: #fff;
+
           .info-container-left {
             min-height: 200px;
             max-height: 460px;
             margin-right: 50px;
             flex: 1;
             overflow: hidden;
+
             .imagesVo-image-container {
+
               // position: relative;
               .img-container {
                 height: 100%;
                 width: 100%;
                 background-color: #f5f5f9;
+
                 img {
                   width: 100%;
                   height: 100%;
@@ -847,6 +757,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               }
             }
           }
+
           .info-container-right {
             flex: 1;
             min-height: 200px;
@@ -858,22 +769,26 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               padding-bottom: 20px;
               margin-bottom: 20px;
               border-bottom: 2px solid #f2f2f2;
+
               .view-count {
                 font-size: 14px;
                 margin-top: 10px;
                 color: #999;
                 font-weight: normal;
+
                 .svg-icon {
                   margin-right: 10px;
                 }
               }
             }
+
             .basic-info {
               .body-item {
                 display: flex;
                 align-items: center;
                 margin-bottom: 10px;
                 font-size: 18px;
+
                 .label {
                   display: flex;
                   align-items: center;
@@ -882,6 +797,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                   // margin-bottom: 10px;
                   font-weight: bold;
                   color: #999;
+
                   .svg-icon {
                     width: 24px;
                     height: 24px;
@@ -902,31 +818,38 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               flex-direction: column;
               align-items: center;
               justify-content: center;
+
               .qrcode {
                 margin-bottom: 28px;
                 display: flex;
                 justify-content: center;
+
                 img {
                   width: 50%;
                   height: 100%;
                 }
               }
+
               .tools {
                 width: 100%;
+
                 .tools-item {
                   color: #858585;
                   flex: 1;
                   display: flex;
                   align-items: center;
                   cursor: pointer;
+
                   .svg-icon {
                     width: 22px;
                     height: 22px;
                     margin-right: 8px;
                   }
+
                   .like {
                     color: #831122;
                   }
+
                   .collect {
                     color: $themeColor;
                   }
@@ -935,6 +858,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             }
           }
         }
+
         .audio {
           position: absolute;
           right: -120px;
@@ -950,25 +874,30 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           align-items: center;
           background-color: #fff;
           transition: all 0.5s ease;
+
           &:hover {
             box-shadow: 0 0 14px rgb(0 0 0 / 40%);
           }
+
           .svg-icon {
             color: $themeColor;
             font-size: 80px;
           }
+
           img {
             width: 60px;
             height: 60px;
           }
         }
       }
+
       .display-detail_tabbar {
         background-color: #fff;
         display: flex;
         justify-content: center;
         padding: 10px;
         border-bottom: 1px solid #f2f2f2;
+
         .tab-item {
           height: 100%;
           margin-right: 20px;
@@ -981,20 +910,25 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
           &:hover {
             color: $themeColor;
+
             &::after {
               display: inline-block;
             }
           }
+
           &::after {
             display: none;
           }
         }
+
         .active {
           color: $themeColor;
+
           &::after {
             display: inline-block;
           }
         }
+
         .tab-item::after,
         .active::after {
           position: absolute;
@@ -1006,12 +940,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           background-color: $themeColor;
         }
       }
+
       /**简介和视频 */
       .display-detail_intro {
         // background-image: url("@/assets/imgs/display/normal/bg.png");
         // background-size: 1%;
 
         padding: 40px;
+
         .intro-title {
           font-size: 26px;
           font-weight: 400;
@@ -1020,18 +956,22 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           display: flex;
           align-items: center;
           margin-bottom: 32px;
+
           i {
             margin-right: 10px;
           }
+
           .svg-icon {
             margin-right: 10px;
             font-size: 36px;
           }
         }
+
         .intro-content {
           line-height: 28px;
           display: flex;
         }
+
         .left-box {
           width: 60px;
           background-color: $themeColor;
@@ -1045,6 +985,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           letter-spacing: 10px;
           font-family: SourceHanSerifCN-Bold;
         }
+
         .intro-content-container {
           flex: 1;
           text-indent: 34px;
@@ -1052,11 +993,13 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           background-color: rgba($themeColor, 10%);
         }
       }
+
       // 视频
       .videos {
         display: flex;
         flex-direction: column;
         margin-bottom: 40px;
+
         .video-title {
           display: flex;
           // justify-content: center;
@@ -1066,33 +1009,41 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           padding: 0 40px;
           margin-bottom: 32px;
           font-family: SourceHanSerifCN-Bold;
+
           i {
             font-size: 28px;
             margin-right: 10px;
           }
         }
+
         .video-names {
           display: flex;
           justify-content: center;
           border-bottom: 1px solid #f2f0f0;
           margin-bottom: 30px;
+
           .video-item {
             font-size: 18px;
             margin: 8px 30px;
+
             .name {
               color: #999;
               position: relative;
               cursor: pointer;
+
               &:hover {
                 color: $themeColor;
+
                 &::after {
                   display: inline-block;
                 }
+
                 &::before {
                   display: inline-block;
                 }
               }
             }
+
             .active::after,
             .name::after {
               content: "";
@@ -1106,6 +1057,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               transform: translateX(-50%);
               display: none;
             }
+
             .active::before,
             .name::before {
               content: "";
@@ -1119,14 +1071,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               transform: translateX(-50%);
               display: none;
             }
+
             .active::after,
             .active::before {
               display: inline-block;
             }
           }
         }
+
         .video-box {
           height: 500px;
+
           .video-player {
             height: 100%;
           }
@@ -1136,9 +1091,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       // 虚拟展
       .display-detail_virtual {
         margin-bottom: 56px;
+
         .vr-content {
           display: flex;
         }
+
         .img-container {
           // width: 800px;
           flex: 1;
@@ -1146,17 +1103,20 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           position: relative;
           cursor: pointer;
           overflow: hidden;
+
           &:hover {
             img {
               transform: scale(1.1);
             }
           }
+
           img {
             width: 100%;
             height: 400px;
             transition: all ease 0.5s;
             object-fit: cover;
           }
+
           .modal {
             position: absolute;
             left: 0;
@@ -1168,15 +1128,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+
             &:hover {
               .name {
                 opacity: 1;
               }
             }
+
             .svg-icon {
               font-size: 110px;
               color: #fff;
             }
+
             .name {
               color: #fff;
               font-size: 28px;
@@ -1194,17 +1157,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
         .unit-container {
           margin-bottom: 40px;
+          position: relative;
+
         }
+
         .unit-content-menu {
           margin-right: 40px;
           padding: 0 20px;
+          position: relative;
+
           .swiper-container {
-            padding: 0 60px;
+            width: 90%;
 
-            ::v-deep .swiper-wrapper {
-              display: flex;
-              justify-content: center;
-            }
             .slide-item {
               // border: 2px solid $themeColor;
               padding: 8px;
@@ -1225,8 +1189,15 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               background: $themeColor;
               color: #fff;
             }
+
+
+          }
+        }
+
         .swiper-button-next,
         .swiper-button-prev {
+          // background-color: rgba(0,0,0,0.2);
+          // border-radius: 50%;
           background-image: none;
           width: 60px;
           height: 60px;
@@ -1238,17 +1209,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           font-size: 28px;
           transform: translateY(-6px);
         }
-          }
-        }
+
         .unit-content {
           flex: 1;
           padding: 60px 40px 0;
+
           .unit-content-title {
             font-size: 24px;
             line-height: 2;
             display: flex;
             justify-content: center;
           }
+
           .unit-content_intro {
             font-size: 16px;
             font-weight: 400;
@@ -1257,16 +1229,20 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             text-indent: 32px;
             margin-bottom: 20px;
           }
+
           .unit-content_images {
             position: relative;
+
             .unit-content_images_container {
               height: 100%;
               display: flex;
               flex-direction: column;
               background-color: #f5f5f9;
+
               .images_img {
                 flex: 1;
               }
+
               .desc {
                 display: flex;
                 justify-content: center;
@@ -1275,6 +1251,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               }
             }
           }
+
           //单元文物和单元图片公共样式
           .imgs-title {
             margin: 30px 0;
@@ -1282,14 +1259,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             align-items: center;
             font-size: 20px;
             font-family: SourceHanSerifCN-Bold;
+
             i {
               margin: 0 10px;
               font-size: 18px;
             }
           }
+
           .unit-imgs {
             // height: 300px;
           }
+
           .unit-content_crs {
             position: relative;
 
@@ -1300,6 +1280,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                 .img-container {
                   background-color: #f5f5f9;
                   height: 250px;
+
                   .images_img {
                     height: 100%;
                     width: 100%;
@@ -1323,6 +1304,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           .buttons {
             display: flex;
             justify-content: flex-end;
+
             .btn {
               display: flex;
               align-content: center;
@@ -1330,9 +1312,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               // border: 1px solid $themeColor;
               color: #666;
               cursor: pointer;
+
               &:hover {
                 color: $themeColor;
               }
+
               .svg-icon {
                 font-size: 22px;
                 margin: 0 4px;
@@ -1341,23 +1325,28 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
         }
       }
+
       // 关联文物
       .display-detail_relateRc {
         padding: 0 40px;
         margin-bottom: 56px;
+
         .cr-title {
           display: flex;
           align-items: center;
           font-size: 26px;
           color: $themeColor;
           font-family: SourceHanSerifCN-Bold;
+
           i {
             font-size: 28px;
             margin-right: 10px;
           }
         }
+
         .el-col {
           margin-bottom: 20px;
+
           .img-container {
             width: 100%;
             height: 460px;
@@ -1390,13 +1379,16 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       .display-detail_lts {
         .lts-content {
           padding: 0 40px 40px;
+
           .lt-item {
             border-bottom: 1px dashed #ccc;
             padding-bottom: 9px;
-            & > span {
+
+            &>span {
               padding: 0 4px;
             }
           }
+
           .lt-name {
             color: $themeColor;
             cursor: pointer;
@@ -1406,6 +1398,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     }
   }
 }
+
 ::v-deep .el-tree .el-tree-node__expand-icon.expanded {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
@@ -1423,11 +1416,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 }
 
 //有子节点 且已展开
-::v-deep
-  .el-tree
-  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-  background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0
-    3px;
+::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0 3px;
   content: "";
   display: block;
   width: 16px;
@@ -1457,11 +1447,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 ::v-deep .el-carousel {
   height: 100%;
 }
+
 ::v-deep .el-carousel__container {
   height: 100%;
 }
+
 ::v-deep .el-tree {
   background: transparent;
+
   .el-tree-node__content {
     height: 54px;
 
@@ -1469,8 +1462,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       background-color: #fff;
       color: $themeColor;
     }
+
     padding-left: 16px !important;
   }
+
   .is-current {
     .el-tree-node__content {
       background-color: #fff;
@@ -1478,18 +1473,22 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     }
   }
 }
+
 @keyframes filmMoveLeft {
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(-1200px);
   }
 }
+
 @keyframes filmMoveRight {
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(1200px);
   }
@@ -1499,6 +1498,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   0% {
     transform: rotateZ(0deg);
   }
+
   100% {
     transform: rotateZ(360deg);
   }
@@ -1508,6 +1508,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   0% {
     transform: rotateZ(0deg);
   }
+
   100% {
     transform: rotateZ(360deg);
   }
@@ -1515,6 +1516,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
 .animation-play-paused {
   animation-play-state: paused;
-  -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+  -webkit-animation-play-state: paused;
+  /* Safari 和 Chrome */
 }
 </style>
\ No newline at end of file