qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 新增页面，样式统一修复。

Browse Source
This commit is contained in:
tianyongbao
2026-06-26 15:00:39 +08:00
parent a2b891671a
commit c988be7a72
39 changed files with 1921 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/work/bill/creditCardBill/addEdit.vue
View File

@@ -11,29 +11,35 @@
<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="信用卡" prop="creditCardName" required @click="handleCreditCard">
<u--input v-model="form.creditCardName" disabled disabledColor="#ffffff" placeholder="请选择信用卡"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.creditCardName" readonly disabledColor="#ffffff" placeholder="请选择信用卡"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="账单日" prop="billDate" required @click="selectDate()">
<u--input v-model="form.billDate" disabled disabledColor="#ffffff" placeholder="请选择账单日" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.billDate" readonly disabledColor="#ffffff" placeholder="请选择账单日" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="账单金额" prop="billAmount" required >
<u--input v-model="form.billAmount" type="number" placeholder="请填写账单金额"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</u-form-item>
<u-form-item label="账单状态" prop="billStateName" required @click="handleShowTeam">
<u--input v-model="form.billStateName" disabled disabledColor="#ffffff" placeholder="请选择账单状态"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.billStateName" 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="20000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
maxlength="20000" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -77,6 +83,16 @@ const showCreditCard = ref(false)
const title = ref("信用卡账单")
const bankCardLendList = ref([])
const billStateList = 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,
@@ -217,44 +233,53 @@ onLoad((option) => {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.section {
.section {
margin: 24rpx;
padding: 32rpx;
padding: 16rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
border-radius: 8rpx;
.section-title {
width: 360rpx;
color: #2c3e50;
line-height: 44rpx;
font-size: 30rpx;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
line-height: 1.2;
font-size: 28rpx;
font-weight: 600;
padding-left: 20rpx;
position: relative;
margin-bottom: 24rpx;
display: flex;
align-items: center;
margin: -16rpx -24rpx 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 28rpx;
background: #ffffff;
border-radius: 3rpx;
margin-right: 12rpx;
}
}
.form-view {
padding: 20rpx 0rpx 0 10rpx;
.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: 32rpx;
.u-button {