b2894lxlx/tuanwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(gxmu): 六张申报表输入框边框改画在外层 view，修复小程序端边框不显示

Browse Source 
:deep(.field-input.uv-input) 在小程序里穿透不到 uv-input 宿主节点，边框完全丢失。改为包一层页面级 field-input-wrap 承载边框，并统一 picker/textarea 边框为 1px。#qmgc #未来学术之星 #挑战杯 #通用申报表
This commit is contained in:
weicw
2026-11-02 14:20:27 +08:00
parent a28a9ed86c
commit c2fba0ffd1
6 changed files with 96 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/gxmu/qmgc.vue
+17 -14
View File
@@ -32,8 +32,8 @@
<scroll-view scroll-y class="modal-body">
<view class="form-section">
<view class="form-section-title">登记表</view>
<view class="field-item"><view class="field-label">年份</view><uv-input class="field-input" :modelValue="current.year" border="none" @input="setField('year', $event)" /></view>
<view class="field-item"><view class="field-label">姓名</view><uv-input class="field-input" :modelValue="current.name" border="none" @input="setField('name', $event)" /></view>
<view class="field-item"><view class="field-label">年份</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.year" border="none" @input="setField('year', $event)" /></view></view>
<view class="field-item"><view class="field-label">姓名</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.name" border="none" @input="setField('name', $event)" /></view></view>
<view class="field-item">
<view class="field-label">性别</view>
<view class="field-picker" @tap="openGenderPicker">
@@ -60,21 +60,21 @@
{{ current.politics || (politicsOptions.length ? '请选择政治面貌' : '政治面貌加载中') }}
</view>
</view>
<view class="field-item"><view class="field-label">籍贯</view><uv-input class="field-input" :modelValue="current.nativePlace" border="none" @input="setField('nativePlace', $event)" /></view>
<view class="field-item"><view class="field-label">手机号码</view><uv-input class="field-input" :modelValue="current.phone" border="none" @input="setField('phone', $event)" /></view>
<view class="field-item"><view class="field-label">微信号</view><uv-input class="field-input" :modelValue="current.wechat" border="none" @input="setField('wechat', $event)" /></view>
<view class="field-item"><view class="field-label">电子邮箱</view><uv-input class="field-input" :modelValue="current.email" border="none" @input="setField('email', $event)" /></view>
<view class="field-item"><view class="field-label">QQ号</view><uv-input class="field-input" :modelValue="current.qq" border="none" @input="setField('qq', $event)" /></view>
<view class="field-item"><view class="field-label">身份证号</view><uv-input class="field-input" :modelValue="current.idCardNo" border="none" @input="setField('idCardNo', $event)" /></view>
<view class="field-item"><view class="field-label">爱好特长</view><uv-input class="field-input" :modelValue="current.hobby" border="none" @input="setField('hobby', $event)" /></view>
<view class="field-item"><view class="field-label">籍贯</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.nativePlace" border="none" @input="setField('nativePlace', $event)" /></view></view>
<view class="field-item"><view class="field-label">手机号码</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.phone" border="none" @input="setField('phone', $event)" /></view></view>
<view class="field-item"><view class="field-label">微信号</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.wechat" border="none" @input="setField('wechat', $event)" /></view></view>
<view class="field-item"><view class="field-label">电子邮箱</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.email" border="none" @input="setField('email', $event)" /></view></view>
<view class="field-item"><view class="field-label">QQ号</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.qq" border="none" @input="setField('qq', $event)" /></view></view>
<view class="field-item"><view class="field-label">身份证号</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.idCardNo" border="none" @input="setField('idCardNo', $event)" /></view></view>
<view class="field-item"><view class="field-label">爱好特长</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.hobby" border="none" @input="setField('hobby', $event)" /></view></view>
<view class="field-item">
<view class="field-label">是否有志到广西基层工作</view>
<view class="field-picker" @tap="openWillingPicker">
{{ current.willingToWorkInGuangxi || '请选择' }}
</view>
</view>
<view class="field-item"><view class="field-label">学校、院系、年级、专业</view><uv-input class="field-input" :modelValue="current.schoolInfo" border="none" @input="setField('schoolInfo', $event)" /></view>
<view class="field-item"><view class="field-label">担任团学职务情况</view><uv-input class="field-input" :modelValue="current.leaguePosition" border="none" @input="setField('leaguePosition', $event)" /></view>
<view class="field-item"><view class="field-label">学校、院系、年级、专业</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.schoolInfo" border="none" @input="setField('schoolInfo', $event)" /></view></view>
<view class="field-item"><view class="field-label">担任团学职务情况</view><view class="field-input-wrap"><uv-input class="field-input" :modelValue="current.leaguePosition" border="none" @input="setField('leaguePosition', $event)" /></view></view>
<view class="field-item"><view class="field-label">个人简历</view><textarea class="field-textarea" :value="current.resume" @input="setField('resume', $event)" /></view>
<view class="field-item"><view class="field-label">奖惩情况</view><textarea class="field-textarea" :value="current.awards" @input="setField('awards', $event)" /></view>
<view class="field-item"><view class="field-label">综合成绩情况</view><textarea class="field-textarea" :value="current.academicPerformance" @input="setField('academicPerformance', $event)" /></view>
@@ -419,10 +419,13 @@
.form-section-title { font-size: 28rpx; font-weight: 700; color: #1f2329; margin-bottom: 16rpx; }
.field-item + .field-item { margin-top: 16rpx; }
.field-label { margin-bottom: 10rpx; font-size: 24rpx; color: #5f6b7a; }
.field-picker { width: 100%; box-sizing: border-box; min-height: 84rpx; padding: 20rpx; border-radius: 20rpx; border: 1rpx solid rgba(220,220,220,1); background: #F4FCFF; font-size: 24rpx; color: #1f2329; }
.field-picker { width: 100%; box-sizing: border-box; min-height: 88rpx; padding: 20rpx; border-radius: 20rpx; border: 1px solid #c9d4e1; background: #F4FCFF; font-size: 24rpx; color: #1f2329; }
.field-picker--disabled { color: #a8b3bf; background: #f7f9fb; }
.field-textarea { width: 100%; box-sizing: border-box; border-radius: 20rpx; border: 1rpx solid #dce4ec; background: #fff; padding: 20rpx; font-size: 24rpx; color: #1f2329; }
: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; }
/* 边框画在外层 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; }
:deep(.field-input.uv-input) { width: 100%; border: none !important; background: transparent !important; padding: 0 !important; }
:deep(.field-input.uv-input .uv-input__content) { padding: 0 !important; }
:deep(.field-input.uv-input .uv-input__content__field-wrapper__field) { font-size: 24rpx; color: #1f2329; min-height: 40rpx; }
.field-textarea { min-height: 180rpx; }
.modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rpx; padding: 24rpx; border-top: 1rpx solid #eef1f4; }