ry-ui.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. /**
  2. * 通用css样式布局处理
  3. * Copyright (c) 2019 ruoyi
  4. */
  5. /** 基础通用 **/
  6. .pt5 {
  7. padding-top: 5px;
  8. }
  9. .pr5 {
  10. padding-right: 5px;
  11. }
  12. .pb5 {
  13. padding-bottom: 5px;
  14. }
  15. .mt5 {
  16. margin-top: 5px;
  17. }
  18. .mr5 {
  19. margin-right: 5px;
  20. }
  21. .mb5 {
  22. margin-bottom: 5px;
  23. }
  24. .ml5 {
  25. margin-left: 5px;
  26. }
  27. .mt10 {
  28. margin-top: 10px;
  29. }
  30. .mr10 {
  31. margin-right: 10px;
  32. }
  33. .mb10 {
  34. margin-bottom: 10px;
  35. }
  36. .ml0 {
  37. margin-left: 10px;
  38. }
  39. .mt20 {
  40. margin-top: 20px;
  41. }
  42. .mr20 {
  43. margin-right: 20px;
  44. }
  45. .mb20 {
  46. margin-bottom: 20px;
  47. }
  48. .ml20 {
  49. margin-left: 20px;
  50. }
  51. .section-content {
  52. min-height: 250px;
  53. margin-right: auto;
  54. margin-left: auto;
  55. padding: 5px 5px 5px 5px;
  56. width: 100%;
  57. height: 100%;
  58. position: absolute;
  59. }
  60. .ibox {
  61. margin-bottom: 25px;
  62. background-color: #fff;
  63. border: 1px solid #ddd;
  64. border-radius: 4px;
  65. height: 100%;
  66. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  67. }
  68. .list-group-striped > .list-group-item {
  69. border-left: 0;
  70. border-right: 0;
  71. border-radius: 0;
  72. padding-left: 0;
  73. padding-right: 0
  74. }
  75. .ibox-title-gray {
  76. height: 41px;
  77. background-color: #f0f3f4;
  78. color: #333;
  79. font-weight: 700;
  80. border-radius: 2px 2px 0 0;
  81. padding: 13px !important;
  82. border-bottom: 1px solid #eee;
  83. display: block;
  84. clear: both;
  85. }
  86. .dashboard-header h5 {
  87. padding: 8px 0 0 0;
  88. display: inline-block;
  89. font-size: 14px;
  90. text-overflow: ellipsis;
  91. float: left;
  92. font-weight: 400;
  93. }
  94. .ibox-title-gray h5 {
  95. display: inline-block;
  96. font-size: 14px;
  97. margin: 0 0 7px;
  98. padding: 0;
  99. text-overflow: ellipsis;
  100. float: left;
  101. }
  102. /* 导航页签 */
  103. .nav-tabs-custom {
  104. margin-bottom: 20px;
  105. background: #fff;
  106. box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  107. border-radius: 3px
  108. }
  109. .nav-tabs-custom>.nav-tabs {
  110. margin: 0;
  111. border-bottom-color: #f4f4f4;
  112. border-top-right-radius: 3px;
  113. border-top-left-radius: 3px
  114. }
  115. .nav-tabs-custom>.nav-tabs>li {
  116. border-top: 3px solid transparent;
  117. margin-bottom: -2px;
  118. margin-right: 5px
  119. }
  120. .nav-tabs-custom>.nav-tabs>li.disabled>a {
  121. color: #777
  122. }
  123. .nav-tabs-custom>.nav-tabs>li>a {
  124. color: #444;
  125. font-weight: normal;
  126. border-radius: 0
  127. }
  128. .nav-tabs-custom>.nav-tabs>li>a,.nav-tabs-custom>.nav-tabs>li>a:hover {
  129. background: transparent;
  130. margin: 0
  131. }
  132. .nav-tabs-custom>.nav-tabs>li>a:hover {
  133. color: #999
  134. }
  135. .nav-tabs-custom>.nav-tabs>li:not(.active)>a:hover,.nav-tabs-custom>.nav-tabs>li:not(.active)>a:focus,.nav-tabs-custom>.nav-tabs>li:not(.active)>a:active {
  136. border-color: transparent
  137. }
  138. .nav-tabs-custom>.nav-tabs>li.active {
  139. border-top-color: #1890ff
  140. }
  141. .nav-tabs-custom>.nav-tabs>li.active>a,.nav-tabs-custom>.nav-tabs>li.active:hover>a {
  142. background-color: #fff;
  143. color: #444
  144. }
  145. .nav-tabs-custom>.nav-tabs>li.active>a {
  146. border-top-color: transparent;
  147. border-bottom-color: transparent;
  148. border-left-color: #f4f4f4;
  149. border-right-color: #f4f4f4
  150. }
  151. .nav-tabs-custom>.tab-content {
  152. background: #fff;
  153. padding: 10px;
  154. border-bottom-right-radius: 3px;
  155. border-bottom-left-radius: 3px
  156. }
  157. /** 弹层组件 禁用样式 **/
  158. .layer-disabled {
  159. border: 1px #dedede solid !important;
  160. background-color: #f1f1f1 !important;
  161. color: #333 !important;
  162. pointer-events: none;
  163. }
  164. /** 用户管理 样式布局 **/
  165. .box {
  166. position: relative;
  167. border-radius: 3px;
  168. background: #ffffff;
  169. border-top: 3px solid #d2d6de;
  170. margin-bottom: 20px;
  171. width: 100%;
  172. box-shadow: 0 1px 1px rgba(0,0,0,0.1)
  173. }
  174. .box-header:before,.box-body:before,.box-footer:before,.box-header:after,.box-body:after,.box-footer:after {
  175. content: " ";
  176. display: table
  177. }
  178. .box-header:after,.box-body:after,.box-footer:after {
  179. clear: both
  180. }
  181. .btn-box-tool {
  182. padding: 5px;
  183. font-size: 12px;
  184. background: transparent;
  185. color: #97a0b3;
  186. }
  187. .open .btn-box-tool,
  188. .btn-box-tool:hover {
  189. color: #606c84;
  190. }
  191. .box-main {
  192. margin: 0;
  193. border: 0;
  194. padding-top: 2px;
  195. border-radius: 0;
  196. box-shadow: none
  197. }
  198. .box-main>.box-header {
  199. border-bottom: 1px solid #eee;
  200. padding: 12px 10px 2px 15px
  201. }
  202. .box-header .box-title {
  203. display: inline-block;
  204. font-size: 18px;
  205. margin: 0;
  206. line-height: 1;
  207. }
  208. .box-main>.box-header .box-title {
  209. font-size: 16px;
  210. margin-bottom: 13px;
  211. float: left
  212. }
  213. .box-main>.box-header .box-title .fa {
  214. font-size: 14px;
  215. padding-right: 3px;
  216. margin-top: -2px
  217. }
  218. .box-main>.box-header .box-tools {
  219. position: relative;
  220. top: -5px;
  221. right: 0
  222. }
  223. .box-main>.box-header .box-tools .btn {
  224. padding: 3px 10px 5px 10px;
  225. font-size: 14px;
  226. margin-bottom: 2px
  227. }
  228. .box-main>.box-header .box-tools .btn-box-tool {
  229. padding: 4px 2px
  230. }
  231. .box-main form>.box-footer,.nav-main form>.box-footer {
  232. background: #fafafa
  233. }
  234. .box-main form>.box-footer .row,.nav-main form>.box-footer .row {
  235. margin: 5px 0 5px -25px
  236. }
  237. /** select2 样式修改 **/
  238. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  239. background-color: #1AB394;
  240. border-color: #1AB394;
  241. padding: 1px 10px;
  242. color: #fff
  243. }
  244. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  245. margin-right: 5px;
  246. color: rgba(255,255,255,0.7)
  247. }
  248. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  249. color: #fff
  250. }
  251. .select2-container .select2-selection--single .select2-selection__rendered {
  252. padding-right: 10px
  253. }
  254. /** 表单验证 样式布局 **/
  255. label.error {
  256. position: absolute;
  257. right: 18px;
  258. top: 10px;
  259. color: #ef392b;
  260. font-size: 12px
  261. }
  262. .input-group label.error {
  263. z-index:99;
  264. right: 42px
  265. }
  266. .Validform_error,input.error,select.error {
  267. background-color: #fbe2e2;
  268. border-color: #c66161;
  269. color: #c00
  270. }
  271. .Validform_wrong,.Validform_right,.Validform_warning {
  272. display: inline-block;
  273. height: 20px;
  274. font-size: 12px;
  275. vertical-align: middle;
  276. padding-left: 25px
  277. }
  278. .i-checks label.error, .check-box label.error, .radio-box label.error {
  279. right: auto;
  280. width: 150px;
  281. left: 210px;
  282. top: 1px;
  283. max-width: none;
  284. }
  285. /** 复选框&单选框 **/
  286. .check-box,.radio-box {
  287. display: inline-block;
  288. box-sizing: border-box;
  289. cursor: pointer;
  290. position: relative;
  291. padding-left: 25px;
  292. padding-right: 15px;
  293. padding-top: 8px;
  294. }
  295. .icheckbox, .icheckbox-blue, .iradio, .iradio-blue, .iradio-purple {
  296. position: absolute;
  297. top: 8px;
  298. left: 0
  299. }
  300. /** iCheck **/
  301. .icheckbox-blue,.iradio-blue {
  302. display: block;
  303. margin: 0;
  304. padding: 0;
  305. width: 18px;
  306. height: 18px;
  307. background: url(../../img/blue.png) no-repeat;
  308. border: none;
  309. cursor: pointer
  310. }
  311. .icheckbox-blue,.icheckbox-blue.static:hover {
  312. background-position: 0 0
  313. }
  314. .icheckbox-blue.hover,.icheckbox-blue:hover {
  315. background-position: -20px 0
  316. }
  317. .icheckbox-blue.checked {
  318. background-position: -40px 0
  319. }
  320. .icheckbox-blue.disabled {
  321. background-position: -60px 0;
  322. cursor: default
  323. }
  324. .icheckbox-blue.checked.disabled {
  325. background-position: -80px 0
  326. }
  327. .iradio-blue,.iradio-blue.static:hover {
  328. background-position: -100px 0
  329. }
  330. .iradio-blue.hover,.iradio-blue:hover {
  331. background-position: -120px 0
  332. }
  333. .iradio-blue.checked {
  334. background-position: -140px 0
  335. }
  336. .iradio-blue.disabled {
  337. background-position: -160px 0;
  338. cursor: default
  339. }
  340. .iradio-blue.checked.disabled {
  341. background-position: -180px 0
  342. }
  343. /** 遮罩层 **/
  344. .loaderbox {
  345. display: inline-block;
  346. min-width: 125px;
  347. padding: 10px;
  348. margin: 0 auto;
  349. color: #000 !important;
  350. font-size: 13px;
  351. font-weight: 400;
  352. text-align: center;
  353. vertical-align: middle;
  354. border: 1px solid #ddd;
  355. background-color: #eee;
  356. -webkit-border-radius: 2px;
  357. -moz-border-radius: 2px;
  358. -ms-border-radius: 2px;
  359. -o-border-radius: 2px;
  360. border-radius: 2px;
  361. -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  362. -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  363. box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  364. }
  365. .loaderbox .loading-activity {
  366. float: left;
  367. width: 18px;
  368. height: 18px;
  369. border: solid 2px transparent;
  370. border-top-color: #000;
  371. border-left-color: #000;
  372. border-radius: 10px;
  373. -webkit-animation: pace-spinner 400ms linear infinite;
  374. -moz-animation: pace-spinner 400ms linear infinite;
  375. -ms-animation: pace-spinner 400ms linear infinite;
  376. -o-animation: pace-spinner 400ms linear infinite;
  377. animation: pace-spinner 400ms linear infinite;
  378. }
  379. @media (max-width: 767px) {
  380. .loading-activity {
  381. width: 18px;
  382. height: 18px;
  383. }
  384. }
  385. @-ms-keyframes pace-spinner {
  386. 0% {
  387. -ms-transform: rotate(0deg);
  388. transform: rotate(0deg);
  389. }
  390. 100% {
  391. -ms-transform: rotate(360deg);
  392. transform: rotate(360deg);
  393. }
  394. }
  395. @keyframes pace-spinner {
  396. 0% {
  397. transform: rotate(0deg);
  398. }
  399. 100% {
  400. transform: rotate(360deg);
  401. }
  402. }
  403. /** 表单查询条件 **/
  404. ul {
  405. margin: 0;
  406. padding: 0;
  407. -webkit-tap-highlight-color: rgba(0,0,0,0);
  408. }
  409. li {
  410. list-style: none;
  411. }
  412. .time-input {
  413. display: block;
  414. width: 100%;
  415. padding-left: 10px;
  416. }
  417. label {
  418. font-weight: normal;
  419. }
  420. .container-div {
  421. padding: 10px 35px;
  422. height: 100%;
  423. }
  424. .container-div .row {
  425. height: 100%;
  426. }
  427. .search-collapse,.select-table {
  428. width: 100%;
  429. background: #fff;
  430. border-radius: 6px;
  431. margin-top: 10px;
  432. padding-top: 5px;
  433. padding-bottom: 13px;
  434. box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  435. }
  436. .search-collapse {
  437. position: relative;
  438. }
  439. .search-collapse .col-sm-6 .control-label {
  440. color: #333;
  441. }
  442. @media ( max-width : 768px) {
  443. .search-collapse {
  444. display: none;
  445. }
  446. }
  447. @media ( min-width : 768px) {
  448. .select-list li {
  449. float: left;
  450. }
  451. }
  452. .select-list li {
  453. color: #333;
  454. margin: 5px 15px 5px 0px;
  455. }
  456. .select-list li input {
  457. border: 1px solid #ddd;
  458. border-radius: 4px;
  459. background: transparent;
  460. outline: none;
  461. height: 30px;
  462. width: 200px;
  463. padding-left: 5px;
  464. }
  465. .select-list li .submit-btn {
  466. border: 0px;
  467. border-radius: 4px;
  468. background: transparent;
  469. outline: none;
  470. width: 40px;
  471. height: 23px;
  472. }
  473. .select-list li select {
  474. border: 1px solid #ddd;
  475. border-radius: 4px;
  476. background: transparent;
  477. outline: none;
  478. height: 30px;
  479. width: 200px;
  480. }
  481. .select-list .select-time input {
  482. width: 93px;
  483. }
  484. .select-time label,.select-time span,.select-time input {
  485. float: left;
  486. }
  487. @media (max-width:767px) {
  488. .select-time label,.select-time span,.select-time input {
  489. float: none;
  490. }
  491. .select-list .select-time input {
  492. width: 200px;
  493. }
  494. }
  495. .select-time label {
  496. margin-top: 5px;
  497. }
  498. .select-time span {
  499. display: block;
  500. margin: 5px 5px;
  501. }
  502. .search-btn {
  503. background-color: #1ab394;
  504. border-color: #1ab394;
  505. color: #FFF;
  506. margin-bottom: 5px;
  507. display: inline-block;
  508. padding: 6px 12px;
  509. margin-bottom: 0;
  510. font-size: 14px;
  511. font-weight: 400;
  512. line-height: 1.42857143;
  513. text-align: center;
  514. white-space: nowrap;
  515. border-radius: 3px;
  516. vertical-align: middle;
  517. cursor: pointer;
  518. }
  519. /** 表格查询数据 **/
  520. .table-striped {
  521. min-height: 75%;
  522. }
  523. .table-striped .bootstrap-table {
  524. border: 0px!important;
  525. }
  526. .table-striped .table, .fixed-table-container, table, .table-striped .table, .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
  527. border-bottom: 1px solid #e7eaec!important;
  528. background-color: transparent!important;
  529. border: 0px;
  530. }
  531. .table-striped .table>thead>tr>th, .table-striped .table>tbody>tr>th {
  532. border-bottom: 1px solid #ccc!important;
  533. border-top: 0px!important;
  534. }
  535. .table-striped .table>thead:first-child>tr:first-child>th {
  536. font-weight: normal;
  537. font-size: 13px
  538. }
  539. .table-striped table thead {
  540. background-color: #eff3f8;
  541. }
  542. .table-bordered td,.table-bordered th {
  543. border: 1px solid #ddd!important
  544. }
  545. .fixed-table-container thead th >.both{
  546. display: inline-block
  547. }
  548. /** 首页样式 **/
  549. .ax_close_max {
  550. position: fixed;
  551. top: 5px;
  552. left: 5px;
  553. z-index: 9999;
  554. display: none;
  555. color: #ccc;
  556. }
  557. .navbar-right > .user-menu > .dropdown-menu {
  558. border-top-right-radius:0;
  559. border-top-left-radius:0;
  560. padding:1px 0 0 0;
  561. border-top-width:0;
  562. width:138px;
  563. }
  564. .navbar-right > .user-menu .user-image {
  565. float:left;
  566. width:27px;
  567. height:27px;
  568. border-radius:50%;
  569. margin-right:8px;
  570. margin-top:-3px;
  571. }
  572. @media (max-width:767px) {
  573. .navbar-right > .user-menu .user-image {
  574. float:none;
  575. margin-right:0;
  576. margin-top:-8px;
  577. line-height:10px;
  578. }
  579. }.dropdown-menu > li > a > .glyphicon,.dropdown-menu > li > a > .fa,.dropdown-menu > li > a > .ion {
  580. margin-right:10px;
  581. }
  582. .dropdown-menu > li > a:hover {
  583. background-color:#e1e3e9;
  584. color:#333;
  585. }
  586. .dropdown-menu > .divider {
  587. background-color:#eee;
  588. }
  589. /** 表单布局 **/
  590. .form-header {
  591. font-size:15px;
  592. color:#6379bb;
  593. border-bottom:1px solid #ddd;
  594. margin:8px 10px 25px 10px;
  595. padding-bottom:5px
  596. }
  597. .form-content {
  598. background-color: #ffffff;
  599. color: inherit;
  600. padding: 10px 15px 15px 15px;
  601. border-color: #e7eaec;
  602. -webkit-border-image: none;
  603. -o-border-image: none;
  604. border-image: none;
  605. border-width: 1px 0px;
  606. }
  607. /** 表格跳转样式 **/
  608. .pageGo input {
  609. height: 32px;
  610. width: 50px;
  611. margin-left: 5px;
  612. margin-right: 5px;
  613. text-align: center;
  614. display: block;
  615. float:left;
  616. }
  617. .pageGo button {
  618. height: 32px;
  619. display: block;
  620. float:left;
  621. }