热点论坛

src/views/hotforum/Index.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="hot">
-    <div class="center">
+    <div>
-      <div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
+      <div class="center">
-        <img class="img" :src="require(`../../assets/images/hotforum/${item}.png`)" alt="">
+        <div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
+          <img class="img" @click="goLearn(item.url)" :src="require(`../../assets/images/hotforum/${item.img}.png`)" alt="">
+        </div>
+      </div>
+      <div style="display: flex;justify-content: center;margin-bottom: 52px;">
+        <img src="../../assets/images/hotforum/foot.png" alt="">
       </div>
     </div>
   </div>
@@ -13,9 +18,21 @@
     name: "hotforum",
     data() {
       return {
-        imgData:['one','two','one','two'],
+        imgData:[
+          {img:'1',url:'1265897142383042560'},
+          {img:'2',url:'1265697724606210048'},
+          {img:'3',url:''},
+          {img:'4',url:''},
+        ],
       }
     },
+    methods: {
+      goLearn(item){
+        if(item){
+          this.$router.push({path:'/course/detail',query:{id:item}})
+        }
+      },
+    },
   }
 </script>
 
@@ -25,7 +42,7 @@
   // max-width: 1920px;
   min-height: 100%;
   // min-height: 1373px;
-  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background: url("../../assets/images/hotforum/back.jpg") no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
@@ -44,6 +61,7 @@
       padding: 14px;
       padding-top: 31px;
       margin-bottom: 59px;
+      cursor: pointer;
       .img{
         width: 581px;
         height: 283px;
@@ -58,7 +76,7 @@
   // max-width: 1920px;
   min-height: 100%;
   // min-height: 1373px;
-  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background: url("../../assets/images/hotforum/back.jpg") no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
@@ -93,7 +111,7 @@
   // max-width: 1920px;
   min-height: 100%;
   // min-height: 1373px;
-  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background: url("../../assets/images/hotforum/back.jpg") no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
@@ -128,7 +146,7 @@
   // max-width: 1920px;
   min-height: 100%;
   // min-height: 1373px;
-  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background: url("../../assets/images/hotforum/back.jpg") no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
@@ -136,7 +154,7 @@
     max-width: 1800px;
     max-height: 1100px;
     margin-bottom: 5%;
-    margin-top: 30vh;
+    margin-top: 35vh;
     display: flex;
     flex-wrap: wrap;
 
@@ -148,7 +166,7 @@
       padding: 28px;
       padding-top: 48px;
       margin-bottom: 70px;
-      
+
       .img {
         width: 100%; // 图片宽度占满item宽度
         height: auto; // 自动调整高度