联系我们放置wxcard

src/views/layout/LayoutContainer.vue

@@ -7,6 +7,7 @@ import {
   SwitchButton
 } from '@element-plus/icons-vue'
 import { onMounted, onUnmounted, ref, computed } from 'vue'
+import ContactUs from '@/views/layout/components/ContactUs.vue'
 import { userStore, messageStore, searchStore, groupStore } from '@/stores'
 import router from '@/router'
 import MyCard from '@/views/layout/components/MyCard.vue'
@@ -33,6 +34,7 @@ const messageData = messageStore()
 const searchData = searchStore()
 const groupData = groupStore()
 const isShowMyCard = ref(false)
+const contactUsRef = ref(null)
 
 const userStatusDesc = computed(() => {
   switch (userData.user.status) {
@@ -225,10 +227,12 @@ const onExit = async () => {
       </div>
 
       <div class="footer">
-        <el-icon class="footer-item" title="联系我们"><contactusIcon /></el-icon>
-        <el-icon class="footer-item" title="源码地址"><githubIcon /></el-icon>
-        <el-icon class="footer-item" title="退出" :size="20" @click="onExit()"
-          ><SwitchButton />
+        <el-icon class="footer-item" title="联系我们" @click="contactUsRef.show($event)">
+          <contactusIcon />
+        </el-icon>
+        <el-icon class="footer-item" title="源码"><githubIcon /></el-icon>
+        <el-icon class="footer-item" title="退出" :size="20" @click="onExit()">
+          <SwitchButton />
         </el-icon>
       </div>
     </el-aside>
@@ -238,6 +242,7 @@ const onExit = async () => {
     <MyCard :isShow="isShowMyCard" @close="isShowMyCard = false"></MyCard>
     <UserCard></UserCard>
     <GroupCard></GroupCard>
+    <ContactUs ref="contactUsRef"></ContactUs>
   </el-container>
 </template>
 

src/views/layout/components/ContactUs.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const isVisible = ref(false)
+const elementRef = ref()
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+const modalStyle = computed(() => {
+  return {
+    top: `${mouseY.value - 400}px`, // 400 is height if image
+    left: `${mouseX.value}px`
+  }
+})
+
+const clickListener = (e) => {
+  if (!isVisible.value) return
+  if (!elementRef.value?.contains(e.target)) {
+    close()
+  }
+}
+
+const close = () => {
+  isVisible.value = false
+  document.removeEventListener('click', clickListener)
+}
+
+const show = async (event) => {
+  isVisible.value = true
+  mouseX.value = event.clientX + 20 // 20px offset from mouse X
+  mouseY.value = event.clientY
+
+  document.removeEventListener('click', clickListener)
+  setTimeout(() => {
+    document.addEventListener('click', clickListener)
+  }, 0)
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+  <div ref="elementRef" v-if="isVisible" class="modal" :style="modalStyle">
+    <img src="@/assets/image/wxcard.jpg" alt="联系我们" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.modal {
+  position: fixed;
+  z-index: 1000;
+}
+
+.modal img {
+  height: 400px;
+  border-radius: 8px;
+}
+</style>