4/18 样式修改，缴费部分页面按照ui重做
This commit is contained in:
wangyuxin
@@ -301,7 +301,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -313,7 +313,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 15px 20rpx;
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
@@ -331,7 +331,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
@@ -340,7 +340,7 @@
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -360,7 +360,7 @@
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
padding: 0 0px;
|
||||
/* height: calc(100vh - 220px); */
|
||||
/* height: calc(100vh - 240rpx); */
|
||||
/* overflow-y: scroll; */
|
||||
|
||||
}
|
||||
@@ -369,12 +369,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -382,26 +382,26 @@
|
||||
|
||||
.item-placeholder {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-placeholder.selected {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
|
||||
/* 开关项 */
|
||||
@@ -411,7 +411,7 @@
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
@@ -450,12 +450,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -464,7 +464,7 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
@@ -498,7 +498,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
@@ -511,7 +511,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -520,13 +520,13 @@
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
@@ -548,13 +548,13 @@
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
@@ -574,7 +574,7 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
@@ -582,7 +582,7 @@
|
||||
.item-input {
|
||||
flex: 1;
|
||||
height: 40rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -591,7 +591,7 @@
|
||||
|
||||
.input-placeholder {
|
||||
color: #999 !important;
|
||||
font-size: 14px !important;
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
|
||||
/* ===================== 图片上传区域 ===================== */
|
||||
@@ -662,7 +662,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 32rpx;
|
||||
@@ -672,7 +672,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -680,15 +680,15 @@
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
@@ -654,7 +654,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -684,7 +684,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
@@ -693,7 +693,7 @@
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -716,7 +716,7 @@
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
/* padding: 0 15px; */
|
||||
/* padding: 0 30rpx; */
|
||||
|
||||
}
|
||||
|
||||
@@ -724,12 +724,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -737,18 +737,18 @@
|
||||
|
||||
.item-placeholder {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-placeholder.selected {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* .item-arrow {
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
color: #ccc;
|
||||
margin-left: 20rpx;
|
||||
} */
|
||||
@@ -760,7 +760,7 @@
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
@@ -811,12 +811,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -825,13 +825,13 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.value.selected {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -864,7 +864,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
@@ -877,7 +877,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -886,13 +886,13 @@
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
@@ -920,13 +920,13 @@
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
@@ -946,7 +946,7 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
@@ -963,7 +963,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -1001,18 +1001,19 @@
|
||||
right: 0;
|
||||
background: #2F77FD;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
padding: 3px 15px;
|
||||
font-size: 26rpx;
|
||||
padding:6rpx 30rpx;
|
||||
border: 2rpx solid #efefef;
|
||||
/* border-radius: 99px; */
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-section {
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
@@ -1021,18 +1022,18 @@
|
||||
}
|
||||
|
||||
.upload-desc {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 两列布局 */
|
||||
.upload-wrap {
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
@@ -1040,7 +1041,7 @@
|
||||
height: 200px;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #f9f9f9;
|
||||
background: #f3f3f3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1096,7 +1097,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 32rpx;
|
||||
@@ -1106,7 +1107,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -1114,61 +1115,19 @@
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
color: #337eff;
|
||||
@@ -1178,12 +1137,12 @@
|
||||
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -404,7 +404,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -415,7 +415,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 15px 20rpx;
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
@@ -433,7 +433,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
@@ -442,7 +442,7 @@
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -466,12 +466,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -479,25 +479,25 @@
|
||||
|
||||
.item-placeholder {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-placeholder.selected {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -508,7 +508,7 @@
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
@@ -553,12 +553,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
@@ -567,13 +567,13 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.value.selected {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -606,7 +606,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
@@ -619,7 +619,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -628,13 +628,13 @@
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
@@ -656,13 +656,13 @@
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
@@ -682,7 +682,7 @@
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
@@ -699,7 +699,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -744,11 +744,11 @@
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-section {
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
@@ -757,18 +757,18 @@
|
||||
}
|
||||
|
||||
.upload-desc {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 两列布局 */
|
||||
.upload-wrap {
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
@@ -832,7 +832,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 32rpx;
|
||||
@@ -842,7 +842,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -850,15 +850,15 @@
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
@@ -187,13 +187,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -218,7 +218,7 @@
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
@@ -255,7 +255,7 @@
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
@@ -274,7 +274,7 @@
|
||||
/* ====================== 列表容器 ====================== */
|
||||
.list-container {
|
||||
/* flex: 1; */
|
||||
padding: 20px;
|
||||
padding: 40rpx;
|
||||
min-height: calc(100vh - 105px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@@ -284,7 +284,7 @@
|
||||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
@@ -318,7 +318,7 @@
|
||||
|
||||
/* 车牌号 */
|
||||
.car-plate {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.4;
|
||||
@@ -327,21 +327,21 @@
|
||||
|
||||
/* 车型+颜色 */
|
||||
.car-model {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 3px;
|
||||
font-size: 24rpx;
|
||||
padding:6rpx14rpx;
|
||||
border-radius:6rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
|
||||
/* 未绑定状态（浅绿色背景+绿色文字） */
|
||||
|
||||
@@ -231,13 +231,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -320,8 +320,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 10px;
|
||||
margin: 0px 0px 10px 0rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0px 0px 20rpx 0rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
@@ -351,8 +351,8 @@
|
||||
.house-card {
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 12rpx;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -363,7 +363,7 @@
|
||||
}
|
||||
|
||||
.community-name {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
@@ -382,7 +382,7 @@
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
@@ -395,13 +395,13 @@
|
||||
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
/* font-weight: 600; */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
/* font-weight: 600; */
|
||||
}
|
||||
@@ -413,11 +413,11 @@
|
||||
/* ====================== 选中对勾 ====================== */
|
||||
.check-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 23px;
|
||||
right: 20rpx;
|
||||
top: 46rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ccc;
|
||||
/* background-color: #ccc; */
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -303,13 +303,13 @@
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 30rpx;
|
||||
@@ -373,7 +373,7 @@
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<view class="form-container">
|
||||
<!-- 手机号输入框（带+86前缀） -->
|
||||
<view class="input-group phone-input">
|
||||
<image class="iconStyle" src="/static/propertyImgs/phoneIcon.png">📱</image>
|
||||
<image class="iconStyle" src="/static/propertyImgs/phoneIcon.png"></image>
|
||||
<input class="input-item" type="number" v-model="phone" placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder" maxlength="11" />
|
||||
</view>
|
||||
@@ -198,14 +198,14 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
@@ -227,8 +227,8 @@
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width:25px;
|
||||
height: 25px;
|
||||
width:50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.phone-input .input-item {
|
||||
@@ -249,7 +249,7 @@
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: #2F77FD;
|
||||
border: none;
|
||||
|
||||
@@ -145,14 +145,14 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
|
||||
@@ -206,12 +206,12 @@
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '提删除中...',
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提删除成功',
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
@@ -258,7 +258,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -269,7 +269,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 10px 0px 10px;
|
||||
padding: 20rpx 0px 20rpx;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
@@ -388,7 +388,7 @@
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -458,7 +458,7 @@
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
|
||||
@@ -169,13 +169,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
@@ -241,7 +241,7 @@
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
@@ -265,13 +265,13 @@
|
||||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
width: calc(100% - 22px);
|
||||
width: calc(100% - 44rpx);
|
||||
}
|
||||
|
||||
.car-item.checked {
|
||||
@@ -300,7 +300,7 @@
|
||||
|
||||
/* 车牌号 */
|
||||
.car-plate {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.4;
|
||||
@@ -309,13 +309,13 @@
|
||||
|
||||
/* 车型+颜色 */
|
||||
.car-model {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.car-bindParkingSpace {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
@@ -328,14 +328,14 @@
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 3px;
|
||||
font-size: 24rpx;
|
||||
padding:6rpx14rpx;
|
||||
border-radius:6rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
|
||||
/* 未绑定状态 */
|
||||
|
||||
@@ -215,13 +215,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
@@ -254,7 +254,7 @@
|
||||
}
|
||||
|
||||
.house-name {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -262,13 +262,13 @@
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 1px 8px;
|
||||
border-radius: 15px;
|
||||
padding:2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 6rpx;
|
||||
@@ -305,7 +305,7 @@
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
|
||||
/* color: #666; */
|
||||
}
|
||||
@@ -317,13 +317,13 @@
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.defaultBox {
|
||||
margin-top: 5px;
|
||||
margin-top:10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 99 !important;
|
||||
@@ -332,7 +332,7 @@
|
||||
.set-default {
|
||||
color: #222222;
|
||||
/* font-weight: 600; */
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -345,7 +345,7 @@
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -187,13 +187,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
@@ -222,7 +222,7 @@
|
||||
}
|
||||
|
||||
.parkingSpace-name {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@@ -234,10 +234,10 @@
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 15px;
|
||||
margin-left: 10px;
|
||||
font-size: 24rpx;
|
||||
padding:4rpx16rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -265,7 +265,7 @@
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -280,7 +280,7 @@
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
@@ -293,7 +293,7 @@
|
||||
|
||||
.value {
|
||||
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
@@ -301,7 +301,7 @@
|
||||
.set-default {
|
||||
color: #007aff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -312,7 +312,7 @@
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -243,7 +243,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -371,7 +371,7 @@
|
||||
border: 1rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -441,7 +441,7 @@
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
@@ -377,13 +377,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -135,13 +135,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
margin: 0rpx 0px 20rpx 0px;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
@@ -197,13 +197,13 @@
|
||||
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
||||
@@ -263,13 +263,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -188,13 +188,13 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
/* .bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
} */
|
||||
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
margin: 0rpx 0px 20rpx 0px;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
@@ -251,13 +251,13 @@
|
||||
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
||||
@@ -194,14 +194,14 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -212,13 +212,13 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
padding: 15px 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 30rpx 30rpx;
|
||||
border-bottom:2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 标题文字 */
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -232,25 +232,25 @@
|
||||
|
||||
/* 右侧数值/版本文字 */
|
||||
.item-value {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-version {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
|
||||
/* 开关样式适配 */
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
<view class="topBox">
|
||||
<view class="name">
|
||||
<image src="/static/propertyImgs/touxiang.jpg" class="img" />
|
||||
<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 30px;">
|
||||
<span style="font-size: 18px;font-weight: 600;">
|
||||
<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 60rpx;">
|
||||
<span style="font-size: 36rpx;font-weight: 600;">
|
||||
{{loginName}}
|
||||
</span>
|
||||
<span style="font-size: 13px;color:#666666;">
|
||||
<span style="font-size: 26rpx;color:#666666;">
|
||||
{{phoneNum}}
|
||||
</span>
|
||||
</span>
|
||||
@@ -25,7 +25,7 @@
|
||||
<view class="item-content">
|
||||
<text class="item-title">{{ item.title }}</text>
|
||||
<span class="item-desc" v-if="item.desc"><span
|
||||
style="align-self: flex-end;font-size: 12px;vertical-align: baseline;">{{ item.desc }}</span></span>
|
||||
style="align-self: flex-end;font-size: 24rpx;vertical-align: baseline;">{{ item.desc }}</span></span>
|
||||
</view>
|
||||
<view class="item-arrow"></view>
|
||||
<!-- <image src="/static/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
|
||||
@@ -151,11 +151,11 @@
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 50px);
|
||||
height: calc(100vh - 100rpx);
|
||||
|
||||
.topBox {
|
||||
width: 100%;
|
||||
padding: 10px 0px;
|
||||
padding: 20rpx 0px;
|
||||
position: relative;
|
||||
// background-color: #1A75FF;
|
||||
|
||||
@@ -165,16 +165,16 @@
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
font-size: 36rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settingImg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 8px;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
top:16rpx;
|
||||
right: 0px;
|
||||
|
||||
}
|
||||
@@ -189,8 +189,8 @@
|
||||
|
||||
.name {
|
||||
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
bottom: 30rpx;
|
||||
left: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -211,7 +211,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -227,15 +227,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* background: #fff; */
|
||||
padding: 10px 3px;
|
||||
padding: 20rpx 6rpx;
|
||||
border-radius: 8rpx;
|
||||
/* border-bottom: 1px solid #f2f2f2; */
|
||||
/* border-bottom:2rpx solid #f2f2f2; */
|
||||
/* margin-bottom: 10rpx; */
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
/* margin-right: 20rpx; */
|
||||
}
|
||||
|
||||
@@ -247,15 +247,15 @@
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
/* color: #333; */
|
||||
font-weight: 400;
|
||||
margin: 5px 10px;
|
||||
margin:10rpx 20rpx;
|
||||
/* margin-bottom: 6rpx; */
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #b5b5b5;
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
@@ -267,11 +267,11 @@
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width:16rpx;
|
||||
height:16rpx;
|
||||
border-right: 3rpx solid #999999;
|
||||
border-bottom: 3rpx solid #999999;
|
||||
transform: rotate(-45deg);
|
||||
margin-right: 5px;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -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 {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<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">
|
||||
@@ -94,7 +94,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,27 +110,24 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 成功图标 */
|
||||
.success-icon {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
display: flex;
|
||||
@@ -142,7 +139,7 @@
|
||||
|
||||
.icon-check {
|
||||
color: #fff;
|
||||
font-size: 100rpx;
|
||||
font-size: 130rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<uni-nav-bar :title="arrearsPayment" 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">
|
||||
@@ -18,7 +18,7 @@
|
||||
<text class="amount-text"
|
||||
:class="{ 'outstandingPaymentClass':outstandingPayment }">{{outstandingPayment?'-¥'+payAmount:'¥'+payAmount}}</text>
|
||||
</view>
|
||||
<view style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;"></view>
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<!-- 缴费信息 -->
|
||||
<view class="info-section" style="">
|
||||
<view v-if="arrearsPayment=='物业费'">
|
||||
@@ -59,13 +59,15 @@
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">HN热力有限公司</text>
|
||||
</view>
|
||||
<!-- <view style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;"></view> -->
|
||||
<!-- <view style="border-bottom: 2rpx solid #c7c7c7;padding-bottom:20rpx;"></view> -->
|
||||
<!-- 缴费金额输入 -->
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<view class="input-section" style="display: flex;">
|
||||
<text class="amount-input" style="width: auto;">¥</text>
|
||||
<input type="number" v-model="payAmount" class="amount-input" placeholder="点击输入缴费金额">
|
||||
<text class="amount-input" style="width: auto;margin: 0rpx 20rpx;">¥</text>
|
||||
<input type="number" v-model="payNum" class="amount-input" placeholder="点击输入缴费金额">
|
||||
</input>
|
||||
</view>
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<view class="arrears-row">
|
||||
<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
|
||||
<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
|
||||
@@ -92,7 +94,7 @@
|
||||
|
||||
<!-- 商户信息 & 金额 -->
|
||||
<view class="pay-info">
|
||||
<text class="merchant-name">智享日照洗护</text>
|
||||
<text class="merchant-name">充值金额</text>
|
||||
<text class="pay-amount">¥{{ payAmount }}</text>
|
||||
</view>
|
||||
|
||||
@@ -153,17 +155,19 @@
|
||||
</view>
|
||||
|
||||
<!-- 3. 缴费成功页 -->
|
||||
<view v-if="currentStep === 3" class="success-page">
|
||||
<view class="icon-box">
|
||||
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
<text class="icon">✓</text>
|
||||
</view>
|
||||
<view class="container" v-if="currentStep==3">
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
<text class="icon-check">✓</text>
|
||||
</view>
|
||||
|
||||
<!-- 主标题 -->
|
||||
<view class="title">缴费成功</view>
|
||||
|
||||
<!-- 提示文案 -->
|
||||
<view class="desc">
|
||||
成功缴纳物业费
|
||||
</view>
|
||||
<!-- 成功文字 -->
|
||||
<view class="success-text">缴费成功</view>
|
||||
<view class="success-desc">成功缴纳物业费</view>
|
||||
|
||||
|
||||
</view>
|
||||
@@ -223,6 +227,7 @@
|
||||
password: "", // 输入的密码
|
||||
showBankList: false, // 是否显示银行卡列表
|
||||
arrearsAmount: "21.21",
|
||||
payNum: '',
|
||||
// 银行卡列表
|
||||
bankList: [{
|
||||
id: 1,
|
||||
@@ -246,16 +251,13 @@
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
handleAutoFill() {
|
||||
this.payAmount = this.arrearsAmount;
|
||||
this.payNum = this.arrearsAmount;
|
||||
uni.vibrateShort({
|
||||
type: "light"
|
||||
});
|
||||
@@ -359,7 +361,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #
|
||||
/* fff */
|
||||
@@ -375,12 +377,12 @@
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
padding: 30px 0;
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 28px;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -389,8 +391,8 @@
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0 15px 15px 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
padding-top: 20rpx;
|
||||
/* margin-bottom: 40rpx; */
|
||||
|
||||
}
|
||||
|
||||
@@ -398,62 +400,62 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-payAmountItem {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 30px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.info-payAmount {
|
||||
font-size: 25px;
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.input-section {
|
||||
/* padding: 0 15px; */
|
||||
/* padding: 030rpx; */
|
||||
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 100rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-right: 5px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.btn-section {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
@@ -469,56 +471,57 @@
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.password-modal {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 22px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
font-size: 44rpx;
|
||||
width: 80rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 17px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 40px;
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 20px 15px;
|
||||
padding: 40rpx 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
font-size: 32px;
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
@@ -527,12 +530,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.way-label {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -542,33 +545,33 @@
|
||||
}
|
||||
|
||||
.bank-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 银行卡列表 */
|
||||
.bank-list {
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.bank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.bank-item:last-child {
|
||||
@@ -576,19 +579,19 @@
|
||||
}
|
||||
|
||||
.bank-item-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.bank-item-name {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 18px;
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
@@ -596,23 +599,23 @@
|
||||
.password-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 15px;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.password-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* border: 1px solid #dcdcdc; */
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* border: 2rpx solid #dcdcdc; */
|
||||
background-color: #efefef;
|
||||
border-radius: 4px;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.password-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -631,9 +634,9 @@
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-size: 48rpx;
|
||||
color: #000;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@@ -652,48 +655,48 @@
|
||||
}
|
||||
|
||||
/* 3. 缴费成功页 */
|
||||
.success-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 150px;
|
||||
padding: 30px 0px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 成功图标 */
|
||||
.success-icon {
|
||||
/* margin-top: 60px; */
|
||||
margin-bottom: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 80px;
|
||||
color: #007aff;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
background-color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 200rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.success-icon .iconfont {}
|
||||
.icon-check {
|
||||
color: #fff;
|
||||
font-size: 130rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
/* 主标题 */
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 15px;
|
||||
color: #999;
|
||||
margin-bottom: 50px;
|
||||
/* 提示文案 */
|
||||
.desc {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
margin-bottom: 150rpx;
|
||||
}
|
||||
|
||||
/* 核心：欠费金额行样式 */
|
||||
@@ -701,22 +704,21 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* padding: 15px; */
|
||||
margin-bottom: 30px;
|
||||
/* padding:30rpx; */
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.arrears-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auto-fill-btn {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
/* 蓝色，匹配设计图 */
|
||||
font-weight: 500;
|
||||
padding: 5px 0;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
||||
@@ -1,149 +1,75 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
<uni-nav-bar :title="arrearsPayment" 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">
|
||||
<!-- 1. 物业费详情页 -->
|
||||
<view v-if="currentStep === 1" class="pay-page">
|
||||
<view class="pay-page">
|
||||
|
||||
<!-- 金额展示 -->
|
||||
<!-- 未欠费 -->
|
||||
<view class="amount-section">
|
||||
<text class="amount-text">- ¥1680.00</text>
|
||||
<image src="/static/propertyImgs/noArrears.png" class="background-image-style"></image>
|
||||
<text class="noArrearsText">暂未查到欠费</text>
|
||||
<view class="recordText">
|
||||
<text>{{'最近缴费：'+lastPayTime}}</text>
|
||||
<text class="lineStyle">{{'|'}}</text>
|
||||
<text>{{'缴费金额：'+lastPayNum+'元'}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 缴费信息 -->
|
||||
<view class="info-section" style="">
|
||||
<view class="info-item">
|
||||
<text class="info-label">户名</text>
|
||||
<text class="info-value">桂花园（别墅）2号楼2层</text>
|
||||
<view v-if="arrearsPayment=='物业费'">
|
||||
<view class="info-item">
|
||||
<text class="info-label">户名</text>
|
||||
<text class="info-value">桂花园（别墅）2号楼2层</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">户主</text>
|
||||
<text class="info-value">周大声</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">CT物业</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">可用余额</text>
|
||||
<text class="info-value">0.00</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">户主</text>
|
||||
<text class="info-value">周大声</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">CT物业</text>
|
||||
</view>
|
||||
<view class="info-item" style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;">
|
||||
<text class="info-label">可用余额</text>
|
||||
<text class="info-value">0.00</text>
|
||||
</view>
|
||||
<view class="info-payAmountItem">
|
||||
<text class="info-payAmount">{{'￥'+payAmount}}</text>
|
||||
<view v-else>
|
||||
<view class="info-item" v-if="arrearsPayment=='暖气费'">
|
||||
<text class="info-label">房屋</text>
|
||||
<text class="info-value">桂花园（别墅）2号楼2层</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">户号</text>
|
||||
<text class="info-value">101123456</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">户主</text>
|
||||
<text class="info-value">周大声</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">HN热力有限公司</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 缴费金额输入 -->
|
||||
<!-- <view class="input-section">
|
||||
<input type="number" v-model="payAmount" class="amount-input" placeholder="请输入缴费金额" />
|
||||
</view> -->
|
||||
|
||||
<!-- 立即缴费按钮 -->
|
||||
<view class="btn-section">
|
||||
<button class="pay-btn" @click="handlePay">立即缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 支付密码弹窗 -->
|
||||
<view v-if="currentStep === 2" class="modal-overlay" @click="closePasswordModal">
|
||||
<view class="password-modal" @click.stop>
|
||||
<!-- 弹窗头部 -->
|
||||
<view class="modal-header">
|
||||
<view class="close-icon" @click="closePasswordModal">
|
||||
<text class="close-text">×</text>
|
||||
</view>
|
||||
<view class="modal-title">请输入支付密码</view>
|
||||
<view class="header-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 商户信息 & 金额 -->
|
||||
<view class="pay-info">
|
||||
<text class="merchant-name">智享日照洗护</text>
|
||||
<text class="pay-amount">¥{{ payAmount }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式选择 -->
|
||||
<view class="pay-way">
|
||||
<text class="way-label">支付方式</text>
|
||||
<view class="way-content">
|
||||
<image class="bank-icon" src="/static/propertyImgs/bank-logo.png" mode="aspectFit">
|
||||
</image>
|
||||
<text class="bank-name">建设银行储蓄卡(8888)</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行卡选择列表 -->
|
||||
<!-- <view v-if="showBankList" class="bank-list">
|
||||
<view v-for="(item, index) in bankList" :key="index" class="bank-item"
|
||||
@click="selectBank(item)">
|
||||
<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
|
||||
<text class="bank-item-name">{{ item.name }}</text>
|
||||
<text v-if="selectedBank.id === item.id" class="check-icon"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<view class="password-input">
|
||||
<view v-for="(item, index) in 6" :key="index" class="password-item">
|
||||
<text v-if="password.length > index" class="password-dot"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<view class="keyboard">
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(1)">1</view>
|
||||
<view class="keyboard-item" @click="inputPassword(2)">2</view>
|
||||
<view class="keyboard-item" @click="inputPassword(3)">3</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(4)">4</view>
|
||||
<view class="keyboard-item" @click="inputPassword(5)">5</view>
|
||||
<view class="keyboard-item" @click="inputPassword(6)">6</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(7)">7</view>
|
||||
<view class="keyboard-item" @click="inputPassword(8)">8</view>
|
||||
<view class="keyboard-item" @click="inputPassword(9)">9</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item empty"></view>
|
||||
<view class="keyboard-item" @click="inputPassword(0)">0</view>
|
||||
<view class="keyboard-item delete" @click="deletePassword">
|
||||
<text class="icon">←</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 缴费成功页 -->
|
||||
<view v-if="currentStep === 3" class="success-page">
|
||||
<view class="icon-box">
|
||||
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
<text class="icon">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 成功文字 -->
|
||||
<view class="success-text">缴费成功</view>
|
||||
<view class="success-desc">成功缴纳物业费</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="btn-section">
|
||||
<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -188,36 +114,12 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lastPayTime: '2022-11-29',
|
||||
lastPayNum: '2022.00',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
arrearsPayment: uni.getStorageSync('arrearsPayment'),
|
||||
currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
|
||||
payAmount: "1680.00", // 缴费金额
|
||||
password: "", // 输入的密码
|
||||
showBankList: false, // 是否显示银行卡列表
|
||||
// 银行卡列表
|
||||
bankList: [{
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "工商银行储蓄卡(6666)",
|
||||
icon: "/static/icbc-logo.png"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "招商银行储蓄卡(9999)",
|
||||
icon: "/static/cmb-logo.png"
|
||||
}
|
||||
],
|
||||
// 默认选中的银行卡
|
||||
selectedBank: {
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -310,7 +212,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -326,33 +228,50 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* 1. 物业费详情页 */
|
||||
.pay-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
padding: 30px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 28px;
|
||||
.background-image-style {
|
||||
|
||||
width: 466rpx;
|
||||
height: 250rpx;
|
||||
margin-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.noArrearsText {
|
||||
padding-bottom: 50rpx;
|
||||
width: 100%;
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
|
||||
.recordText {
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #bd3124;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0 15px 15px 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
.info-section {}
|
||||
|
||||
.lineStyle {
|
||||
margin: 0rpx 30rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -360,58 +279,57 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-payAmountItem {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 30px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.info-payAmount {
|
||||
font-size: 25px;
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.input-section {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
padding: 030rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
height: 100rpx;
|
||||
font-size: 48rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-section {
|
||||
padding: 0 15px;
|
||||
padding: 030rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
@@ -432,51 +350,51 @@
|
||||
.password-modal {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 24rpx24rpx 0 0;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 100rpx;
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 22px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
font-size: 44rpx;
|
||||
width: 80rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 17px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 40px;
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 20px 15px;
|
||||
padding: 40rpx30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
font-size: 32px;
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
@@ -485,12 +403,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.way-label {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -500,33 +418,33 @@
|
||||
}
|
||||
|
||||
.bank-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 银行卡列表 */
|
||||
.bank-list {
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.bank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.bank-item:last-child {
|
||||
@@ -534,19 +452,19 @@
|
||||
}
|
||||
|
||||
.bank-item-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.bank-item-name {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 18px;
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
@@ -554,23 +472,23 @@
|
||||
.password-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 15px;
|
||||
padding: 40rpx30rpx;
|
||||
}
|
||||
|
||||
.password-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* border: 1px solid #dcdcdc; */
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* border: 2rpx solid #dcdcdc; */
|
||||
background-color: #efefef;
|
||||
border-radius: 4px;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.password-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -589,9 +507,9 @@
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-size: 48rpx;
|
||||
color: #000;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@@ -621,13 +539,13 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 150px;
|
||||
padding: 30px 0px;
|
||||
height: 1100rpx;
|
||||
padding: 60rpx 0px;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
/* margin-top: 60px; */
|
||||
margin-bottom: 20px;
|
||||
/* margin-top: 120rpx; */
|
||||
margin-bottom: 40rpx;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 80px;
|
||||
@@ -642,17 +560,19 @@
|
||||
.success-icon .iconfont {}
|
||||
|
||||
.success-text {
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
margin-bottom: 50px;
|
||||
}.status-bar{
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -220,43 +221,43 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.topbox {
|
||||
height: 80px;
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 131px;
|
||||
height: 37px;
|
||||
width: 262rpx;
|
||||
height: 74rpx;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 10px;
|
||||
left: 40rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.payImg {
|
||||
width: 250px;
|
||||
height: 230px;
|
||||
width: 349.97rpx;
|
||||
height: 313.57rpx;
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
bottom: -100px;
|
||||
right: -80rpx;
|
||||
bottom: -140rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
/* padding: 15px; */
|
||||
/* padding:30rpx; */
|
||||
}
|
||||
|
||||
/* ===================== 欠费列表 ===================== */
|
||||
.bill-list {
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
@@ -264,24 +265,27 @@
|
||||
align-items: center;
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 10px 10px 10px 0px;
|
||||
padding: 20rpx 20rpx 20rpx 0px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
width: calc(90% - 50px);
|
||||
width: calc(90% - 100rpx);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.billIcon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.bill-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
@@ -290,7 +294,7 @@
|
||||
|
||||
.bill-desc {
|
||||
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
@@ -300,13 +304,13 @@
|
||||
|
||||
/* 已欠费标签 */
|
||||
.bill-status {
|
||||
padding: 1px 8px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: #E34D59;
|
||||
margin-left: 5px;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
@@ -321,8 +325,8 @@
|
||||
/* ===================== 新增缴费区域 ===================== */
|
||||
.add-section {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -333,13 +337,13 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
@@ -348,14 +352,14 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 13px;
|
||||
gap: 26rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(25% - 30px);
|
||||
width: calc(25% - 60rpx);
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -364,10 +368,10 @@
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e6f0ff;
|
||||
/* background-color: #e6f0ff; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -381,10 +385,11 @@
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
|
||||
@@ -1,21 +1,34 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
<uni-nav-bar title="缴费记录" 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="total-box">
|
||||
<view class="total-title">累计缴费</view>
|
||||
<view class="total-price">¥800.00</view>
|
||||
|
||||
<view class="top-box">
|
||||
<view class="total-title">累计缴费</view>
|
||||
<view class="total-price">¥800.00</view>
|
||||
</view>
|
||||
<!-- 折线图 Canvas -->
|
||||
<canvas canvas-id="chargeChart" class="chart-canvas"></canvas>
|
||||
<!-- <canvas canvas-id="chargeChart" class="chart-canvas"></canvas> -->
|
||||
|
||||
<view class="chart-box">
|
||||
<!-- 循环6个月柱状图 -->
|
||||
<view class="chart-item" v-for="(item,index) in chartData" :key="index">
|
||||
<!-- 柱子顶部金额文字 -->
|
||||
<view class="chart-label">{{ item.price }}元</view>
|
||||
<!-- 柱状图柱子 -->
|
||||
<view class="chart-bar" :style="{ height: barHeight(item.price) }"></view>
|
||||
<!-- 底部月份文字 -->
|
||||
<view class="chart-month">{{ item.month }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 缴费明细 -->
|
||||
@@ -29,7 +42,7 @@
|
||||
<view class="item-list">
|
||||
<view class="bill-item" v-for="bill in item.list" :key="bill.id">
|
||||
<view class="bill-icon">
|
||||
<text class="icon">{{ bill.icon }}</text>
|
||||
<image class="iconStyle" :src="bill.icon"></image>
|
||||
</view>
|
||||
<view class="bill-info">
|
||||
<view class="name">{{ bill.name }}</view>
|
||||
@@ -96,14 +109,40 @@
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
|
||||
// 折线图数据
|
||||
// 完全对应你图片的数据
|
||||
chartData: [{
|
||||
month: '1月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '2月',
|
||||
price: 130
|
||||
},
|
||||
{
|
||||
month: '3月',
|
||||
price: 220
|
||||
},
|
||||
{
|
||||
month: '4月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '5月',
|
||||
price: 100
|
||||
},
|
||||
{
|
||||
month: '6月',
|
||||
price: 130
|
||||
}
|
||||
],
|
||||
maxPrice: 250, // 最大值（基准高度）
|
||||
barMaxHeight: 300, // 柱子最大高度rpx
|
||||
// canvas折线图数据
|
||||
chart: {
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
values: [100, 140, 230, 100, 130, 100]
|
||||
},
|
||||
|
||||
// ====================== 核心：5月6月放在一个list里 ======================
|
||||
billList: [
|
||||
// 5月数据
|
||||
{
|
||||
@@ -112,7 +151,7 @@
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/gas.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -120,7 +159,7 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/water.png",
|
||||
},
|
||||
|
||||
// 6月数据
|
||||
@@ -130,7 +169,7 @@
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/gas.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -138,7 +177,7 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 10,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/water.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -146,7 +185,7 @@
|
||||
name: '电费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: '⚡'
|
||||
icon: "/static/propertyImgs/electric.png",
|
||||
}
|
||||
]
|
||||
|
||||
@@ -156,6 +195,11 @@
|
||||
|
||||
|
||||
methods: {
|
||||
// 计算每个柱子自适应高度（按金额比例换算）
|
||||
barHeight(price) {
|
||||
const height = (price / this.maxPrice) * this.barMaxHeight
|
||||
return `${height}rpx`
|
||||
},
|
||||
drawLineChart() {
|
||||
const ctx = uni.createCanvasContext('chargeChart', this)
|
||||
const canvasPage = uni.getSystemInfoSync();
|
||||
@@ -241,7 +285,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
// background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -251,78 +295,94 @@
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
|
||||
.total-box {
|
||||
padding: 15px;
|
||||
/* margin-bottom: 10px; */
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 24px;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
width: calc(100vw - 30px);
|
||||
width: calc(100vw - 60rpx);
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
padding: 0 15px;
|
||||
padding: 10rpx 0rpx;
|
||||
}
|
||||
|
||||
.month-group {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.month-group:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0rpx;
|
||||
padding-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #e6efff;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
/* background: #e6efff; */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4080FF;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
@@ -330,22 +390,68 @@
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.bill-price {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}.status-bar{
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 图表外层容器 横向排列 */
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 444rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
/* padding: 40rpx 20rpx; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 单个柱子单元：垂直排列 文字+柱子+月份 */
|
||||
.chart-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 120rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 顶部金额标签 */
|
||||
.chart-label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 蓝色圆角柱子 完全还原原图顶部圆角 */
|
||||
.chart-bar {
|
||||
width: 40rpx;
|
||||
background: #3388ff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
/* 只有顶部圆角！和原图一模一样 */
|
||||
}
|
||||
|
||||
/* 底部月份文字 */
|
||||
.chart-month {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="选择缴费单位" 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">
|
||||
@@ -293,7 +293,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -309,14 +309,14 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
padding:20rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -330,10 +330,10 @@
|
||||
.city-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
padding:8rpx 0;
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
@@ -343,7 +343,7 @@
|
||||
}
|
||||
|
||||
.city-text {
|
||||
font-size: 14px;
|
||||
font-size:28rpx;
|
||||
/* 匹配截图字体大小 */
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
@@ -354,11 +354,11 @@
|
||||
.arrow-icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 8px solid #333333;
|
||||
border-left:10rpx solid transparent;
|
||||
border-right:10rpx solid transparent;
|
||||
border-top:16rpx solid #333333;
|
||||
/* 纯黑实心三角，和截图一致 */
|
||||
margin-top: 2px;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -368,10 +368,10 @@
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 50rpx;
|
||||
border-radius:20rpx;
|
||||
/* margin: 0rpx 30rpx 20rpx 30rpx; */
|
||||
padding: 0 15px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
padding: 0 30rpx;
|
||||
margin:10rpx 0px 0px10rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
@@ -395,20 +395,20 @@
|
||||
|
||||
/* 列表 */
|
||||
.list-scroll {
|
||||
height: calc(100vh - 44px - 70px);
|
||||
}
|
||||
|
||||
.group-title {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
padding:20rpx 40rpx;
|
||||
font-size:28rpx;
|
||||
color: #666;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
padding:20rpx 40rpx;
|
||||
font-size:28rpx;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
.item:active {
|
||||
@@ -416,8 +416,8 @@
|
||||
}
|
||||
|
||||
::v-deep .selected-item {
|
||||
margin-left: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
margin-left:10rpx !important;
|
||||
margin-right:10rpx !important;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
||||
@@ -321,27 +321,27 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 表单主体 */
|
||||
.form-content {
|
||||
}
|
||||
.form-content {}
|
||||
|
||||
.form-tip {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #1D1D1D;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 表单项：一行布局，不换行 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -354,12 +354,12 @@
|
||||
|
||||
.required-star {
|
||||
color: #ff3b30;
|
||||
font-size: 15px;
|
||||
margin-right: 4px;
|
||||
font-size: 30rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -371,7 +371,7 @@
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
@@ -387,7 +387,7 @@
|
||||
/* 输入框样式 */
|
||||
.text-input {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -398,8 +398,8 @@
|
||||
.desc-row {
|
||||
align-items: flex-start;
|
||||
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.desc-right {
|
||||
@@ -407,13 +407,13 @@
|
||||
}
|
||||
|
||||
.desc-input {
|
||||
width: calc(100vw - 42px);
|
||||
width: calc(100vw - 84rpx);
|
||||
min-height: 80px;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
margin-top: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
@@ -423,8 +423,8 @@
|
||||
/* 照片上传区域 */
|
||||
.photo-row {
|
||||
align-items: flex-start;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -435,7 +435,7 @@
|
||||
.photo-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
@@ -489,7 +489,7 @@
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
@@ -530,7 +530,7 @@
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
/* border-bottom: 1rpx solid #f0f0f0; */
|
||||
position: relative;
|
||||
@@ -543,7 +543,7 @@
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
@@ -552,13 +552,13 @@
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px 0;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -159,13 +159,12 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
}
|
||||
.page-container {}
|
||||
|
||||
/* 通用标题样式（带蓝色竖线） */
|
||||
.section-title {
|
||||
@@ -183,7 +182,7 @@
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
@@ -200,8 +199,8 @@
|
||||
|
||||
.completedDesc {
|
||||
color: #2F77FD;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -221,7 +220,7 @@
|
||||
|
||||
.info-label {
|
||||
width: 220rpx;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
@@ -229,7 +228,7 @@
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -260,13 +259,13 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 自动换行 */
|
||||
gap: 10px;
|
||||
gap: 20rpx;
|
||||
/* 图片之间的间距（可改） */
|
||||
margin: 5px 0px 10px 0px;
|
||||
margin: 10rpx 0px 20rpx 0px;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: calc(33.333% - 7px);
|
||||
width: calc(33.333% - 14rpx);
|
||||
height: 66px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -282,7 +281,9 @@
|
||||
.completed {
|
||||
|
||||
color: #999999;
|
||||
}.status-bar{
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
@@ -236,7 +236,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
@@ -259,7 +259,7 @@
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -271,16 +271,16 @@
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
font-size: 12px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 24rpx;
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.pending {
|
||||
@@ -307,9 +307,9 @@
|
||||
|
||||
/* 描述文本 */
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 20px;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
@@ -318,14 +318,14 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 自动换行 */
|
||||
gap: 10px;
|
||||
gap: 20rpx;
|
||||
/* 图片之间的间距（可改） */
|
||||
margin: 5px 0px 10px 0px;
|
||||
margin: 10rpx 0px 20rpx 0px;
|
||||
}
|
||||
|
||||
/* 单个图片项 */
|
||||
.img-item {
|
||||
width: calc(33.333% - 7px);
|
||||
width: calc(33.333% - 14rpx);
|
||||
height: 52px;
|
||||
|
||||
}
|
||||
@@ -345,7 +345,7 @@
|
||||
}
|
||||
|
||||
.card-time {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@@ -356,7 +356,7 @@
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
/* background-color: #fff; */
|
||||
|
||||
@@ -124,15 +124,15 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 卡片容器 */
|
||||
.property-card {
|
||||
padding: 15px;
|
||||
/* margin: 0px 20px 20px 20px; */
|
||||
padding: 30rpx;
|
||||
/* margin: 0px 40rpx 40rpx 40rpx; */
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
@@ -141,7 +141,7 @@
|
||||
.topBox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
@@ -163,7 +163,7 @@
|
||||
|
||||
/* 物业名称 */
|
||||
.property-name {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 35px;
|
||||
@@ -171,9 +171,9 @@
|
||||
|
||||
/* 物业地址 */
|
||||
.property-address {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 12px;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
/* 电话行 */
|
||||
@@ -181,24 +181,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
line-height: 30px;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
/* 电话标签 */
|
||||
.phone-label {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 电话号码 */
|
||||
.phone-num {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 电话图标 */
|
||||
.phone-icon {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #409eff !important;
|
||||
/* 蓝色，和原图一致 */
|
||||
margin-left: 8rpx;
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
@@ -155,30 +155,30 @@
|
||||
|
||||
/* 标题与描述 */
|
||||
.survey-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 10px 0;
|
||||
margin: 0px 0 20rpx 0;
|
||||
;
|
||||
}
|
||||
|
||||
.survey-desc {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
margin-bottom: 50rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.question-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -192,7 +192,7 @@
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
padding-left: 15px;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
/* 星级评分样式 */
|
||||
@@ -200,6 +200,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.star-item {
|
||||
|
||||
@@ -270,7 +270,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
@@ -284,31 +284,31 @@
|
||||
|
||||
/* 标题与描述 */
|
||||
.survey-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 10px 0;
|
||||
margin: 0px 0 20rpx 0;
|
||||
;
|
||||
}
|
||||
|
||||
.survey-desc {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 问题项 */
|
||||
.question-item {
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.question-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom:10rpx;
|
||||
line-height: 1.4;
|
||||
|
||||
.required {
|
||||
@@ -324,7 +324,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
padding-left: 15px;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@@ -373,7 +373,7 @@
|
||||
background-color: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-left: 15px;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.select-placeholder {
|
||||
@@ -434,7 +434,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-left: 15px;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.star-icon {
|
||||
font-size: 56rpx;
|
||||
@@ -449,7 +449,7 @@
|
||||
|
||||
/* 文本输入框 */
|
||||
.textarea-input {
|
||||
width: calc(100% - 15px);
|
||||
width: calc(100% - 30rpx);
|
||||
min-height: 240rpx;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
@@ -458,7 +458,7 @@
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
margin-left: 15px;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
/* 底部占位 & 提交按钮 */
|
||||
@@ -467,7 +467,7 @@
|
||||
}
|
||||
|
||||
.submit-btn-wrap {
|
||||
padding: 10px 15px 20px;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
// background-color: #fff;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view style="width: 100%;height: 1px;"> </view>
|
||||
<view style="width: 100%;height:2rpx;"> </view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
@@ -247,14 +247,14 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
/* --- 分段控制器样式 --- */
|
||||
@@ -276,12 +276,12 @@
|
||||
.list-container {}
|
||||
|
||||
.list-item {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #E6E6E6;
|
||||
border:2rpx solid #E6E6E6;
|
||||
background-color: #fff;
|
||||
|
||||
&.disabled {
|
||||
@@ -292,23 +292,23 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #2F77FD;
|
||||
border:2rpx solid #2F77FD;
|
||||
background-color: #F5FAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
// flex: 1;
|
||||
width: calc(100% - 50px);
|
||||
// margin-right: 10px;
|
||||
width: calc(100% - 100rpx);
|
||||
// margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 44rpx;
|
||||
margin-bottom:10rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -319,13 +319,13 @@
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 20rpx;
|
||||
|
||||
.info-time,
|
||||
.info-community {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 16px;
|
||||
line-height: 32rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -334,10 +334,10 @@
|
||||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
padding: 0px 0px;
|
||||
border-radius: 4px;
|
||||
border-radius:8rpx;
|
||||
|
||||
&.joined {
|
||||
color: #2F77FD;
|
||||
|
||||
@@ -196,7 +196,7 @@
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: 60rpx;
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
|
||||
/* background: #fff; */
|
||||
@@ -213,21 +213,21 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
/* Banner 轮播 */
|
||||
.banner-box {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
height: 111px;
|
||||
margin-bottom: 40rpx;
|
||||
height: 122rpx;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 111px;
|
||||
height: 122rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -236,28 +236,28 @@
|
||||
.func-section {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
width:12rpx;
|
||||
height: 48rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
border-radius:6rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -274,18 +274,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.func-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -300,7 +300,7 @@
|
||||
}
|
||||
|
||||
.func-name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
@@ -207,21 +207,21 @@
|
||||
|
||||
|
||||
.container {
|
||||
/* padding: 20px; */
|
||||
/* padding: 40rpx; */
|
||||
}
|
||||
|
||||
/* Banner 轮播 */
|
||||
.banner-box {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
height: 111px;
|
||||
margin-bottom: 40rpx;
|
||||
height: 122rpx;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 111px;
|
||||
height: 122rpx;
|
||||
|
||||
}
|
||||
|
||||
@@ -230,28 +230,28 @@
|
||||
.func-section {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
width:12rpx;
|
||||
height: 48rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
border-radius:6rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -268,18 +268,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.func-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -294,7 +294,7 @@
|
||||
}
|
||||
|
||||
.func-name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
BIN
property-uniapp-project/static/propertyImgs/noArrears.png
Normal file
BIN
property-uniapp-project/static/propertyImgs/noArrears.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Reference in New Issue
Block a user