fix: 新产品介绍

src/pages/cloud/introduction/newproducts/Card.js

 import React from 'react';
 import classnames from 'classnames';
 import { chunk } from 'lodash-es';
-import cover from './images/default.png';
+import cover from '@/assets/images/cloud/newProducts/default.png';
 import styles from './index.less';
 
 const assetPath = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`;
@@ -31,10 +31,15 @@ const Card = ({ onCardClick, ...props }) => {
           {config && config['系统描述'] ? <div className={styles.back}>{config && config['系统描述']}</div> : null}
         </div>
         <div className={classnames(styles['card-info'])}>
-          <div className={classnames(styles['card-desc'])}>
+          <div
+            className={classnames(
+              styles['card-desc'],
+              styles[`card-desc-${config && config['副标题'] ? config['副标题'].split('\\n')?.length : '0'}`],
+            )}
+          >
             {config &&
               config['副标题'] &&
-              config['副标题'].split('\\n').map((item, index) => <div key={index}>{item}</div>)}
+              config['副标题'].split('\\n').map((item, index) => (index < 2 ? <div key={item}>{item}</div> : null))}
           </div>
           <div className={classnames(styles['card-tags'])}>
             <div className={classnames(styles['card-list'])}>
@@ -43,12 +48,10 @@ const Card = ({ onCardClick, ...props }) => {
                   <div key={index} className={classnames(styles['card-list-content'])}>
                     {item.map(child => (
                       <div
-                        className={classnames(styles['card-tag'])}
-                        style={{
-                          height: config['系统特点'].split(',').length <= 6 ? 44 : 40,
-                          lineHeight: config['系统特点'].split(',').length <= 6 ? '44px' : '40px',
-                          marginTop: config['系统特点'].split(',').length <= 8 ? 10 : 0,
-                        }}
+                        className={classnames(
+                          styles['card-tag'],
+                          config['系统特点'].split(',').length <= 6 ? '' : styles['card-tag-mini'],
+                        )}
                         key={child}
                       >
                         <i className={classnames(styles['card-tag-icon'])} />

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

@@ -12,7 +12,7 @@ import { actionCreators } from '@/containers/App/store';
 import { defaultApp } from '@/micro';
 import Cookies from 'js-cookie';
 import { encode } from 'js-base64';
-import icon from './images/退出.png';
+import icon from '@/assets/images/cloud/newProducts/退出.png';
 import Panel from './Panel';
 import LoginAction from '../../../user/login/login';
 import styles from './index.less';

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

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: zihun;
-  src: url('./images/字魂143号-正酷超级黑(1).ttf')
+  src: url('@/assets/images/cloud/newProducts/字魂143号-正酷超级黑(1).ttf')
 }
 @font-face {
   font-family: pingfang;
-  src: url('./images/PingFang Bold_0.ttf')
+  src: url('@/assets/images/cloud/newProducts/PingFang Bold_0.ttf')
 }
 
 
@@ -25,15 +25,11 @@
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  background-image: url('./images/bg.png');
+  background-image: url('@/assets/images/cloud/newProducts/bg.png');
   font-size: 20px;
 
   .page {
     position: relative;
-    //display: flex;
-    //flex-direction: column;
-    //align-items: center;
-    //justify-content: space-evenly;
     height: 100%;
 
     .pageTitle {
@@ -45,7 +41,7 @@
       line-height: 4rem;
       text-shadow: 0 11px 15px rgba(0, 18, 44, 0.48);
       text-align: center;
-      background-image: url('./images/标题.png');
+      background-image: url('@/assets/images/cloud/newProducts/标题.png');
       background-size: 100% 100%;
       background-repeat: no-repeat;
       font-family: "zihun";
@@ -56,7 +52,6 @@
       top: 6px;
       right: 20px;
       font-size: .5rem;
-      font-family: Microsoft YaHei;
       font-weight: 400;
       color: #FFFFFF;
 
@@ -121,12 +116,12 @@
 
     &.cus-arrow-prev {
       left: 2em;
-      background-image: url('./images/arrow_left.png');
+      background-image: url('@/assets/images/cloud/newProducts/arrow_left.png');
     }
 
     &.cus-arrow-next {
       right: 2em;
-      background-image: url('./images/arrow_right.png');
+      background-image: url('@/assets/images/cloud/newProducts/arrow_right.png');
     }
   }
 }
@@ -134,7 +129,6 @@
 .panel {
   font-size: 20px;
   height: 100%;
-  // padding: 0 200px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -168,13 +162,13 @@
   cursor: pointer;
   width: 49%;
   height: 24rem;
-  background-image: url('./images/框.png');
+  background-image: url('@/assets/images/cloud/newProducts/框.png');
   background-position: center;
 
   .card-title {
     position: relative;
-    margin-top: 0.5rem;
     left: 4%;
+    margin-top: 0.5rem;
     font-size: 1.5rem;
     font-weight: 400;
     color: #262626;
@@ -194,7 +188,6 @@
     transition: all 0.5s;
     transition-delay: 0.2s;
     font-size: 8px;
-    font-family: Microsoft YaHei;
     font-weight: 400;
     color: #000000;
   }
@@ -202,31 +195,36 @@
   .card-desc{
     padding: 1rem;
     text-align: center;
-    //display: flex;
     font-size: 1rem;
     background-position-x: -.5rem;
-    //align-items: center;
-    //justify-content: center;
     height: 5rem;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
-    background-image: url(./images/副标题.png);
+    background-image: url(@/assets/images/cloud/newProducts/副标题.png);
     font-family: pingfang;
     font-weight: bold;
     color: #FFFFFF;
     background-size: cover;
   }
 
+  .card-desc-2 {
+    div {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+      white-space: nowrap;
+    }
+  }
+
   &:hover {
-    background-image: url('./images/框_active.png');
-    // transform: scale(1.05);
+    background-image: url('@/assets/images/cloud/newProducts/框_active.png');
     .back {
       opacity: 1;
       transform: translateY(0);
     }
 
     .card-desc {
-      background-image: url(./images/副标题_active.png);
+      background-image: url('@/assets/images/cloud/newProducts/副标题_active.png');
       color: #000000;
     }
 
@@ -248,9 +246,11 @@
     .card-img {
       position: relative;
       float: left;
+      width: 65%;
 
       img{
         height: 17.9rem;
+        width: 100%;
       }
     }
 
@@ -282,13 +282,19 @@
           .card-tag{
             float: left;
             width: 50%;
-            height: 35px;
-            line-height: 35px;
+            height: 44px;
+            margin-top: 10px;
+            line-height: 44px;
             font-size: 0.88rem;
-            font-family: Microsoft YaHei;
             font-weight: 400;
             color: #FFFFFF;
 
+            &.card-tag-mini {
+              margin-top: 5px;
+              height: 40px;
+              line-height: 40px;
+            }
+
             .card-tag-icon {
               display: inline-block;
               margin-right: .5rem;
@@ -326,15 +332,21 @@
     }
   }
 
+  .card-title {
+    font-size: 1.2rem !important;
+  }
+
   .card {
     background-size: 100% 100%;
-    height: 21rem;
+    height: 17.6rem;
   }
 
   .card-content{
     .card-img {
+      width: 48% !important;
+
       img{
-        height: 9rem !important;
+        height: 12.6rem !important;
       }
     }
   }
@@ -343,6 +355,18 @@
     width: 50% !important;
   }
 
+  .card-tag{
+    margin-top: 6px !important;
+    height: 38px !important;
+    line-height: 38px !important;
+
+    &.card-tag-mini {
+      margin-top: 4px !important;
+      height: 30px !important;
+      line-height: 30px !important;
+    }
+  }
+
   .panel {
     font-size: 14px;
   }