提交修改

src/components/Footer.vue

@@ -3,27 +3,22 @@
     <div class="flex-row">
       <div class="footer_box flex-col">
         <span class="footer_title">公司备案信息</span>
-        <br>
-        <span
-            class="text_44">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
-        <br>
-        <br>
-        <br>
-        <div class="flex-row">
+        <span class="text_44"
+          style="margin-top: 1vw;">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
+        <div class="flex-row" style="margin-top: 3vw;">
           <span class="footer_title">联系我们</span>
-          <span class="footer_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导航</span>
+          <span
+            class="footer_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导航</span>
         </div>
-        <br>
-        <div class=" flex-row">
+        <div class=" flex-row" style="margin-top:1vw;">
           <span class="text_44">客服热线：400-888-9999</span>
-          <span class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：四川省成都市天府新区正兴街道上和领誉</span>
+          <span
+            class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：四川省成都市天府新区正兴街道上和领誉</span>
         </div>
       </div>
-      <span class="paragraph_6">微信扫一扫<br/>关注阳生万物微信</span>
-      <img class="image_20"
-           src="@/assets/footer/qrCode.png"/>
-      <img class="image_21"
-           src="@/assets/footer/footer.png"/>
+      <span class="paragraph_6">微信扫一扫<br />关注阳生万物微信</span>
+      <img class="image_20" src="@/assets/footer/qrCode.png" />
+      <img class="image_21" src="@/assets/footer/footer.png" />
     </div>
   </footer>
 </template>

src/views/contact-us.vue

@@ -102,7 +102,7 @@
   <el-dialog
       v-model="dialogVisible"
       :showClose="false"
-      width="45vw"
+      :width="dialogWidth"
       class="dialog justify-center align-center"
   >
     <div class="dialog_image-wrapper_1  justify-end">
@@ -131,13 +131,39 @@
 </template>
 <script setup>
 import SecondHeader from '../components/second_header.vue'
-import {ref} from "vue";
+import {ref, computed, onMounted, onUnmounted} from "vue";
 import {ElMessage} from 'element-plus'
 import bgHeaderUrl from '@/assets/contactUs/BC.png'
 
 const dialogVisible = ref(false)
 const loading = ref(false)
 
+// 响应式dialog宽度
+const windowWidth = ref(window.innerWidth)
+
+const dialogWidth = computed(() => {
+  if (windowWidth.value <= 480) {
+    return '90vw'
+  } else if (windowWidth.value <= 768) {
+    return '90vw'
+  } else {
+    return '45vw'
+  }
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 // 表单数据
 const form = ref({
   title: '',
@@ -948,4 +974,130 @@ const jobList = ref([{
     font-weight: 500;
   }
 }
+
+/* 手机端dialog适配 */
+@media (max-width: 768px) {
+  .dialog {
+    .dialog_section_1 {
+      width: 85vw !important;
+      height: auto !important;
+      padding: 5vw !important;
+      margin-top: -3vw;
+    }
+
+    .dialog_image-wrapper_1 {
+      width: 85vw !important;
+    }
+
+    .dialog——label_1 {
+      width: 6vw !important;
+      height: 6vw !important;
+    }
+
+    .dialog_box_2 {
+      width: 15vw !important;
+      height: 15vw !important;
+    }
+
+    .dialog_box_3 {
+      width: 75vw !important;
+      height: auto !important;
+    }
+
+    .dialog_text-group_1 {
+      width: 75vw !important;
+      height: auto !important;
+    }
+
+    .dialog_text_1 {
+      font-size: 5vw !important;
+      white-space: normal !important;
+      margin: 3vw 0 !important;
+    }
+
+    .dialog_text_2 {
+      font-size: 3.5vw !important;
+      line-height: 5vw !important;
+    }
+
+    .dialog_box_4 {
+      width: 70vw !important;
+      height: auto !important;
+      margin-top: 8vw !important;
+      padding-top: 8vw !important;
+    }
+
+    .dialog_text-wrapper_1 {
+      width: 70vw !important;
+      white-space: normal !important;
+    }
+
+    .dialog_text_3 {
+      font-size: 3.5vw !important;
+    }
+
+    .dialog_text_4 {
+      font-size: 3.5vw !important;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .dialog {
+    .dialog_section_1 {
+      width: 90vw !important;
+      padding: 6vw !important;
+    }
+
+    .dialog_image-wrapper_1 {
+      width: 90vw !important;
+    }
+
+    .dialog——label_1 {
+      width: 7vw !important;
+      height: 7vw !important;
+    }
+
+    .dialog_box_2 {
+      width: 18vw !important;
+      height: 18vw !important;
+    }
+
+    .dialog_box_3 {
+      width: 80vw !important;
+    }
+
+    .dialog_text-group_1 {
+      width: 80vw !important;
+    }
+
+    .dialog_text_1 {
+      font-size: 5.5vw !important;
+      margin: 4vw 0 !important;
+    }
+
+    .dialog_text_2 {
+      font-size: 4vw !important;
+      line-height: 6vw !important;
+    }
+
+    .dialog_box_4 {
+      width: 75vw !important;
+      margin-top: 10vw !important;
+      padding-top: 10vw !important;
+    }
+
+    .dialog_text-wrapper_1 {
+      width: 75vw !important;
+    }
+
+    .dialog_text_3 {
+      font-size: 4vw !important;
+    }
+
+    .dialog_text_4 {
+      font-size: 4vw !important;
+    }
+  }
+}
 </style>
\ No newline at end of file