You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

91 lines
1.8 KiB

<template>
<!-- 20221216 -->
<view class="project-call-layer-cn">
<!-- 组件内容 -->
<view class="cn-content">
<!-- 有效商品 -->
<ty-layer-pop-up v-if="show" @overlayClick="close">
<view class="layer-content padding-top-50 radius-20 bg-ff text-center" @click.stop="">
<view class="text-34 text-bold text-33">拨打客服热线</view>
<view class="margin-top-45 text-26 text-1a">客服在线时间为</view>
<view class="margin-top-20 text-32 text-bold text-1a">{{serviceTime}}</view>
<view class="margin-top-60 margin-lr-65 flex align-center justify-between">
<view class="btn line-btn" @click="close">取消</view>
<view class="btn full-btn" @click="call">确认</view>
</view>
</view>
</ty-layer-pop-up>
</view>
<!-- 组件浮层 -->
<view class="cn-layer">
</view>
</view>
</template>
<script>
export default {
props: {
show: { //是否显示浮层
type: Boolean,
default: false
},
serviceTime: {
type: String,
default: ''
},
serviceHotLine: {
type: String,
default: ''
}
},
methods: {
/**
* 关闭浮层
*/
close() {
this.$emit("update:show", false)
},
/**
* 拨打电话
*/
call(){
this.cn.callPhone(this.serviceHotLine)
}
}
}
</script>
<style scoped>
.layer-content {
position: fixed;
left: 75rpx;
top: calc(50vh - 220rpx);
width: 600rpx;
height: 440rpx;
}
.btn{
width: 220rpx;
height: 60rpx;
line-height: 56rpx;
border-radius: 30rpx;
font-size: 26rpx;
}
.line-btn {
border: 2rpx solid var(--main);
color: var(--main);
}
.full-btn {
background: linear-gradient(to right, var(--main), var(--mainGradient));
border: 2rpx solid var(--main);
color: #fff;
}
</style>