'修改页面变黑'

src/pages/distributorSign/contract-details.vue

@@ -57,16 +57,18 @@
       </list-item>
 
       <!-- 联系人 -->
-      <div class="bottom-call">
-        <div class="left">
-          <img src="@/assets/distributorSign/call.png" alt="">
-        </div>
-        <div class="center">
-          <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
-          <p>联系电话：{{ baseInfo.agent_phone }}</p>
-        </div>
-        <div class="right1" @click="callUp(baseInfo.agent_phone)">
-          <img src="@/assets/distributorSign/calls.png" alt="">
+      <div class="bottom-call-wrap">
+        <div class="bottom-call">
+          <div class="left">
+            <img src="@/assets/distributorSign/call.png" alt="">
+          </div>
+          <div class="center">
+            <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
+            <p>联系电话：{{ baseInfo.agent_phone }}</p>
+          </div>
+          <div class="right1" @click="callUp(baseInfo.agent_phone)">
+            <img src="@/assets/distributorSign/calls.png" alt="">
+          </div>
         </div>
       </div>
     </h-content>
@@ -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,17 +155,18 @@
           <input slot="content" v-model="info.product_num" readonly>
         </item>
       </list-item>
-
-      <div class="bottom-call">
-        <div class="left">
-          <img src="@/assets/distributorSign/call.png" alt="">
-        </div>
-        <div class="center">
-          <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
-          <p>联系电话：{{ baseInfo.agent_phone }}</p>
-        </div>
-        <div class="right1" @click="callUp(baseInfo.agent_phone)">
-          <img src="@/assets/distributorSign/calls.png" alt="">
+      <div class="bottom-call-wrap">
+        <div class="bottom-call">
+          <div class="left">
+            <img src="@/assets/distributorSign/call.png" alt="">
+          </div>
+          <div class="center">
+            <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
+            <p>联系电话：{{ baseInfo.agent_phone }}</p>
+          </div>
+          <div class="right1" @click="callUp(baseInfo.agent_phone)">
+            <img src="@/assets/distributorSign/calls.png" alt="">
+          </div>
         </div>
       </div>
     </h-content>
@@ -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,45 +612,55 @@ export default {
     //     justify-content: center;
     //     align-items: center
     // }
-.bottom-call {
-        width: 100%;
-        height: 60px;
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 30px;
+.bottom-call-wrap{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  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;
-           // background: rgba(0,70,156,0.03);
+      width: 16%;
+      height: 60px;
+      // background: rgba(0,70,156,0.03);
       background: #F2F2F2;
-            display: flex;
-            justify-content: center;
-            align-items: center
+      display: flex;
+      justify-content: center;
+      align-items: center
     }
     .center {
-        height: 100%;
-        width: 66%;
-        margin-left: 2px;
-       // background: rgba(0,70,156,0.03);
+      height: 100%;
+      width: 66%;
+      margin-left: 2px;
+      // background: rgba(0,70,156,0.03);
       background: #F2F2F2;
-        p {
-            height: 30px;
-            line-height: 30px;
-            margin-left: 10px;
-            font-family: PingFangSC-Regular;
-            font-size: 14px;
-            color: #656464;
-            letter-spacing: 0.43px;
-        }
+      p {
+        height: 30px;
+        line-height: 30px;
+        margin-left: 10px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #656464;
+        letter-spacing: 0.43px;
+      }
     }
     .right1 {
-        height: 100%;
-        width: 16%;
-        background: rgba(0,70,156,0.20);
-        display: flex;
-        justify-content: center;
-        align-items: center
+      height: 100%;
+      width: 16%;
+      //background: rgba(0,70,156,0.20);
+      background: #F2F2F2;
+      display: flex;
+      justify-content: center;
+      align-items: center
     }
+  }
 }
 .aguremrnt-list {
     display: flex;