app.wxss 4.8 KB

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