1032 lines
28 KiB
Vue
1032 lines
28 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div>
|
||
<div class="contener" v-if=" orgType == 2 || orgType == 3 || !userid">
|
||
|
||
|
||
<transition name="slide">
|
||
<div v-show="windowsHidden" style="font-size: 14px">
|
||
<div class="new-floating" style="z-index: 9999;">
|
||
<img src="./img/head.png" alt="">
|
||
<div class="cloud-contact-us " @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||
<!-- <span class="cloud-contact-us-i"></span>-->
|
||
<span> 售</span>
|
||
<span> 前</span>
|
||
<span> 咨</span>
|
||
<span> 询</span>
|
||
</div>
|
||
<!-- <div class="cart-entry-wrapper" @click="tryUse">-->
|
||
<!-- <el-tooltip class="item" effect="light" content="申请试用" placement="left">-->
|
||
<!-- <div class="cart-entry">-->
|
||
<!-- <span class="cart-icon"></span>-->
|
||
<!-- </div>-->
|
||
<!-- </el-tooltip>-->
|
||
|
||
<!-- </div>-->
|
||
<div @click="open2"
|
||
|
||
style="position:absolute;bottom:-40px;display: flex;justify-content: center;align-items: center;cursor: pointer">
|
||
<el-tooltip v-if="getHomePath()!=='/ncmatchHome/index'" class="item" effect="light" content="联系销售" placement="left">
|
||
<span class="el-icon-video-camera"
|
||
style="font-weight: 550;font-size: 22px;"></span>
|
||
</el-tooltip>
|
||
|
||
<!-- </div>-->
|
||
<!-- <div class="cart-entry-wrapper" style="visibility: visible;">-->
|
||
<!-- <div class="cart-entry" data-track-category="购物车浮层" data-track-name="入口点击"-->
|
||
<!-- data-track-action="click"><span class="cart-icon"></span></div>-->
|
||
<!-- <span class="cart-icon"></span>-->
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
|
||
<!-- style="cursor: default;">-->
|
||
<!-- <span>联系我们</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="floating-box1" @click="tryUse">-->
|
||
|
||
<!-- <span>申请试用</span>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</transition>
|
||
|
||
|
||
<!-- <transition name="slide">-->
|
||
<!-- <div v-show="windowsHidden">-->
|
||
<!-- <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
|
||
<!-- style="cursor: default;">-->
|
||
<!-- <i class="el-icon-s-comment"></i>-->
|
||
<!-- <span>联系我们</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="floating-box1" @click="tryUse">-->
|
||
<!-- <i class="el-icon-s-order"></i>-->
|
||
<!-- <span>申请试用</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </transition>-->
|
||
|
||
<div v-if="false" @click="windowsHidden=!windowsHidden" class="floating-box1 hiddenBtn"
|
||
style="width: 50px;height: 50px;border-radius:50%;bottom: 30px;background-color: #f1e9e9;color: blue">
|
||
<i class="el-icon-arrow-right" style="color: blue" v-show="windowsHidden"></i>
|
||
<i class="el-icon-arrow-left" style="color: blue" v-show="!windowsHidden"></i>
|
||
</div>
|
||
|
||
|
||
<transition name="el-zoom-in-top">
|
||
<!--isShow&&windowsHidden -->
|
||
<div v-show="isShow&&windowsHidden" class="cloud-contact-us-spread-container" style="z-index: 9">
|
||
<ul class="cloud-contact-us-spread" style="padding-left: 15px;">
|
||
<li class="cloud-contact-us-tel" style="height: 90px;">
|
||
<div style="display: flex;justify-content: center;align-items: center;padding-top: 15px">
|
||
<div data-track-action="click" data-track-category="右侧公共悬浮区" data-track-name="售前咨询"
|
||
data-agl-cvt="5"
|
||
style="height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
||
<div
|
||
style="margin-left: -50px;width: 100px;height: 30px;display: flex;justify-content: center;align-items: center">
|
||
<span style="margin-right: 5px;margin-top: 17px;height: 35px;"
|
||
class="cloud-contact-us-icon"></span>
|
||
<p class="cloud-contact-us-tit" style="font-size: 14px;">售前咨询</p>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;align-items: center;"
|
||
>
|
||
<div v-if="!phone"
|
||
style="width: 80px;height: 25px;display: flex!important;justify-content: center;align-items: center">
|
||
<el-skeleton
|
||
style="width: 100%;padding: 0;margin: 0;height: 100%;margin-top: -25px"
|
||
rows="1"
|
||
animated/>
|
||
</div>
|
||
<p v-else class="cloud-contact-us-con" style="font-size: 12px;height: 20px;margin-top: 5px">
|
||
{{ phone }}</p></div>
|
||
</div>
|
||
<div v-if="false" style="width: 90px;height: 90px;">
|
||
<div class="img"
|
||
style="width: 90px;height: 90px; display: flex;justify-content: center;align-items: center"
|
||
>
|
||
<el-skeleton style="width: 80px;height: 80px;" :loading="loading" animated
|
||
v-if="isShowPicLoading">
|
||
<template slot="template">
|
||
<el-skeleton-item
|
||
variant="image"
|
||
style="width: 80px; height:80px ;"
|
||
/>
|
||
</template>
|
||
</el-skeleton>
|
||
<img style="width: 80px;height: 80px;" v-else @load="onImageLoad" :src="src" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<!-- <div class="dialog" v-if="false"-->
|
||
<!-- style="display: flex;justify-content: space-around;">-->
|
||
<!-- <div class="phone">-->
|
||
<!-- <span class="sonOne">业务咨询</span>-->
|
||
<!-- <span class="sonTwo">生态合作总监</span>-->
|
||
<!-- <span class="sonThree" style="display: flex;">-->
|
||
<!-- 电话:-->
|
||
<!-- <el-skeleton style="width: 120px" animated v-if="isShowPicLoading">-->
|
||
<!-- <template slot="template">-->
|
||
<!-- <el-skeleton-item variant="image" style="width: 70px; height: 20px;"/>-->
|
||
<!-- </template>-->
|
||
<!-- </el-skeleton>-->
|
||
<!-- <span v-else>{{ phone }}</span>-->
|
||
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="img" style="display: flex;justify-content: center;align-items: center"-->
|
||
<!-- >-->
|
||
<!-- <el-skeleton style="width: 100%" :loading="loading" animated v-if="isShowPicLoading">-->
|
||
<!-- <template slot="template">-->
|
||
<!-- <el-skeleton-item-->
|
||
<!-- variant="image"-->
|
||
<!-- style="width: 100px; height:100px ;"-->
|
||
<!-- />-->
|
||
<!-- </template>-->
|
||
<!-- </el-skeleton>-->
|
||
<!-- <img v-else @load="onImageLoad" :src="src" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</transition>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 申请试用弹窗 -->
|
||
<el-dialog title="申请试用产品" :visible.sync="dialogVisible" width="35%" :before-close="handleClose"
|
||
custom-class="apply-use">
|
||
<el-form ref="form" :model="form" label-width="120px" :rules="rules" style="width: 80%">
|
||
<el-form-item label="姓名:" prop="customer">
|
||
<el-input v-model="form.customer" placeholder="请输入姓名"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系方式:" prop="phone">
|
||
<el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="公司:" prop="unit">
|
||
<el-input v-model="form.unit" placeholder="请输入公司名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数量:">
|
||
<el-input disabled v-model="form.product_num" placeholder="请输入资源数量"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="需求型号:" prop="resources">
|
||
<!-- <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.resources" placeholder="请输入资源需求"></el-input>-->
|
||
<el-checkbox-group v-model="form.resources" style="display: flex;flex-wrap: wrap;">
|
||
<el-checkbox label="H800" style="width: 50%;"></el-checkbox>
|
||
<el-checkbox label="H100" style="width: 50%;"></el-checkbox>
|
||
<el-checkbox label="A800" style="width: 50%;"></el-checkbox>
|
||
<el-checkbox label="A100" style="width: 50%;"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="onSubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 选择视频类型-->
|
||
<!-- v-if="isShowChangeChat"-->
|
||
<div v-if="isShowChangeChat " class="changeChat" style="">
|
||
<span style="margin-bottom: 5px;display: block">请选择聊天方式</span>
|
||
<el-checkbox-group :min="1" style="margin-bottom: 5px" v-model="checkType">
|
||
<el-checkbox label="文字"></el-checkbox>
|
||
<el-checkbox label="视频"></el-checkbox>
|
||
<el-checkbox label="音频"></el-checkbox>
|
||
</el-checkbox-group>
|
||
<div style="display: flex;justify-content: flex-end">
|
||
<el-button size="mini" @click="closeWindow">关闭</el-button>
|
||
<el-button type="primary" size="mini" @click="goVedioPage">立即沟通</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {contantAPI, applyAPI} from "../../api/floatingWindow/index";
|
||
import axios from "axios";
|
||
import {mapState} from "vuex";
|
||
import {getCustomerOfSaleUserId} from "@/api/customer/vedio";
|
||
import { getHomePath } from "@/views/setting/tools";
|
||
|
||
export default {
|
||
// 组件的逻辑代码
|
||
data() {
|
||
return {
|
||
socket: null,
|
||
checkType: ['文字'],
|
||
isShowChangeChat: false,//控制选择沟通方式弹窗
|
||
loading: true,
|
||
currentDate: '2021-06-01',
|
||
isShowPicLoading: true,//图片loading展示
|
||
isSend: true,
|
||
windowsHidden: true,
|
||
// 获取用户代理字P串
|
||
userAgent: window.navigator.userAgent,
|
||
// 判断是否为移动设备
|
||
isMobile: false,
|
||
url: window.location.href,
|
||
orgType: "",
|
||
isShow: false,
|
||
userid: sessionStorage.getItem('userId'),
|
||
src: null,
|
||
phone: null,
|
||
title: '',
|
||
dialogVisible: false,
|
||
form: {
|
||
customer: '',
|
||
phone: '',
|
||
unit: '',
|
||
product_num: '1（台）',
|
||
resources: ['H800']
|
||
},
|
||
rules: {
|
||
customer: [
|
||
{required: true, message: "请输入姓名", trigger: "change"},
|
||
],
|
||
phone: [{pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: "请输入有效的手机号"},
|
||
{required: true, trigger: "blur", message: "请输入手机号"}],
|
||
unit: [
|
||
{required: true, message: "请输入单位", trigger: 'change'},
|
||
],
|
||
product: [
|
||
{required: true, message: "请输入资源名称", trigger: 'change'},
|
||
],
|
||
resources: [
|
||
{required: true, message: "请输入资源需求", trigger: 'blur'},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
||
|
||
},
|
||
watch: {
|
||
'$route': { // $route可以用引号，也可以不用引号
|
||
handler(to, from) {
|
||
this.orgType = sessionStorage.getItem('org_type') ? sessionStorage.getItem('org_type') : "";
|
||
this.userid = sessionStorage.getItem('userId') ? sessionStorage.getItem('userId') : "";
|
||
},
|
||
deep: true, // 深度监听
|
||
immediate: true, // 第一次初始化渲染就可以监听到
|
||
}
|
||
},
|
||
mounted() {
|
||
// debugger
|
||
// console.log("路由展示~~~",location.href)
|
||
// console.log("路由展示~~~",this.$route)
|
||
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
// 让模板中可以直接调用 getHomePath()
|
||
getHomePath,
|
||
openTip() {
|
||
this.$notify({
|
||
title: '提示',
|
||
message: '当前还未登录，请先登录~',
|
||
type: 'warning'
|
||
});
|
||
},
|
||
|
||
goVedioPage() {
|
||
if (!sessionStorage.getItem('userId')) {
|
||
console.log("未登录，请重新登录")
|
||
this.openTip()
|
||
} else {
|
||
let ploady = {
|
||
audioIsOn: 0,
|
||
vedioIsOn: 0,
|
||
chatIsOn: 0,
|
||
userId: this.userid,
|
||
toUserId: 0,
|
||
customerName: sessionStorage.getItem('username'),
|
||
}
|
||
for (let i = 0; i < this.checkType.length; i++) {
|
||
if (this.checkType[i] === '文字') {
|
||
ploady.chatIsOn = 1
|
||
} else if (this.checkType[i] === '视频') {
|
||
ploady.vedioIsOn = 1
|
||
} else if (this.checkType[i] === '音频') {
|
||
ploady.audioIsOn = 1
|
||
}
|
||
}
|
||
|
||
|
||
getCustomerOfSaleUserId({userid: this.userid}).then(res => {
|
||
let routeData = {
|
||
chatIsOn: ploady.chatIsOn,
|
||
vedioIsOn: ploady.vedioIsOn,
|
||
audioIsOn: ploady.audioIsOn,
|
||
value: 'customer'
|
||
}
|
||
if (res.status) {
|
||
this.$router.push({
|
||
path: '/customer/chat',
|
||
query: {
|
||
chatIsOn: ploady.chatIsOn,
|
||
vedioIsOn: ploady.vedioIsOn,
|
||
audioIsOn: ploady.audioIsOn,
|
||
room: res.data,
|
||
name: sessionStorage.getItem('username')
|
||
}
|
||
})
|
||
this.isShowChangeChat = false
|
||
// let webSocketUrl = 'wss://www.opencomputing.cn/dev/wss/pub/rtcc.ws'
|
||
let webSocketUrl = 'wss://www.opencomputing.cn/pub/rtcc.ws'
|
||
this.socket = new WebSocket(webSocketUrl)
|
||
let ploadyed = {
|
||
type: 'send',
|
||
from: sessionStorage.getItem('userId'),
|
||
uuid: res.data,
|
||
content: JSON.stringify(routeData)
|
||
}
|
||
// let ploadyed = {
|
||
// type: 'send',
|
||
// from: "user1",
|
||
// uuid: "asdsad",
|
||
// content: {}
|
||
// }
|
||
this.socket.onopen = (event) => {
|
||
console.log("客户创建成功了@@@@@")
|
||
console.log("发送的信息是", ploadyed)
|
||
this.socket.send(JSON.stringify(ploadyed));
|
||
};
|
||
|
||
this.socket.onmessage = (event) => {
|
||
console.log('接收到消息@@@@：', event.data);
|
||
};
|
||
|
||
this.socket.onclose = (event) => {
|
||
console.log('WebSocket连接已关闭');
|
||
};
|
||
} else {
|
||
console.log("zouleels")
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
|
||
},
|
||
open2() {
|
||
this.isShowChangeChat = true
|
||
},
|
||
//关闭弹窗
|
||
closeWindow() {
|
||
this.isShowChangeChat = false
|
||
},
|
||
onImageLoad() {
|
||
this.isShowPicLoading = false
|
||
console.log()
|
||
},
|
||
handleMouseEnter() {//鼠标移入事件
|
||
this.isShow = true
|
||
if (this.isSend) {
|
||
this.contant()
|
||
}
|
||
// this.contant()
|
||
},
|
||
handleMouseLeave() {//鼠标移出事件
|
||
this.isSend = true
|
||
this.src = ''
|
||
this.phone = ''
|
||
this.title = ''
|
||
this.isShow = false
|
||
this.isShowPicLoading = true
|
||
},
|
||
contant() {//联系我们
|
||
let params = {
|
||
// userid: sessionStorage.getItem("userId")
|
||
}
|
||
if (this.url.indexOf('www') != -1) {
|
||
params.domain = 'www'
|
||
}
|
||
contantAPI(params).then(res => {
|
||
this.isSend = false
|
||
|
||
this.isShowPicLoading = false
|
||
if (res.status) {
|
||
|
||
this.src = res.picture_url
|
||
this.phone = res.contactor_phone
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
onSubmit() {//点击确认申请试用
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
let pamars = {
|
||
customer: this.form.customer,
|
||
phone: this.form.phone,
|
||
unit: this.form.unit,
|
||
resources: this.form.resources,
|
||
userid: sessionStorage.getItem("userId")
|
||
}
|
||
applyAPI(pamars).then(res => {
|
||
if (res.status) {
|
||
this.dialogVisible = false
|
||
this.$message({
|
||
message: "成功申请试用",
|
||
type: "success",
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
tryUse() {//申请试用
|
||
|
||
if (sessionStorage.getItem("userId")) {
|
||
this.dialogVisible = true
|
||
} else {
|
||
// window.open('https://www.opencomputing.cn/#/floatingBox')
|
||
this.$router.push('/floatingBox')
|
||
}
|
||
|
||
},
|
||
handleClose() {
|
||
this.$refs.form.resetFields();
|
||
this.dialogVisible = false
|
||
},
|
||
//是否展示悬浮窗
|
||
isShowFloating() {
|
||
|
||
|
||
return false
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
.contener {
|
||
.dialog {
|
||
width: 400px;
|
||
height: 150px;
|
||
background-color: #fff;
|
||
z-index: 100 !important;
|
||
position: fixed;
|
||
right: 80px;
|
||
bottom: 150px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-radius: 5px 5px 5px 5px;
|
||
|
||
.phone {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sonOne {
|
||
font-size: 24px;
|
||
color: #1e92f8;
|
||
margin-bottom: 14px;
|
||
margin-top: 26px;
|
||
margin-left: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sonTwo {
|
||
font-size: 18px;
|
||
margin-bottom: 14px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.sonThree {
|
||
font-size: 18px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
|
||
.nameCard {
|
||
font-size: 20px;
|
||
line-height: 150px;
|
||
}
|
||
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.floating-box {
|
||
/* 悬浮框的样式，例如背景色、边框、位置等 */
|
||
width: 80px;
|
||
height: 80px;
|
||
position: fixed;
|
||
bottom: 170px;
|
||
right: 0px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
z-index: 99 !important;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
background-color: #1890ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: white;
|
||
font-size: 28px;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
|
||
/* 其他样式 */
|
||
}
|
||
|
||
.floating-box1 {
|
||
/* 悬浮框的样式，例如背景色、边框、位置等 */
|
||
cursor: pointer;
|
||
width: 80px;
|
||
height: 80px;
|
||
position: fixed;
|
||
bottom: 80px;
|
||
right: 0px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
z-index: 99 !important;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
background-color: #1890ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: white;
|
||
font-size: 28px;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
|
||
/* 其他样式 */
|
||
}
|
||
}
|
||
|
||
.contenerMobile {
|
||
.dialog {
|
||
width: 200px;
|
||
height: 100px;
|
||
background-color: #fff;
|
||
z-index: 100 !important;
|
||
position: fixed;
|
||
right: 80px;
|
||
bottom: 150px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-radius: 5px 5px 5px 5px;
|
||
|
||
.phone {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sonOne {
|
||
font-size: 14px;
|
||
color: #1e92f8;
|
||
margin-bottom: 14px;
|
||
margin-top: 16px;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sonTwo {
|
||
font-size: 12px;
|
||
margin-bottom: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.sonThree {
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
|
||
.nameCard {
|
||
font-size: 20px;
|
||
line-height: 150px;
|
||
}
|
||
|
||
img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.floating-box {
|
||
/* 悬浮框的样式，例如背景色、边框、位置等 */
|
||
width: 60px;
|
||
height: 60px;
|
||
position: fixed;
|
||
bottom: 170px;
|
||
right: 0px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
padding: 5px;
|
||
z-index: 99 !important;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
background-color: #1890ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: white;
|
||
font-size: 20px;
|
||
}
|
||
|
||
span {
|
||
font-size: 8px;
|
||
color: white;
|
||
}
|
||
|
||
/* 其他样式 */
|
||
}
|
||
|
||
.floating-box1 {
|
||
/* 悬浮框的样式，例如背景色、边框、位置等 */
|
||
cursor: pointer;
|
||
width: 60px;
|
||
height: 60px;
|
||
position: fixed;
|
||
bottom: 80px;
|
||
right: 0px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
padding: 5px;
|
||
z-index: 99 !important;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
background-color: #1890ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: white;
|
||
font-size: 20px;
|
||
}
|
||
|
||
span {
|
||
font-size: 8px;
|
||
color: white;
|
||
}
|
||
|
||
/* 其他样式 */
|
||
}
|
||
|
||
.floating-box2 {
|
||
/* 悬浮框的样式，例如背景色、边框、位置等 */
|
||
cursor: pointer;
|
||
width: 80px;
|
||
height: 80px;
|
||
position: fixed;
|
||
bottom: 80px;
|
||
right: 0px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
z-index: 99 !important;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
background-color: #1890ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: white;
|
||
font-size: 28px;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.hiddenBtn:hover {
|
||
background-color: #1890ff !important;
|
||
|
||
i {
|
||
color: white !important;
|
||
}
|
||
}
|
||
|
||
.slide-enter-active {
|
||
animation: slide-in 0.8s;
|
||
}
|
||
|
||
.slide-leave-active {
|
||
animation: slide-out 0.8s;
|
||
}
|
||
|
||
@keyframes slide-in {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slide-out {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
.new-floating {
|
||
img {
|
||
position: absolute;
|
||
top: -28px;
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
width: 40px;
|
||
height: 100px;
|
||
z-index: 2;
|
||
position: fixed;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
top: 250px;
|
||
right: 10px;
|
||
//overflow: hidden;
|
||
padding: 10px 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
box-shadow: 0px 0px 20px 0px rgba(185, 208, 210, 0.15);
|
||
border-radius: 50px 50px 50px 50px;
|
||
background: linear-gradient(180deg, #275AFF 0%, #2EBDFA 100%);
|
||
border-radius: 50px 50px 50px 50px;
|
||
}
|
||
|
||
.cloud-contact-us-i {
|
||
background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
|
||
background-position: -125px 0;
|
||
background-size: 300px 20px;
|
||
height: 20px;
|
||
width: 20px;
|
||
}
|
||
|
||
.cloud-contact-us {
|
||
align-items: center;
|
||
border-radius: 4px;
|
||
box-shadow: none;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: white;
|
||
margin: 0;
|
||
padding: 0;
|
||
position: relative;
|
||
width: 40px;
|
||
flex-direction: column;
|
||
|
||
|
||
&:hover {
|
||
.cloud-contact-us-i {
|
||
background-position: -100px 0
|
||
}
|
||
|
||
|
||
//.active {
|
||
// border: 5px solid red;
|
||
// background-color: white !important;
|
||
// color: blue !important;
|
||
//}
|
||
}
|
||
}
|
||
|
||
//.cloud-contact-us-i {
|
||
// background-position: -100px 0
|
||
//}
|
||
|
||
.cloud-contact-us.active {
|
||
background-color: #fff;
|
||
box-shadow: none
|
||
}
|
||
|
||
.cloud-contact-us:after {
|
||
background: rgba(34, 34, 34, .08);
|
||
bottom: 0;
|
||
content: "";
|
||
display: block;
|
||
height: 1px;
|
||
left: 10px;
|
||
position: absolute;
|
||
width: 22px;
|
||
}
|
||
|
||
.cart-entry-wrapper:after {
|
||
background: rgba(34, 34, 34, .08);
|
||
bottom: 34px;
|
||
content: "";
|
||
display: block;
|
||
height: 1px;
|
||
left: 10px;
|
||
position: absolute;
|
||
width: 22px;
|
||
}
|
||
|
||
.cart-entry {
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: none;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
height: 40px;
|
||
padding: 10px;
|
||
position: relative;
|
||
width: 40px;
|
||
|
||
&:hover {
|
||
.cart-icon {
|
||
background-position: 0 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.cart-icon {
|
||
background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
|
||
background-position: -25px 0;
|
||
background-size: 300px 20px;
|
||
height: 20px;
|
||
width: 20px;
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
|
||
.cart-entry-wrapper {
|
||
border-radius: 4px;
|
||
bottom: 190px !important;
|
||
right: 12px;
|
||
}
|
||
|
||
//侧边栏
|
||
.cloud-contact-us-spread-container {
|
||
position: fixed;
|
||
z-index: 999999 !important;
|
||
animation: spreadContrast .3s ease-out;
|
||
top: 250px;
|
||
right: 40px
|
||
|
||
}
|
||
|
||
.cloud-contact-us-spread {
|
||
width: 280px;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px 0 rgba(34, 34, 34, .08);
|
||
height: 90px;
|
||
margin-right: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.cloud-contact-us-tel {
|
||
animation: spreadLineOpacity .3s ease-out forwards, spreadLine1 .3s ease-out .02s forwards;
|
||
opacity: 1;
|
||
top: 24px;
|
||
}
|
||
|
||
* {
|
||
list-style: none;
|
||
}
|
||
|
||
.cloud-contact-us-tit {
|
||
color: #222;
|
||
font-family: PingFangSC-Medium;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.cloud-contact-us-con {
|
||
color: #2468f2;
|
||
}
|
||
|
||
.cloud-contact-us-icon {
|
||
background: url(https://bce.bdstatic.com/p3m/common-service/uploads/custom_6390d23.png) no-repeat;
|
||
background-size: 295px 20px;
|
||
float: left;
|
||
height: 20px;
|
||
margin-top: 2px;
|
||
width: 20px;
|
||
background-position: -100px 0;
|
||
|
||
&:hover {
|
||
|
||
}
|
||
}
|
||
|
||
.el-icon-video-camera {
|
||
padding: 5px 0;
|
||
|
||
&:hover {
|
||
color: blue;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.changeChat {
|
||
width: 250px;
|
||
height: 100px;
|
||
position: fixed;
|
||
bottom: 0;
|
||
right: 10px;
|
||
animation: slideInRight 0.5s forwards;
|
||
background-color: white;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||
padding: 10px;
|
||
z-index: 11;
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.changeChat-fade-leave-active {
|
||
transition: opacity 0.5s;
|
||
}
|
||
|
||
.changeChat-fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
|
||
</style>
|
||
<style>
|
||
.apply-use {
|
||
margin-top: 8vh !important;
|
||
width: 500px !important;
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.apply-use {
|
||
width: 90% !important;
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|