From 352a1d78f48cbae03f160d3753e60f29dfa67f24 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Tue, 15 Sep 2026 12:38:33 +0800
Subject: [PATCH] 取消使用预制动画

---
 ledApp/pages/addTemplate/addTemplate.vue |  516 +++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 444 insertions(+), 72 deletions(-)

diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index a972bdf..086bec2 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -31,6 +31,27 @@
 					</uv-upload>
 				</view>
 			</view>
+			<view class="temp_item" v-if="!isEditMode">
+				<view class="title">
+					预制动画
+				</view>
+				<view class="item">
+					<uv-radio-group v-model="selectedPreset" placement="column" @change="changePreset" labelSize="26rpx">
+						<uv-radio
+							class="spec_radio"
+							label="无"
+							name="__none__">
+						</uv-radio>
+						<uv-radio
+							class="spec_radio"
+							v-for="(item, index) in presetList"
+							:key="index"
+							:label="'预制动画:'+item.name+'('+item.fpsTotal+'帧)'"
+							:name="item.name">
+						</uv-radio>
+					</uv-radio-group>
+				</view>
+			</view>
 			<view class="temp_item">
 				<view class="title">
 					屏幕规格
@@ -91,6 +112,7 @@
 				</view>
 				<view class="item">
 					<uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
+					<uv-button text="复制" @click="copyFrame(index)" shape="circle" size="small" color="linear-gradient( 142deg, #FFB347 0%, #FF8C00 100%)"></uv-button>
 				</view>
 			</view>
 		</view>
@@ -127,21 +149,48 @@
 				<view class="back_btn" v-show="false" @click="popupAnimationClose">
 					<uv-icon name="arrow-leftward" color="#333" size="30"></uv-icon>
 				</view>
-				<!-- 操作按钮 -->
-				<view class="controls" style="left: 30rpx;">
+				<!-- 主操作按钮(收回/操作) - 移动模式下隐藏 -->
+				<view class="controls" style="left: 30rpx;" v-if="!showMoveControls && !showMultiMoveControls">
 					<uv-button type="success" :plain="true" :text="showControls ? '收回' : '操作'" @click="toggleControls"></uv-button>
 				</view>
 
-				<!-- 动画按钮 -->
-				<view class="controls" v-if="showControls">
-					<uv-button type="primary" :plain="true" text="分辨率" @click="changeRatio()"></uv-button>
+				<!-- 主操作按钮组:颜色、移动、文字、清除、保存 -->
+				<view class="controls" v-if="showControls && !showMoveControls && !showMultiMoveControls">
 					<uv-button type="primary" :plain="true" text="颜色" @click="changeColor()"></uv-button>
-					<uv-button type="primary" :plain="true" text="左移" @click="shiftLeft()"></uv-button>
-					<uv-button type="primary" :plain="true" text="右移" @click="shiftRight()"></uv-button>
+					<uv-button type="primary" :plain="true" text="单帧移动" @click="enterMoveMode()"></uv-button>
+					<uv-button type="primary" :plain="true" text="多帧移动" @click="enterMultiMoveMode()"></uv-button>
 					<uv-button type="primary" :plain="true" text="文字" @click="addText()"></uv-button>
 					<uv-button type="primary" :plain="true" text="清除" @click="clear()"></uv-button>
 					<uv-button type="primary" :plain="true" text="保存" @click="clickSaveData"></uv-button>
 				</view>
