党建中心-队建风采图片布局

src/views/screenAdaptation/pages/partyCenter/teamBuildingStyle.vue

@@ -3,14 +3,17 @@
         <a-spin class="teamBuild" :spinning="spinning">
             <div class="topPic">
                 <!--<div class="swiperBox">-->
-                    <!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i" alt="">-->
+                <!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i" alt="">-->
                 <!--</div>-->
                 <div class="swiperBox" v-if="imgList.length > 3">
                     <!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i">-->
-                    <img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i" :imgObj="item" />
+                    <img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i"
+                                 :imgObj="item"/>
                 </div>
                 <div class="img-no-swiper-box" v-else>
-                    <img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i" :imgObj="item" />
+                    <!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i">-->
+                    <img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i"
+                                 :imgObj="item"/>
                 </div>
             </div>
             <div class="botText">
@@ -26,7 +29,8 @@
                 </vue-scroll>
             </div>
         </a-spin>
-        <CommonInfo commonQueryId="query_dangjian_tuandui" :infoObj="infoObj" :commonId="infoId" :show="visible" @cancel="closeInfo"/>
+        <CommonInfo commonQueryId="query_dangjian_tuandui" :infoObj="infoObj" :commonId="infoId" :show="visible"
+                    @cancel="closeInfo"/>
     </CommonBox>
 </template>
 <script>
@@ -34,23 +38,21 @@
      * 品牌创建
      * */
     import CommonBox from '../secondPages/commonBox.vue';
-    import {List, Icon, Avatar, Row, Col,Spin} from 'ant-design-vue';
+    import {List, Icon, Avatar, Row, Col, Spin} from 'ant-design-vue';
     import ImgPreview from '../../common/imgPreview.vue';
     import CommonInfo from '../../common/centerCommonInfo.vue';
-    export default{
-        data(){
+
+    export default {
+        data() {
             return {
-                spinning:false,
-                dataList:[],
-                imgList:[],
-                //轮播图图片
+                spinning: false,
+                dataList: [],
+                imgList: [],
+                //轮播图图片-弃
                 imgArr: [
                     {src: require("./images/listPic1.png")},
                     {src: require("./images/listPic6.png")},
                     {src: require("./images/listPic3.png")},
-                    {src: require("./images/listPic1.png")},
-                    {src: require("./images/listPic6.png")},
-                    {src: require("./images/listPic3.png")},
                 ],
                 //滚动条
                 showPage: true,
@@ -73,10 +75,10 @@
                 visible: false,
                 modalTitle: '查看详情',
                 infoId: "",
-                infoObj:{}
+                infoObj: {}
             }
         },
-        mounted(){
+        mounted() {
             this.getDataexReport();
         },
         components: {
@@ -87,7 +89,7 @@
             AListItem: List.Item,
             AAvatar: Avatar,
             ImgPreview,
-            ASpin:Spin,
+            ASpin: Spin,
             CommonInfo
         },
         methods: {
@@ -127,8 +129,8 @@
                             }
                         }
                         let imgLen = this.imgList.length;
-                        if(imgLen < 3){
-                            for(let i = 0;i < 3 - imgLen;i ++){
+                        if (imgLen < 3) {
+                            for (let i = 0; i < 3 - imgLen; i++) {
                                 this.imgList.push(null)
                             }
                         }
@@ -155,15 +157,15 @@
                 }], (result) => {
                     if (result[0].data.success) {
                         let dataInfo = JSON.parse(result[0].data.result);
-                        if(dataInfo && dataInfo.length > 0){
+                        if (dataInfo && dataInfo.length > 0) {
                             let info = dataInfo[0];
                             let infoObj = {
-                                title:info.info_title,
-                                infoArr:[
-                                    {"title":"上传日期","value":info.create_time.replace('T', ' ').replace('Z', '')},
-                                    {"title":"上传人","value":info.person_name},
+                                title: info.info_title,
+                                infoArr: [
+                                    {"title": "上传日期", "value": info.create_time.replace('T', ' ').replace('Z', '')},
+                                    {"title": "上传人", "value": info.person_name},
                                 ],
-                                content:info.info_content
+                                content: info.info_content
                             }
                             this.infoObj = infoObj;
                             this.visible = true;
@@ -171,7 +173,7 @@
                     }
                 })
             },
-            closeInfo:function () {
+            closeInfo: function () {
                 this.infoId = "";
                 this.visible = false;
             }
@@ -185,7 +187,7 @@
         .teamBuild {
             width: 100%;
             height: 100%;
-            /deep/ .ant-spin-container{
+            /deep/ .ant-spin-container {
                 width: 100%;
                 height: 100%;
                 /*图片*/
@@ -208,19 +210,29 @@
                         height: 100%;
                         animation: mySwiper 6s ease infinite;
                         .swiperImg {
-                            height: 100%;
-                            width: 30%;
+                            height: 112px;
+                            width: 172px;
                             margin-right: 38px;
+                            img {
+                                height: 112px !important;
+                                width: 172px !important;
+                            }
                         }
                     }
                     .img-no-swiper-box {
-                        display: inherit;
                         width: 100%;
                         height: 100%;
+                        display: flex;
+                        justify-content: space-between;
                         .swiperImg {
-                            height: 100%;
-                            width: 30%;
-                            margin-right: 38px;
+                            height: 112px;
+                            width: 172px;
+                            /*margin-right: 30px;*/
+                            img {
+                                display: inline-block;
+                                height: 112px !important;
+                                width: 172px !important;
+                            }
                         }
                     }
                 }