fix: 修复放大预览图片时,会出现蓝色头部的问题

src/components/Rotation/src/rotation.vue

@@ -5,28 +5,28 @@
 */
 <template>
     <div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]' class='wanda-rotation'>
-        <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
-            <img :src='rotationImg[0].url' alt />
+        <div v-if='rotationImgs.length==1&&size=="height"' class='rotationConType'>
+            <img :src='rotationImgs[0].url' alt />
         </div>
-        <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
-            <img :src='rotationImg[0].url' alt />
+        <div v-else-if='rotationImgs.length==1&&size=="width"' class='rotationCon'>
+            <img :src='rotationImgs[0].url' alt />
         </div>
         <!-- <el-carousel v-else trigger='click' style='height:100%;width:100%' :interval='5000' arrow='always' @change='changePic' :loop='false'>
-            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+            <el-carousel-item v-for='(item,index) in rotationImgs' :key='index'>
                 <img :src='item.url' alt />
             </el-carousel-item>
         </el-carousel>-->
         <!-- 不显示指示器 -->
-        <!-- :indicator-position='rotationImg.length == 1 ? "none":""' -->
+        <!-- :indicator-position='rotationImgs.length == 1 ? "none":""' -->
         <el-carousel
             v-else-if='type!="5"'
             style='height:100%;width:100%'
             :interval='5000'
             indicator-position='none'
-            :arrow='rotationImg.length == 1 ? "never":"always"'
+            :arrow='rotationImgs.length == 1 ? "never":"always"'
             @change='changePic'
         >
-            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+            <el-carousel-item v-for='(item,index) in rotationImgs' :key='index'>
                 <img :src='item.url' alt style='  width: 100%; height: 100%;object-fit: container;' />
             </el-carousel-item>
         </el-carousel>
@@ -35,16 +35,17 @@
             style='height:100%;width:100%'
             :interval='5000'
             indicator-position='none'
-            :arrow='rotationImg.length == 1 ? "never":"always"'
+            :arrow='rotationImgs.length == 1 ? "never":"always"'
             @change='changePic'
         >
-            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+            <el-carousel-item v-for='(item,index) in rotationImgs' :key='index'>
                 <img :src='item.url' alt style='  width: 100%; height: 100%;object-fit:contain' />
             </el-carousel-item>
         </el-carousel>
     </div>
 </template>
 <script>
+import { cloneDeep } from 'lodash'
 export default {
     name: 'Rotation',
     props: ['rotationImg', 'type', 'size'],
@@ -80,8 +81,9 @@ export default {
     },
     // 解决两张图片时,轮播顺序反向
     created() {
-        if (this.rotationImg && this.rotationImg.length === 2) {
-            this.rotationImg = [...this.rotationImg, ...this.rotationImg]
+        this.rotationImgs = cloneDeep(this.rotationImg)
+        if (this.rotationImgs && this.rotationImgs.length === 2) {
+            this.rotationImgs = [...this.rotationImgs, ...this.rotationImgs]
         }
     },
     mounted() {

src/views/overview/picModal.vue

@@ -15,6 +15,11 @@
 </template>
 
 <script>
+/**
+ * @author  yunxing
+ * @date    2020-09-07
+ * @description fix: 修复放大预览图片时,会出现蓝色头部的问题
+ */
 import PicViewRotation from './picViewRotation'
 export default {
     data() {
@@ -84,7 +89,10 @@ export default {
         margin-top: 5vh !important;
         position: relative;
         .el-dialog__header {
-            padding: 0;
+            padding: 0;// !important;
+            height: 0;
+            background: none; //!important;
+            border-bottom: none;
         }
         .el-dialog__body {
             padding: 0;

src/views/overview/picViewRotation.vue

@@ -5,37 +5,41 @@
 */
 <template>
     <div class='wanda-rotation rotationFullYlt'>
-        <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
-            <img :src='rotationImg[0].url' alt />
+        <div v-if='rotationImgs.length==1&&size=="height"' class='rotationConType'>
+            <img :src='rotationImgs[0].url' alt />
         </div>
-        <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
-            <img :src='rotationImg[0].url' alt />
+        <div v-else-if='rotationImgs.length==1&&size=="width"' class='rotationCon'>
+            <img :src='rotationImgs[0].url' alt />
         </div>
         <el-carousel
             v-else
             style='height:100%;width:100%'
             :interval='5000'
             indicator-position='none'
-            :arrow='rotationImg.length == 1 ? "never":"always"'
+            :arrow='rotationImgs.length == 1 ? "never":"always"'
         >
-            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+            <el-carousel-item v-for='(item,index) in rotationImgs' :key='index'>
                 <img :src='item.url' alt style='  width: 100%; height: 100%;object-fit: container;' />
             </el-carousel-item>
         </el-carousel>
     </div>
-</template>s
+</template>
 <script>
+import { cloneDeep } from 'lodash'
 export default {
     name: 'Rotation',
     props: ['rotationImg', 'picType', 'size'],
     data() {
-        return {}
+        return {
+            rotationImgs: [],
+        }
     },
     methods: {},
     // 解决两张图片时,轮播顺序反向
     created() {
-        if (this.rotationImg && this.rotationImg.length === 2) {
-            this.rotationImg = [...this.rotationImg, ...this.rotationImg]
+        this.rotationImgs = cloneDeep(this.rotationImg)
+        if (this.rotationImgs && this.rotationImgs.length === 2) {
+            this.rotationImgs = [...this.rotationImgs, ...this.rotationImgs]
         }
     },
     mounted() {},