common.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  1. *,
  2. *:before,
  3. *:after {
  4. padding: 0;
  5. margin: 0;
  6. box-sizing: border-box;
  7. }
  8. html,
  9. body {
  10. height: 100%;
  11. font-size: 13px;
  12. background-color: #f3f3f3;
  13. font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
  14. 'Hiragino Sans GB', Arial, sans-serif;
  15. /* overflow: hidden; */
  16. }
  17. .flex {
  18. display: flex;
  19. }
  20. .flex1 {
  21. flex: 1;
  22. }
  23. .flex-around {
  24. display: flex;
  25. justify-content: space-around;
  26. }
  27. .flex-between {
  28. display: flex;
  29. justify-content: space-between;
  30. align-items: center;
  31. }
  32. .flex-end {
  33. display: flex;
  34. justify-content: flex-end;
  35. }
  36. .flex-align-center {
  37. display: flex;
  38. align-items: center;
  39. }
  40. .text-center {
  41. text-align: center;
  42. }
  43. .font12 {
  44. font-size: 12px;
  45. }
  46. .main-color {
  47. color: #228af5;
  48. }
  49. .danger-color {
  50. color: #f56c6c;
  51. }
  52. .btm10 {
  53. margin-bottom: 10px;
  54. }
  55. .btm20 {
  56. margin-bottom: 20px;
  57. }
  58. a {
  59. text-decoration: none;
  60. cursor: pointer;
  61. }
  62. .dialog-full-icon {
  63. padding: 5px;
  64. color: #fff;
  65. position: absolute;
  66. right: 50px;
  67. top: 18px;
  68. font-size: 16px;
  69. cursor: pointer;
  70. }
  71. [v-cloak] {
  72. display: none;
  73. }
  74. #app {
  75. height: 100vh;
  76. }
  77. /* 头部 */
  78. .header {
  79. height: 77px;
  80. flex: 0 0 auto;
  81. background-color: #fff;
  82. display: flex;
  83. }
  84. .header-item {
  85. padding: 15px;
  86. text-align: center;
  87. color: #333;
  88. cursor: pointer;
  89. position: relative;
  90. }
  91. .header-item p {
  92. width: 150%;
  93. margin-left: -25%;
  94. }
  95. .header-item:hover {
  96. background-color: #cae5fb;
  97. color: #228af5;
  98. }
  99. .header-item.active {
  100. background-color: #cae5fb;
  101. color: #228af5;
  102. }
  103. .nav-dropdown {
  104. display: block;
  105. font-size: 13px;
  106. color: #333;
  107. }
  108. #designer {
  109. width: 100%;
  110. height: 100%;
  111. }
  112. .main-wrap {
  113. height: calc(100vh - 77px);
  114. padding: 10px 0;
  115. flex: 1;
  116. }
  117. .main {
  118. display: flex;
  119. padding: 0px;
  120. height: 100%;
  121. margin: 0 10px;
  122. background: #fff;
  123. border: 1px solid #e5e5e5;
  124. }
  125. /* 左侧 */
  126. .aside {
  127. height: 100%;
  128. background-color: #fff;
  129. border: 1px solid #e5e5e5;
  130. }
  131. .el-tree > .el-tree-node {
  132. display: inline-block;
  133. min-width: 100%;
  134. }
  135. /* el-tree 操作弹出 */
  136. .contextmenu__item {
  137. display: block;
  138. line-height: 34px;
  139. text-align: left;
  140. padding: 0 20px;
  141. }
  142. .contextmenu__item:not(:last-child) {
  143. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  144. }
  145. .menu {
  146. position: fixed;
  147. background-color: #fff;
  148. font-size: 14px;
  149. color: #444040;
  150. border-radius: 4px;
  151. border: 1px solid rgba(0, 0, 0, 0.15);
  152. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  153. white-space: nowrap;
  154. z-index: 1000;
  155. }
  156. .contextmenu__item:hover {
  157. cursor: pointer;
  158. background: #66b1ff;
  159. border-color: #66b1ff;
  160. color: #fff;
  161. }
  162. .main > div.left {
  163. flex: 1;
  164. overflow: hidden;
  165. padding: 5px;
  166. }
  167. .main > div.right {
  168. flex: 1;
  169. overflow: hidden;
  170. padding: 5px;
  171. border-left: 1px solid #ccc;
  172. }
  173. .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  174. background-color: #e8f3fe;
  175. }
  176. /* 公共弹框样式 */
  177. .el-dialog {
  178. border-radius: 8px;
  179. overflow: hidden;
  180. }
  181. .el-dialog__header {
  182. padding: 15px;
  183. background-color: #228af5;
  184. }
  185. .el-dialog__header .el-dialog__title {
  186. color: #fff;
  187. font-size: 16px;
  188. }
  189. .el-dialog__headerbtn .el-dialog__close {
  190. color: #fff;
  191. font-size: 20px;
  192. }
  193. .el-dialog__body {
  194. padding: 15px;
  195. border-top: 1px solid #f1f1f1;
  196. }
  197. .el-form-item--mini.el-form-item,
  198. .el-form-item--small.el-form-item {
  199. margin-bottom: 15px;
  200. }
  201. .build-modal .el-dialog__body {
  202. padding: 0;
  203. }
  204. .build-modal .el-card {
  205. margin-bottom: 10px;
  206. }
  207. .build-modal .el-card p {
  208. line-height: 1.6;
  209. }
  210. .build-modal .el-form {
  211. flex: 0 0 300px;
  212. margin-right: 30px;
  213. }
  214. .build-modal .el-card__header {
  215. padding: 10px;
  216. background-color: whitesmoke;
  217. }
  218. .build-modal .el-card__body {
  219. padding: 15px;
  220. }
  221. .inline-inputs .el-form-item__content {
  222. display: flex;
  223. justify-content: space-between;
  224. }
  225. .inline-inputs .el-form-item__content span {
  226. margin: 0 20px;
  227. }
  228. .select-box .el-radio-group {
  229. display: flex;
  230. flex-direction: column;
  231. margin-top: 15px;
  232. }
  233. .select-box .el-checkbox-group {
  234. display: flex;
  235. flex-direction: column;
  236. }
  237. .select-box .el-radio-group label {
  238. margin-bottom: 20px;
  239. }
  240. .select-box .el-checkbox-group label {
  241. margin-bottom: 15px;
  242. }
  243. .nav-icon {
  244. display: inline-block;
  245. width: 35px;
  246. height: 35px;
  247. margin-bottom: 3px;
  248. }
  249. .nav-icon1 {
  250. background: url(../images/navs/1.png) no-repeat;
  251. background-size: 100% 100%;
  252. }
  253. .nav-icon2 {
  254. background: url(../images/navs/2.png) no-repeat;
  255. background-size: 100% 100%;
  256. }
  257. .nav-icon3 {
  258. background: url(../images/navs/3.png) no-repeat;
  259. background-size: 100% 100%;
  260. }
  261. .nav-icon4 {
  262. background: url(../images/navs/4.png) no-repeat;
  263. background-size: 100% 100%;
  264. }
  265. .nav-icon5 {
  266. background: url(../images/navs/5.png) no-repeat;
  267. background-size: 100% 100%;
  268. }
  269. .nav-icon6 {
  270. background: url(../images/navs/6.png) no-repeat;
  271. background-size: 100% 100%;
  272. }
  273. .nav-icon7 {
  274. background: url(../images/navs/7.png) no-repeat;
  275. background-size: 100% 100%;
  276. }
  277. .nav-icon8 {
  278. background: url(../images/navs/8.png) no-repeat;
  279. background-size: 100% 100%;
  280. }
  281. .nav-icon9 {
  282. background: url(../images/navs/9.png) no-repeat;
  283. background-size: 100% 100%;
  284. }
  285. .nav-icon10 {
  286. background: url(../images/navs/10.png) no-repeat;
  287. background-size: 100% 100%;
  288. }
  289. .nav-icon11 {
  290. background: url(../images/navs/11.png) no-repeat;
  291. background-size: 100% 100%;
  292. }
  293. .nav-icon12 {
  294. background: url(../images/navs/12.png) no-repeat;
  295. background-size: 100% 100%;
  296. }
  297. .nav-icon13 {
  298. background: url(../images/navs/13.png) no-repeat;
  299. background-size: 100% 100%;
  300. }
  301. .nav-icon14 {
  302. background: url(../images/navs/14.png) no-repeat;
  303. background-size: 100% 100%;
  304. }
  305. .nav-icon15 {
  306. background: url(../images/navs/15.png) no-repeat;
  307. background-size: 100% 100%;
  308. }
  309. .nav-icon16 {
  310. background: url(../images/navs/16.png) no-repeat;
  311. background-size: 100% 100%;
  312. }
  313. .nav-icon17 {
  314. background: url(../images/navs/17.png) no-repeat;
  315. background-size: 100% 100%;
  316. }
  317. .nav-icon18 {
  318. background: url(../images/navs/18.png) no-repeat;
  319. background-size: 100% 100%;
  320. }
  321. .nav-icon19 {
  322. background: url(../images/navs/19.png) no-repeat;
  323. background-size: 100% 100%;
  324. }
  325. .tree-icon {
  326. display: inline-block;
  327. width: 14px;
  328. height: 14px;
  329. margin-right: 5px;
  330. vertical-align: -2px;
  331. }
  332. .tree-icon01 {
  333. background: url(../images/tree/project-1@2x.png) no-repeat;
  334. background-size: 100% 100%;
  335. }
  336. .tree-icon02 {
  337. background: url(../images/tree/project-2@2x.png) no-repeat;
  338. background-size: 100% 100%;
  339. }
  340. .tree-icon03 {
  341. background: url(../images/tree/project-3@2x.png) no-repeat;
  342. background-size: 100% 100%;
  343. }
  344. .tree-icon1,
  345. .tree-icon18,
  346. .tree-icon20,
  347. .tree-icon22 {
  348. background: url(../images/tree/project@2x.png) no-repeat;
  349. background-size: 100% 100%;
  350. }
  351. .tree-icon2 {
  352. background: url(../images/tree/class@2x.png) no-repeat;
  353. background-size: 100% 100%;
  354. }
  355. .tree-icon3 {
  356. background: url(../images/tree/sub-class@2x.png) no-repeat;
  357. background-size: 100% 100%;
  358. }
  359. .tree-icon4 {
  360. background: url(../images/tree/sub-class-child@2x.png) no-repeat;
  361. background-size: 100% 100%;
  362. }
  363. .tree-icon5 {
  364. background: url(../images/tree/form@2x.png) no-repeat;
  365. background-size: 100% 100%;
  366. }
  367. .tree-icon6,
  368. .tree-icon17,
  369. .tree-icon19,
  370. .tree-icon21 {
  371. background: url(../images/tree/floor@2x.png) no-repeat;
  372. background-size: 100% 100%;
  373. }
  374. .tree-icon7 {
  375. background: url(../images/tree/build@2x.png) no-repeat;
  376. background-size: 100% 100%;
  377. }
  378. .tree-icon8 {
  379. background: url(../images/tree/form8@2x.png) no-repeat;
  380. background-size: 100% 100%;
  381. }
  382. .tree-icon9 {
  383. background: url(../images/tree/floor@2x.png) no-repeat;
  384. background-size: 100% 100%;
  385. }
  386. .tree-icon10 {
  387. background: url(../images/tree/project@2x.png) no-repeat;
  388. background-size: 100% 100%;
  389. }
  390. .tree-icon11 {
  391. background: url(../images/tree/tong1.png) no-repeat;
  392. background-size: 100% 100%;
  393. }
  394. .tree-icon12 {
  395. background: url(../images/tree/tong2.png) no-repeat;
  396. background-size: 100% 100%;
  397. }
  398. .tree-icon13 {
  399. background: url(../images/tree/tong3.png) no-repeat;
  400. background-size: 100% 100%;
  401. }
  402. .tree-icon14 {
  403. background: url(../images/tree/tong4.png) no-repeat;
  404. background-size: 100% 100%;
  405. }
  406. .tree-icon15 {
  407. background: url(../images/tree/tong5.png) no-repeat;
  408. background-size: 100% 100%;
  409. }
  410. .tree-icon16 {
  411. background: url(../images/tree/tong6.png) no-repeat;
  412. background-size: 100% 100%;
  413. }
  414. .tree-icon100 {
  415. background: url(../images/tree/tong7.png) no-repeat;
  416. background-size: 100% 100%;
  417. }
  418. .tree-icon101 {
  419. background: url(../images/tree/tong8.png) no-repeat;
  420. background-size: 100% 100%;
  421. }
  422. .tree-icon102 {
  423. background: url(../images/tree/tong9.png) no-repeat;
  424. background-size: 100% 100%;
  425. }
  426. .tree-icon103 {
  427. background: url(../images/tree/tong10.png) no-repeat;
  428. background-size: 100% 100%;
  429. }
  430. .tree-icon104 {
  431. background: url(../images/tree/tong1.png) no-repeat;
  432. background-size: 100% 100%;
  433. }
  434. .tree-icon105 {
  435. background: url(../images/tree/tong2.png) no-repeat;
  436. background-size: 100% 100%;
  437. }
  438. .tree-icon-company {
  439. background: url(../images/icons/company.png) no-repeat;
  440. background-size: 110% 110%;
  441. }
  442. .home-content {
  443. display: flex;
  444. flex-direction: column;
  445. justify-content: center;
  446. align-items: center;
  447. flex: 1;
  448. }
  449. .home-content h1 {
  450. margin-bottom: 50px;
  451. }
  452. .home-content img {
  453. width: 80%;
  454. height: 50%;
  455. }
  456. .dialog-nowrap {
  457. pointer-events: none;
  458. }
  459. .dialog-nowrap .el-dialog {
  460. pointer-events: auto;
  461. }
  462. .el-drawer__wrapper {
  463. pointer-events: none;
  464. }
  465. .el-drawer__wrapper .el-drawer {
  466. pointer-events: auto;
  467. }
  468. /* 新建表格tab ...限制宽度 */
  469. .sheet-modal .el-tabs__item {
  470. max-width: 400px;
  471. overflow: hidden;
  472. padding: 0 15px 0 10px;
  473. text-overflow: ellipsis;
  474. }
  475. /* 使用element 滚动条样式 */
  476. ::-webkit-scrollbar {
  477. z-index: 11;
  478. width: 6px;
  479. height: 6px;
  480. }
  481. ::-webkit-scrollbar-thumb {
  482. border-radius: 5px;
  483. width: 6px;
  484. background: #b4bccc;
  485. }
  486. ::-webkit-scrollbar-corner {
  487. background: #fff;
  488. }
  489. ::-webkit-scrollbar-track {
  490. background: #fff;
  491. }
  492. ::-webkit-scrollbar-track-piece {
  493. background: #fff;
  494. width: 6px;
  495. }
  496. .ribbon-button-lock {
  497. background-image: url('../images/icons/lock.png');
  498. background-size: 100% 100% !important;
  499. }
  500. .ribbon-button-unlock {
  501. background-image: url('../images/icons/unlock.png');
  502. background-size: 100% 100% !important;
  503. }
  504. .ribbon-button-tags {
  505. background-image: url('../images/icons/tags.png');
  506. background-size: 100% 100% !important;
  507. }
  508. .ribbon-button-check {
  509. background-image: url('../images/icons/check.png');
  510. background-size: 100% 100% !important;
  511. }
  512. .ribbon-button-clear-source {
  513. background-image: url('../images/icons/clear.png');
  514. background-size: 100% 100% !important;
  515. }
  516. .ribbon-button-select {
  517. background-image: url('../images/icons/select.png');
  518. background-size: 100% 100% !important;
  519. }
  520. .gc-ribbon-bar .ribbon-button-item.ribbon-bigbutton {
  521. min-width: 40px;
  522. max-width: 60px;
  523. min-height: 0;
  524. }
  525. .grid-box {
  526. display: flex;
  527. flex-wrap: wrap;
  528. border-left: 1px solid #ccc;
  529. }
  530. .grid-box > div {
  531. width: 30px;
  532. height: 35px;
  533. text-align: center;
  534. line-height: 35px;
  535. color: #000;
  536. border-bottom: 1px solid #ccc;
  537. border-right: 1px solid #ccc;
  538. border-top: 1px solid #ccc;
  539. cursor: pointer;
  540. font-size: 18px;
  541. }
  542. .grid-box > div:nth-child(n + 21) {
  543. border-top: none;
  544. }
  545. .grid-box > div.checked {
  546. background-color: #409eff;
  547. color: #f1f1f1;
  548. }
  549. .char-tab .el-tabs__nav,
  550. .char-tab .el-tabs__content {
  551. max-height: 300px;
  552. overflow: auto;
  553. }
  554. .char-tab .el-tabs__item {
  555. height: 25px;
  556. line-height: 25px;
  557. font-family: 'chars';
  558. }
  559. .char-input .el-input__inner {
  560. font-family: 'chars';
  561. }
  562. .fonts {
  563. font-family: 'chars';
  564. }
  565. .char-pop {
  566. text-align: center;
  567. height: 80px;
  568. line-height: 60px;
  569. width: 80px;
  570. font-size: 60px;
  571. font-family: 'chars';
  572. }
  573. /* 拖拽的线 */
  574. #box {
  575. width: 100%;
  576. height: 100%;
  577. overflow: hidden;
  578. /* background-color:royalblue; */
  579. }
  580. #resize {
  581. width: 2px;
  582. height: 100%;
  583. cursor: w-resize;
  584. background-color: #ccc;
  585. float: left;
  586. position: relative;
  587. }
  588. #resize2 {
  589. height: 5px;
  590. width: 100%;
  591. background-color: #ccc;
  592. cursor: n-resize;
  593. position: relative;
  594. }
  595. #left {
  596. width: 350px;
  597. height: 100%;
  598. /* background:skyblue; */
  599. float: left;
  600. overflow: auto;
  601. }
  602. #right {
  603. float: right;
  604. width: calc(100% - 352px);
  605. height: 100%;
  606. /* background:tomato; */
  607. overflow: auto;
  608. }
  609. #top {
  610. height: 300px;
  611. width: 100%;
  612. /* background:skyblue; */
  613. overflow: auto;
  614. }
  615. #bottom {
  616. height: calc(100% - 305px);
  617. width: 100%;
  618. /* background:tomato; */
  619. overflow: auto;
  620. }
  621. .resImg {
  622. position: absolute;
  623. top: 0;
  624. bottom: 0;
  625. margin: auto;
  626. width: 12px;
  627. height: 60px;
  628. cursor: pointer;
  629. }
  630. #resize2 .resImg {
  631. position: absolute;
  632. left: 0;
  633. right: 0;
  634. margin: auto;
  635. height: 12px;
  636. width: 60px;
  637. cursor: pointer;
  638. }
  639. .left-tree {
  640. flex: 0 0 300px;
  641. padding: 10px 10px 10px 0;
  642. border: 1px solid #ccc;
  643. min-height: 400px;
  644. height: 100%;
  645. /* margin-right: 15px;
  646. border-radius: 5px; */
  647. overflow: auto;
  648. }
  649. .el-table tbody tr:hover > td {
  650. background-color: unset !important;
  651. }
  652. .el-table .cell {
  653. line-height: 1.2;
  654. }
  655. .capacity-cell {
  656. background-color: rgb(212, 243, 255);
  657. position: relative;
  658. }
  659. .capacity-cell:hover .xuan-btn {
  660. display: block;
  661. }
  662. .xuan-btn {
  663. position: absolute;
  664. top: 0;
  665. bottom: 0;
  666. margin: auto;
  667. right: 0;
  668. padding: 4px;
  669. display: none;
  670. }
  671. .bottom-cell {
  672. position: relative;
  673. padding-top: 20px !important;
  674. }
  675. .inline-input .el-input__inner {
  676. padding: 0 4px;
  677. }
  678. .scheme-table.el-table .cell {
  679. padding: 0 5px;
  680. line-height: 1.3;
  681. }
  682. .bottom-cell:hover .opration {
  683. display: block;
  684. }
  685. .opration {
  686. position: absolute;
  687. top: 0;
  688. right: 0;
  689. display: block;
  690. border: 1px solid #ccc;
  691. line-height: 1;
  692. display: none;
  693. }
  694. .opration i {
  695. cursor: pointer;
  696. font-size: 14px;
  697. color: #409eff;
  698. border: 1px solid #409eff;
  699. }
  700. .branch-list .el-radio-group {
  701. display: flex;
  702. flex-wrap: wrap;
  703. }
  704. .branch-list .el-radio-group label {
  705. flex: 0 0 50%;
  706. margin-right: 0px;
  707. margin: 6px 0;
  708. }
  709. .input-number input::-webkit-outer-spin-button {
  710. -webkit-appearance: none;
  711. }
  712. .input-number input::-webkit-inner-spin-button {
  713. -webkit-appearance: none;
  714. }
  715. .input-number input[type='number'] {
  716. -moz-appearance: textfield;
  717. }
  718. /* table 行内编辑使用 */
  719. .item_input {
  720. display: none;
  721. }
  722. .item_input .el-input__inner {
  723. padding: 0px 2px;
  724. height: 18px;
  725. line-height: 18px;
  726. }
  727. .text-overflow {
  728. overflow: hidden;
  729. text-overflow: ellipsis;
  730. white-space: nowrap;
  731. }
  732. .is-tooltipStyle {
  733. max-width: 20%;
  734. color: #fff;
  735. background-color: #444040;
  736. }