fix(gxmu): 六张申报表输入框边框改画在外层 view，修复小程序端边框不显示
:deep(.field-input.uv-input) 在小程序里穿透不到 uv-input 宿主节点，边框完全丢失。改为包一层页面级 field-input-wrap 承载边框，并统一 picker/textarea 边框为 1px。#qmgc #未来学术之星 #挑战杯 #通用申报表
This commit is contained in:
+25
-23
@@ -51,21 +51,21 @@
|
||||
<view v-if="activeTab === 'base'" class="form-section">
|
||||
<view class="field-item">
|
||||
<view class="field-label">年份</view>
|
||||
<uv-input class="field-input field-input--readonly" :modelValue="current.year" border="none" readonly placeholder="当前申报年份" />
|
||||
<view class="field-input-wrap field-input-wrap--readonly"><uv-input class="field-input field-input--readonly" :modelValue="current.year" border="none" readonly placeholder="当前申报年份" /></view>
|
||||
</view>
|
||||
<view class="field-grid field-grid--2">
|
||||
<view class="field-item">
|
||||
<view class="field-label">所在省（区、市）</view>
|
||||
<uv-input class="field-input" :modelValue="current.provinceCity" border="none" @input="setField('provinceCity', $event)" placeholder="请输入所在省/市" />
|
||||
<view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.provinceCity" border="none" @input="setField('provinceCity', $event)" placeholder="请输入所在省/市" /></view>
|
||||
</view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">学校名称（全称）</view>
|
||||
<uv-input class="field-input" :modelValue="current.schoolName" border="none" @input="setField('schoolName', $event)" placeholder="请输入学校名称" />
|
||||
<view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.schoolName" border="none" @input="setField('schoolName', $event)" placeholder="请输入学校名称" /></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">项目名称</view>
|
||||
<uv-input class="field-input" :modelValue="current.projectName" border="none" @input="setField('projectName', $event)" placeholder="请输入项目名称" />
|
||||
<view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.projectName" border="none" @input="setField('projectName', $event)" placeholder="请输入项目名称" /></view>
|
||||
</view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">项目类型</view>
|
||||
@@ -98,12 +98,12 @@
|
||||
<view class="group-remove" @tap="removeTeamMember(index)">删除</view>
|
||||
</view>
|
||||
<view class="field-grid field-grid--2">
|
||||
<view class="field-item"><view class="field-label">姓名</view><uv-input class="field-input" :modelValue="item.name" border="none" @input="setTeamMemberField(index, 'name', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">性别</view><uv-input class="field-input" :modelValue="item.gender" border="none" @input="setTeamMemberField(index, 'gender', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">学院</view><uv-input class="field-input" :modelValue="item.college" border="none" @input="setTeamMemberField(index, 'college', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">年级、专业</view><uv-input class="field-input" :modelValue="item.gradeMajor" border="none" @input="setTeamMemberField(index, 'gradeMajor', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">手机</view><uv-input class="field-input" :modelValue="item.phone" border="none" @input="setTeamMemberField(index, 'phone', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">备注</view><uv-input class="field-input" :modelValue="item.remark" border="none" @input="setTeamMemberField(index, 'remark', $event)" placeholder="负责人及学历等备注" /></view>
|
||||
<view class="field-item"><view class="field-label">姓名</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.name" border="none" @input="setTeamMemberField(index, 'name', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">性别</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.gender" border="none" @input="setTeamMemberField(index, 'gender', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">学院</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.college" border="none" @input="setTeamMemberField(index, 'college', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">年级、专业</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.gradeMajor" border="none" @input="setTeamMemberField(index, 'gradeMajor', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">手机</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.phone" border="none" @input="setTeamMemberField(index, 'phone', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">备注</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.remark" border="none" @input="setTeamMemberField(index, 'remark', $event)" placeholder="负责人及学历等备注" /></view></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -118,12 +118,12 @@
|
||||
<view class="group-remove" @tap="removeAdvisor(index)">删除</view>
|
||||
</view>
|
||||
<view class="field-grid field-grid--2">
|
||||
<view class="field-item"><view class="field-label">姓名</view><uv-input class="field-input" :modelValue="item.name" border="none" @input="setAdvisorField(index, 'name', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">性别</view><uv-input class="field-input" :modelValue="item.gender" border="none" @input="setAdvisorField(index, 'gender', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">学院</view><uv-input class="field-input" :modelValue="item.college" border="none" @input="setAdvisorField(index, 'college', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">职称</view><uv-input class="field-input" :modelValue="item.title" border="none" @input="setAdvisorField(index, 'title', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">职务</view><uv-input class="field-input" :modelValue="item.duty" border="none" @input="setAdvisorField(index, 'duty', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">手机</view><uv-input class="field-input" :modelValue="item.phone" border="none" @input="setAdvisorField(index, 'phone', $event)" /></view>
|
||||
<view class="field-item"><view class="field-label">姓名</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.name" border="none" @input="setAdvisorField(index, 'name', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">性别</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.gender" border="none" @input="setAdvisorField(index, 'gender', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">学院</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.college" border="none" @input="setAdvisorField(index, 'college', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">职称</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.title" border="none" @input="setAdvisorField(index, 'title', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">职务</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.duty" border="none" @input="setAdvisorField(index, 'duty', $event)" /></view></view>
|
||||
<view class="field-item"><view class="field-label">手机</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="item.phone" border="none" @input="setAdvisorField(index, 'phone', $event)" /></view></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -146,11 +146,11 @@
|
||||
<view v-else class="form-section">
|
||||
<view class="field-item">
|
||||
<view class="field-label">项目名称</view>
|
||||
<uv-input class="field-input" :modelValue="current.projectName" border="none" @input="setField('projectName', $event)" placeholder="请输入项目名称" />
|
||||
<view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.projectName" border="none" @input="setField('projectName', $event)" placeholder="请输入项目名称" /></view>
|
||||
</view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">参赛学校</view>
|
||||
<uv-input class="field-input" :modelValue="current.schoolName" border="none" @input="setField('schoolName', $event)" placeholder="请输入参赛学校" />
|
||||
<view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.schoolName" border="none" @input="setField('schoolName', $event)" placeholder="请输入参赛学校" /></view>
|
||||
</view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">项目类型</view>
|
||||
@@ -183,7 +183,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field-item"><view class="field-label">我们的口号</view><uv-input class="field-input" :modelValue="current.teamSlogan" border="none" @input="setField('teamSlogan', $event)" placeholder="20字以内" /></view>
|
||||
<view class="field-item"><view class="field-label">我们的口号</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.teamSlogan" border="none" @input="setField('teamSlogan', $event)" placeholder="20字以内" /></view></view>
|
||||
<view class="field-item">
|
||||
<view class="field-label">我们的实践日志（选填）</view>
|
||||
<view class="upload-card">
|
||||
@@ -764,12 +764,14 @@ export default {
|
||||
.field-item + .field-item { margin-top: 16rpx; }
|
||||
.field-label { margin-bottom: 10rpx; font-size: 24rpx; color: #5f6b7a; }
|
||||
.field-note { margin-top: 6rpx; font-size: 20rpx; line-height: 1.6; color: #98a2b3; }
|
||||
.field-textarea { width: 100%; box-sizing: border-box; border-radius: 20rpx; border: 1rpx solid #dce4ec; background: #fff; padding: 20rpx; font-size: 24rpx; color: #1f2329; min-height: 180rpx; }
|
||||
:deep(.field-input.uv-input) { width: 100%; box-sizing: border-box; border-radius: 20rpx; border: 1rpx solid #dce4ec !important; background: #fff !important; padding: 20rpx !important; }
|
||||
.field-textarea { width: 100%; box-sizing: border-box; border-radius: 20rpx; border: 1px solid #c9d4e1; background: #fff; padding: 20rpx; font-size: 24rpx; color: #1f2329; min-height: 180rpx; }
|
||||
/* 边框画在外层 view 上：小程序里 :deep 穿透不到 uv-input 宿主节点，边框会不显示 */
|
||||
.field-input-wrap { width: 100%; box-sizing: border-box; display: flex; align-items: center; min-height: 88rpx; padding: 0 20rpx; border-radius: 20rpx; border: 1px solid #c9d4e1; background: #fff; }
|
||||
.field-input-wrap--readonly { background: #f8fafc; }
|
||||
:deep(.field-input.uv-input) { width: 100%; border: none !important; background: transparent !important; padding: 0 !important; }
|
||||
:deep(.field-input.uv-input .uv-input__content__field-wrapper__field) { font-size: 24rpx; color: #1f2329; min-height: 40rpx; }
|
||||
:deep(.field-input--readonly.uv-input) { background: #f8fafc !important; }
|
||||
:deep(.field-input--readonly.uv-input .uv-input__content__field-wrapper__field) { color: #667085; }
|
||||
.field-picker { width: 100%; box-sizing: border-box; padding: 20rpx; border-radius: 20rpx; border: 1rpx solid rgba(220,220,220,1); background: #F4FCFF; font-size: 24rpx; }
|
||||
.field-picker { width: 100%; box-sizing: border-box; padding: 20rpx; border-radius: 20rpx; border: 1px solid #c9d4e1; background: #F4FCFF; font-size: 24rpx; }
|
||||
.field-placeholder { color: #98a2b3; }
|
||||
.field-value { color: #1f2329; }
|
||||
.upload-card { padding: 20rpx; border-radius: 20rpx; border: 1rpx solid #dce4ec; background: #fff; }
|
||||
|
||||
Reference in New Issue
Block a user