feat(leave-source): 重构离站页样式和布局

- 添加新图片资源，优化页面视觉效果
- 新增 pic-icon.scss 样式文件，统一图标样式
- 创建 footerDataConfig 组件，用于配置页脚数据
- 修改 CallPhone 组件样式，调整电话号码颜色
- 重写 footer 组件，使用新图标和数据配置
- 更新 content-card 组件，添加 ContractCard 组件
- 新增 ContractCard 组件，用于展示联系客服信息
- 调整 content-dialog 组件样式，优化弹窗布局

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

plugins/leave-source/src/assets/style/common.scss

@@ -1,6 +1,7 @@
 @import './mixin';
 @import './variables.scss';
 @import './layout.scss';
+@import './pic-icon.scss';
 
 html {
   height: 100%;
@@ -163,8 +164,8 @@ input[type='number'] {
 
   &.checked {
     border: 0;
-    background: url('~@/assets/images/icon/icon-checked.png') no-repeat
-      center center;
+    background: url('~@/assets/images/icon/icon-checked.png') no-repeat center
+      center;
     background-size: 16px;
 
     &[disabled] {
@@ -175,5 +176,5 @@ input[type='number'] {
 }
 
 a {
-  user-select: text!important;
+  user-select: text !important;
 }

plugins/leave-source/src/assets/style/pic-icon.scss

@@ -0,0 +1,40 @@
+.j-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.j-base-icon {
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.wh24 {
+  width: 24px;
+  height: 24px;
+}
+
+// 选择器前的 checkbox，需要添加 j-icon 基类
+.icon-fast {
+  background-image: url(@/assets/images/icon-fast.png);
+  background-size: contain;
+}
+.icon-unique {
+  background-image: url(@/assets/images/icon-unique.png);
+  background-size: contain;
+}
+.icon-advantage {
+  background-image: url(@/assets/images/icon-advantage.png);
+  background-size: contain;
+}
+.icon-customer {
+  background-image: url(@/assets/images/icon-customer.png);
+  background-size: contain;
+}
+.icon-precise {
+  background-image: url(@/assets/images/icon-precise.png);
+  background-size: contain;
+}
+.icon-support {
+  background-image: url(@/assets/images/icon-support.png);
+  background-size: contain;
+}

plugins/leave-source/src/components/common/index.js

@@ -0,0 +1,37 @@
+const footerDataConfig = {
+  title: '营收倍增，就用剑鱼！',
+  list: [
+    {
+      icon: 'icon-fast',
+      title: '及时',
+      subtitle: '每日商机实时推荐'
+    },
+    {
+      icon: 'icon-unique',
+      title: '独家',
+      subtitle: '独家项目引荐机会'
+    },
+    {
+      icon: 'icon-precise',
+      title: '防漏',
+      subtitle: '精准订阅项目推送'
+    },
+    {
+      icon: 'icon-customer',
+      title: '人工',
+      subtitle: '1V1功能使用培训'
+    },
+    {
+      icon: 'icon-support',
+      title: '支撑',
+      subtitle: '分析项目提高中标'
+    },
+    {
+      icon: 'icon-advantage',
+      title: '优处',
+      subtitle: '咨询反馈优先处理'
+    }
+  ]
+}
+
+export default footerDataConfig

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

@@ -1,9 +1,7 @@
 <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>
       </div>
@@ -14,7 +12,7 @@
 <style lang="scss" scoped>
 .call-phone-container {
   .number {
-    color: $main_color;
+    color: #2abed1;
   }
 }
 </style>

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

@@ -2,15 +2,19 @@
   <div class="leave-common-footer">
     <div class="leave-common-footer-content">
       <div class="leave-common-title">
-        联系专属客服，还可领取以下福利
+        {{ list.title }}
       </div>
       <div class="leave-common-footer-list">
-        <div v-for="item in list" :key="item.title" class="leave-common-footer-item">
+        <div
+          v-for="item in list.list"
+          :key="item.title"
+          class="leave-common-footer-item"
+        >
           <div class="leave-common-footer-item-icon">
-            <img :src="item.icon" alt="">
+            <span class="j-icon" :class="item.icon" />
           </div>
           <div class="leave-common-footer-item-title">
-            {{ item.title }}
+            {{ item.title }}-{{ item.subtitle }}
           </div>
         </div>
       </div>
@@ -19,45 +23,22 @@
 </template>
 
 <script>
+import dataList from '@/components/common/index.js'
+
 export default {
   name: 'LeaveCommonFooter',
   data() {
     return {
-      list: [
-        {
-          icon: '',
-          title: '帮您订阅设置'
-        },
-        {
-          icon: '',
-          title: '商机线索推荐'
-        },
-        {
-          icon: '',
-          title: '招标行业报告'
-        },
-        {
-          icon: '',
-          title: '拟建项目资料'
-        },
-        {
-          icon: '',
-          title: '投标技巧分享'
-        },
-        {
-          icon: '',
-          title: '标书技巧分享'
-        }
-      ]
+      list: dataList
     }
-  },
-  mounted() {
-  },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .leave-common-footer {
+  background: url(@/assets/images/BG.png) no-repeat;
+  background-size: cover;
   .leave-common-title {
     text-align: center;
   }

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

@@ -1,15 +1,18 @@
 <template>
   <div>
+    <ContractCard />
     <LeaveCommon />
   </div>
 </template>
 
 <script>
-import LeaveCommon from '@/components/common/footer'
+import ContractCard from './contract-card.vue'
+import LeaveCommon from './components/footer'
 
 export default {
   name: 'ContentCard',
   components: {
+    ContractCard,
     LeaveCommon
   },
 
@@ -18,13 +21,9 @@ export default {
   },
   methods: {
     // 手动触发绑定弹框
-    handle() {
-
-    }
+    handle() {}
   }
 }
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

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

@@ -17,7 +17,7 @@ export default {
   name: 'PCContentDialog',
   components: {
     AnimatedOverlay,
-    ContentCard,
+    ContentCard
   },
   props: {
     visible: {
@@ -31,11 +31,19 @@ export default {
     },
     close() {
       this.$emit('close')
-    },
-  },
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-
+.pc-leave-dialog {
+  ::v-deep {
+    .overlay-content {
+      margin: 300px auto;
+      width: 700px;
+      background: #fff;
+    }
+  }
+}
 </style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="contract-card-container">
+    <div class="contract-card-title">
+      <span class="title">联系专属客服，申请免费体验</span>
+      <span class="subtitle">（以下三种方式任选）</span>
+    </div>
+    <div class="contract-card-content">
+      <CallPhone @handle="handle" />
+      <ContractMine @handle="handle" />
+      <QrCode @handle="handle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CallPhone from './components/CallPhone.vue'
+import ContractMine from './components/ContractMine.vue'
+import QrCode from './components/QrCode.vue'
+
+export default {
+  name: 'ContractCard',
+  components: {
+    CallPhone,
+    ContractMine,
+    QrCode
+  },
+  methods: {
+    handle() {
+      this.$emit('handle')
+    }
+  }
+}
+</script>