diff --git a/pages/finance/finance.vue b/pages/finance/finance.vue index 4e13c26..c9e4967 100644 --- a/pages/finance/finance.vue +++ b/pages/finance/finance.vue @@ -12,19 +12,17 @@ - - - - {{item.name}} - - - 利率:{{item.rate}}% - - - - 产品简介:{{item.introduction }} + + + {{item.name}} - + + 利率:{{item.rate}}% + + + 产品简介:{{item.introduction}} + + 查看详情 @@ -38,12 +36,12 @@ - + @@ -150,7 +199,7 @@ } } - // 卡片样式 - 调整为白色背景 + // 卡片样式 .card { margin: 20rpx 30rpx; background-color: #ffffff; @@ -202,7 +251,7 @@ } } - // 底部按钮 - 调整为深蓝色 + // 底部按钮 .bottom-actions { position: fixed; bottom: 0; @@ -235,4 +284,4 @@ .u-m-b-20 { margin-bottom: 20rpx; } - + \ No newline at end of file diff --git a/pages/finance/service.vue b/pages/finance/service.vue index e0299c3..8984439 100644 --- a/pages/finance/service.vue +++ b/pages/finance/service.vue @@ -68,9 +68,15 @@ + + + + + + - - - + + + + 发送 + - - 发送 - @@ -506,12 +514,7 @@ const handleHumanService = () => { .input-container { display: flex; align-items: center; - gap: 20rpx; - - .custom-input { - flex: 1; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - } + justify-content: space-between; .switch-icon { width: 80rpx; @@ -523,16 +526,27 @@ const handleHumanService = () => { justify-content: center; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); transition: all 0.3s; + flex-shrink: 0; &:active { transform: scale(0.95); } } - } - - .send-btn { - width: 200rpx; - align-self: flex-end; + + .custom-input { + flex: 1; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + margin: 0 20rpx; + } + + .send-btn { + flex-shrink: 0; + transition: all 0.3s; + + &:active { + transform: scale(0.98); + } + } } } @@ -540,7 +554,6 @@ const handleHumanService = () => { .button-mode { display: flex; align-items: center; - gap: 20rpx; .switch-icon { width: 80rpx; @@ -552,6 +565,7 @@ const handleHumanService = () => { justify-content: center; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); transition: all 0.3s; + flex-shrink: 0; &:active { transform: scale(0.95); @@ -559,6 +573,9 @@ const handleHumanService = () => { } .consult-btn { + flex: 1; + margin-left: 20rpx; + .btn-icon { margin-right: 15rpx; } @@ -583,5 +600,17 @@ const handleHumanService = () => { grid-template-columns: repeat(4, 1fr); gap: 10rpx; } + + .human-service .input-mode .input-container { + gap: 10rpx; + + .custom-input { + margin: 0 10rpx; + } + + .send-btn { + width: 120rpx; + } + } } \ No newline at end of file