134 lines
3.4 KiB
Vue
134 lines
3.4 KiB
Vue
<template>
|
|
<div class="info-box dis-f al-item" :class="{'intermediary-housing-s':type==2}">
|
|
|
|
<img src="../../assets/img/detail/authenticationInfoR.svg" v-if="type==1" class="tab-img" alt="">
|
|
<img src="../../assets/img/detail/authenticationInfoInte.svg" v-if="type==2" class="tab-img" alt="">
|
|
<div class="dis-f al-item">
|
|
<div class="tab-text">
|
|
<div class="dis-f al-item" v-for="(item, i) in tabText" :key="i" :class="{ 'mg-t-25': i > 0 }">
|
|
<img src="../../assets/img/detail/authenticationInfoTab.svg" class="tab-icon" alt="" v-if="type==1">
|
|
<img src="../../assets/img/detail/authenticationInfoInteTab.svg" class="tab-icon" alt="" v-if="type==2">{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="mg-l-100">
|
|
<div class="qr-code-bg dis-f jus-x al-item">
|
|
<img src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth" v-if="type==1" class="qr-code" alt="">
|
|
<img src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth" v-if="type==2" class="qr-code" alt="">
|
|
</div>
|
|
<div class="code-text">
|
|
微信扫码认证
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineProps } from 'vue'
|
|
import { useRouter } from "vue-router";
|
|
|
|
const props = defineProps({
|
|
//1 个人房源认证 2 中介房源认证
|
|
type:{
|
|
type:[Number,String]
|
|
}
|
|
})
|
|
|
|
//路由
|
|
let router=useRouter()
|
|
let type = props.type
|
|
|
|
let tabText=null
|
|
type==1?tabText = ['认证标识', '发布更多房源', '求房源对接']:
|
|
type==2?tabText = ['身份标识', '发布更多房源', '求房源对接']:[]
|
|
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.mg-t-25 {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.mg-l-100 {
|
|
margin-left: 100px;
|
|
}
|
|
.intermediary-housing-s{
|
|
background: #f1f5f7 !important;
|
|
border:1px solid #dbe7ed !important;
|
|
}
|
|
|
|
.info-box {
|
|
width: 466px;
|
|
height: 217px;
|
|
border-radius: 16px;
|
|
border: 1px solid #e4e4f6;
|
|
background: #f4f3ff;
|
|
position: relative;
|
|
padding:0 45px;
|
|
|
|
.tab-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.tab-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.qr-code-bg {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: none;
|
|
border-radius: 70px;
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
|
|
.qr-code {
|
|
width: 102px;
|
|
height: 102px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.code-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
margin-top:15px;
|
|
}
|
|
}
|
|
|
|
.tab-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
right: -1px;
|
|
top: -1px;
|
|
}</style>
|
|
|