.container { padding: 20rpx; } .nav-box{ padding-bottom: 10rpx; } .nav-bar-right{ opacity: 0; } page { padding-bottom: 120rpx; } .search-bar { display: flex; align-items: center; background: #f5f5f5; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; } .search-input { flex: 1; font-size: 28rpx; } .search-icon { width: 40rpx; height: 40rpx; margin-left: 20rpx; } .order-list { /* height: calc(100vh - 160rpx); */ } .order-item { background: #fff; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .order-field { display: flex; margin-bottom: 16rpx; } .label { color: #666; font-size: 28rpx; width: 180rpx; white-space: nowrap; } .value { color: #333; font-size: 28rpx; flex: 1; } .order-actions { display: flex; justify-content: flex-end; margin-top: 20rpx; } .action-btn { margin: 0; padding: 0 40rpx; height: 60rpx; line-height: 60rpx; font-size: 28rpx; border-radius: 30rpx; } .complete-btn { background: #2583FF; color: #fff; } .custom-navbar { position: fixed; top: 0; left: 0; right: 0; height: 88rpx; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); z-index: 999; } .navbar-title { font-size: 32rpx; font-weight: bold; } .navbar-right { font-size: 28rpx; color: #007aff; } /* 新增右下角按钮样式 */ .fixed-bottom-right { position: fixed; right: 32rpx; bottom: 32rpx; z-index: 999; } .profile-btn { width: 160rpx; height: 80rpx; line-height: 80rpx; text-align: center; background: #2583FF; color: #fff; border-radius: 40rpx; box-shadow: 0 4rpx 16rpx rgba(255, 81, 42, 0.3); } /* 新增固定定位样式 */ .fixed-top { background: #fff; } /* 调整内容区域的上边距 */ .content { } .search_icon { width: 30rpx; height: 30rpx; } .navBox { display: flex; align-items: center; padding: 0 20rpx; box-sizing: border-box; } .navItem { white-space: nowrap; font-weight: 400; font-size: 28rpx; color: #555555; } .active { font-weight: bold; position: relative; font-size: 32rpx; display: inline-block; } .active::after { content: ''; width: 90%; height: 10rpx; background: #2583FF; border-radius: 0rpx 0rpx 0rpx 0rpx; position: absolute; left: 50%; bottom: -8rpx; transform: translateX(-50%); } .btn1 { width: 120rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; border-radius: 30rpx; background-color: #2583ff; color: #fff; flex: unset; } .order-field2 { justify-content: flex-end; } .btn2 { width: 120rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; border-radius: 30rpx; background-color: #2583ff; color: #fff; flex: unset; } .btn3 { width: 120rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; border-radius: 30rpx; background-color: #2583ff; color: #fff; flex: unset; } .upkeep_select { display: flex; align-items: center; justify-content: space-between; font-weight: 400; font-size: 26rpx; color: #222222; background-color: #F9F9F9; padding: 16rpx 20rpx; margin-top: 20rpx; padding-bottom: 40rpx; } .upkeep_select .ipt { display: flex; align-items: center; justify-content: space-between; background-color: #fff; width: 710rpx; height: 98rpx; background: #FFFFFF; border-radius: 100rpx 100rpx 100rpx 100rpx; padding-left: 26rpx; padding-right: 26rpx; } .ipt input{ flex: 1; height: 100%; } .ipt image { width: 42rpx; height: 42rpx; } .searchBox{ display: flex; align-items: center; justify-content: center; padding-left: 40rpx; } .addBtn { font-weight: 400; font-size: 30rpx; color: #FFFFFF; width: 100rpx; height: 100rpx; background: #2583FF; position: fixed; right: 55rpx; bottom: 200rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .addBtn::after { content: ''; background: rgba(77, 154, 255,.5); filter: blur(10.899999618530273rpx); width: 90rpx; height: 90rpx; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden; z-index: -1; }