样式修改
This commit is contained in:
@@ -470,52 +470,54 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x"
|
||||
<div class="dis-f jus-x pos-r"
|
||||
v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
|
||||
<div class="distance-box dis-f jus-bet">
|
||||
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
|
||||
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
|
||||
<div class="top-box"></div>
|
||||
<div class="title-box dis-f al-item jus-x">
|
||||
<span class="title">房源距离院校</span>
|
||||
<img src="../assets/img/detail/close.png" class="close-icon"
|
||||
@click="showDistance = false" alt="">
|
||||
</div>
|
||||
<div class="distance-box-s" v-if="distanceList.length > 0">
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
|
||||
:key="index" :class="{ 'mg-t-50': index > 0 }">
|
||||
<div class="icon-box dis-f al-item jus-x"
|
||||
:class="{ 'home-icon': item && item.address }">
|
||||
<div class="line" v-show="index > 0"></div>
|
||||
<img src="../assets/img/detail/school.png" class="icon"
|
||||
v-show="item && item.address" alt="">
|
||||
<img src="../assets/img/detail/home.png" class="icon"
|
||||
v-show="item && !item.address" alt="">
|
||||
</div>
|
||||
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
|
||||
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
|
||||
<div class="top-box"></div>
|
||||
<div class="title-box dis-f al-item jus-x">
|
||||
<span class="title">房源距离院校</span>
|
||||
<img src="../assets/img/detail/close.png" class="close-icon"
|
||||
@click="showDistance = false" alt="">
|
||||
</div>
|
||||
<div class="distance-box-s" v-if="distanceList.length > 0">
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
|
||||
:key="index" :class="{ 'mg-t-50': index > 0 }">
|
||||
<div class="icon-box dis-f al-item jus-x"
|
||||
:class="{ 'home-icon': item && item.address }">
|
||||
<div class="line" v-show="index > 0"></div>
|
||||
<img src="../assets/img/detail/school.png" class="icon"
|
||||
v-show="item && !item.address" alt="">
|
||||
<img src="../assets/img/detail/home.png" class="icon"
|
||||
v-show="item && item.address" alt="">
|
||||
</div>
|
||||
<div style="width:200px">
|
||||
{{ item && item.name }}
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:540px;">
|
||||
<div v-for="(items, i) in item && item.point" :key="i">
|
||||
<span class="address-info">
|
||||
{{ items.title }}
|
||||
</span>
|
||||
<span v-html="setDistanceList(items && `${items.distance}`)">
|
||||
</span>
|
||||
<!-- <span class="distance-text">
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:480px">
|
||||
<div v-for="(items, i) in item && item.point" :key="i">
|
||||
<span class="address-info">
|
||||
{{ items.title }}
|
||||
</span>
|
||||
<span v-html="setDistanceList(items && `${items.distance}`)">
|
||||
</span>
|
||||
<!-- <span class="distance-text">
|
||||
1.1公里
|
||||
</span> -->
|
||||
</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">
|
||||
<!-- <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="line-school-box dis-f al-item" style="justify-content:space-around;">
|
||||
<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 }"
|
||||
v-if="item && !item.address" class="text-c">
|
||||
{{ item && item.recently_distance }}km
|
||||
@@ -557,8 +559,7 @@
|
||||
<div class="houseing-info-box dis-f al-item jus-bet">
|
||||
<div class="dis-f al-item">
|
||||
房源ID :  <span class="houseing-id" @click="clone(housingInfo['data'] &&
|
||||
housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id
|
||||
}}</span>
|
||||
housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id}}</span>
|
||||
<span class="browse-box">
|
||||
浏览 :<span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
|
||||
}}</span>
|
||||
@@ -1177,7 +1178,7 @@ let clone = (text) => {
|
||||
message: '复制成功',
|
||||
center: true,
|
||||
offset: 320,
|
||||
duration:1000,
|
||||
duration: 1000,
|
||||
customClass: 'message-info'
|
||||
})
|
||||
}
|
||||
@@ -2623,7 +2624,9 @@ img {
|
||||
.houseing-info-box-s {
|
||||
height: 17px;
|
||||
width: 1px;
|
||||
border-right: 1px dashed #d7d7d7;
|
||||
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||||
background-size: 4px 2px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.browse-box {
|
||||
@@ -2736,6 +2739,126 @@ img {
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 101px;
|
||||
@@ -2749,122 +2872,6 @@ img {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
display: none;
|
||||
} */
|
||||
@@ -2902,9 +2909,11 @@ img {
|
||||
}
|
||||
|
||||
.line-img {
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
width: 743px;
|
||||
border: 1px dashed #d7d7d7;
|
||||
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||||
background-size: 4px 2px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.address-box {
|
||||
|
||||
Reference in New Issue
Block a user