看房，首页调整

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>
+    <script type="module" crossorigin src="/epmet-apartment-front/static/index-9LQWe98S.js"></script>
-    <link rel="stylesheet" crossorigin href="/epmet-apartment-front/static/index-CIEWPu3s.css">
+    <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: '续期申请',
+    name: '选房指南',
-    path: '/renewal',
+    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>