首页

.gitignore

@@ -7,7 +7,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+epmet-apartment-front
 node_modules
 .DS_Store
 
@@ -16,7 +16,6 @@ coverage
 *.zip
 /cypress/videos/
 /cypress/screenshots/
-
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

src/assets/main.css

@@ -70,3 +70,13 @@ body {
     @apply text-sm sm:text-base md:text-lg;
   }
 }
+.card {
+  @apply bg-white  rounded-lg overflow-hidden transition-transform duration-300 ease-in-out p-6;
+
+}
+.card .title {
+  @apply text-xl font-semibold text-gray-800 mb-5 flex justify-between;
+}
+.card .title .more {
+  @apply text-lg  text-blue-600 cursor-pointer;
+}

src/components/AppHeader.vue

@@ -95,12 +95,12 @@ const showLanguageMenu = ref(false)
 const navigationConfig = [
   {
     name: '首页',
-    path: '/home',
+    path: '/',
     key: 'home'
   },
   {
     name: '政策资讯',
-    path: '/',
+    path: '/policy',
     key: 'policy'
   },
   {
@@ -133,13 +133,12 @@ const changeLanguage = (lang: string) => {
   showLanguageMenu.value = false
 }
 function handleClick(item) {
-  if (item.key === 'home' || item.key === 'renewal') {
+  if ( item.key === 'renewal') {
     // alert('功能正在开发中')]
     ElNotification({
       title: '功能还未开放',
       message: "",
     })
-    router.push('/')
   } else {
     router.push(item.path)
   }

src/router/index.js

@@ -7,7 +7,7 @@ const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: "/home",
+      path: "/",
       name: "home",
       component: Home,
     },
@@ -17,7 +17,7 @@ const router = createRouter({
       component: Showings,
     },
     {
-      path: "/",
+      path: "/policy",
       name: "Policy",
       component: Policy,
     },

src/views/Home.vue

@@ -1,11 +1,273 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" style="background-color: #f2f7ff">
-    <img src="@/assets/images/banner.png" alt="">
+    <div class="relative">
-    <div class="w-[350px] m-auto flex flex-col md:w-[1200px] md:m-auto">
+      <el-carousel height="520px">
+        <el-carousel-item v-for="item in images" :key="item">
+          <img :src="item.src" class="h-full w-full" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+      <div
+        class="absolute flex items-center left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      >
+        <img :src="homeLogo" class="h-[194px] w-[170px]" alt="" />
+        <div class="flex flex-col">
+          <img :src="text1" class="h-[68px] w-[556px]" alt="" />
+          <img :src="text2" class="h-[90px] w-[556px] ml-32" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="w-1692px m-auto flex flex-col md:m-auto">
+      <div class="flex gap-4 h-[135px] mt-2 justify-around">
+        <div
+          class="rounded-lg h-[135px] cursor-pointer relative"
+          v-for="(item, index) in navList"
+          :key="index"
+          :style="{ background: item.backgroundColor }"
+          @click="item.path?router.push({path:item.path}):''"
+        >
+          <img :src="navBg" class="w-full h-full" alt="" />
+          <div class="text-white absolute left-8 top-8 font-bold text-3xl">
+            {{ item.name }}
+          </div>
+          <img
+            :src="item.icon"
+            class="w-88px h-88px absolute top-1/2 transform -translate-y-1/2 right-8"
+            alt=""
+          />
+        </div>
+      </div>
+      <div class="card mt-6">
+        <div class="title w-full flex justify-between">
+          看房选房
+          <span class="more " @click="router.push('/Showings')">更多</span>
+        </div>
+        <div class="flex gap-16">
+          <div
+            class="flex flex-col"
+            v-for="(item, index) in apartmenList"
+            :key="index"
+          >
+            <img
+              :src="item.coverImg"
+              class="w-[500px] h-[270px] rounded-lg"
+              alt=""
+            />
+            <div class="flex justify-between my-3">
+              <span style="font-size:22px">{{ item.apartmentName }}</span
+              ><span  style="font-size:18px">共{{ item.total }}间</span>
+            </div>
+            <div class="tag">
+              <el-tag
+                effect="plain"
+                class="mr-1"
+                :type="
+                  index === 0
+                    ? 'primary'
+                    : index === 1
+                    ? 'success'
+                    : index === 2
+                    ? 'warning'
+                    : index === 3
+                    ? 'danger'
+                    : 'primary'
+                "
+                v-for="(itemC, index) in item.labels"
+                >{{ itemC }}</el-tag
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w-full bg-white mt-9">
+      <div class="m-auto flex flex-col w-1692px">
+        <div class="card" >
+          <div class="title">
+            政策资讯
+            <span class="more"  @click="router.push('/policy')">更多</span>
+          </div>
+          <div class="flex">
+            <div
+              class="w-[218px] h-[690px] bg-gradient-to-b from-blue-500 to-blue-300 text-cyan-50 p-6 rounded-l-lg"
+            >
+              <div class="font-bold text-3xl rou">分类信息</div>
+              <p class="">为您提供当前最新的资讯内容</p>
+              <div class="flex flex-col">
+                <div class="flex flex-col items-center justify-between gap-4">
+                  <div
+                    class="flex items-center w-full rounded-md h-12 cursor-pointer"
+                    :class="{
+                      'bg-white text-blue-500': active === item.dictValue,
+                      'bg-blue': active !== item.dictValue,
+                    }"
+                    v-for="(item, index) in tabList"
+                    :key="index"
+                    @click="handleClickTab(item)"
+                  >
+                    <div class="text-center w-full">{{ item.dictLabel }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col w-[calc(100%-240px)] h-690px">
+              <div class="flex h-[300px]">
+                <div
+                  v-for="(item, index) in top3"
+                  :key="index"
+                  class="relative ml-10 w-min-[450px] h-min-[300px]"
+                  style="min-width: 450px; min-height: 300px"
+                >
+                  <img :src="item.coverImg" class="w-full h-full rounded-md" alt="" />
+                  <span
+                    class="px-4 w-[420px] py-5 flex absolute bg-white transform left-4 -bottom-2 hover:scale-105 hover:bg-blue-600 hover:text-white"
+                    >{{ item.title }}</span
+                  >
+                </div>
+              </div>
+              <div class="flex flex-col mt-20 pl-14">
+                <div v-for="(item, index) in policytList" :key="index">
+                  <span class="text-blue-600 mr-5 date relative">
+                    {{ item.createTime }}
+                  </span>
+                  <span class="">
+                    {{ item.title }}
+                  </span>
+                  <el-divider />
+                </div>
+              </div>
+              <div class="w-full h-full">
+                <el-empty
+                  v-if="top3.length === 0"
+                  :image="noDataImg"
+                  description="暂无数据"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRouter } from 'vue-router';  // 添加这行导入
+const router = useRouter(); 
+import banner1 from "@/assets/images/banner1.png";
+import banner2 from "@/assets/images/banner2.png";
+import homeLogo from "@/assets/images/home/logo.png";
+import text1 from "@/assets/images/home/text1.png";
+import text2 from "@/assets/images/home/text2.png";
+import navBg from "@/assets/images/home/navBg.png";
+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 { getStaticInfoByApartmen } from "@/api/index";
+import { gePolicytList } from "@/api/policy";
+import noDataImg from "@/assets/images/03ec6a8d46ed1a7ca22a2576a8caa85.png";
+const policytList = ref([]);
+const top3 = ref([]);
+const images = [
+  {
+    src: banner1,
+    alt: "Image 1",
+  },
+  {
+    src: banner2,
+    alt: "Image 2",
+  },
+];
+const apartmenList = ref([]);
+const navList = [
+  {
+    name: "政策资讯",
+    icon: nav1,
+    path: "/policy",
+    bg: navBg,
+    backgroundColor: "linear-gradient(135deg, #318ffc 0%, #73b4ff 100%)",
+  },
+  {
+    name: "看房选房",
+    icon: nav2,
+    path: "/Showings",
+    bg: navBg,
+    backgroundColor: "linear-gradient(135deg, #02bca8 0%, #3dcfbb 100%)",
+  },
+  {
+    name: "续期申请",
+    icon: nav3,
+    path: "",
+    bg: navBg,
+    backgroundColor: "linear-gradient(135deg, #fbcb4d 0%, #fdc469 100%)",
+  },
+  {
+    name: "消息通知",
+    icon: nav4,
+    path: "",
+    bg: navBg,
+    backgroundColor: "linear-gradient(135deg, #fa896b 0%, #ff957a 100%)",
+  },
+];
+// tabList
+const tabList = reactive([
+  {
+    dictLabel: "最新",
+    dictValue: "0",
+  },
+  {
+    dictLabel: "住房政策",
+    dictValue: "1",
+  },
+  {
+    dictLabel: "人才政策",
+    dictValue: "2",
+  },
+  {
+    dictLabel: "就业政策",
+    dictValue: "3",
+  },
+]);
+const active = ref("0");
+const joinIn = {
+  pageNum: 1,
+  pageSize: 7,
+  dictCode: active.value,
+};
+const getList = async () => {
+  try {
+    const res = await getStaticInfoByApartmen();
+    console.log(res);
+    apartmenList.value = res.rows.splice(0, 3);
+  } catch (error) {
+    console.log(error);
+  }
+};
+const getPolicyList = async () => {
+  try {
+    const res = await gePolicytList(joinIn);
+    top3.value = res.data.splice(0, 3);
+    policytList.value =  res.data.splice(0, 4); 
+  } catch {}
+};
+const handleClickTab = (item: any) => {
+  active.value = item.dictValue;
+  joinIn.pageNum = 1;
+  joinIn.dictCode = item.dictValue;
+  policytList.value = [];
+  getPolicyList();
+};
+getPolicyList();
+getList();
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+  .date::after{
+    content: "·";
+    position: absolute;
+    left: -14px;
+    top: -31px;
+    font-size: 50px;
+  }
+</style>
+

src/views/policy/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg min-h-screen pt-16 pb-7">
-    <div class="w-[calc(100%-230px)] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded">
+    <div class="w-[1692px] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded">
       <!-- 列表 -->
       <div v-show="!showDetail">
         <h3 class="font-bold text-2xl">政策资讯</h3>

src/views/showings/components/CenterMap.vue

@@ -128,10 +128,13 @@ onMounted(async () => {
       },
       { deep: true }
     );
-    watch(()=>props.mapCenter,(newVal,oldVal)=>{
+    watch(
-        map.setCenter(newVal)
+      () => props.mapCenter,
-    },
+      (newVal, oldVal) => {
-    {deep:true})
+        map.setCenter(newVal);
+      },
+      { deep: true }
+    );
   } catch (error) {
     console.error("地图加载失败:", error);
   }

tailwind.config.js

@@ -11,6 +11,8 @@ export default {
         "108px": "108px",
         "690px": "690px",
         "60px": "60px",
+        "88px":"88px",
+        "1692px":'1692px'
       },
       fontFamily: {
         sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'],
@@ -42,6 +44,8 @@ export default {
           '2xs': ['10px', '15px'],
           '3xs': ['8px', '13px'],
           "42px": "42px",
+          "28px": "28px",
+          "22px": "22px",
         },
         slideUp: {
           '0%': { transform: 'translateY(20px)', opacity: '0' },