refactor(leave-source): 重构离店来源组件样式和布局

- 更新了 CallPhone、ContractMine、QrCode 等组件的样式
- 调整了合同卡片的布局结构
- 优化了底部栏的样式

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

plugins/leave-source/src/lib/pc/components/CallPhone.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="call-phone-container">
     <div class="call-phone">
-      <div class="call-phone-title">1.直接电话咨询:</div>
+      <div class="call-phone-title">
+        1. 联系客服:
+      </div>
       <div class="call-phone-content">
-        拨打<span class="number">400-108-6670</span>
+        拨打&nbsp;<span class="number">18829413659</span>
       </div>
     </div>
   </div>
@@ -11,8 +13,17 @@
 
 <style lang="scss" scoped>
 .call-phone-container {
+  .call-phone {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .call-phone-content {
+    padding-left: 18px;
+    margin-top: 8px;
+  }
   .number {
     color: #2abed1;
+    font-weight: bold;
   }
 }
 </style>

plugins/leave-source/src/lib/pc/components/ContractMine.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="contract-mine-container">
     <div class="contract-mine-title">
-      3.专属客服主动联系您：
+      3. 专属客服主动联系您：
     </div>
     <div class="contract-mine-content">
-      <label for="phone" class="contract-mine-label">联系电话</label>
+      <label for="phone" class="contract-mine-label">联系电话：</label>
       <input id="phone" type="text" class="contract-mine-input">
     </div>
-    <button>与我联系</button>
+    <button class="contract-mine-btn">
+      与我联系
+    </button>
   </div>
 </template>
 
@@ -17,4 +19,44 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.contract-mine-container {
+  .contract-mine-title {
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d1d1d;
+  }
+  .contract-mine-content {
+    display: flex;
+    align-items: center;
+    margin: 8px 0 20px 0;
+    padding-left: 18px;
+    .contract-mine-label {
+      font-size: 14px;
+      line-height: 22px;
+      color: #686868;
+      margin-right: 8px;
+    }
+    .contract-mine-input {
+      width: 138px;
+      height: 24px;
+      border-radius: 4px;
+      border: 1px solid #E0E0E0;
+      padding: 4px 16px;
+    }
+  }
+  .contract-mine-btn {
+    margin-left: 18px;
+    width: 132px;
+    height: 36px;
+    background-color: #2ABED1;
+    border-radius: 8px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #FFFFFF;
+    border: none;
+    cursor: pointer;
+  }
+
+}
+</style>

plugins/leave-source/src/lib/pc/components/QrCode.vue

@@ -1,10 +1,50 @@
 <template>
   <div class="qr-code-container">
-    <div class="qr-code-title">
-      2.添加企业微信:
-    </div>
-    <div class="qr-code">
-      <img src="https://cdn.jsdelivr.net/gh/zouyaoji/vue-cesium-admin@master/public/images/qrcode.png" alt="">
+    <div class="qr-code-content">
+      <div class="qr-code-title">
+        2. 添加企业微信:
+      </div>
+      <div class="qr-code">
+        <img src="@/assets/images/商务合作.png" alt="">
+      </div>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.qr-code-container {
+  display: flex;
+  width: 185px;
+  padding: 0 20px 0 32px;
+  .qr-code-content {
+    padding: 0 20px;
+  }
+  .qr-code-title {
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d1d1d;
+  }
+  .qr-code {
+    margin-top: 8px;
+    padding-left: 14px;
+    img {
+      width: 122px;
+      height: 122px;
+    }
+  }
+  &::before {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 148px;
+    background: #ECECEC;
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 148px;
+    background: #ECECEC;
+  }
+}
+</style>

plugins/leave-source/src/lib/pc/components/footer.vue

@@ -9,12 +9,13 @@
           v-for="item in list.list"
           :key="item.title"
           class="leave-common-footer-item"
+          :class="{ setStyle: item.title === '人工' }"
         >
           <div class="leave-common-footer-item-icon">
             <span class="j-icon" :class="item.icon" />
           </div>
           <div class="leave-common-footer-item-title">
-            {{ item.title }}-{{ item.subtitle }}
+            <span class="text">{{ item.title }}-</span>{{ item.subtitle }}
           </div>
         </div>
       </div>
@@ -41,15 +42,26 @@ export default {
   background-size: cover;
   .leave-common-title {
     text-align: center;
+    color: #2ABED1;
+    font-size: 16px;
+  }
+  .leave-common-footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0 16px;
   }
   .leave-common-footer-list {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
+    margin-top: 16px;
+    width: 424px;
     .leave-common-footer-item {
       display: flex;
-      text-align: center;
+      justify-content: center;
+      margin-bottom: 16px;
       .leave-common-footer-item-icon {
         img {
           width: 16px;
@@ -57,8 +69,15 @@ export default {
         }
       }
       .leave-common-footer-item-title {
-        font-size: 16px;
-        color: #333;
+        margin-left: 8px;
+        font-size: 14px;
+        color: #1d1d1d;
+        .text {
+          font-weight: bold;
+        }
+      }
+      &.setStyle {
+        margin-right: 2px;
       }
     }
   }

plugins/leave-source/src/lib/pc/content-dialog.vue

@@ -41,8 +41,9 @@ export default {
   ::v-deep {
     .overlay-content {
       margin: 300px auto;
-      width: 700px;
+      width: 732px;
       background: #fff;
+      border-radius: 8px;
     }
   }
 }

plugins/leave-source/src/lib/pc/contract-card.vue

@@ -5,9 +5,9 @@
       <span class="subtitle">（以下三种方式任选）</span>
     </div>
     <div class="contract-card-content">
-      <CallPhone @handle="handle" />
-      <ContractMine @handle="handle" />
+      <CallPhone class="call-phone" @handle="handle" />
       <QrCode @handle="handle" />
+      <ContractMine class="contract-mine" @handle="handle" />
     </div>
   </div>
 </template>
@@ -31,3 +31,34 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.contract-card-container {
+  padding: 32px 32px;
+  .contract-card-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      font-size: 18px;
+      line-height: 28px;
+      color: #1D1D1D;
+    }
+    .subtitle {
+      margin-top: 4px;
+      font-size: 16px;
+      line-height: 24px;
+      color: #686868;
+    }
+  }
+  .contract-card-content {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 24px;
+    height: 154px;
+    // .contract-mine {
+    //   flex: 1;
+    // }
+  }
+}
+</style>