表单-ULUI

<div class="ul-form">
    <form action="">
        <!-- 基础输入框 -->
        <div class="ul-form__item">
            <label class="ul-form__label">输入框</label>
            <div class="ul-form__control">
                <input type="text" class="ul-input" placeholder="请输入内容">
            </div>
        </div>
        <!-- 基础下拉框 -->
        <div class="ul-form__item">
            <label class="ul-form__label">下拉框</label>
            <div class="ul-form__control">
                <select class="ul-select">
                    <option>请选择城市</option>
                    <option>北京</option>
                    <option>上海</option>
                </select>
            </div>
        </div>
        <!-- 输入框和下拉框组合 -->
        <div class="ul-form__item">
            <label class="ul-form__label">输入框+下拉框</label>
            <div class="ul-form__control">
                <div class="ul-input-group">
                    <span class="ul-input-group__prepend">
                        <select class="ul-select">
                            <option>+86</option>
                            <option>+852</option>
                        </select>
                    </span>
                    <input type="text" class="ul-input" placeholder="请输入手机号">
                </div>
            </div>
        </div>
        <!-- 输入框和按钮组合 -->
        <div class="ul-form__item">
            <label class="ul-form__label">输入框+按钮</label>
            <div class="ul-form__control">
                <div class="ul-input-group">
                    <input type="text" class="ul-input" placeholder="请输入验证码">
                    <span class="ul-input-group__append"><button type="button" class="ul-btn">获取验证码</button></span>
                </div>
            </div>
        </div>
        <!-- 下拉框和按钮组合 -->
        <div class="ul-form__item">
            <label class="ul-form__label">下拉框+按钮</label>
            <div class="ul-form__control">
                <div class="ul-input-group">
                    <select class="ul-select">
                        <option>操作一</option>
                        <option>操作二</option>
                    </select>
                    <span class="ul-input-group__append"><button type="button" class="ul-btn ul-btn-primary">执行</button></span>
                </div>
            </div>
        </div>
        <!-- 单选框 -->
        <div class="ul-form__item">
            <label class="ul-form__label">单选框</label>
            <div class="ul-form__control">
                <label class="ul-radio">
                    <input type="radio" name="sex" checked>
                    <span class="ul-radio__indicator"></span>
                    <span class="ul-radio__label">男</span>
                </label>
                <label class="ul-radio">
                    <input type="radio" name="sex">
                    <span class="ul-radio__indicator"></span>
                    <span class="ul-radio__label">女</span>
                </label>
            </div>
        </div>
        <!-- 复选框 -->
        <div class="ul-form__item">
            <label class="ul-form__label">复选框</label>
            <div class="ul-form__control">
                <label class="ul-checkbox">
                    <input type="checkbox" name="hobby" checked>
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">写作</span>
                </label>
                <label class="ul-checkbox">
                    <input type="checkbox" name="hobby">
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">编码</span>
                </label>
            </div>
        </div>
        <!-- 文本域 -->
        <div class="ul-form__item">
            <label class="ul-form__label">文本域</label>
            <div class="ul-form__control"><textarea class="ul-textarea" placeholder="请输入更多内容"></textarea></div>
        </div>
        <!-- 复选框和输入框 -->
        <div class="ul-form__item">
            <label class="ul-form__label">复选框+输入框</label>
            <div class="ul-form__control">
                <label class="ul-checkbox">
                    <input type="checkbox" name="other">
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">其他</span>
                </label>
                <input type="text" class="ul-input" placeholder="请说明" style="margin-left: 10px; width: 200px;">
            </div>
        </div>
        <!-- 提交按钮 -->
        <div class="ul-form__item">
            <div class="ul-form__actions"><button type="button" class="ul-btn ul-btn-primary">立即提交</button> <button type="button" class="ul-btn">重置</button></div>
        </div>
    </form>
</div>

