|
@@ -1,66 +1,87 @@
|
|
<template>
|
|
<template>
|
|
- <div class="bg-[#F8F8F8] pt-15" style="min-height: calc(100vh - 70px);">
|
|
|
|
-
|
|
|
|
- <div class="sticky top-50 z-50 flex items-center justify-between text-[12px] px-[15px]">
|
|
|
|
- <NuxtLink to="/house/newHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
|
|
|
|
- <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="">
|
|
|
|
- <span class="text-[#707070] font-bold ">新房</span>
|
|
|
|
- </NuxtLink>
|
|
|
|
- <NuxtLink to="/house/oldHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
|
|
|
|
- <img class="w-[30px] h-[30px]" :src="oldHouseIcon" alt="">
|
|
|
|
- <span class="text-[#707070] font-bold ">二手房</span>
|
|
|
|
- </NuxtLink>
|
|
|
|
- <div @click="showModal=true" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
|
|
|
|
- <img class="w-[30px] h-[30px]" :src="saleHouseIcon" alt="">
|
|
|
|
- <span class="text-[#707070] font-bold ">卖房</span>
|
|
|
|
- </div>
|
|
|
|
- <NuxtLink to="/house/rentHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
|
|
|
|
- <img class="w-[30px] h-[30px]" :src="rentHouseIcon" alt="">
|
|
|
|
- <span class="text-[#707070] font-bold ">租房</span>
|
|
|
|
- </NuxtLink>
|
|
|
|
|
|
+ <div class="bg-[#F8F8F8] pt-15" style="min-height: calc(100vh - 70px)">
|
|
|
|
+ <div class="sticky top-50 z-50 flex items-center justify-between text-[12px] px-[15px]">
|
|
|
|
+ <NuxtLink
|
|
|
|
+ to="/house/newHouse"
|
|
|
|
+ class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded"
|
|
|
|
+ >
|
|
|
|
+ <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="" />
|
|
|
|
+ <span class="text-[#707070] font-bold">新房</span>
|
|
|
|
+ </NuxtLink>
|
|
|
|
+ <NuxtLink
|
|
|
|
+ to="/house/oldHouse"
|
|
|
|
+ class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded"
|
|
|
|
+ >
|
|
|
|
+ <img class="w-[30px] h-[30px]" :src="oldHouseIcon" alt="" />
|
|
|
|
+ <span class="text-[#707070] font-bold">二手房</span>
|
|
|
|
+ </NuxtLink>
|
|
|
|
+ <div
|
|
|
|
+ @click="showModal = true"
|
|
|
|
+ class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded"
|
|
|
|
+ >
|
|
|
|
+ <img class="w-[30px] h-[30px]" :src="saleHouseIcon" alt="" />
|
|
|
|
+ <span class="text-[#707070] font-bold">卖房</span>
|
|
|
|
+ </div>
|
|
|
|
+ <NuxtLink
|
|
|
|
+ to="/house/rentHouse"
|
|
|
|
+ class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded"
|
|
|
|
+ >
|
|
|
|
+ <img class="w-[30px] h-[30px]" :src="rentHouseIcon" alt="" />
|
|
|
|
+ <span class="text-[#707070] font-bold">租房</span>
|
|
|
|
+ </NuxtLink>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="text-[#292929] p-15 text-[16px]">新开楼盘</div>
|
|
|
|
+ <div class="px-15 flex flex-wrap justify-between justify-bewtween">
|
|
|
|
+ <NuxtLink
|
|
|
|
+ :to="`/house/newHouse/${item.id}`"
|
|
|
|
+ v-for="item in dataList"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ class="w-[48%] mb-15"
|
|
|
|
+ >
|
|
|
|
+ <div class="w-full aspect-[1/1] rounded overflow-hidden bg-[#f5f5f5]">
|
|
|
|
+ <img :src="item.coverUrl" class="w-full h-full object-cover" alt="" />
|
|
</div>
|
|
</div>
|
|
- <div class="text-[#292929] p-15 text-[16px]">
|
|
|
|
- 新开楼盘
|
|
|
|
|
|
+ <div class="w-full truncate text-[#444] font-bold text-[14px] mt-[12px]">
|
|
|
|
+ {{ item.houseTitle }}
|
|
</div>
|
|
</div>
|
|
- <div class="px-15 flex flex-wrap justify-between justify-bewtween">
|
|
|
|
- <NuxtLink :to="`/house/newHouse/${item.id}`" v-for="item in dataList" :key="item.id" class="w-[48%] mb-15">
|
|
|
|
- <div class="w-full aspect-[1/1] rounded overflow-hidden bg-[#f5f5f5]">
|
|
|
|
- <img :src="item.coverUrl" class="w-full h-full object-cover" alt="" />
|
|
|
|
- </div>
|
|
|
|
- <div class="w-full truncate text-[#444] font-bold text-[14px] mt-[12px]">
|
|
|
|
- {{ item.houseTitle }}
|
|
|
|
- </div>
|
|
|
|
- <div class="flex items-center font-bold">
|
|
|
|
- <span class="text-[#FF1A1A] text-[14px]">{{item.currency}}{{ item.averagePrice }}</span>
|
|
|
|
- <span class="text-[#666] text-[12px]">/m²</span>
|
|
|
|
- </div>
|
|
|
|
- </NuxtLink>
|
|
|
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
|
+ <span class="text-[#FF1A1A] text-[14px]">{{ item.currency }}{{ item.averagePrice }}</span>
|
|
|
|
+ <span class="text-[#666] text-[12px]">/m²</span>
|
|
</div>
|
|
</div>
|
|
- <div v-if="showModal" class="fixed top-0 left-0 w-full h-full flex items-center justify-center " style="background:rgba(0,0,0,0.5);z-index:1000">
|
|
|
|
- <div class="animation-in">
|
|
|
|
- <div class="w-[246px] h-[246px] rounded-[10px] flex flex-col items-center justify-center" :style="{background:`url(${modalBgIcon})`,backgroundSize:'100% 100%'}">
|
|
|
|
- <div class="w-[157px] h-[157px] bg-[#fff]">
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
- <div class="text-[#242424] text-[12px] font-bold mt-15">
|
|
|
|
- 扫码联系我们专业卖房顾问!!!
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="w-[50px] h-[50px] rounded-full overflow-hidden flex items-center justify-center" style="background:rgba(0,0,0,0.6);margin:0 auto;margin-top:30px;">
|
|
|
|
- <van-icon @click="showModal=false" name="cross" color="#fff" size="30" />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </NuxtLink>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ v-if="showModal"
|
|
|
|
+ class="fixed top-0 left-0 w-full h-full flex items-center justify-center"
|
|
|
|
+ style="background: rgba(0, 0, 0, 0.5); z-index: 1000"
|
|
|
|
+ >
|
|
|
|
+ <div class="animation-in">
|
|
|
|
+ <div
|
|
|
|
+ class="w-[246px] h-[246px] rounded-[10px] flex flex-col items-center justify-center"
|
|
|
|
+ :style="{ background: `url(${modalBgIcon})`, backgroundSize: '100% 100%' }"
|
|
|
|
+ >
|
|
|
|
+ <div class="w-[157px] h-[157px] bg-[#fff]"></div>
|
|
|
|
+ <div class="text-[#242424] text-[12px] font-bold mt-15">
|
|
|
|
+ 扫码联系我们专业卖房顾问!!!
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div
|
|
|
|
+ class="w-[50px] h-[50px] rounded-full overflow-hidden flex items-center justify-center"
|
|
|
|
+ style="background: rgba(0, 0, 0, 0.6); margin: 0 auto; margin-top: 30px"
|
|
|
|
+ >
|
|
|
|
+ <van-icon @click="showModal = false" name="cross" color="#fff" size="30" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import newHouseIcon from '~/assets/img/house/newHouse.png';
|
|
|
|
-import oldHouseIcon from '~/assets/img/house/oldHouse.png';
|
|
|
|
-import saleHouseIcon from '~/assets/img/house/saleHouse.png';
|
|
|
|
-import rentHouseIcon from '~/assets/img/house/rentHouse.png';
|
|
|
|
-import modalBgIcon from '~/assets/img/house/modalBg.png';
|
|
|
|
-
|
|
|
|
|
|
+import newHouseIcon from '~/assets/img/house/newHouse.png'
|
|
|
|
+import oldHouseIcon from '~/assets/img/house/oldHouse.png'
|
|
|
|
+import saleHouseIcon from '~/assets/img/house/saleHouse.png'
|
|
|
|
+import rentHouseIcon from '~/assets/img/house/rentHouse.png'
|
|
|
|
+import modalBgIcon from '~/assets/img/house/modalBg.png'
|
|
|
|
|
|
const { data: dataList, status } = useMyFetch(`/website/house/sale/viewNewHouseList`)
|
|
const { data: dataList, status } = useMyFetch(`/website/house/sale/viewNewHouseList`)
|
|
|
|
|
|
@@ -69,25 +90,24 @@ const pageNum = ref(1)
|
|
const pageSize = ref(10)
|
|
const pageSize = ref(10)
|
|
const params = ref('')
|
|
const params = ref('')
|
|
|
|
|
|
-async function getList(){
|
|
|
|
- const p= `?pageNum=${pageNum.value}&pageSize=${pageSize.value}${params.value}`
|
|
|
|
-
|
|
|
|
|
|
+async function getList() {
|
|
|
|
+ const p = `?pageNum=${pageNum.value}&pageSize=${pageSize.value}${params.value}`
|
|
}
|
|
}
|
|
-function filterChange(param){
|
|
|
|
- console.log('filter change:',param)
|
|
|
|
|
|
+function filterChange(param) {
|
|
|
|
+ console.log('filter change:', param)
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-.animation-in{
|
|
|
|
- animation: show .5s ease-in-out;
|
|
|
|
|
|
+.animation-in {
|
|
|
|
+ animation: show 0.5s ease-in-out;
|
|
}
|
|
}
|
|
-@keyframes show{
|
|
|
|
- 0%{
|
|
|
|
- transform: scale(0.5);
|
|
|
|
- }
|
|
|
|
- 100%{
|
|
|
|
- transform: scale(1);
|
|
|
|
- }
|
|
|
|
|
|
+@keyframes show {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: scale(0.5);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|