372 lines
11 KiB
Vue
372 lines
11 KiB
Vue
<template>
|
|
<div class="pos-r" style="z-index: 1;">
|
|
<div class="authentication-top" :class="[pageType == 2 ? 'intermediary-top' : '']"
|
|
v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1 || data['data'].isintermediary)">
|
|
<div class="dis-f al-item jus-bet">
|
|
<div v-if="pageType == 1">
|
|
<img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
|
|
<img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
|
|
</div>
|
|
<div v-if="pageType == 2" class="dis-f al-item">
|
|
<img src="../../assets/img/detail/intermediaryDetailLogo.png" class="intermediaryDetail-logo" alt="">
|
|
<img src="../../assets/img/detail/intermediaryDetailTItle.png" class="intermediaryDetail-title" alt="">
|
|
</div>
|
|
<div class="dis-f al-item">
|
|
<div class="dis-f al-item">
|
|
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
|
|
<span>
|
|
{{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房产证明' : '真实牌照' }}
|
|
</span>
|
|
</div>
|
|
<div class="dis-f al-item" style="margin-left:20px;">
|
|
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
|
|
<span>
|
|
{{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明'
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title-top-box pos-r">
|
|
<div class="top-round"
|
|
v-if="data['data'] && data['data'].info && data['data'].info.verified === 1 || data['data'].isintermediary">
|
|
<div class="top-round-s" :class="[pageType == 2 ? 'intermediary-bg' : '']"></div>
|
|
</div>
|
|
<div class="breadcrumb-box">
|
|
<el-breadcrumb :separator-icon="ArrowRight">
|
|
<el-breadcrumb-item v-for="(item, i) in storeData['data']" :key="i"
|
|
:to="{ path: item.path, query: item.query }">
|
|
<span class="breadcrumb-text">
|
|
{{ item.title }}
|
|
</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="dis-f al-item jus-bet title-box" style="position: relative;">
|
|
<div class="detail-title">
|
|
{{ data['data']['info'] && data['data']['info'].subject }}
|
|
</div>
|
|
<div class="tool-btn-box dis-f al-item">
|
|
<div class="btn-s dis-f al-item jus-x" @click="operation">
|
|
<div class="pos-r" style="width:20px;height:20px;">
|
|
<img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
|
|
<img src="../../assets/img/detail/collectT.png" v-show="!data.data.isfav" class="img-mouse"
|
|
alt="">
|
|
</div>
|
|
<img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img-t" alt="">
|
|
<span class="mg-l-5">
|
|
{{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
|
|
</span>
|
|
</div>
|
|
<div class="line">
|
|
|
|
</div>
|
|
<div class="btn-s dis-f al-item jus-x">
|
|
<img src="../../assets/img/detail/forward.png" class="img-t" alt="">
|
|
<span class="mg-l-5">
|
|
转发
|
|
</span>
|
|
<transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']"
|
|
:title="data.data.info['subject']" type="housing"></transmit-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowRight } from '@element-plus/icons-vue'
|
|
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
|
|
import store from '@/store'
|
|
import transmitBtn from '@/components/public/transmitBtn.vue'
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: function () {
|
|
return {}
|
|
}
|
|
},
|
|
operation: {
|
|
type: Function
|
|
}
|
|
})
|
|
let data = reactive({})
|
|
|
|
let operation = props.operation
|
|
|
|
//获取路由参数
|
|
let router = useRouter()
|
|
//页面类型
|
|
let pageType = ref('')
|
|
let { type } = router.currentRoute.value.query
|
|
pageType.value = type
|
|
//导航数据
|
|
let storeData = reactive({})
|
|
storeData['data'] = store.state.routeList
|
|
|
|
watchEffect(() => {
|
|
data['data'] = props.data
|
|
storeData['data'] = store.state.routeList
|
|
if (data['data'] && data['data']['info']) pageType.value = data['data']['info'].intermediary === 1 ? 2 : data['data']['info'].intermediary === 6 ? 3 : 1
|
|
})
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.body-maxWidth {
|
|
width: 1200px;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.intermediary-top {
|
|
background: -webkit-linear-gradient(165.253098840457deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
|
background: -moz-linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
|
background: linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
|
|
border: none;
|
|
border-radius: 16px;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.authentication-top {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: -80px;
|
|
width: 1200px;
|
|
height: 65px;
|
|
background: -webkit-linear-gradient(166.822294925074deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
|
|
background: -moz-linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
|
|
background: linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
|
|
border: none;
|
|
border-radius: 16px;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
padding: 10px 22px;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #FFFFFF;
|
|
|
|
.intermediaryDetail-logo {
|
|
width: 25px;
|
|
height: 20px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.intermediaryDetail-title {
|
|
width: 77px;
|
|
height: 20px;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.logo {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.title {
|
|
width: 81px;
|
|
height: 17px;
|
|
}
|
|
|
|
.type-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.title-top-box {
|
|
width: 1200px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: 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;
|
|
transform: translateY(-38px);
|
|
position: relative;
|
|
|
|
.top-round {
|
|
width: 22px;
|
|
height: 22px;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -1px;
|
|
|
|
.top-round-s {
|
|
position: absolute;
|
|
top: -17px;
|
|
left: 0px;
|
|
border-radius: 0 16px 16px 0;
|
|
background: rgba(174, 159, 251, 1);
|
|
width: 22px;
|
|
height: 24px;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.117647058823529);
|
|
}
|
|
|
|
.intermediary-bg {
|
|
background: rgba(174, 215, 249, 1) !important;
|
|
}
|
|
|
|
}
|
|
|
|
.breadcrumb-box {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #ebebeb;
|
|
|
|
.breadcrumb-text:hover {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: #AAAAAA;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.title-box {
|
|
padding: 20px 20px 25px 20px;
|
|
|
|
.detail-title {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
color: #000000;
|
|
line-height: 35px;
|
|
width: 820px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.tool-btn-box {
|
|
width: 244px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 9px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
|
|
.mg-l-5 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.btn-s:hover .img-mouse {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.btn-s:hover .img {
|
|
opacity: 0;
|
|
}
|
|
|
|
.btn-s:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.btn-s {
|
|
color: #333333;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
text-align: center;
|
|
width: 80px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
|
|
.img-mouse {
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.img {
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: all 0.2s linear;
|
|
opacity: 1;
|
|
}
|
|
|
|
.img-t {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 1px;
|
|
height: 21px;
|
|
background: #d7d7d7;
|
|
margin: 0 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}</style>
|
|
|