+
+				<!-- 单帧移动按钮组:返回、左移、上移、下移、右移、180度旋转、左右镜像翻转、上下镜像翻转 -->
+				<view class="controls" style="left: 30rpx;" v-if="showMoveControls">
+					<uv-button type="primary" :plain="true" text="返回" @click="exitMoveMode()"></uv-button>
+				</view>
+				<view class="controls move_controls" v-if="showMoveControls">
+					<uv-button type="primary" :plain="true" text="左移" @click="shiftLeft()"></uv-button>
+					<uv-button type="primary" :plain="true" text="上移" @click="shiftUp()"></uv-button>
+					<uv-button type="primary" :plain="true" text="下移" @click="shiftDown()"></uv-button>
+					<uv-button type="primary" :plain="true" text="右移" @click="shiftRight()"></uv-button>
+					<uv-button type="primary" :plain="true" text="180°旋转" @click="rotate180()"></uv-button>
+					<uv-button type="primary" :plain="true" text="左右镜像" @click="flipHorizontal()"></uv-button>
+					<uv-button type="primary" :plain="true" text="上下镜像" @click="flipVertical()"></uv-button>
+				</view>
+
+				<!-- 多帧移动按钮组:操作对所有帧生效 -->
+				<view class="controls" style="left: 30rpx;" v-if="showMultiMoveControls">
+					<uv-button type="primary" :plain="true" text="返回" @click="exitMultiMoveMode()"></uv-button>
+				</view>
+				<view class="controls move_controls" v-if="showMultiMoveControls">
+					<uv-button type="primary" :plain="true" text="左移" @click="multiShiftLeft()"></uv-button>
+					<uv-button type="primary" :plain="true" text="上移" @click="multiShiftUp()"></uv-button>
+					<uv-button type="primary" :plain="true" text="下移" @click="multiShiftDown()"></uv-button>
+					<uv-button type="primary" :plain="true" text="右移" @click="multiShiftRight()"></uv-button>
+					<uv-button type="primary" :plain="true" text="180°旋转" @click="multiRotate180()"></uv-button>
+					<uv-button type="primary" :plain="true" text="左右镜像" @click="multiFlipHorizontal()"></uv-button>
+					<uv-button type="primary" :plain="true" text="上下镜像" @click="multiFlipVertical()"></uv-button>
+				</view>
 				
 				<!-- 文字生成图形 -->
 				<canvas canvas-id="myCanvas" id="myCanvas" class="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
@@ -175,10 +224,47 @@
 		<!-- 分辨率 -->
 		<uv-picker ref="pickerRatio" :columns="columnsRatio" @confirm="confirmRatio"></uv-picker>
 		
-		<!-- 颜色 -->
+		<!-- 颜色选择器 -->
 		<uv-popup ref="pickerColor" mode="bottom" round="10" :closeable="true">
-			<view class="color_list">
-				<view class="color_item" v-for="(item, index) in colorList" :class="{ hover: color === item }" :key="index" :style="{ backgroundColor: item }" @click="clickColor(item)"></view>
+			<scroll-view scroll-y :show-scrollbar="false" class="color-picker-scroll">
+				<view class="color-picker-wrapper">
+					<view class="color-picker-inner">
+						<x-color-picker
+							v-model="color"
+							:show-alpha="false"
+							:save-history="true"
+							:options="pickerOptions"
+							@confirm="onColorConfirm"
+							@cancel="onColorCancel" />
+					</view>
+				</view>
+			</scroll-view>
+		</uv-popup>
+		
+		<!-- 添加文字弹窗 -->
+		<uv-popup ref="popupText" mode="center" round="10" :safeAreaInsetTop="false" :safeAreaInsetBottom="false" :zoom="false" duration="0">
+			<view class="text_popup">
+				<view class="text_popup_title">添加文字</view>
+				<view class="text_popup_item">
+					<view class="text_popup_label">文字</view>
+					<view class="text_popup_input">
+						<uv-input placeholder="请输入文字" border="none" v-model="tempText" fontSize="16px"
+							customStyle="background: #ECEFF6;padding:8px 10px;border-radius: 6px;"></uv-input>
+					</view>
+				</view>
+				<view class="text_popup_item">
+					<view class="text_popup_label">类型</view>
+					<view class="text_popup_type">
+						<uv-radio-group v-model="textType" placement="row" labelSize="16px" style="gap:10px;">
+							<uv-radio label="覆盖" name="overwrite"></uv-radio>
+							<uv-radio label="追加" name="append"></uv-radio>
+						</uv-radio-group>
+					</view>
+				</view>
+				<view class="text_popup_btn">
+					<uv-button type="info" text="取消" @click="closeTextPopup"></uv-button>
+					<uv-button type="primary" text="确定" @click="confirmAddText" customStyle=""></uv-button>
+				</view>
 			</view>
 		</uv-popup>
 		
