chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备详情修改

Browse Source
This commit is contained in:
tx 2025-01-06 15:30:57 +08:00
parent 9d21e2e356
commit 26fd2a6ddb
1 changed files with 450 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

779
pages_store/Operator/device_set.vue
View File

@ -5,48 +5,59 @@
<view class="share_box"> <view class="share_box">
<view class="qrcode-container"> <view class="qrcode-container">
<canvas style="width: 338rpx; height: 338rpx; background-color: #fff;" canvas-id="qrcode" id="qrcode"> <canvas style="width: 338rpx; height: 338rpx; background-color: #fff;" canvas-id="qrcode" id="qrcode"
v-if="!showPlateModal">
</canvas> </canvas>
</view> </view>
<view class="tips">分享二维码，邀请朋友使用车辆</view> <view class="tips">分享二维码，邀请朋友使用车辆</view>
<view class="btn_box"> <view class="btn_box">
<view class="btn" @click="saveQRCode"> <view class="btn" @click="saveQRCode">保存</view>
保存 <button class="btn1" open-type="share" @click="shareQRCode">分享</button>
</view>
<button class="btn1" open-type="share" @click="shareQRCode">
分享
</button>
</view> </view>
</view> </view>
<view class="device_info"> <view class="device_info">
<view class="device_info_item"> <view class="device_info_item">
<view class="device_info_item_title"> <view class="device_info_item_title">车辆编号</view>
车辆编号 <view class="device_info_item_value">{{ deviceInfos.sn }}</view>
</view> </view>
<view class="device_info_item" @click="openPlateModal('remark', '备注')">
<view class="device_info_item_title">备注</view>
<view class="device_info_item_value"> <view class="device_info_item_value">
{{ deviceInfos.sn }} {{ deviceInfos.remark || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="device_info_item" @click="openPlateModal('fullVoltage', '满电电压')">
<view class="device_info_item_title">满电电压</view>
<view class="device_info_item_value">
{{ deviceInfos.fullVoltage || '未设置' }} V<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="device_info_item" @click="openPlateModal('lowVoltage', '亏电电压')">
<view class="device_info_item_title">亏电电压</view>
<view class="device_info_item_value">
{{ deviceInfos.lowVoltage || '未设置' }} V<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="device_info_item" @click="openPlateModal('fullEndurance', '满电续航')">
<view class="device_info_item_title">满电续航</view>
<view class="device_info_item_value">
{{ deviceInfos.fullEndurance || '未设置' }} KM<view class="iconfont icon-xiangyou1"></view>
</view> </view>
</view> </view>
<view class="device_info_item" @click="changeModel()"> <view class="device_info_item" @click="changeModel()">
<view class="device_info_item_title"> <view class="device_info_item_title">车辆型号</view>
车辆型号
</view>
<view class="device_info_item_value"> <view class="device_info_item_value">
{{ deviceInfos.model }} <view class="iconfont icon-xiangyou1"></view> {{ deviceInfos.model || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
</view> </view>
</view> </view>
<view class="device_info_item" @click="openPlateModal()"> <view class="device_info_item" @click="openPlateModal('vehicleNum', '车牌号')">
<view class="device_info_item_title"> <view class="device_info_item_title">车牌号</view>
车牌号
</view>
<view class="device_info_item_value"> <view class="device_info_item_value">
{{ deviceInfos.vehicleNum }} <view class="iconfont icon-xiangyou1"></view> {{ deviceInfos.vehicleNum || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
</view> </view>
</view> </view>
</view> </view>
<view class="unBind" @click="unBind"> <view class="unBind" @click="unBind">车辆解绑</view>
车辆解绑
</view>
<view class="mask" v-if="showPlateModal" @click="closePlateModal"></view> <view class="mask" v-if="showPlateModal" @click="closePlateModal"></view>
<view class="plate-modal" v-if="showPlateModal"> <view class="plate-modal" v-if="showPlateModal">
<view class="modal-title"> <view class="modal-title">
@ -56,14 +67,14 @@
</view> </view>
<view class="modal-content"> <view class="modal-content">
<text class="label">车牌号</text> <text class="label">{{currentEditTitle}}</text>
<input v-model="tempPlateNumber" placeholder="请输入车牌号" placeholder-class="input-placeholder" <input v-model="tempValue" :placeholder="'请输入' + currentEditTitle" placeholder-class="input-placeholder"
class="plate-input" /> class="plate-input" />
</view> </view>
<view class="modal-footer"> <view class="modal-footer">
<view class="btn cancel" @click="closePlateModal">取消</view> <view class="btn cancel" @click="closePlateModal">取消</view>
<view class="btn confirm" @click="confirmPlateNumber">确认</view> <view class="btn confirm" @click="confirmEdit">确认</view>
</view> </view>
</view> </view>
<u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select> <u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select>
@ -81,13 +92,15 @@ export default {
}, },
sn: '', sn: '',
deviceInfos: {}, deviceInfos: {},
qrSize: 220, // 338rpx 转换为 px (338/2) qrSize: 220,
logoUrl: 'https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF', logoUrl: 'https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF',
tempFilePath: '', // 保存生成的二维码临时文件路径 tempFilePath: '',
showadd: false, showadd: false,
list: [], list: [],
showPlateModal: false, showPlateModal: false,
tempPlateNumber: '', // 临时存储修改的车牌号 currentEditField: '', // 当前编辑的字段
currentEditTitle: '', // 当前编辑项的标题
tempValue: '', // 临时存储修改的值
} }
}, },
onLoad(e) { onLoad(e) {
@ -98,246 +111,312 @@ export default {
this.getModelList(); this.getModelList();
}, },
methods: { methods: {
confirm(e) { confirm(e) {
this.showadd = false;
this.putDeviceModel(e[0].value);
},
this.showadd = false // 打开编辑弹窗
this.putDeviceModel(e[0].value) openPlateModal(field, title) {
this.currentEditField = field;
this.currentEditTitle = title;
this.tempValue = this.deviceInfos[field] || '';
this.showPlateModal = true;
// 根据字段类型设置输入框类型
const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
if (numericFields.includes(field)) {
// 找到输入框并设置为数字类型
// this.$nextTick(() => {
// const input = document.querySelector('.plate-input');
// if (input) {
// input.type = 'number';
// input.step = '0.1'; // 允许输入小数
// }
// });
}
},
}, // 关闭弹窗
// 打开车牌号修改弹窗 closePlateModal() {
openPlateModal() { this.showPlateModal = false;
this.tempPlateNumber = this.deviceInfos.vehicleNum; // 初始化为当前车牌号 // 重新生成二维码
this.showPlateModal = true; this.generateQRCode();
}, },
// 关闭弹窗 // 确认编辑
closePlateModal() { confirmEdit() {
this.showPlateModal = false; if (!this.tempValue) {
// this.tempPlateNumber = ''; uni.showToast({
}, title: '请输入' + this.currentEditTitle,
unBind() { icon: 'none'
this.$u.post('/appVerify/untie/' + this.deviceInfos.deviceId).then((res) => { });
console.log(res, 'rererer'); return;
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'); const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
context.fillRect(0, 0, this.qrSize, this.qrSize); if (numericFields.includes(this.currentEditField)) {
context.draw(true); const value = parseFloat(this.tempValue);
// 验证是否为有效数字
if (isNaN(value)) {
uni.showToast({
title: '请输入有效的数字',
icon: 'none'
});
return;
}
// 创建二维码实例 // 验证范围
const qr = new UQRCode(); switch (this.currentEditField) {
qr.data = qrUrl; case 'fullVoltage':
qr.size = this.qrSize; case 'lowVoltage':
qr.margin = 10; if (value < 0 || value > 100) {
qr.backgroundColor = '#ffffff'; uni.showToast({
qr.foregroundColor = '#000000'; title: '电压值应在0-100之间',
qr.canvasContext = context; icon: 'none'
});
return;
}
break;
case 'fullEndurance':
if (value < 0 || value > 1000) {
uni.showToast({
title: '续航里程应在0-1000之间',
icon: 'none'
});
return;
}
break;
}
// 生成二维码 // 转换为数字类型
qr.make(); this.tempValue = value;
qr.drawCanvas(); }
// 加载并绘制logo this.updateDeviceField();
const logoSize = this.qrSize / 4; // logo大小为二维码的1/4 this.closePlateModal();
const logoX = (this.qrSize - logoSize) / 2; },
const logoY = (this.qrSize - logoSize) / 2;
uni.getImageInfo({ // 统一的设备字段更新方法
src: this.logoUrl, updateDeviceField() {
success: (res) => { const params = {
// 绘制白色背景 sn: this.sn,
context.setFillStyle('#ffffff'); [this.currentEditField]: this.tempValue
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); const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
uni.showToast({ if (numericFields.includes(this.currentEditField)) {
title: '生成二维码失败', params[this.currentEditField] = parseFloat(this.tempValue);
icon: 'none' }
});
} this.$u.put('/appVerify/device/edit', params).then((res) => {
}, if (res.code === 200) {
// 保存二维码到相册 this.deviceInfo();
saveQRCode() { uni.showToast({
uni.canvasToTempFilePath({ title: '修改成功',
canvasId: 'qrcode', icon: 'success'
success: (res) => { });
this.tempFilePath = res.tempFilePath; } else {
uni.saveImageToPhotosAlbum({ uni.showToast({
filePath: res.tempFilePath, title: res.msg,
success: () => { icon: 'none',
uni.showToast({ duration: 2000
title: '保存成功', });
icon: 'success' }
}); });
}, },
fail: (err) => {
if (err.errMsg.indexOf('auth deny') !== -1) { unBind() {
uni.showModal({ this.$u.post('/appVerify/untie/' + this.deviceInfos.deviceId).then((res) => {
title: '提示', if (res.code === 200) {
content: '需要您授权保存到相册', uni.redirectTo({
success: (res) => { url: '/pages_store/merchant'
if (res.confirm) { });
uni.openSetting(); } else {
} uni.showToast({
} title: res.msg,
}); icon: 'none',
} else { duration: 2000
uni.showToast({ });
title: '保存失败', }
icon: 'none' })
}); },
}
} putDeviceModel(modelId) {
}); const params = {
}, sn: this.sn,
fail: (err) => { modelId: modelId
console.error('转换失败:', err); };
uni.showToast({
title: '保存失败', this.$u.put('/appVerify/device/edit', params).then((res) => {
icon: 'none' if (res.code === 200) {
}); this.deviceInfo();
} } else {
}, this); uni.showToast({
}, title: res.msg,
// 分享二维码 icon: 'none',
shareQRCode() { duration: 2000
uni.canvasToTempFilePath({ });
canvasId: 'qrcode', }
success: (res) => { })
this.tempFilePath = res.tempFilePath; },
console.log('二维码图片已生成:', this.tempFilePath);
}, changeModel() {
fail: (err) => { this.showadd = true;
console.error('生成分享图片失败:', err); },
uni.showToast({
title: '分享失败', deviceInfo() {
icon: 'none' this.$u.get('app/getDeviceBySn?sn=' + this.sn).then((res) => {
}); if (res.code === 200) {
} this.deviceInfos = res.data
}, this); } else {
} uni.showToast({
}, title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
getModelList() {
this.$u.get('/appVerify/model/getModelByToken').then((res) => {
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();
const logoSize = this.qrSize / 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);
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() { onShareAppMessage() {
return { return {
title: '设备分享', title: '设备分享',
imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF', imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
path: `/pages/index/index?sn=${this.sn}` // 修改为首页并传递sn参数 path: `/pages/index/index?sn=${this.sn}`
} }
}, },
// 修改分享到朋友圈的配置
onShareTimeline() { onShareTimeline() {
return { return {
title: '设备分享', title: '设备分享',
imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF', imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
query: `sn=${this.sn}` // 这里的参数会自动拼接到pages/index/index后面 query: `sn=${this.sn}`
} }
} }
} }
@ -348,17 +427,13 @@ page {
overflow-y: auto; overflow-y: auto;
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3'); background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
background-size: cover; background-size: cover;
/* 背景图片等比缩放以覆盖整个容器 */
background-position: center; background-position: center;
/* 背景图片居中显示 */
background-repeat: no-repeat; background-repeat: no-repeat;
/* 防止背景图片重复 */
min-height: 100vh; min-height: 100vh;
/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */
} }
.page { .page {
padding-bottom: 100rpx;
.mask { .mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -366,7 +441,7 @@ page {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 999; z-index: 100;
} }
.plate-modal { .plate-modal {
@ -378,95 +453,121 @@ page {
background: #FFFFFF; background: #FFFFFF;
border-radius: 24rpx; border-radius: 24rpx;
z-index: 1000; z-index: 1000;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
animation: modalFadeIn 0.3s ease-out;
.modal-title { .modal-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 40rpx 0; padding: 48rpx 0 32rpx;
border-bottom: 2rpx solid #F5F5F5;
.logo { .logo {
width: 80rpx; width: 88rpx;
height: 80rpx; height: 88rpx;
border-radius: 50%; border-radius: 50%;
margin-bottom: 20rpx; margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
} }
text { text {
font-size: 32rpx; font-size: 36rpx;
font-weight: 500; font-weight: 600;
color: #333; color: #333333;
} line-height: 1.4;
.sub-title { &.sub-title {
font-size: 24rpx; margin-top: 8rpx;
color: #999; font-size: 24rpx;
margin-top: 8rpx; color: #999999;
font-weight: 400;
letter-spacing: 2rpx;
}
} }
} }
.modal-content { .modal-content {
padding: 0 40rpx; padding: 32rpx 40rpx;
.label { .label {
display: block;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333333;
margin-bottom: 20rpx; margin-bottom: 16rpx;
font-weight: 500;
} }
.plate-input { .plate-input {
width: 100%; width: 100%;
height: 80rpx; height: 88rpx;
border: 2rpx dashed #CCCCCC; background: #F8F8F8;
border-radius: 8rpx; border-radius: 12rpx;
padding: 0 20rpx; padding: 0 24rpx;
font-size: 30rpx;
color: #333333;
box-sizing: border-box;
border: 2rpx solid #EEEEEE;
transition: all 0.3s ease;
&:focus {
border-color: #4297F3;
background: #FFFFFF;
}
}
.input-placeholder {
color: #999999;
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 40rpx;
} }
} }
.modal-footer { .modal-footer {
display: flex; display: flex;
border-top: 2rpx solid #EEEEEE; height: 100rpx;
border-top: 2rpx solid #F5F5F5;
.btn { .btn {
flex: 1; flex: 1;
height: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: 500;
transition: all 0.3s ease;
&.cancel { &.cancel {
color: #999; color: #666666;
border-right: 2rpx solid #EEEEEE; background: #FFFFFF;
border-radius: 0 0 0 24rpx;
&:active {
background: #F5F5F5;
}
} }
&.confirm { &.confirm {
color: #4297F3; color: #FFFFFF;
background: #4297F3;
border-radius: 0 0 24rpx 0;
&:active {
background: darken(#4297F3, 5%);
}
} }
} }
} }
} }
.input-placeholder { @keyframes modalFadeIn {
color: #999999; from {
} opacity: 0;
transform: translate(-50%, -48%);
.unBind { }
margin: 0 auto; to {
margin-top: 90rpx; opacity: 1;
display: flex; transform: translate(-50%, -50%);
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 { .device_info {
@ -477,44 +578,35 @@ page {
padding-bottom: 24rpx; padding-bottom: 24rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1); box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx 20rpx 20rpx 20rpx; border-radius: 20rpx;
.device_info_item { .device_info_item {
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 24rpx 0;
transition: all 0.3s ease;
border-bottom: 2rpx dashed #dddddd;
&:active {
background: #F8F8F8;
}
.device_info_item_title { .device_info_item_title {
font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #6F6F6F; color: #666666;
} }
.device_info_item_value { .device_info_item_value {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #3D3D3D; color: #333333;
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 { .iconfont {
margin-left: 10rpx; // 图标和输入框之间的间距 margin-left: 8rpx;
color: #999999;
font-size: 24rpx;
} }
} }
} }
@ -540,26 +632,23 @@ page {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 40rpx; padding: 40rpx;
z-index: 1;
canvas { canvas {
background: #ffffff; background: #FFFFFF;
padding: 20rpx; padding: 20rpx;
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
} }
} }
.tips { .tips {
position: absolute; position: absolute;
width: 660rpx; width: 100%;
text-align: center; text-align: center;
top: 678rpx; top: 678rpx;
left: 0; font-weight: 600;
right: 0;
font-weight: 700;
font-size: 32rpx; font-size: 32rpx;
color: #3D3D3D; color: #333333;
} }
.btn_box { .btn_box {
@ -581,7 +670,12 @@ page {
border: 2rpx solid #808080; border: 2rpx solid #808080;
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #3D3D3D; color: #333333;
transition: all 0.3s ease;
&:active {
background: #F5F5F5;
}
} }
.btn1 { .btn1 {
@ -598,6 +692,11 @@ page {
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 82rpx; line-height: 82rpx;
transition: all 0.3s ease;
&:active {
background: darken(#4297F3, 5%);
}
&::after { &::after {
border: none; border: none;
@ -605,5 +704,27 @@ page {
} }
} }
} }
.unBind {
margin: 0 auto;
margin-top: 90rpx;
margin-bottom: 40rpx;
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;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
transition: all 0.3s ease;
&:active {
background: darken(#3D3D3D, 5%);
}
}
} }
</style> </style>