return-notice.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <!-- 添加退回提示区域 -->
  3. <view class="return-notice">
  4. <view class="notice-content">
  5. <view class="title-row">
  6. <text class="title">退回不通过书籍</text>
  7. <text class="tag">首次免费退</text>
  8. </view>
  9. <view class="countdown">
  10. 您需要在<text class="time">3天05小时16分52秒</text>内处理
  11. </view>
  12. </view>
  13. <u-icon name="arrow-right" size="28" color="#999"></u-icon>
  14. </view>
  15. </template>
  16. <style lang="scss" scoped>
  17. // 添加新的样式
  18. .return-notice {
  19. margin: 30rpx;
  20. padding: 30rpx;
  21. display: flex;
  22. justify-content: space-between;
  23. align-items: center;
  24. background: #FFF4F4;
  25. border-radius: 10rpx;
  26. border: 2rpx solid #FF0000;
  27. .notice-content {
  28. flex: 1;
  29. .title-row {
  30. display: flex;
  31. align-items: center;
  32. margin-bottom: 12rpx;
  33. .title {
  34. font-size: 32rpx;
  35. font-weight: 500;
  36. color: #333;
  37. }
  38. .tag {
  39. margin-left: 12rpx;
  40. padding: 4rpx 12rpx;
  41. background: #FF4B4B;
  42. color: #fff;
  43. font-size: 24rpx;
  44. border-radius: 4rpx;
  45. }
  46. }
  47. .countdown {
  48. font-size: 28rpx;
  49. color: #666;
  50. .time {
  51. color: #FF4B4B;
  52. }
  53. }
  54. }
  55. }
  56. </style>