XiaoMo/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
Download Patch File Download Diff File Expand all files Collapse all files

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

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