首页轮播图修改

package-lock.json

@@ -17,7 +17,6 @@
         "quill": "^1.3.7",
         "register-service-worker": "^1.7.1",
         "stylus": "^0.54.8",
-        "swiper": "^8.0.6",
         "vue": "^2.6.11",
         "vue-baidu-map": "^0.21.22",
         "vue-dompurify-html": "^2.5.0",
@@ -48,6 +47,7 @@
         "stylus": "^0.54.5",
         "stylus-loader": "^3.0.2",
         "svg-sprite-loader": "^5.0.0",
+        "swiper": "^8.0.6",
         "vue-cli-plugin-ant-design": "^1.0.1",
         "vue-cli-plugin-axios": "^0.0.4",
         "vue-template-compiler": "^2.6.11"
@@ -6259,6 +6259,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
       "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dev": true,
       "dependencies": {
         "ssr-window": "^4.0.0"
       }
@@ -13662,7 +13663,8 @@
     "node_modules/ssr-window": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
-      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+      "dev": true
     },
     "node_modules/ssri": {
       "version": "6.0.1",
@@ -14406,6 +14408,7 @@
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
       "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "dev": true,
       "funding": [
         {
           "type": "patreon",
@@ -21847,6 +21850,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
       "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dev": true,
       "requires": {
         "ssr-window": "^4.0.0"
       }
@@ -27861,7 +27865,8 @@
     "ssr-window": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
-      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+      "dev": true
     },
     "ssri": {
       "version": "6.0.1",
@@ -28468,6 +28473,7 @@
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
       "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "dev": true,
       "requires": {
         "dom7": "^4.0.4",
         "ssr-window": "^4.0.2"

package.json

@@ -18,7 +18,7 @@
     "quill": "^1.3.7",
     "register-service-worker": "^1.7.1",
     "stylus": "^0.54.8",
-    "swiper": "^8.0.6",
+    "swiper": "^5.4.5",
     "vue": "^2.6.11",
     "vue-baidu-map": "^0.21.22",
     "vue-dompurify-html": "^2.5.0",
@@ -49,6 +49,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "svg-sprite-loader": "^5.0.0",
+    "swiper": "^8.0.6",
     "vue-cli-plugin-ant-design": "^1.0.1",
     "vue-cli-plugin-axios": "^0.0.4",
     "vue-template-compiler": "^2.6.11"

src/components/Banner/Banner.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-wrapper">
-      <div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index">
+      <div class="swiper-slide" v-for="(item, index) in imgArr" :key="index">
         <div class="rotation-box">
-          <img :src="item.titleUrl" style="height: 340px;width: 100%" alt="" />
+          <img :src="item.titleUrl" style="height: 280px;width: 100%" alt="" />
           <div class="rotation-div one-text">
             {{ item.title }}
           </div>
@@ -15,35 +15,56 @@
 
 <script>
 import Swiper from 'swiper';
-import 'swiper/swiper.min.css';
+// import 'swiper/swiper.min.css';
+import 'swiper/css/swiper.css';
 export default {
   props: {
-    ImgNews: {
+    imgNews: {
+      default: () => [],
       type: Array,
-      default: []
+    },
-    }
   },
   data() {
-    return {
+    return { imgArr: [] };
-      bannerIndex: 2,
-    };
   },
   mounted() {
     let that = this;
     /* eslint-disable */
-    let mySwiper = new Swiper('.swiper-container', {
+    new Swiper('.swiper-container', {
       loop: true, // 循环模式选项
-      autoplay: true,//自动循环
       slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。
-      spaceBetween: -160, //在slide之间设置距离（单位px）。
+      spaceBetween: -200, //在slide之间设置距离（单位px）。
       centeredSlides: true, //设置活动块居中
+      height: 274,
+      autoplay: {
+        delay: 3000,
+        disableOnInteraction: true,
+        pauseOnMouseEnter: true,
+      }, //自动循环
     });
   },
+  created() {
+    this.getFiveImg();
+  },
+  methods: {
+    getFiveImg() {
+      let imgArr = [...this.imgNews];
+      if (this.imgArr.length < 5) {
+        for (let i = 0; i < imgArr.length; i++) {
+          this.imgArr.push(imgArr[i]);
+          if (this.imgArr[i].length > 5) {
+            return;
+          }
+        }
+        this.getFiveImg();
+      }
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.swiper-container{
+.swiper-container {
   width: 100%;
   overflow: hidden;
 }
@@ -58,16 +79,17 @@ export default {
   transform: scale(0.6);
 }
 
-.swiper-slide-active,.swiper-slide-duplicate-active {
+.swiper-slide-active,
+.swiper-slide-duplicate-active {
   transform: scale(1);
 }
 
-.swiper-slide-next{
+.swiper-slide-next {
   transform: scale(0.8);
   z-index: 998 !important;
 }
 
-.swiper-slide-prev{
+.swiper-slide-prev {
   transform: scale(0.8);
 }
 
@@ -77,8 +99,10 @@ export default {
 
 .rotation-box {
   position: relative;
+  border-radius: 5px 5px 0 0;
+  overflow: hidden;
   width: 520px;
-  height: 340px;
+  height: 280px;
 }
 
 .rotation-div {

src/views/FirstPages/FirstPage.vue

@@ -82,105 +82,9 @@
           <div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0204', '')">更多></div>
         </div>
         <!-- 轮播图 -->
-        <banner class="banner" :ImgNews="ImgNews1" />
+        <banner class="banner" key="ImgNews1" v-if="ImgNews1.length" :img-news="ImgNews1" />
-
+        <banner class="banner" key="ImgNews2" v-if="ImgNews2.length" :img-news="ImgNews2" />
-        <el-carousel :interval="4000" type="card" class="banner" indicator-position="none">
+        <banner class="banner" key="ImgNews3" v-if="ImgNews3.length" :img-news="ImgNews3" />
-          <el-carousel-item v-for="newContent in ImgNews1" :key="newContent.introId">
-            <div class="rotation-box">
-              <img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
-              <div class="rotation-div one-text">
-                {{ newContent.title }}
-              </div>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-
-        <el-carousel :interval="4000" type="card" class="banner mt-4" indicator-position="none">
-          <el-carousel-item v-for="newContent in ImgNews2" :key="newContent.introId">
-            <div class="rotation-box">
-              <img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
-              <div class="rotation-div one-text">
-                {{ newContent.title }}
-              </div>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-
-        <el-carousel :interval="4000" type="card" class="banner mt-4" indicator-position="none">
-          <el-carousel-item v-for="newContent in ImgNews3" :key="newContent.introId">
-            <div class="rotation-box">
-              <img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
-              <div class="rotation-div one-text">
-                {{ newContent.title }}
-              </div>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-        <!-- <div class="flex-1 flex-column justify-space-between mt-4">
-          <div class="flex-1">
-            <div class="flex-1 mr-4">
-              <a-carousel style="width: 650px" autoplay>
-                <div class="rotation-box" v-for="newContent in ImgNews1" :key="newContent.introId">
-                  <img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
-                  <div class="rotation-div one-text">
-                    {{ newContent.title }}
-                  </div>
-                </div>
-              </a-carousel>
-            </div>
-            <div class="news-img-content d-flex flex-column justify-space-between p-4">
-              <div class="d-flex" v-for="newContent in ImgNews1" :key="newContent.introId">
-                <div class="content-date">
-                  <div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
-                  <div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
-                </div>
-                <div class="flex-1 new-box-content-jj" @click="openPage('news', '0201', newContent.introId)">{{ newContent.title }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="flex-1 mt-4">
-            <div class="news-img-content d-flex flex-column justify-space-between p-4">
-              <div class="d-flex" v-for="newContent in ImgNews2" :key="newContent.introId">
-                <div class="content-date">
-                  <div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
-                  <div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
-                </div>
-                <div class="flex-1 new-box-content-jj" @click="openPage('news', '0202', newContent.introId)">{{ newContent.title }}</div>
-              </div>
-            </div>
-            <div class="flex-1 ml-4">
-              <a-carousel style="width: 650px" autoplay>
-                <div class="rotation-box" v-for="newContent in ImgNews2" :key="newContent.introId">
-                  <img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
-                  <div class="rotation-div one-text">
-                    {{ newContent.title }}
-                  </div>
-                </div>
-              </a-carousel>
-            </div>
-          </div>
-          <div class="flex-1 mt-4">
-            <div class="flex-1 mr-4">
-              <a-carousel style="width: 650px" autoplay>
-                <div class="rotation-box" v-for="newContent in ImgNews3" :key="newContent.introId">
-                  <img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
-                  <div class="rotation-div one-text">
-                    {{ newContent.title }}
-                  </div>
-                </div>
-              </a-carousel>
-            </div>
-            <div class="news-img-content d-flex flex-column justify-space-between p-4">
-              <div class="d-flex" v-for="newContent in ImgNews3" :key="newContent.introId">
-                <div class="content-date">
-                  <div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
-                  <div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
-                </div>
-                <div class="flex-1 new-box-content-jj" @click="openPage('news', '0203', newContent.introId)">{{ newContent.title }}</div>
-              </div>
-            </div>
-          </div>
-        </div> -->
       </div>
       <!-- 专题报道 光荣榜 今天我出镜 -->
       <div class="honor-box mt-4 d-flex justify-space-between">
@@ -249,8 +153,8 @@
           <div class="demeanor-content-box">
             <div
               class="demeanor-content mr-4"
-              v-for="item in sceneStyle"
+              v-for="(item, index) in sceneStyle"
-              :key="item.introId"
+              :key="index"
               @click="openPage('news', '0210', item.introId)"
             >
               <img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
@@ -260,8 +164,8 @@
             </div>
             <div
               class="demeanor-content mr-4"
-              v-for="item in sceneStyle"
+              v-for="(item, index) in sceneStyle"
-              :key="item.introId + '1'"
+              :key="index + '1'"
               @click="openPage('news', '0210', item.introId)"
             >
               <img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
@@ -316,6 +220,21 @@ export default {
   },
   methods: {
     ...mapActions('home', ['getContent']),
+    // 设置职工风采为5张图片
+    getFiveImg() {
+      console.log('sceneStyle: ');
+      let imgArr = [...this.sceneStyle];
+      if (imgArr.length < 5) {
+        for (let i = 0; i < imgArr.length; i++) {
+          this.sceneStyle.push(imgArr[i]);
+          if (this.sceneStyle[i].length > 5) {
+            return;
+          }
+        }
+        this.getFiveImg();
+      }
+      console.log('this.sceneStyle: ', this.sceneStyle);
+    },
     async getData(showPage, list, showType) {
       try {
         const param = {
@@ -327,6 +246,10 @@ export default {
         };
         const res = await this.getContent(param);
         this[list] = res.list;
+        if (showPage === '0210') {
+          console.log('showPage: ', showPage);
+          this.getFiveImg();
+        }
       } catch (error) {
         console.log('error: ', error);
       }