feat: 持仓产品详情页 布局样式调整

src/pages/DetailPage/DetailPage.module.less

@@ -17,65 +17,62 @@
   .topArea {
     position: relative;
     flex-shrink: 0;
-    margin-top: 40px;
-    width: 691px;
-    // height: 299px;
-    height: 254px;
+    margin-top: 30px;
+    width: 716px;
+    height: 302px;
     color: #ffffff;
-    // margin-bottom: 10px;
-    // .webpBg("DetailPage/topBg.png");
-    border-radius: 13px;
-    background-image: linear-gradient( 0deg, rgb(170,52,39) 0%, rgb(199,68,54) 100%);
+    margin-bottom: -10px;
+    .webpBg("DetailPage/topBg.png");
+    text-align: center;
 
     .productName {
       position: absolute;
-      left: 149px;
-      top: 0;
-      width: 393px;
-      height: 42px;
-      line-height: 42px;
-      text-align: center;
-      font-size: 28px;
-      background-image: linear-gradient( 0deg, #a5281e 0%, #a2261d 100%);
-      border-radius: 0 0 13px 13px;
+      left: 159px;
+      top: 4px;
+      width: 408px;
+      height: 50px;
+      line-height: 50px;
+      font-size: 32px;
+      color: #FFFFFF;
+      font-weight: bold;
       .lineClamp1();
     }
 
     .label1 {
       position: absolute;
       left: 0;
-      top: 45px;
+      top: 59px;
       width: 100%;
       font-size: 28px;
-      color: rgba(255, 255, 255, 0.6);
-      text-align: center;
+      color: #333333;
     }
 
     .totalProfit {
       position: absolute;
       left: 0;
-      top: 80px;
+      top: 114px;
       width: 100%;
-      font-size: 58px;
+      font-size: 46px;
+      color: #D90300;
       font-weight: bold;
-      text-align: center;
     }
 
     .label2 {
       position: absolute;
       left: 22px;
-      top: 166px;
+      top: 190px;
       width: 30%;
-      font-size: 22px;
-      color: rgba(255, 255, 255, 0.6);
+      font-size: 24px;
+      color: #666666;
     }
 
     .tranche {
       position: absolute;
       left: 22px;
-      top: 198px;
+      top: 226px;
       width: 30%;
-      font-size: 30px;
+      font-size: 36px;
+      color: #232323;
       font-weight: bold;
     }
 
@@ -83,65 +80,64 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 166px;
+      top: 190px;
       width: 30%;
-      font-size: 22px;
-      text-align: center;
-      color: rgba(255, 255, 255, 0.6);
+      font-size: 24px;
+      color: #666666;
     }
 
     .marketValue {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 198px;
+      top: 226px;
       width: 30%;
-      text-align: center;
-      font-size: 30px;
+      font-size: 36px;
+      color: #232323;
       font-weight: bold;
     }
 
     .label4 {
       position: absolute;
       right: 22px;
-      top: 166px;
+      top: 190px;
       width: 30%;
-      font-size: 22px;
-      text-align: right;
-      color: rgba(255, 255, 255, 0.6);
+      font-size: 24px;
+      color: #666666;
     }
 
     .yesterdayProfit {
       position: absolute;
       right: 22px;
-      top: 198px;
+      top: 226px;
       width: 30%;
-      text-align: right;
-      font-size: 30px;
+      font-size: 36px;
+      color: #232323;
       font-weight: bold;
     }
   }
 
   .topArea2 {
     flex-shrink: 0;
-    margin-top: 40px;
-    width: 691px;
-    height: 115px;
-    .webpBg("DetailPage/topBg2.png");
-    color: #ffffff;
+    width: 750px;
+    height: 110px;
+    background: #FCDBDB;
+    box-shadow: 0 3px 8px 0 #EAA7A6;
+    font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
-    // margin-bottom: 10px;
+    margin-bottom: -10px;
 
     .productName {
       //position: absolute;
       //left: 0;
       //top: 55px;
-      width: 100%;
+      width: 78%;
       text-align: center;
-      font-size: 28px;
-      line-height: 28px;
+      font-size: 36px;
+      color: #D90300;
+      .lineClamp1();
     }
   }
 
@@ -153,14 +149,16 @@
 
   .options {
     flex-shrink: 0;
-    width: 709px;
-    height: 465px;
+    width: 750px;
+    height: 400px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
-    .webpBg("DetailPage/bottomBg.png");
+    .sparkBg("DetailPage/bottomBg.png");
+    background-size: 762px 400px;
+    background-position: top center;
 
     .tab {
       position: absolute;
@@ -169,8 +167,8 @@
       width: 100%;
       height: 91px;
 
-      color: #bc251c;
-      font-size: 28px;
+      color: #EA1211;
+      font-size: 32px;
       font-weight: bold;
 
       display: flex;
@@ -186,11 +184,13 @@
       }
 
       .actBar {
-        background-color: rgb(188, 37, 28);
+        font-family: SourceHanSansCN-Bold;
+        background: #EA1211;
+        border-radius: 3px;
         position: absolute;
-        left: 61.5px;
-        top: 85px;
-        width: 252px;
+        left: 80px;
+        top: 75px;
+        width: 215px;
         height: 6px;
       }
     }
