main.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  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. .pm-side{
  180. position: fixed;
  181. left:0;
  182. height:100%;
  183. border-right:1px solid #ccc;
  184. background: #f7f7f9
  185. }
  186. .pm-content{
  187. padding-left:58px
  188. }
  189. .content {
  190. border-left: 1px solid #ccc;
  191. margin-left: 29px;
  192. background: #fff
  193. }
  194. .toolsbar,.toolsbar-f {
  195. background: #f7f7f9;
  196. border-bottom: 1px solid #ccc
  197. }
  198. .tools-btn {
  199. height: 30px;
  200. line-height: 30px
  201. }
  202. .toolsbar .tools-btn.btn:hover,.toolsbar-f .tools-btn.btn:hover {
  203. background: #f7f7f9;
  204. }
  205. .toolsbar .btn-light {
  206. color:#007bff;
  207. min-width: 34px;
  208. }
  209. .toolsbar .btn-light.disabled {
  210. color:#999;
  211. }
  212. .main-side {
  213. border-left: 1px solid #ccc;
  214. overflow-y: hidden;
  215. }
  216. .main-data-top,.main-data-full{
  217. overflow: hidden;
  218. width:100%
  219. }
  220. .main-data-top-side{
  221. overflow: hidden
  222. }
  223. .main-content.col-lg-8{
  224. width:66.666667%
  225. }
  226. .main-content.col-lg-12{
  227. width:100%
  228. }
  229. .main-side.col-lg-4{
  230. width: 33.333333%;
  231. }
  232. .main-side.col-lg-0{
  233. width:0%;
  234. }
  235. .sidebar-middle{
  236. height:80px;
  237. }
  238. .sidebar-bottom,.sidebar-bottom .col-lg-6,.sidebar-bottom .col-lg-12 {
  239. height:300px
  240. }
  241. .top-content, .fluid-content {
  242. overflow: auto;
  243. border-bottom: 1px solid #ccc;
  244. width: 100%
  245. }
  246. .bottom-content .nav {
  247. background: #f7f7f9;
  248. padding:1px 0 0 2px
  249. }
  250. .bottom-content .nav-tabs .nav-link, .side-tabs .nav-tabs .nav-link {
  251. border-radius: 0;
  252. padding: 0.2em 0.5em
  253. }
  254. .bottom-tools {
  255. height: 30px;
  256. line-height: 30px;
  257. background:#fff;
  258. bottom:20px;
  259. left:22px;
  260. z-index: 999
  261. }
  262. .side-tabs .nav-tabs .nav-item {
  263. z-index: 999
  264. }
  265. .side-tabs .nav-tabs {
  266. border-bottom: none;
  267. margin-bottom: -1px
  268. }
  269. .side-tabs .nav-tabs .nav-link {
  270. border-radius: 0;
  271. padding: 0em 0.5em;
  272. line-height: 30px;
  273. z-index: 999
  274. }
  275. .bottom-content .nav-tabs .nav-link.active {
  276. border:2px solid #ff6501;
  277. border-bottom: 1px solid #fff
  278. }
  279. .side-tabs .nav-tabs .nav-link.active {
  280. border-top: none;
  281. border-bottom:1px solid #fff
  282. }
  283. .side-tabs a.active, .sub-nav a.active {
  284. background: #ccc
  285. }
  286. .poj-manage {
  287. background: #fff
  288. }
  289. .slide-sidebar {
  290. border-left: 1px solid #E1E1E1;
  291. box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);
  292. background: none repeat scroll 0% 0% #ffffff;
  293. overflow: hidden;
  294. position: absolute;
  295. right: 0px;
  296. top: 0;
  297. z-index: 999;
  298. width: 0px;
  299. }
  300. .new-msg {
  301. -webkit-animation: tada 1s infinite .2s ease both;
  302. -moz-animation: tada 1s infinite .2s ease both;
  303. }
  304. @-webkit-keyframes tada {
  305. 0% {
  306. -webkit-transform: scale(1)
  307. }
  308. 10%, 20% {
  309. -webkit-transform: scale(0.9) rotate(-3deg)
  310. }
  311. 30%, 50%, 70%, 90% {
  312. -webkit-transform: scale(1.1) rotate(3deg)
  313. }
  314. 40%, 60%, 80% {
  315. -webkit-transform: scale(1.1) rotate(-3deg)
  316. }
  317. 100% {
  318. -webkit-transform: scale(1) rotate(0)
  319. }
  320. }
  321. @-moz-keyframes tada {
  322. 0% {
  323. -moz-transform: scale(1)
  324. }
  325. 10%, 20% {
  326. -moz-transform: scale(0.9) rotate(-3deg)
  327. }
  328. 30%, 50%, 70%, 90% {
  329. -moz-transform: scale(1.1) rotate(3deg)
  330. }
  331. 40%, 60%, 80% {
  332. -moz-transform: scale(1.1) rotate(-3deg)
  333. }
  334. 100% {
  335. -moz-transform: scale(1) rotate(0)
  336. }
  337. }
  338. .has-danger {
  339. -webkit-animation: shake 1s .2s ease both;
  340. -moz-animation: shake 1s .2s ease both;
  341. animation: shake 1s .2s ease both;
  342. }
  343. @-webkit-keyframes shake {
  344. 0%, 100% {
  345. -webkit-transform: translateX(0);
  346. }
  347. 10%, 30%, 50%, 70%, 90% {
  348. -webkit-transform: translateX(-10px);
  349. }
  350. 20%, 40%, 60%, 80% {
  351. -webkit-transform: translateX(10px);
  352. }
  353. }
  354. @-moz-keyframes shake {
  355. 0%, 100% {
  356. -moz-transform: translateX(0);
  357. }
  358. 10%, 30%, 50%, 70%, 90% {
  359. -moz-transform: translateX(-10px);
  360. }
  361. 20%, 40%, 60%, 80% {
  362. -moz-transform: translateX(10px);
  363. }
  364. }
  365. @keyframes shake {
  366. 0%, 100% {
  367. transform: translateX(0);
  368. }
  369. 10%, 30%, 50%, 70%, 90% {
  370. transform: translateX(-10px);
  371. }
  372. 20%, 40%, 60%, 80% {
  373. transform: translateX(10px);
  374. }
  375. }
  376. .gl-side{
  377. border-right:1px solid #ccc;
  378. width:150px
  379. }
  380. .bottom-content .tab-content .main-data-bottom{
  381. height: 300px;
  382. overflow: auto;
  383. }
  384. .bottom-content .main-data-bottom2{
  385. height: 331px;
  386. overflow: hidden;
  387. }
  388. .bottom-content .tab-content .ovf-hidden{
  389. overflow: hidden;
  390. }
  391. .tn-nav,.rn-nav{
  392. width:30px;
  393. height: 100%;
  394. border-left:1px solid #dee2e6 ;
  395. }
  396. .tn-nav,.cn-nav{
  397. border-right:1px solid #dee2e6 ;
  398. border-left:none;
  399. }
  400. .tn-nav > span{
  401. width:20px;
  402. }
  403. .tn-nav:hover{
  404. background:#f7f7f9;
  405. cursor: pointer;
  406. }
  407. .rn-nav {
  408. background: #f7f7f9
  409. }
  410. .rn-nav .nav{
  411. padding: 0
  412. }
  413. .rn-nav .nav-tabs {
  414. border:none;
  415. margin-top:2px;
  416. }
  417. .rn-nav .nav-tabs .nav-link{
  418. padding:0.4em 0.4em;
  419. line-height: 16px
  420. }
  421. .rn-nav .nav-tabs .nav-link.active {
  422. border:none;
  423. background-color: #fff;
  424. border-left:1px solid #fff;
  425. margin-left:-1px;
  426. border-top:1px solid #ccc;
  427. border-right:1px solid #ccc;
  428. border-bottom:1px solid #ccc;
  429. }
  430. .cn-nav .nav-tabs .nav-link.active {
  431. border:none;
  432. background-color: #fff;
  433. border-right:1px solid #fff;
  434. margin-right:-1px;
  435. border-top:1px solid #ccc;
  436. border-left:1px solid #ccc;
  437. border-bottom:1px solid #ccc;
  438. }
  439. .rn-nav .nav-tabs .nav-link span{
  440. display:none;
  441. }
  442. .rn-nav .nav-tabs .nav-link.active span{
  443. display: inline-block;
  444. }
  445. .poj-list, .side-content ,.form-view{
  446. overflow: auto;
  447. }
  448. .print-toolsbar{
  449. padding:5px
  450. }
  451. .print-toolsbar .panel {
  452. display:inline-block;
  453. vertical-align:top
  454. }
  455. .print-toolsbar .panel .panel-foot{
  456. text-align: center;
  457. font-size: 12px;
  458. padding-bottom:3px;
  459. background:#F2F2F2
  460. }
  461. .print-list {
  462. border-right:1px solid #ccc
  463. }
  464. .print-list .form-list {
  465. overflow: auto
  466. }
  467. .print-list .list-tools{
  468. height:50px;
  469. padding:10px 0;
  470. border-bottom:1px solid #f2f2f2
  471. }
  472. .pageContainer {
  473. text-align: center
  474. }
  475. .pageContainer .page{
  476. border:9px solid transparent;
  477. display: inline-block;
  478. }
  479. .pageContainer .page img{
  480. width:inherit;
  481. height: inherit;
  482. }
  483. .modal-auto-height {
  484. height: 400px;
  485. overflow-y: auto;
  486. }
  487. .modal-toolbar + .modal-auto-height{
  488. height:369px
  489. }
  490. .modal-fixed-height {
  491. height: 400px;
  492. overflow-y: hidden;
  493. }
  494. .sidebar-tools-bar {
  495. background:#fff
  496. }
  497. .side-search-box{
  498. background:#fff;
  499. border-bottom:1px solid #ddd
  500. }
  501. .navbar-crumb span{
  502. float:left;
  503. }
  504. .navbar-crumb span.text-truncate{
  505. max-width: 200px;
  506. }
  507. .dropdown-item{
  508. color:#007bff
  509. }
  510. .dropdown-item:hover{
  511. color:#0056b3
  512. }
  513. .dropdown-item.disabled, .dropdown-item:disabled{
  514. pointer-events:none
  515. }
  516. .tools-symbol{
  517. width:450px
  518. }
  519. .tools-symbol p{
  520. margin: 0
  521. }
  522. .tools-symbol a.btn{
  523. font-size: .95rem;
  524. width:26px;
  525. padding: 0;
  526. height:26px;
  527. }
  528. .custom-file-input:lang(zh) ~ .custom-file-label::after {
  529. content: "浏览";
  530. }
  531. .message-box {
  532. position:absolute;
  533. background:#000;
  534. padding:8px 10px;
  535. line-height: 18px;
  536. border-radius:4px;
  537. box-shadow:2px 2px 6px #ccc;
  538. color:#fff;
  539. }
  540. .triangle-border {
  541. position:absolute;
  542. left:10px;
  543. overflow:hidden;
  544. width:0;
  545. height:0;
  546. border-width:6px;
  547. border-style:solid dashed dashed dashed;
  548. }
  549. .tb-border {
  550. bottom:-12px;
  551. border-color:#000 transparent transparent transparent;
  552. }
  553. .tb-background {
  554. bottom:-11px;
  555. border-color:#000 transparent transparent transparent;
  556. }
  557. .box-text-style {
  558. font-size: 12px;
  559. font-family:"Microsoft YaHei"
  560. }
  561. .box-text-style p{
  562. margin:0 0 2px 0;
  563. }
  564. .box-text-style table{
  565. width: 100%;
  566. text-align: center;
  567. }
  568. .box-text-style table th,.box-text-style table td{
  569. border:1px solid #fff;
  570. }
  571. .box-text-style table p{
  572. text-align: left;
  573. }
  574. .sys-setting-nav .nav-link{
  575. padding:.3rem 1rem;
  576. }
  577. /*快捷切换单位工程*/
  578. .navbar-crumb{
  579. position: relative;
  580. }
  581. .navbar-crumb .f-nav,.navbar-crumb .s-nav{
  582. position: absolute;
  583. z-index: 999;
  584. width: 200px;
  585. background:#fff;
  586. border: 1px solid rgba(0,0,0,.15);
  587. padding: .5rem 0;
  588. }
  589. .navbar-crumb .f-nav{
  590. right:50px;
  591. top:35px;
  592. }
  593. .navbar-crumb .s-nav{
  594. left:200px
  595. }
  596. .navbar-crumb .f-nav li{
  597. padding: .25rem 1rem;
  598. cursor: default;
  599. }
  600. .navbar-crumb .f-nav li.focus{
  601. color: #16181b;
  602. background-color: #f7f7f9;
  603. }
  604. .navbar-crumb .f-nav li .s-nav{
  605. display: none
  606. }
  607. .navbar-crumb .f-nav li.focus .s-nav{
  608. display: block
  609. }
  610. /*书签颜色*/
  611. .annotate-color-1{
  612. background: #E2F2C5
  613. }
  614. .annotate-color-2{
  615. background: #F9E2CF
  616. }
  617. .annotate-color-3{
  618. background: #F2EFD9
  619. }
  620. .annotate-color-4{
  621. background: #F5D1DA
  622. }
  623. .annotate-color-5{
  624. background: #E3E3E3
  625. }
  626. .annotate-color-6{
  627. background: #B6F3F2
  628. }
  629. .annotate-color-7{
  630. background: #ECE0F5
  631. }
  632. /*宽屏菜单*/
  633. @media screen and (min-width: 900px) {
  634. #fluid-menu{
  635. }
  636. #min-menu{
  637. display: none
  638. }
  639. }
  640. @media screen and (min-width: 912px) {
  641. #share-info{
  642. overflow: auto;
  643. text-overflow: ellipsis;
  644. white-space: nowrap;
  645. max-width:inherit;
  646. }
  647. }
  648. /*窄屏菜单*/
  649. @media screen and (max-width: 900px) {
  650. #fluid-menu{
  651. display: none
  652. }
  653. #min-menu{
  654. }
  655. }
  656. @media screen and (max-width: 1018px) {
  657. #share-info{
  658. overflow: hidden;
  659. text-overflow: ellipsis;
  660. white-space: nowrap;
  661. max-width:80px;
  662. }
  663. }