app.acss 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. page {
  2. color: #303133;
  3. font-size: 32rpx;
  4. background: rgba(245, 247, 250, 1);
  5. height: 100%;
  6. width: 100%;
  7. margin: 0;
  8. padding: 0;
  9. -webkit-font-smoothing: antialiased;
  10. -webkit-tap-highlight-color: transparent;
  11. font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  12. }
  13. .nodeBer{
  14. border:none!important;
  15. }
  16. view, text {
  17. line-height: 40rpx;
  18. }
  19. .blue {
  20. color: #26A2FF!important;
  21. }
  22. .red {
  23. color: #F56C6C!important;
  24. }
  25. .yellow {
  26. color: #E6A23C!important;
  27. }
  28. .green {
  29. color: #67C23A!important;
  30. }
  31. .fontColorZ {
  32. color: #303133!important;
  33. }
  34. .fontColorF {
  35. color: #606266 !important;
  36. }
  37. .fontColorX{
  38. color: #969799 !important;
  39. }
  40. .fontColorT {
  41. color: #C0C4CC!important;
  42. }
  43. /* 搜索框 */
  44. .search {
  45. background-color: #f1f1f1;
  46. border-radius: 10rpx;
  47. width: 90%;
  48. margin: 0 auto;
  49. padding: 6rpx 10rpx;
  50. }
  51. .search input {
  52. background-color: #f1f1f1;
  53. font-size: 32rpx !important;
  54. }
  55. .search image {
  56. width: 30rpx;
  57. height: 30rpx;
  58. margin-left: 10rpx;
  59. }
  60. /* 弹窗相关 */
  61. .data-tier {
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. right: 0;
  66. height: 80rpx;
  67. }
  68. .animationBox {
  69. position: fixed;
  70. left: 0;
  71. right: 0;
  72. top: 0;
  73. overflow: hidden;
  74. z-index: 3;
  75. transform: translate(0, -100%);
  76. }
  77. .tab {
  78. background: #fff;
  79. text-align: center;
  80. z-index: 4;
  81. position: sticky;
  82. top: 0;
  83. height: 80rpx;
  84. }
  85. .tab view {
  86. width: 25%;
  87. overflow: hidden;
  88. text-overflow: ellipsis;
  89. white-space: nowrap;
  90. }
  91. .tab view text {
  92. position: relative;
  93. padding: 20rpx 0;
  94. /* width: 120%; */
  95. white-space:nowrap
  96. }
  97. .tab text::after {
  98. position: absolute;
  99. top: 50%;
  100. right: -20rpx;
  101. margin-top: -0.1rem;
  102. border: 0.06rem solid;
  103. border-color: transparent transparent #C0C4CC #C0C4CC;
  104. -webkit-transform: rotate(-45deg);
  105. transform: rotate(-45deg);
  106. opacity: .8;
  107. content: '';
  108. }
  109. .tab .activeView{
  110. color: #26a2ff;
  111. }
  112. .tab .activeView::after {
  113. margin-top: -0.02rem;
  114. -webkit-transform: rotate(135deg);
  115. transform: rotate(135deg);
  116. border-color: transparent transparent #26a2ff #26a2ff;
  117. }
  118. .windows {
  119. position: fixed;
  120. top: 0px;
  121. left: 0px;
  122. right: 0px;
  123. bottom: 0px;
  124. background: rgba(0, 0, 0, 0.4);
  125. z-index: 999;
  126. }
  127. .meng{
  128. position: fixed;
  129. bottom: 0;
  130. background-color: rgba(0,0,0,.5);
  131. left: 0;
  132. right: 0;
  133. top: 80rpx;
  134. }
  135. .delVal{
  136. height: 40rpx;
  137. width: 40rpx;
  138. border-radius: 100%;
  139. background-color: #909399;
  140. color: #fff;
  141. text-align: center;
  142. line-height: 40rpx;
  143. margin: 0 10rpx;
  144. }
  145. /* 弹窗过程 */
  146. .pop-up{
  147. position: fixed;
  148. right: 10rpx;
  149. width: 100rpx;
  150. height: 100rpx;
  151. border-radius: 50%;
  152. background: #fff;
  153. text-align: center;
  154. bottom: 200rpx;
  155. box-sizing: border-box;
  156. line-height: 100rpx;
  157. box-shadow: 0 0 0.12rem rgba(0,0,0,.05);
  158. }
  159. .showPop {
  160. animation: showLayer 0.2s linear both;
  161. }
  162. @keyframes showLayer {
  163. 0% {
  164. transform: translateY(-100%);
  165. }
  166. 100% {
  167. transform: translateY(0%);
  168. }
  169. }
  170. /* 带字体背景颜色 */
  171. .redBox {
  172. border-radius: 6rpx;
  173. background: rgba(245, 108, 108, 0.1);
  174. color: #F56C6C;
  175. font-size: 28rpx;
  176. padding: 0 6rpx;
  177. }
  178. .greenBox {
  179. border-radius: 6rpx;
  180. background: rgba(103, 194, 58, 0.1);
  181. color: #67C23A;
  182. font-size: 28rpx;
  183. padding: 0 6rpx;
  184. }
  185. .yellowBox {
  186. border-radius: 6rpx;
  187. background: rgba(230, 162, 60, 0.1);
  188. color: #E6A23C;
  189. font-size: 28rpx;
  190. padding: 0 6rpx;
  191. }
  192. .blueBox {
  193. border-radius: 6rpx;
  194. background: rgba(238, 162, 255, 0.1);
  195. color: #26A2FF;
  196. font-size: 28rpx;
  197. padding: 0 6rpx;
  198. }
  199. .margin-bottom {
  200. margin-bottom: 20rpx;
  201. }
  202. .margin-top {
  203. margin-top: 20rpx;
  204. }
  205. .defBtn {
  206. background: #26A2FF;
  207. color: #fff;
  208. }
  209. .border-bottom {
  210. border-bottom: 1px solid #f1f1f1;
  211. }
  212. .text-right {
  213. text-align: right;
  214. }
  215. .text-left {
  216. text-align: left;
  217. }
  218. .noDatas{
  219. text-align: center;
  220. padding: 16rpx 0;
  221. color: #909399
  222. }
  223. .radio_{
  224. width: 40rpx !important;
  225. height: 40rpx !important;
  226. border: 1px solid #ccc;
  227. border-radius: 50% !important;
  228. background: #fff;
  229. position: relative;
  230. margin: 0 20rpx 0 24rpx;
  231. }
  232. .active .radio_{
  233. border: 1px solid #26A2FF;
  234. }
  235. .active .radio_::before{
  236. content:'';
  237. width: 20rpx !important;
  238. height: 20rpx !important;
  239. border-radius: 50% !important;
  240. background: #26A2FF;
  241. position: absolute;
  242. display: block;
  243. top: 50%;
  244. left: 50%;
  245. margin-top: -10rpx;
  246. margin-left: -9.5rpx;
  247. }
  248. /* 盒子模型 */
  249. .flex-box {
  250. display: -webkit-box;
  251. display: -moz-box;
  252. display: -ms-flexbox;
  253. display: -webkit-flex;
  254. display: flex;
  255. }
  256. /*盒子模型,竖向自适应,垂直排列 */
  257. .flex-box-v {
  258. display: -webkit-box;
  259. display: -webkit-flex;
  260. display: flex;
  261. -webkit-box-orient: vertical;
  262. -webkit-flex-flow: column;
  263. flex-flow: column !important;
  264. }
  265. /* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
  266. .flex-d-center {
  267. justify-content: space-between;
  268. -webkit-justify-content: space-between;
  269. }
  270. /* 水平等列排版(子元素两边有缝隙自己适应) */
  271. .flex-dv-center {
  272. justify-content: space-around;
  273. -webkit-justify-content: space-around;
  274. }
  275. /*通过一起使用 box-align 和 box-pack 属性,对 view 框的子元素进行居中,目前没有浏览器支持box-align 和 box-pack 属性,所以需要加上浏览器内核-webkit,-moz等的简写 */
  276. .flex-center-center {
  277. justify-content: center;
  278. -webkit-justify-content: center;
  279. -moz-justify-content: center;
  280. align-items: center;
  281. -webkit-align-items: center;
  282. -webkit-box-pack: center;
  283. -webkit-box-align: center;
  284. -moz-align-items: center;
  285. -moz-box-pack: center;
  286. -moz-box-align: center;
  287. }
  288. /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box水平;flex-box-v垂直) */
  289. .flex-v-zhu, .flex-h-zhu {
  290. justify-content: center;
  291. -webkit-justify-content: center;
  292. -webkit-box-pack: center;
  293. }
  294. /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box垂直;flex-box-v水平) */
  295. .flex-v-ce, .flex-h-ce {
  296. align-items: center;
  297. -webkit-align-items: center;
  298. -webkit-box-align: center;
  299. }
  300. /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
  301. .flex-1 {
  302. -webkit-box-flex: 1;
  303. -moz-box-flex: 1;
  304. -webkit-flex: 1;
  305. -ms-flex: 1;
  306. flex: 1;
  307. }
  308. .flex-2 {
  309. -webkit-box-flex: 2;
  310. box-flex: 2;
  311. -moz-box-flex: 2;
  312. -webkit-flex: 2;
  313. -ms-flex: 2;
  314. flex: 2;
  315. }
  316. .flex-3 {
  317. -webkit-box-flex: 3;
  318. box-flex: 3;
  319. -moz-box-flex: 3;
  320. -webkit-flex: 3;
  321. -ms-flex: 3;
  322. flex: 3;
  323. }
  324. .flex-4 {
  325. -webkit-box-flex: 4;
  326. box-flex: 4;
  327. -moz-box-flex: 4;
  328. -webkit-flex: 4;
  329. -ms-flex: 4;
  330. flex: 4;
  331. }
  332. .flex-5 {
  333. -webkit-box-flex: 5;
  334. box-flex: 5;
  335. -moz-box-flex: 5;
  336. -webkit-flex: 5;
  337. -ms-flex: 5;
  338. flex: 5;
  339. }
  340. .flex-direction-row-reverse {
  341. flex-direction: row-reverse;
  342. -webkit-flex-direction: row-reverse;
  343. }
  344. /*超出部分用....表示的公用样式 */
  345. .font-flex-word {
  346. overflow: hidden;
  347. text-overflow: ellipsis;
  348. white-space: nowrap;
  349. }
  350. /* 内容超出部分自动换行 */
  351. .flex-d-wrap {
  352. flex-wrap: wrap;
  353. }
  354. /* 内容超出部分不换行 */
  355. .flex-no-wrap {
  356. flex-wrap: nowrap;
  357. }
  358. /* 从右边开始排列 */
  359. .flex-box-end {
  360. display: -webkit-box;
  361. display: -moz-box;
  362. display: -ms-flexbox;
  363. display: -webkit-flex;
  364. display: flex;
  365. justify-content: flex-end;
  366. }