适配

src/components/common/BusinessConsultationDialog.vue

@@ -2,11 +2,13 @@
   <el-dialog
     v-model="dialogVisible"
     :title="currentStep === 'select' ? '' : '商务洽谈'"
-    width="500px"
+    :width="isMobile ? '96vw' : '500px'"
+    :top="isMobile ? '4vh' : '15vh'"
     :close-on-click-modal="true"
     :close-on-press-escape="true"
     class="business-consultation-dialog"
     :z-index="9999"
+    append-to-body
     @close="handleDialogClose"
   >
     <!-- 选择咨询类型 -->
@@ -70,7 +72,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 // Props
 const props = defineProps({
@@ -87,6 +89,20 @@ const emit = defineEmits(['update:visible'])
 const dialogVisible = ref(false)
 const qrCodeError = ref(false)
 const currentStep = ref('select') // 'select' 或 'business'
+const isMobile = ref(false)
+
+const checkIsMobile = () => {
+  isMobile.value = window.innerWidth <= 640
+}
+
+onMounted(() => {
+  checkIsMobile()
+  window.addEventListener('resize', checkIsMobile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkIsMobile)
+})
 
 // 监听visible属性变化
 watch(() => props.visible, (newVal) => {
@@ -142,6 +158,10 @@ const handleDialogClose = () => {
   padding: 20px;
 }
 
+.business-consultation-dialog :deep(.el-dialog__headerbtn) {
+  top: 16px;
+  right: 16px;
+}
 
 .consultation-type-select {
   padding: 30px 20px 40px;
@@ -266,9 +286,11 @@ const handleDialogClose = () => {
 
 .qr-code-image {
   width: 200px;
+  height: auto;
   border-radius: 8px;
   border: 1px solid #e4e7ed;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  object-fit: contain;
 }
 
 .qr-code-placeholder {
@@ -304,20 +326,87 @@ const handleDialogClose = () => {
 }
 
 /* 响应式设计 */
-@media (max-width: 480px) {
-  .business-consultation-dialog {
-    width: 90% !important;
+@media (max-width: 640px) {
+  .business-consultation-dialog :deep(.el-dialog) {
     margin: 0 auto;
+    border-radius: 14px;
+  }
+
+  .business-consultation-dialog :deep(.el-dialog__header) {
+    padding: 12px 12px 0;
+  }
+
+  .business-consultation-dialog :deep(.el-dialog__body) {
+    padding: 14px 12px 18px;
+  }
+
+  .consultation-type-select {
+    padding: 12px 6px 18px;
+  }
+
+  .consultation-title {
+    font-size: 16px;
+    margin-bottom: 18px;
+  }
+
+  .consultation-buttons {
+    gap: 12px;
+  }
+
+  .consultation-button {
+    max-width: 100%;
+    height: 44px;
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  .consultation-content {
+    padding: 10px 4px 16px;
+  }
+
+  .consultation-info h4 {
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .consultation-info p {
+    font-size: 13px;
+    margin-bottom: 6px;
+  }
+
+  .benefits-list {
+    margin: 10px 0 16px 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    text-align: left;
+  }
+
+  .benefits-list li {
+    font-size: 13px;
+    padding-left: 18px;
+  }
+
+  .qr-code-wrapper {
+    margin-bottom: 10px;
   }
 
   .qr-code-image,
   .qr-code-placeholder {
-    width: 120px;
-    height: 120px;
+    width: 70vw;
+    max-width: 180px;
   }
 
-  .consultation-content {
-    padding: 16px 0;
+  .qr-code-image {
+    height: auto;
+  }
+
+  .qr-code-tip {
+    font-size: 12px;
+  }
+
+  .consultation-buttons :deep(.el-button__text) {
+    font-size: 15px;
   }
 }
 </style>

src/pages/certification/IframeCallback.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 
-import { Check, Loading } from '@element-plus/icons-vue'
+import { Check } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const scene = ref('auth') // auth: 企业认证, sign: 合同签署

src/pages/certification/components/ContractSign.vue

@@ -37,10 +37,8 @@
 
 <script setup>
 import {
-    CheckIcon,
-    DocumentTextIcon
+  DocumentTextIcon
 } from '@heroicons/vue/24/outline'
-import { ElMessage } from 'element-plus'
 
 defineProps({
   companyName: {