XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

小修改

Browse Source
This commit is contained in:
A1300399510
2023-08-22 16:00:43 +08:00
parent a0fb929efd
commit 754a2c8f46
1 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/apartmentDetail.vue
View File

@@ -7,17 +7,15 @@
<div class="top flexflex">
<div class="brand-abstract flexflex">
<div class="flexacenter" style="height: min-content;">
<div class="item" @click="publicJump('/')">港校租房</div>
<img class="arrow" src="@/assets/img/publicImage/yellow-arrow.svg">
<div class="item" @click="publicJump('/apartment')">品牌公寓</div>
<img class="arrow" src="@/assets/img/publicImage/yellow-arrow.svg">
<div class="item" @click="publicJump(`/apartment?companyid=${company.id}`)">{{ company.title }}
<a class="item" href="/">港校租房</a>
<img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg">
<a class="item" href="/apartment">品牌公寓</a>
<img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg">
<a class="item" :href="`/apartment?companyid=${company.id}`">{{ company.title }}</a>
</div>
</div>
</div>
<img class="arc-bj" src="@/assets/img/publicImage/angle.png">
<img class="arc-bj" alt="视觉上角的图片" src="@/assets/img/publicImage/angle.png">
</div>
<div class="header-content flexflex">
<div class="header-left">
@@ -28,7 +26,7 @@
@change="carouselChange">
<el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData">
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img"
:src="item['image'] || item['imageurl']"
:src="item['image'] || item['imageurl']" alt="公寓图片"
@click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')">
</el-carousel-item>
</el-carousel>
@@ -53,26 +51,28 @@
</div>
<div class="slideshow-across flexflex">
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
<img v-if="carouselIndex == 0" class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow rotate180" src="@/assets/img/publicImage/black-arrow.svg" />
<img v-if="carouselIndex == 0" class="arrow" alt="不可点击的左箭头切换"
src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow rotate180" alt="可点击的左箭头切换"
src="@/assets/img/publicImage/black-arrow.svg" />
</div>
<div ref="slideshowList" class="slideshow-list box no-scrollbar flex1 flexacenter">
<div class="item" :class="{ 'pitch': index == carouselIndex }, `item${index}`"
v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)">
<img class="img" v-lazy="item['thumbnail'] || item['imageurl']" />
<img class="img" alt="公寓图片缩略图" v-lazy="item['thumbnail'] || item['imageurl']" />
<img class="video-icon" v-if="item['type'] != 'attachment'"
src="@/assets/img/publicImage/video-icon.svg">
</div>
</div>
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180"
src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
alt="不可点击的右箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
<img v-else class="arrow" alt="可点击的右箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div>
<div class="header-right flex1">
<img class="header-bj" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg">
<img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg">
<!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
<div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
<div class="tab-item wordbreak flexcenter" v-for="item in info['tags']">{{ item }}</div>
@@ -81,38 +81,38 @@
<div class="synopsis wordbreak">{{ info['introduction'] }}</div>
<div class="place flexacenter" v-if="info['address']">
<div class="left flexacenter">
<img class="icon" src="@/assets/img/publicImage/location-icon.png" />
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
<div class="place-text ellipsis">{{ info['address'] }}</div>
</div>
<div class="right flexacenter" @click="handleClickNav('addressEle')">
位置与交通
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
<div class="else flexacenter" v-if="withsameapartments">
<div class="left flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
<img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
同品牌其他公寓
</div>
<div class="right flexacenter" @click="handleClickNav('eleseEle')">
<div class="quantity flexcenter">{{ withsameapartments }}</div>
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
<div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div>
<img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div>
</div>
</div>
<div class="operate-box flexacenter">
<div class="operate-box flexacenter" aria-label="详情的导航栏">
<div class="nav-box flexacenter">
<div class="nav-item flexcenter" :class="{ 'pitch': navTab == item.value }" v-for="item in navList"
<div class="nav-item flexcenter" :class="{ 'pitch': navTab == item.value }" :aria-label="`${item['name']}-按钮`" v-for="item in navList"
@click="handleClickNav(item.value)">{{ item['value'] == 'roomEle' ? `${item['name']} ${roomList.length}`
: item['name'] }}
</div>
</div>
<div class="btn-box flexacenter">
<div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
<img class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
<img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发
<transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
</div>
@@ -124,7 +124,7 @@
<!-- 房间类型 -->
<div class="type-box" v-if="roomList.length != 0" ref="roomEle">
<div class="type-item flexacenter" v-for="(item, index) in roomList">
<img class="type-icon" v-if="item['status'] == 1"
<img class="type-icon" alt="房间类型-角图片" v-if="item['status'] == 1"
src="@/assets/img/apartmentDetail/apartment-have.svg" />
<img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
<div class="type-left flex1">
@@ -145,12 +145,12 @@
<div class="media-list flexacenter no-scrollbar" :class="`element${index}`">
<div class="media-item flexcenter" v-for="(it, i) in item['videos']"
@click="cloaseImageShow([...item['videos'], ...item['images']], i, `media${index}`)">
<img class="media-img" v-lazy="it['thumbnail']">
<img class="media-img" :alt="`${item['name']}的视频图`" v-lazy="it['thumbnail']">
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
</div>
<div class="media-item flexcenter" v-for="(it, i) in item['images']"
@click="cloaseImageShow([...item['videos'], ...item['images']], item['videos'].length + i, `media${index}`)">
<img class="media-img" v-lazy="it['thumbnail']">
<img class="media-img" :alt="`${item['name']}的详情图`" v-lazy="it['thumbnail']">
</div>
</div>
<div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
@@ -171,7 +171,7 @@
/月
</div>
</div>
<div class="consult-btn flexcenter" v-if="item['status'] == 1" @click="modificationContact">咨询
<div class="consult-btn flexcenter" :aria-label="`${item['name']}-咨询按钮`" v-if="item['status'] == 1" @click="modificationContact">咨询
</div>
<div class="full-occupancy flexcenter" v-else>已租满</div>
</div>
@@ -220,7 +220,8 @@
</div>
<div class="facilities-box">
<template v-for="(item, key) of facilitiesKeyValue">
<div class="facilities-item flexflex" v-if="info['facilities'][key] && info['facilities'][key].length != 0">
<div class="facilities-item flexflex"
v-if="info['facilities'][key] && info['facilities'][key].length != 0">
<div class="facilities-header flexflex">
<div class="item-title">{{ item }}</div>
</div>
@@ -1856,6 +1857,10 @@ const publicJump = path => router.push(path)
}
}
}
a:-webkit-any-link {
color: #806C24;
}
</style>
<style lang="less">
.message-info {