feat(leave-source): 更新留资组件样式和布局

- 调整 postcss 配置，修改 px 转换规则
- 更新 App.vue 中组件引用
- 新增通用底部组件 LeaveCommonFooter
- 新增 PC 端专属组件：CallPhone、ContractMine、QrCode
- 更新 ContentCard 组件，引入通用底部

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

plugins/leave-source/postcss.config.js

@@ -16,11 +16,14 @@ module.exports = {
       // 小于或等于 1px 的像素值不进行转换
       minPixelValue: 1,
       mediaQuery: false,
-      exclude: [
-        /node_modules/,
+      include: [
         // 匹配 src 下的 pc 目录（及子目录）
         // 正则含义：路径中包含 "/src/pc/" 或 "\src\pc\"（兼容不同系统路径分隔符）
-        /(\/|\\)src(\/|\\)pc(\/|\\)/
+        /(\/|\\)src(\/|\\)mobile(\/|\\)/
+
+      ],
+      exclude: [
+        /node_modules/,
       ],
       replace: true
     })

plugins/leave-source/src/App.vue

@@ -7,10 +7,10 @@
       mobile弹框
     </button>
 
-    <PCLeaveDialog :visible.sync="pcDialogVisible" />
-    <!-- <MobileLeavePopup />
+    <!-- <PCLeaveDialog :visible.sync="pcDialogVisible" /> -->
+    <!-- <MobileLeavePopup /> -->
     <PCContentCard />
-    <MobileContentCard /> -->
+    <!-- <MobileContentCard /> -->
   </div>
 </template>
 

plugins/leave-source/src/components/common/footer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="leave-common-footer">
+    <div class="leave-common-footer-content">
+      <div class="leave-common-title">
+        联系专属客服，还可领取以下福利
+      </div>
+      <div class="leave-common-footer-list">
+        <div v-for="item in list" :key="item.title" class="leave-common-footer-item">
+          <div class="leave-common-footer-item-icon">
+            <img :src="item.icon" alt="">
+          </div>
+          <div class="leave-common-footer-item-title">
+            {{ item.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeaveCommonFooter',
+  data() {
+    return {
+      list: [
+        {
+          icon: '',
+          title: '帮您订阅设置'
+        },
+        {
+          icon: '',
+          title: '商机线索推荐'
+        },
+        {
+          icon: '',
+          title: '招标行业报告'
+        },
+        {
+          icon: '',
+          title: '拟建项目资料'
+        },
+        {
+          icon: '',
+          title: '投标技巧分享'
+        },
+        {
+          icon: '',
+          title: '标书技巧分享'
+        }
+      ]
+    }
+  },
+  mounted() {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.leave-common-footer {
+  .leave-common-title {
+    text-align: center;
+  }
+  .leave-common-footer-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    .leave-common-footer-item {
+      display: flex;
+      text-align: center;
+      .leave-common-footer-item-icon {
+        img {
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .leave-common-footer-item-title {
+        font-size: 16px;
+        color: #333;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="call-phone-container">
+    <div class="call-phone">
+      <div class="call-phone-title">
+        1.直接电话咨询:
+      </div>
+      <div class="call-phone-content">
+        拨打<span class="number">400-108-6670</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.call-phone-container {
+  .number {
+    color: $main_color;
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="contract-mine-container">
+    <div class="contract-mine-title">
+      3.专属客服主动联系您：
+    </div>
+    <div class="contract-mine-content">
+      <label for="phone" class="contract-mine-label">联系电话</label>
+      <input id="phone" type="text" class="contract-mine-input">
+    </div>
+    <button>与我联系</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContractMine'
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,10 @@
+<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>
+  </div>
+</template>

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

@@ -1,12 +1,19 @@
 <template>
   <div>
-    content-card-mobile
+    content-card-pc
+    <LeaveCommon />
   </div>
 </template>
 
 <script>
+import LeaveCommon from '@/components/common/footer'
+
 export default {
   name: 'ContentCard',
+  components: {
+    LeaveCommon
+  },
+
   data() {
     return {}
   },