首页行业动态

src/views/HomeView.vue

@@ -54,6 +54,10 @@
               <p style="    color: rgba(115, 115, 124, .6);    font-size: 13px;
     color: #95959d;
     line-height: 24px;
+    -webkit-line-clamp: 3;  
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
     text-align: justify;">{{ newsitem.content }}
               </p>
             </div>
@@ -80,19 +84,37 @@
       </div>
       <div class="index_2" style="padding-bottom: 75px;width: 80%;margin: 0 auto;">
         <div style="display: flex;">
-          <div class="content2-left">
+          <div class="content2-left flow" style="position: relative;">
             <div>
               <h3>行业动态</h3>
               <h6>INDUSTRY TRENDS</h6>
             </div>
-            <div class="textbox" v-html="hydata.content">
-
+            <div class="textbox" v-html="hydata[index].content">
+  
             </div>
+            <div class="textbox" style="line-height: 26px;width: 80%;-webkit-line-clamp: 5;  
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;" >
+                {{ hydata[textindex].name }}
+            </div>
+            <div style="color: skyblue;font-size: 50px;position: absolute;bottom: 0;"><span style="margin-right: 20px;cursor: pointer;" @click="back"><</span><span style="cursor: pointer;" @click="next">></span></div>
           </div>
           <div class="content2-right" style="cursor: pointer;">
-            <a :href="hydata.url" target="_blank"> 
-              <img :src="hydata.src" style="width: 100%;object-fit: contain;"> 
+            <div ref="swipe" class="swiper-container swiper7" style="height: 300px;">
+          <div class="swiper-wrapper" >
+            <div class="swiper-slide a" v-for="item in hydata"> <a :href="item.url" target="_blank"> 
+              <img :src="item.picture" style="width: 100%;object-fit: contain;"> 
             </a>
+              </div>
+
+          </div>
+          <div class="swiper-pagination"></div>
+          <div style="position: relative;">
+        
+        </div>
+        </div>
+           
            
           </div>
         </div>
@@ -194,12 +216,15 @@ import { achievementPic, hyDtai, swiperimg, getnews, backgroundText, smallPictur
 export default {
   data() {
     return {
-      hydata: { src: '' },
+      index:0,
+      hydata: [],
       imgarr: [],
       achievementarr: [],
       newsitem: {},
       bgtextitem: {},
-      smallPicturearr: []
+      smallPicturearr: [],
+      swipe:null,
+      textindex:0
     }
 
   },
@@ -232,9 +257,23 @@ export default {
 
     //行业动态
     hyDtai().then((res) => {
-      this.hydata.src = res.data[0].picture
-      this.hydata.content = res.data[0].content
-      this.hydata.url=res.data[0].url
+      this.hydata=res.data
+      // this.hydata.src = res.data[0].picture
+      // this.hydata.content = res.data[0].content
+      // this.hydata.url=res.data[0].url
+      // this.hydata.name=res.data[0].name
+      this.$nextTick(() => {
+    this.swipe=    new Swiper('.swiper7', {
+          loop: true,
+          // autoplay: {
+          //   delay: 4100,
+          //   disableOnInteraction: false,
+          // },
+
+        
+        }
+        )
+      })
     })
     //背景图文轮播图
     smallPicture().then((res) => {
@@ -306,6 +345,25 @@ export default {
 
   },
   methods: {
+    next(){
+      this.swipe.slideNext()
+      if(this.textindex<this.hydata.length-1){
+        this.textindex=this.textindex+1
+      }else{
+        this.textindex=0
+      }
+  
+      
+    },
+    back(){
+      this.swipe.slidePrev()
+      if(this.textindex>0){
+        this.textindex=this.textindex-1
+      }else{
+        this.textindex=this.hydata.length-1
+      }
+  
+    },
     switchto() {
       this.$router.push({
         path: '/aboutus',
@@ -559,4 +617,10 @@ h6 {
   color: rgba(255, 255, 255, .5);
   font-weight: bold;
 }
+.flow{
+
+}
+.a::after{
+ background-color: unset;
+}
 </style>