gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

可点击样式修改

Browse Source
This commit is contained in:
luJianJun 2023-08-08 18:31:20 +08:00
parent ce5e42d668
commit 8cea7d4670
1 changed files with 69 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/detail.vue
View File

@ -53,10 +53,15 @@
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item" @click="setOperation">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
class="tool-icon" alt="">
<div class="dis-f al-item fav-btn" @click="setOperation">
<div class="pos-r" style="width:20px;height:20px;">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
class="fav-img fav-img-t" alt="">
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
class="fav-img fav-img-f" alt="">
</div>
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && housingInfo['data'].isfav"
class="tool-icon" alt="">
@ -99,8 +104,8 @@
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
}}~{{
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
</span>
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
</div>
@ -482,33 +487,33 @@
</div>
<el-scrollbar v-if="distanceList.length > 0" height="500px">
<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':index>0?'200px':'500px'}">
{{ item && item.name }}
</div>
<div class="dis-f" style="flex-wrap: wrap;width:480px" v-if="index!=0">
<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 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': index > 0 ? '200px' : '500px' }">
{{ item && item.name }}
</div>
<div class="dis-f" style="flex-wrap: wrap;width:480px" v-if="index != 0">
<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 class="distance-box-s">
</div> -->
@ -790,7 +795,8 @@
</div>
<div class="body-maxWidth" v-if="publisherList.length > 0">
<div style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
<biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item" v-show="item&&item.verified">
<biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item"
v-show="item && item.verified">
</biserialItem>
</div>
</div>
@ -1281,7 +1287,7 @@ let contacts = reactive({
let getHousingInfo = () => {
api.details({
uniqid: uniqid.value,
uid:store.state.user.uid
uid: store.state.user.uid
}).then(res => {
// console.log(res)
if (res.code === 200) {
@ -1961,7 +1967,8 @@ img {
.top-contact-btn {
width: 200px !important;
}
.contact-btn:hover{
.contact-btn:hover {
background: -webkit-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
background: -moz-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
background: linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
@ -2061,6 +2068,18 @@ img {
width: 210px;
}
.fav-btn{
}
.fav-btn:hover .fav-img-f{
opacity: 0.4;
}
.fav-btn:hover .fav-img-t{
opacity:0;
}
.tool-btn {
width: 199px;
height: 48px;
@ -2077,6 +2096,22 @@ img {
font-size: 14px;
cursor: pointer;
.fav-img{
width: 20px;
height:20px;
position: absolute;
top:0;
left:0;
transition: all linear 0.2s;
}
.fav-img-f{
opacity:0;
}
.fav-img-t{
opacity:1;
}
.tool-icon {
width: 20px;
height: 20px;
@ -2433,7 +2468,8 @@ img {
flex-shrink: 0;
position: relative;
}
.img:hover{
.img:hover {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
@ -2545,7 +2581,7 @@ img {
font-style: normal;
color: #7F7F7F;
font-size: 14px;
padding:15px 0;
padding: 15px 0;
.title-box {
width: 65px;