99 lines
3.7 KiB
Vue
99 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
||
import { safeAreaInsets } from '@/utils/systemInfo'
|
||
|
||
// #ifdef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
},
|
||
excludeLoginPath: false,
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
transparentTitle: 'always',
|
||
navigationBarTitleText: ''
|
||
},
|
||
excludeLoginPath: false,
|
||
})
|
||
// #endif
|
||
|
||
const phoneNumber = '18724728603'
|
||
|
||
const makePhoneCall = () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
}).catch((err) => {
|
||
console.error(err)
|
||
})
|
||
}
|
||
|
||
const handleBack = () => {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="flex flex-col custom-background h-screen">
|
||
<sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
|
||
:root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'white','margin-top': `${safeAreaInsets?.top}px` }">
|
||
<template #title>
|
||
<view class="flex justify-center text-white">在线客服</view>
|
||
</template>
|
||
</sar-navbar>
|
||
|
||
<view class="mt-[84rpx] rounded-[24rpx] bg-white mx-[32rpx]">
|
||
<view class="flex">
|
||
<view class="w-[220rpx] h-[302rpx] ml-[12rpx] mt-[-74rpx]">
|
||
<image src="https://lwzk.ycymedu.com/img/qt/wd_kefuren.png" mode="scaleToFill"
|
||
class="w-[220rpx] h-[302rpx]" />
|
||
</view>
|
||
<view class="pt-[30rpx]">
|
||
<view class="text-[#3287FF]">专属客服为您服务</view>
|
||
<view class="h-[8rpx] bg-linear-to-r from-[#e3efff] to-[#f2f9ff]"></view>
|
||
<view class="flex items-center">
|
||
<view class="mr-[24rpx] font-500 text-[44rpx]">{{ phoneNumber }}</view>
|
||
<view
|
||
class="rounded-[8rpx] px-[20rpx] py-[8rpx] border-[#1580FF] border-solid border-[2rpx] text-[24rpx] text-[#1580FF] flex items-center justify-center"
|
||
@click="makePhoneCall">拨打</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mx-[6rpx] rounded-[24rpx] bg-[#eaf1ff] bg-opacity-59 backdrop-blur-[5px] mt-[-50rpx]">
|
||
<view class="w-[432rpx] h-[432rpx] pt-[100rpx] mx-auto">
|
||
<image src="https://lwzk.ycymedu.com/img/qt/wd_erweima.png" mode="scaleToFill"
|
||
class="w-[432rpx] h-[432rpx]" :show-menu-by-longpress="true" />
|
||
</view>
|
||
<view class="mt-[32rpx] flex justify-center">
|
||
<view class="w-[28rpx] h-[34rpx flex items-center">
|
||
<image src="https://lwzk.ycymedu.com/img/qt/wd_zhiwen.png" mode="scaleToFill"
|
||
class="w-[28rpx] h-[34rpx]" />
|
||
</view>
|
||
<view class="text-[28rpx]">扫码添加客服企业微信</view>
|
||
</view>
|
||
<view class="text-[28rpx] text-[#333] ml-[42rpx] mr-[168rpx] mt-[40rpx] mb-[6rpx] pb-[30rpx]">
|
||
<view>领取中考专属资源包</view>
|
||
<view>领取全年学习规划，掌握备考节奏</view>
|
||
<view>优质学习交流群，考情同步，答疑互助</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-background {
|
||
background: linear-gradient(180deg, #3287FF 0%, #EDF7FF 100%);
|
||
background-position: 50% 50%;
|
||
background-origin: padding-box;
|
||
background-clip: border-box;
|
||
background-size: auto auto;
|
||
}
|
||
|
||
.not-last-child {
|
||
border-bottom: 2rpx solid #f8f8f8;
|
||
}
|
||
</style> |