.ul-form {
    &__item {
        display: flex;
        align-items: flex-start;
        margin-bottom: $space-md;

        &:last-child {
            margin-bottom: 0;
        }
    }

    &__label {
        width: 100px;
        padding: 8px 0;
        line-height: 1.5;
        text-align: right;
        margin-right: $space-md;
        flex-shrink: 0;
        color: $color-text;
        font-size: $font-size-base;
    }

    &__control {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    &__actions {
        padding-left: 100px + $space-md; // 等于 label 宽度 + 间距
        display: flex;
        gap: $space-md;
    }
}

// 输入框组
.ul-input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
    position: relative;

    &__prepend,
    &__append {
        display: flex;
        align-items: stretch;
        background-color: $color-bg;
        border: 1px solid $color-border;
        color: $color-text-secondary;
        flex-shrink: 0;
        position: relative;

        // 移除容器的样式，让带颜色的按钮完全显示
        &:has(> .ul-btn[class*="ul-btn-"]) {
            background: none;
            border: none;
        }

        // 默认按钮融入容器
        > .ul-btn:not([class*="ul-btn-"]) {
            background: none;
            border: none;
            padding: 0 $space-md;
            color: inherit; // 继承容器的文字颜色
        }

        // 带颜色的按钮，调整边框和圆角
        > .ul-btn[class*="ul-btn-"] {
            border-radius: 0;
            margin: -1px; // 负边距用于覆盖容器边框
        }

        .ul-select {
            border: none;
            background: none;
        }
    }

    &__prepend {
        border-right: 0;
        border-radius: $radius-base 0 0 $radius-base;

        > .ul-btn[class*="ul-btn-"] {
            border-radius: $radius-base 0 0 $radius-base;
        }
    }

    &__append {
        border-left: 0;
        border-radius: 0 $radius-base $radius-base 0;

        > .ul-btn[class*="ul-btn-"] {
            border-radius: 0 $radius-base $radius-base 0;
        }
    }

    .ul-input {
        border-radius: 0;
        flex: 1;
        min-width: 0;

        &:first-child {
            border-radius: $radius-base 0 0 $radius-base;
        }

        &:last-child {
            border-radius: 0 $radius-base $radius-base 0;
        }
    }
}

// 响应式：手机端
@include media-breakpoint-down(md) {
    .ul-form {
        &__item {
            flex-direction: column;
            align-items: stretch;
        }

        &__label {
            width: auto;
            text-align: left;
            margin-right: 0;
            margin-bottom: $space-sm;
            padding: 0; // 移除桌面端的垂直padding
        }

        &__control {
            padding: 0; // 移除桌面端的垂直padding
        }

        &__actions {
            padding-left: 0; // 移除为label留出的左边距
        }
    }
}

