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

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

@@ -7,10 +7,13 @@
                 <!--</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>
@@ -37,20 +41,18 @@
     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() {
             return {
                 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,
@@ -208,19 +210,29 @@
                         height: 100%;
                         animation: mySwiper 6s ease infinite;
                         .swiperImg {
-                            height: 100%;
+                            height: 112px;
-                            width: 30%;
+                            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%;
+                            height: 112px;
-                            width: 30%;
+                            width: 172px;
-                            margin-right: 38px;
+                            /*margin-right: 30px;*/
+                            img {
+                                display: inline-block;
+                                height: 112px !important;
+                                width: 172px !important;
+                            }
                         }
                     }
                 }