gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改首页瀑布流样式

Browse Source
This commit is contained in:
A1300399510 2024-11-12 14:03:52 +08:00
parent b4e510f9cf
commit 2fdea2976c
8 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/app.0db453c8.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/app.dfd581f2.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.7ec64378.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.dfd581f2.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || [] <!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.db19e2a4.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.0db453c8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || []
;(function () { ;(function () {
var hm = document.createElement("script") var hm = document.createElement("script")
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746" hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"

1
dist/js/app.7ec64378.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.db19e2a4.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/detail.f6381dae.js → dist/js/detail.42663197.js vendored
View File

File diff suppressed because one or more lines are too long

50
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@ -28,16 +28,16 @@
{{ `· ${itemData.gender}` }} {{ `· ${itemData.gender}` }}
{{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }} {{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }}
</span> </span>
<span class="ellipsis" style="width: 272px; display: block;" v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span> <span class="ellipsis" style="width: 200px; display: block;" v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
</div> </div>
<div style="padding: 0 10px; margin-top: 15px;" class="dis-f al-item" v-if="itemData.type === 'housing'"> <div style="padding: 0 10px; margin-top: 15px; align-items: flex-start;" class="dis-f al-item" v-if="itemData.type === 'housing'">
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" /> <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" />
<span class="address-text">{{ location.data && location.data[itemData.location && itemData.location.substring(0, 1)] }} > {{ location.data && location.data[itemData.location] }}</span> <span class="address-text">{{ location.data && location.data[itemData.location && itemData.location.substring(0, 1)] }} > {{ location.data && location.data[itemData.location] }}</span>
</div> </div>
<div style="padding: 0 10px; margin-top: 12px; align-items: end;" class="rent-box dis-f" v-if="itemData.type === 'housing'"> <div style="padding: 0 10px; margin-top: 12px; align-items: end;" class="rent-box dis-f" v-if="itemData.type === 'housing'">
<div class="unit">HK$</div> <div class="unit">HK$</div>
<div class="price">{{ itemData.rent }}</div> <div class="price">{{ itemData.rent }}</div>
<div class="date">/月</div> <!-- <div class="date">/月</div> -->
</div> </div>
<!-- <div class="title"> <!-- <div class="title">
iRent油麻地二期公寓 iRent油麻地二期公寓
@ -55,7 +55,7 @@
<div class="dis-f" style="align-items: end; line-height: 20px;"> <div class="dis-f" style="align-items: end; line-height: 20px;">
<span class="unit">HK$</span> <span class="unit">HK$</span>
<span class="price">{{ item.value }}</span> <span class="price">{{ item.value }}</span>
<span class="date">/月</span> <!-- <span class="date">/月</span> -->
</div> </div>
</div> </div>
</div> </div>
@ -108,8 +108,8 @@ const props = defineProps({
}) })
const imgload = () => { const imgload = () => {
props.listMasonryInstance.reloadItems(); props.listMasonryInstance.reloadItems()
props.listMasonryInstance.layout(); props.listMasonryInstance.layout()
} }
let itemData = props.data let itemData = props.data
@ -203,7 +203,8 @@ watchEffect(() => {
} }
.item { .item {
width: 285px; width: 224px;
// width: 285px;
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: none; border: none;
@ -248,6 +249,7 @@ watchEffect(() => {
.corner-box { .corner-box {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
height: 24px;
.corner-img { .corner-img {
transform: rotate(90deg); transform: rotate(90deg);
@ -257,19 +259,30 @@ watchEffect(() => {
} }
} }
.corner-img,
.tab-img {
position: absolute;
right: 0;
bottom: 0;
transform: rotate(90deg);
width: 33px;
height: 33px;
margin: 0 -1px 0 0;
}
.add-marker { .add-marker {
width: 18px; width: 16px;
height: 18px; height: 16px;
margin-right: 5px; // margin-right: 5px;
} }
.type-tab { .type-tab {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 13px;
color: #aaaaaa; color: #aaaaaa;
margin-top: 15px; margin-top: 5px;
padding: 0 10px; padding: 0 10px;
word-wrap: break-word; word-wrap: break-word;
} }
@ -281,7 +294,7 @@ watchEffect(() => {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 12px;
color: #555555; color: #555555;
} }
@ -309,7 +322,7 @@ watchEffect(() => {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 13px; font-size: 12px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
@ -317,7 +330,7 @@ watchEffect(() => {
display: inline-block; display: inline-block;
// float: left; // float: left;
border-radius: 5px; border-radius: 5px;
margin-right: 10px; // margin-right: 10px;
margin-top: 4px; margin-top: 4px;
} }
} }
@ -389,7 +402,7 @@ watchEffect(() => {
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
width: 120px; width: 84px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -420,7 +433,7 @@ watchEffect(() => {
} }
.apartment-img { .apartment-img {
width: 275px; width: 214px;
height: 193px; height: 193px;
border-radius: 10px; border-radius: 10px;
margin: 5px auto; margin: 5px auto;
@ -451,7 +464,8 @@ watchEffect(() => {
} }
.live-img { .live-img {
width: 285px; // width: 285px;
width: 224px;
/* height: 349px; */ /* height: 349px; */
/* min-height: 370px; */ /* min-height: 370px; */
min-height: 193px; min-height: 193px;

45
src/views/HomeView.vue
View File

@ -111,16 +111,14 @@
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0"> <div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
<div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;"> <div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
<div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x" :class="[i == 0 ? 'first' : i == 1 ? 'second' : i == 2 ? 'third' : '']" style="flex-wrap: wrap;" @click="housingPage(item.path)"> <div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x" :class="[i == 0 ? 'first' : i == 1 ? 'second' : i == 2 ? 'third' : '']" style="flex-wrap: wrap;" @click="housingPage(item.path)">
<div> <div class="img-box dis-f jus-x al-item">
<div class="img-box dis-f jus-x al-item"> <img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img" />
<img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img" /> <img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img" />
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img" /> <img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img" />
<img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img" /> <img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img" />
<img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img" /> </div>
</div> <div class="text-center s-w-100">
<div class="text-center s-w-100"> {{ item.name }}
{{ item.name }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -474,11 +472,13 @@ img {
} }
.list-li { .list-li {
// margin-top: 15px;
cursor: pointer; cursor: pointer;
width: 50%; width: 50%;
background-color: rgba(246, 246, 246, 1); background-color: rgba(246, 246, 246, 1);
border-right: 1px solid rgba(246, 246, 246, 1); border-right: 1px solid rgba(246, 246, 246, 1);
height: 30px; height: 30px;
// border: ;
&:not(:nth-last-child(-n + 2)) { &:not(:nth-last-child(-n + 2)) {
margin-bottom: 10px; margin-bottom: 10px;
@ -678,7 +678,7 @@ img {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 20px; font-size: 17px;
color: #555555; color: #555555;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
@ -708,7 +708,7 @@ img {
width: 1px; width: 1px;
background: #d7d7d7; background: #d7d7d7;
height: 21px; height: 21px;
margin: 0 30px; margin: 0 16px;
} }
.waterfall-box { .waterfall-box {
@ -717,8 +717,8 @@ img {
justify-content: space-between; justify-content: space-between;
.waterfall-first-box { .waterfall-first-box {
width: 284px; width: 224px;
height: 284px; height: 224px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 16px; border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@ -727,6 +727,9 @@ img {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
.first { .first {
border-right: 1px dashed #ebebeb; border-right: 1px dashed #ebebeb;
border-bottom: 1px dashed #ebebeb; border-bottom: 1px dashed #ebebeb;
@ -741,14 +744,16 @@ img {
} }
.info-box { .info-box {
width: 142px; // width: 142px;
height: 142px; // height: 142px;
height: 100%;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
cursor: pointer; cursor: pointer;
flex-direction: column;
.text-center { .text-center {
text-align: center; text-align: center;
@ -761,8 +766,8 @@ img {
} }
.img-box { .img-box {
width: 56px; width: 48px;
height: 56px; height: 48px;
border-radius: 16px; border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@ -772,8 +777,8 @@ img {
} }
.img { .img {
width: 30px; width: 24px;
height: 30px; height: 24px;
} }
} }
} }