联系我们弹窗

src/components/ContactUsDialog/index.vue

+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="联系我们"
+    width="480px"
+    :close-on-click-modal="false"
+    @update:model-value="handleUpdate"
+    @close="handleClose"
+  >
+    <div class="contact-content">
+      <div class="contact-item">
+        <div class="contact-label">邮箱：</div>
+        <div class="contact-value">{{ email }}</div>
+      </div>
+      <div class="contact-item">
+        <div class="contact-label">手机号：</div>
+        <div class="contact-value">{{ phone }}</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  email: {
+    type: String,
+    default: 'contact@example.com'
+  },
+  phone: {
+    type: String,
+    default: '138-0000-0000'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+function handleUpdate(val) {
+  emit('update:modelValue', val)
+}
+
+function handleClose() {
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-content {
+  padding: 10px 20px;
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .contact-label {
+      width: 90px;
+      font-size: 16px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    .contact-value {
+      flex: 1;
+      font-size: 16px;
+      color: #1f4aae;
+      word-break: break-all;
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -159,7 +159,7 @@
         <div class="name">服务支持</div>
         <div class="more">了解更多 ></div>
       </div>
-      <div class="content-detail">
+      <div class="content-detail" @click="handleContact">
         <img src="@/assets/images/indexImg/content2.png" alt=""/>
         <div class="name">联系我们</div>
         <div class="more">了解更多 ></div>
@@ -183,6 +183,8 @@
         <iframe v-show="iframeShow" ref="iframe" :src="iframeSrc" width="100%" height="700px"></iframe>
       </div>
     </el-dialog>
+
+    <ContactUsDialog v-model="contactDialogVisible" />
   </div>
 </template>
 
@@ -198,6 +200,7 @@ import {ref} from 'vue'
 import {getPartner} from "@/api/industry.js";
 import {useRouter} from "vue-router";
 import {parseTime} from "../utils/ruoyi.js";
+import ContactUsDialog from '@/components/ContactUsDialog/index.vue'
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 // const baseImgUrl = window.location.origin
@@ -217,6 +220,7 @@ const carouselHeight = ref(500); // 默认高度
 const partnerList = ref([])
 const infoList = ref([])
 const infoBottomList = ref([])
+const contactDialogVisible = ref(false)
 const router = useRouter()
 
 
@@ -339,6 +343,11 @@ getInfoList()
 function handleInfoDetails(id) {
   router.push(`/information/informationDetail?id=${id}`)
 }
+
+// 联系我们弹窗
+function handleContact() {
+  contactDialogVisible.value = true
+}
 </script>
 
 <style scoped lang="scss">

src/views/industryApplications/index.vue

@@ -33,7 +33,7 @@
         <div class="name">服务支持</div>
         <div class="more">了解更多 ></div>
       </div>
-      <div class="content-detail">
+      <div class="content-detail" @click="handleContact">
         <img src="@/assets/images/indexImg/content2.png" alt=""/>
         <div class="name">联系我们</div>
         <div class="more">了解更多 ></div>
@@ -46,6 +46,8 @@
     </div>
 
     <div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div>
+
+    <ContactUsDialog v-model="contactDialogVisible" />
   </div>
 </template>
 
@@ -55,8 +57,10 @@ import {getSolution} from "@/api/industry.js";
 import {parseTime, selectDictLabel} from "@/utils/ruoyi.js";
 import {useRouter} from "vue-router";
 import {getDictDatas} from "@/utils/dict.js";
+import ContactUsDialog from "@/components/ContactUsDialog/index.vue";
 
 const solutionList = ref([])
+const contactDialogVisible = ref(false)
 const router = useRouter();
 
 // 定义变量存储两个字典数据
@@ -84,6 +88,11 @@ getData()
 function handleSolution(id) {
   router.push(`/industryApplications/detail?id=${id}`)
 }
+
+// 联系我们弹窗
+function handleContact() {
+  contactDialogVisible.value = true
+}
 </script>
 
 <style scoped lang="scss">