添加鼠标移动到可点模块 鼠标样式改变 全局新增加载动画

This commit is contained in:
2023-07-20 16:26:46 +08:00
parent 416b5232ae
commit 60f0f45def
15 changed files with 281 additions and 111 deletions

View File

@@ -19,31 +19,44 @@
v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData && listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1">
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator] ||
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1&&data.data.elevator">
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
||
'' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1">
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1&&data.data.sunshinearea !== 0&&data.data.sunshinearea">
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
data.data.sunshinearea] || '' }}
</div>
<div class="tab-item mg-l-8"
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]">
{{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] || ''
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]&&data.data.gender">
{{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
''
}}
</div>
</div>
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
<span v-if="!Array.isArray(data.data.location)">{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[data && data.data && data.data.location&&data.data.location.substring(0, 1)]} > ${location &&
location.data[data && data.data && data.data.location]}` : ''
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
${location &&
location.data[data && data.data && data.data.location]}` : ''
}}</span>
<span v-if="Array.isArray(data.data.location)">{{
location && location.data && location.data[data && data.data &&
data.data.location && data.data.location[0].substring(0, 1)]
}}>
<span v-for="(item,i) in data.data.location">
{{ location &&
location.data[item] }}
</span>
</span>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price">{{ data && data.data && data.data.rent }}</span>
<span class="price" v-if="!Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent }}</span>
<span class="price" v-if="Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
<span>/月</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
data.data && data.data.rentalduration }}{{
@@ -51,7 +64,7 @@
</div>
</div>
<div class="img">
<div>
<div class="dis-f">
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
@load="loadFinish" @error="loadFinish" class="img " alt="">
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
@@ -63,19 +76,20 @@
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'"
class="tab-img" alt="">
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
</div>
<div class="btm-box dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}</div>
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
</div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
data.data.intermediary_text
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1"
class="intermediary-tab-img" alt="">
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div>
</div>
</template>
@@ -104,7 +118,8 @@ watchEffect(() => {
let listId = props.listId
let imgRef = null
let loadFinish = () => {
let height = imgRef.ctx.$refs.list.offsetHeight
let height = imgRef.ctx.$refs&&imgRef.ctx.$refs.list&&imgRef.ctx.$refs.list.offsetHeight
console.log(data.id, listId, height)
props.imgLoad(data.id, listId, height)
}
@@ -198,6 +213,7 @@ img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
position: relative;
margin-bottom: 20px;
cursor: pointer;
.mg-t-10 {
margin-top: 10px;