index.scss 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225
  1. html {
  2. body {
  3. * {
  4. box-sizing: border-box;
  5. }
  6. /* ant-input-search搜索框 */
  7. .ant-input-search {
  8. max-width: 250px;
  9. }
  10. /* ant-pagination分页 */
  11. .ant-pagination {
  12. margin-top: $vab-margin;
  13. text-align: center;
  14. &.ant-table-pagination {
  15. float: none !important;
  16. margin-top: $vab-margin;
  17. }
  18. }
  19. }
  20. }
  21. body {
  22. height: 100%;
  23. -moz-osx-font-smoothing: grayscale;
  24. -webkit-font-smoothing: antialiased;
  25. text-rendering: optimizeLegibility;
  26. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  27. }
  28. label {
  29. font-weight: 700;
  30. }
  31. html {
  32. height: 100%;
  33. box-sizing: border-box;
  34. }
  35. #app {
  36. height: 100%;
  37. }
  38. *,
  39. *:before,
  40. *:after {
  41. box-sizing: inherit;
  42. }
  43. a:focus,
  44. a:active {
  45. outline: none;
  46. }
  47. a,
  48. a:focus,
  49. a:hover {
  50. cursor: pointer;
  51. color: inherit;
  52. text-decoration: none;
  53. }
  54. div:focus {
  55. outline: none;
  56. }
  57. .clearfix {
  58. &:after {
  59. visibility: hidden;
  60. display: block;
  61. font-size: 0;
  62. content: " ";
  63. clear: both;
  64. height: 0;
  65. }
  66. }
  67. .inOneLine {
  68. display: inline-block;
  69. white-space: nowrap;
  70. overflow: hidden;
  71. text-overflow: ellipsis;
  72. }
  73. // main-container global css
  74. .mb-5 {
  75. margin-bottom: 5px
  76. }
  77. .mb-10 {
  78. margin-bottom: 10px
  79. }
  80. .mb-20 {
  81. margin-bottom: 20px
  82. }
  83. .mr-30 {
  84. margin-right: 30px
  85. }
  86. .ml-30 {
  87. margin-left: 30px
  88. }
  89. .mt-20 {
  90. margin-top: 20px
  91. }
  92. .mt-40 {
  93. margin-top: 40px
  94. }
  95. .mt-60 {
  96. margin-top: 60px
  97. }
  98. .font-16 {
  99. font-size: 16px
  100. }
  101. .padding-20 {
  102. padding: 20px
  103. }
  104. .text-center {
  105. text-align: center
  106. }
  107. .delete-text {
  108. color: #F80000 !important
  109. }
  110. .remarksTxt {
  111. opacity: .45;
  112. line-height: 1.5;
  113. }
  114. .app-container {
  115. padding: 20px;
  116. // width: 100%;
  117. width: calc(100%);
  118. height: 100%;
  119. // margin: 20px;
  120. // margin-top: 70px;
  121. background: #fff;
  122. min-height: calc(100vh - 130px)
  123. }
  124. .filter-container {
  125. width: 100%;
  126. display: flex;
  127. -webkit-box-pack: justify;
  128. -webkit-justify-content: space-between;
  129. -ms-flex-pack: justify;
  130. justify-content: space-between;
  131. vertical-align: middle;
  132. .el-button+.el-button {
  133. margin-left: 30px !important;
  134. }
  135. .filter-item {
  136. margin-right: 30px;
  137. display: inline-block;
  138. margin-bottom: 10px
  139. }
  140. }
  141. .ant-layout-header {
  142. height: $vab-header-height !important;
  143. line-height: $vab-header-height !important;
  144. }
  145. .el-input__inner {
  146. height: 36px;
  147. line-height: 36px
  148. }
  149. .el-button {
  150. padding: 10px 12px;
  151. }
  152. .el-table--small {
  153. font-size: 14px !important
  154. }
  155. .el-table td,
  156. .el-table th {
  157. padding: 10px 0
  158. }
  159. // 弹框样式start
  160. .el-dialog__header {
  161. background: #f8f8f8;
  162. padding: 16px 20px 16px;
  163. }
  164. .el-form-item:not(.user-layout .el-form-item) {
  165. width: 90%;
  166. max-width: 400px;
  167. margin: 0 auto 20px;
  168. }
  169. // 弹框样式end
  170. // 台区列表
  171. .siteTitle {
  172. font-size: 16px;
  173. padding: 10px 20px 30px 20px;
  174. text-align: center;
  175. position: relative;
  176. .goBack {
  177. position: absolute;
  178. left: 0;
  179. top: 0
  180. }
  181. }
  182. .status.el-avatar {
  183. width: 14px;
  184. height: 14px;
  185. }
  186. .status.el-avatar.online {
  187. background: #04F21C
  188. }
  189. .status.el-avatar.offline {
  190. background: #aaa
  191. }
  192. // 基本信息
  193. .basicInfo {
  194. width: 100%;
  195. height: calc(100vh - 180px);
  196. // border: 1px solid pink;
  197. display: block;
  198. overflow-y: auto;
  199. }
  200. .siteManage-main {
  201. padding: 20px;
  202. }
  203. .groupInfo,
  204. .basic-info-page,
  205. .powerScore {
  206. .el-form-item {
  207. margin-left: 0px !important
  208. }
  209. }
  210. .goArchive {
  211. color: #056FFF;
  212. // text-decoration: underline;
  213. cursor: default;
  214. }
  215. .goArchive:hover {
  216. cursor: text;
  217. }
  218. .blockTitle {
  219. font-weight: bold;
  220. position: relative;
  221. padding-left: 10px;
  222. color: #056FFF;
  223. }
  224. .blockTitle:before {
  225. content: "";
  226. width: 3px;
  227. margin-right: 9px;
  228. height: 16px;
  229. position: relative;
  230. top: 3px;
  231. display: inline-block;
  232. background: #4074e7;
  233. }
  234. // input长度
  235. .el-form-item__content {
  236. width: 250px;
  237. }
  238. .planOutage {
  239. .el-date-editor.el-input,
  240. .el-date-editor.el-input__inner {
  241. width: 100%;
  242. max-width: 100%;
  243. }
  244. }
  245. .el-select {
  246. width: 100%
  247. }
  248. // 单选框样式
  249. .el-radio {
  250. margin-right: 24px
  251. }
  252. //提交:
  253. .sublitArea {
  254. text-align: right;
  255. margin-top: 40px
  256. }
  257. // 图片上传样式 start
  258. .el-upload.el-upload--picture-card {
  259. width: 90px;
  260. height: 90px;
  261. line-height: 100px;
  262. }
  263. .el-upload-list--picture-card .el-upload-list__item {
  264. width: 92px !important;
  265. height: 92px !important;
  266. line-height: 92px !important;
  267. text-align: center
  268. }
  269. .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  270. width: 90px !important;
  271. height: 90px !important;
  272. line-height: 90px !important;
  273. }
  274. .avatar {
  275. width: 90px;
  276. height: 90px;
  277. }
  278. // 电力监测
  279. .watchDog,
  280. .variableList {
  281. .el-form-item__content {
  282. width: 270px
  283. }
  284. .el-form-item__label {
  285. width: 150px !important
  286. }
  287. .el-form-item__content {
  288. // margin-left: 150px!important
  289. }
  290. }
  291. .paginationBlock {
  292. margin-top: 20px;
  293. text-align: right
  294. }
  295. .filter-container {
  296. .el-button+.el-button {
  297. margin-left: 20px !important;
  298. }
  299. .el-input {
  300. margin: 0 20px 0 0;
  301. }
  302. }
  303. // 树形控件icon
  304. .el-tree-node__content {
  305. position: relative;
  306. font-size: 16px;
  307. }
  308. .siteTree .el-icon-delete {
  309. color: #409EFF;
  310. position: absolute;
  311. right: 6px;
  312. top: 5px;
  313. }
  314. .custom-tree-node span:first-child {
  315. width: 100px
  316. }
  317. // 告警管理渐变背景色
  318. .alarmingTable {
  319. a {
  320. margin-right: 0 !important;
  321. }
  322. }
  323. .alarmingManage .el-table .cell {
  324. text-align: left !important;
  325. }
  326. .gradualBg {
  327. padding: 0 5px;
  328. color: #444;
  329. display: inline-block;
  330. background: linear-gradient(to right, rgb(255, 154, 50), transparent);
  331. }
  332. .gradualBg.total {
  333. background: linear-gradient(to right, rgb(138, 196, 243), transparent);
  334. }
  335. .gradualBg.transparent {
  336. background: linear-gradient(to right, transparent, transparent) !important;
  337. }
  338. //告警详情弹框组件
  339. .alarmStatusDialog {
  340. .el-form-item:not(.user-layout .el-form-item) {
  341. margin-bottom: 0
  342. }
  343. .deviceTit {
  344. font-size: 16px;
  345. color: #409EFF;
  346. padding: 20px 0
  347. }
  348. .basicTit {
  349. color: #4074e7;
  350. line-height: 49px;
  351. height: 49px;
  352. font-size: 16px
  353. }
  354. .basicTit:before {
  355. content: "";
  356. width: 3px;
  357. margin-right: 9px;
  358. height: 16px;
  359. position: relative;
  360. top: 3px;
  361. display: inline-block;
  362. background: #4074e7;
  363. }
  364. .topInfo {
  365. position: relative;
  366. overflow: hidden;
  367. .lubo {
  368. // position: absolute;
  369. // right: 0px;
  370. // bottom: 20px;
  371. float: right;
  372. margin-bottom: 20px;
  373. }
  374. .handleStatus {
  375. position: absolute;
  376. right: 0px;
  377. top: 0px;
  378. color: #F80000
  379. }
  380. }
  381. }
  382. .underline {
  383. position: relative;
  384. }
  385. .underline:after {
  386. position: absolute;
  387. bottom: 0;
  388. left: -20px;
  389. right: -20px;
  390. height: 1px;
  391. content: '';
  392. -webkit-transform: scaleY(.5);
  393. transform: scaleY(.5);
  394. background-color: #000; //这个是唯佳的线颜色
  395. opacity: .2
  396. }
  397. .underline:last-child:after {
  398. //可以这样用
  399. height: 0;
  400. }
  401. // 谐波分析
  402. .harmonicReport {
  403. .filter-container .filter-item {
  404. // margin-right: 10px
  405. }
  406. }
  407. .timeTab.el-button {
  408. margin-bottom: 20px;
  409. border-radius: 0
  410. }
  411. // 三项不平衡
  412. .blanceChartTit {
  413. padding: 10px 14px;
  414. margin-bottom: 10px;
  415. border-bottom: 1px solid #f0f0f0;
  416. background: #FAFAFA;
  417. font-weight: bold
  418. }
  419. //评估报告
  420. .defaultCursor:hover {
  421. cursor: default !important;
  422. }
  423. .assePage .blanceChartTit {
  424. margin-bottom: 0;
  425. width: 100%;
  426. display: flex;
  427. justify-content: space-between;
  428. vertical-align: middle;
  429. span {
  430. display: inline-block
  431. }
  432. }
  433. .assePage {
  434. .subTits {
  435. margin: 25px auto;
  436. text-align: center;
  437. font-weight: bold
  438. }
  439. .assNum {
  440. font-size: 18px;
  441. color: #2EAEFF;
  442. margin-bottom: 10px;
  443. }
  444. .greenRate {
  445. color: #04A522
  446. }
  447. .assTxt {
  448. font-size: 14px
  449. }
  450. .assSmallbox {
  451. padding: 10px 0;
  452. text-align: center;
  453. font-weight: bold;
  454. }
  455. }
  456. // tab重置样式
  457. .asseTabs {
  458. margin-bottom: 20px;
  459. border-bottom: 1px solid #E5E5E5;
  460. width: calc(100% + 40px);
  461. margin-left: -20px;
  462. }
  463. .asseTabs span {
  464. line-height: 50px;
  465. height: 50px;
  466. font-size: 16px;
  467. display: inline-block;
  468. padding: 0 20px;
  469. }
  470. .asseTabs span.active {
  471. border-bottom: 2px solid #2EAEFF
  472. }
  473. .banlanceBtn {
  474. max-width: 80%;
  475. // margin: 0 auto 20px;
  476. height: 40px;
  477. // line-height: 40px;
  478. width: 236px;
  479. font-size: 16px !important;
  480. // background: #6dc6ff;
  481. // color: #fff
  482. }
  483. .assCard {
  484. min-height: 356px !important;
  485. .noDataImg {
  486. width: 40%;
  487. margin-top: 40px;
  488. }
  489. }
  490. .assCard ul {
  491. text-align: left;
  492. margin: 0;
  493. padding: 15px 20px 0;
  494. li:not(:last-child) {
  495. border-bottom: 1px solid #F0F0F0;
  496. }
  497. li {
  498. line-height: 40px;
  499. display: flex;
  500. justify-content: space-between;
  501. vertical-align: middle;
  502. font-size: 14px;
  503. div {
  504. display: inline-block;
  505. white-space: nowrap;
  506. overflow: hidden;
  507. text-overflow: ellipsis;
  508. }
  509. span {
  510. color: #04A522;
  511. background: #F4F4F4;
  512. display: inline-block;
  513. border-radius: 20px;
  514. line-height: 20px;
  515. height: 20px;
  516. text-align: center;
  517. width: 58px;
  518. margin-top: 10px;
  519. }
  520. span.overLimit {
  521. color: #F80000
  522. }
  523. }
  524. }
  525. .totalScore {
  526. font-weight: bold;
  527. text-align: center;
  528. margin: 30px;
  529. .el-button {
  530. font-size: 16px;
  531. margin-left: 10px;
  532. }
  533. }
  534. // 实时评分
  535. .descIcon {
  536. cursor: pointer
  537. }
  538. .descIcon img {
  539. position: relative;
  540. top: 2px;
  541. }
  542. .smallSquare {
  543. display: inline-block;
  544. width: 7px;
  545. position: relative;
  546. top: -1px;
  547. height: 7px;
  548. background: #F80000;
  549. }
  550. .smallSquare.green {
  551. background: #24BE00
  552. }
  553. .loopUnbanlancePanel,
  554. .loopHarmonicPanel {
  555. height: 591px;
  556. overflow: hidden;
  557. .el-row {
  558. margin-bottom: 0 !important;
  559. }
  560. }
  561. .loopUnbanlanceCard {
  562. // height: calc(100% - 100px);
  563. ul {
  564. padding: 0;
  565. margin-bottom: 0;
  566. font-size: 14px;
  567. margin-top: 20px
  568. }
  569. li {
  570. display: flex;
  571. >div {
  572. margin: 2px 4px;
  573. line-height: 14px;
  574. }
  575. >div:first-child {
  576. // min-width: 64px;
  577. }
  578. }
  579. }
  580. @media(min-width:1500px) {
  581. .loopUnbanlanceCard {
  582. li {
  583. >div {
  584. margin: 7px 20px;
  585. line-height: 14px;
  586. }
  587. }
  588. }
  589. }
  590. @media(max-width:1200px) {
  591. .bg-purple {
  592. margin-bottom: 20px
  593. }
  594. }
  595. .voltagePanel {
  596. .el-table--small th,
  597. .el-table--small td {
  598. padding: 15px 0
  599. }
  600. .uList p {
  601. margin-right: 10px;
  602. padding: 8px 0
  603. }
  604. .shangXian {
  605. padding: 20px 0 0;
  606. display: flex;
  607. width: 300px;
  608. margin-left: 40px;
  609. text-align: center;
  610. div {
  611. width: 50%;
  612. text-align: center;
  613. position: relative
  614. }
  615. div:first-child:after {
  616. position: absolute;
  617. top: 0;
  618. z-index: 4;
  619. /* left: -20px; */
  620. right: 20px;
  621. height: 211px;
  622. width: 1px;
  623. border: 1px dashed #000;
  624. content: "";
  625. /* transform: scaleY(0.5); */
  626. background-color: rgba(0, 0, 0, 0);
  627. opacity: .2;
  628. }
  629. div:last-child:before {
  630. position: absolute;
  631. top: 0;
  632. z-index: 4;
  633. left: 20px;
  634. height: 211px;
  635. width: 1px;
  636. border: 1px dashed #000;
  637. content: "";
  638. /* transform: scaleY(.2); */
  639. background-color: rgba(0, 0, 0, 0);
  640. opacity: .2;
  641. }
  642. }
  643. }
  644. .frequencyPanel {
  645. text-align: center;
  646. .frequencyTit {
  647. color: #F80000;
  648. font-weight: bold
  649. }
  650. .frequencyTit2 {
  651. font-weight: bold;
  652. margin: 10px auto;
  653. span {
  654. color: #fff;
  655. background: #21c393;
  656. display: inline-block;
  657. border-radius: 20px;
  658. line-height: 24px;
  659. height: 24px;
  660. text-align: center;
  661. font-size: 14px;
  662. width: 58px;
  663. }
  664. }
  665. .frequencyBox .grid-content {
  666. min-height: 50px !important;
  667. border-radius: 0;
  668. background: #f0f0f0;
  669. border: none;
  670. }
  671. .rightSplitRed {
  672. position: relative;
  673. i {
  674. position: absolute;
  675. position: absolute;
  676. right: -14.5px;
  677. bottom: -11px;
  678. color: #f1673d
  679. }
  680. i:after {
  681. display: none
  682. }
  683. }
  684. .greenShadow {
  685. position: absolute;
  686. width: 118px;
  687. height: 100%;
  688. bottom: 0;
  689. background: rgba(37, 215, 162, .3);
  690. left: 41px;
  691. background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
  692. background-image: -moz-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
  693. background-image: -ms-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
  694. background-image: -o-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
  695. background-image: gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
  696. background-size: 8px 8px
  697. }
  698. .rightSplitRed .grid-content:after {
  699. position: absolute;
  700. bottom: -3px;
  701. z-index: 4;
  702. right: -8px;
  703. height: 125%;
  704. width: 2px;
  705. border: 1px solid #f1673d;
  706. content: "";
  707. background-color: rgba(0, 0, 0, 0);
  708. }
  709. .frequencyBox .grid-content {
  710. border-right: 1px dashed #aaa
  711. }
  712. .frequencyBox .el-col:last-child .grid-content {
  713. border-right: none
  714. }
  715. }
  716. .voltagePanel,
  717. .frequencyPanel,
  718. .powerPanel {
  719. height: 285px
  720. }
  721. .powerPanel {
  722. .el-table--small th,
  723. .el-table--small td {
  724. padding: 15px 0
  725. }
  726. .uList p {
  727. margin-right: 10px;
  728. padding: 8px 0
  729. }
  730. }
  731. .harmonicCard {
  732. height: calc(50% - 78px);
  733. // border: 1px solid red;
  734. }
  735. // 工单管理
  736. .workManage {
  737. .tab-section .el-button {
  738. margin-left: 0 !important;
  739. padding: 10px 20px;
  740. }
  741. .el-checkbox {
  742. margin-left: 20px
  743. }
  744. img.jianxiu {
  745. width: 18px;
  746. position: relative;
  747. top: -2px
  748. }
  749. }
  750. .workStatusBtn {
  751. display: inline-block;
  752. padding: 0px 12px;
  753. background: #e54552;
  754. color: #fff;
  755. border-top-left-radius: 20px;
  756. border-bottom-left-radius: 20px;
  757. border-bottom-right-radius: 20px;
  758. font-size: 12px;
  759. transform: scale(.8);
  760. }
  761. .alarmStatusDialog {
  762. .el-radio__input.is-checked+.el-radio__label {
  763. color: #606266 !important
  764. }
  765. }
  766. .defetSubTit {
  767. background: #F4F4F4;
  768. width: calc(100% + 40px);
  769. margin-left: -20px;
  770. line-height: 38px;
  771. padding: 0 20px;
  772. margin-bottom: 20px;
  773. color: #2DAEFF
  774. }
  775. // 工单详情
  776. .handleDetailPage {
  777. padding: 20px 0;
  778. .basicTit {
  779. color: #4074e7;
  780. line-height: 49px;
  781. height: 49px;
  782. font-size: 16px;
  783. >span {
  784. display: inline-block;
  785. margin-right: 10px
  786. }
  787. }
  788. .handleTestBlock {
  789. padding: 0 20px 20px 20px;
  790. border-bottom: 3px solid #1890ff;
  791. }
  792. .jianxiuSec {
  793. >div {
  794. display: table-cell;
  795. vertical-align: top;
  796. }
  797. .left-img img {
  798. width: 115px;
  799. height: 115px;
  800. margin-right: 20px
  801. }
  802. .right-des {
  803. position: relative;
  804. .tit {
  805. font-weight: bold;
  806. margin: 10px 0
  807. }
  808. .bottomStatus {
  809. position: absolute;
  810. bottom: 0;
  811. }
  812. }
  813. }
  814. .desSec {
  815. span {
  816. display: inline-block;
  817. margin-right: 20px
  818. }
  819. }
  820. .siteBlock,
  821. .companyBlock {
  822. display: inline-block;
  823. width: 140px;
  824. height: 140px;
  825. border: 1px solid #aaa;
  826. background: #f0f0f0;
  827. margin-left: 10px;
  828. text-align: center;
  829. position: relative;
  830. /*自己的50% */
  831. >div {
  832. width: 140px;
  833. height: auto;
  834. position: absolute;
  835. left: 50%;
  836. /* 定位父级的50% */
  837. top: 50%;
  838. transform: translate(-50%, -50%);
  839. p:last-child {
  840. font-size: 18px;
  841. margin-top: 30px
  842. }
  843. }
  844. }
  845. .handlerBlock {
  846. padding: 20px;
  847. border-bottom: 1px solid #E5E5E5;
  848. ;
  849. div {
  850. margin-bottom: 10px;
  851. }
  852. i {
  853. font-size: 16px;
  854. }
  855. .record {
  856. span {
  857. color: cornflowerblue;
  858. display: inline-block;
  859. margin-left: 10px;
  860. cursor: pointer
  861. }
  862. }
  863. b {
  864. margin: 0 5px;
  865. display: inline-block;
  866. }
  867. .imgSquare {
  868. border: 1px solid #ddd;
  869. width: 100px;
  870. height: 100px;
  871. margin-left: 40px;
  872. img {
  873. width: 80%;
  874. margin-left: 10%;
  875. height: 80%;
  876. margin-top: 10%;
  877. }
  878. }
  879. }
  880. }
  881. .basicTit:before {
  882. content: "";
  883. width: 3px;
  884. margin-right: 9px;
  885. height: 16px;
  886. position: relative;
  887. top: 3px;
  888. display: inline-block;
  889. background: #4074e7;
  890. }
  891. // 运维统计
  892. .operStatisticsPage {
  893. padding: 0;
  894. .el-tabs__content {
  895. overflow: hidden;
  896. position: absolute;
  897. top: -10px;
  898. left: 614px;
  899. }
  900. .customBlock {
  901. position: relative;
  902. .customPicker {
  903. position: absolute;
  904. right: 0;
  905. bottom: 0
  906. }
  907. }
  908. .operStatisticsInner {
  909. padding: 20px;
  910. .bg-purple {
  911. // background: #d3dce6;
  912. border: 1px solid #e5e5e5;
  913. }
  914. .staitcDataSec {
  915. .staitcDataItem {
  916. // text-align: center;
  917. padding: 20px 10px;
  918. height: 110px;
  919. .imgBlock {
  920. text-align: right;
  921. img {
  922. // max-width: 90%
  923. }
  924. }
  925. .staticBlock {
  926. // text-align: center
  927. }
  928. p {
  929. margin-bottom: 0
  930. }
  931. .num {
  932. font-size: 26px;
  933. color: #49B8F6;
  934. display: inline-block;
  935. margin-right: 5px;
  936. }
  937. }
  938. }
  939. .panelTit {
  940. padding: 10px 14px;
  941. margin-bottom: 10px;
  942. border-bottom: 1px solid #f0f0f0;
  943. background: #FAFAFA;
  944. font-weight: bold;
  945. }
  946. .workPanel {
  947. height: 311px;
  948. .workPanelChart {
  949. height: calc(100% - 60px)
  950. }
  951. }
  952. .siteWorkPanel {
  953. height: 311px;
  954. .siteWorkChart {
  955. height: calc(100% - 60px)
  956. }
  957. }
  958. .staticPanel {
  959. height: 365px;
  960. }
  961. }
  962. }
  963. // 角色权限
  964. .roleLeft {
  965. .addBox {
  966. text-align: center;
  967. display: flex;
  968. justify-content: space-around;
  969. line-height: 36px
  970. }
  971. .el-radio-button {
  972. width: 100%
  973. }
  974. .el-radio-button__inner {
  975. width: 100%;
  976. // line-height: 40px;
  977. padding: 13px 15px
  978. }
  979. .el-radio-button__inner {
  980. border-left: 1px solid #dcdfe6;
  981. text-align: left;
  982. position: relative; // border-bottom: none;
  983. img {
  984. margin-right: 5px
  985. }
  986. i {
  987. position: absolute;
  988. right: 10px;
  989. font-size: 15px;
  990. color: #F80000;
  991. opacity: 0
  992. }
  993. }
  994. .el-radio-button__inner:hover {
  995. color: #444;
  996. background: #f1f7fc;
  997. // border-color: #f1f7fc;
  998. i {
  999. opacity: 1;
  1000. }
  1001. }
  1002. .el-radio-button:last-child .el-radio-button__inner {
  1003. // border-bottom: 1px solid #dcdfe6;
  1004. }
  1005. .el-radio-button__original-radio:checked+.el-radio-button__inner {
  1006. background: #BDE5FF;
  1007. border-color: #BDE5FF;
  1008. color: #444;
  1009. box-shadow: none
  1010. }
  1011. }
  1012. // 用户管理弹框
  1013. .userManageDialog {
  1014. .el-date-editor.el-input,
  1015. .el-date-editor.el-input__inner {
  1016. width: 240px !important;
  1017. }
  1018. }
  1019. .downloadMb {
  1020. margin-left: 20px;
  1021. text-decoration: underline;
  1022. }