app.wxss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /**app.wxss**/
  2. @import '/component/iView/button/index.wxss';
  3. @import '/component/iView/radio/index.wxss';
  4. @import '/component/iView/input/index.wxss';
  5. @import '/assets/css/style.wxss';
  6. @import '/assets/css/select.wxss';
  7. page {
  8. /* Color 可以自定义相关配色 *//* 标准色 */
  9. --red: #e54d42;
  10. --orange: #f37b1d;
  11. --yellow: #fbbd08;
  12. --olive: #8dc63f;
  13. --green: #39b54a;
  14. --cyan: #1cbbb4;
  15. --blue: #0081ff;
  16. --purple: #6739b6;
  17. --mauve: #9c26b0;
  18. --pink: #e03997;
  19. --brown: #a5673f;
  20. --grey: #8799a3;
  21. --black: #333;
  22. --darkGray: #666;
  23. --gray: #aaa;
  24. --ghostWhite: #f1f1f1;
  25. --white: #fff;
  26. /* 浅色 */
  27. --redLight: #fadbd9;
  28. --orangeLight: #fde6d2;
  29. --yellowLight: #fef2ce;
  30. --oliveLight: #e8f4d9;
  31. --greenLight: #d7f0db;
  32. --cyanLight: #d2f1f0;
  33. --blueLight: #cce6ff;
  34. --purpleLight: #e1d7f0;
  35. --mauveLight: #ebd4ef;
  36. --pinkLight: #f9d7ea;
  37. --brownLight: #ede1d9;
  38. --greyLight: #e7ebed;
  39. /* 渐变色 */
  40. --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
  41. --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
  42. --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
  43. --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
  44. --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
  45. --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
  46. /* 阴影透明色 */
  47. --ShadowSize: 6rpx 6rpx 8rpx;
  48. --redShadow: rgba(204, 69, 59, 0.2);
  49. --orangeShadow: rgba(217, 109, 26, 0.2);
  50. --yellowShadow: rgba(224, 170, 7, 0.2);
  51. --oliveShadow: rgba(124, 173, 55, 0.2);
  52. --greenShadow: rgba(48, 156, 63, 0.2);
  53. --cyanShadow: rgba(28, 187, 180, 0.2);
  54. --blueShadow: rgba(0, 102, 204, 0.2);
  55. --purpleShadow: rgba(88, 48, 156, 0.2);
  56. --mauveShadow: rgba(133, 33, 150, 0.2);
  57. --pinkShadow: rgba(199, 50, 134, 0.2);
  58. --brownShadow: rgba(140, 88, 53, 0.2);
  59. --greyShadow: rgba(114, 130, 138, 0.2);
  60. --grayShadow: rgba(114, 130, 138, 0.2);
  61. --blackShadow: rgba(26, 26, 26, 0.2);
  62. background-color: var(--ghostWhite);
  63. font-size: 28rpx;
  64. color: var(--black);
  65. font-family: Helvetica Neue, Helvetica, sans-serif;
  66. }
  67. .container {
  68. height: 100%;
  69. display: flex;
  70. flex-direction: column;
  71. align-items: center;
  72. justify-content: space-between;
  73. padding: 200rpx 0;
  74. box-sizing: border-box;
  75. }
  76. .student-page {
  77. background: white;
  78. }
  79. .student-page button {
  80. height: 30px;
  81. line-height: 30px;
  82. margin-top: 7px;
  83. }
  84. .gapfilling-span {
  85. color: red;
  86. padding: 0px 30px;
  87. margin: 0px 5px;
  88. border-bottom: 3px double red;
  89. }
  90. .ueditor-p {
  91. display: inline !important;
  92. }
  93. .exam-hidden {
  94. display: none;
  95. }
  96. .exam-pick-input{
  97. height: 30px;
  98. }
  99. .radio-answer {
  100. line-height: 60rpx;
  101. margin-top:16rpx;
  102. }
  103. .checkbox-answer{
  104. margin-top:16rpx;
  105. line-height: 60rpx;
  106. }
  107. .fs30{font-size: 30rpx;}
  108. .fs40{font-size: 40rpx;}
  109. .fs50{font-size: 50rpx;}
  110. .fs60{font-size: 60rpx;}
  111. .ml20{margin-left: 20rpx;}
  112. .ml40{margin-left: 40rpx;}
  113. .ml50{margin-left: 50rpx;}
  114. .mt5{margin-top: 5rpx;}
  115. .mt10{margin-top: 10rpx;}
  116. .mt20{margin-top: 20rpx;}
  117. .mt30{margin-top: 30rpx;}
  118. .mt40{margin-top: 40rpx;}
  119. .mt50{margin-top: 50rpx;}
  120. .tc{text-align: center;}
  121. .tl{text-align: left;}
  122. .tr{text-align: right;}
  123. .fl{float: left;}
  124. .fr{float: right;}
  125. .pt20{ padding-top: 20rpx;}
  126. .pt30{ padding-top: 30rpx;}
  127. .p10{ padding:10rpx;}
  128. .p20{ padding:20rpx;}
  129. .p30{ padding:30rpx;}
  130. .m10{ margin:10rpx;}
  131. .m20{ margin:20rpx;}
  132. .m30{ margin:30rpx;}
  133. .cu-tabbar-height {
  134. min-height: 100rpx;
  135. height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  136. }
  137. .bg-white{ background:var(--white); }
  138. .cate-section {
  139. display: -webkit-box;
  140. display: -webkit-flex;
  141. display: -ms-flexbox;
  142. display: flex;
  143. -webkit-justify-content: space-around;
  144. -ms-flex-pack: distribute;
  145. justify-content: space-around;
  146. -webkit-box-align: center;
  147. -webkit-align-items: center;
  148. -ms-flex-align: center;
  149. align-items: center;
  150. -webkit-flex-wrap: wrap;
  151. -ms-flex-wrap: wrap;
  152. flex-wrap: wrap;
  153. padding: 30rpx 22rpx;
  154. background: #fff;
  155. /* 原图标颜色太深,不想改图了,所以加了透明度 */
  156. }
  157. .cate-section .cate-item {
  158. display: -webkit-box;
  159. display: -webkit-flex;
  160. display: -ms-flexbox;
  161. display: flex;
  162. -webkit-box-orient: vertical;
  163. -webkit-box-direction: normal;
  164. -webkit-flex-direction: column;
  165. -ms-flex-direction: column;
  166. flex-direction: column;
  167. -webkit-box-align: center;
  168. -webkit-align-items: center;
  169. -ms-flex-align: center;
  170. align-items: center;
  171. font-size: 26rpx;
  172. background: #fff;
  173. color: #5d626b;
  174. }
  175. .cate-section image {
  176. width: 60rpx;
  177. height: 60rpx;
  178. margin-bottom: 14rpx;
  179. border-radius: 10%;
  180. opacity: .7;
  181. -webkit-box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
  182. box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
  183. }
  184. button::after {
  185. border: none
  186. }
  187. .cate-item-3{
  188. width:33.33%;
  189. height:160rpx;
  190. margin-top:40rpx
  191. }
  192. .cate-item-4{
  193. width:25%;
  194. height:160rpx;
  195. margin-top:40rpx
  196. }
  197. .slide-image {
  198. width: 100%;
  199. height: 150px;
  200. }