@@ -199,8 +199,7 @@
       position: absolute;
       top: 91px;
       width: 634px;
-      margin-top: 28px;
-      margin-bottom: 61px;
+      margin-top: 20px;
 
       .buyInfo {
         display: flex;
@@ -208,15 +207,15 @@
         justify-content: space-between;
 
         & > div {
-          font-size: 32px;
-          color: rgb(50, 50, 50);
+          font-size: 30px;
+          color: #333;
           text-align: center;
           font-weight: bold;
         }
 
         & > span {
-          font-size: 29px;
-          color: rgb(155, 155, 155);
+          font-size: 26px;
+          color: #666;
           text-align: center;
         }
       }
@@ -238,8 +237,7 @@
       position: absolute;
       top: 91px;
       width: 634px;
-      margin-top: 28px;
-      margin-bottom: 61px;
+      margin-top: 20px;
 
       .sellInfo {
         display: flex;
@@ -247,15 +245,15 @@
         justify-content: space-between;
 
         & > div {
-          font-size: 32px;
-          color: rgb(50, 50, 50);
+          font-size: 30px;
+          color: #333;
           text-align: center;
           font-weight: bold;
         }
 
         & > span {
-          font-size: 29px;
-          color: rgb(155, 155, 155);
+          font-size: 26px;
+          color: #666;
           text-align: center;
         }
       }
@@ -281,64 +279,63 @@
           position: absolute;
           top: 24px;
           right: 27px;
-          color: #bc251c;
+          color: #EA1211;
           font-weight: bold;
         }
       }
     }
 
     .tip {
-      margin-top: 14px;
+      margin-top: 20px;
       font-size: 24px;
-      color: rgb(155, 155, 155);
+      color: #999;
       text-align: left;
       min-height: 30px;
     }
 
     .btnArea {
-      margin-top: 10px;
+      margin-top: 16px;
       width: 100%;
-      height: 82px;
+      height: 68px;
       display: flex;
       align-items: center;
       justify-content: space-between;
 
       .btn {
-        width: 268px;
-        height: 82px;
-        border-radius: 41px;
+        width: 260px;
+        height: 68px;
+        border-radius: 34px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 32px;
+        font-size: 28px;
         font-weight: bold;
       }
 
       .simulate {
-        margin-top: 30px;
-        background-color: rgb(188, 37, 28);
+        background-color: #EA1211;
         color: white;
       }
 
       .really {
-        margin-top: 29px;
         background-color: white;
-        color: #bc251c;
-        border: 1px solid #bc251c;
+        color: #EA1211;
+        border: 1px solid #EA1211;
       }
-
     }
   }
 
   .backBtn {
     position: absolute;
-    left: 52px;
-    top: 83px;
-    width: 18px;
-    height: 32px;
+    left: 40px;
+    top: 36px;
+    width: 38px;
+    height: 38px;
     .webpBg("DetailPage/backBtn.png");
     &.backBtn2 {
-      top: 90px;
+      left: 54px;
+      top: 85px;
+      .webpBg("DetailPage/backBtn2.png");
     }
   }
 

src/pages/DetailPage/DetailPage.tsx

@@ -183,17 +183,16 @@ class DetailPage extends React.Component<any, any> {
             {isBuyed
                 ? <div className={styles.topArea}>
                     <div className={styles.productName}>{productName}</div>
-                    <div className={styles.label1}>累计收益</div>
+                    <div className={styles.label1}>累计收益（元）</div>
                     <div className={styles.totalProfit}>{totalProfit / 100}</div>
                     <div className={styles.label2}>持有份额</div>
                     <div className={styles.tranche}>{tranche / 100}</div>
-                    <div className={styles.label3}>持有市值</div>
+                    <div className={styles.label3}>持有市值（元）</div>
                     <div className={styles.marketValue}>{marketValue / 100}</div>
-                    <div className={styles.label4}>昨日收益</div>
+                    <div className={styles.label4}>昨日收益（元）</div>
                     <div className={styles.yesterdayProfit}>{yesterdayProfit / 100}</div>
                 </div>
                 : <div className={styles.topArea2}>
-                    <div className={styles.topBg} />
                     <div className={styles.productName}>{productName}</div>
                 </div>
             }
@@ -204,7 +203,7 @@ class DetailPage extends React.Component<any, any> {
                     <div
                         className={styles.tabItem}
                         style={{
-                            color: tabType == EOpType.Buy ? "#bc251c" : "#000000"
+                            color: tabType == EOpType.Buy ? "#EA1211" : "#333333"
                         }}
                         onClick={() => this.clickTab(EOpType.Buy)}
                     >购买
@@ -212,14 +211,14 @@ class DetailPage extends React.Component<any, any> {
                     <div
                         className={styles.tabItem}
                         style={{
-                            color: tabType == EOpType.Sell ? "#bc251c" : "#000000"
+                            color: tabType == EOpType.Sell ? "#EA1211" : "#333333"
                         }}
                         onClick={() => this.clickTab(EOpType.Sell)}
                     >赎回
                     </div>
                     <motion.div
                         className={styles.actBar}
-                        animate={{ left: (isBuy ? 61.5 : 436.5) * remScale }}
+                        animate={{ left: (isBuy ? 80 : 455) * remScale }}
                     />
                 </div>
                 <motion.div