fix: 更新

src/pages/cloud/introduction/newproducts/index.less

@@ -21,7 +21,7 @@
   width: 100%;
   height: 100%;
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -34,12 +34,11 @@
 
     .pageTitle {
       margin-bottom: 18px;
-      padding: 1.5% 0 0 0;
-      height: 10%;
-      font-size: 40px;
+      height: 5rem;
+      font-size: 2.63rem;
       font-weight: 400;
       color: #FFFFFF;
-      line-height: 10%;
+      line-height: 4rem;
       text-shadow: 0 11px 15px rgba(0, 18, 44, 0.48);
       text-align: center;
       background-image: url('@/assets/images/cloud/newProducts/标题.png');
@@ -50,17 +49,17 @@
 
     .page-time {
       position: absolute;
-      top: 0px;
+      top: 6px;
       right: 20px;
-      font-size: 24px;
+      font-size: .5rem;
       font-weight: 400;
       color: #FFFFFF;
 
       .pageIcon{
         display: inline-block;
         margin-left: 10px;
-        width: 14px;
-        height: 14px;
+        width: 12px;
+        height: 12px;
         cursor: pointer;
       }
     }
@@ -94,6 +93,10 @@
     margin-bottom: 0;
   }
 
+  .title-img {
+    width: 35.6em;
+  }
+
   .container {
     min-height: 396px;
     width: 100%;
@@ -101,8 +104,8 @@
   }
 
   .cus-arrow {
-    width: 20px;
-    height: 20px;
+    width: 2em;
+    height: 2em;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -112,12 +115,12 @@
     cursor: pointer;
 
     &.cus-arrow-prev {
-      left: 20px;
+      left: 2em;
       background-image: url('@/assets/images/cloud/newProducts/arrow_left.png');
     }
 
     &.cus-arrow-next {
-      right: 20px;
+      right: 2em;
       background-image: url('@/assets/images/cloud/newProducts/arrow_right.png');
     }
   }
@@ -130,9 +133,26 @@
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 1em;
   margin: 0 auto;
