uni.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606
  1. /* 全局公共样式 */
  2. body,
  3. html {
  4. -webkit-user-select: auto;
  5. user-select: auto;
  6. font-size: 16px;
  7. }
  8. /* #ifdef H5 */
  9. .uni-app--showleftwindow uni-main {
  10. position: relative;
  11. background-color: #f5f5f5;
  12. }
  13. .uni-mask + .uni-left-window,
  14. .uni-mask + .uni-right-window {
  15. position: fixed;
  16. }
  17. .uni-app--showleftwindow uni-page-head .uni-page-head {
  18. color: #333 !important;
  19. }
  20. uni-page-head .uni-btn-icon {
  21. color: #333 !important;
  22. }
  23. .uni-app--showleftwindow
  24. uni-page-head[uni-page-head-type="default"]
  25. ~ uni-page-wrapper {
  26. height: auto;
  27. padding-top: 44px;
  28. }
  29. .uni-app--showleftwindow uni-page-wrapper {
  30. position: absolute;
  31. width: 100%;
  32. top: 0;
  33. bottom: 0;
  34. padding: 15px;
  35. overflow-y: auto;
  36. box-sizing: border-box;
  37. background-color: #f5f5f5;
  38. }
  39. .uni-app--showleftwindow uni-page-body {
  40. width: 100%;
  41. min-height: 100%;
  42. box-sizing: border-box;
  43. border-radius: 5px;
  44. box-shadow: -1px -1px 5px 0 rgba(0, 0, 0, 0.1);
  45. background-color: #fff;
  46. }
  47. .uni-app--showleftwindow .uni-container .uni-forms {
  48. padding: 15px;
  49. max-width: 650px;
  50. }
  51. /* #endif */
  52. /* #ifndef H5 */
  53. .uni-nav-menu {
  54. height: 100vh;
  55. }
  56. /* #endif */
  57. .pointer {
  58. cursor: pointer;
  59. }
  60. .uni-top-window {
  61. z-index: 999;
  62. overflow: visible;
  63. }
  64. .uni-tips {
  65. font-size: 12px;
  66. color: #666;
  67. }
  68. /* 容器 */
  69. .uni-container {
  70. padding: 15px;
  71. box-sizing: border-box;
  72. }
  73. /* 标题栏 */
  74. .uni-header {
  75. padding: 0 15px;
  76. display: flex;
  77. min-height: 55px;
  78. align-items: center;
  79. justify-content: space-between;
  80. border-bottom: 1px #f5f5f5 solid;
  81. flex-wrap: wrap;
  82. }
  83. .uni-title {
  84. margin-right: 10px;
  85. font-size: 16px;
  86. font-weight: 500;
  87. color: #333;
  88. }
  89. .uni-sub-title {
  90. margin-top: 3px;
  91. font-size: 14px;
  92. color: #999;
  93. }
  94. .uni-link {
  95. color: #3a8ee6;
  96. cursor: pointer;
  97. text-decoration: underline;
  98. }
  99. .uni-group {
  100. display: flex;
  101. align-items: center;
  102. justify-content: center;
  103. flex-wrap: wrap;
  104. word-break: keep-all;
  105. }
  106. /* 按钮样式 */
  107. .uni-button-group {
  108. margin-top: 30px;
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. }
  113. .uni-button {
  114. padding: 10px 20px;
  115. font-size: 14px;
  116. border-radius: 4px;
  117. line-height: 1;
  118. margin: 0;
  119. box-sizing: border-box;
  120. overflow: initial;
  121. }
  122. .uni-group .uni-button {
  123. margin: 10px;
  124. }
  125. .uni-group .uni-search {
  126. margin: 10px;
  127. }
  128. .uni-group > .uni-button:first-child {
  129. margin-left: 0;
  130. }
  131. .uni-button:hover,
  132. .uni-button:focus {
  133. opacity: 0.9;
  134. }
  135. .uni-button:active {
  136. opacity: 1;
  137. }
  138. .uni-button-full {
  139. width: 100%;
  140. }
  141. /* 搜索框样式 */
  142. .uni-search {
  143. width: 268px;
  144. height: 28px;
  145. line-height: 28px;
  146. font-size: 12px;
  147. color: #606266;
  148. padding: 0 10px;
  149. border: 1px #dcdfe6 solid;
  150. border-radius: 3px;
  151. }
  152. /* 分页容器 */
  153. .uni-pagination-box {
  154. margin-top: 20px;
  155. display: flex;
  156. align-items: center;
  157. justify-content: center;
  158. }
  159. .uni-input-border,
  160. .uni-textarea-border {
  161. width: 100%;
  162. font-size: 14px;
  163. color: #666;
  164. border: 1px #e5e5e5 solid;
  165. border-radius: 5px;
  166. box-sizing: border-box;
  167. }
  168. .uni-input-border {
  169. padding: 0 10px;
  170. height: 35px;
  171. }
  172. .uni-textarea-border {
  173. padding: 10px;
  174. height: 80px;
  175. }
  176. .uni-disabled {
  177. background-color: #f5f7fa;
  178. color: #c0c4cc;
  179. }
  180. .uni-icon-password-eye {
  181. position: absolute;
  182. right: 8px;
  183. top: 6px;
  184. font-size: 20px;
  185. font-weight: normal;
  186. font-style: normal;
  187. width: 24px;
  188. height: 24px;
  189. line-height: 24px;
  190. color: #999999;
  191. }
  192. .uni-eye-active {
  193. color: #007aff;
  194. }
  195. .uni-tabs__header {
  196. position: relative;
  197. background-color: #f5f7fa;
  198. border-bottom: 1px solid #e4e7ed;
  199. }
  200. .uni-tabs__nav-wrap {
  201. overflow: hidden;
  202. margin-bottom: -1px;
  203. position: relative;
  204. }
  205. .uni-tabs__nav-scroll {
  206. overflow: hidden;
  207. }
  208. .uni-tabs__nav {
  209. position: relative;
  210. white-space: nowrap;
  211. }
  212. .uni-tabs__item {
  213. position: relative;
  214. padding: 0 20px;
  215. height: 40px;
  216. box-sizing: border-box;
  217. line-height: 40px;
  218. display: inline-block;
  219. list-style: none;
  220. font-size: 14px;
  221. font-weight: 500;
  222. color: #909399;
  223. margin-top: -1px;
  224. margin-left: -1px;
  225. border: 1px solid transparent;
  226. cursor: pointer;
  227. }
  228. .uni-tabs__item.is-active {
  229. background-color: #fff;
  230. border-right-color: #dcdfe6;
  231. border-left-color: #dcdfe6;
  232. }
  233. .uni-form-item-tips {
  234. color: #999;
  235. font-size: 12px;
  236. margin-top: 10px;
  237. }
  238. .uni-form-item-empty {
  239. color: #999;
  240. min-height: 36px;
  241. line-height: 36px;
  242. }
  243. ::v-deep .uni-forms-item__label .label-text {
  244. color: #606266 !important;
  245. }
  246. ::v-deep .flex-center-x .uni-forms-item__content {
  247. display: flex;
  248. align-items: center;
  249. flex-wrap: wrap;
  250. }
  251. .link-btn {
  252. line-height: 26px;
  253. margin-top: 5px;
  254. color: #007aff !important;
  255. text-decoration: underline;
  256. cursor: pointer;
  257. }
  258. /* button 重置样式 */
  259. ::v-deep button[size="mini"] {
  260. line-height: 2.4;
  261. font-size: 12px;
  262. border-radius: 3px;
  263. }
  264. button {
  265. /* #ifndef MP-TOUTIAO */
  266. background: #fff;
  267. /* #endif */
  268. border: 1px solid #dcdfe6;
  269. color: #606266;
  270. box-sizing: border-box;
  271. }
  272. button[type="primary"] {
  273. background-color: #409eff;
  274. border-color: #409eff;
  275. border-width: 0;
  276. }
  277. button[type="warn"] {
  278. background-color: #f56c6c;
  279. border-color: #f56c6c;
  280. border-width: 0;
  281. }
  282. button[type="default"] {
  283. background: #fff;
  284. border: 1px solid #dcdfe6;
  285. color: #606266;
  286. box-sizing: border-box;
  287. }
  288. button[type="primary"][plain] {
  289. border-color: #409eff;
  290. color: #409eff;
  291. }
  292. button[type="warn"][plain] {
  293. border-color: #f56c6c;
  294. color: #f56c6c;
  295. }
  296. button[type="default"][plain] {
  297. border-color: #dcdfe6;
  298. color: #606266;
  299. }
  300. button[plain] {
  301. border-color: #dcdfe6;
  302. color: #606266;
  303. }
  304. button:after {
  305. border-width: 0;
  306. }
  307. .uni-input-placeholder {
  308. color: #999;
  309. }
  310. .select-picker {
  311. margin-right: 20px;
  312. }
  313. .select-picker button {
  314. margin-top: 5px;
  315. line-height: 29px;
  316. font-size: 14px;
  317. }
  318. .select-picker button text {
  319. color: #999;
  320. }
  321. .select-picker-icon {
  322. margin-left: 8px;
  323. }
  324. /* stat style start */
  325. .m-m {
  326. margin: 15px !important;
  327. }
  328. .mb-s {
  329. margin-bottom: 5px;
  330. }
  331. .mb-m {
  332. margin-bottom: 15px !important;
  333. }
  334. .mb-l {
  335. margin-bottom: 30px !important;
  336. }
  337. .ml-s {
  338. margin-left: 5px;
  339. }
  340. .ml-m {
  341. margin-left: 15px !important;
  342. }
  343. .ml-l {
  344. margin-left: 30px !important;
  345. }
  346. .p-m {
  347. padding: 15px;
  348. }
  349. .p-channel {
  350. padding: 0 15px 15px 15px;
  351. }
  352. .p-1015 {
  353. padding: 10px 15px;
  354. }
  355. .uni-charts-box {
  356. width: 100%;
  357. height: 350px;
  358. }
  359. .uni-stat--x {
  360. border-radius: 4px;
  361. box-shadow: -1px -1px 5px 0 rgba(0, 0, 0, 0.1);
  362. margin-bottom: 15px;
  363. }
  364. .uni-stat--app-select{
  365. display: flex;
  366. flex-wrap: wrap;
  367. align-items: center;
  368. width: 900px;
  369. max-width: 100%;
  370. }
  371. .flex {
  372. display: flex;
  373. flex-wrap: wrap;
  374. align-items: center;
  375. }
  376. .label-text {
  377. font-size: 14px;
  378. font-weight: bold;
  379. color: #555;
  380. margin: auto 0;
  381. margin-right: 5px;
  382. }
  383. .uni-stat-edit--x {
  384. display: flex;
  385. justify-content: space-between;
  386. }
  387. .uni-stat-edit--btn {
  388. cursor: pointer;
  389. }
  390. .uni-stat-datetime-picker {
  391. margin: 15px;
  392. }
  393. /* uni-popup modal start */
  394. .modal {
  395. max-width: calc(100vw - 200px);
  396. min-width: 600px;
  397. margin: 0 auto;
  398. background-color: #ffffff;
  399. }
  400. .modal-header {
  401. padding: 20px 0;
  402. text-align: center;
  403. border-bottom: 1px solid #eee;
  404. }
  405. .modal-footer {
  406. padding: 20px;
  407. display: flex;
  408. justify-content: flex-end;
  409. align-items: center;
  410. }
  411. .modal-content {
  412. padding: 15px;
  413. height: 600px;
  414. box-sizing: border-box;
  415. }
  416. /* uni-popup modal end */
  417. .uni-stat-tooltip-s {
  418. width: 160px;
  419. white-space: normal;
  420. }
  421. /* #ifndef APP-NVUE */
  422. @media screen and (max-width: 500px) {
  423. .hide-on-phone {
  424. display: none !important;
  425. }
  426. .uni-charts-box {
  427. width: 100%;
  428. height: 220px;
  429. }
  430. .uni-group .uni-search {
  431. height: 32px;
  432. line-height: 32px;
  433. width: 100%;
  434. margin: 20px 20px 10px 20px;
  435. }
  436. .uni-header {
  437. padding-left: 0px;
  438. padding-right: 0px;
  439. border: unset;
  440. }
  441. .uni-group {
  442. width: 100%;
  443. }
  444. .uni-stat-breadcrumb-on-phone {
  445. padding: 0 20px !important;
  446. border-bottom: 1px #f5f5f5 solid;
  447. }
  448. .flex {
  449. width: 100%;
  450. display: flex;
  451. flex-wrap: wrap;
  452. align-items: center;
  453. }
  454. }
  455. @media screen and (min-width: 500px) {
  456. .dispaly-grid {
  457. display: grid;
  458. grid-template-columns: 1fr 1fr;
  459. column-gap: 15px;
  460. }
  461. .pc-flex-wrap {
  462. display: flex;
  463. flex-wrap: wrap;
  464. align-items: center;
  465. }
  466. .uni-stat-datetime-picker {
  467. max-width: 350px;
  468. }
  469. ::v-deep .uni-pagination-picker-show .uni-picker-container .uni-picker-custom {
  470. width: 100px;
  471. margin: 0 86px;
  472. }
  473. ::v-deep .uni-pagination-picker-show .uni-picker-container .uni-picker-custom .uni-picker-select + div {
  474. left: 50% !important;
  475. }
  476. }
  477. /* #endif */
  478. /* #ifdef H5 */
  479. /* fix 弹出层被遮盖 */
  480. ::v-deep .uni-table-scroll {
  481. min-height: calc(100vh - 237px);
  482. box-sizing: border-box;
  483. }
  484. ::v-deep .uni-table .tr-table--border {
  485. border-left: 1px #ebeef5 solid;
  486. }
  487. /* #endif */
  488. /* #ifndef H5 */
  489. .fix-top-window {
  490. margin-top: 85px;
  491. }
  492. /* #endif */
  493. /* 地图选择top需要大于topWindow的高度 */
  494. .uni-system-choose-location{
  495. display: block;
  496. position: fixed;
  497. left: 0;
  498. top: 60px;
  499. width: 100%;
  500. height: calc(100% - 60px);
  501. background: #f8f8f8;
  502. }