布展介绍和单元修改为支持富文本字符串、浏览器自适应适配

src/main.js

@@ -18,7 +18,7 @@ import {
   getFullUrl
 } from '@/utils/index'
 import './permission'
-// import '@/rem'
+import '@/rem'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);

src/views/display/components/BlueStyle.vue

@@ -12,7 +12,11 @@
       v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
     >
       <el-image
-        :src="$getFullUrl(displayDetail.faceImagePressUrl || displayDetail.faceImageUrl)"
+        :src="
+          $getFullUrl(
+            displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
+          )
+        "
         fit="cover"
       ></el-image>
     </div>
@@ -27,7 +31,7 @@
               animate__animated animate__fadeInLeft
             "
           >
-            <swiper :options="swiperOption" ref="mySwiper">
+            <!-- <swiper :options="swiperOption" ref="mySwiper">
               <swiper-slide
                 v-for="(item, index) in displayDetail.imagesVo"
                 :key="index"
@@ -40,9 +44,29 @@
                 </div>
               </swiper-slide>
               <div class="swiper-pagination" slot="pagination"></div>
-              <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
-              <!-- <div class="swiper-button-next" slot="button-next"></div> -->
-            </swiper>
+              <div class="swiper-button-prev" slot="button-prev"></div>
+              <div class="swiper-button-next" slot="button-next"></div>
+            </swiper> -->
+            <el-carousel>
+              <el-carousel-item
+                v-for="(item, index) in displayDetail.imagesVo"
+                :key="index"
+                class="imagesVo-image-container"
+              >
+                <div
+                  class="img-container"
+                  @click="handelPreviewImages(displayDetail.imagesVo)"
+                >
+                  <img :src="item.url" alt="点击查看大图" srcset="" />
+                </div>
+                <div
+                  class="enlarge"
+                  @click="handelPreviewImages(displayDetail.imagesVo)"
+                >
+                  <img src="@/assets/imgs/enlarge-s.png" alt="" />
+                </div>
+              </el-carousel-item>
+            </el-carousel>
           </div>
           <div
             class="
@@ -206,15 +230,47 @@
             ></menu-list>
           </div>
           <div class="unit-content wow animate__animated animate__fadeInRight">
-            <div class="text-indent unit-content_intro" v-if="curUnit.intro">
-              {{ curUnit.intro }}
+            <div
+              class="text-indent unit-content_intro"
+              v-if="curUnit.intro"
+              v-html="curUnit.intro"
+            >
+              <!-- {{ curUnit.intro }} -->
             </div>
             <div
               class="unit-content_images"
               v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
             >
-              <el-row :gutter="20">
-                <el-col
+              <el-carousel
+                indicator-position="outside"
+                :autoplay="false"
+                height="600px"
+                :loop="false"
+              >
+                <el-carousel-item
+                  v-for="item in curUnit.imagesVo"
+                  :key="item.euId"
+                >
+                  <div class="unit-content_images_container">
+                    <el-image
+                      :src="$getFullUrl(item.pressUrl)"
+                      fit="contain"
+                      class="images_img"
+                    ></el-image>
+                    <div
+                      class="enlarge"
+                      @click="handelPreviewImages(curUnit.imagesVo)"
+                    >
+                      <img src="@/assets/imgs/enlarge-s.png" alt="" />
+                    </div>
+                    <div class="desc">
+                      {{ item.name.split(".")[0] }}
+                    </div>
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+
+              <!-- <el-col
                   :span="24 / curUnit.imagesVo.length"
                   v-for="item in curUnit.imagesVo"
                   :key="item.euId"
@@ -231,8 +287,7 @@
                   <div class="unit-content_images_desc">
                     {{ item.name }}
                   </div>
-                </el-col>
-              </el-row>
+                </el-col> -->
             </div>
             <div
               class="unit-content_videos"
@@ -618,13 +673,35 @@ export default {
     .divider {
       flex: 1;
       height: 6px;
-      background: url("@/assets/imgs/display/normal/divider.png") 100% 100% repeat-x;
+      background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
+        repeat-x;
       img {
         width: 100%;
       }
     }
   }
 }
+
+.enlarge {
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  display: flex;
+  z-index: 9;
+  background-color: #c1925b;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
 /**公共样式结束 */
 
 /**样式开始 */
@@ -667,14 +744,17 @@ export default {
           margin-right: 50px;
           flex: 1;
           overflow: hidden;
-          .img-container {
-            height: 280px;
-            width: 100%;
-          }
-          img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+          .imagesVo-image-container {
+            // position: relative;
+            .img-container {
+              height: 280px;
+              width: 100%;
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
           }
         }
         .info-container-right {
@@ -841,30 +921,20 @@ export default {
           text-indent: 32px;
           margin-bottom: 20px;
         }
-        .unit-content_images_container {
+        .unit-content_images {
           position: relative;
-          .unit-content_images_desc {
-            display: flex;
-            justify-content: center;
-          }
-          .enlarge {
-            position: absolute;
-            bottom: 60px;
-            right: 40px;
-            display: flex;
-            z-index: 9;
-            background-color: #c1925b;
-            width: 40px;
-            height: 40px;
-            border-radius: 12px;
+          .unit-content_images_container {
+            height: 100%;
             display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-right: 10px;
-            cursor: pointer;
-            img {
-              width: 24px;
-              height: 24px;
+            flex-direction: column;
+            .images_img {
+              flex: 1;
+            }
+            .desc {
+              display: flex;
+              justify-content: center;
+              height: 40px;
+              align-items: center;
             }
           }
         }

src/views/display/index.vue

@@ -440,14 +440,21 @@ $text-indent: 16px;
                 align-items: flex-end;
                 justify-content: space-between;
                 .left {
+                  flex: 1;
+
                   .deptName {
                     font-size: 14px;
                     font-weight: 300;
                     color: #444444;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 100%;
                   }
                 }
                 .right {
                   color: #858484;
+                  width: 120px;
                   .collect {
                     margin-right: 10px;
                   }
@@ -479,7 +486,6 @@ $text-indent: 16px;
   font-weight: bold;
 }
 
-
 ::v-deep .el-input,
 .el-cascader {
   .el-input__inner {
@@ -503,7 +509,7 @@ $text-indent: 16px;
 }
 
 ::v-deep .el-input {
-  width: auto !important;;
+  width: auto !important;
 }
 ::v-deep .el-pager {
   li {