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

no message

Browse Source
This commit is contained in:
A1300399510
2023-12-01 18:08:11 +08:00
parent e163d2c195
commit 5077fd5538
23 changed files with 233 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/views/apartmentDetail.vue
View File

@@ -56,7 +56,7 @@
<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,index) in info['tags']" :key="index">{{ item }}</div>
<div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
</div>
<div class="apartment-name wordbreak" v-if="info['title']">{{ info["title"] }}</div>
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
@@ -84,17 +84,19 @@
</div>
</div>
<div class="operate-box flexacenter" aria-label="详情的导航栏">
<div class="nav-box flexacenter">
<div class="nav-item flexcenter" :class="{pitch: navTab == item.value}" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @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 alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发
<transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
<div class="operate-box-bj flexcenter">
<div class="operate-box flexacenter" aria-label="详情的导航栏">
<div class="nav-box flexacenter">
<div class="nav-item flexcenter" :class="{pitch: navTab == item.value}" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @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 alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发
<transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
</div>
<div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
</div>
<div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
</div>
</div>
<div class="details-box flexflex">
@@ -102,13 +104,15 @@
<!-- 房间类型 -->
<div class="type-box" v-if="roomList.length != 0" ref="roomEle">
<div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index">
<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" />
<!-- <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">
<div class="type-name">{{ item["name"] }}</div>
<div class="type-tags flexacenter">
<div class="type-tags flexacenter" v-if="item.allowance || item.tags.length != 0">
<div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
<div class="tags-item flexcenter" v-for="(it, ii) in item.tags" :key="ii">{{ it }}</div>
<template v-if="item.tags.length != 0">
<div class="tags-item flexcenter" v-for="(it, ii) in item.tags" :key="ii">{{ it }}</div>
</template>
</div>
<div class="media-box flexflex" v-if="item.videos.length != 0 || item.images.length != 0">
@@ -667,6 +671,13 @@ const publicJump = path => router.push(path)
</script>
<style lang="less" scoped>
/deep/ .returnTop {
bottom: 88px;
}
/deep/ body {
padding-bottom: 70px;
}
.content {
margin: -36px auto 0;
position: relative;
@@ -997,82 +1008,95 @@ const publicJump = path => router.push(path)
}
}
.operate-box {
width: 1200px;
height: 70px;
background-color: rgba(255, 255, 255, 1);
.operate-box-bj {
position: fixed;
bottom: 0;
z-index: 1002;
min-width: 1200px;
width: 100vw;
left: 0;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
background: #fff;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
padding: 0 30px;
margin-bottom: 20px;
justify-content: space-between;
position: sticky;
top: 0px;
z-index: 1002;
.operate-box {
width: 1200px;
height: 70px;
// background-color: rgba(255, 255, 255, 1);
// border: 1px solid rgba(235, 235, 235, 1);
// border-radius: 16px;
// -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
// -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
padding: 0 30px;
// margin-bottom: 20px;
justify-content: space-between;
// position: sticky;
// top: 0px;
.nav-box {
.nav-item {
height: 40px;
background-color: rgba(246, 246, 246, 1);
border-radius: 8px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
color: #7f7f7f;
padding: 0 17px;
cursor: pointer;
&:hover {
color: #494848;
}
&.pitch {
background-color: #000;
font-weight: 650;
color: #fff;
}
&:not(:last-of-type) {
margin-right: 10px;
}
}
}
.btn-box {
.btn-item {
width: 100px;
height: 40px;
border-radius: 50px;
cursor: pointer;
&.transmit-btn {
border: 1px solid rgba(235, 235, 235, 1);
color: #333333;
margin-right: 10px;
// position: relative;
.transmit-icon {
width: 20px;
height: 20px;
margin-right: 4px;
}
}
&.consult-btn {
background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
font-size: 16px;
color: #ffffff;
.nav-box {
.nav-item {
height: 40px;
background-color: rgba(246, 246, 246, 1);
border-radius: 8px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
color: #7f7f7f;
padding: 0 17px;
cursor: pointer;
&:hover {
background: -webkit-linear-gradient(324.854454500294deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
background: -moz-linear-gradient(125.145545499706deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
background: linear-gradient(125.145545499706deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
color: #494848;
}
&.pitch {
background-color: #000;
font-weight: 650;
color: #fff;
}
&:not(:last-of-type) {
margin-right: 10px;
}
}
}
.btn-box {
.btn-item {
width: 100px;
height: 40px;
border-radius: 50px;
cursor: pointer;
&.transmit-btn {
border: 1px solid rgba(235, 235, 235, 1);
color: #333333;
margin-right: 10px;
// position: relative;
.transmit-icon {
width: 20px;
height: 20px;
margin-right: 4px;
}
}
&.consult-btn {
background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
font-size: 16px;
color: #ffffff;
&:hover {
background: -webkit-linear-gradient(324.854454500294deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
background: -moz-linear-gradient(125.145545499706deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
background: linear-gradient(125.145545499706deg, rgba(128, 255, 255, 1) -11%, rgba(98, 177, 255, 1) 135%);
}
}
}
}
@@ -1085,19 +1109,24 @@ const publicJump = path => router.push(path)
.details-left {
.type-box {
border-radius: 16px;
background-color: rgba(255, 255, 255, 1);
width: 876px;
margin-bottom: 20px;
.type-item {
width: 876px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
// width: 876px;
// background-color: rgba(255, 255, 255, 1);
// border: 1px solid rgba(235, 235, 235, 1);
// border-radius: 16px;
// -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
// -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
padding: 30px;
margin-bottom: 20px;
// margin-bottom: 20px;
border-bottom: 1px solid #ebebeb;
position: relative;
.type-icon {
position: absolute;
top: 0;
@@ -1108,15 +1137,19 @@ const publicJump = path => router.push(path)
}
.type-left {
display: flex;
flex-direction: column;
justify-content: center;
.type-name {
font-weight: 650;
font-size: 20px;
font-size: 18px;
color: #000000;
margin-bottom: 16px;
// margin-bottom: 16px;
}
.type-tags {
margin-bottom: 20px;
margin-top: 16px;
// margin-bottom: 20px;
.tags-item {
height: 24px;
@@ -1137,6 +1170,8 @@ const publicJump = path => router.push(path)
}
.media-box {
margin-top: 20px;
.media-list {
max-width: 460px;
overflow: auto;
@@ -1198,13 +1233,13 @@ const publicJump = path => router.push(path)
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 16px;
font-size: 13px;
}
.cost {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 24px;
font-size: 20px;
color: #f95d5d;
margin: 0 6px;
}
@@ -1217,7 +1252,7 @@ const publicJump = path => router.push(path)
.consult-btn {
width: 90px;
height: 40px;
height: 36px;
background: -webkit-linear-gradient(321.966692522331deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
background: -moz-linear-gradient(128.033307477669deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
background: linear-gradient(128.033307477669deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
@@ -1303,7 +1338,7 @@ const publicJump = path => router.push(path)
.text {
font-weight: 400;
font-size: 16px;
font-size: 15px;
color: #555555;
line-height: 30px;
padding: 20px 30px;
@@ -1319,7 +1354,7 @@ const publicJump = path => router.push(path)
}
font-weight: 400;
font-size: 16px;
font-size: 15px;
color: #555555;
line-height: 30px;
white-space: pre-line;