首页部分修改

src/views/Business/Children/Business.vue

@@ -6,9 +6,10 @@
       <div class="d-flex flex-wrap" style="margin-top: 50px; margin-bottom: 50px">
         <div :key="index" v-for="(item, index) in list" style="width: 30%" :class="(index + 2) % 3 === 0 ? 'mg' : ''">
           <div style="height: 500px">  
-            <div v-if="item.type === 1">
+            <div class="relative" v-if="item.type === 1">
               <!-- <iframe frameborder="0" height=300px width=100% src='https://player.youku.com/embed/XNTE0MjU3MjEwMA=='></iframe>              -->
               <iframe frameborder="0" height="300px" width="100%" :src="item.contentUrl"></iframe> 
+              <img class="cover" :class="[display ===index ? 'none': '']" :id="index" :src="item.picUrl" alt="" @click="fade(index)">
             </div>       
             <!-- <video v-if="item.type !== 3" :poster="item.picUrl"  controls style="width: 100%; height: 300px">
               <source :src="item.contentUrl" type="video/mp4" />
@@ -75,6 +76,7 @@ export default {
       typeNum: '',
       bannerNum: [],
       titleText: '',
+      display: -1
     };
   },
   created() {
@@ -84,6 +86,7 @@ export default {
     onShowSizeChange(current, size) {
       this.current = current;
       this.getData();
+      this.display = -1
     },
     async getData(getParam) {
       try {
@@ -111,6 +114,15 @@ export default {
     openPage(url) {
       window.open(url);
     },
+    fade(index){
+      console.log(index)
+      // var obj = document.getElementById(index)
+      this.display = index
+      // this.list[index].contentUrl = this.list[index].contentUrl + '?autoplay=1'
+      // console.log(this.list[index].contentUrl)
+
+
+    },
   },
 };
 </script>
@@ -137,4 +149,20 @@ text-truncate{
   white-space: nowrap;
   display: block
 }
+
+.cover{
+  width: 473px;
+  height: 300px;
+  position: absolute;
+  // top: -310px;
+  left: 0px;
+
+}
+.relative{
+  position: relative;
+}
+.none{
+  display: none;
+}
+
 </style>

src/views/FirstPage/FirstPage.vue

@@ -54,9 +54,10 @@
         <div class="d-flex flex-wrap" style="margin-top: 50px; margin-bottom: 50px">
         <div :key="index" v-for="(item, index) in list" style="width: 30%" :class="(index + 2) % 3 === 0 ? 'mg' : ''">
           <div style="height: 500px">  
-            <div v-if="item.type === 1">
+            <div class="relative" v-if="item.type === 1">
               <!-- <iframe frameborder="0" height=300px width=100% src='https://player.youku.com/embed/XNTE0MjU3MjEwMA=='></iframe>              -->
-              <iframe frameborder="0" height=300px width=100% :src="item.contentUrl"></iframe> 
+              <iframe frameborder="0" height="300px" width="100%" :src="item.contentUrl"></iframe> 
+              <img class="cover" :class="[display ===index ? 'none': '']" :id="index" :src="item.picUrl" alt="" @click="fade(index)">
             </div>       
             <!-- <video v-if="item.type !== 3" :poster="item.picUrl"  controls style="width: 100%; height: 300px">
               <source :src="item.contentUrl" type="video/mp4" />
@@ -71,20 +72,29 @@
           </div>
          
         </div>
-        <!-- <a-pagination
+
+     
+        
+        
+        </div>
+
+
+        </div>
+        <div class="d-flex">
+          <a-pagination
           :current="current"
           :page-size="pageSize"
           :total="total"
           @change="onShowSizeChange"
           class="pagination"
-          style="text-align: right!important;"
           show-less-items
           show-quick-jumper
           v-show="total > 2"
-        /> -->
+        />
-      </div>
+
+        </div>
+        
       </div>
-    </div>
   </div>
 </template>
 
@@ -130,6 +140,7 @@ export default {
       current: 1,
       pageSize: 3,
       total: 10,
+      display: -1
     };
   },
   created() {
@@ -144,6 +155,7 @@ export default {
     onShowSizeChange(current, size) {
       this.current = current;
       this.getData();
+      this.display = -1
     },
 
     async getData(getParam) {
@@ -187,6 +199,19 @@ export default {
       this.setActDetail(item);
       this.$router.push('/ItInformation/ActDetails');
     },
+    openPage(url) {
+      window.open(url);
+    },
+    fade(index){
+      console.log(index)
+      // var obj = document.getElementById(index)
+      this.display = index
+      // this.list[index].contentUrl = this.list[index].contentUrl + '?autoplay=1'
+      // console.log(this.list[index].contentUrl)
+
+
+    },
+
   },
 };
 </script>
@@ -251,10 +276,24 @@ export default {
   margin: 0 5%;
 }
 .pagination {
-  margin-left: 300px;
+  // margin-left: 300px;
+  margin-left: auto;
   margin-top: 48px;
-  text-align: right!important;
+  // float: right!important;
 }
+.cover{
+  width: 392px;
+  height: 300px;
+  position: absolute;
+  // top: -310px;
+  left: 0px;
 
+}
+.relative{
+  position: relative;
+}
+.none{
+  display: none;
+}
 
 </style>