fix: 新增页面,样式统一修复。
This commit is contained in:
@@ -9,47 +9,47 @@
|
||||
<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"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
|
||||
<u-form-item label="字典类型">
|
||||
<u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u--input v-model="form.dictType" readonly disabledColor="#ffffff" placeholder="字典类型"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="数据标签" prop="dictLabel" required>
|
||||
<u--input v-model="form.dictLabel" placeholder="请输入数据标签"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="数据键值" prop="dictValue" required>
|
||||
<u--input v-model="form.dictValue" placeholder="请输入数据键值"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="显示排序" prop="dictSort" required>
|
||||
<u--input v-model="form.dictSort" type="number" placeholder="请输入显示排序"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
|
||||
<u--input v-model="listClassName" 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="listClassName" readonly 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" readonly disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="left" count
|
||||
maxlength="500" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
@@ -86,6 +86,15 @@ const showStatusPicker = ref(false)
|
||||
const showListClassPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
const listClassName = ref('')
|
||||
const inputBaseStyle = {
|
||||
background: '#ffffff',
|
||||
border: '2rpx solid #dcdfe6',
|
||||
borderRadius: '8rpx',
|
||||
padding: '0 24rpx',
|
||||
height: '68rpx',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box'
|
||||
}
|
||||
|
||||
const form = reactive({
|
||||
dictCode: undefined,
|
||||
@@ -232,6 +241,22 @@ function submit() {
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user