@@ -189,7 +275,8 @@
 	import {
 		templeteAdd,
 		templeteInfo,
-		templeteEdit
+		templeteEdit,
+		templeteList
 	} from '@/api/api.js'
 	let ctx = null
 	export default {
@@ -259,17 +346,11 @@
 				// columnsRatio: [
 				// 	['12*24']
 				// ],
-				colorList: [
-					'#FF0000',
-					'#00FF00',
-					'#0000FF',
-					'#FFFF00',
-					'#FFA500',
-					'#800080',
-					'#00FFFF',
-					'#FFC0CB'
-				],
-				fpsIndex: 0,
+				color: '#FF0000',
+				gridRect: null,
+				pickerOptions: {
+					width: 680,
+				},
 				fpsList: [],
 				tId: '',
 				tempInfo:{},
@@ -281,7 +362,14 @@
 				previewWidth: 24,
 				previewHeight: 12,
 				showControls: false,
-				scrollLeft: 0,
+		showMoveControls: false, // 单帧移动模式按钮组开关
+		showMultiMoveControls: false, // 多帧移动模式按钮组开关
+			scrollLeft: 0,
+				textType: 'overwrite',
+				tempText: '',
+				presetList: [],
+				selectedPreset: '',
+				isEditMode: false,
 			}
 		},
 		computed: {
@@ -297,9 +385,12 @@
 				this.tId = opt.id
 				this.getTempleteInfo()
 				this.titleName = '编辑模版'
+				this.isEditMode = true
 			}
 			else{
 				this.titleName = '新增模版'
+				this.isEditMode = false
+				this.getPresetList()
 			}
 		},
 		onShow() {
@@ -319,6 +410,40 @@
 			}
 		},
 		methods: {
+			getPresetList() {
+				templeteList({
+					userId: 1,
+					pageNum: 1,
+					pageSize: 99
+				}).then(res => {
+					console.log('预制动画列表-------', res.rows)
+					if(res.code == 200){
+						this.presetList = res.rows || []
+					}
+				})
+			},
+			changePreset(val) {
+				console.log('changePreset', val)
+				// 选择"无":将动画帧复原为空白(保留当前屏幕规格/动画方式/帧数/速度)
+				if (val === '__none__') {
+					this.fpsList = []
+					this.total = 1
+					this.fpsData = []
+					this.pixelData = []
+					this.gridRect = null
+					return
+				}
+				const preset = this.presetList.find(item => item.name === val)
+				if (preset) {
+					this.specVal = preset.screen
+					this.modeVal = preset.mode
+					this.total = preset.fpsTotal
+					this.speed = preset.speed
+					if (preset.fpsList) {
+						this.fpsList = JSON.parse(preset.fpsList)
+					}
+				}
+			},
 			handleScroll(e){
 				this.scrollLeft = e.detail.scrollLeft
 			},
@@ -527,9 +652,11 @@
 			changeColor() {
 				this.$refs.pickerColor.open();
 			},
-			clickColor(item) {
-				console.log('confirmColor---', item);
-				this.color = item;
+			onColorConfirm(colorObj) {
+				this.color = colorObj.hex;
+				this.$refs.pickerColor.close();
+			},
+			onColorCancel() {
 				this.$refs.pickerColor.close();
 			},
 			changeRatio() {
@@ -563,14 +690,14 @@
 			getCellByTouch(touch, cb) {
 				this.getGridRect(rect => {
 					if (!rect) return
-					const x = touch.clientX - rect.left + this.scrollLeft
+					const x = touch.clientX + this.scrollLeft
 					const y = touch.clientY - rect.top
 					const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
 					const cellWidth = rect.width / colCount
 					const cellHeight = rect.height / this.height
 					const colIndex = Math.floor(x / cellWidth)
 					const rowIndex = Math.floor(y / cellHeight)
-					console.log('colCount', colCount, 'rowIndex', rowIndex, 'colIndex', colIndex)
+					//console.log('colCount', colCount, 'rowIndex', rowIndex, 'colIndex', colIndex, x, cellWidth)
 					if (
 						colIndex >= 0 && colIndex < colCount &&
 						rowIndex >= 0 && rowIndex < this.height
@@ -647,6 +774,138 @@
 					}
 				}
 			},
+			shiftDown() {
+				const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+				const lastRowStart = (this.height - 1) * colCount
+				const lastRow = this.pixelData.slice(lastRowStart, lastRowStart + colCount)
+				for (let r = this.height - 1; r > 0; r--) {
+					const currentStart = r * colCount
+					const prevStart = (r - 1) * colCount
+					for (let c = 0; c < colCount; c++) {
+						this.$set(this.pixelData, currentStart + c, this.pixelData[prevStart + c])
+					}
+				}
+				for (let c = 0; c < colCount; c++) {
+					this.$set(this.pixelData, c, lastRow[c])
+				}
+			},
+			// 上移一像素:整体内容上移,首行补到末行
+			shiftUp() {
+				const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+				const firstRow = this.pixelData.slice(0, colCount)
+				for (let r = 0; r < this.height - 1; r++) {
+					const currentStart = r * colCount
+					const nextStart = (r + 1) * colCount
+					for (let c = 0; c < colCount; c++) {
+						this.$set(this.pixelData, currentStart + c, this.pixelData[nextStart + c])
+					}
+				}
+				const lastRowStart = (this.height - 1) * colCount
+				for (let c = 0; c < colCount; c++) {
+					this.$set(this.pixelData, lastRowStart + c, firstRow[c])
+				}
+			},
+			// 180度旋转:整体一维数组反转即可实现180度旋转
+			rotate180() {
+				this.pixelData = this.pixelData.slice().reverse()
+			},
+			// 左右镜像翻转:每行内部反转
+			flipHorizontal() {
+				const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+				const newData = this.pixelData.slice()
+				for (let r = 0; r < this.height; r++) {
+					const rowStart = r * colCount
+					const reversedRow = newData.slice(rowStart, rowStart + colCount).reverse()
+					for (let c = 0; c < colCount; c++) {
+						newData[rowStart + c] = reversedRow[c]
+					}
+				}
+				this.pixelData = newData
+			},
+			// 上下镜像翻转:行顺序反转
+			flipVertical() {
+				const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+				let newData = []
+				for (let r = this.height - 1; r >= 0; r--) {
+					const rowStart = r * colCount
+					newData = newData.concat(this.pixelData.slice(rowStart, rowStart + colCount))
+				}
+				this.pixelData = newData
+			},
+			// 进入移动模式:隐藏主按钮组,显示移动按钮组
+			enterMoveMode() {
+				this.showMoveControls = true
+				this.showMultiMoveControls = false
+				this.showControls = false
+			},
+			// 退出移动模式:恢复主按钮组
+			exitMoveMode() {
+				this.showMoveControls = false
+				this.showControls = true
+			},
+			// 进入多帧移动模式:隐藏主按钮组,显示多帧移动按钮组
+			enterMultiMoveMode() {
+				this.showMultiMoveControls = true
+				this.showMoveControls = false
+				this.showControls = false
+			},
+			// 退出多帧移动模式:恢复主按钮组
+			exitMultiMoveMode() {
+				this.showMultiMoveControls = false
+				this.showControls = true
+			},
+			// 对所有已编辑帧执行同一种单帧变换
+			// action: 单帧变换方法名(shiftLeft/shiftUp/shiftDown/shiftRight/rotate180/flipHorizontal/flipVertical)
+			applyTransformToAllFrames(action) {
+				const currentIndex = this.fpsIndex
+				// 以编辑区当前显示的数据(可能包含未保存的修改)作为当前帧的数据源
+				let currentData = this.pixelData ? this.pixelData.slice() : this.pixelData
+				for (let i = 0; i < this.fpsList.length; i++) {
+					if (i === currentIndex) continue
+					const frame = this.fpsList[i]
+					if (frame === null || frame === undefined) continue
+					// 复用单帧变换逻辑:临时把该帧作为编辑数据执行变换后写回
+					this.pixelData = frame.slice()
+					this[action]()
+					this.$set(this.fpsList, i, this.pixelData.slice())
+				}
+				// 对当前正在编辑的帧执行相同变换,刷新画布显示
+				this.pixelData = currentData.slice()
+				this[action]()
+				// 当前帧此前已保存过则同步写回,保证所有帧数据一致;未编辑过的帧(null)仍由"保存"按钮写入
+				const stored = this.fpsList[currentIndex]
+				if (stored !== null && stored !== undefined) {
+					this.$set(this.fpsList, currentIndex, this.pixelData.slice())
+				}
+			},
+			// 多帧移动:所有帧同时左移
+			multiShiftLeft() {
+				this.applyTransformToAllFrames('shiftLeft')
+			},
+			// 多帧移动:所有帧同时上移
+			multiShiftUp() {
+				this.applyTransformToAllFrames('shiftUp')
+			},
+			// 多帧移动:所有帧同时下移
+			multiShiftDown() {
+				this.applyTransformToAllFrames('shiftDown')
+			},
+			// 多帧移动:所有帧同时右移
+			multiShiftRight() {
+				this.applyTransformToAllFrames('shiftRight')
+			},
+			// 多帧移动:所有帧同时180度旋转
+			multiRotate180() {
+				this.applyTransformToAllFrames('rotate180')
+			},
+			// 多帧移动:所有帧同时左右镜像
+			multiFlipHorizontal() {
+				this.applyTransformToAllFrames('flipHorizontal')
+			},
+			// 多帧移动:所有帧同时上下镜像
+			multiFlipVertical() {
+				this.applyTransformToAllFrames('flipVertical')
+			},
 			toggleControls() {
 				this.showControls = !this.showControls;
 			},
@@ -688,6 +947,30 @@
 				this.$refs.popupAnimation.close();
 				const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
 				this.pixelData = new Array(this.height * colCount).fill('')
+				// 重置按钮组状态,下次打开回到主操作界面
+				this.showMoveControls = false
+				this.showMultiMoveControls = false
+				this.showControls = false
+			},
+			// 复制当前帧
+			copyFrame(index) {
+				uni.showModal({
+					title: '提示',
+					content: '确定要复制当前帧吗?',
+					success: (res) => {
+						if (res.confirm) {
+							const source = this.fpsList[index];
+							const copy = source ? [...source] : null;
+							this.fpsList.splice(index + 1, 0, copy);
+							this.total = this.fpsList.length;
+							uni.showToast({
+								title: '复制成功',
+								icon: 'success',
+								duration: 1500
+							});
+						}
+					}
+				});
 			},
 			// 屏幕规格
 			changeSpec(e) {
@@ -875,7 +1158,7 @@
 				})
 			},
 			// 生成点阵数据
-			generateDotMatrix(char) {
+			generateDotMatrix(char, startCol = null) {
 				return new Promise((resolve, reject) => {
 			
 					// 使用 uni-app 的 canvas context
@@ -888,8 +1171,14 @@
 					// 绘制文字
 					// 垂直居中,稍微向上偏移一点
 					const y = this.canvasHeight / 2 + 10;
+					const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
 					
-					if (this.modeVal == 2) {
+					if (startCol !== null) {
+						ctx.setTextAlign('left')
+						const cellWidth = this.canvasWidth / colCount;
+						const x = startCol * cellWidth;
+						ctx.fillText(char, x, y);
+					} else if (this.modeVal == 2) {
 						// 滚动动画:文字靠左对齐
 						ctx.setTextAlign('left')
 						const x = 20;
@@ -1043,38 +1332,66 @@
 					this.previewTimer = null;
 				}
 			},
-			// 修改添加文字方法
-			async addText() {
-				uni.showModal({
-					title: '添加文字',
-					content: '',
-					editable: true,
-					placeholderText: '请输入文字',
-					success: async (res) => {
-						if (res.confirm) {
-							const text = res.content;
-							if (text.length > 0) {
-								try {
-									// 生成点阵数据
-									const dotMatrix = await this.generateDotMatrix(text);
-									console.log('点阵数据:', dotMatrix);
-									this.pixelData = dotMatrix
-								} catch (error) {
-									console.error('生成点阵失败:', error);
-									uni.showToast({
-										title: '生成点阵失败',
-										icon: 'none'
-									});
-								}
-							} else {
-								uni.showToast({
-									title: '请输入文字',
-									icon: 'none'
-								});
-							}
+			addText() {
+				this.tempText = '';
+				this.textType = 'overwrite';
+				this.$refs.popupText.open();
+			},
+			closeTextPopup() {
+				this.$refs.popupText.close();
+			},
+			async confirmAddText() {
+				const text = this.tempText;
+				if (!text || text.length === 0) {
+					uni.showToast({
+						title: '请输入文字',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				try {
+					if (this.textType === 'overwrite') {
+						const dotMatrix = await this.generateDotMatrix(text);
+						this.pixelData = dotMatrix;
+					} else {
+						const colCount = this.width * (this.modeVal == 2 ? 10 : 1);
+						const rightmostCol = this.findRightmostNonEmptyCol(colCount);
+						const startCol = rightmostCol === -1 ? 0 : rightmostCol + 2;
+						const dotMatrix = await this.generateDotMatrix(text, startCol);
+						this.mergePixelData(dotMatrix);
+					}
+					this.$refs.popupText.close();
+				} catch (error) {
+					console.error('生成点阵失败:', error);
+					uni.showToast({
+						title: '生成点阵失败',
+						icon: 'none'
+					});
+				}
+			},
+			findRightmostNonEmptyCol(colCount) {
+				for (let col = colCount - 1; col >= 0; col--) {
+					let isEmpty = true;
+					for (let row = 0; row < this.height; row++) {
+						const index = row * colCount + col;
+						if (this.pixelData[index] !== '' && this.pixelData[index] !== null && this.pixelData[index] !== undefined) {
+							isEmpty = false;
+							break;
 						}
 					}
-				});
+					if (!isEmpty) {
+						return col;
+					}
+				}
+				return -1;
+			},
+			mergePixelData(dotMatrix) {
+				for (let i = 0; i < dotMatrix.length; i++) {
+					if (dotMatrix[i] !== '' && dotMatrix[i] !== null && dotMatrix[i] !== undefined) {
+						this.$set(this.pixelData, i, dotMatrix[i]);
+					}
+				}
 			},
 		}
 	}
@@ -1094,20 +1411,17 @@
 		justify-content: center;
 		margin-bottom: 15rpx;
 	}
-	.color_list {
-		width: 100%;
+	.color_picker_wrapper {
+		padding: 30rpx 0;
 		display: flex;
 		justify-content: center;
-		flex-wrap: wrap;
-		gap: 30rpx;
+	}
+	.color-picker-scroll {
+		max-height: 90vh;
 		box-sizing: border-box;
-		padding: 50rpx;
-	
-		.color_item {
-			width: 30rpx;
-			height: 30rpx;
-			border-radius: 5rpx;
-		}
+	}
+	.color-picker-wrapper {
+		//zoom: 0.5;
 	}
 	
 	.action_btn {
@@ -1128,6 +1442,15 @@
 		gap: 10rpx;
 		z-index: 9;
 	}
+	// 移动模式按钮组:8个按钮需要换行排列
+	.move_controls {
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		max-width: calc(100vw - 200rpx);
+		::v-deep .uv-button {
+			margin: 4rpx 0;
+		}
+	}
 	.exit_btn{
 		position: absolute;
 		right: 30rpx;
@@ -1293,7 +1616,11 @@
 
 			}
 
-			.item {}
+			.item {
+				flex-direction:row;
+				gap:20rpx;
+				display:flex;
+			}
 		}
 
 		.temp_item {
@@ -1335,4 +1662,49 @@
 		background: url('/static/img/bg_2.jpg') no-repeat center top;
 		background-size: 100% auto;
 	}
+	
+	.text_popup {
+		width: 600rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+		
+		.text_popup_title {
+			font-size: 16px;
+			font-weight: bold;
+			color: #333;
+			text-align: center;
+			margin-bottom: 15px;
+		}
+		
+		.text_popup_item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 15px;
+			
+			.text_popup_label {
+				width: 50px;
+				font-size: 16px;
+				color: #666;
+				flex-shrink: 0;
+			}
+			
+			.text_popup_input {
+				flex: 1;
+				font-size: 16px;
+			}
+			
+			.text_popup_type {
+				flex: 1;
+			}
+		}
+		
+		.text_popup_btn {
+			display: flex;
+			margin-top: 20px;
+			justify-content: center;
+			gap: 20px;
+		}
+	}
 </style>
\ No newline at end of file

--
Gitblit v1.10.0