609 lines
13 KiB
Vue
609 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="车辆设置" :border-bottom="false" :background="background" title-color='#000' title-size='36'
|
|||
|
|
height='45' back-icon-color='#000'></u-navbar>
|
|||
|
|
|
|||
|
|
<view class="share_box">
|
|||
|
|
<view class="qrcode-container">
|
|||
|
|
<canvas style="width: 338rpx; height: 338rpx; background-color: #fff;" canvas-id="qrcode" id="qrcode">
|
|||
|
|
</canvas>
|
|||
|
|
</view>
|
|||
|
|
<view class="tips">分享二维码，邀请朋友使用车辆</view>
|
|||
|
|
<view class="btn_box">
|
|||
|
|
<view class="btn" @click="saveQRCode">
|
|||
|
|
保存
|
|||
|
|
</view>
|
|||
|
|
<button class="btn1" open-type="share" @click="shareQRCode">
|
|||
|
|
分享
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info">
|
|||
|
|
<view class="device_info_item">
|
|||
|
|
<view class="device_info_item_title">
|
|||
|
|
车辆编号
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info_item_value">
|
|||
|
|
{{ deviceInfos.sn }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info_item" @click="changeModel()">
|
|||
|
|
<view class="device_info_item_title">
|
|||
|
|
车辆型号
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info_item_value">
|
|||
|
|
{{ deviceInfos.model }} <view class="iconfont icon-xiangyou1"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info_item" @click="openPlateModal()">
|
|||
|
|
<view class="device_info_item_title">
|
|||
|
|
车牌号
|
|||
|
|
</view>
|
|||
|
|
<view class="device_info_item_value">
|
|||
|
|
{{ deviceInfos.vehicleNum }} <view class="iconfont icon-xiangyou1"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="unBind" @click="unBind">
|
|||
|
|
车辆解绑
|
|||
|
|
</view>
|
|||
|
|
<view class="mask" v-if="showPlateModal" @click="closePlateModal"></view>
|
|||
|
|
<view class="plate-modal" v-if="showPlateModal">
|
|||
|
|
<view class="modal-title">
|
|||
|
|
<image :src="logoUrl" mode="aspectFit" class="logo"></image>
|
|||
|
|
<text>小鹿出行</text>
|
|||
|
|
<text class="sub-title">XIAOLIUCHUXING</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<text class="label">车牌号</text>
|
|||
|
|
<input v-model="tempPlateNumber" placeholder="请输入车牌号" placeholder-class="input-placeholder"
|
|||
|
|
class="plate-input" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<view class="btn cancel" @click="closePlateModal">取消</view>
|
|||
|
|
<view class="btn confirm" @click="confirmPlateNumber">确认</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
background: {
|
|||
|
|
backgroundColor: " ",
|
|||
|
|
},
|
|||
|
|
sn: '',
|
|||
|
|
deviceInfos: {},
|
|||
|
|
qrSize: 220, // 338rpx 转换为 px (338/2)
|
|||
|
|
logoUrl: 'https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF',
|
|||
|
|
tempFilePath: '', // 保存生成的二维码临时文件路径
|
|||
|
|
showadd: false,
|
|||
|
|
list: [],
|
|||
|
|
showPlateModal: false,
|
|||
|
|
tempPlateNumber: '', // 临时存储修改的车牌号
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
console.log(e.sn);
|
|||
|
|
this.sn = e.sn;
|
|||
|
|
this.deviceInfo();
|
|||
|
|
this.generateQRCode();
|
|||
|
|
this.getModelList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
confirm(e) {
|
|||
|
|
|
|||
|
|
this.showadd = false
|
|||
|
|
this.putDeviceModel(e[0].value)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 打开车牌号修改弹窗
|
|||
|
|
openPlateModal() {
|
|||
|
|
this.tempPlateNumber = this.deviceInfos.vehicleNum; // 初始化为当前车牌号
|
|||
|
|
this.showPlateModal = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭弹窗
|
|||
|
|
closePlateModal() {
|
|||
|
|
this.showPlateModal = false;
|
|||
|
|
// this.tempPlateNumber = '';
|
|||
|
|
},
|
|||
|
|
unBind() {
|
|||
|
|
this.$u.post('/appVerify/untie/' + this.deviceInfos.deviceId).then((res) => {
|
|||
|
|
console.log(res, 'rererer');
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages_store/merchant'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 确认修改
|
|||
|
|
confirmPlateNumber() {
|
|||
|
|
if (!this.tempPlateNumber) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入车牌号',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.putDeviceVehicleNum();
|
|||
|
|
this.closePlateModal();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
putDeviceVehicleNum() {
|
|||
|
|
this.$u.put('/appVerify/device/editVehicleNum?sn=' + this.sn + '&vehicleNum=' + this.tempPlateNumber).then((res) => {
|
|||
|
|
console.log(res, 'rererer');
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.deviceInfo();
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
putDeviceModel(modelId) {
|
|||
|
|
this.$u.put('/appVerify/device/editModel?sn=' + this.sn + '&modelId=' + modelId).then((res) => {
|
|||
|
|
console.log(res, 'rererer');
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.deviceInfo();
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeModel() {
|
|||
|
|
this.showadd = true;
|
|||
|
|
},
|
|||
|
|
changeVehicleNum() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages_store/Operator/change_vehicle_num'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
deviceInfo() {
|
|||
|
|
this.$u.get('app/getDeviceBySn?sn=' + this.sn).then((res) => {
|
|||
|
|
console.log(res, 'rererer');
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.deviceInfos = res.data
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getModelList() {
|
|||
|
|
this.$u.get('/appVerify/model/getModelByToken').then((res) => {
|
|||
|
|
console.log(res, 'rererer');
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
// 转换数据格式
|
|||
|
|
this.list = res.data.map(item => ({
|
|||
|
|
label: item.model, // 显示的文本
|
|||
|
|
value: item.modelId // 实际的值
|
|||
|
|
}));
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
generateQRCode() {
|
|||
|
|
try {
|
|||
|
|
const qrUrl = `https://testlu.chuangtewl.com?sn=${this.sn}`;
|
|||
|
|
const context = uni.createCanvasContext('qrcode', this);
|
|||
|
|
|
|||
|
|
// 先清空画布并填充白色背景
|
|||
|
|
context.setFillStyle('#ffffff');
|
|||
|
|
context.fillRect(0, 0, this.qrSize, this.qrSize);
|
|||
|
|
context.draw(true);
|
|||
|
|
|
|||
|
|
// 创建二维码实例
|
|||
|
|
const qr = new UQRCode();
|
|||
|
|
qr.data = qrUrl;
|
|||
|
|
qr.size = this.qrSize;
|
|||
|
|
qr.margin = 10;
|
|||
|
|
qr.backgroundColor = '#ffffff';
|
|||
|
|
qr.foregroundColor = '#000000';
|
|||
|
|
qr.canvasContext = context;
|
|||
|
|
|
|||
|
|
// 生成二维码
|
|||
|
|
qr.make();
|
|||
|
|
qr.drawCanvas();
|
|||
|
|
|
|||
|
|
// 加载并绘制logo
|
|||
|
|
const logoSize = this.qrSize / 4; // logo大小为二维码的1/4
|
|||
|
|
const logoX = (this.qrSize - logoSize) / 2;
|
|||
|
|
const logoY = (this.qrSize - logoSize) / 2;
|
|||
|
|
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: this.logoUrl,
|
|||
|
|
success: (res) => {
|
|||
|
|
// 绘制白色背景
|
|||
|
|
context.setFillStyle('#ffffff');
|
|||
|
|
context.fillRect(logoX - 2, logoY - 2, logoSize + 4, logoSize + 4);
|
|||
|
|
// 绘制logo
|
|||
|
|
context.drawImage(res.path, logoX, logoY, logoSize, logoSize);
|
|||
|
|
context.draw(true);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('Logo加载失败:', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('生成二维码失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '生成二维码失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 保存二维码到相册
|
|||
|
|
saveQRCode() {
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
canvasId: 'qrcode',
|
|||
|
|
success: (res) => {
|
|||
|
|
this.tempFilePath = res.tempFilePath;
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '保存成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
if (err.errMsg.indexOf('auth deny') !== -1) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '需要您授权保存到相册',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.openSetting();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '保存失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('转换失败:', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '保存失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
},
|
|||
|
|
// 分享二维码
|
|||
|
|
shareQRCode() {
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
canvasId: 'qrcode',
|
|||
|
|
success: (res) => {
|
|||
|
|
this.tempFilePath = res.tempFilePath;
|
|||
|
|
console.log('二维码图片已生成:', this.tempFilePath);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('生成分享图片失败:', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '分享失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
return {
|
|||
|
|
title: '设备分享',
|
|||
|
|
imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
|
|||
|
|
path: `/pages/index/index?sn=${this.sn}` // 修改为首页并传递sn参数
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 修改分享到朋友圈的配置
|
|||
|
|
onShareTimeline() {
|
|||
|
|
return {
|
|||
|
|
title: '设备分享',
|
|||
|
|
imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
|
|||
|
|
query: `sn=${this.sn}` // 这里的参数会自动拼接到pages/index/index后面
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
overflow-y: auto;
|
|||
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
|
|||
|
|
background-size: cover;
|
|||
|
|
/* 背景图片等比缩放以覆盖整个容器 */
|
|||
|
|
background-position: center;
|
|||
|
|
/* 背景图片居中显示 */
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
/* 防止背景图片重复 */
|
|||
|
|
min-height: 100vh;
|
|||
|
|
/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
.mask {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plate-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 600rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
z-index: 1000;
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub-title {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plate-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border: 2rpx dashed #CCCCCC;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
border-top: 2rpx solid #EEEEEE;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
|
|||
|
|
&.cancel {
|
|||
|
|
color: #999;
|
|||
|
|
border-right: 2rpx solid #EEEEEE;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.confirm {
|
|||
|
|
color: #4297F3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-placeholder {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unBind {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 90rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 660rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
background: #3D3D3D;
|
|||
|
|
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_info {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
width: 660rpx;
|
|||
|
|
padding: 42rpx 46rpx;
|
|||
|
|
padding-bottom: 24rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
.device_info_item {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.device_info_item_title {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #6F6F6F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_info_item_value {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
flex: 1; // 让输入框占据剩余空间
|
|||
|
|
margin-left: auto;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border: none;
|
|||
|
|
text-align: right; // 文本右对齐
|
|||
|
|
padding-right: 20rpx; // 右侧添加一些padding，避免文字贴边
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-placeholder {
|
|||
|
|
text-align: right; // placeholder也右对齐
|
|||
|
|
color: #999; // placeholder颜色
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
margin-left: 10rpx; // 图标和输入框之间的间距
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share_box {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
width: 688rpx;
|
|||
|
|
height: 898rpx;
|
|||
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uvVY5qF63XMV7jqCVlP7');
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
|
|||
|
|
.qrcode-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 246rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
canvas {
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 660rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
top: 678rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_box {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 60rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
padding: 0 66rpx;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 254rpx;
|
|||
|
|
height: 82rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
border: 2rpx solid #808080;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn1 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 254rpx;
|
|||
|
|
height: 82rpx;
|
|||
|
|
background: #4297F3;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: 82rpx;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|