style(ns-newform, diy-form): 对齐后端样式规范优化表单组件

1. 调整ns-newform的图片上传框样式,匹配后端design.css的.img-box样式参数
2. 简化diy-form的样式变量绑定,移除冗余的cssVars计算属性
3. 重构diy-form提交按钮样式,支持宽度百分比和尺寸预设,对齐后端设计规范
4. 优化表单布局类名逻辑,简化样式绑定代码
This commit is contained in:
2026-06-11 15:55:11 +08:00
parent 08caa49b43
commit 25636f8133
2 changed files with 47 additions and 60 deletions

View File

@@ -1302,43 +1302,47 @@ export default {
align-items: center;
flex-wrap: wrap;
gap: 16rpx;
// 与后端 design.css .form-preview-wrap .img-box 对齐:
// 100rpx (≈ 50px) + 1rpx solid #E6E6E6 + 4rpx radius
.img-box {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 120rpx;
height: 120rpx;
border: 2rpx dashed #d1d5db;
border-radius: 8rpx;
width: 100rpx;
height: 100rpx;
border: 1rpx solid #E6E6E6;
border-radius: 4rpx;
position: relative;
background: #f9fafb;
background: transparent;
box-sizing: border-box;
transition: all 0.3s ease;
overflow: hidden;
&:active {
background: #f3f4f6;
border-color: var(--checked-color, #ff4544);
}
// 关闭按钮:与后端 .form-preview-wrap .img-box .close 对齐
// top/right = -14rpx (≈ -7px),size = 28rpx (≈ 14px),背景 #999
.icon-guanbi {
position: absolute;
top: -10rpx;
right: -10rpx;
top: -14rpx;
right: -14rpx;
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
width: 28rpx;
height: 28rpx;
line-height: 1;
color: #fff;
background: var(--required-color, #ef4444);
background: #999;
border-radius: 50%;
font-size: 20rpx;
font-size: 28rpx;
z-index: 10;
}
.icon-add1 {
font-size: 48rpx;
color: #9ca3af;