-  width: 100%;
+  width: 42em;
+
+  &[num="2"],
+  &[num="4"] {
+    width: (42em * 2 + 1em);
+  }
+
+  &[num="3"],
+  &[num="5"],
+  &[num="6"] {
+    width: (42em * 3 + 2em);
+  }
+
+  &[num="1"],
+  &[num="2"],
+  &[num="3"] {
+    margin-bottom: 5em;
+  }
 }
 
 .card {
@@ -141,14 +161,15 @@
   overflow: hidden;
   cursor: pointer;
   width: 49%;
-  height: 50%;
+  height: 24rem;
   background-image: url('@/assets/images/cloud/newProducts/框.png');
   background-position: center;
 
   .card-title {
     position: relative;
-    padding: 0 10%;
-    font-size: 24px;
+    padding: 0 4%;
+    margin-top: 0.5rem;
+    font-size: 1.5rem;
     font-weight: 400;
     color: #262626;
     font-family: "zihun";
@@ -158,7 +179,7 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 10px;
+    padding: 1rem;
     background: linear-gradient(#fff, rgb(147,219,246));
     width: 100%;
     overflow: hidden;
@@ -172,11 +193,11 @@
   }
 
   .card-desc{
-    padding: 10px 0px;
+    padding: 1rem;
     text-align: center;
-    font-size: 16px;
-    background-position-x: -8px;
-    height: 70px;
+    font-size: 1rem;
+    background-position-x: -.5rem;
+    height: 5rem;
     background-image: url(@/assets/images/cloud/newProducts/副标题.png);
     font-family: pingfang;
     font-weight: bold;
@@ -190,7 +211,6 @@
       overflow: hidden;
       width: 100%;
       white-space: nowrap;
-      padding: 0 12px 0 0;
     }
   }
 
@@ -212,7 +232,7 @@
   }
 
   .card-content{
-    padding: 10px 10%;
+    padding: 1rem 4%;
 
 
     &::after{
@@ -227,7 +247,7 @@
       width: 65%;
 
       img{
-        height: 95%;
+        height: 17.9rem;
         width: 100%;
       }
     }
@@ -239,8 +259,8 @@
 
     .card-tags {
       position: relative;
-      padding: 0 10px;
-      height: 24px;
+      padding: 0 1rem;
+      height: 12rem;
 
       .card-list {
 
@@ -263,7 +283,7 @@
             height: 44px;
             margin-top: 10px;
             line-height: 44px;
-            font-size: 14px;
+            font-size: 0.88rem;
             font-weight: 400;
             color: #FFFFFF;
 
@@ -275,7 +295,7 @@
 
             .card-tag-icon {
               display: inline-block;
-              margin-right: 8px;
+              margin-right: .5rem;
               width: 5px;
               height: 5px;
               background: #E1F4FD;
@@ -311,16 +331,21 @@
   }
 
   .card-title {
-    font-size: 14px !important;
+    font-size: 1.2rem !important;
   }
 
   .card {
     background-size: 100% 100%;
+    height: 17.6rem;
   }
 
   .card-content{
     .card-img {
       width: 48% !important;
+
+      img{
+        height: 12.6rem !important;
+      }
     }
   }
 
@@ -364,5 +389,159 @@
 
   .panel {
     font-size: 16px;
+    gap: 1.5em;
+    width: 44em;
+
+    &[num="2"],
+    &[num="4"] {
+      width: (44em * 2 + 2em);
+    }
+
+    &[num="3"],
+    &[num="5"],
+    &[num="6"] {
+      width: (44em * 3 + 3em);
+    }
+
+    &[num="1"],
+    &[num="2"],
+    &[num="3"] {
+      margin-bottom: 5em;
+    }
+  }
+
+  .card {
+    height: 19rem;
+    background-size: contain;
+
+    .card-title {
+      padding: 0 8%;
+      margin-top: 0.5rem;
+      font-size: 1.4rem;
+    }
+
+    .back {
+      padding: 1rem;
+      font-size: 10px !important;
+    }
+
+    .card-desc{
+      background-position-x: -.8rem;
+      height: 3.4rem;
+      padding: 0.5rem;
+    }
+
+    .card-desc-2 {
+      div {
+        font-size: 12px !important;
+      }
+    }
+
+    .card-content{
+      padding: 1rem 8%;
+
+        img{
+          height: 13.5rem !important;
+        }
+    }
+  }
+
+  .card-tag{
+    height: 40px !important;
+    line-height: 40px !important;
+    font-size: .4rem !important;
+
+    &.card-tag-mini {
+      height: 30px !important;
+      line-height: 30px !important;
+    }
+  }
+}
+
+@media screen and (min-width: 2000px) {
+  .newproducts {
+    p, h1 {
+      font-size: 28px;
+    }
+
+    .cus-arrow {
+      &.cus-arrow-prev {
+        left: 20px;
+      }
+
+      &.cus-arrow-next {
+        right: 20px;
+      }
+    }
+  }
+
+  .panel {
+    font-size: 24px;
+    gap: 1.5em;
+    width: 54em;
+
+    &[num="2"],
+    &[num="4"] {
+      width: (54em * 2 + 2em);
+    }
+
+    &[num="3"],
+    &[num="5"],
+    &[num="6"] {
+      width: (54em * 3 + 8em);
+    }
+
+    &[num="1"],
+    &[num="2"],
+    &[num="3"] {
+      margin-bottom: 5em;
+    }
+  }
+
+  .card {
+    height: 28rem;
+    width: 45%;
+    background-size: contain;
+
+    .card-title {
+      padding: 0 13%;
+      margin-top: 1rem;
+      font-size: 1.8rem;
+    }
+
+    .back {
+      padding: 1.2rem;
+      font-size: 14px !important;
+    }
+
+    .card-desc{
+      background-position-x: -.8rem;
+      height: 6rem;
+    }
+
+    .card-desc-2 {
+      div {
+        font-size: 18px !important;
+      }
+    }
+
+    .card-content{
+      padding: 1rem 13%;
+
+        img{
+          height: 20.7rem !important;
+        }
+    }
+  }
+
+  .card-tag{
+    height: 52px !important;
+    line-height: 52px !important;
+    font-size: 1rem !important;
+
+    &.card-tag-mini {
+      height: 46px !important;
+      line-height: 46px !important;
+    }
   }
 }