.ul-form__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ul-form__item:last-child {
  margin-bottom: 0;
}
.ul-form__label {
  width: 100px;
  padding: 8px 0;
  line-height: 1.5;
  text-align: right;
  margin-right: 16px;
  flex-shrink: 0;
  color: var(--ul-color-text);
  font-size: 14px;
}
.ul-form__control {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ul-form__actions {
  padding-left: 116px;
  display: flex;
  gap: 16px;
}
.ul-input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
  position: relative;
}
.ul-input-group__prepend, .ul-input-group__append {
  display: flex;
  align-items: stretch;
  background-color: var(--ul-color-bg);
  border: 1px solid var(--ul-color-border);
  color: var(--ul-color-text-secondary);
  flex-shrink: 0;
  position: relative;
}
.ul-input-group__prepend:has(> .ul-btn[class*="ul-btn-"]), .ul-input-group__append:has(> .ul-btn[class*="ul-btn-"]) {
  background: none;
  border: none;
}
.ul-input-group__prepend > .ul-btn:not([class*="ul-btn-"]), .ul-input-group__append > .ul-btn:not([class*="ul-btn-"]) {
  background: none;
  border: none;
  padding: 0 16px;
  color: inherit;
}
.ul-input-group__prepend > .ul-btn[class*="ul-btn-"], .ul-input-group__append > .ul-btn[class*="ul-btn-"] {
  border-radius: 0;
  margin: -1px;
}
.ul-input-group__prepend .ul-select, .ul-input-group__append .ul-select {
  border: none;
  background: none;
}
.ul-input-group__prepend {
  border-right: 0;
  border-radius: 4px 0 0 4px;
}
.ul-input-group__prepend > .ul-btn[class*="ul-btn-"] {
  border-radius: 4px 0 0 4px;
}
.ul-input-group__append {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.ul-input-group__append > .ul-btn[class*="ul-btn-"] {
  border-radius: 0 4px 4px 0;
}
.ul-input-group .ul-input {
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.ul-input-group .ul-input:first-child {
  border-radius: 4px 0 0 4px;
}
.ul-input-group .ul-input:last-child {
  border-radius: 0 4px 4px 0;
}
@media (max-width: 767.98px) {
  .ul-form__item {
    flex-direction: column;
    align-items: stretch;
  }
  .ul-form__label {
    width: auto;
    text-align: left;
    margin-right: 0;
    margin-bottom: 8px;
    padding: 0;
  }
  .ul-form__control {
    padding: 0;
  }
  .ul-form__actions {
    padding-left: 0;
  }
}

<view class="ul-form">
    <form action="">
        <!-- 基础输入框 -->
        <view class="ul-form__item">
            <label class="ul-form__label">输入框</label>
            <view class="ul-form__control">
                <input type="text" class="ul-input" placeholder="请输入内容">
            </view>
        </view>
        <!-- 基础下拉框 -->
        <view class="ul-form__item">
            <label class="ul-form__label">下拉框</label>
            <view class="ul-form__control">
                <select class="ul-select">
                    <option>请选择城市</option>
                    <option>北京</option>
                    <option>上海</option>
                </select>
            </view>
        </view>
        <!-- 输入框和下拉框组合 -->
        <view class="ul-form__item">
            <label class="ul-form__label">输入框+下拉框</label>
            <view class="ul-form__control">
                <view class="ul-input-group">
                    <span class="ul-input-group__prepend">
                        <select class="ul-select">
                            <option>+86</option>
                            <option>+852</option>
                        </select>
                    </span>
                    <input type="text" class="ul-input" placeholder="请输入手机号">
                </view>
            </view>
        </view>
        <!-- 输入框和按钮组合 -->
        <view class="ul-form__item">
            <label class="ul-form__label">输入框+按钮</label>
            <view class="ul-form__control">
                <view class="ul-input-group">
                    <input type="text" class="ul-input" placeholder="请输入验证码">
                    <span class="ul-input-group__append"><button type="button" class="ul-btn">获取验证码</button></span>
                </view>
            </view>
        </view>
        <!-- 下拉框和按钮组合 -->
        <view class="ul-form__item">
            <label class="ul-form__label">下拉框+按钮</label>
            <view class="ul-form__control">
                <view class="ul-input-group">
                    <select class="ul-select">
                        <option>操作一</option>
                        <option>操作二</option>
                    </select>
                    <span class="ul-input-group__append"><button type="button" class="ul-btn ul-btn-primary">执行</button></span>
                </view>
            </view>
        </view>
        <!-- 单选框 -->
        <view class="ul-form__item">
            <label class="ul-form__label">单选框</label>
            <view class="ul-form__control">
                <label class="ul-radio">
                    <input type="radio" name="sex" checked>
                    <span class="ul-radio__indicator"></span>
                    <span class="ul-radio__label">男</span>
                </label>
                <label class="ul-radio">
                    <input type="radio" name="sex">
                    <span class="ul-radio__indicator"></span>
                    <span class="ul-radio__label">女</span>
                </label>
            </view>
        </view>
        <!-- 复选框 -->
        <view class="ul-form__item">
            <label class="ul-form__label">复选框</label>
            <view class="ul-form__control">
                <label class="ul-checkbox">
                    <input type="checkbox" name="hobby" checked>
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">写作</span>
                </label>
                <label class="ul-checkbox">
                    <input type="checkbox" name="hobby">
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">编码</span>
                </label>
            </view>
        </view>
        <!-- 文本域 -->
        <view class="ul-form__item">
            <label class="ul-form__label">文本域</label>
            <view class="ul-form__control"><textarea class="ul-textarea" placeholder="请输入更多内容"></textarea></view>
        </view>
        <!-- 复选框和输入框 -->
        <view class="ul-form__item">
            <label class="ul-form__label">复选框+输入框</label>
            <view class="ul-form__control">
                <label class="ul-checkbox">
                    <input type="checkbox" name="other">
                    <span class="ul-checkbox__indicator"></span>
                    <span class="ul-checkbox__label">其他</span>
                </label>
                <input type="text" class="ul-input" placeholder="请说明" style="margin-left: 10px; width: 200px;">
            </view>
        </view>
        <!-- 提交按钮 -->
        <view class="ul-form__item">
            <view class="ul-form__actions"><button type="button" class="ul-btn ul-btn-primary">立即提交</button> <button type="button" class="ul-btn">重置</button></view>
        </view>
    </form>
</view>

极简对称表单

预览效果

用户名

绑定手机

138****8888

账户余额

￥1024.00

收货地址

去设置

实名认证

未认证

我的订单

查看全部订单

性别

男女

城市

兴趣爱好

写作编码

HTML
SCSS
CSS
UniApp

<div class="ul-form-settings">
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">用户名</div>
        <div class="ul-form-settings__control">
            <input type="text" class="ul-input" placeholder="请输入用户名" value="奥宏科技">
        </div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">绑定手机</div>
        <div class="ul-form-settings__control">138****8888</div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">账户余额</div>
        <div class="ul-form-settings__control">￥1024.00</div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">收货地址</div>
        <div class="ul-form-settings__control">去设置</div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">实名认证</div>
        <div class="ul-form-settings__control">未认证</div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">我的订单</div>
        <div class="ul-form-settings__control">查看全部订单 </div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">性别</div>
        <div class="ul-form-settings__control">
            <label class="ul-radio">
                <input type="radio" name="sex" checked>
                <span class="ul-radio__indicator"></span>
                <span class="ul-radio__label">男</span>
            </label>
            <label class="ul-radio">
                <input type="radio" name="sex">
                <span class="ul-radio__indicator"></span>
                <span class="ul-radio__label">女</span>
            </label>
        </div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">城市</div>
        <div class="ul-form-settings__control">
            <select class="ul-select" style="width: auto;">
                <option>请选择</option>
                <option selected>广州</option>
                <option>深圳</option>
            </select>
        </div>
    </div>
    <div class="ul-form-settings__item">
        <div class="ul-form-settings__label">兴趣爱好 </div>
        <div class="ul-form-settings__control">
            <label class="ul-checkbox">
                <input type="checkbox" name="hobby" checked>
                <span class="ul-checkbox__indicator"></span>
                <span class="ul-checkbox__label">写作</span>
            </label>
            <label class="ul-checkbox">
                <input type="checkbox" name="hobby">
                <span class="ul-checkbox__indicator"></span>
                <span class="ul-checkbox__label">编码</span>
            </label>
        </div>
    </div>
</div>

.ul-form-settings {
    background-color: $color-white;
    border-radius: $radius-base;
    padding: 0 $space-lg;

    &__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $space-md 0;
        border-bottom: 1px solid $color-border;

        &:last-child {
            border-bottom: none;
        }
    }

    &__label {
        color: $color-text;
        flex-shrink: 0;
        margin-right: $space-lg;
    }

    &__control {
        flex: 1;
        min-width: 0;
        text-align: right;
        color: $color-text-secondary;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: $space-md;

        .ul-input {
            border: none;
            text-align: right;
            background-color: transparent;
        }

        // 确保复选框和单选框布局稳定
        .ul-checkbox,
        .ul-radio {
            margin-right: 0; // 移除默认右边距，使用 gap 控制间距
            flex-shrink: 0; // 防止压缩
        }
    }

    // 响应式设计
    @include media-breakpoint-down(sm) {
        padding: 0 $space-md;

        &__item {
            padding: $space-sm 0;
        }
    }
}

.ul-form-settings {
  background-color: var(--ul-color-white);
  border-radius: 4px;
  padding: 0 24px;
}
.ul-form-settings__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-form-settings__item:last-child {
  border-bottom: none;
}
.ul-form-settings__label {
  color: var(--ul-color-text);
  flex-shrink: 0;
  margin-right: 24px;
}
.ul-form-settings__control {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--ul-color-text-secondary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ul-form-settings__control .ul-input {
  border: none;
  text-align: right;
  background-color: transparent;
}
.ul-form-settings__control .ul-checkbox, .ul-form-settings__control .ul-radio {
  margin-right: 0;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .ul-form-settings {
    padding: 0 16px;
  }
  .ul-form-settings__item {
    padding: 8px 0;
  }
}

<view class="ul-form-settings">
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">用户名</view>
        <view class="ul-form-settings__control">
            <input type="text" class="ul-input" placeholder="请输入用户名" value="奥宏科技">
        </view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">绑定手机</view>
        <view class="ul-form-settings__control">138****8888</view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">账户余额</view>
        <view class="ul-form-settings__control">￥1024.00</view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">收货地址</view>
        <view class="ul-form-settings__control">去设置</view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">实名认证</view>
        <view class="ul-form-settings__control">未认证</view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">我的订单</view>
        <view class="ul-form-settings__control">查看全部订单 </view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">性别</view>
        <view class="ul-form-settings__control">
            <label class="ul-radio">
                <input type="radio" name="sex" checked>
                <span class="ul-radio__indicator"></span>
                <span class="ul-radio__label">男</span>
            </label>
            <label class="ul-radio">
                <input type="radio" name="sex">
                <span class="ul-radio__indicator"></span>
                <span class="ul-radio__label">女</span>
            </label>
        </view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">城市</view>
        <view class="ul-form-settings__control">
            <select class="ul-select" style="width: auto;">
                <option>请选择</option>
                <option selected>广州</option>
                <option>深圳</option>
            </select>
        </view>
    </view>
    <view class="ul-form-settings__item">
        <view class="ul-form-settings__label">兴趣爱好 </view>
        <view class="ul-form-settings__control">
            <label class="ul-checkbox">
                <input type="checkbox" name="hobby" checked>
                <span class="ul-checkbox__indicator"></span>
                <span class="ul-checkbox__label">写作</span>
            </label>
            <label class="ul-checkbox">
                <input type="checkbox" name="hobby">
                <span class="ul-checkbox__indicator"></span>
                <span class="ul-checkbox__label">编码</span>
            </label>
        </view>
    </view>
</view>

表格输入

预览效果

输入		选择框	复选框	写作阅读发呆
单选框	国产日韩欧洲美国俄罗斯
文本域

HTML
SCSS
CSS
UniApp

<div class="ul-form-table">
    <table class="ul-form-table__table">
        <tbody>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">输入</td>
                <td class="ul-form-table__control">
                    <input type="text" name="input-1" placeholder="请输入" class="ul-input">
                </td>
                <td class="ul-form-table__label">选择框</td>
                <td class="ul-form-table__control">
                    <select name="city" class="ul-select" required>
                        <option value="">请选择</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </td>
                <td class="ul-form-table__label">复选框</td>
                <td class="ul-form-table__control">
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[write]">
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">写作</span>
                    </label>
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[read]" checked>
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">阅读</span>
                    </label>
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[dai]">
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">发呆</span>
                    </label>
                </td>
            </tr>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">单选框</td>
                <td class="ul-form-table__control" colspan="5">
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">国产</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">日韩</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">欧洲</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">美国</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="女" checked>
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">俄罗斯</span>
                    </label>
                </td>
            </tr>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">文本域</td>
                <td class="ul-form-table__control" colspan="5"><textarea
                        name=""
                        class="ul-textarea"
                        rows="3"
                        placeholder="请输入内容"
                    ></textarea></td>
            </tr>
        </tbody>
    </table>
</div>

// 表格表单组件样式
// --------------------------------------------------

.ul-form-table {
  width: 100%;
  
  &__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    background-color: $color-white;
    border: 1px solid $color-border;
    border-radius: $radius-base;
    overflow: hidden;
  }

  &__row {
    border-bottom: 1px solid $color-border;
    
    &:last-child {
      border-bottom: none;
    }
  }

  &__label {
    padding: $space-md $space-sm;
    background-color: $color-bg;
    color: $color-text-secondary;
    font-weight: $font-weight-medium;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid $color-border;
    width: 80px;
  }

  &__control {
    padding: $space-sm $space-md;
    text-align: left;
    
    .ul-input,
    .ul-textarea,
    .ul-select {
      width: 100%;
      margin: 0;
    }
    
    .ul-checkbox,
    .ul-radio {
      margin-right: $space-lg;
      margin-bottom: $space-sm;
      vertical-align: middle; // 确保垂直对齐
      
      &:last-child {
        margin-right: 0;
      }
    }
  }

  // 响应式设计
  @include media-breakpoint-down(md) {
    &__table {
      border: none;
      border-radius: 0;
    }
    
    &__row {
      display: block;
      border-bottom: 1px solid $color-border;
      padding: $space-md 0;
    }
    
    &__label {
      display: block;
      width: 100%;
      text-align: left;
      border-right: none;
      border-bottom: 1px solid $color-border;
      margin-bottom: $space-sm;
      padding: $space-sm;
    }
    
    &__control {
      display: block;
      padding: $space-sm;
      
      .ul-checkbox,
      .ul-radio {
        display: block;
        margin-right: 0;
        margin-bottom: $space-sm;
      }
    }
  }
}

.ul-form-table {
  width: 100%;
}
.ul-form-table__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  background-color: var(--ul-color-white);
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  overflow: hidden;
}
.ul-form-table__row {
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-form-table__row:last-child {
  border-bottom: none;
}
.ul-form-table__label {
  padding: 16px 8px;
  background-color: var(--ul-color-bg);
  color: var(--ul-color-text-secondary);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid var(--ul-color-border);
  width: 80px;
}
.ul-form-table__control {
  padding: 8px 16px;
  text-align: left;
}
.ul-form-table__control .ul-input, .ul-form-table__control .ul-textarea, .ul-form-table__control .ul-select {
  width: 100%;
  margin: 0;
}
.ul-form-table__control .ul-checkbox, .ul-form-table__control .ul-radio {
  margin-right: 24px;
  margin-bottom: 8px;
  vertical-align: middle;
}
.ul-form-table__control .ul-checkbox:last-child, .ul-form-table__control .ul-radio:last-child {
  margin-right: 0;
}
@media (max-width: 767.98px) {
  .ul-form-table__table {
    border: none;
    border-radius: 0;
  }
  .ul-form-table__row {
    display: block;
    border-bottom: 1px solid var(--ul-color-border);
    padding: 16px 0;
  }
  .ul-form-table__label {
    display: block;
    width: 100%;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--ul-color-border);
    margin-bottom: 8px;
    padding: 8px;
  }
  .ul-form-table__control {
    display: block;
    padding: 8px;
  }
  .ul-form-table__control .ul-checkbox, .ul-form-table__control .ul-radio {
    display: block;
    margin-right: 0;
    margin-bottom: 8px;
  }
}

