zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4/18 样式修改，缴费部分页面按照ui重做

Browse Source
This commit is contained in:
wangyuxin
2026-04-18 16:24:20 +08:00
parent 72ec4017e8
commit 452bf0b84d
36 changed files with 975 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
property-uniapp-project/pages/payment-list/addPayment.vue
View File

@@ -4,23 +4,22 @@
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
:border="false">
</uni-nav-bar>
<Loading mask="true" click="true" ref="loading"></Loading>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<view class="container">
<!-- 顶部蓝色标题栏 -->
<view class="header-card">
<view class="header-icon">
<text class="icon-fire">🔥</text>
<image class="iconStyle" src="/static/propertyImgs/gas.png"></image>
</view>
<text class="header-title">燃气费</text>
</view>
<!-- 缴费信息卡片 -->
<view class="info-card">
<view class="form-item">
<view class="form-item" @click="goToChange()">
<text class="label">缴费单位</text>
<text class="company-name">XXXXXXXX燃气有限公司</text>
</view>
@@ -34,21 +33,7 @@
</view>
</view>
<!-- 底部协议和提交按钮 -->
<view class="bottom-area">
<view class="agreement">
<checkbox-group @change="handleAgreeChange">
<checkbox :checked="isAgree" />
</checkbox-group>
<text class="agreement-text">已阅并同意</text>
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view>
<button class="submit-btn" @click="handleSubmit">
提交
</button>
</view>
</view>
@@ -81,6 +66,21 @@
</scroll-view>
<!-- 底部协议和提交按钮 -->
<view class="bottom-area">
<view class="agreement">
<checkbox-group @change="handleAgreeChange">
<checkbox :checked="isAgree" />
</checkbox-group>
<text class="agreement-text">我已阅并同意</text>
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view>
<button class="submit-btn" @click="handleSubmit">
提交
</button>
</view>
</view>
@@ -191,6 +191,14 @@
complete: () => {}
});
},
goToChange() {
// uni.redirectTo({
// url: '/pages/payment-list/selectPaymentEntity',
// success: res => {},
// fail: () => {},
// complete: () => {}
// });
},
goBack() {
uni.redirectTo({
url: '/pages/payment-list/paymentIndex',
@@ -207,7 +215,7 @@
</script>
<style lang="scss">
page {
background: #f2f1f6;
background: #f9f9f9;
}
</style>
@@ -223,37 +231,39 @@
.page {
flex: 1;
overflow-y: auto;
padding: 0px 20px;
padding: 0px 40rpx;
box-sizing: border-box;
background-color: #fff;
}
.container {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
/* 顶部标题栏 */
.header-card {
background: linear-gradient(135deg, #66b3ff 0%, #4080ff 100%);
border-radius: 20rpx 20rpx 0 0;
padding: 30rpx 40rpx;
background: #fff;
padding: 30rpx;
display: flex;
align-items: center;
color: #fff;
border-bottom: 2rpx solid #ededed;
}
.header-icon {
width: 60rpx;
height: 60rpx;
width: 56rpx;
height: 56rpx;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.iconStyle {
width: 100%;
height: 100%;
}
.icon-fire {
@@ -262,20 +272,22 @@
}
.header-title {
font-size: 16px;
font-size: 32rpx;
font-weight: bold;
}
/* 信息卡片 */
.info-card {
background-color: #fff;
border-radius: 0 0 20rpx 20rpx;
padding: 40rpx;
border-radius: 10rpx;
/* padding: 30rpx; */
margin-bottom: 40rpx;
}
.form-item {
margin-bottom: 40rpx;
/* margin-bottom: 40rpx; */
border-bottom: 2rpx solid #ededed;
padding: 30rpx;
}
.form-item:last-child {
@@ -284,14 +296,14 @@
.label {
display: block;
font-size: 14px;
color: #565656;
font-size: 28rpx;
color: #222;
margin-bottom: 20rpx;
}
.company-name {
display: block;
font-size: 16px;
font-size: 32rpx;
color: #333;
font-weight: 600;
}
@@ -304,7 +316,7 @@
.input-field {
flex: 1;
font-size: 16px;
font-size: 32rpx;
color: #333;
padding: 10rpx 0;
border: none;
@@ -316,7 +328,7 @@
}
.help-link {
font-size: 14px;
font-size: 28rpx;
color: #4080ff;
white-space: nowrap;
margin-left: 20rpx;
@@ -328,15 +340,14 @@
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 15px;
padding: 30rpx;
box-sizing: border-box;
}
.agreement {
display: flex;
align-items: center;
margin-bottom: 30rpx;
margin-bottom: 20rpx;
}
.agreement checkbox {
@@ -345,12 +356,12 @@
}
.agreement-text {
font-size: 14px;
font-size: 24rpx;
color: #333;
}
.agreement-link {
font-size: 14px;
font-size: 28rpx;
color: #4080ff;
margin-left: 10rpx;
}
@@ -406,15 +417,15 @@
}
.popup-title {
font-size: 16px;
line-height: 30px;
font-size: 32rpx;
line-height: 60rpx;
font-weight: bold;
color: #333;
width: 100%;
display: flex;
/* align-items: center; */
justify-content: space-evenly;
border-bottom: 1px solid #ebebeb;
border-bottom: 2rpx solid #ebebeb;
}
.popup-close {
@@ -460,20 +471,20 @@
}
.item-title {
font-size: 16px;
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.item-desc {
font-size: 14px;
font-size: 28rpx;
color: #666;
line-height: 1.5;
}
/* 弹窗动画 */
@keyframes slideUp {
/* @keyframes slideUp {
from {
transform: translateY(100%);
}
@@ -481,7 +492,7 @@
to {
transform: translateY(0);
}
}
} */
/* 成功提示弹窗 */
.toast-mask {