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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user