立体文字测试（使用图片是可以的），墙的编辑UI界面设计及功能完善

src/components/jt-dialog/dialog-wall-edit.vue

@@ -0,0 +1,152 @@
+<template>
+	<div class="jt-wall-dialog">
+		<el-dialog
+			draggable
+			:modal="false"
+			:destroy-on-close="false"
+			v-model="dialogVisible"
+			:title="title"
+			:style="{ left: '120px', background: 'rgb(0 44 126 / 68%)', height: '400px', width: '180px', top: '100px' }"
+		>
+			<template #header>
+				<div slot="title" class="header-title">
+					<span style="line-height:24px;font-size:18px;color:#fff;font-family: 'Alimama_ShuHeiTi_Bold'">{{ title }}</span>
+				</div>
+			</template>
+
+			<template #default>
+				<div class="odin-dialog__content">
+					<div class="jt-wall-row">
+						<div class="col-left">高度</div>
+						<div class="col-main"><el-input v-model="wallHeight" placeholder="输入高度值" /></div>
+					</div>
+					<div class="jt-wall-row">
+						<div class="col-left">颜色</div>
+						<div class="col-main"><el-color-picker v-model="color" show-alpha :predefine="predefineColors" /></div>
+					</div>
+					<div class="jt-wall-row">
+						<div class="col-left">材质方向</div>
+						<div class="col-main">
+							<el-radio-group v-model="radioDirection"><el-radio-button v-for="(item, index) in directions" :label="item" /></el-radio-group>
+						</div>
+					</div>
+					<div class="jt-wall-row">
+						<div class="col-left">流动顺序</div>
+						<div class="col-main">
+							<el-radio-group v-model="radioOrder"><el-radio-button v-for="(item, index) in orders" :label="item" /></el-radio-group>
+						</div>
+					</div>
+					<div class="jt-wall-row">
+						<div class="col-left">Y轴数量</div>
+						<div class="col-main"><el-input v-model="yCount" placeholder="输入1～100" /></div>
+					</div>
+					<div class="el-body-foot">
+						<el-button-group class="ml-4">
+							<el-button type="primary" :icon="Edit">修改</el-button>
+							<el-button type="danger" :icon="Delete">删除</el-button>
+						</el-button-group>
+					</div>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { ElDialog } from 'element-plus';
+import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue';
+const predefineColors = ref([
+	'#ff4500',
+	'#ff8c00',
+	'#ffd700',
+	'#90ee90',
+	'#00ced1',
+	'#1e90ff',
+	'#c71585',
+	'rgba(255, 69, 0, 0.68)',
+	'rgb(255, 120, 0)',
+	'hsv(51, 100, 98)',
+	'hsva(120, 40, 94, 0.5)',
+	'hsl(181, 100%, 37%)',
+	'hsla(209, 100%, 56%, 0.73)',
+	'#c7158577'
+]);
+const color = ref('rgba(255, 69, 0, 0.68)');
+const title = ref('墙编辑');
+const dialogVisible = ref(true);
+const directions = ref(['左右', '上下']);
+const radioDirection = ref(directions.value[1]);
+const orders = ref(['自上至下', '自下至上']);
+const radioOrder = ref(orders.value[0]);
+const wallHeight = ref(100);
+const yCount = ref(3);
+</script>
+<style lang="scss">
+/* 墙对话框内容行样式 */
+.jt-wall-row {
+	display: flex;
+	flex-direction: row;
+	height: 40px;
+	align-items: center;
+
+	/* 行左侧标题样式 */
+	.col-left {
+		display: flex;
+		align-items: center;
+		justify-content: right;
+		width: 60px;
+		font-family: 'Alimama_ShuHeiTi_Bold';
+		font-weight: bold;
+		margin-right: 8px;
+	}
+
+	/* 主要内容样式 */
+	.col-main {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+	}
+}
+
+/* 墙对话框整体样式 */
+.jt-wall-dialog {
+	pointer-events: none; // ***覆盖层元素增加可穿透点击事件***
+	.el-dialog {
+		pointer-events: auto; // ***弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）***
+		position: absolute !important; //将通知框的position改成absolute，可以在某个div进行显示
+
+		background: rgb(5 45 155 / 70%);
+		min-width: 280px;
+		overflow: hidden;
+
+		/* 对话框标题头样式 */
+		.el-dialog__header {
+			background: url('../../assets/image/backheader.png') no-repeat;
+			margin-right: 0px;
+			padding: 6px;
+		}
+
+		/* 对话框关闭按钮的样式 */
+		.el-dialog__headerbtn {
+			height: 34px;
+		}
+
+		/* 对话框主体的样式 */
+		.el-dialog__body {
+			padding: 10px;
+			color: #fff;
+		}
+
+		/* 颜色选择器的宽度 */
+		.el-color-picker__trigger {
+			width: 120px;
+		}
+
+		.el-body-foot {
+			position: absolute;
+			bottom: 8px;
+			right: 8px;
+		}
+	}
+}
+</style>