<view class="ul-form-table">
    <table class="ul-form-table__table">
        <tbody>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">输入</td>
                <td class="ul-form-table__control">
                    <input type="text" name="input-1" placeholder="请输入" class="ul-input">
                </td>
                <td class="ul-form-table__label">选择框</td>
                <td class="ul-form-table__control">
                    <select name="city" class="ul-select" required>
                        <option value="">请选择</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </td>
                <td class="ul-form-table__label">复选框</td>
                <td class="ul-form-table__control">
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[write]">
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">写作</span>
                    </label>
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[read]" checked>
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">阅读</span>
                    </label>
                    <label class="ul-checkbox">
                        <input type="checkbox" name="like[dai]">
                        <span class="ul-checkbox__indicator"></span>
                        <span class="ul-checkbox__label">发呆</span>
                    </label>
                </td>
            </tr>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">单选框</td>
                <td class="ul-form-table__control" colspan="5">
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">国产</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">日韩</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">欧洲</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="男">
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">美国</span>
                    </label>
                    <label class="ul-radio">
                        <input type="radio" name="sex" value="女" checked>
                        <span class="ul-radio__indicator"></span>
                        <span class="ul-radio__label">俄罗斯</span>
                    </label>
                </td>
            </tr>
            <tr class="ul-form-table__row">
                <td class="ul-form-table__label">文本域</td>
                <td class="ul-form-table__control" colspan="5"><textarea
                        name=""
                        class="ul-textarea"
                        rows="3"
                        placeholder="请输入内容"
                    ></textarea></td>
            </tr>
        </tbody>
    </table>
</view>

Github

Star Watch Fork

回到顶部