租聘申请界面0.9

This commit is contained in:
minimaxagent1 2025-08-13 15:11:09 +08:00
parent 5ae97394a4
commit e6b0045114
2 changed files with 20 additions and 8 deletions

View File

@ -13,5 +13,6 @@ export const commonEnum = {
TEMP3: 'https://api.ccttiot.com/image-1754987141539.png', TEMP3: 'https://api.ccttiot.com/image-1754987141539.png',
LEASE_BACKGROUND: 'https://api.ccttiot.com/image-1755063111406.png', LEASE_BACKGROUND: 'https://api.ccttiot.com/image-1755063111406.png',
FIRE: 'https://api.ccttiot.com/image-1755063906561.png', FIRE: 'https://api.ccttiot.com/image-1755063906561.png',
DOWN_ARROW: 'https://api.ccttiot.com/image-1755068355306.png',
} }
export default commonEnum export default commonEnum

View File

@ -101,7 +101,9 @@
<view class="payment-details"> <view class="payment-details">
<view class="details-header" @click="toggleDetails"> <view class="details-header" @click="toggleDetails">
<text class="details-title">明细</text> <text class="details-title">明细</text>
<text :class="{ expanded: showDetails }" class="details-arrow"></text> <view :class="{ expanded: showDetails }" class="arrow-wrapper">
<image :src="commonEnum.DOWN_ARROW" class="details-arrow"></image>
</view>
</view> </view>
<view v-if="showDetails" class="details-content"> <view v-if="showDetails" class="details-content">
@ -498,13 +500,16 @@ export default {
// //
.payment-section { .payment-section {
display: flex;
flex-direction: column;
.pay-button { .pay-button {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background: #f15a04; background: #f15a04;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 50rpx; border-radius: 5rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
margin-bottom: 40rpx; margin-bottom: 40rpx;
@ -514,25 +519,31 @@ export default {
.payment-details { .payment-details {
.details-header { .details-header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: space-between;
padding: 20rpx 0; padding: 20rpx 0;
border-bottom: 2rpx solid #f0f0f0; border-bottom: 2rpx solid #f0f0f0;
.details-title { .details-title {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #f15a04;
} }
.details-arrow { .arrow-wrapper {
font-size: 24rpx; display: flex;
color: #999; align-items: center;
transition: transform 0.3s; justify-content: center;
transition: transform 0.3s ease;
&.expanded { &.expanded {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
.details-arrow {
width: 20rpx;
height: 10rpx;
}
} }
.details-content { .details-content {