160 lines
4.0 KiB
Vue
160 lines
4.0 KiB
Vue
<template>
|
||
<div class="circle-btn flexcenter" @click="circleState = true">
|
||
<div class="circle-inside flexcenter">
|
||
<img class="circle-bj" src="@/assets/img/publicImage/half-circle-green.svg" />
|
||
<img class="circle-icon" src="@/assets/img/publicImage/consult-hollow-out.png" />
|
||
<div class="circle-text">咨询</div>
|
||
</div>
|
||
<div class="circle-pop flexacenter" v-if="circleState">
|
||
<img class="close-icon" src="@/assets/img/publicImage/circle-close.png" alt=""
|
||
@click.stop="circleState = false">
|
||
<img class="circle-bj" src="@/assets/img/publicImage/circle-pop-bj.svg">
|
||
<img class="circle-bj-green" src="@/assets/img/publicImage/circle-pop-bj-green.svg">
|
||
<div class="circle-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
|
||
<div class="circle-QRcode flexcenter">
|
||
<img class="circle-QRcode-img" :src="wechat['wechatqrcode']" />
|
||
</div>
|
||
<div class="circle-hint">微信扫码添加好友</div>
|
||
<div class="circle-remark flexacenter">备注：<b>寄托租房</b></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, toRefs } from 'vue'
|
||
import { useStore } from 'vuex';
|
||
const store = useStore();
|
||
const { wechat } = toRefs(store.state);
|
||
|
||
let circleState = ref(false)
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.circle-btn {
|
||
position: fixed;
|
||
bottom: 58px;
|
||
right: 58px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background-color: #50e3c2;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
z-index: 10000;
|
||
|
||
.circle-inside {
|
||
flex-direction: column;
|
||
background-color: #cbf7ed;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
z-index: 1;
|
||
color: #000;
|
||
font-size: 14px;
|
||
|
||
.circle-bj {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 50px;
|
||
height: 50px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.circle-icon {
|
||
width: 20px;
|
||
height: 17px;
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.circle-pop {
|
||
position: absolute;
|
||
bottom: 65px;
|
||
right: 65px;
|
||
width: 300px;
|
||
height: 300px;
|
||
border-radius: 10px;
|
||
flex-direction: column;
|
||
z-index: 1100;
|
||
padding-top: 45px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||
|
||
.close-icon {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.circle-bj {
|
||
position: absolute;
|
||
top: -15px;
|
||
left: -15px;
|
||
width: 341px;
|
||
height: 336px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.circle-bj-green {
|
||
width: 311px;
|
||
height: 156px;
|
||
position: absolute;
|
||
bottom: -7.5px;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.circle-title {
|
||
font-size: 15px;
|
||
color: #555555;
|
||
margin-bottom: 24px;
|
||
|
||
b {
|
||
color: #000;
|
||
font-weight: 650;
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
|
||
.circle-QRcode {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 20px;
|
||
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||
margin-bottom: 20px;
|
||
background: #fff;
|
||
|
||
.circle-QRcode-img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
.circle-hint {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.circle-hint,
|
||
.circle-remark {
|
||
font-size: 13px;
|
||
color: #555555;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.circle-remark {
|
||
b {
|
||
font-weight: 650;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
</style> |