From 549c81247d2ec5966d98837c8a86d73affdd018f Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Wed, 24 Jul 2024 10:23:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hotforum/Index.vue | 107 ++++++++++++++++++++++++++++++++++-
 1 file changed, 105 insertions(+), 2 deletions(-)

diff --git a/src/views/hotforum/Index.vue b/src/views/hotforum/Index.vue
index 67bef883..5902901a 100644
--- a/src/views/hotforum/Index.vue
+++ b/src/views/hotforum/Index.vue
@@ -31,8 +31,8 @@
   justify-content: center;
   .center{
     max-width: 1270px;
-    margin-bottom: 66px;
-    margin-top: 285px;
+    margin-bottom: 5%;
+    margin-top: 22%;
     display: flex;
     flex-wrap: wrap;
     .item{
@@ -49,5 +49,108 @@
       }
     }
   }
+  /* 当窗口宽度大于3068px时的样式 */
+}
+@media (min-width: 3068px) {
+.hot{
+  width: 100%;
+  // max-width: 1920px;
+  min-height: 100%;
+  // min-height: 1373px;
+  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  .center {
+    max-width: 2560px;
+    margin-bottom: 5%;
+    margin-top: 22%;
+    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 (max-width: 1384px) {
+.hot{
+  width: 100%;
+  // max-width: 1920px;
+  min-height: 100%;
+  // min-height: 1373px;
+  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  .center {
+    max-width: 1068px;
+    margin-bottom: 5%;
+    margin-top: 22%;
+    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: 2000px) and (max-width: 3068px) {
+.hot{
+  width: 100%;
+  // max-width: 1920px;
+  min-height: 100%;
+  // min-height: 1373px;
+  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  .center {
+    max-width: 1800px;
+    margin-bottom: 5%;
+    margin-top: 22%;
+    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>
\ No newline at end of file