NotificationMessage.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. .page{
  2. position: absolute;
  3. left: 0;
  4. top: 0;
  5. width: 100%;
  6. height: 100%;
  7. background-color: #f7f7f7;
  8. }
  9. .head-bg{
  10. position: relative;
  11. width: 100%;
  12. height: 220rpx;
  13. background: linear-gradient(#ff4f49,#fe7a61);
  14. }
  15. .header {
  16. display: flex;flex-direction: row;justify-content: center;align-items: center;color:$title;
  17. width:750rpx;height:calc(var(--status-bar-height) + 80rpx);padding-top:calc(var(--status-bar-height) + 0rpx);position: fixed;top:0;background-color: $base;z-index: 999;
  18. .title {
  19. font-size: 34rpx;
  20. }
  21. .left {
  22. position: absolute;left:20rpx;
  23. width:60rpx;height:60rpx;display: flex;justify-content: center;align-items: center;
  24. image {
  25. width:32rpx;
  26. }
  27. }
  28. }
  29. .bg001 {
  30. background-color: $base;width:750rpx;height:800rpx;position: fixed;top:0;z-index: -1;
  31. }
  32. .mainHeader {
  33. width:750rpx;height:250rpx;
  34. background-color: #fe7a61;
  35. .borderHeader {
  36. width:750rpx;height:0rpx;
  37. border-radius: 60rpx 60rpx 0rpx 0rpx;
  38. background-color: #f7f7f7;
  39. }
  40. }
  41. .bodyMain {
  42. width:750rpx;
  43. display: flex;
  44. align-items: center;
  45. justify-content: center;background-color: #f7f7f7;
  46. border-radius: 60rpx 60rpx 0rpx 0rpx;margin-top:-60rpx;padding-top: 80rpx;
  47. .nodata {
  48. display: flex;flex-direction: column;justify-content: center;align-items: center;
  49. font-size: 30rpx;color:$title50;padding-top: 200rpx;
  50. image {
  51. width:200rpx;margin-bottom: 50rpx;
  52. }
  53. }
  54. .list{
  55. width: 100%;
  56. margin-bottom: 10px;
  57. .date{
  58. display: flex;
  59. align-items: center;
  60. justify-content: center;
  61. width: 100%;
  62. height: 100rpx;
  63. text{
  64. padding: 10rpx 30rpx;
  65. background-color: rgba(0,0,0,0.2);
  66. color: #FFFFFF;
  67. font-size: 26rpx;
  68. border-radius: 10rpx;
  69. }
  70. }
  71. .item{
  72. padding: 0 4%;
  73. height: 240rpx;
  74. border-radius: 10rpx;
  75. .title{
  76. display: flex;
  77. justify-content: space-between;
  78. align-items: center;
  79. width: 100%;
  80. height: 80rpx;
  81. text{
  82. font-size: 32rpx;
  83. color: #222222;
  84. }
  85. }
  86. .describe{
  87. display: flex;
  88. align-items: center;
  89. width: 100%;
  90. height: 100rpx;
  91. text{
  92. font-size: 28rpx;
  93. color: #959595;
  94. }
  95. }
  96. .tdate {
  97. padding-top: 12rpx;
  98. font-size: 26rpx;
  99. color: #959595;
  100. }
  101. }
  102. }
  103. }