'修改页面变黑'

src/pages/distributorSign/contract-details.vue

@@ -57,6 +57,7 @@
       </list-item>
 
       <!-- 联系人 -->
+      <div class="bottom-call-wrap">
         <div class="bottom-call">
           <div class="left">
             <img src="@/assets/distributorSign/call.png" alt="">
@@ -69,6 +70,7 @@
             <img src="@/assets/distributorSign/calls.png" alt="">
           </div>
         </div>
+      </div>
     </h-content>
     <h-content v-if="tabNum === 1">
       <list-item :item-height="44" class="second-part">
@@ -136,7 +138,9 @@
       <div class="repay-plan">
         <p @click="repayPlan">查看还款计划</p>
       </div>
-      <div class="equipment-list">设备清单</div>
+      <div class="equipment-list-fund">
+        <span></span>
+        <p>设备清单</p></div>
       <list-item :item-height="44" class="second-part">
         <item>
           <div slot="name" class="font-color">参数项</div>
@@ -151,7 +155,7 @@
           <input slot="content" v-model="info.product_num" readonly>
         </item>
       </list-item>
-
+      <div class="bottom-call-wrap">
         <div class="bottom-call">
           <div class="left">
             <img src="@/assets/distributorSign/call.png" alt="">
@@ -164,6 +168,7 @@
             <img src="@/assets/distributorSign/calls.png" alt="">
           </div>
         </div>
+      </div>
     </h-content>
     <h-content v-if="tabNum === 2">
       <list-item :item-height="56">
@@ -473,9 +478,6 @@ export default {
         line-height: 24px;
       }
 }
-  .content{
-    background: #ffffff;
-  }
 .name-box {
       display: inline-block;
       text-align: center;
@@ -540,6 +542,7 @@ export default {
 .repay-plan {
     height: 44px;
     width: 100%;
+  margin-top: -10px;
    // background: rgba(0,70,156,0.03);
   background: #F2F2F2;
     p {
@@ -555,10 +558,32 @@ export default {
         margin-left: 16px;
     }
 }
+  .equipment-list-fund{
+    height: 40px;
+    line-height: 40px;
+    background-color: #fafafa;
+    display: flex;
+    align-items: center;
+    color: #00469c;
+    font-size: 15px;
+    //margin-left: 16px;
+    position: relative;
+    margin-top: -10px;
+    span{
+      width: 4px;
+      height: 20px;
+      background: #00469c;
+    }
+    p{
+      padding-left: 10px;
+    }
+  }
 .equipment-list {
       height: 40px;
       line-height: 40px;
       background-color: #fafafa;
+      display: flex;
+      align-items: center;
       color: #00469c;
       font-size: 15px;
       margin-left: 16px;
@@ -587,12 +612,20 @@ export default {
     //     justify-content: center;
     //     align-items: center
     // }
-.bottom-call {
+.bottom-call-wrap{
   width: 100%;
-        height: 60px;
+  height: 100px;
   display: flex;
-        flex-direction: row;
-        margin-bottom: 30px;
+  justify-content: center;
+  align-items: flex-start;
+  background: #ffffff;
+  margin-top: -10px;
+  .bottom-call {
+   width: 100%;
+    height: 62%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .left {
       width: 16%;
       height: 60px;
@@ -621,11 +654,13 @@ export default {
     .right1 {
       height: 100%;
       width: 16%;
-        background: rgba(0,70,156,0.20);
+      //background: rgba(0,70,156,0.20);
+      background: #F2F2F2;
       display: flex;
       justify-content: center;
       align-items: center
     }
+  }
 }
 .aguremrnt-list {
     display: flex;