看房，首页调整

1 week ago · 1636369054
8 changed files with 129 additions and 17 deletions
--- a/epmet-apartment-front/index.html
+++ b/epmet-apartment-front/index.html
@ -7,8 +7,8 @@
    <link rel="apple-touch-icon" href="/favicon.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青岛市免租金住房保障平台</title>
-    <script type="module" crossorigin src="/epmet-apartment-front/static/index-DBbyya2E.js"></script>
-    <link rel="stylesheet" crossorigin href="/epmet-apartment-front/static/index-CIEWPu3s.css">
+    <script type="module" crossorigin src="/epmet-apartment-front/static/index-9LQWe98S.js"></script>
+    <link rel="stylesheet" crossorigin href="/epmet-apartment-front/static/index-BlAFvOcD.css">
  </head>
  <body>
    <div id="app"></div>
--- a/src/assets/images/guide.png
+++ b/src/assets/images/guide.png
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@ -77,6 +77,7 @@
      </div>
    </div>
  </nav>
+  <ImagePreview v-model:visible="showImagePreview" @close="showImagePreview = false" :image-url="imageUrl" :image-alt="previewImageAlt" />
 </template>

 <script setup lang="ts">
@ -85,13 +86,15 @@ import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { switchLanguage } from '@/i18n'
 import { useRouter, useRoute } from 'vue-router';
+import ImagePreview from '@/components/ImagePreview.vue';
+import imageUrl from '@/assets/images/guide.png';
 const route = useRoute();
 const router = useRouter();
 const { locale } = useI18n()

 const showMobileMenu = ref(false)
 const showLanguageMenu = ref(false)
-
+const showImagePreview = ref(false)
 const navigationConfig = [
  {
    name: '首页',
@ -109,10 +112,14 @@ const navigationConfig = [
    key: 'Showings'
  },
  {
-    name: '续期申请',
-    path: '/renewal',
+    name: '选房指南',
+    path: '',
+    key: 'guide'
+  }, {
+    name: '学历汇',
+    path: '',
    key: 'renewal'
-  }
+  },
 ]
 const currentLanguage = computed(() => locale.value)

