main.css 13 KB

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