public.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. /* 以下为测试 */
  2. .showboder {
  3. border: blue solid 1px;
  4. }
  5. .showboder2 {
  6. border: #ff55ff solid 5px;
  7. }
  8. .showboder3 {
  9. border: #EA252C solid 1px;
  10. }
  11. .showboder4 {
  12. border: #55ffff solid 1px;
  13. }
  14. .uni-selector-select .uni-picker-item.selected{
  15. color: #990055 ;
  16. }
  17. /* 以上为测试 */
  18. /* 以下为正文 */
  19. .bgclF8 {
  20. background-color: #F8F8FB;
  21. }
  22. .mybody {
  23. height: 100vh;
  24. }
  25. view {
  26. font-family: MicrosoftYaHei;
  27. color: #161616;
  28. }
  29. .content {
  30. flex: 1;
  31. }
  32. /* login */
  33. .login-righttitle {
  34. font-size: 1.145vw;
  35. font-family: MicrosoftYaHei;
  36. color: #020202;
  37. line-height: 1.5vw;
  38. letter-spacing: 1px;
  39. display: flex;
  40. justify-content: center;
  41. }
  42. .btn-hover {
  43. background: #EA252C;
  44. color: #FFFFFF;
  45. }
  46. .btn-normal {
  47. background-color: #F4F4F4;
  48. color: #626262;
  49. }
  50. a:link,a:visited,a:hover,a:active {
  51. color: #FF0000;
  52. text-decoration: none;
  53. }
  54. /* ------ */
  55. .df {
  56. display: flex;
  57. display: -webkit-flex;
  58. /* Safari */
  59. }
  60. /*
  61. nowrap(默认):不换行
  62. wrap:换行在第一行的上方
  63. wrap-reverse:换行,第一行在下方
  64. */
  65. .ffrn {
  66. flex-flow: row nowrap;
  67. }
  68. .ffrw {
  69. flex-flow: row wrap;
  70. }
  71. .ffrwr {
  72. flex-flow: row wrap-reverse;
  73. }
  74. .ffrrn {
  75. flex-flow: row-reverse nowrap;
  76. }
  77. .ffrrw {
  78. flex-flow: row-reverse wrap;
  79. }
  80. .ffrrwr {
  81. flex-flow: row-reverse wrap-reverse;
  82. }
  83. .ffcn {
  84. flex-flow: column nowrap;
  85. }
  86. .ffcw {
  87. flex-flow: column wrap;
  88. }
  89. .ffcwr {
  90. flex-flow: column wrap-reverse;
  91. }
  92. .ffcrn {
  93. flex-flow: column-reverse nowrap;
  94. }
  95. .ffcrw {
  96. flex-flow: column-reverse wrap;
  97. }
  98. .ffcrwr {
  99. flex-flow: column-reverse wrap-reverse;
  100. }
  101. /* flex-direction 属性规定灵活项目的方向。 */
  102. .fdc {
  103. flex-direction: column;
  104. }
  105. .fdcr {
  106. flex-direction: column-reverse;
  107. }
  108. .fdinherit {
  109. flex-direction: inherit;
  110. }
  111. .fdinitial {
  112. flex-direction: initial;
  113. }
  114. .fdr {
  115. flex-direction: row;
  116. }
  117. .fdrr {
  118. flex-direction: row-reverse;
  119. }
  120. .fdu {
  121. flex-direction: unset;
  122. }
  123. /*
  124. flex-start(默认值):左对齐
  125. flex-end:右对齐
  126. center: 居中
  127. space-between:两端对齐,项目之间的间隔都相等。
  128. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  129. space-evenly:项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。
  130. */
  131. .jcfs {
  132. justify-content: flex-start;
  133. }
  134. .jcfe {
  135. justify-content: flex-end;
  136. }
  137. .jcc {
  138. justify-content: center;
  139. }
  140. .jcsb {
  141. justify-content: space-between;
  142. }
  143. .jcsa {
  144. justify-content: space-around;
  145. }
  146. .jcse{
  147. justify-content: space-evenly;
  148. }
  149. /*
  150. flex-start:交叉轴的起点对齐。
  151. flex-end:交叉轴的终点对齐。
  152. center:交叉轴的中点对齐。
  153. baseline: 项目的第一行文字的基线对齐。
  154. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  155. */
  156. .aifs {
  157. align-items: flex-start;
  158. }
  159. .aife {
  160. align-items: flex-end;
  161. }
  162. .aic {
  163. align-items: center;
  164. }
  165. .aib {
  166. align-items: baseline;
  167. }
  168. .ais {
  169. align-items: stretch;
  170. }
  171. /*
  172. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
  173. flex-start:与交叉轴的起点对齐。
  174. flex-end:与交叉轴的终点对齐。
  175. center:与交叉轴的中点对齐。
  176. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  177. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  178. stretch(默认值):轴线占满整个交叉轴。
  179. */
  180. .acfs {
  181. align-content: flex-start;
  182. }
  183. .acfe {
  184. align-content: flex-end;
  185. }
  186. .acc {
  187. align-content: center;
  188. }
  189. .acsb {
  190. align-content: space-between;
  191. }
  192. .acsa {
  193. align-content: space-around;
  194. }
  195. .acs {
  196. align-content: stretch;
  197. }
  198. /*
  199. order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  200. */
  201. .o0 {
  202. order: 0;
  203. }
  204. .o1 {
  205. order: 1;
  206. }
  207. .o2 {
  208. order: 2;
  209. }
  210. .o3 {
  211. order: 3;
  212. }
  213. .o4 {
  214. order: 4;
  215. }
  216. .o5 {
  217. order: 5;
  218. }
  219. .o6 {
  220. order: 6;
  221. }
  222. .o7 {
  223. order: 7;
  224. }
  225. .o8 {
  226. order: 8;
  227. }
  228. .o9 {
  229. order: 9;
  230. }
  231. /*
  232. flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  233. 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
  234. 注意:该属性是瓜分剩下的空间,而并非父元素的百分比长度
  235. */
  236. .fg0 {
  237. flex-grow: 0;
  238. }
  239. .fg1 {
  240. flex-grow: 1;
  241. }
  242. .fg2 {
  243. flex-grow: 2;
  244. }
  245. .fg3 {
  246. flex-grow: 3;
  247. }
  248. .fg4 {
  249. flex-grow: 4;
  250. }
  251. .fg5 {
  252. flex-grow: 5;
  253. }
  254. .fg6 {
  255. flex-grow: 6;
  256. }
  257. .fg7 {
  258. flex-grow: 7;
  259. }
  260. .fg8 {
  261. flex-grow: 8;
  262. }
  263. .fg9 {
  264. flex-grow: 9;
  265. }
  266. /*
  267. flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  268. 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
  269. 也就是说当空间不足的时候缩小比例,为0代表不缩小,为2就代表比一般的缩小快一倍
  270. */
  271. .fs0 {
  272. flex-shrink: 0;
  273. }
  274. .fs1 {
  275. flex-shrink: 1;
  276. }
  277. .fs2 {
  278. flex-shrink: 2;
  279. }
  280. .fs3 {
  281. flex-shrink: 3;
  282. }
  283. .fs4 {
  284. flex-shrink: 4;
  285. }
  286. .fs5 {
  287. flex-shrink: 5;
  288. }
  289. .fs6 {
  290. flex-shrink: 6;
  291. }
  292. .fs7 {
  293. flex-shrink: 7;
  294. }
  295. .fs8 {
  296. flex-shrink: 8;
  297. }
  298. .fs9 {
  299. flex-shrink: 9;
  300. }
  301. /*
  302. align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
  303. 该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
  304. */
  305. .asa {
  306. align-self: auto;
  307. }
  308. .asfs {
  309. align-self: flex-start;
  310. }
  311. .asfe {
  312. align-self: flex-end;
  313. }
  314. .asc {
  315. align-self: center;
  316. }
  317. .asb {
  318. align-self: baseline;
  319. }
  320. .asb {
  321. align-self: stretch;
  322. }
  323. .w01 {
  324. width: 4.166666667%;
  325. }
  326. .w02 {
  327. width: 8.333333333%;
  328. }
  329. .w03 {
  330. width: 12.50000000%;
  331. }
  332. .w04 {
  333. width: 16.66666667%;
  334. }
  335. .w05 {
  336. width: 20.83333333%;
  337. }
  338. .w06 {
  339. width: 25.00000000%;
  340. }
  341. .w07 {
  342. width: 29.16666667%;
  343. }
  344. .w08 {
  345. width: 33.33333333%;
  346. }
  347. .w09 {
  348. width: 37.50000000%;
  349. }
  350. .w10 {
  351. width: 41.66666667%;
  352. }
  353. .w11 {
  354. width: 45.83333333%;
  355. }
  356. .w12 {
  357. width: 50.00000000%;
  358. }
  359. .w13 {
  360. width: 54.16666667%;
  361. }
  362. .w14 {
  363. width: 58.33333333%;
  364. }
  365. .w15 {
  366. width: 62.50000000%;
  367. }
  368. .w16 {
  369. width: 66.66666667%;
  370. }
  371. .w17 {
  372. width: 70.83333333%;
  373. }
  374. .w18 {
  375. width: 75.00000000%;
  376. }
  377. .w19 {
  378. width: 79.16666667%;
  379. }
  380. .w20 {
  381. width: 83.33333333%;
  382. }
  383. .w21 {
  384. width: 87.50000000%;
  385. }
  386. .w22 {
  387. width: 91.66666667%;
  388. }
  389. .w23 {
  390. width: 95.83333333%;
  391. }
  392. .w24 {
  393. width: 100.0000000%;
  394. }
  395. .pr {
  396. position: relative;
  397. }
  398. .pa {
  399. position: absolute;
  400. }
  401. .pf {
  402. position: fixed;
  403. }
  404. .fr {
  405. float: right;
  406. }
  407. .fl {
  408. float: left;
  409. }