|
|
@@ -1,85 +1,63 @@
|
|
|
<template>
|
|
|
- <el-affix position="bottom" :offset="400">
|
|
|
- <div class="seek-from">
|
|
|
- <el-popover
|
|
|
- :width="180"
|
|
|
- placement="left"
|
|
|
- popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <div class="advice">
|
|
|
- <img
|
|
|
- class="advice-img"
|
|
|
- src="../../assets/image/dianhua.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <p class="advice-name">电话咨询</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div
|
|
|
- class="demo-rich-conent"
|
|
|
- style="display: flex; gap: 16px; flex-direction: column"
|
|
|
- >
|
|
|
- <p class="seek">400免费咨询热线</p>
|
|
|
- <p class="phone">{{ configData.pre_sale_mobile }}</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- <el-popover
|
|
|
- :width="200"
|
|
|
- placement="left"
|
|
|
- popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <div class="advice">
|
|
|
- <img class="advice-img" src="../../assets/image/guwen.png" alt="" />
|
|
|
- <p class="advice-name">专属顾问</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div
|
|
|
- class="demo-rich-conent"
|
|
|
- style="display: flex; gap: 16px; flex-direction: column"
|
|
|
- >
|
|
|
- <p class="scan">扫描添加专属顾问</p>
|
|
|
- <img class="qr-code" :src="configData.service_qr_code" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- <el-popover
|
|
|
- :width="200"
|
|
|
- placement="left"
|
|
|
- popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <div class="advice">
|
|
|
- <img
|
|
|
- class="advice-img"
|
|
|
- src="../../assets/image/gongzhonghao.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <p class="advice-name">微信</p>
|
|
|
- <p class="advice-name">公众号</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div
|
|
|
- class="demo-rich-conent"
|
|
|
- style="display: flex; gap: 16px; flex-direction: column"
|
|
|
- >
|
|
|
- <p class="scan">扫描关注微信公众号</p>
|
|
|
- <img class="qr-code" :src="configData.official_qr_code" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
+ <div class="seek-from">
|
|
|
+ <div
|
|
|
+ class="advice advice-1"
|
|
|
+ @mouseenter="handleMouseenter('phone')"
|
|
|
+ @mouseleave="handleMouseLeave"
|
|
|
+ >
|
|
|
+ <img class="advice-img" src="../../assets/image/dianhua.png" alt="" />
|
|
|
+ <p class="advice-name">电话咨询</p>
|
|
|
+ <div class="demo-rich-conent" v-if="typeName == 'phone'">
|
|
|
+ <p class="seek">400免费咨询热线</p>
|
|
|
+ <p class="phone">{{ configData.pre_sale_mobile }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-affix>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="advice"
|
|
|
+ @mouseenter="handleMouseenter('adviser')"
|
|
|
+ @mouseleave="handleMouseLeave"
|
|
|
+ >
|
|
|
+ <img class="advice-img" src="../../assets/image/guwen.png" alt="" />
|
|
|
+ <p class="advice-name">专属顾问</p>
|
|
|
+ <div class="demo-rich-conent-2" v-if="typeName == 'adviser'">
|
|
|
+ <p class="scan">扫描添加专属顾问</p>
|
|
|
+ <img class="qr-code" :src="configData.service_qr_code" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="advice advice-3"
|
|
|
+ @mouseenter="handleMouseenter('wx')"
|
|
|
+ @mouseleave="handleMouseLeave"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="advice-img"
|
|
|
+ src="../../assets/image/gongzhonghao.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p class="advice-name">微信</p>
|
|
|
+ <p class="advice-name">公众号</p>
|
|
|
+ <div class="demo-rich-conent-2" v-if="typeName == 'wx'">
|
|
|
+ <p class="scan">扫描关注微信公众号</p>
|
|
|
+ <img class="qr-code" :src="configData.official_qr_code" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted } from "vue";
|
|
|
import { config } from "../../api/config";
|
|
|
const configData: any = ref({});
|
|
|
+const typeName: any = ref("");
|
|
|
+
|
|
|
+const handleMouseenter = (value: string) => {
|
|
|
+ typeName.value = value;
|
|
|
+};
|
|
|
+
|
|
|
+const handleMouseLeave = () => {
|
|
|
+ typeName.value = "";
|
|
|
+};
|
|
|
|
|
|
const getInfo = () => {
|
|
|
config({ module: "basic" }).then((res) => {
|
|
|
@@ -92,46 +70,86 @@ onMounted(() => {
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
.seek-from {
|
|
|
- width: 64px;
|
|
|
- height: 198px;
|
|
|
- background: #ffffff;
|
|
|
box-shadow: 0px 2px 18px -6px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 32px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- padding: 22px 0;
|
|
|
- position: absolute;
|
|
|
- right: 260px;
|
|
|
+ position: fixed;
|
|
|
+ right: 360px;
|
|
|
+ bottom: 100px;
|
|
|
+ z-index: 1000;
|
|
|
+ .advice-1 {
|
|
|
+ border-radius: 32px 32px 0 0;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .advice-3 {
|
|
|
+ border-radius: 0 0 32px 32px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
.advice {
|
|
|
+ width: 64px;
|
|
|
+ height: 70px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ background: #ffffff;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
.advice-img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
+ margin-bottom: 6px;
|
|
|
}
|
|
|
.advice-name {
|
|
|
font-size: 12px;
|
|
|
color: #222;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .demo-rich-conent {
|
|
|
+ position: absolute;
|
|
|
+ background-image: url("../../assets/image/phonebg.png");
|
|
|
+ width: 150px;
|
|
|
+ height: 98px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: 60px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-left: 24px;
|
|
|
+ .seek {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #222;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .phone {
|
|
|
+ color: #0d0fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .demo-rich-conent-2 {
|
|
|
+ position: absolute;
|
|
|
+ background-image: url("../../assets/image/phonebg.png");
|
|
|
+ width: 230px;
|
|
|
+ height: 260px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: 60px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 14px 0;
|
|
|
+ .scan {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .qr-code {
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.seek {
|
|
|
- font-size: 12px;
|
|
|
- color: #222;
|
|
|
-}
|
|
|
-.phone {
|
|
|
- color: #0d0fff;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.scan {
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.qr-code {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
-}
|
|
|
</style>
|
