|
@@ -1,13 +1,112 @@
|
|
|
<script setup>
|
|
|
-import Container from '../../components/Container/Container.vue';
|
|
|
+import { ref } from "vue";
|
|
|
+import Container from "../../components/Container/Container.vue";
|
|
|
+import { onShow } from "@dcloudio/uni-app";
|
|
|
+import { request } from "@/utils/request";
|
|
|
+const src = ref("");
|
|
|
+onShow(() => {
|
|
|
+ request(
|
|
|
+ "api/question_bank/question_reception/channel_active_code/random_detail"
|
|
|
+ ).then((res) => {
|
|
|
+ src.value = res.data.qr_code;
|
|
|
+ });
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <Container title="客服">
|
|
|
+ <Container title="客服" headerColor="#fff">
|
|
|
<template #bg>
|
|
|
- <image src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/bHbLzGDSB07Gc0tqCVCI3NLUx4sbUU4KHKSolvBq.png" mode="scaleToFill" class="bg" />
|
|
|
+ <image
|
|
|
+ src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/bHbLzGDSB07Gc0tqCVCI3NLUx4sbUU4KHKSolvBq.png"
|
|
|
+ mode="scaleToFill"
|
|
|
+ class="bg"
|
|
|
+ />
|
|
|
</template>
|
|
|
+ <view class="Container">
|
|
|
+ <view class="text-lg">专属客服, 帮助解决您的问题</view>
|
|
|
+ <view class="qr-code">
|
|
|
+ <div class="card">
|
|
|
+ <img :src="src" show-menu-by-longpress class="img" alt="" />
|
|
|
+ <span>可长按识别二维码</span>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <div class="tip">
|
|
|
+ <div class="title">添加客服可获得</div>
|
|
|
+ <div>服务问题优先解决</div>
|
|
|
+ <div>考试咨询提前收到</div>
|
|
|
+ <div>新政策变化早知道</div>
|
|
|
+ <div>各项活动优先参与</div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
</Container>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" ></style>
|
|
|
+<style lang="scss">
|
|
|
+.bg {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-code {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: $success;
|
|
|
+ gap: 12rpx;
|
|
|
+ .card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 60rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ gap: 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ width: calc(100%);
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.text-lg {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.Container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 70rpx 20rpx;
|
|
|
+ gap: 20rpx;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 20rpx 0 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ color: $warning;
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|