main.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714
  1. /*building SAAS 0.1*/
  2. /*bootstrap 初始化*/
  3. body {
  4. font-size: 0.9rem;
  5. overflow: hidden;
  6. }
  7. a{
  8. outline: none
  9. }
  10. .dropdown-menu {
  11. font-size: 0.9rem
  12. }
  13. .btn.disabled, .btn:disabled {
  14. color:#999
  15. }
  16. .btn-link:focus, .btn-link:hover{
  17. text-decoration: none
  18. }
  19. .dropdown-menu {
  20. padding:.2rem 0;
  21. }
  22. .dropdown-item:focus, .dropdown-item:hover{
  23. background-color: #f7f7f9
  24. }
  25. .text-indent {
  26. text-indent:26px;
  27. }
  28. .modal-header{
  29. background:#f2f2f2;
  30. border-bottom:1px solid #ccc;
  31. padding:.8rem 1rem;
  32. }
  33. .modal-title{
  34. font-size:1rem;
  35. }
  36. .modal-footer{
  37. padding:.8rem 1rem;
  38. }
  39. .form-check .form-check-label,.form-radio .form-check-label{
  40. cursor: pointer;
  41. }
  42. .custom-file-sm,.custom-file-sm .custom-file-label{
  43. height: calc(1.5em + .5rem + 2px);
  44. padding-top: .25rem;
  45. padding-bottom: .25rem;
  46. padding-left: .5rem;
  47. }
  48. .custom-file-sm .custom-file-label:after{
  49. height: calc(1.4em + .5rem + 2px);
  50. padding-top: .25rem;
  51. padding-bottom: .25rem;
  52. font-size: .875rem;
  53. }
  54. .custom-file-sm input{
  55. height: calc(1.5em + .5rem + 2px);
  56. font-size: .875rem;
  57. }
  58. /*自定义css*/
  59. .login-body,.login-html{
  60. height:100%;
  61. }
  62. .login-bg{
  63. width: 100%;
  64. height: 100%;
  65. background: #f2f6f5 url("login-bg.jpg") bottom center no-repeat;
  66. background-size: 100% auto;
  67. display: inline-block;
  68. position: absolute;
  69. }
  70. .login-panel {
  71. width: 500px;
  72. margin: 0 auto;
  73. position: absolute;
  74. left: 0;
  75. right: 0;
  76. top: 20%;
  77. padding:30px;
  78. background:#fff;
  79. box-shadow:#333 1px 1px 5px
  80. }
  81. .ver-panel {
  82. width:100%;
  83. top:10%;
  84. }
  85. .header {
  86. border-bottom: 1px solid #ccc
  87. }
  88. .header .header-logo {
  89. background: #ff6501;
  90. float: left;
  91. margin-right: 1rem;
  92. font-size: 1rem;
  93. height:38px;
  94. background:url(logo.png) no-repeat 0 0;
  95. padding-left:50px;
  96. }
  97. .header-logo div.v-title{
  98. font-size:11px;
  99. color:#aeaeae;
  100. line-height: 12px;
  101. margin-top:3px;
  102. }
  103. .header-logo div.p-title{
  104. font-size:16px;
  105. color:#ff6501;
  106. }
  107. .header-logo div.b-title{
  108. font-size:24px;
  109. color:#ff6501;
  110. }
  111. .top-msg{
  112. position: fixed;
  113. top:10px;
  114. width:900px;
  115. z-index: 9999;
  116. left:50%;
  117. margin-left:-450px;
  118. }
  119. .main {
  120. position: relative;
  121. background: #f7f7f9;
  122. }
  123. .main-nav {
  124. position: absolute;
  125. text-align: center;
  126. z-index: 999;
  127. padding: 2px 0 0 2px
  128. }
  129. .main-nav .nav a {
  130. display: block;
  131. width: 28px;
  132. text-align: center;
  133. line-height: 18px;
  134. padding: 10px 0;
  135. border-right: 1px solid #ccc;
  136. }
  137. .main-nav .nav a:hover {
  138. background: #fff;
  139. color: #333;
  140. text-decoration: none;
  141. }
  142. .main-nav .nav a.active {
  143. border: 2px solid #ff6501;
  144. border-right: 1px solid #fff;
  145. background: #fff;
  146. color: #333
  147. }
  148. .main-nav .nav-tabs{
  149. border-bottom: none
  150. }
  151. .poj-manage .col-auto{
  152. background:#f7f7f9
  153. }
  154. .poj-cate {
  155. width:58px;
  156. margin-right:-1px;
  157. margin-top:2px;
  158. }
  159. .poj-cate .nav-pills .nav-link{
  160. border-radius: 0;
  161. font-size: 24px;
  162. color: #007bff
  163. }
  164. .poj-cate .nav-item{
  165. position: relative;
  166. }
  167. .poj-cate .nav-pills .badge{
  168. position: absolute;
  169. right:5px;
  170. top:5px;
  171. }
  172. .poj-cate .nav-pills .nav-link:hover{
  173. color:#0056b3
  174. }
  175. .poj-cate .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  176. background-color: #6c757d;
  177. color:#fff
  178. }
  179. .gl-side.gl-side-lg{
  180. width:200px;
  181. }
  182. .nav-side .nav-link{
  183. padding:.5rem;
  184. }
  185. .nav-side .nav-link.active{
  186. background:#ddd;
  187. color:#333;
  188. }
  189. .pm-side{
  190. position: fixed;
  191. left:0;
  192. height:100%;
  193. border-right:1px solid #ccc;
  194. background: #f7f7f9
  195. }
  196. .pm-content{
  197. padding-left:58px
  198. }
  199. .content {
  200. border-left: 1px solid #ccc;
  201. margin-left: 29px;
  202. background: #fff
  203. }
  204. .toolsbar,.toolsbar-f {
  205. background: #f7f7f9;
  206. border-bottom: 1px solid #ccc
  207. }
  208. .tools-btn {
  209. height: 30px;
  210. line-height: 30px
  211. }
  212. .toolsbar .tools-btn.btn:hover,.toolsbar-f .tools-btn.btn:hover {
  213. background: #f7f7f9;
  214. }
  215. .toolsbar .btn-light {
  216. color:#007bff;
  217. min-width: 34px;
  218. }
  219. .toolsbar .btn-light.disabled {
  220. color:#999;
  221. }
  222. .main-side {
  223. border-left: 1px solid #ccc;
  224. overflow-y: hidden;
  225. }
  226. .main-data-top,.main-data-full{
  227. overflow: hidden;
  228. width:100%
  229. }
  230. .main-data-top-side{
  231. overflow: hidden
  232. }
  233. .main-content.col-lg-8{
  234. width:66.666667%
  235. }
  236. .main-content.col-lg-12{
  237. width:100%
  238. }
  239. .main-side.col-lg-4{
  240. width: 33.333333%;
  241. }
  242. .main-side.col-lg-0{
  243. width:0%;
  244. }
  245. .sidebar-middle{
  246. height:80px;
  247. }
  248. .sidebar-bottom,.sidebar-bottom .col-lg-6,.sidebar-bottom .col-lg-12 {
  249. height:300px
  250. }
  251. .top-content, .fluid-content {
  252. overflow: auto;
  253. border-bottom: 1px solid #ccc;
  254. width: 100%
  255. }
  256. .bottom-content .nav {
  257. background: #f7f7f9;
  258. padding:1px 0 0 2px
  259. }
  260. .bottom-content .nav-tabs .nav-link, .side-tabs .nav-tabs .nav-link {
  261. border-radius: 0;
  262. padding: 0.2em 0.5em
  263. }
  264. .bottom-tools {
  265. height: 30px;
  266. line-height: 30px;
  267. background:#fff;
  268. bottom:20px;
  269. left:22px;
  270. z-index: 999
  271. }
  272. .side-tabs .nav-tabs .nav-item {
  273. z-index: 999
  274. }
  275. .side-tabs .nav-tabs {
  276. border-bottom: none;
  277. margin-bottom: -1px
  278. }
  279. .side-tabs .nav-tabs .nav-link {
  280. border-radius: 0;
  281. padding: 0em 0.5em;
  282. line-height: 30px;
  283. z-index: 999
  284. }
  285. .bottom-content .nav-tabs .nav-link.active {
  286. border:2px solid #ff6501;
  287. border-bottom: 1px solid #fff
  288. }
  289. .side-tabs .nav-tabs .nav-link.active {
  290. border-top: none;
  291. border-bottom:1px solid #fff
  292. }
  293. .side-tabs a.active, .sub-nav a.active {
  294. background: #ccc
  295. }
  296. .poj-manage {
  297. background: #fff
  298. }
  299. .slide-sidebar {
  300. border-left: 1px solid #E1E1E1;
  301. box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);
  302. background: none repeat scroll 0% 0% #ffffff;
  303. overflow: hidden;
  304. position: absolute;
  305. right: 0px;
  306. top: 0;
  307. z-index: 999;
  308. width: 0px;
  309. }
  310. .new-msg {
  311. -webkit-animation: tada 1s infinite .2s ease both;
  312. -moz-animation: tada 1s infinite .2s ease both;
  313. }
  314. @-webkit-keyframes tada {
  315. 0% {
  316. -webkit-transform: scale(1)
  317. }
  318. 10%, 20% {
  319. -webkit-transform: scale(0.9) rotate(-3deg)
  320. }
  321. 30%, 50%, 70%, 90% {
  322. -webkit-transform: scale(1.1) rotate(3deg)
  323. }
  324. 40%, 60%, 80% {
  325. -webkit-transform: scale(1.1) rotate(-3deg)
  326. }
  327. 100% {
  328. -webkit-transform: scale(1) rotate(0)
  329. }
  330. }
  331. @-moz-keyframes tada {
  332. 0% {
  333. -moz-transform: scale(1)
  334. }
  335. 10%, 20% {
  336. -moz-transform: scale(0.9) rotate(-3deg)
  337. }
  338. 30%, 50%, 70%, 90% {
  339. -moz-transform: scale(1.1) rotate(3deg)
  340. }
  341. 40%, 60%, 80% {
  342. -moz-transform: scale(1.1) rotate(-3deg)
  343. }
  344. 100% {
  345. -moz-transform: scale(1) rotate(0)
  346. }
  347. }
  348. .has-danger {
  349. -webkit-animation: shake 1s .2s ease both;
  350. -moz-animation: shake 1s .2s ease both;
  351. animation: shake 1s .2s ease both;
  352. }
  353. @-webkit-keyframes shake {
  354. 0%, 100% {
  355. -webkit-transform: translateX(0);
  356. }
  357. 10%, 30%, 50%, 70%, 90% {
  358. -webkit-transform: translateX(-10px);
  359. }
  360. 20%, 40%, 60%, 80% {
  361. -webkit-transform: translateX(10px);
  362. }
  363. }
  364. @-moz-keyframes shake {
  365. 0%, 100% {
  366. -moz-transform: translateX(0);
  367. }
  368. 10%, 30%, 50%, 70%, 90% {
  369. -moz-transform: translateX(-10px);
  370. }
  371. 20%, 40%, 60%, 80% {
  372. -moz-transform: translateX(10px);
  373. }
  374. }
  375. @keyframes shake {
  376. 0%, 100% {
  377. transform: translateX(0);
  378. }
  379. 10%, 30%, 50%, 70%, 90% {
  380. transform: translateX(-10px);
  381. }
  382. 20%, 40%, 60%, 80% {
  383. transform: translateX(10px);
  384. }
  385. }
  386. .gl-side{
  387. border-right:1px solid #ccc;
  388. width:120px
  389. }
  390. .bottom-content .tab-content .main-data-bottom{
  391. height: 300px;
  392. overflow: auto;
  393. }
  394. .bottom-content .main-data-bottom2{
  395. height: 331px;
  396. overflow: hidden;
  397. }
  398. .bottom-content .tab-content .ovf-hidden{
  399. overflow: hidden;
  400. }
  401. .tn-nav,.rn-nav{
  402. width:30px;
  403. height: 100%;
  404. border-left:1px solid #dee2e6 ;
  405. }
  406. .tn-nav,.cn-nav{
  407. border-right:1px solid #dee2e6 ;
  408. border-left:none;
  409. }
  410. .tn-nav > span{
  411. width:20px;
  412. }
  413. .tn-nav:hover{
  414. background:#f7f7f9;
  415. cursor: pointer;
  416. }
  417. .rn-nav {
  418. background: #f7f7f9
  419. }
  420. .rn-nav .nav{
  421. padding: 0
  422. }
  423. .rn-nav .nav-tabs {
  424. border:none;
  425. margin-top:2px;
  426. }
  427. .rn-nav .nav-tabs .nav-link{
  428. padding:0.4em 0.4em;
  429. line-height: 16px
  430. }
  431. .rn-nav .nav-tabs .nav-link.active {
  432. border:none;
  433. background-color: #fff;
  434. border-left:1px solid #fff;
  435. margin-left:-1px;
  436. border-top:1px solid #ccc;
  437. border-right:1px solid #ccc;
  438. border-bottom:1px solid #ccc;
  439. }
  440. .cn-nav .nav-tabs .nav-link.active {
  441. border:none;
  442. background-color: #fff;
  443. border-right:1px solid #fff;
  444. margin-right:-1px;
  445. border-top:1px solid #ccc;
  446. border-left:1px solid #ccc;
  447. border-bottom:1px solid #ccc;
  448. }
  449. .rn-nav .nav-tabs .nav-link span{
  450. display:none;
  451. }
  452. .rn-nav .nav-tabs .nav-link.active span{
  453. display: inline-block;
  454. }
  455. .poj-list, .side-content ,.form-view{
  456. overflow: auto;
  457. }
  458. .print-toolsbar{
  459. padding:5px
  460. }
  461. .print-toolsbar .panel {
  462. display:inline-block;
  463. vertical-align:top
  464. }
  465. .print-toolsbar .panel .panel-foot{
  466. text-align: center;
  467. font-size: 12px;
  468. padding-bottom:3px;
  469. background:#F2F2F2
  470. }
  471. .print-list {
  472. border-right:1px solid #ccc
  473. }
  474. .print-list .form-list {
  475. overflow: auto
  476. }
  477. .print-list .list-tools{
  478. height:50px;
  479. padding:10px 0;
  480. border-bottom:1px solid #f2f2f2
  481. }
  482. .pageContainer {
  483. text-align: center
  484. }
  485. .pageContainer .page{
  486. border:9px solid transparent;
  487. display: inline-block;
  488. }
  489. .pageContainer .page img{
  490. width:inherit;
  491. height: inherit;
  492. }
  493. .modal-auto-height {
  494. height: 400px;
  495. overflow-y: auto;
  496. }
  497. .modal-toolbar + .modal-auto-height{
  498. height:369px
  499. }
  500. .modal-fixed-height {
  501. height: 400px;
  502. overflow-y: hidden;
  503. }
  504. .sidebar-tools-bar {
  505. background:#fff
  506. }
  507. .side-search-box{
  508. background:#fff;
  509. border-bottom:1px solid #ddd
  510. }
  511. .navbar-crumb span{
  512. float:left;
  513. }
  514. .navbar-crumb span.text-truncate{
  515. max-width: 200px;
  516. }
  517. .dropdown-item{
  518. color:#007bff
  519. }
  520. .dropdown-item:hover{
  521. color:#0056b3
  522. }
  523. .dropdown-item.disabled, .dropdown-item:disabled{
  524. pointer-events:none
  525. }
  526. .tools-symbol{
  527. width:450px
  528. }
  529. .tools-symbol p{
  530. margin: 0
  531. }
  532. .tools-symbol a.btn{
  533. font-size: .95rem;
  534. width:26px;
  535. padding: 0;
  536. height:26px;
  537. }
  538. .custom-file-input:lang(zh) ~ .custom-file-label::after {
  539. content: "浏览";
  540. }
  541. .message-box {
  542. position:absolute;
  543. background:#000;
  544. padding:8px 10px;
  545. line-height: 18px;
  546. border-radius:4px;
  547. box-shadow:2px 2px 6px #ccc;
  548. color:#fff;
  549. }
  550. .triangle-border {
  551. position:absolute;
  552. left:10px;
  553. overflow:hidden;
  554. width:0;
  555. height:0;
  556. border-width:6px;
  557. border-style:solid dashed dashed dashed;
  558. }
  559. .tb-border {
  560. bottom:-12px;
  561. border-color:#000 transparent transparent transparent;
  562. }
  563. .tb-background {
  564. bottom:-11px;
  565. border-color:#000 transparent transparent transparent;
  566. }
  567. .box-text-style {
  568. font-size: 12px;
  569. font-family:"Microsoft YaHei"
  570. }
  571. .box-text-style p{
  572. margin:0 0 2px 0;
  573. }
  574. .box-text-style table{
  575. width: 100%;
  576. text-align: center;
  577. }
  578. .box-text-style table th,.box-text-style table td{
  579. border:1px solid #fff;
  580. }
  581. .box-text-style table p{
  582. text-align: left;
  583. }
  584. .sys-setting-nav .nav-link{
  585. padding:.3rem 1rem;
  586. }
  587. /*快捷切换单位工程*/
  588. .navbar-crumb{
  589. position: relative;
  590. }
  591. .navbar-crumb .f-nav,.navbar-crumb .s-nav{
  592. position: absolute;
  593. z-index: 999;
  594. width: 200px;
  595. background:#fff;
  596. border: 1px solid rgba(0,0,0,.15);
  597. padding: .5rem 0;
  598. }
  599. .navbar-crumb .f-nav{
  600. right:50px;
  601. top:35px;
  602. }
  603. .navbar-crumb .s-nav{
  604. left:200px
  605. }
  606. .navbar-crumb .f-nav li{
  607. padding: .25rem 1rem;
  608. cursor: default;
  609. }
  610. .navbar-crumb .f-nav li.focus{
  611. color: #16181b;
  612. background-color: #f7f7f9;
  613. }
  614. .navbar-crumb .f-nav li .s-nav{
  615. display: none
  616. }
  617. .navbar-crumb .f-nav li.focus .s-nav{
  618. display: block
  619. }
  620. /*书签颜色*/
  621. .annotate-color-1{
  622. color: #E2F2C5;
  623. border:1px solid #ced4da;
  624. }
  625. .annotate-color-1::before{
  626. color: #E2F2C5;
  627. -webkit-text-stroke:.5px #ced4da;
  628. }
  629. .annotate-color-2{
  630. background: #F9E2CF;
  631. color:#F9E2CF
  632. }
  633. .annotate-color-2::before{
  634. color: #F9E2CF;
  635. -webkit-text-stroke:.5px #ced4da;
  636. }
  637. .annotate-color-3{
  638. background: #F2EFD9;
  639. color:#F2EFD9
  640. }
  641. .annotate-color-3::before{
  642. color:#F2EFD9;
  643. -webkit-text-stroke:.5px #ced4da;
  644. }
  645. .annotate-color-4{
  646. background: #F5D1DA;
  647. color:#F5D1DA
  648. }
  649. .annotate-color-4::before{
  650. color:#F5D1DA;
  651. -webkit-text-stroke:.5px #ced4da;
  652. }
  653. .annotate-color-5{
  654. background: #E3E3E3;
  655. color:#E3E3E3
  656. }
  657. .annotate-color-5::before{
  658. color:#E3E3E3;
  659. -webkit-text-stroke:.5px #ced4da;
  660. }
  661. .annotate-color-6{
  662. background: #B6F3F2;
  663. color:#B6F3F2
  664. }
  665. .annotate-color-6::before{
  666. color:#B6F3F2;
  667. -webkit-text-stroke:.5px #ced4da;
  668. }
  669. .annotate-color-7{
  670. background: #ECE0F5;
  671. color:#ECE0F5
  672. }
  673. .annotate-color-7::before{
  674. color:#ECE0F5;
  675. -webkit-text-stroke:.5px #ced4da;
  676. }
  677. .input-group-text.active{
  678. color:#666;
  679. }
  680. /*宽屏菜单*/
  681. @media screen and (min-width: 900px) {
  682. #fluid-menu{
  683. }
  684. #min-menu{
  685. display: none
  686. }
  687. }
  688. @media screen and (min-width: 912px) {
  689. #share-info{
  690. overflow: auto;
  691. text-overflow: ellipsis;
  692. white-space: nowrap;
  693. max-width:inherit;
  694. }
  695. }
  696. /*窄屏菜单*/
  697. @media screen and (max-width: 900px) {
  698. #fluid-menu{
  699. display: none
  700. }
  701. #min-menu{
  702. }
  703. }
  704. @media screen and (max-width: 1018px) {
  705. #share-info{
  706. overflow: hidden;
  707. text-overflow: ellipsis;
  708. white-space: nowrap;
  709. max-width:80px;
  710. }
  711. }