.box { background-color: #F9F9F9; padding-bottom: 40rpx; min-height: 90vh; overflow: hidden; box-sizing: border-box; } .nav-box { box-sizing: border-box; width: 100%; z-index: 2; background: #F9F9F9; padding-bottom: 25rpx; } .nav-box .nav-bar { display: flex; align-items: center; } .nav-box .nav-bar .nav-bar-left, .nav-box .nav-bar .nav-bar-right { padding: 0 20rpx; min-width: 36rpx; } .nav-box .nav-bar .nav-bar-left van-icon { vertical-align: sub; color: #333333; } .nav-box .nav-bar .nav-bar-title { flex: 1; text-align: center; font-weight: 400; font-size: 36rpx; color: #000000; } .nav-box .nav-bar-title {} .payItem { padding: 30rpx 20rpx; background-color: #fff; margin-bottom: 30rpx; } .payItem1 { display: flex; align-items: center; justify-content: space-between; } .payItem1_time { font-weight: 400; font-size: 26rpx; color: #222222; } .payItem1_state1 { font-weight: 400; font-size: 26rpx; color: #2583FF; } .payItem1_state2 { font-weight: 400; font-size: 26rpx; color: #D5AC66; } .payItem1_state3 { font-weight: 400; font-size: 26rpx; color: #222222; } .payItem1_state4 { font-weight: 400; font-size: 26rpx; color: #222222; } .payItem_row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rpx; } .payItem_title { font-weight: 400; font-size: 26rpx; color: #222222; } .payItem_con { font-weight: 400; font-size: 26rpx; color: #222222; } .payItem_payBox{ display: flex; justify-content: flex-end; margin-right: -4rpx; } .payItem_pay { width: 150rpx; height: 50rpx; background: #2583FF; border-radius: 100rpx 100rpx 100rpx 100rpx; font-weight: 400; font-size: 26rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .tabs { display: flex; align-items: center; margin-left: 20rpx; padding-top: 30rpx; margin-bottom: 30rpx; } .scroll-view { white-space: nowrap; /* 禁止换行 */ width: 100%; height: 60rpx; } .scroll-view .tab { font-weight: 400; font-size: 28rpx; color: #555555; margin-right: 70rpx; white-space: nowrap; display: inline-block; } .scroll-view .active { font-weight: bold; font-size: 32rpx; position: relative; } .scroll-view .active::after { content: ''; width: 100%; height: 10rpx; background: #2583FF; position: absolute; left: 50%; bottom: -10rpx; transform: translateX(-50%); } .scroll-view .active::before { width: 100%; height: 10rpx; filter: blur(6.599999904632568rpx); background: #FF5D73; position: absolute; left: 50%; bottom: -10rpx; transform: translateX(-50%); }