67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
||
<!-- 有疑问 -->
|
||
<div class="flexcenter" style="padding: 78px 0;">
|
||
<el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="hover"
|
||
popper-style="border-radius: 14px;padding: 20px;">
|
||
<template #reference>
|
||
<div class="have-questions flexcenter">
|
||
<div class="have-questions-text flexacenter">有疑问？来找<img class="smiling"
|
||
src="@/assets/img/publicImage/smiling.png">{{ wechat['nickname'] }}！</div>
|
||
<div class="have-questions-btn flexcenter">
|
||
<!-- <img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信 -->
|
||
<img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />马上联系
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<img class="QR-code" :src="wechat['personalqrcode']" alt="">
|
||
</el-popover>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { toRefs } from 'vue';
|
||
import { useStore } from 'vuex';
|
||
const store = useStore();
|
||
const { wechat } = toRefs(store.state);
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.have-questions {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
|
||
.QR-code {
|
||
width: 100%;
|
||
}
|
||
|
||
.have-questions-text {
|
||
color: #7F7F7F;
|
||
font-size: 14px;
|
||
margin-bottom: 14px;
|
||
|
||
.smiling {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
|
||
.have-questions-btn {
|
||
width: 166px;
|
||
height: 40px;
|
||
border-radius: 40px;
|
||
font-size: 18px;
|
||
font-weight: 650;
|
||
color: #333;
|
||
border: 1px solid #7f7f7f;
|
||
cursor: pointer;
|
||
|
||
.have-questions-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style> |