@ -133,12 +140,15 @@ const changeLanguage = (lang: string) => {
  showLanguageMenu.value = false
 }
 function handleClick(item) {
-  if ( item.key === 'renewal') {
+  if (item.key === 'renewal') {
    // alert('功能正在开发中')]
    ElNotification({
      title: '功能还未开放',
      message: "",
    })
+  } else if (item.key === 'guide') {
+    // alert('功能正在开发中')]
+    showImagePreview.value = true
  } else {
    router.push(item.path)
  }
--- a/src/components/ImagePreview.vue
+++ b/src/components/ImagePreview.vue
@ -0,0 +1,88 @@
+<!--
+图片预览组件
+
+使用方法：
+<ImagePreview 
+  :visible="showImagePreview"
+  :image-url="previewImageUrl"
+  @close="showImagePreview = false"
+/>
+
+参数说明：
+- visible: 控制组件显示/隐藏
+- image-url: 要预览的图片URL
+- @close: 关闭事件回调
+
+特性：
+- 响应式设计
+- 支持点击遮罩关闭
+- 可复用于多个页面
+-->
+
+<template>
+  <div 
+    v-if="visible" 
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
+    @click="handleBackdropClick"
+  >
+    <!-- 关闭按钮 - 固定在视口上 -->
+    <div class="fixed top-4 right-10 z-[60]">
+      <el-button :icon="Close" circle @click="handleClose"/>
+    </div>
+    
+    <div class="relative max-w-[90vw] max-h-[90vh] overflow-auto">
+      <!-- 图片容器 -->
+      <div class="relative">
+        <img 
+          :src="imageUrl" 
+          :alt="imageAlt"
+          class="max-w-full object-contain rounded-lg shadow-2xl"
+          @click.stop
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import {
+    Close
+} from '@element-plus/icons-vue'
+// 定义组件属性
+interface Props {
+  visible: boolean
+  imageUrl: string
+  imageAlt?: string
+}
+
+// 定义组件事件
+interface Emits {
+  (e: 'close'): void
+}
+
+// 接收属性
+const props = withDefaults(defineProps<Props>(), {
+  imageAlt: '图片预览'
+})
+
+// 定义事件
+const emit = defineEmits<Emits>()
+
+// 处理关闭事件
+const handleClose = () => {
+  emit('close')
+}
+
+// 处理背景点击事件
+const handleBackdropClick = (event: Event) => {
+  // 只有点击背景遮罩时才关闭，点击图片本身不关闭
+  if (event.target === event.currentTarget) {
+    handleClose()
+  }
+}
+</script>
+
+<style scoped>
+/* 可以添加自定义样式 */
+</style> 
--- a/src/components/home/NavCards.vue
+++ b/src/components/home/NavCards.vue
@ -5,7 +5,7 @@
      v-for="(item, index) in navList"
      :key="index"
      :style="{ background: item.backgroundColor }"
-      @click="item.path ? router.push({ path: item.path }) : ''"
+      @click="handleClick(item)"
    >
      <img :src="navBg" class="w-full h-full" alt="" />
      <div class="text-white absolute left-8 top-8 font-bold text-3xl">
@ -24,7 +24,7 @@
 import { defineProps } from 'vue'
 import { useRouter } from 'vue-router'
 import navBg from '@/assets/images/home/navBg.png'
-
+const emit = defineEmits(['showImagePreview'])
 const router = useRouter()

 defineProps({
@ -34,4 +34,12 @@ defineProps({
    default: () => []
  }
 })
+
+const handleClick = (item) => {
+  if (item.name === '选房指南') {
+    emit('showImagePreview')
+  } else if (item.path) {
+    router.push(item.path)
+  }
+}
 </script>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -17,7 +17,7 @@
      </div>
    </div>
    <div class="w-1692px m-auto flex flex-col md:m-auto">
-      <NavCards :nav-list="navList" />
+      <NavCards :nav-list="navList" @showImagePreview="showImagePreview = true" />
      <ApartmentList :apartmen-list="apartmenList" />
    </div>
    <div class="w-full bg-white mt-9">
@ -31,6 +31,7 @@
        />
      </div>
    </div>
+    <ImagePreview v-model:visible="showImagePreview" @close="showImagePreview = false" :image-url="imageUrl" :image-alt="previewImageAlt" />
  </div>
 </template>

@ -51,6 +52,8 @@ import nav1 from "@/assets/images/home/nav1.png";
 import nav2 from "@/assets/images/home/nav2.png";
 import nav3 from "@/assets/images/home/nav3.png";
 import nav4 from "@/assets/images/home/nav4.png";
+import ImagePreview from '@/components/ImagePreview.vue';
+
 // 数据定义
 const images = [
  { src: banner1, alt: 'Image 1' },
@ -65,21 +68,21 @@ const navList = [
    backgroundColor: "linear-gradient(135deg, #318ffc 0%, #73b4ff 100%)",
  },
  {
-    name: "看房选房",
+    name: "看房",
    icon: nav2,
    path: "/Showings",
    bg: navBg,
-    backgroundColor: "linear-gradient(135deg, #02bca8 0%, #3dcfbb 100%)",
+    backgroundColor: "linear-gradient(135deg, #fbcb4d 0%, #fdc469 100%)",
  },
  {
-    name: "续期申请",
+    name: "选房指南",
    icon: nav3,
    path: "",
    bg: navBg,
-    backgroundColor: "linear-gradient(135deg, #fbcb4d 0%, #fdc469 100%)",
+    backgroundColor: "linear-gradient(135deg, #02bca8 0%, #3dcfbb 100%)",
  },
  {
-    name: "消息通知",
+    name: "学历汇",
    icon: nav4,
    path: "",
    bg: navBg,
@ -110,7 +113,9 @@ const active = ref('0')
 const top3 = ref([])
 const policytList = ref([])
 const apartmenList = ref([])
-
+const showImagePreview = ref(false)
+import imageUrl from '@/assets/images/guide.png';
+const previewImageAlt = ref('选房指南')
 // 方法
 const getList = async () => {
  try {
--- a/src/views/showings/houseDetail.vue
+++ b/src/views/showings/houseDetail.vue
@ -159,6 +159,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { onMounted } from 'vue';
 import AMapLoader from "@amap/amap-jsapi-loader";
 import Crumbs from '@/components/Crumbs.vue';
+import ImagePreview from '@/components/ImagePreview.vue';
 const route = useRoute();
 const router = useRouter();
 const activeTab = ref('vr')
--- a/src/views/showings/roomTypeList.vue
+++ b/src/views/showings/roomTypeList.vue
@ -12,7 +12,7 @@
                    <img :src="item.coverImg" class="w-[176px] h-[120px] rounded-md mr-5" alt="">
                    <div class="flex flex-col justify-between py-2">
                        <div class="text-xl font-bold">{{ item.typeName }}</div>
-                        <div class="flex justify-between"><span>{{ item.fullName }}</span><span>共{{ item.total }}</span></div>
+                        <div class="flex justify-between"><span>{{ item.fullName }}</span><span>共{{ item.total }}间</span></div>
                        <div class="text-sm text-gray-500">{{ item.labelStr }}</div>
                    </div>
                </div>