add swiper 新闻轮播图

Andy
1 parent cca792f0
Showing 1 changed file with 49 additions and 5 deletions
webintroduce/src/views/home.vue
@@ -80,8 +80,21 @@
         <h2>新闻动态</h2>
       </div>
       <div class="news-bd">
-        <div class="focus swiper-container swiper-container-horizontal" id="swiper-container-news">
-        </div>
+          <swiper :options="newswiperOption" ref="newsSwiper" class="focus swiper-container" id="swiper-container-news">
+            <!-- slides -->
+            <swiper-slide class="red-slide" v-for="item in swiperItem" :key="item">
+                <a class="swiper-slide news_a">
+                  <div class="news_title">
+                    <p title="">{{item.newsTitle}}</p>
+                  </div>
+                  <img class="banner" :src="item.imgUrl" alt="" width="100%">
+                </a>
+            </swiper-slide>
+
+            <!-- Optional controls -->
+            <div class="swiper-pagination news-pagination" slot="pagination"></div>
+          </swiper>
+
         <div class="newslist">
           <ul>
             <li v-for="(news,index) in newsLists" :key="index" @click="goWXnews(news.href)">
@@ -123,6 +136,36 @@ export default {
         //   delay: 3000
         // },
       },
+      newswiperOption:{
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        // pagination: {
+        //   el: ".swiper-pagination",
+        //   clickable: true
+        // },
+        autoplay: 3000,
+        speed: 1000,
+      },
+      swiperItem:[
+        {
+          "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
+          "newsTitle":"中兴智能交通助力西部大发展，建设甘肃省周边“一带一路”沿线城市的智慧停车",
+          "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
+          "time":"2019-01-06"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
+          "newsTitle":"【公司要闻】2018年年底，赤峰智慧停车项目正式上线运营",
+          "imgUrl":"http://www.zte-its.com/ckfinder/userfiles/images/Snap2(34).jpg",
+          "time":"2018-12-30"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
+          "newsTitle":"中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
+          "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
+          "time":"2019-01-14"
+        }
+      ],
       newsLists:[
         {
           "id":"1",
@@ -197,6 +240,7 @@ export default {
   computed: {
     swiper() {
       return this.$refs.mySwiper.swiper
+      return this.$refs.newsSwiper.swiper
     }
   },
   mounted() {
@@ -519,9 +563,9 @@ export default {
     margin-left: 340px;
   }
   .news-pagination .swiper-pagination-bullet{
-    width:28px;
-    height:4px;
-    background:rgba(255,255,255,1);
+    width:28px!important;
+    height:4px!important;
+    background:rgba(255,255,255,1)!important;
     opacity: 0.5;
     border-radius:0;
   }