index.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. @import "../../annunciate/incidental.scss";//通告底部样式
  2. /* 顶部 */
  3. .header {
  4. display: flex;
  5. align-items: center;
  6. width: 750rpx;
  7. height: 88rpx;
  8. background-color: var(--bgColor);
  9. &_title {
  10. height: 50rpx;
  11. font-size: 36rpx;
  12. font-family: PingFang SC-Bold, PingFang SC;
  13. font-weight: bold;
  14. color: #FFFFFF;
  15. margin: 0 8rpx 0 24rpx;
  16. }
  17. }
  18. /* 轮播图区域 */
  19. .banner {
  20. position: relative;
  21. width: 750rpx;
  22. height: 170rpx;
  23. background-color: var(--bgColor);
  24. padding-top: 24rpx;
  25. // margin-bottom: 126rpx;
  26. /* 椭圆底部 */
  27. &_oval {
  28. position: absolute;
  29. height: 50px;
  30. width: 100%;
  31. top: 160rpx;
  32. background-color: var(--bgColor);
  33. border-radius: 0 0 100% 50% / 100%;
  34. }
  35. /* 主内容 */
  36. &_content {
  37. position: absolute;
  38. height: 300rpx;
  39. left: 30rpx;
  40. box-shadow: inset 0px 2rpx 0px 2rpx rgba(255, 255, 255, 0.16);
  41. margin: 0 !important;
  42. }
  43. }
  44. /* 滚动播放 */
  45. .scroll-area {
  46. width: 690rpx;
  47. height: 40rpx;
  48. margin: 20rpx auto 0;
  49. .notice-bar {
  50. flex: 1;
  51. height: 40rpx;
  52. line-height: 50rpx;
  53. padding: 0 !important;
  54. margin: 0 !important;
  55. font-size: 28rpx;
  56. font-family: PingFang SC-Regular, PingFang SC;
  57. color: #666666;
  58. .iconfont {
  59. color: #FA8C16;
  60. margin-right: 20rpx;
  61. }
  62. }
  63. }
  64. /* 宫格区域 */
  65. .grld {
  66. display: flex;
  67. flex-wrap: wrap;
  68. .item {
  69. width: 172rpx;
  70. height: 170rpx;
  71. box-sizing: border-box;
  72. display: flex;
  73. flex-direction: column;
  74. align-items: center;
  75. .iconfont {
  76. height: 64rpx;
  77. line-height: 64rpx;
  78. font-size: 64rpx;
  79. color: var(--assist);
  80. margin-top: 30rpx;
  81. }
  82. text {
  83. font-size: 28rpx;
  84. font-family: PingFangSC-Regular-, PingFangSC-Regular;
  85. color: #333333;
  86. margin-top: 16rpx;
  87. }
  88. }
  89. }
  90. /* 概况 */
  91. .general-situation {
  92. display: flex;
  93. align-items: center;
  94. justify-content: space-between;
  95. width: 671.5rpx;
  96. height: 40rpx;
  97. margin: 32rpx auto 0;
  98. .title {
  99. font-size: 30rpx;
  100. font-family: PingFang SC-Bold, PingFang SC;
  101. font-weight: bold;
  102. color: #333333;
  103. text {
  104. color: #FA8C16;
  105. }
  106. }
  107. .time {
  108. font-size: 24rpx;
  109. font-family: PingFang SC-Regular, PingFang SC;
  110. color: #999999;
  111. }
  112. }
  113. /* 概况数据展示 */
  114. .data-display {
  115. display: flex;
  116. flex-wrap: wrap;
  117. justify-content: space-around;
  118. height: 290rpx;
  119. .item {
  120. width: 33.33%;
  121. height: 100rpx;
  122. margin-top: 30rpx;
  123. text-align: center;
  124. .label {
  125. height: 34rpx;
  126. line-height: 34rpx;
  127. font-size: 24rpx;
  128. font-family: PingFang SC-Regular, PingFang SC;
  129. color: #999999;
  130. }
  131. .nubmer {
  132. height: 50rpx;
  133. line-height: 50rpx;
  134. font-size: 36rpx;
  135. font-family: PingFang SC-Bold, PingFang SC;
  136. font-weight: bold;
  137. color: #333333;
  138. margin-top: 14rpx;
  139. }
  140. }
  141. }
  142. /* 通告 */
  143. .annunciate {
  144. .unread {
  145. display: flex;
  146. align-items: center;
  147. height: 34rpx;
  148. font-size: 24rpx;
  149. font-family: PingFang SC-Regular, PingFang SC;
  150. color: #666666;
  151. .circle {
  152. width: 16rpx;
  153. height: 16rpx;
  154. background: #FF3B30;
  155. border-radius: 50%;
  156. margin: 4rpx 10rpx 0;
  157. }
  158. .icon {
  159. margin-top: 3rpx;
  160. }
  161. }
  162. &_banner {
  163. width: 630rpx;
  164. height: 160rpx;
  165. border-radius: 16rpx;
  166. box-sizing: border-box;
  167. border: 1px solid aqua;
  168. margin: 20rpx auto 0;
  169. }
  170. navigator {
  171. width: 100%;
  172. padding-top: 20rpx;
  173. padding-left: 20rpx;
  174. .item {
  175. width: calc(100%-20rpx);
  176. height: 150rpx;
  177. border-bottom: 2rpx solid #eeeeee;
  178. .title {
  179. width: 650rpx;
  180. height: 40rpx;
  181. line-height: 40rpx;
  182. font-size: 28rpx;
  183. font-family: PingFang SC-Bold, PingFang SC;
  184. font-weight: bold;
  185. color: #333333;
  186. }
  187. .explain {
  188. width: 640rpx;
  189. height: 34rpx;
  190. font-size: 24rpx;
  191. font-family: PingFang SC-Regular, PingFang SC;
  192. color: #666666;
  193. margin-top: 10rpx;
  194. }
  195. }
  196. }
  197. navigator:last-child .item {
  198. border: none;
  199. }
  200. }