fix: 新产品布局修改

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

@@ -21,7 +21,7 @@
   width: 100%;
   height: 100%;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -34,11 +34,12 @@
 
     .pageTitle {
       margin-bottom: 18px;
-      height: 5rem;
-      font-size: 2.63rem;
+      padding: 1.5% 0 0 0;
+      height: 10%;
+      font-size: 40px;
       font-weight: 400;
       color: #FFFFFF;
-      line-height: 4rem;
+      line-height: 10%;
       text-shadow: 0 11px 15px rgba(0, 18, 44, 0.48);
       text-align: center;
       background-image: url('@/assets/images/cloud/newProducts/标题.png');
@@ -49,17 +50,17 @@
 
     .page-time {
       position: absolute;
-      top: 6px;
+      top: 0px;
       right: 20px;
-      font-size: .5rem;
+      font-size: 24px;
       font-weight: 400;
       color: #FFFFFF;
 
       .pageIcon{
         display: inline-block;
         margin-left: 10px;
-        width: 12px;
-        height: 12px;
+        width: 14px;
+        height: 14px;
         cursor: pointer;
       }
     }
@@ -93,10 +94,6 @@
     margin-bottom: 0;
   }
 
-  .title-img {
-    width: 35.6em;
-  }
-
   .container {
     min-height: 396px;
     width: 100%;
@@ -104,8 +101,8 @@
   }
 
   .cus-arrow {
-    width: 2em;
-    height: 2em;
+    width: 20px;
+    height: 20px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -115,12 +112,12 @@
     cursor: pointer;
 
     &.cus-arrow-prev {
-      left: 2em;
+      left: 20px;
       background-image: url('@/assets/images/cloud/newProducts/arrow_left.png');
     }
 
     &.cus-arrow-next {
-      right: 2em;
+      right: 20px;
       background-image: url('@/assets/images/cloud/newProducts/arrow_right.png');
     }
   }
@@ -133,26 +130,9 @@
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 1em;
+  gap: 20px;
   margin: 0 auto;
-  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;
-  }
+  width: 100%;
 }
 
 .card {
@@ -161,15 +141,14 @@
   overflow: hidden;
   cursor: pointer;
   width: 49%;
-  height: 24rem;
+  height: 50%;
   background-image: url('@/assets/images/cloud/newProducts/框.png');
   background-position: center;
 
   .card-title {
     position: relative;
-    left: 4%;
-    margin-top: 0.5rem;
-    font-size: 1.5rem;
+    padding: 0 10%;
+    font-size: 24px;
     font-weight: 400;
     color: #262626;
     font-family: "zihun";
@@ -179,7 +158,7 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 1rem;
+    padding: 10px;
     background: linear-gradient(#fff, rgb(147,219,246));
     width: 100%;
     overflow: hidden;
@@ -193,13 +172,11 @@
   }
 
   .card-desc{
-    padding: 1rem;
+    padding: 10px 0px;
     text-align: center;
-    font-size: 1rem;
-    background-position-x: -.5rem;
-    height: 5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    font-size: 16px;
+    background-position-x: -8px;
+    height: 70px;
     background-image: url(@/assets/images/cloud/newProducts/副标题.png);
     font-family: pingfang;
     font-weight: bold;
@@ -213,6 +190,7 @@
       overflow: hidden;
       width: 100%;
       white-space: nowrap;
+      padding: 0 12px 0 0;
     }
   }
 
@@ -234,7 +212,7 @@
   }
 
   .card-content{
-    padding: 1rem 1rem 1rem 2.2rem;
+    padding: 10px 10%;
 
 
     &::after{
@@ -249,20 +227,20 @@
       width: 65%;
 
       img{
-        height: 17.9rem;
+        height: 95%;
         width: 100%;
       }
     }
 
     .card-info {
       float: left;
-      width: 33%;
+      width: 35%;
     }
 
     .card-tags {
       position: relative;
-      padding: 0 1rem;
-      height: 12rem;
+      padding: 0 10px;
+      height: 24px;
 
       .card-list {
 
@@ -285,7 +263,7 @@
             height: 44px;
             margin-top: 10px;
             line-height: 44px;
-            font-size: 0.88rem;
+            font-size: 14px;
             font-weight: 400;
             color: #FFFFFF;
 
@@ -297,7 +275,7 @@
 
             .card-tag-icon {
               display: inline-block;
-              margin-right: .5rem;
+              margin-right: 8px;
               width: 5px;
               height: 5px;
               background: #E1F4FD;
@@ -333,21 +311,16 @@
   }
 
   .card-title {
-    font-size: 1.2rem !important;
+    font-size: 14px !important;
   }
 
   .card {
     background-size: 100% 100%;
-    height: 17.6rem;
   }
 
   .card-content{
     .card-img {
       width: 48% !important;
-
-      img{
-        height: 12.6rem !important;
-      }
     }
   }