提交
This commit is contained in:
@@ -25,21 +25,49 @@
|
||||
<div class="details-left flex1">
|
||||
<div class="type-box">
|
||||
<div class="type-item">
|
||||
<div class="type-name">双人套间A</div>
|
||||
<div class="type-left flex1">
|
||||
<div class="type-name">双人套间A</div>
|
||||
<div class="type-tags flexacenter">
|
||||
<div class="tags-item flexcenter" :class="{ 'first': item == 1 }" v-for="item in 4">仅剩1间
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-box flexflex">
|
||||
<div class="media-item flexcenter" v-for="item in 5">
|
||||
<img class="media-img"
|
||||
src="https://axure-file.lanhuapp.com/md5__c1c85f2680e7e9a2026de4d381081fc6.svg">
|
||||
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-right">
|
||||
<div class="price-box flexflex">
|
||||
<div class="former">HK$ 7600/月</div>
|
||||
<div class="new flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="cost">8200</div>
|
||||
/月
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-btn flexcenter">咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-right"></div>
|
||||
<div class="details-right flexacenter">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||
|
||||
const uniqid = "1qfWOLTPbyPH"
|
||||
|
||||
let input = ref("")
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -152,7 +180,100 @@ const uniqid = "1qfWOLTPbyPH"
|
||||
.details-left {
|
||||
.type-box {
|
||||
.type-item {
|
||||
height: ;
|
||||
width: 876px;
|
||||
height: 230px;
|
||||
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;
|
||||
|
||||
.type-left {
|
||||
|
||||
.type-name {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.type-tags {
|
||||
.tags-item {
|
||||
height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 4px;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
margin-right: 8px;
|
||||
padding: 0 9px;
|
||||
|
||||
&.first {
|
||||
border: 1px solid rgba(80, 227, 194, 1);
|
||||
color: #50e3c2;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-box {
|
||||
.media-item {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
|
||||
|
||||
.media-img {}
|
||||
|
||||
.media-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-right {
|
||||
.price-box {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.former {
|
||||
color: #AAAAAA;
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: #797979;
|
||||
}
|
||||
|
||||
.new {
|
||||
.unit {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consult-btn {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
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%);
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
|
||||
<!-- 右下角咨询 -->
|
||||
<circle-btn></circle-btn>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -104,7 +103,7 @@ const handleScroll = () => {
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (scrollTop + clientHeight >= scrollHeight) getData()
|
||||
if (scrollTop + clientHeight >= scrollHeight - 350) getData()
|
||||
};
|
||||
|
||||
let pitchValue = {}
|
||||
@@ -125,6 +124,7 @@ const handleTransfer = (data) => {
|
||||
<style lang="less" scoped>
|
||||
.screen-box {
|
||||
margin: 0 auto 20px;
|
||||
// box-shadow: 0 0 3px 0 #d7d7d7;
|
||||
}
|
||||
|
||||
.list {
|
||||
@@ -150,6 +150,4 @@ const handleTransfer = (data) => {
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -288,7 +288,7 @@ const handleScroll = () => {
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (scrollTop + clientHeight >= scrollHeight) {
|
||||
if (scrollTop + clientHeight >= scrollHeight - 350) {
|
||||
if (tabState.value == 'publish') getPublishData()
|
||||
else getFavData()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user