.container { padding: 20rpx; } .item { padding: 20rpx; height: 130rpx; margin-bottom: 30rpx; border-radius: 20rpx; display: flex; justify-content: space-between; align-items: center; border: 3rpx solid #ff775a; background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%); } .item_left { font-size: 40rpx; font-weight: bold; width: 170rpx; height: 170rpx; line-height: 170rpx; padding-left: 30rpx; background-color: #ffffff; border-radius: 20rpx 80rpx 80rpx 20rpx; border: 3rpx solid #ff775a; position: relative; left: -22rpx; } .item_center { flex: 1; margin: 0 20rpx; } .title { font-size: 32rpx; color: white; font-weight: bold; } .time { color: #ffffff9a; font-size: 24rpx; margin: 10rpx 0; } .desc { color: #fff; font-size: 26rpx; } .item_right { margin-right: 20rpx; } .status { width: 120rpx; padding: 10rpx; text-align: center; background-color: #fff; border-radius: 50rpx; color: #ff7557; font-size: 24rpx; font-weight: bold; } .status2 { position: absolute; top: 0; right: 0; width: 150rpx; height: 120rpx; overflow: hidden; transform: rotate(0deg); } .status2::after { content: attr(data-status); position: absolute; top: 10rpx; right: -50rpx; width: 180rpx; height: 40rpx; line-height: 40rpx; text-align: center; color: #921d0c; font-size: 24rpx; font-weight: bold; transform: rotate(30deg); border-radius: 0 20rpx 0 0; background: linear-gradient(90deg, #f0dfa5 0%, #c6a437 100%); box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1); } .item { position: relative; overflow: visible; } .bottom { position: fixed; bottom: 0rpx; left: 0; right: 0; z-index: 1000; color: #0079fe; text-align: center; font-size: 32rpx; font-weight: bold; background-color: #fff; padding: 20rpx 0 40rpx 0; } /* 弹窗样式 */ .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .popup-content { width: 600rpx; padding: 60rpx 40rpx; background-color: white; border-radius: 20rpx; text-align: center; box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); } .popup-icon { width: 160rpx; height: 160rpx; background-color: #e8fdf2; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 40rpx; } .checkmark { width: 30rpx; height: 70rpx; border-right: 20rpx solid #52c41a; border-bottom: 20rpx solid #52c41a; transform: rotate(45deg); } .popup-title { font-size: 40rpx; font-weight: bold; color: #262626; margin-bottom: 20rpx; } .popup-desc { font-size: 28rpx; color: #8c8c8c; margin-bottom: 50rpx; line-height: 40rpx; } .popup-btn { width: 100%; height: 90rpx; background-color: #ff4d4f; color: white; border: none; border-radius: 45rpx; font-size: 32rpx; font-weight: bold; padding: 0; }