index.wxss 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .data-v-71e217db .answer .van-cell {
  28. background-color: #16CC16 !important;
  29. color: #ffffff;
  30. }
  31. .data-v-71e217db .van-cell {
  32. margin: 10rpx;
  33. border-radius: 20rpx;
  34. }
  35. .content.data-v-71e217db {
  36. width: 100%;
  37. height: 100vh;
  38. background-color: #FFFFFF;
  39. }
  40. .swiper-box.data-v-71e217db {
  41. height: calc(100vh - 120rpx);
  42. margin: 0rpx 20rpx;
  43. }
  44. .swiper-box swiper-item.data-v-71e217db {
  45. overflow: auto;
  46. }
  47. .top-box.data-v-71e217db {
  48. height: 60rpx;
  49. padding: 30rpx;
  50. display: -webkit-box;
  51. display: -webkit-flex;
  52. display: flex;
  53. -webkit-box-pack: justify;
  54. -webkit-justify-content: space-between;
  55. justify-content: space-between;
  56. -webkit-box-align: center;
  57. -webkit-align-items: center;
  58. align-items: center;
  59. }
  60. .top-box .icon.data-v-71e217db {
  61. width: 60rpx;
  62. }
  63. .top-box .set.data-v-71e217db {
  64. color: red;
  65. }
  66. .topic-box.data-v-71e217db {
  67. display: -webkit-box;
  68. display: -webkit-flex;
  69. display: flex;
  70. -webkit-box-pack: center;
  71. -webkit-justify-content: center;
  72. justify-content: center;
  73. }
  74. .topic-box .topic-top.data-v-71e217db {
  75. display: -webkit-box;
  76. display: -webkit-flex;
  77. display: flex;
  78. padding: 10rpx;
  79. }
  80. .topic-box .topic-top .topic-left.data-v-71e217db {
  81. display: -webkit-box;
  82. display: -webkit-flex;
  83. display: flex;
  84. -webkit-box-orient: vertical;
  85. -webkit-box-direction: normal;
  86. -webkit-flex-direction: column;
  87. flex-direction: column;
  88. }
  89. .topic-box .topic-top .topic-left .topic-type.data-v-71e217db {
  90. background: #E31818;
  91. border-radius: 10rpx;
  92. color: #FFFFFF;
  93. width: 66rpx;
  94. height: 30rpx;
  95. display: -webkit-box;
  96. display: -webkit-flex;
  97. display: flex;
  98. -webkit-box-pack: center;
  99. -webkit-justify-content: center;
  100. justify-content: center;
  101. -webkit-box-align: center;
  102. -webkit-align-items: center;
  103. align-items: center;
  104. border-radius: 15px 15px 0px 15px;
  105. padding: 10rpx;
  106. margin-bottom: 18rpx;
  107. }
  108. .topic-box .topic-top .topic-tit.data-v-71e217db {
  109. padding: 10rpx;
  110. }
  111. .topic-box .topic-right.data-v-71e217db {
  112. -webkit-box-flex: 1;
  113. -webkit-flex: 1;
  114. flex: 1;
  115. display: -webkit-box;
  116. display: -webkit-flex;
  117. display: flex;
  118. -webkit-box-orient: vertical;
  119. -webkit-box-direction: normal;
  120. -webkit-flex-direction: column;
  121. flex-direction: column;
  122. padding: 0 10rpx;
  123. }
  124. .topic-box .topic-right .topic-img.data-v-71e217db {
  125. padding: 10rpx;
  126. margin: auto;
  127. width: 500rpx;
  128. height: 250rpx;
  129. }
  130. .topic-box .topic-right .topic-opt.data-v-71e217db {
  131. padding: 30rpx 5rpx;
  132. }
  133. .topic-box .topic-right .topic-opt .submit.data-v-71e217db {
  134. margin: auto;
  135. margin-top: 150rpx;
  136. height: 80rpx;
  137. background: -webkit-linear-gradient(left, #E31818, #ED3E24, #ED4F24);
  138. background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
  139. border-radius: 35rpx;
  140. display: -webkit-box;
  141. display: -webkit-flex;
  142. display: flex;
  143. -webkit-box-pack: center;
  144. -webkit-justify-content: center;
  145. justify-content: center;
  146. -webkit-box-align: center;
  147. -webkit-align-items: center;
  148. align-items: center;
  149. color: #FFFFFF;
  150. }
  151. .flag.data-v-71e217db {
  152. padding: 30rpx 5rpx;
  153. display: -webkit-box;
  154. display: -webkit-flex;
  155. display: flex;
  156. -webkit-box-pack: center;
  157. -webkit-justify-content: center;
  158. justify-content: center;
  159. }
  160. .flag .result.data-v-71e217db {
  161. display: inline-block;
  162. background-color: #16CC16;
  163. width: 690rpx;
  164. padding: 20rpx;
  165. display: -webkit-box;
  166. display: -webkit-flex;
  167. display: flex;
  168. -webkit-box-align: center;
  169. -webkit-align-items: center;
  170. align-items: center;
  171. -webkit-box-pack: center;
  172. -webkit-justify-content: center;
  173. justify-content: center;
  174. border-radius: 20rpx;
  175. color: #ffffff;
  176. }
  177. .item-titBox.data-v-71e217db {
  178. display: -webkit-box;
  179. display: -webkit-flex;
  180. display: flex;
  181. -webkit-box-pack: justify;
  182. -webkit-justify-content: space-between;
  183. justify-content: space-between;
  184. -webkit-box-align: center;
  185. -webkit-align-items: center;
  186. align-items: center;
  187. padding: 20rpx;
  188. border-bottom: 1rpx solid #e8e8e8;
  189. }
  190. .item-titBox .item-tit.data-v-71e217db {
  191. border-left: 8rpx solid #E31818;
  192. font-size: 30rpx;
  193. padding: 0 11rpx;
  194. }
  195. .parsing-text.data-v-71e217db {
  196. padding: 30rpx;
  197. }
  198. @charset "UTF-8";
  199. /**
  200. * 这里是uni-app内置的常用样式变量
  201. *
  202. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  203. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  204. *
  205. */
  206. /**
  207. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  208. *
  209. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  210. */
  211. /* 颜色变量 */
  212. /* 行为相关颜色 */
  213. /* 文字基本颜色 */
  214. /* 背景颜色 */
  215. /* 边框颜色 */
  216. /* 尺寸变量 */
  217. /* 文字尺寸 */
  218. /* 图片尺寸 */
  219. /* Border Radius */
  220. /* 水平间距 */
  221. /* 垂直间距 */
  222. /* 透明度 */
  223. /* 文章场景相关 */
  224. .content {
  225. background-color: #F1F1F1;
  226. }
  227. .grid {
  228. display: -webkit-box;
  229. display: -webkit-flex;
  230. display: flex;
  231. -webkit-box-pack: justify;
  232. -webkit-justify-content: space-between;
  233. justify-content: space-between;
  234. padding: 1% 2%;
  235. margin-bottom: 2%;
  236. border-bottom-left-radius: 10px;
  237. border-bottom-right-radius: 10px;
  238. }
  239. .grid .grid-item {
  240. width: 50px;
  241. height: 50px;
  242. display: -webkit-box;
  243. display: -webkit-flex;
  244. display: flex;
  245. -webkit-box-pack: center;
  246. -webkit-justify-content: center;
  247. justify-content: center;
  248. -webkit-box-orient: vertical;
  249. -webkit-box-direction: normal;
  250. -webkit-flex-direction: column;
  251. flex-direction: column;
  252. -webkit-box-align: center;
  253. -webkit-align-items: center;
  254. align-items: center;
  255. font-size: 12px;
  256. }
  257. .swiper-box {
  258. width: 100vw;
  259. height: 56.25vw;
  260. }
  261. .swiper-box .image {
  262. width: 100%;
  263. }
  264. .sticky {
  265. position: -webkit-sticky;
  266. position: sticky;
  267. top: 54px;
  268. left: 0;
  269. background-color: #fff;
  270. z-index: 9;
  271. }
  272. .sticky-top {
  273. position: -webkit-sticky;
  274. position: sticky;
  275. top: 0px;
  276. left: 0;
  277. background-color: #4fc08d;
  278. z-index: 10;
  279. display: -webkit-box;
  280. display: -webkit-flex;
  281. display: flex;
  282. -webkit-box-pack: center;
  283. -webkit-justify-content: center;
  284. justify-content: center;
  285. -webkit-box-align: center;
  286. -webkit-align-items: center;
  287. align-items: center;
  288. padding-right: 3%;
  289. }
  290. .sticky-top .top-search {
  291. -webkit-box-flex: 1;
  292. -webkit-flex: 1;
  293. flex: 1;
  294. }
  295. .sticky-bottom {
  296. position: -webkit-sticky;
  297. position: sticky;
  298. bottom: 0;
  299. left: 0;
  300. background-color: #fff;
  301. z-index: 10;
  302. }
  303. .fadeIn {
  304. -webkit-animation: fadeIn 5s linear 2s infinite alternate;
  305. animation: fadeIn 5s linear 2s infinite alternate;
  306. }
  307. @-webkit-keyframes fadeIn {
  308. from {
  309. opacity: 0;
  310. }
  311. to {
  312. opacity: 1;
  313. }
  314. }
  315. @keyframes fadeIn {
  316. from {
  317. opacity: 0;
  318. }
  319. to {
  320. opacity: 1;
  321. }
  322. }