fix: 功能优化完善。

This commit is contained in:
tianyongbao
2026-02-07 13:18:34 +08:00
parent 3a35c8a6f6
commit 72aad5cf31
12 changed files with 509 additions and 164 deletions

Binary file not shown.

View File

@@ -62,7 +62,7 @@
<!-- 版权信息 -->
<view class="copyright">
<text>Copyright © 2025 qdintc All Rights Reserved.</text>
<text>Copyright © 2026 qdintc All Rights Reserved.</text>
</view>
</view>
</template>

View File

@@ -51,7 +51,7 @@
</view>
<view class="footer-section">
<text class="copyright-text">Copyright © 2026 All Rights Reserved.</text>
<text class="copyright-text">Copyright © 2026 qdintc All Rights Reserved.</text>
</view>
<u-toast ref="uToast"></u-toast>
@@ -133,16 +133,14 @@ uni.navigateTo({ url: `/pages/login` })
<style lang="scss" scoped>
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100%;
height: auto;
height: 100%;
}
.register-container {
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
flex-direction: column;
position: relative;

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="参数名称" prop="configName" required>
<u--input v-model="form.configName" placeholder="请输入参数名称"
@@ -21,10 +21,10 @@
</u-form-item>
<u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择系统内置"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -74,7 +74,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -83,7 +86,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -225,17 +231,19 @@ function submit() {
}
}
.select-input-wrapper {
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
</style>
@@ -254,4 +262,29 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,13 +3,13 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="上级部门" prop="parentName" @click="showDeptPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级部门"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -38,10 +38,10 @@
</u-form-item>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
</u--form>
@@ -93,7 +93,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -102,7 +105,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -318,17 +324,19 @@ function submit() {
}
}
.select-input-wrapper {
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
</style>
@@ -347,4 +355,29 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="字典名称" prop="dictName" required>
<u--input v-model="form.dictName" placeholder="请输入字典名称"
@@ -54,7 +54,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -63,7 +66,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -206,4 +212,27 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="字典类型">
<u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
@@ -26,10 +26,10 @@
</u-form-item>
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -87,7 +87,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -96,7 +99,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -233,17 +239,19 @@ function submit() {
}
}
.select-input-wrapper {
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
</style>
@@ -262,4 +270,27 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,28 +3,28 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="上级菜单" prop="parentName" @click="showParentPicker = true">
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级菜单"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级菜单"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="菜单类型" prop="menuTypeName" @click="showMenuTypePicker = true">
<u--input v-model="menuTypeName" disabled disabledColor="#ffffff" placeholder="请选择菜单类型"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="menuTypeName" disabled disabledColor="#ffffff" placeholder="请选择菜单类型"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="菜单名称" prop="menuName" required>
<u--input v-model="form.menuName" placeholder="请输入菜单名称" maxlength="50"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('menuName')"></u--input>
</u-form-item>
<u-form-item label="显示排序">
@@ -33,49 +33,49 @@
<u-form-item label="路由地址" v-if="form.menuType !== 'F'">
<u--input v-model="form.path" placeholder="请输入路由地址" maxlength="200"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('path')"></u--input>
</u-form-item>
<u-form-item label="组件路径" v-if="form.menuType === 'C'">
<u--input v-model="form.component" placeholder="请输入组件路径" maxlength="255"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('component')"></u--input>
</u-form-item>
<u-form-item label="权限标识" v-if="form.menuType !== 'M'">
<u--input v-model="form.perms" placeholder="请输入权限标识" maxlength="100"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('perms')"></u--input>
</u-form-item>
<u-form-item label="是否外链" v-if="form.menuType !== 'F'" @click="showFramePicker = true">
<u--input v-model="frameName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="frameName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="是否缓存" v-if="form.menuType === 'C'" @click="showCachePicker = true">
<u--input v-model="cacheName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="cacheName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="显示状态" v-if="form.menuType !== 'F'" @click="showVisiblePicker = true">
<u--input v-model="visibleName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="visibleName" disabled disabledColor="#ffffff" placeholder="请选择"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="菜单状态" prop="statusName" @click="showStatusPicker = true">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
</u--form>
@@ -175,7 +175,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -184,7 +187,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -428,6 +434,22 @@ function submit() {
.form-btn {
padding-top: 16rpx;
}
.input-with-arrow {
position: relative;
width: 100%;
.arrow-icon {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
}
}
@@ -460,4 +482,27 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,63 +3,75 @@
<view class="section">
<view class="section-title">公告信息</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" ref="uForm">
<u-form-item label="公告标题" prop="noticeTitle" borderBottom required>
<u--input v-model="form.noticeTitle" placeholder="请输入公告标题" border="none"></u--input>
<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="公告标题" prop="noticeTitle" required>
<u--input v-model="form.noticeTitle" placeholder="请输入公告标题"
inputAlign="left" :customStyle="getInputStyle('noticeTitle')"></u--input>
</u-form-item>
<u-form-item label="公告类型" prop="noticeType" borderBottom required>
<u-form-item label="公告类型" prop="noticeType" required>
<u-radio-group v-model="form.noticeType" placement="row">
<u-radio v-for="item in noticeTypeList" :key="item.dictValue" :name="item.dictValue" :label="item.dictLabel">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="状态" prop="status" borderBottom>
<u-form-item label="状态" prop="status">
<u-radio-group v-model="form.status" placement="row">
<u-radio v-for="item in statusList" :key="item.dictValue" :name="item.dictValue" :label="item.dictLabel">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="内容" prop="noticeContent" labelPosition="top">
<view class="editor-container">
<view class="editor-toolbar">
<view class="toolbar-item" @click="format('bold')">
<text class="iconfont">B</text>
</view>
<view class="toolbar-item" @click="format('italic')">
<text class="iconfont italic">I</text>
</view>
<view class="toolbar-item" @click="format('underline')">
<text class="iconfont underline">U</text>
</view>
<view class="toolbar-divider"></view>
<view class="toolbar-item" @click="insertImage">
<uni-icons type="image" size="16" color="#333333"></uni-icons>
</view>
<view class="toolbar-divider"></view>
<view class="toolbar-item" @click="undo">
<text class="iconfont"></text>
</view>
<view class="toolbar-item" @click="redo">
<text class="iconfont"></text>
</view>
</u--form>
<!-- 富文本编辑器独立布局 -->
<view class="editor-field">
<view class="editor-label">
<text class="required-star">*</text>
<text>内容</text>
</view>
<view class="editor-container">
<view class="editor-toolbar">
<view class="toolbar-item" @click="format('bold')">
<text class="iconfont">B</text>
</view>
<editor
id="editor"
class="editor-content"
:placeholder="'请输入公告内容'"
@ready="onEditorReady"
@input="onEditorInput"
@focus="editorFocus"
@blur="editorBlur"
:show-img-size="true"
:show-img-toolbar="true"
:show-img-resize="true"
></editor>
<view class="editor-counter">
<text>{{ contentLength }}/20000</text>
<view class="toolbar-item" @click="format('italic')">
<text class="iconfont italic">I</text>
</view>
<view class="toolbar-item" @click="format('underline')">
<text class="iconfont underline">U</text>
</view>
<view class="toolbar-divider"></view>
<view class="toolbar-item" @click="insertImage">
<uni-icons type="image" size="16" color="#333333"></uni-icons>
</view>
<view class="toolbar-divider"></view>
<view class="toolbar-item" @click="undo">
<text class="iconfont"></text>
</view>
<view class="toolbar-item" @click="redo">
<text class="iconfont"></text>
</view>
</view>
</u-form-item>
<editor
id="editor"
class="editor-content"
:placeholder="'请输入公告内容'"
@ready="onEditorReady"
@input="onEditorInput"
@focus="editorFocus"
@blur="editorBlur"
:show-img-size="true"
:show-img-toolbar="true"
:show-img-resize="true"
></editor>
<view class="editor-counter">
<text>{{ contentLength }}/20000</text>
</view>
</view>
</view>
<u--form labelPosition="left" :model="form" ref="uFormHidden" style="display: none;">
<u-form-item label="" prop="noticeContent"></u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="保存" @click="submitForm"></u-button>
@@ -101,7 +113,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -110,7 +125,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -454,6 +472,34 @@ function doSubmit() {
.form-btn {
padding-top: 16rpx;
}
/* 确保表单项正常布局 */
.u-form-item {
display: flex;
align-items: center;
&[labelPosition="top"] {
display: block;
}
}
/* 富文本编辑器独立字段 */
.editor-field {
margin-top: 24rpx;
.editor-label {
color: #333333;
font-size: 30rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
.required-star {
color: #f56c6c;
margin-right: 4rpx;
}
}
}
}
}
@@ -574,4 +620,27 @@ function doSubmit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="岗位名称" prop="postName" required>
<u--input v-model="form.postName" placeholder="请输入岗位名称" maxlength="30"
@@ -20,10 +20,10 @@
</u-form-item>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -73,7 +73,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -82,7 +85,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -210,17 +216,19 @@ function submit() {
}
}
.select-input-wrapper {
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
</style>
@@ -239,4 +247,29 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="角色名称" prop="roleName" required>
@@ -21,10 +21,10 @@
</u-form-item>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -34,10 +34,10 @@
</u-form-item>
<u-form-item label="菜单权限" @click="openMenuPicker">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input :value="menuPermissionText" disabled disabledColor="#ffffff" placeholder="请选择菜单权限"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -158,7 +158,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -167,7 +170,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -531,17 +537,19 @@ function submit() {
}
}
.select-input-wrapper {
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
</style>
@@ -560,4 +568,29 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

View File

@@ -3,7 +3,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="160rpx"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="用户昵称" prop="nickName" required>
<u--input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"
@@ -31,26 +31,26 @@
</u-form-item>
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="归属部门" prop="deptName" @click="showDeptPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="deptName" disabled disabledColor="#ffffff" placeholder="请选择归属部门"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
<u-form-item label="岗位" prop="postNames" @click="openPostPicker">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -65,10 +65,10 @@
</view>
<u-form-item label="角色" prop="roleNames" @click="openRolePicker">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -83,10 +83,10 @@
</view>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="select-input-wrapper">
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -118,7 +118,7 @@
<u-checkbox-group v-model="tempPostIds">
<view v-for="item in postList[0]" :key="item.postId" class="checkbox-item">
<u-checkbox :name="item.postId" :label="item.postName" shape="square"
activeColor="#667eea" labelSize="28rpx"></u-checkbox>
activeColor="#667eea" labelSize="30rpx" iconSize="36rpx"></u-checkbox>
</view>
</u-checkbox-group>
</scroll-view>
@@ -140,7 +140,7 @@
<u-checkbox-group v-model="tempRoleIds">
<view v-for="item in roleList[0]" :key="item.roleId" class="checkbox-item">
<u-checkbox :name="item.roleId" :label="item.roleName" shape="square"
activeColor="#667eea" labelSize="28rpx"></u-checkbox>
activeColor="#667eea" labelSize="30rpx" iconSize="36rpx"></u-checkbox>
</view>
</u-checkbox-group>
</scroll-view>
@@ -214,7 +214,10 @@ const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
@@ -223,7 +226,10 @@ const inputErrorStyle = {
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
@@ -539,18 +545,20 @@ function submit() {
padding-top: 16rpx;
}
// 下拉选择输入框容器
.select-input-wrapper {
// 带箭头的输入框容器
.input-with-arrow {
position: relative;
width: 100%;
.select-arrow {
.arrow-icon {
position: absolute;
right: 24rpx;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
@@ -612,11 +620,19 @@ function submit() {
.popup-content {
flex: 1;
max-height: 60vh;
padding: 24rpx;
padding: 16rpx 24rpx 24rpx;
.checkbox-item {
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
padding: 20rpx 24rpx;
margin-bottom: 12rpx;
background: #f8f9fa;
border-radius: 12rpx;
border: 2rpx solid transparent;
transition: all 0.3s;
&:active {
background: #f0f2f5;
}
}
}
@@ -702,4 +718,29 @@ function submit() {
border: 2rpx solid #f56c6c !important;
background: #fef0f0 !important;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>