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-03 17:54:13 +08:00
parent 07c423262a
commit 066109e51b
3 changed files with 168 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/apartment/seachModule.vue
View File

@@ -101,7 +101,7 @@
</div> </div>
</div> </div>
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">租金</div> <div class="option-title flexacenter">租金</div>
<div class="option-box flexacenter flex1 option-input-box"> <div class="option-box flexacenter flex1 option-input-box">
<div class="flex1"> <div class="flex1">
<input class="option-input" type="number" v-model="pitchValue['rent_min']" <input class="option-input" type="number" v-model="pitchValue['rent_min']"

59
src/components/public/transmitBtn.vue
View File

@@ -6,8 +6,6 @@
</template> </template>
<div class="transmit-unfold-box"> <div class="transmit-unfold-box">
<!-- <div v-if="props['concatType']" class="arrow" style="right: 300px;"></div>
<div v-else class="arrow" :style="{ right: type == 'apartment' ? '182px' : '75px' }"></div> -->
<div class="transmit-item"> <div class="transmit-item">
<div class="transmit-head">转发网页版</div> <div class="transmit-head">转发网页版</div>
<div class="transmit-box transmit-webpage-box"> <div class="transmit-box transmit-webpage-box">
@@ -52,31 +50,21 @@ const popperOptions = ref({
] ]
}); });
watch(() => props.concatType, (newValue, oldValue) => { if (props['type'] == 'housingTop') popperOptions.value['modifiers'][0]['options']['offset'][0] = 14
nextTick(() => {
if (newValue && props['type'] != 'apartment') popperOptions.value['modifiers'][0]['options']['offset'][0] = 235 watch(() => props.concatType, (newValue, oldValue) => {
else if (props['type'] != 'apartment') popperOptions.value['modifiers'][0]['options']['offset'][0] = 38 setTimeout(() => {
else popperOptions.value['modifiers'][0]['options']['offset'][0] = 14 if (newValue && props['type'] == 'housingTop') popperOptions.value['modifiers'][0]['options']['offset'][0] = 225
}) else if (props['type'] == 'housingTop') popperOptions.value['modifiers'][0]['options']['offset'][0] = 14
}, 250)
}); });
// popperOptions.value['modifiers'][0]['options']['offset'][0] = 235
// popperOptions.value['modifiers'][0]['options']['offset'][0] = 14
let url = location.href let url = location.href
let popover = ref(null)
let btn = ref(null)
setTimeout(() => {
console.log(popover, "popover");
}, 3000)
const copy = () => { const copy = () => {
copyToClipboard(`${props['title']} - ${url}`).then(() => { copyToClipboard(`${props['title']} - ${url}`).then(() => {
ElMessage.success("复制成功！！！") ElMessage.success("复制成功！！！")
@@ -86,17 +74,10 @@ const copy = () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-popper__arrow {
left: 200px;
}
.btn { .btn {
// background-color: antiquewhite;
width: 100px; width: 100px;
height: 40px; height: 40px;
position: absolute; position: absolute;
// top: 0;
// left: 0;
} }
.transmit-unfold-box, .transmit-unfold-box,
@@ -110,8 +91,6 @@ const copy = () => {
display: flex; display: flex;
border-radius: 10px; border-radius: 10px;
font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
// box-shadow: 0px 2px 11px -2px #dcebef;
// border: 1px solid #e0e0e0;
} }
.transmit-unfold-box .transmit-unfold-close { .transmit-unfold-box .transmit-unfold-close {
@@ -210,28 +189,4 @@ const copy = () => {
cursor: pointer; cursor: pointer;
color: #000; color: #000;
} }
.arrow {
width: 10px;
height: 10px;
z-index: -1;
position: absolute;
top: -4px;
right: 75px;
&::before {
content: "";
border: 1px solid #e4e7ed;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
// z-index: -1;
transform: rotate(45deg);
// background: red;
box-sizing: border-box;
}
}
</style> </style>

345
src/views/detail.vue
View File

@@ -67,14 +67,14 @@
</span> </span>
</div> </div>
<div class="line" style="margin:0 20px;"></div> <div class="line" style="margin:0 20px;"></div>
<div class="dis-f al-item"> <div class="dis-f al-item" style="position: relative;">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt=""> <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
<span> <span>
转发 转发
</span> </span>
<transmit-btn v-if="housingInfo.data" :concatType="concatType" <transmit-btn v-if="housingInfo.data"
:qrcode="housingInfo.data['qrcode']" :qrcode="housingInfo.data['qrcode']"
:title="housingInfo.data.info['subject']" type="housingTop"></transmit-btn> :title="housingInfo.data.info['subject']" :concatType="concatType" type="housingTop"></transmit-btn>
</div> </div>
</div> </div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }"> <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
@@ -470,54 +470,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="dis-f jus-x pos-r" <div class="dis-f jus-x"
v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1"> v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }" <div class="distance-box dis-f jus-bet">
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }"> <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
<div class="top-box"></div> :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
<div class="title-box dis-f al-item jus-x"> <div class="top-box"></div>
<span class="title">房源距离院校</span> <div class="title-box dis-f al-item jus-x">
<img src="../assets/img/detail/close.png" class="close-icon" <span class="title">房源距离院校</span>
@click="showDistance = false" alt=""> <img src="../assets/img/detail/close.png" class="close-icon"
</div> @click="showDistance = false" alt="">
<div class="distance-box-s" v-if="distanceList.length > 0"> </div>
<div class="distance-info-data dis-f"> <div class="distance-box-s" v-if="distanceList.length > 0">
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList" <div class="distance-info-data dis-f">
:key="index" :class="{ 'mg-t-50': index > 0 }"> <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
<div class="icon-box dis-f al-item jus-x" :key="index" :class="{ 'mg-t-50': index > 0 }">
:class="{ 'home-icon': item && item.address }"> <div class="icon-box dis-f al-item jus-x"
<div class="line" v-show="index > 0"></div> :class="{ 'home-icon': item && item.address }">
<img src="../assets/img/detail/school.png" class="icon" <div class="line" v-show="index > 0"></div>
v-show="item && !item.address" alt=""> <img src="../assets/img/detail/school.png" class="icon"
<img src="../assets/img/detail/home.png" class="icon" v-show="item && item.address" alt="">
v-show="item && item.address" alt=""> <img src="../assets/img/detail/home.png" class="icon"
</div> v-show="item && !item.address" alt="">
<div style="width:200px"> </div>
{{ item && item.name }} {{ item && item.name }}
</div> <div class="dis-f" style="flex-wrap: wrap;width:540px;">
<div class="dis-f" style="flex-wrap: wrap;width:480px"> <div v-for="(items, i) in item && item.point" :key="i">
<div v-for="(items, i) in item && item.point" :key="i"> <span class="address-info">
<span class="address-info"> {{ items.title }}
{{ items.title }} </span>
</span> <span v-html="setDistanceList(items && `${items.distance}`)">
<span v-html="setDistanceList(items && `${items.distance}`)"> </span>
</span> <!-- <span class="distance-text">
<!-- <span class="distance-text">
1.1公里 1.1公里
</span> --> </span> -->
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="distance-box dis-f jus-bet">
<div class="dis-f al-item" style="position:relative;" @click="setShowDistance"> <div class="dis-f al-item" style="position:relative;" @click="setShowDistance">
<!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> --> <!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
<div class="dis-f al-item s-w-100" style="position:absolute;"> <div class="dis-f al-item s-w-100" style="position:absolute;">
<div class="line-school-box dis-f al-item s-w-100" style="justify-content:space-around;"> <div class="line-school-box dis-f al-item s-w-100" style="justify-content:space-around;">
<div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id" <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id"
v-show="i < 9 && item.id"> v-show="i < 9 && item.id">
<div :class="{ 'far-s': item && item.recently_distance > 4 }" <div :class="{ 'far-s': item && item.recently_distance > 4 }"
v-if="item && !item.address" class="text-c"> v-if="item && !item.address" class="text-c">
{{ item && item.recently_distance }}km {{ item && item.recently_distance }}km
@@ -559,9 +558,10 @@
<div class="houseing-info-box dis-f al-item jus-bet"> <div class="houseing-info-box dis-f al-item jus-bet">
<div class="dis-f al-item"> <div class="dis-f al-item">
房源ID : &nbsp<span class="houseing-id" @click="clone(housingInfo['data'] && 房源ID : &nbsp<span class="houseing-id" @click="clone(housingInfo['data'] &&
housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id}}</span> housingInfo['data'].info.uid)">{{ housingInfo['data']
&& housingInfo['data'].info.uid }}</span>
<span class="browse-box"> <span class="browse-box">
浏览 :<span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view 浏览 : <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
}}</span> }}</span>
</span> </span>
</div> </div>
@@ -1176,10 +1176,8 @@ let clone = (text) => {
document.body.removeChild(textareaEle); document.body.removeChild(textareaEle);
ElMessage({ ElMessage({
message: '复制成功', message: '复制成功',
type: 'success',
center: true, center: true,
offset: 320,
duration: 1000,
customClass: 'message-info'
}) })
} }
@@ -2277,7 +2275,7 @@ img {
font-size: 14px; font-size: 14px;
padding: 30px 20px; padding: 30px 20px;
position: relative; position: relative;
/* z-index: 333; */ z-index: 333;
.detail-price-box { .detail-price-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -2624,9 +2622,7 @@ img {
.houseing-info-box-s { .houseing-info-box-s {
height: 17px; height: 17px;
width: 1px; width: 1px;
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%); border-right: 1px dashed #d7d7d7;
background-size: 4px 2px;
background-repeat: repeat-y;
} }
.browse-box { .browse-box {
@@ -2731,7 +2727,7 @@ img {
.show-distance-info-box { .show-distance-info-box {
border-width: 1px; border-width: 1px;
/* border-style: solid; */ border-style: solid;
border-color: rgba(235, 235, 235, 1); border-color: rgba(235, 235, 235, 1);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@@ -2739,126 +2735,6 @@ img {
transition: all 0.2s linear; transition: all 0.2s linear;
} }
.distance-info-box {
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
height: 0;
border-radius: 16px;
position: absolute;
left: 0;
top: 130px;
z-index: 666;
width: 100%;
max-height: 610px;
transition: all 0.2s linear;
overflow: hidden;
.top-box {
height: 70px;
}
.distance-box-s {
height: 500px;
overflow-y: scroll;
}
.distance-box-s ::-webkit-scrollbar{
width: 8px;
}
.distance-info-data {
padding: 30px 45px 0 45px;
position: relative;
justify-content: space-around;
flex-direction: column;
.home-icon {
background: #ffcc17 !important;
}
.icon-box {
width: 32px;
height: 32px;
border-radius: 50%;
background: #50e3c2;
margin-right: 15px;
position: relative;
}
.icon {
width: 20px;
height: 20px;
}
.line {
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 5px 2px;
background-repeat: repeat-y;
height: 50px;
width: 1px;
position: absolute;
top: -50px;
}
.mg-t-50 {
margin-top: 50px;
}
.school-info {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #333;
.address-info {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #333;
margin-left: 30px;
}
}
}
.title-box {
position: absolute;
top: 0;
left: 0;
height: 70px;
background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 16px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
}
.close-icon {
width: 16px;
height: 16px;
position: absolute;
right: 20px;
}
}
}
.distance-box { .distance-box {
width: 100%; width: 100%;
height: 101px; height: 101px;
@@ -2872,6 +2748,122 @@ img {
margin-top: 20px; margin-top: 20px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.distance-info-box {
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
height: 0;
border-radius: 16px;
position: absolute;
left: 0;
top: 110px;
z-index: 666;
width: 100%;
max-height: 610px;
transition: all 0.2s linear;
overflow: hidden;
.top-box {
height: 70px;
}
.distance-box-s {
height: 500px;
overflow-y: scroll;
}
.distance-info-data {
padding: 30px 45px 0 45px;
position: relative;
justify-content: space-around;
flex-direction: column;
.home-icon {
background: #ffcc17 !important;
}
.icon-box {
width: 32px;
height: 32px;
border-radius: 50%;
background: #50e3c2;
margin-right: 15px;
position: relative;
}
.icon {
width: 20px;
height: 20px;
}
.line {
height: 50px;
width: 1px;
border-left: 1px dashed #e7e7e7;
position: absolute;
top: -50px;
}
.mg-t-50 {
margin-top: 50px;
}
.school-info {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #333;
.address-info {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #333;
margin-left: 30px;
}
}
}
.title-box {
position: absolute;
top: 0;
left: 0;
height: 70px;
background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 16px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
}
.close-icon {
width: 16px;
height: 16px;
position: absolute;
right: 20px;
}
}
}
/* ::-webkit-scrollbar { /* ::-webkit-scrollbar {
display: none; display: none;
} */ } */
@@ -2909,11 +2901,9 @@ img {
} }
.line-img { .line-img {
height: 2px; height: 1px;
width: 743px; width: 743px;
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%); border: 1px dashed #d7d7d7;
background-size: 4px 2px;
background-repeat: repeat-x;
} }
.address-box { .address-box {
@@ -2979,19 +2969,4 @@ img {
z-index: 999; z-index: 999;
} }
</style> </style>
<style>
.message-info {
background: #000000;
border-color: #000000;
color: #fff;
.el-message__content {
color: #fff;
}
.el-icon {
display: none;
}
}
</style>