移植6155、650、670
This commit is contained in:
liub
@ -2,17 +2,14 @@
|
||||
<view class="message-popup" :class="{ 'show': config.show }">
|
||||
|
||||
<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
|
||||
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
|
||||
>
|
||||
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
|
||||
|
||||
</view>
|
||||
<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
|
||||
@touchmove.stop.prevent>
|
||||
<view class="menu-header" :class="config.showHeader?'':'displayNone'">
|
||||
<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
|
||||
<view class="close-icon" @click="closeMenu"
|
||||
:style="{display:(config.showClose?'':'none')}"
|
||||
>
|
||||
<view class="close-icon" @click="closeMenu" :style="{display:(config.showClose?'':'none')}">
|
||||
<image src="/static/Images/public/close.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
@ -29,7 +26,13 @@
|
||||
<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
|
||||
justifyContent:config.textAlign
|
||||
}">
|
||||
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
|
||||
<view class="imgContent" :style="{
|
||||
height:config.itemHeight,
|
||||
width:config.itemHeight
|
||||
}">
|
||||
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
<text>{{ item.text }}</text>
|
||||
</view>
|
||||
|
||||
@ -61,34 +64,34 @@
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
show: false,//是否显示
|
||||
showHeader: false,//是否显示标头
|
||||
showMask:true,//是否显示mask
|
||||
showDivider: false,//是否在两个项之间显示分隔线
|
||||
showBtn: false,//是否显示底部按钮
|
||||
showClose:false,//是否显示右上角关闭按钮
|
||||
maskBgColor:'',//mask的颜色
|
||||
menuItems: [],//菜单项 包含icon text
|
||||
activeIndex: -1,//当前已选中的项编号
|
||||
bgColor: '#2a2a2a',//主体背景
|
||||
itemBgColor: '#3a3a3a',//各项被选中后的背景
|
||||
textColor: '#ffffffde',//各项的文字颜色
|
||||
textAlign: 'flex-start',//各项的文字居中方式
|
||||
title: '',//header的文字
|
||||
dividerColor: '#00000000',//分隔线颜色
|
||||
dividerThickness: '0rpx',//分隔线宽度
|
||||
dividerMargin: '10rpx',//分隔线距离两边的宽度
|
||||
itemHeight: '80rpx',//各项的调试
|
||||
btnBgColor: "#bbe600",//按钮颜色
|
||||
btnText: "确定",//按钮文字
|
||||
btnTextColor: "#000000",//按钮文字颜色
|
||||
|
||||
show: false, //是否显示
|
||||
showHeader: false, //是否显示标头
|
||||
showMask: true, //是否显示mask
|
||||
showDivider: false, //是否在两个项之间显示分隔线
|
||||
showBtn: false, //是否显示底部按钮
|
||||
showClose: false, //是否显示右上角关闭按钮
|
||||
maskBgColor: '', //mask的颜色
|
||||
menuItems: [], //菜单项 包含icon text
|
||||
activeIndex: -1, //当前已选中的项编号
|
||||
bgColor: '#2a2a2a', //主体背景
|
||||
itemBgColor: '#3a3a3a', //各项被选中后的背景
|
||||
textColor: '#ffffffde', //各项的文字颜色
|
||||
textAlign: 'flex-start', //各项的文字居中方式
|
||||
title: '', //header的文字
|
||||
dividerColor: '#00000000', //分隔线颜色
|
||||
dividerThickness: '0rpx', //分隔线宽度
|
||||
dividerMargin: '10rpx', //分隔线距离两边的宽度
|
||||
itemHeight: '80rpx', //各项的调试
|
||||
btnBgColor: "#bbe600", //按钮颜色
|
||||
btnText: "确定", //按钮文字
|
||||
btnTextColor: "#000000", //按钮文字颜色
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
closeMenu() {
|
||||
|
||||
@ -100,19 +103,18 @@
|
||||
this.$emit('itemClick', item, index);
|
||||
},
|
||||
btnClick() {
|
||||
|
||||
|
||||
let item = null;
|
||||
let index = null;
|
||||
if (this.config.activeIndex > -1) {
|
||||
item = this.config.menuItems[this.config.activeIndex];
|
||||
}
|
||||
index = this.config.activeIndex;
|
||||
this.$emit('btnClick', item, index);
|
||||
this.$emit('btnClick', item, index);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -126,7 +128,7 @@
|
||||
}
|
||||
|
||||
.p100 {
|
||||
width: 100%;
|
||||
width: calc(100% - 20rpx);
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
@ -136,7 +138,8 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 20rpx;
|
||||
padding: 0rpx 20rpx 0rpx 0rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.displayNone {
|
||||
@ -151,7 +154,7 @@
|
||||
z-index: 9999;
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: translateY(100%);
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -217,11 +220,24 @@
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.menu-item image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
}
|
||||
|
||||
.imgContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #4a4a4a;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
194
components/TextToHex/TextToHex.vue
Normal file
194
components/TextToHex/TextToHex.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view>
|
||||
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
|
||||
class="offscreen-canvas"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextToHexV1",
|
||||
props: {
|
||||
txts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
validator: (value) => value.every(item => typeof item === 'string')
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 16,
|
||||
validator: (value) => value > 0 && value <= 100
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 当前Canvas的宽高（动态调整）
|
||||
currentCanvasWidth: 0,
|
||||
currentCanvasHeight: 0,
|
||||
// Canvas上下文（复用）
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
validTxts() {
|
||||
return this.txts.filter(line => line.trim() !== '');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化Canvas上下文（只创建一次）
|
||||
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 估算单行文本所需的Canvas宽度
|
||||
*/
|
||||
calcLineWidth(textLine) {
|
||||
return textLine.length * this.fontSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* 清除Canvas内容
|
||||
*/
|
||||
clearCanvas() {
|
||||
this.ctx.setFillStyle(this.bgColor);
|
||||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||
},
|
||||
|
||||
/**
|
||||
* 复用单个Canvas处理所有文本行
|
||||
*/
|
||||
async drawAndGetPixels() {
|
||||
|
||||
let convertCharToMatrix=function(imageData) {
|
||||
// console.log("imgData=",imageData)
|
||||
let matrix = [];
|
||||
|
||||
// 逐行处理
|
||||
for (let y = 0; y < 16; y++) {
|
||||
let byte1 = 0,
|
||||
byte2 = 0;
|
||||
|
||||
// 每行16个像素，分为两个字节
|
||||
for (let x = 0; x < 16; x++) {
|
||||
// 计算像素在imageData中的索引 (RGBA格式)
|
||||
let index = (y * 16 + x) * 4;
|
||||
let red = imageData[index];
|
||||
|
||||
// 黑色像素（R值较低）视为1，白色视为0
|
||||
let isBlack = red < 128;
|
||||
|
||||
if (x < 8) {
|
||||
// 第一个字节（左8位）
|
||||
if (isBlack) {
|
||||
byte1 |= 0x80 >> x; // 从左到右设置位
|
||||
}
|
||||
} else {
|
||||
// 第二个字节（右8位）
|
||||
if (isBlack) {
|
||||
byte2 |= 0x80 >> (x - 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将字节转换为两位十六进制字符串
|
||||
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
|
||||
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
|
||||
}
|
||||
|
||||
return matrix;
|
||||
}
|
||||
|
||||
let drawTxt=async (textLine)=> {
|
||||
let result = {};
|
||||
let ctx = this.ctx;
|
||||
|
||||
// 1. 动态调整Canvas尺寸
|
||||
this.currentCanvasWidth = this.calcLineWidth(textLine);
|
||||
this.currentCanvasHeight = this.fontSize;
|
||||
|
||||
// 2. 清空Canvas（绘制背景）
|
||||
this.clearCanvas();
|
||||
|
||||
// 3. 设置文字样式
|
||||
ctx.setFillStyle(this.color);
|
||||
ctx.setTextBaseline('middle');
|
||||
ctx.setFontSize(this.fontSize);
|
||||
ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;
|
||||
|
||||
// 4. 绘制当前行文本
|
||||
let currentX = 0;
|
||||
let currentY = this.fontSize / 2;
|
||||
for (let j = 0; j < textLine.length; j++) {
|
||||
let char = textLine[j];
|
||||
ctx.fillText(char, currentX, currentY);
|
||||
// 按实际字符宽度计算间距
|
||||
let charWidth = ctx.measureText(char).width;
|
||||
currentX += charWidth;
|
||||
}
|
||||
|
||||
// 5. 异步绘制并获取像素数据（串行处理避免冲突）
|
||||
await new Promise((resolve, reject) => {
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasGetImageData({
|
||||
canvasId: 'reusableCanvas',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.currentCanvasWidth,
|
||||
height: this.currentCanvasHeight,
|
||||
success: res => {
|
||||
|
||||
result={
|
||||
line: textLine,
|
||||
pixelData: res.data,
|
||||
width: this.currentCanvasWidth,
|
||||
height: this.currentCanvasHeight
|
||||
};
|
||||
resolve();
|
||||
},
|
||||
fail: err => {
|
||||
// console.error(`处理第${i+1}行失败:`, err);
|
||||
reject(err)
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
let arr = [];
|
||||
// 循环处理每行文本
|
||||
for (let i = 0; i < this.validTxts.length; i++) {
|
||||
|
||||
let linePixls = [];
|
||||
let item = this.validTxts[i];
|
||||
console.log("item=",item);
|
||||
for (var j = 0; j < item.length; j++) {
|
||||
let result = await drawTxt(item[j]);
|
||||
linePixls.push(convertCharToMatrix(result.pixelData));
|
||||
}
|
||||
console.log("hexs=",linePixls.join(","));
|
||||
arr.push(linePixls);
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.offscreen-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
194
components/TextToHex/TextToHexV1.vue
Normal file
194
components/TextToHex/TextToHexV1.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view>
|
||||
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
|
||||
class="offscreen-canvas"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextToHexV1",
|
||||
props: {
|
||||
txts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
validator: (value) => value.every(item => typeof item === 'string')
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 16,
|
||||
validator: (value) => value > 0 && value <= 100
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 当前Canvas的宽高（动态调整）
|
||||
currentCanvasWidth: 0,
|
||||
currentCanvasHeight: 0,
|
||||
// Canvas上下文（复用）
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
validTxts() {
|
||||
return this.txts.filter(line => line.trim() !== '');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化Canvas上下文（只创建一次）
|
||||
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 估算单行文本所需的Canvas宽度
|
||||
*/
|
||||
calcLineWidth(textLine) {
|
||||
return textLine.length * this.fontSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* 清除Canvas内容
|
||||
*/
|
||||
clearCanvas() {
|
||||
this.ctx.setFillStyle(this.bgColor);
|
||||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||
},
|
||||
|
||||
/**
|
||||
* 复用单个Canvas处理所有文本行
|
||||
*/
|
||||
async drawAndGetPixels() {
|
||||
|
||||
let convertCharToMatrix=function(imageData) {
|
||||
// console.log("imgData=",imageData)
|
||||
let matrix = [];
|
||||
|
||||
// 逐行处理
|
||||
for (let y = 0; y < 16; y++) {
|
||||
let byte1 = 0,
|
||||
byte2 = 0;
|
||||
|
||||
// 每行16个像素，分为两个字节
|
||||
for (let x = 0; x < 16; x++) {
|
||||
// 计算像素在imageData中的索引 (RGBA格式)
|
||||
let index = (y * 16 + x) * 4;
|
||||
let red = imageData[index];
|
||||
|
||||
// 黑色像素（R值较低）视为1，白色视为0
|
||||
let isBlack = red < 128;
|
||||
|
||||
if (x < 8) {
|
||||
// 第一个字节（左8位）
|
||||
if (isBlack) {
|
||||
byte1 |= 0x80 >> x; // 从左到右设置位
|
||||
}
|
||||
} else {
|
||||
// 第二个字节（右8位）
|
||||
if (isBlack) {
|
||||
byte2 |= 0x80 >> (x - 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将字节转换为两位十六进制字符串
|
||||
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
|
||||
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
|
||||
}
|
||||
|
||||
return matrix;
|
||||
}
|
||||
|
||||
let drawTxt=async (textLine)=> {
|
||||
let result = {};
|
||||
let ctx = this.ctx;
|
||||
|
||||
// 1. 动态调整Canvas尺寸
|
||||
this.currentCanvasWidth = this.calcLineWidth(textLine);
|
||||
this.currentCanvasHeight = this.fontSize;
|
||||
|
||||
// 2. 清空Canvas（绘制背景）
|
||||
this.clearCanvas();
|
||||
|
||||
// 3. 设置文字样式
|
||||
ctx.setFillStyle(this.color);
|
||||
ctx.setTextBaseline('middle');
|
||||
ctx.setFontSize(this.fontSize);
|
||||
ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;
|
||||
|
||||
// 4. 绘制当前行文本
|
||||
let currentX = 0;
|
||||
let currentY = this.fontSize / 2;
|
||||
for (let j = 0; j < textLine.length; j++) {
|
||||
let char = textLine[j];
|
||||
ctx.fillText(char, currentX, currentY);
|
||||
// 按实际字符宽度计算间距
|
||||
let charWidth = ctx.measureText(char).width;
|
||||
currentX += charWidth;
|
||||
}
|
||||
|
||||
// 5. 异步绘制并获取像素数据（串行处理避免冲突）
|
||||
await new Promise((resolve, reject) => {
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasGetImageData({
|
||||
canvasId: 'reusableCanvas',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.currentCanvasWidth,
|
||||
height: this.currentCanvasHeight,
|
||||
success: res => {
|
||||
|
||||
result={
|
||||
line: textLine,
|
||||
pixelData: res.data,
|
||||
width: this.currentCanvasWidth,
|
||||
height: this.currentCanvasHeight
|
||||
};
|
||||
resolve();
|
||||
},
|
||||
fail: err => {
|
||||
// console.error(`处理第${i+1}行失败:`, err);
|
||||
reject(err)
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
let arr = [];
|
||||
// 循环处理每行文本
|
||||
for (let i = 0; i < this.validTxts.length; i++) {
|
||||
|
||||
let linePixls = [];
|
||||
let item = this.validTxts[i];
|
||||
console.log("item=",item);
|
||||
for (var j = 0; j < item.length; j++) {
|
||||
let result = await drawTxt(item[j]);
|
||||
linePixls.push(convertCharToMatrix(result.pixelData));
|
||||
}
|
||||
console.log("hexs=",linePixls.join(","));
|
||||
arr.push(linePixls);
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.offscreen-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
199
components/global-loading/global-loading.vue
Normal file
199
components/global-loading/global-loading.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<view v-if="visible" class="loading-container" @touchmove.stop.prevent="handleTouchMove">
|
||||
<view class="loading-content">
|
||||
<!-- 刻度点容器 -->
|
||||
<view class="clock-container">
|
||||
<view v-for="(dot, index) in dots" :key="index" class="clock-dot" :style="{
|
||||
transform: `rotate(${index * angle}deg) translateY(-${radius}px)`,
|
||||
backgroundColor: getDotColor(index),
|
||||
animationDuration: `${duration}ms`,
|
||||
animationDelay: `${index * (duration / dotsCount)}ms`
|
||||
}"></view>
|
||||
</view>
|
||||
|
||||
<!-- 提示文本 -->
|
||||
<text class="loading-text" :class="text?'':'displayNone'" :style="{ color: textColor }">{{ text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dotsCount: 12,
|
||||
dotColors: ['#CEF231'],
|
||||
text: '请稍候...',//文本文字
|
||||
textColor: '#FFFFFFde',//文本颜色
|
||||
radius: 32,//圆的半径
|
||||
duration: 1200,//动画的播放速度
|
||||
colorIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算每个点之间的角度
|
||||
angle() {
|
||||
return 360 / this.dotsCount
|
||||
},
|
||||
// 生成刻度点数组
|
||||
dots() {
|
||||
return Array.from({
|
||||
length: this.dotsCount
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取刻度点颜色（实现无限循环变色）
|
||||
getDotColor(index) {
|
||||
// 根据当前颜色索引和刻度点位置计算颜色
|
||||
const colorIndex = (index + this.colorIndex) % this.dotColors.length
|
||||
return this.dotColors[colorIndex]
|
||||
},
|
||||
|
||||
// 更新颜色索引（实现循环变色）
|
||||
updateColorIndex() {
|
||||
this.colorIndex = (this.colorIndex + 1) % this.dotColors.length
|
||||
},
|
||||
|
||||
// 显示loading
|
||||
show(options) {
|
||||
|
||||
if(!options){
|
||||
options={};
|
||||
}
|
||||
|
||||
this.update(options)
|
||||
this.visible = true
|
||||
|
||||
// 启动颜色循环
|
||||
if (!this.colorTimer) {
|
||||
this.colorTimer = setInterval(() => {
|
||||
this.updateColorIndex()
|
||||
}, this.duration / this.dotColors.length)
|
||||
}
|
||||
},
|
||||
|
||||
// 隐藏loading
|
||||
hide() {
|
||||
|
||||
this.visible = false
|
||||
// 清除颜色循环定时器
|
||||
if (this.colorTimer) {
|
||||
clearInterval(this.colorTimer)
|
||||
this.colorTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
// 更新loading配置
|
||||
update(options) {
|
||||
if(!options){
|
||||
options={a:1};
|
||||
}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (this[key] !== undefined) {
|
||||
this[key] = options[key]
|
||||
}
|
||||
})
|
||||
|
||||
// 如果更新了颜色数组，重置颜色索引
|
||||
if (options.dotColors) {
|
||||
this.colorIndex = 0
|
||||
}
|
||||
},
|
||||
|
||||
// 阻止触摸移动事件
|
||||
handleTouchMove() {}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清除定时器
|
||||
if (this.colorTimer) {
|
||||
clearInterval(this.colorTimer)
|
||||
this.colorTimer = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全屏遮罩层 */
|
||||
.loading-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000c2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 99999999999;
|
||||
pointer-events: auto;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 70%;
|
||||
}
|
||||
|
||||
/* 内容居中 */
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateZ(0);
|
||||
/* 启用GPU加速 */
|
||||
margin-top: -150rpx;
|
||||
}
|
||||
|
||||
/* 刻度容器 */
|
||||
.clock-container {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
}
|
||||
|
||||
/* 单个刻度点 */
|
||||
.clock-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
/* margin-top: -4rpx;
|
||||
margin-left: -4rpx; */
|
||||
transform-origin: 0 0;
|
||||
animation: colorScale infinite ease-in-out;
|
||||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 刻度点动画 - 颜色和大小变化 */
|
||||
@keyframes colorScale {
|
||||
0% {
|
||||
opacity: 0.05;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 提示文本 */
|
||||
.loading-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.4rpx;
|
||||
text-align: center;
|
||||
max-width: 80vw;
|
||||
|
||||
|
||||
font-family: 'PingFang SC';
|
||||
}
|
||||
|
||||
.displayNone{
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user