page { background-color: #f6f7fb; padding-bottom: 0; min-height: 100vh; } .tabs { display: flex; align-items: center; background: #ffffff; height: 100rpx; padding: 0 20rpx; box-sizing: border-box; } .tabItem { font-size: 25rpx; color: #222222; margin-right: 60rpx; height: 42rpx; } .active2 { font-size: 25rpx; font-weight: 700; position: relative; } .active2::after { content: ''; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat; background-size: 100% 100%; width: 52rpx; height: 22rpx; position: absolute; left: 50%; bottom: -16rpx; transform: translateX(-50%); } .contentList { margin: 20rpx; min-height: 250rpx; background-color: #ffffff; border-radius: 20rpx; padding: 10rpx; } .order-header { display: flex; justify-content: space-between; padding: 20rpx; font-size: 24rpx; color: #a3a3a3; border-bottom: 1rpx solid #eee; } .status { color: #ff5252; font-weight: bold; } .goods-list { display: flex; flex-wrap: wrap; padding: 15rpx; gap: 15rpx; } .goods-item { width: 120rpx; height: 120rpx; } .goods-img { width: 100%; height: 100%; border-radius: 8rpx; } .order-footer { padding: 15rpx; margin-top: 20rpx; border-top: 1rpx solid #eee; } .order-footer-text { font-size: 24rpx; display: flex; justify-content: flex-end; } .order-footer-text text{ color: #ff3710; margin-left: 10rpx; font-weight: bold; } .btn-group { display: flex; justify-content: flex-end; margin-top: 30rpx; } .cancel-btn { width: 160rpx; height: 60rpx; background: #d9d9d9; color: black; border: 1rpx solid #ddd; border-radius: 30rpx; font-size: 24rpx; margin: 0 20rpx; } .pay-btn { width: 160rpx; height: 60rpx; background: #ff5252; color: #fff; border: none; border-radius: 30rpx; font-size: 24rpx; margin: 0; }