app.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. /**
  2. * Name:app.css
  3. * Author:Van
  4. * E-mail:zheng_jinfan@126.com
  5. * Website:http://kit.zhengjinfan.cn/
  6. * LICENSE:MIT
  7. */
  8. ::-webkit-scrollbar {
  9. width: 10px;
  10. height: 10px;
  11. }
  12. ::-webkit-scrollbar-button:vertical {
  13. display: none;
  14. }
  15. ::-webkit-scrollbar-track,
  16. ::-webkit-scrollbar-corner {
  17. background-color: #e2e2e2;
  18. }
  19. ::-webkit-scrollbar-thumb {
  20. border-radius: 0;
  21. background-color: rgba(0, 0, 0, .3);
  22. }
  23. ::-webkit-scrollbar-thumb:vertical:hover {
  24. background-color: rgba(0, 0, 0, .35);
  25. }
  26. ::-webkit-scrollbar-thumb:vertical:active {
  27. background-color: rgba(0, 0, 0, .38);
  28. }
  29. /* ripple start */
  30. a,
  31. button {
  32. position: relative;
  33. border: none;
  34. outline: none;
  35. cursor: pointer;
  36. overflow: hidden;
  37. user-select: none;
  38. }
  39. .ripple {
  40. position: absolute;
  41. background: rgba(0, 0, 0, .15);
  42. border-radius: 100%;
  43. transform: scale(0);
  44. pointer-events: none;
  45. }
  46. .ripple.show {
  47. animation: ripple .75s ease-out;
  48. }
  49. @keyframes ripple {
  50. to {
  51. transform: scale(2);
  52. opacity: 0;
  53. }
  54. }
  55. /* ripple end */
  56. .kit-layout-admin .kit-logo-mobile {
  57. display: none;
  58. }
  59. .layui-layout-admin .layui-header .layui-layout-right {
  60. /* right: 5px; */
  61. padding: 0;
  62. }
  63. .kit-nav .layui-nav-item {
  64. line-height: 50px;
  65. margin: 0 15px;
  66. }
  67. /* .kit-nav .layui-nav-item .layui-nav-more {
  68. top: 22px;
  69. } */
  70. /* .kit-nav .layui-nav-item .layui-nav-mored {
  71. top: 16px;
  72. } */
  73. #oneMenu .layui-nav-item a{
  74. /* padding: 0px;
  75. border-bottom: 2px solid transparent; */
  76. padding: 0 10px;
  77. padding-top: 5px;
  78. }
  79. #oneMenu .layui-nav-item a:hover, #oneMenu .layui-this a{
  80. /* border-bottom: 2px solid #fff; */
  81. }
  82. #oneMenu .layui-nav-item{
  83. line-height: 40px;
  84. }
  85. .kit-theme .kit-layout-admin .layui-header{
  86. background: #012e29;
  87. border-bottom: none;
  88. box-shadow:0px 2px 4px 2px rgba(20,65,129,0.1);
  89. position: fixed;
  90. width: 100%;
  91. top: 0px;
  92. }
  93. .layui-layout-left .layui-nav-item:hover{
  94. background:#012e29;
  95. }
  96. .kit-nav .layui-nav-item .w-line{
  97. height: 3px;
  98. width: auto;
  99. background: transparent;
  100. border-radius:10px;
  101. }
  102. .kit-nav .layui-this .w-line{
  103. height: 3px;
  104. width: auto;
  105. background: #fff;
  106. border-radius:10px;
  107. }
  108. .kit-nav .layui-nav-item .layui-nav-child {
  109. top: 55px;
  110. }
  111. .kit-nav .layui-this {
  112. background-color: #012e29!important;
  113. }
  114. .kit-nav * {
  115. font-size: 14px;
  116. }
  117. .layui-layout-left .layui-nav-item:hover {
  118. background-color: #012e29 !important;
  119. }
  120. .kit-nav .layui-nav-bar {
  121. height: 0;
  122. }
  123. .kit-nav .layui-this:after {
  124. content: none;
  125. }
  126. .kit-layout-admin .layui-footer {
  127. height: 35px;
  128. line-height: 35px;
  129. }
  130. .kit-layout-admin .layui-body {
  131. bottom: 0px;
  132. top: 50px;
  133. /* height:100%; */
  134. overflow: hidden;
  135. }
  136. .kit-layout-admin .layui-header {
  137. height: 50px;
  138. }
  139. .kit-layout-admin .layui-logo {
  140. line-height: 50px;
  141. }
  142. .kit-layout-admin .kit-side {
  143. top: 50px;
  144. }
  145. .kit-layout-admin .kit-sided {
  146. width: 50px;
  147. }
  148. .kit-side .layui-side-scroll {
  149. width: auto;
  150. background:#012e29;
  151. }
  152. .kit-side .layui-side-scroll .kit-side-fold {
  153. height: 35px;
  154. background-color: #4A5064;
  155. color: #aeb9c2;
  156. line-height: 35px;
  157. text-align: center;
  158. cursor: pointer;
  159. }
  160. .kit-sided .layui-side-scroll .layui-nav-item {
  161. text-align: center;
  162. }
  163. .kit-sided .layui-side-scroll .layui-nav-item a {
  164. padding: 0;
  165. }
  166. .kit-side .layui-nav-tree .layui-nav-child a {
  167. padding-left: 30px;
  168. }
  169. .kit-sided .layui-nav-tree .layui-nav-child a {
  170. padding-left: 0;
  171. }
  172. .kit-sided .layui-side-scroll a span {
  173. display: none;
  174. }
  175. .kit-side .layui-side-scroll .layui-nav-tree {
  176. width: auto;
  177. }
  178. .kit-layout-admin .kit-body-folded,
  179. .kit-layout-admin .kit-footer-folded {
  180. left: 50px;
  181. }
  182. /* table闂佺儵鏅濋…鍫ュ矗閿燂拷 start */
  183. .kit-table {
  184. position: relative;
  185. /* width: 85%;
  186. margin: 55px auto; */
  187. box-shadow: 0px 1px 7px 0px #cccccc;
  188. }
  189. .kit-table .kit-table-header {
  190. height: 50px;
  191. position: relative;
  192. box-shadow: 0px 1px 7px 0px #cccccc;
  193. }
  194. .kit-table .kit-table-header .kit-search-btns {
  195. padding: 10px;
  196. position: absolute;
  197. }
  198. .kit-table .kit-table-header .kit-search-inputs {
  199. position: absolute;
  200. right: 70px;
  201. top: 0;
  202. padding: 10px 25px 10px 10px;
  203. }
  204. .kit-table .kit-table-header .kit-search-inputs .kit-search-keyword {
  205. margin-right: 10px;
  206. position: relative;
  207. }
  208. .kit-table .kit-table-header .kit-search-inputs .kit-search-more {
  209. cursor: pointer;
  210. color: #009688;
  211. position: absolute;
  212. top: 15px;
  213. right: -50px;
  214. }
  215. .kit-table .kit-table-header .kit-search-inputs .kit-search-keyword input {
  216. height: 30px;
  217. line-height: 30px;
  218. width: 200px;
  219. padding-right: 32px;
  220. }
  221. .kit-table .kit-table-header .kit-search-inputs .kit-search-keyword button {
  222. position: absolute;
  223. right: 0;
  224. top: 0;
  225. width: 30px;
  226. height: 30px;
  227. border: 0;
  228. cursor: pointer;
  229. background-color: #009688;
  230. color: white;
  231. }
  232. .kit-table .kit-table-header .kit-search-btns .layui-btn {
  233. padding: 0 15px;
  234. }
  235. .kit-table .kit-search-mored {
  236. width: 100%;
  237. height: auto;
  238. top: 51px;
  239. background-color: white;
  240. z-index: 5;
  241. box-shadow: -4px 4px 7px -3px #ccc;
  242. position: absolute;
  243. margin-bottom: 10px;
  244. display: none;
  245. right: 0px;
  246. width: 50%;
  247. }
  248. .kit-table .kit-search-mored .kit-search-body {
  249. padding: 10px;
  250. padding-bottom: 45px;
  251. }
  252. .kit-table .kit-search-mored .kit-search-footer {
  253. height: 50px;
  254. bottom: 0;
  255. left: 0;
  256. position: absolute;
  257. width: 100%;
  258. border-top: 1px solid #e2e2e2;
  259. text-align: right;
  260. }
  261. .kit-table .kit-search-mored .kit-search-footer .kit-btn {
  262. margin: 10px 5px;
  263. padding: 0 15px;
  264. }
  265. .kit-table .kit-search-mored .kit-search-footer .kit-btn:last-child {
  266. margin-right: 15px;
  267. }
  268. .kit-table .kit-table-body {
  269. position: relative;
  270. }
  271. .kit-table .kit-table-body .layui-table-view {
  272. margin: 0;
  273. }
  274. /* table闂佺儵鏅濋…鍫ュ矗閿燂拷 end */
  275. /*闂備緡鍋勯ˇ鐢稿Υ瀹ュ纭�闁挎稑瀚粊鏌ユ煕韫囥儲瀚� start*/
  276. .kit-tab {
  277. margin: 0;
  278. position: relative;
  279. border-bottom: 0;
  280. box-shadow: none;
  281. height: 100%;
  282. }
  283. .kit-tab .kit-tab-tool {
  284. position: absolute;
  285. width: 60px;
  286. height: 40px;
  287. top: 0;
  288. right: 10px;
  289. border-bottom: 1px solid #e2e2e2;
  290. border-left: 1px solid #e2e2e2;
  291. line-height: 40px;
  292. text-align: center;
  293. cursor: pointer;
  294. border-right: 1px solid #e2e2e2;
  295. }
  296. .kit-tab .kit-tab-tool:hover {
  297. background-color: #f3f3f3;
  298. }
  299. .kit-tab .kit-tab-tool-body {
  300. position: absolute;
  301. top: 40px;
  302. right: 10px;
  303. width: 150px;
  304. border: 1px solid #e2e2e2;
  305. display: none;
  306. background-color: white;
  307. z-index: 999;
  308. }
  309. .kit-tab .kit-tab-tool-body ul {
  310. text-align: center;
  311. padding: 8px 0;
  312. }
  313. .kit-tab .kit-tab-tool-body ul li.kit-item {
  314. line-height: 35px;
  315. cursor: pointer;
  316. color: #393D49;
  317. }
  318. .kit-tab .kit-tab-tool-body ul li.kit-item:hover {
  319. background-color: #f3f3f3;
  320. }
  321. .kit-tab .kit-tab-tool-body .kit-line {
  322. border-bottom: 1px solid #e2e2e2;
  323. }
  324. .kit-tab .layui-tab-title {
  325. width: calc(100%);
  326. padding-right: 0;
  327. position: absolute;
  328. z-index: 2;
  329. background: #fff;
  330. position: fixed;
  331. top: 50px;
  332. left: 200px;
  333. padding-left: 30px;
  334. }
  335. .kit-tab .layui-tab-content {
  336. padding: 0;
  337. position: relative;
  338. overflow-y: hidden;
  339. height: 100%;
  340. }
  341. .kit-tab .layui-tab-content iframe {
  342. width: 100%;
  343. height: 100% !important;
  344. border: 0;
  345. }
  346. /*闂備緡鍋勯ˇ鐢稿Υ瀹ュ纭�闁挎稑瀚粊鏌ユ煕韫囥儲瀚� end*/
  347. /* @media screen and (max-width: 992px) { */
  348. @media (max-width: 992px) {
  349. .kit-layout-admin .layui-body,
  350. .kit-layout-admin .layui-footer {
  351. left: 50px;
  352. }
  353. .kit-layout-admin .kit-side {
  354. width: 50px;
  355. }
  356. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item,
  357. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd {
  358. text-align: center;
  359. }
  360. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a,
  361. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a {
  362. padding: 0;
  363. }
  364. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a span,
  365. .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a span {
  366. display: none;
  367. }
  368. .kit-side .layui-side-scroll .kit-side-fold {
  369. display: none;
  370. }
  371. .kit-layout-admin .layui-logo {
  372. display: none;
  373. }
  374. .kit-layout-admin .kit-logo-mobile {
  375. display: block;
  376. width: 50px;
  377. }
  378. .kit-layout-admin .layui-layout-left {
  379. left: 50px;
  380. }
  381. .kit-table .kit-search-mored {
  382. width: 100%;
  383. box-shadow: 0 4px 7px -3px #ccc;
  384. }
  385. .kit-sided .layui-nav-tree .layui-nav-child a,
  386. .kit-side .layui-nav-tree .layui-nav-child a {
  387. padding-left: 0;
  388. }
  389. }
  390. .fwzx_kf{
  391. width: 60px;
  392. height: 60px;
  393. border-radius: 50%;
  394. position: absolute;
  395. top: 0;
  396. background: #dadada url(../images/setUp.png) center center no-repeat;
  397. -webkit-background-size: 100%;
  398. background-size: 70%;
  399. }
  400. .flex-box{
  401. display:flex;
  402. justify-content: start;
  403. margin-bottom:15px;
  404. }
  405. .flex-item-2{
  406. width:50%;
  407. }
  408. .flex-item label{
  409. padding: 9px 15px;
  410. width:80px;
  411. font-weight: 400;
  412. line-height: 20px;
  413. text-align: right;
  414. float:left;
  415. }
  416. .flex-item-2 input{
  417. float:left;
  418. width:calc(100% - 110px);
  419. }
  420. .flex-item-3{
  421. width:33.33%;
  422. }
  423. .flex-item-3 input{
  424. float:left;
  425. width:calc(100% - 80px);
  426. }
  427. .flex-item-3 label,.flex-item-checkbox label{
  428. width:50px;
  429. }
  430. .flex-box-3{
  431. padding-left:30px;
  432. }
  433. .flex-box .layui-form-select{
  434. height:36px;
  435. }
  436. .flex-item-checkbox{
  437. width:100%;
  438. }
  439. .flex-check-box{
  440. display: flex;
  441. justify-content: start;
  442. flex-wrap: wrap;
  443. }
  444. .flex-check-box .layui-form-checkbox{
  445. margin-bottom:15px;
  446. }
  447. /*闁圭顦甸幐宕囷拷瑙勭煯缂嶏拷 */
  448. .box-button{
  449. width:100%;
  450. position:fixed;
  451. bottom:0;
  452. right:0;
  453. background:#fff;
  454. margin-bottom:0px !important;
  455. padding:10px 0;
  456. border-top:1px solid #eee;
  457. }
  458. .box-button .layui-input-block{
  459. text-align:right;
  460. margin-left:0;
  461. padding-right:20px;
  462. }
  463. /*閻熸瑥瀚悧鎼佹儎缁嬪灝褰犻柛鎺斿█濞咃拷*/
  464. .delete-btn-box{
  465. width: 100px;
  466. height: 34px;
  467. display: flex;
  468. justify-content: center;
  469. }
  470. .delete-btn{
  471. width: 70px;
  472. height: 34px;
  473. background: #009688;
  474. color: #fff;
  475. font-size: 14px;
  476. border-radius: 20px 0 0 20px;
  477. border: none;
  478. outline: none;
  479. transition: all .5s;
  480. cursor: pointer;
  481. }
  482. .delete-btn:active{
  483. background: #006b61;
  484. }
  485. .delete-btn-icon{
  486. display: flex;
  487. align-items: center;
  488. justify-content: center;
  489. width: 30px;
  490. height: 32px;
  491. background: #fff;
  492. -webkit-background-size: 14px;
  493. background-size: 14px;
  494. border: 1px solid #d2d2d2;
  495. border-left: 0;
  496. border-radius: 0 20px 20px 0;
  497. }
  498. .delete-btn-icon img{
  499. display: block;
  500. width: 14px;
  501. margin-left: -4px;
  502. cursor: pointer;
  503. transition: all .3s;
  504. }
  505. .layui-nav-tree .layui-nav-item a:hover{
  506. background:#012e29;
  507. }
  508. .delete-btn-icon img:hover{
  509. transform: rotate(180deg);
  510. }
  511. .layui-layout-admin .layui-side{
  512. background:#012e29;
  513. }
  514. .layui-layout-admin .layui-side .layui-nav {
  515. background:#012e29;
  516. }
  517. .layui-layout-admin .layui-side .kit-side-fold{
  518. background: #213046;
  519. }
  520. .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{
  521. background: transparent;
  522. }
  523. .layui-card-body{
  524. padding: 0px;
  525. }
  526. .content{
  527. padding-top: 40px;
  528. padding-bottom: 60px;
  529. background: #f7f7f7;
  530. }
  531. .kit-theme{
  532. margin-top: 0px;
  533. }