热点

src/views/hotforum/Index.vue

@@ -1,28 +1,40 @@
 <template>
-  <div class="hot">
   <div>
+    <div class="hot_2025">
+      <div class="center">
+        <div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="(item,i) in imgData_2025" :key="i">
+          <img class="img" @click="goLearn(item.url)" :src="require(`../../assets/images/hotforum/${item.img}.png`)" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="hot">
       <div class="center">
         <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;">
+<!--      <div style="display: flex;justify-content: center;margin-bottom: 52px;" >-->
-        <img src="../../assets/images/hotforum/foot.png" alt="">
+<!--        <img src="../../assets/images/hotforum/foot.png" alt="">-->
-      </div>
+<!--      </div>-->
     </div>
+
   </div>
 </template>
 
 <script>
-  export default {
+export default {
   name: "hotforum",
   data() {
     return {
+      imgData_2025:[
+        {img:'005',url:'1351506180295131136'},
+        {img:'006',url:''},
+      ],
       imgData:[
         {img:'01',url:'1265897142383042560'},
         {img:'02',url:'1265697724606210048'},
         {img:'003',url:'1280185851054231552'},
-          {img:'4',url:''},
+        // {img:'4',url:''},
       ],
     }
   },
@@ -34,7 +46,7 @@
       }
     },
   },
-  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -72,7 +84,7 @@
   /* 当窗口宽度大于3068px时的样式 */
 }
 @media (min-width: 3000px) {
-.hot{
+  .hot{
     width: 100%;
     // max-width: 1920px;
     min-height: 100%;
@@ -104,10 +116,10 @@
         }
       }
     }
-}
+  }
 }
 @media (min-height: 1500px) {
-.hot{
+  .hot{
     width: 100%;
     // max-width: 1920px;
     min-height: 100%;
@@ -139,10 +151,10 @@
         }
       }
     }
-}
+  }
 }
 @media (min-width: 1928px) and (max-width: 3000px) {
-.hot{
+  .hot{
     width: 100%;
     // max-width: 1920px;
     min-height: 100%;
@@ -174,6 +186,146 @@
         }
       }
     }
+  }
 }
+
+.hot_2025{
+  width: 100%;
+  // max-width: 1920px;
+  min-height: 100%;
+  // min-height: 1373px;
+  background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  .center{
+    max-width: 1270px;
+    max-height: 700px;
+    margin-bottom: 5%;
+    margin-top: 22%;
+    display: flex;
+    flex-wrap: wrap;
+    .item{
+      width: 610px;
+      height: 330px;
+      background: url("../../assets/images/hotforum/border.png") no-repeat;
+      background-size: 100%;
+      padding: 14px;
+      padding-top: 31px;
+      margin-bottom: 59px;
+      cursor: pointer;
+      .img{
+        width: 581px;
+        height: 283px;
+      }
+    }
+  }
+  /* 当窗口宽度大于3068px时的样式 */
 }
+@media (min-width: 3000px) {
+  .hot_2025{
+    width: 100%;
+    // max-width: 1920px;
+    min-height: 100%;
+    // min-height: 1373px;
+    background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    .center {
+      max-width: 2560px;
+      max-height: 1300px;
+      margin-bottom: 5%;
+      margin-top: 30vh;
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        width: 1220px;
+        height: 660px;
+        background: url("../../assets/images/hotforum/border.png") no-repeat;
+        background-size: 100%;
+        padding: 28px;
+        padding-top: 62px;
+        margin-bottom: 59px;
+
+        .img {
+          width: 100%; // 图片宽度占满item宽度
+          height: auto; // 自动调整高度
+        }
+      }
+    }
+  }
+}
+@media (min-height: 1500px) {
+  .hot_2025{
+    width: 100%;
+    // max-width: 1920px;
+    min-height: 100%;
+    // min-height: 1373px;
+    background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    .center {
+      max-width: 1068px;
+      max-height: 580px;
+      margin-bottom: 5%;
+      margin-top: 30vh;
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        width: 500px;
+        height: 271px;
+        background: url("../../assets/images/hotforum/border.png") no-repeat;
+        background-size: 100%;
+        padding: 14px;
+        padding-top: 26px;
+        margin-bottom: 30px;
+
+        .img {
+          width: 100%; // 图片宽度占满item宽度
+          height: auto; // 自动调整高度
+        }
+      }
+    }
+  }
+}
+@media (min-width: 1928px) and (max-width: 3000px) {
+  .hot_2025{
+    width: 100%;
+    // max-width: 1920px;
+    min-height: 100%;
+    // min-height: 1373px;
+    background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    .center {
+      max-width: 1800px;
+      max-height: 1100px;
+      margin-bottom: 5%;
+      margin-top: 35vh;
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        width: 860px;
+        height: 466px;
+        background: url("../../assets/images/hotforum/border.png") no-repeat;
+        background-size: 100%;
+        padding: 28px;
+        padding-top: 48px;
+        margin-bottom: 70px;
+
+        .img {
+          width: 100%; // 图片宽度占满item宽度
+          height: auto; // 自动调整高度
+        }
+      }
+    }
+  }
+}
+
 </style>