*

dsk-operate-ui/src/views/detail/party-a/financial/index.vue

@@ -3,10 +3,10 @@
     <div class="financial-header">
       <div class="common-title">财务简析</div>
       <div class="flex-box header-box">
-        <div class="header-item">总资产<div class="header-item-amount"><span>9332.6</span>亿元</div></div>
-        <div class="header-item">净资产<div class="header-item-amount"><span>459.4</span>亿元</div></div>
-        <div class="header-item">营业收入<div class="header-item-amount"><span>150.0</span>亿元</div></div>
-        <div class="header-item">授信余额<div class="header-item-amount"><span>192.11</span>亿元</div></div>
+        <div class="header-item">总资产<div class="header-item-amount"><span>9332.6</span>亿元</div><img src="@/assets/images/detail/financial/financial_header01_ico.png"></div>
+        <div class="header-item">净资产<div class="header-item-amount"><span>459.4</span>亿元</div><img src="@/assets/images/detail/financial/financial_header02_ico.png"></div>
+        <div class="header-item">营业收入<div class="header-item-amount"><span>150.0</span>亿元</div><img src="@/assets/images/detail/financial/financial_header03_ico.png"></div>
+        <div class="header-item">授信余额<div class="header-item-amount"><span>192.11</span>亿元</div><img src="@/assets/images/detail/financial/financial_header04_ico.png"></div>
       </div>
     </div>
     <div class="financial-zcqk">
@@ -24,9 +24,10 @@
       <div class="common-title">负债情况及偿债能力</div>
       <div class="flex-box zwqk-box">
         <div class="zwqk-info">
-          <div class="zwqk-title">总负责</div>
+          <div class="zwqk-title">总负债</div>
           <div class="zwqk-amount"><span>468.65</span>亿元</div>
           <div class="zwqk-pro">资产负债率 50%</div>
+          <img src="@/assets/images/detail/financial/zwqk_bg_ico.png">
         </div>
         <div id="myEcharts" style="width: 444px;height:250px; margin: 0 auto;"></div>
       </div>
@@ -192,30 +193,61 @@ export default {
         flex-wrap: wrap;
         margin: 0 -8px;
         .header-item{
-          width: 252px;
+          width: calc(25% - 16px);
           height: 120px;
           margin: 20px 8px 0;
           padding: 24px 24px;
           font-size: 18px;
+          position: relative;
+          overflow: hidden;
+          img{
+            position: absolute;
+            right: 0;
+            bottom: 0;
+          }
           &:nth-child(1){
             color: #182980;
             background: url("~@/assets/images/detail/financial/financial_header01.png") no-repeat;
-            background-size: cover;
+            background-size: 100% 100%;
+            img{
+              width: 115px;
+              height: 115px;
+              right: -9px;
+              bottom: -16px;
+            }
           }
           &:nth-child(2){
             color: #2B1880;
             background: url("~@/assets/images/detail/financial/financial_header02.png") no-repeat;
-            background-size: cover;
+            background-size: 100% 100%;
+            img{
+              width: 107px;
+              height: 116px;
+              right: -9px;
+              bottom: -17px;
+            }
           }
           &:nth-child(3){
             color: #184280;
             background: url("~@/assets/images/detail/financial/financial_header03.png") no-repeat;
-            background-size: cover;
+            background-size: 100% 100%;
+            img{
+              width: 109px;
+              height: 99px;
+              right: -12px;
+              bottom: -2px;
+            }
           }
           &:nth-child(4){
             color: #184A80;
             background: url("~@/assets/images/detail/financial/financial_header04.png") no-repeat;
-            background-size: cover;
+            background-size: 100% 100%;
+            img{
+              width: 84px;
+              height: 115px;
+              right: -10px;
+              bottom: -18px;
+            }
           }
           .header-item-amount{
             font-size: 12px;
@@ -302,13 +334,21 @@ export default {
         padding-top: 20px;
         justify-content: normal;
         .zwqk-info{
-          width: 520px;
+          width: 50%;
           height: 248px;
           padding: 54px 24px 10px 24px;
-          margin-right: 48px;
           color: #4D4C4B;
           background: url("~@/assets/images/detail/financial/zwqk_bg.png") no-repeat;
-          background-size: cover;
+          background-size: 100% 100%;
+          position: relative;
+          overflow: hidden;
+          img{
+            width: 239px;
+            height: 239px;
+            position: absolute;
+            right: -54px;
+            bottom: -31px;
+          }
           .zwqk-title{
             font-size: 22px;
             font-weight: 400;
@@ -344,7 +384,7 @@ export default {
         justify-content: space-between;
         flex-wrap: wrap;
         .list-item{
-          width: 252px;
+          width: calc(25% - 16px);
           height: 144px;
           padding: 23px;
           margin-top: 24px;

dsk-operate-ui/src/views/detail/party-a/index.vue

@@ -67,6 +67,7 @@ export default {
     margin-right: 16px;
   }
   .part-right{
+    min-width: 1088px;
     width: 100%;
   }
 </style>