diff --git a/src/App.vue b/src/App.vue index e09f6e8..d3b01ff 100644 --- a/src/App.vue +++ b/src/App.vue @@ -33,13 +33,5 @@ @import "uview-plus/index.scss"; @import '@/static/scss/index.scss'; -/* 修复 uView u-input 在 disabled/readonly/select 状态(渲染为 u-input--selectlike)时 - 只能点右侧图标、无法整行点击的问题: - 框架仅把 u-input 内部元素设为 pointer-events:none,但根节点 .u-input 仍拦截点击, - 导致点击无法穿透到父级 u-form-item 触发其 @click 选择事件。 - 这里让整个 selectlike 态 u-input 都不接收指针事件,使点击穿透到 u-form-item, - 从而实现整行点击均可弹出下拉/选择。全局生效,无需逐页面修改。 */ -.u-input--selectlike { - pointer-events: none !important; -} + \ No newline at end of file diff --git a/src/pages/work/accounts/accountDealRecord/addEdit.vue b/src/pages/work/accounts/accountDealRecord/addEdit.vue index 927609d..b4608b9 100644 --- a/src/pages/work/accounts/accountDealRecord/addEdit.vue +++ b/src/pages/work/accounts/accountDealRecord/addEdit.vue @@ -9,51 +9,66 @@ {{ title}} - + - - + + + + - - - + + + + + - - + + + + - - - - - - + + + + - + + + + + + + + inputAlign="left" :customStyle="inputBaseStyle"> - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> {{ form.locationName }} 经纬度:{{ form.longitude }},{{ form.latitude }} @@ -63,9 +78,9 @@ - - + + @@ -129,6 +144,16 @@ const locationLoading = ref(false) // 临时变量,仅用于前端筛选,不保存到数据库 const tempDebitType = ref(null) const tempDebitTypeName = ref(null) +// 统一输入框样式(参考 health-weixin 分支) +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} const data = reactive({ form: { id: null, @@ -713,6 +738,23 @@ onLoad((option) => { .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; + } + } + .location-field { width: 100%; display: flex; diff --git a/src/pages/work/accounts/creditTransferRecord/addEdit.vue b/src/pages/work/accounts/creditTransferRecord/addEdit.vue index 630269f..54273ca 100644 --- a/src/pages/work/accounts/creditTransferRecord/addEdit.vue +++ b/src/pages/work/accounts/creditTransferRecord/addEdit.vue @@ -11,34 +11,42 @@ {{ title}} - + - - + + + + - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> - - + + + + - + @@ -114,6 +122,16 @@ const title = ref("信用卡还款") const bankCardLendList = ref([]) const debitCardList = ref([]) const dealTypeList = ref([]) +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} + const data = reactive({ form: { id: null, @@ -335,7 +353,23 @@ function handleCreditCard() { .form-view { padding: 24rpx; - .form-btn { + .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; } } diff --git a/src/pages/work/accounts/debitTransferRecord/addEdit.vue b/src/pages/work/accounts/debitTransferRecord/addEdit.vue index 967ee87..7c27daa 100644 --- a/src/pages/work/accounts/debitTransferRecord/addEdit.vue +++ b/src/pages/work/accounts/debitTransferRecord/addEdit.vue @@ -9,29 +9,35 @@ {{ title }} - + - - + + + + - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> - + @@ -92,6 +98,16 @@ const showInAccount = ref(false) const title = ref("储蓄账户转账") const inAccountList = ref([]) const outAccountList = ref([]) +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} + const data = reactive({ form: { id: null, @@ -276,7 +292,23 @@ function handleInAccount() { .form-view { padding: 24rpx; - .form-btn { + .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; } } diff --git a/src/pages/work/accounts/investAccountDeal/addEdit.vue b/src/pages/work/accounts/investAccountDeal/addEdit.vue index 3740f4e..59d381d 100644 --- a/src/pages/work/accounts/investAccountDeal/addEdit.vue +++ b/src/pages/work/accounts/investAccountDeal/addEdit.vue @@ -9,37 +9,43 @@ {{ title}} - + - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> + inputAlign="left" :customStyle="inputBaseStyle"> + inputAlign="left" :customStyle="inputBaseStyle"> - + @@ -85,6 +91,16 @@ const dealTypeList = ref([]) const futuresShow = ref(false) //账户类型 const accountType = ref(0) +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} + const data = reactive({ form: { id: null, @@ -343,7 +359,23 @@ onLoad((option) => { .form-view { padding: 24rpx; - .form-btn { + .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; } } diff --git a/src/pages/work/accounts/investTransferRecord/addEdit.vue b/src/pages/work/accounts/investTransferRecord/addEdit.vue index cf3bcf1..66c3159 100644 --- a/src/pages/work/accounts/investTransferRecord/addEdit.vue +++ b/src/pages/work/accounts/investTransferRecord/addEdit.vue @@ -11,30 +11,36 @@ {{ title}} - + - - + + + + - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> - + @@ -78,6 +84,16 @@ const title = ref("投资账户记账") const futruesStocksList = ref([]) const dealTypeList = ref([]) const flag = ref('add') +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} + const data = reactive({ form: { id: null, @@ -286,7 +302,23 @@ onLoad((option) => { .form-view { padding: 24rpx; - .form-btn { + .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; } } diff --git a/src/pages/work/accounts/lendTransferRecord/addEdit.vue b/src/pages/work/accounts/lendTransferRecord/addEdit.vue index 40bf7e2..1c8959e 100644 --- a/src/pages/work/accounts/lendTransferRecord/addEdit.vue +++ b/src/pages/work/accounts/lendTransferRecord/addEdit.vue @@ -9,38 +9,46 @@ {{ title}} - + - - + + + + - - + + + + - - + + + + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle"> + inputAlign="left" :customStyle="inputBaseStyle"> - + @@ -119,6 +127,16 @@ const title = ref("借贷账户记账") const dealTypeList = ref([]) const inAccountList = ref([]) const outAccountList = ref([]) +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx', + width: '100%', + boxSizing: 'border-box' +} + const data = reactive({ form: { id: null, @@ -350,6 +368,22 @@ function handleInAccount() { .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; } diff --git a/src/pages/work/accounts/posTransferRecord/addEdit.vue b/src/pages/work/accounts/posTransferRecord/addEdit.vue index 9d37351..070932d 100644 --- a/src/pages/work/accounts/posTransferRecord/addEdit.vue +++ b/src/pages/work/accounts/posTransferRecord/addEdit.vue @@ -11,16 +11,18 @@ {{ title}} - + - - + + + + + inputAlign="left" :customStyle="inputBaseStyle">