classList.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. .top-box {
  2. display: flex;
  3. flex-direction: column;
  4. margin: 140rpx 0 0 50rpx;
  5. height: 170rpx;
  6. justify-content: space-around;
  7. }
  8. .top-box .info-title {
  9. margin-left: 10rpx;
  10. font-size: 70rpx;
  11. font-family: YSfont;
  12. color: #FFF;
  13. z-index: 2;
  14. text-shadow: 1px -1px 0px #c0c0c0, 2px -2px 0px #b0b0b0, 1px -1px 0px #a0a0a0, 2px -2px 0px #909090;
  15. }
  16. .top-box .info-subtitle {
  17. margin-left: 10rpx;
  18. font-size: 40rpx;
  19. font-family: YSfont;
  20. color: #FFF;
  21. z-index: 2;
  22. text-shadow: 1px -1px 0px #c0c0c0, 2px -2px 0px #b0b0b0, 1px -1px 0px #a0a0a0, 2px -2px 0px #909090;
  23. }
  24. .top-box .data-title {
  25. font-size: 60rpx;
  26. font-family: YSfont;
  27. color: #FFF;
  28. z-index: 2;
  29. margin-left: 20rpx;
  30. }
  31. .top-box .data-subtitle {
  32. font-size: 40rpx;
  33. font-family: YSfont;
  34. color: #FFF;
  35. z-index: 2;
  36. opacity: 0.8;
  37. margin-left: 20rpx;
  38. }
  39. .week-view {
  40. white-space: nowrap;
  41. }
  42. .week-view .week-item {
  43. display: inline-block;
  44. vertical-align: top;
  45. height: 140rpx;
  46. width: 120rpx;
  47. margin: 20rpx;
  48. padding: 20rpx;
  49. border-radius: 12rpx;
  50. background-color: #FFF;
  51. }
  52. .week-view .week-item .item-box {
  53. width: 100%;
  54. height: 100%;
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. justify-content: space-around;
  59. }
  60. .week-view .week-item .item-box .item-title {
  61. font-size: 30rpx;
  62. color: #898b91;
  63. }
  64. .week-view .week-item .item-box .item-day {
  65. font-size: 40rpx;
  66. font-weight: bold;
  67. color: #505155;
  68. }
  69. .week-view .week-item-select {
  70. display: inline-block;
  71. vertical-align: top;
  72. height: 160rpx;
  73. width: 140rpx;
  74. margin: 20rpx;
  75. padding: 20rpx;
  76. border-radius: 12rpx;
  77. background-color: #FFF;
  78. border: 3px solid #303133;
  79. }
  80. .week-view .week-item-select .item-box {
  81. width: 100%;
  82. height: 100%;
  83. display: flex;
  84. flex-direction: column;
  85. align-items: center;
  86. justify-content: space-between;
  87. }
  88. .week-view .week-item-select .item-box .tag-fill {
  89. border-radius: 6rpx;
  90. background-color: #303133;
  91. padding: 5rpx 20rpx;
  92. }
  93. .week-view .week-item-select .item-box .tag-fill .tag-text {
  94. font-size: 28rpx;
  95. color: #FFF;
  96. }
  97. .week-view .week-item-select .item-box .item-title {
  98. font-size: 34rpx;
  99. color: #303133;
  100. }
  101. .week-view .week-item-select .item-box .item-day {
  102. font-size: 50rpx;
  103. font-weight: bold;
  104. color: #303133;
  105. }
  106. .class-list {
  107. display: flex;
  108. flex-direction: column;
  109. justify-content: space-between;
  110. margin: 0 30rpx 20rpx 30rpx;
  111. }
  112. .class-list .class-item {
  113. display: flex;
  114. flex-direction: column;
  115. justify-content: space-around;
  116. margin: 10rpx 0;
  117. padding: 10rpx 0;
  118. height: 100rpx;
  119. border-bottom: 4rpx solid #f3f4f9;
  120. border-top: 4rpx solid #f3f4f9;
  121. border-image: linear-gradient(to right, #FFF, #d5d5d5) 1;
  122. }
  123. .class-list .class-item .item-title {
  124. font-size: 32rpx;
  125. font-weight: bold;
  126. color: #303133;
  127. }
  128. .class-list .class-item .item-subtitle {
  129. font-size: 30rpx;
  130. font-weight: bold;
  131. color: #909399;
  132. overflow: hidden;
  133. text-overflow: ellipsis;
  134. white-space: nowrap;
  135. }
  136. .image-box {
  137. display: flex;
  138. flex-direction: column;
  139. height: 100%;
  140. align-items: center;
  141. margin-bottom: 70rpx;
  142. }
  143. .detail-image1 {
  144. width: 500rpx;
  145. height: 600rpx;
  146. background-size: 100%;
  147. background-repeat: no-repeat;
  148. z-index: 51;
  149. }