update：代码备份
This commit is contained in:
@@ -0,0 +1,961 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import ModalDialog from "@/components/ModalDialog.vue";
|
||||
import { laserAimAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useDeviceBinding } from "./composables/useDeviceBinding";
|
||||
import {
|
||||
DEVICE_NAME_STORAGE_KEY,
|
||||
useDeviceStatus,
|
||||
} from "./composables/useDeviceStatus";
|
||||
|
||||
const store = useStore();
|
||||
const { updateDevice, updateOnline, clearDevice } = store;
|
||||
const { user, device, online } = storeToRefs(store);
|
||||
|
||||
const showTip = ref(false);
|
||||
const confirmBindTip = ref(false);
|
||||
const unbindDialogVisible = ref(false);
|
||||
const nameEditorVisible = ref(false);
|
||||
const qrVisible = ref(false);
|
||||
const qrSaved = ref(false);
|
||||
const editingName = ref("");
|
||||
const token = ref("");
|
||||
const binding = ref(false);
|
||||
const retryScanOnShow = ref(false);
|
||||
const calibration = ref(false);
|
||||
|
||||
const {
|
||||
deviceDetails,
|
||||
deviceRows,
|
||||
getDeviceNameOverrides,
|
||||
isDeviceOnline,
|
||||
maskedDeviceId,
|
||||
refreshDeviceStatus,
|
||||
statusClass,
|
||||
statusText,
|
||||
syncDeviceBinding,
|
||||
unbindDevice,
|
||||
} = useDeviceStatus({
|
||||
user,
|
||||
device,
|
||||
online,
|
||||
updateDevice,
|
||||
updateOnline,
|
||||
clearDevice,
|
||||
unbindDialogVisible,
|
||||
});
|
||||
|
||||
const { confirmBind, handleScan } = useDeviceBinding({
|
||||
token,
|
||||
confirmBindTip,
|
||||
binding,
|
||||
updateDevice,
|
||||
deviceDetails,
|
||||
refreshDeviceStatus,
|
||||
});
|
||||
|
||||
const qrImageUrl = computed(
|
||||
() =>
|
||||
deviceDetails.value.qrCode ||
|
||||
deviceDetails.value.qrcode ||
|
||||
deviceDetails.value.qrUrl ||
|
||||
"../../static/device-assets/my-device-qrcode.png"
|
||||
);
|
||||
const isScanPage = computed(() => !device.value.deviceId && !qrVisible.value);
|
||||
const containerBgType = computed(() =>
|
||||
isScanPage.value ? 12 : 0
|
||||
);
|
||||
const containerBgColor = computed(() =>
|
||||
containerBgType.value === 12 || containerBgType.value === -1
|
||||
? "transparent"
|
||||
: "#050b19"
|
||||
);
|
||||
|
||||
// 解绑前展示统一确认弹窗，避免误触解除绑定。
|
||||
const openUnbindDialog = () => {
|
||||
unbindDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const closeUnbindDialog = () => {
|
||||
unbindDialogVisible.value = false;
|
||||
};
|
||||
|
||||
const openNameEditor = () => {
|
||||
editingName.value = device.value.deviceName || "我的智能弓";
|
||||
nameEditorVisible.value = true;
|
||||
};
|
||||
|
||||
const closeNameEditor = () => {
|
||||
nameEditorVisible.value = false;
|
||||
};
|
||||
|
||||
// 当前接口列表没有设备改名接口，先更新页面和本地缓存，后端接口接入时可替换为请求。
|
||||
const confirmName = () => {
|
||||
const name = String(editingName.value || "").trim();
|
||||
if (!name) {
|
||||
uni.showToast({ title: "请输入设备名", icon: "none" });
|
||||
return;
|
||||
}
|
||||
if (name.length > 10 || !/^[\u4e00-\u9fa5A-Za-z0-9_-]+$/.test(name)) {
|
||||
uni.showToast({ title: "设备名格式不正确", icon: "none" });
|
||||
return;
|
||||
}
|
||||
updateDevice(device.value.deviceId, name);
|
||||
deviceDetails.value = { ...deviceDetails.value, deviceName: name };
|
||||
const nameOverrides = getDeviceNameOverrides();
|
||||
nameOverrides[device.value.deviceId] = name;
|
||||
uni.setStorageSync(DEVICE_NAME_STORAGE_KEY, nameOverrides);
|
||||
nameEditorVisible.value = false;
|
||||
uni.showToast({ title: "设备名已更新", icon: "success" });
|
||||
};
|
||||
|
||||
const toDeviceIntroPage = () => {
|
||||
uni.navigateTo({ url: "/pages/device/device-intro" });
|
||||
};
|
||||
|
||||
const joinWifi = () => {
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const goFirmwareUpdate = () => {
|
||||
if (!isDeviceOnline.value) {
|
||||
uni.showToast({ title: "请先开启智能弓", icon: "none" });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const goCalibration = async () => {
|
||||
try {
|
||||
await laserAimAPI();
|
||||
uni.navigateTo({ url: "/pages/device/calibration" });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "设备未连接，暂时无法调瞄", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const copyEmail = () => {
|
||||
uni.setClipboardData({
|
||||
data: "shelingxingqiu@163.com",
|
||||
success: () => uni.showToast({ title: "邮箱已复制", icon: "success" }),
|
||||
});
|
||||
};
|
||||
|
||||
const openQr = () => {
|
||||
qrSaved.value = false;
|
||||
qrVisible.value = true;
|
||||
};
|
||||
|
||||
const closeTip = () => {
|
||||
showTip.value = false;
|
||||
};
|
||||
|
||||
const closeConfirmBindTip = () => {
|
||||
confirmBindTip.value = false;
|
||||
};
|
||||
|
||||
const closeQr = () => {
|
||||
qrVisible.value = false;
|
||||
};
|
||||
|
||||
// 保存二维码到相册；远程二维码先下载到临时目录，失败时保留长按保存提示。
|
||||
const saveQrCode = async () => {
|
||||
let filePath = qrImageUrl.value;
|
||||
try {
|
||||
if (/^https?:\/\//.test(filePath)) {
|
||||
filePath = await new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: filePath,
|
||||
success: (result) =>
|
||||
result.statusCode === 200
|
||||
? resolve(result.tempFilePath)
|
||||
: reject(new Error("二维码下载失败")),
|
||||
fail: reject,
|
||||
});
|
||||
});
|
||||
}
|
||||
await new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({ success: resolve, fail: reject, filePath });
|
||||
});
|
||||
qrSaved.value = true;
|
||||
uni.showToast({ title: "已保存至相册", icon: "success" });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请长按二维码保存", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((options = {}) => {
|
||||
retryScanOnShow.value = options.retryScan === "1";
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("device-bind-retry-scan", handleScan);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.$off("device-bind-retry-scan", handleScan);
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
calibration.value = uni.getStorageSync("calibration");
|
||||
await syncDeviceBinding();
|
||||
if (retryScanOnShow.value) {
|
||||
retryScanOnShow.value = false;
|
||||
handleScan();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="my-device-page" :class="{ 'my-device-page--scan': isScanPage }">
|
||||
<Container
|
||||
:bgType="containerBgType"
|
||||
:bgColor="containerBgColor"
|
||||
:scroll="!isScanPage"
|
||||
:usePageScroll="false"
|
||||
>
|
||||
<view v-if="qrVisible" class="qr-page" @click="closeQr">
|
||||
<view class="qr-canvas" @click.stop>
|
||||
<view class="qr-corner qr-corner--top"></view>
|
||||
<view class="qr-corner qr-corner--bottom"></view>
|
||||
<text class="qr-title">射灵智能弓箭二维码</text>
|
||||
<image class="qr-image" :src="qrImageUrl" mode="aspectFit" show-menu-by-longpress />
|
||||
<text v-if="qrSaved" class="qr-device-id">设备ID：{{ maskedDeviceId }}</text>
|
||||
<view v-else class="qr-save-button" @click="saveQrCode">
|
||||
<text>保存至相册</text>
|
||||
</view>
|
||||
<text class="qr-description">
|
||||
该二维码为当前绑定弓箭的二维码，你可以截图保存到相册，以便当二维码丢失或不在身边时，可以扫描二维码进行设备绑定。
|
||||
</text>
|
||||
<text class="qr-note">注：解除绑定后将无法查看该二维码。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!device.deviceId" class="scan-code">
|
||||
<view class="unbound-content">
|
||||
<button class="scan-entry" hover-class="none" @click="$clickSound(handleScan)">
|
||||
<image src="../../static/device-assets/my-device-unbound-scan.png" mode="aspectFit" />
|
||||
</button>
|
||||
<view class="scan-title">
|
||||
<text>请扫描</text>
|
||||
<text class="highlight-text">射灵智能弓箭</text>
|
||||
<text>设备上的二维码</text>
|
||||
</view>
|
||||
<view class="benefit-copy">
|
||||
<text>新设备首次绑定账号可获赠</text>
|
||||
<text class="highlight-text">6个月射灵会员礼包</text>
|
||||
<text>，</text>
|
||||
<text>该礼包仅可使用一次，请确保当前登录账号为您本人账号。</text>
|
||||
</view>
|
||||
<button class="help-link" hover-class="none" @click="showTip = true">
|
||||
<text>没找到二维码或遇到问题></text>
|
||||
</button>
|
||||
<button class="product-link" hover-class="none" @click="toDeviceIntroPage">
|
||||
<text>还没有射灵智能弓箭？点我获取></text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="device-page">
|
||||
|
||||
<view class="device-card">
|
||||
<view class="device-card-header">
|
||||
<view class="device-status" :class="statusClass">
|
||||
<view class="status-dot"></view>
|
||||
<text>{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="edit-name" @click="openNameEditor">修改设备名</view>
|
||||
</view>
|
||||
<view class="device-identity">
|
||||
<image class="device-avatar" src="../../static/device-assets/my-device-avatar.png" mode="aspectFill" />
|
||||
<view class="device-identity-text">
|
||||
<text class="device-name">{{ device.deviceName || "我的智能弓" }}</text>
|
||||
<text class="device-id">{{ maskedDeviceId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-stats">
|
||||
<view v-for="item in deviceRows" :key="item.label" class="device-stat">
|
||||
<text class="device-stat-label">{{ item.label }}</text>
|
||||
<text class="device-stat-value">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device-actions">
|
||||
<view class="action-item" @click="toDeviceIntroPage">
|
||||
<text class="action-icon">⌁</text>
|
||||
<text>设备介绍</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goCalibration">
|
||||
<text class="action-icon">⌖</text>
|
||||
<text>弓箭调瞄</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goFirmwareUpdate">
|
||||
<text class="action-icon">↻</text>
|
||||
<text>固件更新</text>
|
||||
</view>
|
||||
<view class="action-item" @click="joinWifi">
|
||||
<text class="action-icon">◌</text>
|
||||
<text>WIFI设置</text>
|
||||
</view>
|
||||
<view class="action-item" @click="openQr">
|
||||
<text class="action-icon">▦</text>
|
||||
<text>设备二维码</text>
|
||||
</view>
|
||||
<view class="action-item action-item--danger" @click="openUnbindDialog">
|
||||
<text class="action-icon">⊗</text>
|
||||
<text>解除绑定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="calibration" class="calibration-tip">
|
||||
<text>如有场地或距离变化，请重新校准以保证智能弓射箭精准度</text>
|
||||
<view @click="goCalibration">重新校准</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ScreenHint mode="square" :show="showTip" :onClose="closeTip">
|
||||
<view class="scan-tips">
|
||||
<text class="scan-tips-title">扫码绑定射灵弓箭</text>
|
||||
<text class="scan-tips-subtitle">设备底部二维码样例</text>
|
||||
<image
|
||||
class="scan-tips-qr"
|
||||
src="../../static/device-assets/my-device-unbound-qr-sample.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text class="scan-tips-note">【注】已被绑定的弓箭无法再次绑定。</text>
|
||||
<view class="scan-tips-contact">
|
||||
<text>如有任何疑问，请随时联系：</text>
|
||||
<button hover-class="none" @click="copyEmail">shelingxingqiu@163.com</button>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
|
||||
<ScreenHint :show="confirmBindTip" :onClose="closeConfirmBindTip">
|
||||
<view class="confirm-bind">
|
||||
<text>智能弓箭和系统账号需一一对应，你确定要将当前登录用户账号绑定这把弓箭吗？绑定后不可随意更换。</text>
|
||||
<view class="confirm-actions">
|
||||
<view
|
||||
class="primary-action"
|
||||
:class="{ 'primary-action--disabled': binding }"
|
||||
@click="confirmBind"
|
||||
>
|
||||
{{ binding ? "绑定中..." : "确认绑定" }}
|
||||
</view>
|
||||
<view class="secondary-action" @click="confirmBindTip = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
|
||||
<ModalDialog
|
||||
:show="unbindDialogVisible"
|
||||
title="解除设备绑定"
|
||||
content="解除绑定后，将无法使用智能弓箭进行对战，确定继续吗？"
|
||||
cancelText="取消"
|
||||
confirmText="解除绑定"
|
||||
:onCancel="closeUnbindDialog"
|
||||
:onConfirm="unbindDevice"
|
||||
></ModalDialog>
|
||||
|
||||
<view v-if="nameEditorVisible" class="name-mask" @click="closeNameEditor">
|
||||
<view class="name-sheet" @click.stop>
|
||||
<view class="name-input-row">
|
||||
<input
|
||||
v-model="editingName"
|
||||
class="name-input"
|
||||
focus
|
||||
maxlength="10"
|
||||
confirm-type="done"
|
||||
placeholder="请输入设备名（最长10个汉字）"
|
||||
placeholder-class="name-placeholder"
|
||||
@confirm="confirmName"
|
||||
/>
|
||||
<view class="name-confirm" @click="confirmName">确定</view>
|
||||
</view>
|
||||
<text class="name-helper">仅支持中文、英文、数字、下划线、减号</text>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-device-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my-device-page--scan {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-code,
|
||||
.device-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan-code {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding-top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.unbound-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 170rpx 32rpx 160rpx;
|
||||
}
|
||||
|
||||
.scan-entry,
|
||||
.help-link,
|
||||
.product-link {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.scan-entry::after,
|
||||
.help-link::after,
|
||||
.product-link::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.scan-entry {
|
||||
display: flex;
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scan-entry image {
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
}
|
||||
|
||||
.scan-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 48rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.benefit-copy {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
margin-top: 72rpx;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
position: fixed;
|
||||
bottom: 104rpx;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 104rpx);
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #fed847;
|
||||
}
|
||||
|
||||
.device-page {
|
||||
padding: 36rpx 32rpx 80rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(145deg, rgba(45, 54, 76, 0.96), rgba(19, 25, 43, 0.98));
|
||||
}
|
||||
|
||||
.device-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.device-card-header,
|
||||
.device-identity,
|
||||
.device-stats,
|
||||
.confirm-actions,
|
||||
.name-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-card-header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.device-status--online {
|
||||
color: #62e4a1;
|
||||
}
|
||||
|
||||
.device-status--online .status-dot {
|
||||
background: #62e4a1;
|
||||
box-shadow: 0 0 16rpx rgba(98, 228, 161, 0.8);
|
||||
}
|
||||
|
||||
.device-status--offline {
|
||||
color: #ff6e6e;
|
||||
}
|
||||
|
||||
.device-status--offline .status-dot {
|
||||
background: #ff6e6e;
|
||||
}
|
||||
|
||||
.edit-name {
|
||||
color: #fed847;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.device-identity {
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
|
||||
.device-avatar {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
margin-right: 26rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.device-identity-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
margin-top: 14rpx;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
padding-top: 28rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.device-stat {
|
||||
width: 48%;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.device-stat-label,
|
||||
.device-stat-value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-stat-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.device-stat-value {
|
||||
margin-top: 8rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.device-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(30, 38, 58, 0.88);
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
width: 33.3333%;
|
||||
height: 142rpx;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-item--danger {
|
||||
color: #ff9898;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
display: flex;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
border: 1rpx solid currentColor;
|
||||
border-radius: 50%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.calibration-tip {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(40, 127, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 22rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.calibration-tip > text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.calibration-tip > view {
|
||||
margin-left: 18rpx;
|
||||
color: #5bbdff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.primary-action,
|
||||
.secondary-action {
|
||||
display: flex;
|
||||
min-width: 150rpx;
|
||||
height: 68rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 34rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
color: #111111;
|
||||
background: #fed847;
|
||||
}
|
||||
|
||||
.primary-action--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.scan-tips {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
margin-top: 20%;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.scan-tips-title {
|
||||
color: #fed847;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.scan-tips-subtitle {
|
||||
margin-top: 14rpx;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips-qr {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.scan-tips-note {
|
||||
margin-top: 16rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 12rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips button {
|
||||
padding: 0;
|
||||
color: #39a8ff;
|
||||
background: transparent;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.confirm-bind {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 26rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.confirm-actions {
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.confirm-actions > view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.qr-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 50% 46%, rgba(95, 78, 58, 0.9), rgba(8, 10, 25, 1) 70%);
|
||||
}
|
||||
|
||||
.qr-page::before,
|
||||
.qr-page::after {
|
||||
position: absolute;
|
||||
width: 620rpx;
|
||||
height: 1rpx;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 180rpx rgba(255, 255, 255, 0.05), 0 360rpx rgba(255, 255, 255, 0.04), 0 540rpx rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.qr-page::before {
|
||||
top: 380rpx;
|
||||
left: -160rpx;
|
||||
transform: rotate(48deg);
|
||||
}
|
||||
|
||||
.qr-page::after {
|
||||
top: 420rpx;
|
||||
right: -160rpx;
|
||||
transform: rotate(-48deg);
|
||||
}
|
||||
|
||||
.qr-corner {
|
||||
position: absolute;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: #ffeb00;
|
||||
}
|
||||
|
||||
.qr-corner--top {
|
||||
top: -220rpx;
|
||||
right: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-corner--bottom {
|
||||
bottom: -220rpx;
|
||||
left: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-canvas {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 260rpx 62rpx 70rpx;
|
||||
}
|
||||
|
||||
.qr-title {
|
||||
color: #ffe846;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 432rpx;
|
||||
height: 432rpx;
|
||||
margin-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.qr-device-id {
|
||||
margin-top: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.qr-save-button {
|
||||
display: flex;
|
||||
width: 360rpx;
|
||||
height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 34rpx;
|
||||
border: 1rpx solid #e8c840;
|
||||
border-radius: 36rpx;
|
||||
color: #ffe846;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.qr-description,
|
||||
.qr-note {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-description {
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
|
||||
.qr-note {
|
||||
margin-top: 12rpx;
|
||||
color: rgba(255, 232, 70, 0.7);
|
||||
}
|
||||
|
||||
.name-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-end;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
.name-sheet {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 34rpx 32rpx 48rpx;
|
||||
border-top: 1rpx solid rgba(255, 226, 153, 0.4);
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
background: linear-gradient(180deg, #57462b, #2c241b);
|
||||
}
|
||||
|
||||
.name-input-row {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
padding: 0 22rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 14rpx;
|
||||
color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.name-placeholder {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.name-confirm {
|
||||
display: flex;
|
||||
width: 132rpx;
|
||||
height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 18rpx;
|
||||
border-radius: 14rpx;
|
||||
color: #1b160d;
|
||||
background: #fed847;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.name-helper {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user