index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. /* reset.css */
  2. html {
  3. box-sizing: border-box; /* 统一盒模型计算方式 */
  4. font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  5. 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  6. }
  7. *, *::before, *::after {
  8. margin: 0;
  9. padding: 0;
  10. box-sizing: inherit; /* 继承上级元素的盒模型计算方式 */
  11. }
  12. body {
  13. font-family: Arial, sans-serif; /* 设定基本字体族 */
  14. font-family: '微软雅黑', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  15. 'Microsoft YaHei', Arial, sans-serif;
  16. line-height: 1.5; /* 行高 */
  17. }
  18. h1, h2, h3, h4, h5, h6 {
  19. font-weight: normal; /* 取消标题标签的加粗效果 */
  20. }
  21. a {
  22. text-decoration: none; /* 去除链接下划线 */
  23. color: #007bff; /* 设定颜色 */
  24. }
  25. ul, ol,li {
  26. list-style: none; /* 清除列表项符号 */
  27. }
  28. img {
  29. max-width: 100%; /* 图片最大宽度自动调整到容器尺寸 */
  30. height: auto; /* 保持原比例 */
  31. }
  32. button {
  33. cursor: pointer; /* 改变光标形状为手指 */
  34. background: transparent; /* 按钮无背景色 */
  35. outline: none; /* 移除点击时的边框 */
  36. border: none; /* 移除边框 */
  37. }
  38. input[type="text"], input[type="password"] {
  39. appearance: none; /* 移除输入框默认外观 */
  40. -webkit-appearance: none; /* Safari/Chrome特定属性 */
  41. -moz-appearance: none; /* Firefox特定属性 */
  42. border: none; /* 移除边框 */
  43. outline: none; /* 移除点击时的边框 */
  44. background: none; /* 输入框无背景色 */
  45. }
  46. img{
  47. vertical-align: middle;
  48. }
  49. /* 改 el-dialog的默认样式*/
  50. .el-header{
  51. padding: 0;
  52. --el-header-height:auto;
  53. }
  54. .el-main{
  55. --el-main-padding: 0;;
  56. }
  57. .heder_tabs{
  58. --el-main-padding: 0 .1042rem!important;
  59. }
  60. .heder_tabs .el-tabs__header{
  61. padding: 0 .1042rem;
  62. background-color:#2267B1;
  63. }
  64. .ve_logo_img .el-image{
  65. padding: 5px;
  66. }
  67. .heder_tabs .el-tabs__item{
  68. width: 120px;
  69. height: 40px;
  70. }
  71. body{
  72. width: 100%;
  73. height: 100vh;
  74. background-color:rgba(123, 176, 232, 0.1);
  75. }
  76. .heder_tabs .el-tabs__item.is-active{
  77. background-color: #fff;
  78. border-radius: 10px 10px 0px 0px;
  79. color: #2267B1 ;
  80. }
  81. .el-tabs--card>.el-tabs__header .el-tabs__item,.el-tabs--card>.el-tabs__header .el-tabs__nav{
  82. border: none;
  83. }
  84. .el-tabs__item{
  85. color: #fff;
  86. font-weight: bold;
  87. font-size: 14px;
  88. }
  89. .imgzong {
  90. display: -webkit-box;
  91. display: -ms-flexbox;
  92. display: flex;
  93. overflow: auto;
  94. white-space: nowrap;
  95. background-color: #fff;
  96. padding: 0 20px;
  97. }
  98. .imgzong .listitem {
  99. width: auto;
  100. height: 92px;
  101. margin: 5px;
  102. padding: 2px 6px 2px 2px;
  103. }
  104. .activeOrange {
  105. background-color: rgba(255, 255, 255, 0.3);
  106. border: 2px solid #fff;
  107. border-radius: 5px;
  108. box-sizing: border-box;
  109. }
  110. .imgzong .listitem{
  111. border-right:1px solid rgba(34,103,177,0.2);
  112. }
  113. .item1, .item2 {
  114. cursor: pointer;
  115. }
  116. .imgzong .item2 .el-image{
  117. margin: 0 19px;
  118. width: 60px;
  119. vertical-align: middle;
  120. padding: 9px;
  121. }
  122. .imgzong .item2 span {
  123. display: block;
  124. text-align: center;
  125. }
  126. .imgzong .listitem span {
  127. font-size: 14px;
  128. }
  129. .el-tabs__header{
  130. padding: 0;
  131. margin: 0;
  132. }
  133. .my-header{
  134. line-height: 40px;
  135. height: 40px;
  136. text-align: left;
  137. }
  138. .my-header .el-image{
  139. width: 28px;
  140. margin-top: 6px;
  141. }
  142. .my-header h4{
  143. font-size: 14px;
  144. font-weight: 700;
  145. color: #fff;
  146. text-align: left;
  147. font-style: normal;
  148. text-transform: none;
  149. display: inline-block;
  150. padding-left: 5px;
  151. }
  152. .el-dialog__header{
  153. padding:0px 20px;
  154. background-color:#2267B1;
  155. margin: 0;
  156. }
  157. .el-image {
  158. vertical-align: middle;
  159. }
  160. .el-dialog__headerbtn{
  161. height: 40px !important;
  162. top: 3px;
  163. }
  164. .el-button+.el-button{
  165. background-color:#2267B1;
  166. }
  167. .summary-dlg {
  168. pointer-events: none;
  169. }
  170. .el-dialog {
  171. pointer-events: auto;
  172. }
  173. .numberinput .el-input-number{
  174. width: 100% !important;
  175. }
  176. .numberinput .el-input-number .el-input__inner{
  177. text-align: left;
  178. }
  179. .el-form-item__label{
  180. color: #6D6D6D;
  181. font-size: 13px;
  182. line-height: 30px;
  183. letter-spacing: 1px;
  184. text-align: right;
  185. font-style: normal;
  186. text-transform: none;
  187. }
  188. .no-border .el-input,.no-border .el-input__wrapper {
  189. border: none;
  190. box-shadow: none !important;
  191. }
  192. .no-border .el-input__wrapper {
  193. background-color: rgba(255, 255, 255, 0) !important; /* 设置为白色背景 */
  194. }
  195. .headersele{
  196. width: 97px;
  197. height: 9px;
  198. margin-top: -5px;
  199. background-color: #eee;
  200. }
  201. .headersele .select-trigger{
  202. height: 9px;
  203. overflow: hidden;
  204. }
  205. .headersele .el-input__inner{
  206. display: none;
  207. }
  208. .headersele .el-input.is-focus .el-input__wrapper{
  209. box-shadow:none !important;
  210. }
  211. .headersele .el-input .el-select__caret.el-icon{
  212. top: -11px;
  213. }
  214. .sel .el-select{
  215. width: 100%;
  216. }
  217. .el-form-item{
  218. margin-bottom: 8px;
  219. }
  220. .border2{
  221. border-radius: 10px 10px 10px 10px;
  222. border: 1px solid #888888;
  223. padding: 10px;
  224. position: relative;
  225. margin-top: 24px;
  226. }
  227. .title2{
  228. display: inline-block;
  229. background-color: #fff;
  230. padding: 10px;
  231. color: #333;
  232. font-weight: 600;
  233. position: absolute;
  234. top: -20px;
  235. left: 20px
  236. }
  237. .threelist{
  238. display: flex;
  239. }
  240. .floatitem .el-image{
  241. margin: 0 10px !important;
  242. }
  243. .heder_tabs .el-tab-pane{
  244. border-bottom: 1px solid #7BB0E8;
  245. }
  246. .opt_moitor{
  247. width: 340px;
  248. height:calc(100vh - 341px);
  249. background: #FFFFFF;
  250. box-shadow: 2px 0px 11px 0px rgba(0,0,0,0.12);
  251. border-radius: 10px 10px 10px 10px;
  252. float: right;
  253. padding: 12px;
  254. position: absolute;
  255. right: 0;
  256. top: 0;
  257. overflow-y: auto;
  258. overflow-x: hidden;
  259. }
  260. .opt_moitor h3{
  261. text-align: left;
  262. }
  263. .echartitem{
  264. width: 100%;
  265. height: auto;
  266. background: #FFFFFF;
  267. border-radius: 0px 0px 0px 0px;
  268. border: 1px solid rgba(0,0,0,0.3);
  269. position: relative;
  270. }
  271. .sev{
  272. margin-top: 50px;
  273. }
  274. .magright{
  275. margin-right: 40px !important;
  276. }
  277. .disflex{
  278. display: flex;
  279. }
  280. .sev_ruwu .el-input{
  281. width: 100%;
  282. height: 31px;
  283. padding:0 10px;
  284. }
  285. .sev_ruwu .el-select{
  286. width: 236px;
  287. }
  288. .sev_ruwu .el-button+.el-button {
  289. background-color: #F5FAFF !important;
  290. border-radius: 4px 4px 4px 4px;
  291. }
  292. .btncolor{
  293. background-color: #F5FAFF !important;
  294. width: 150px !important;
  295. }
  296. .left_main_content{
  297. width: 195px;
  298. height: calc(100vh - 184px);
  299. background: #FFFFFF;
  300. box-shadow: 2px 0px 11px 0px rgba(0,0,0,0.12);
  301. border: 1px solid #2267B1;
  302. }
  303. .mianflex{
  304. display: flex;
  305. }
  306. .main_model{
  307. width: 100%;
  308. height:calc(100vh - 183px) ;
  309. text-align: center;
  310. position: relative;
  311. }
  312. /* 基础样式 */
  313. .custom-tree .el-tree-node__label {
  314. /* font-weight: bold; */
  315. font-size: 15px; /* 基础字体大小 */
  316. color: #383838 ;
  317. font-family: 'Inter-Regular';
  318. }
  319. .treetiele{
  320. padding: 6px;
  321. font-family: Inter, Inter;
  322. font-weight: 600;
  323. font-size: 16px;
  324. color: #1A1A1A;
  325. line-height: 24px;
  326. text-align: left;
  327. font-style: normal;
  328. text-transform: none
  329. }
  330. .el-tree-node__content{
  331. position: relative;
  332. }
  333. .custom-tree .el-tree-node__children .el-tree-node__content .treesvgi i::before{
  334. content: "";
  335. display: block;
  336. width: 1px;
  337. height: 24px;
  338. /* background: #000; */
  339. border-left: 0.5px dashed #383838;
  340. bottom:0px;
  341. position: absolute;
  342. transform: scale(0.5, 1);
  343. }
  344. .el-tree .el-tree-node__content{
  345. font-size: 16px; /* 这里设置为20px,你可以根据需求调整大小 */
  346. }
  347. .custom-tree .el-tree-node__children .el-tree-node__content .treesvgi {
  348. font-size: 15px !important; /* 第二级字体大小 */
  349. font-weight: 400;
  350. color: #383838 ;
  351. font-family: 'Inter-Regular';
  352. }
  353. .custom-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label {
  354. font-size: 15px; /* 第三级字体大小 */
  355. color: #1A1A1A ;
  356. font-family: 'Inter-Regular';
  357. }
  358. .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  359. background-color: rgba(0,0,0,0);
  360. color: #0077F0 !important;
  361. font-family: 'Inter-Regular';
  362. }
  363. .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
  364. background-color: rgba(0,0,0,0);
  365. color: #0077F0 !important;
  366. }
  367. .el-tabs__item{
  368. position:relative;
  369. }
  370. .el-tabs--card>.el-tabs__header .el-tabs__item.is-active::before{
  371. content: "";
  372. display: block;
  373. width: 45%;
  374. height: 2px;
  375. background: linear-gradient( 270deg, #1E69FF 0%, #5B91FF 100%);
  376. border-radius: 0px 0px 0px 0px;
  377. bottom: 3px;
  378. position: absolute;
  379. }
  380. .el-icon-folder{
  381. background: url(../assets/img/jia.png)no-repeat 0;
  382. content: "";
  383. display: block;
  384. width: 16px;
  385. height: 16px;
  386. font-size: 16px;
  387. background-size: 16px;
  388. }
  389. .el-icon-collection-tag{
  390. background: url(../assets/img/jian.png)no-repeat 0;
  391. content: "";
  392. display: block;
  393. width: 16px;
  394. height: 16px;
  395. font-size: 16px;
  396. background-size: 16px;
  397. }
  398. .treesvgi{
  399. display: contents;
  400. }
  401. .herader_tabs{
  402. text-align: center;
  403. font-family: Microsoft YaHei, Microsoft YaHei;
  404. font-weight: 400;
  405. font-size: 14px;
  406. color: #1A1A1A;
  407. line-height: 27px;
  408. letter-spacing: 1px;
  409. text-align: center;
  410. font-style: normal;
  411. margin-top: -6px;
  412. }
  413. .margr{
  414. margin: 0 10px;
  415. }
  416. .Role .item2 .el-image{
  417. padding: 7px 9px 7px 9px !important;
  418. }
  419. .femFooter {
  420. position: absolute;
  421. /* position: fixed; */
  422. width: 100%;
  423. bottom: 0px;
  424. }
  425. .el-footer{
  426. --el-footer-padding: 0 0 0 20px;
  427. --el-footer-height: auto;
  428. }
  429. .footerText .el-textarea__inner{
  430. width: 100%;
  431. height: 130px!important;
  432. border: 0;
  433. font-size: 12px;
  434. color: #333;
  435. padding: 2px 20px;
  436. padding-bottom: 20px;
  437. }
  438. .main_model{
  439. width: 100%;
  440. /* height: 80vh; */
  441. display: flex;
  442. flex-direction: column;
  443. }
  444. .main_container{
  445. width: 100%;
  446. }
  447. .maxh221{
  448. height: calc(100vh - 361px);
  449. flex: 1;
  450. }
  451. /* .main_container{
  452. display: flex;
  453. } */
  454. .pading_foter{
  455. box-shadow: 0 0 0 1px #dcdfe6 inset;
  456. padding: 1px;
  457. overflow: hidden;
  458. border-radius: 5px;
  459. }
  460. button:focus, button:focus-visible{
  461. outline:none;
  462. }
  463. /* Webkit内核浏览器(Chrome、Safari等)*/
  464. ::-webkit-scrollbar {
  465. width: 4px;
  466. /* 设置滚动条宽度 */
  467. background-color: #dcdfe6;
  468. /* 设置滚动条背景颜色 */
  469. }
  470. /* 滑块样式 */
  471. ::-webkit-scrollbar-thumb {
  472. border-radius: 2px;
  473. /* 设置滑块边角半径 */
  474. background-color:#eee ;
  475. /* 设置滑块背景颜色 */
  476. }
  477. /* 滑块在hover状态时的样式 */
  478. ::-webkit-scrollbar-thumb:hover {
  479. background-color: #dcdfe6;
  480. /* 设置滑块在hover状态下的背景颜色 */
  481. }
  482. /* 滚动条轨道样式 */
  483. ::-webkit-scrollbar-track {
  484. background-color: #dcdfe6;
  485. /* 设置滚动条轨道背景颜色 */
  486. }
  487. .el-input__inner{
  488. --el-input-inner-height: calc(var(--el-input-height, .1667rem) - .0104rem) !important;
  489. }
  490. .left_main .el-tabs__item {
  491. color: #1A1A1A;
  492. }
  493. .panetab .el-image {
  494. width: 60px;
  495. vertical-align: middle;
  496. padding: 10px;
  497. }
  498. .ve_menu_logo{
  499. text-align: left;
  500. }
  501. .lefttext .el-form-item__label{
  502. text-align: left !important;
  503. justify-content: flex-start !important;
  504. }
  505. .el-dialog__body{
  506. max-height: 730px;
  507. overflow-y: auto;
  508. }
  509. .custom-tree{
  510. width: 195px;
  511. height: 180px;
  512. background: #FFFFFF;
  513. border-radius: 0px 0px 0px 0px;
  514. border: 1px solid #2267B1;
  515. box-sizing: border-box;
  516. }
  517. .el-tree-node__content>.el-tree-node__expand-icon{
  518. padding: 6px;
  519. box-sizing: content-box;
  520. font-size: 16px;
  521. color: #000000;
  522. }
  523. .el-tree-node{
  524. padding: 2px 0;
  525. }
  526. .youhualog{
  527. padding: 20px;
  528. }