ZDelement.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. @import './ZDcolor.sass';
  2. /*消息提示窗背景色*/
  3. .el-message--success{
  4. background-color: rgba(231,250,240,0.4);
  5. }
  6. .el-message--warning{
  7. background-color: rgba(253,246,236,0.4);
  8. }
  9. .el-message--error{
  10. background-color: rgba(254,240,240,0.4);
  11. }
  12. /*===================================多选框样式===================================*/
  13. .el-tag.el-tag--info{
  14. color:#0183fa!important;
  15. background:rgba(1,131,250,0.2)!important;;
  16. border:none;
  17. }
  18. .el-tag.el-tag--info .el-tag__close{
  19. color:#fff;
  20. background-color: #0183fa;
  21. }
  22. .el-tag.el-tag--info .el-tag__close:hover{
  23. color:#fff;
  24. background-color: #0183fa;
  25. }
  26. /*===================================label标签样式===================================*/
  27. .el-form-item--medium .el-form-item__label{
  28. color:#333;
  29. font-weight:500;
  30. }
  31. /*===================================分页按钮===================================*/
  32. //选中
  33. .el-pagination.is-background .el-pager li:not(.disabled).active{
  34. background-color: $pagination_button-color;
  35. //border:1px solid $pagination_button_selected;
  36. color:$pagination_button_selected;
  37. }
  38. //未选中
  39. .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
  40. background-color: $pagination_button-color;
  41. //border:1px solid $pagination_button;
  42. color:$pagination_button-font-color;
  43. }
  44. //样式部分
  45. .pagination-container{
  46. height:32px!important;
  47. padding:0!important;
  48. .el-pagination__sizes{
  49. width: 120px !important;
  50. overflow: hidden!important;
  51. .teacher .el-select{
  52. width: 120px !important;
  53. }
  54. input{
  55. border:none;
  56. }
  57. }
  58. .el-pagination{
  59. display: flex;
  60. width:100%;
  61. }
  62. }
  63. .el-pagination__total{
  64. flex:1;
  65. text-align: right;
  66. }
  67. /*===================================表格===================================*/
  68. .el-table--border th{
  69. border:none;
  70. }
  71. .el-table--group, .el-table--border{
  72. border:none;
  73. }
  74. .el-table--group::after, .el-table--border::after{
  75. width:0;
  76. }
  77. .el-table--fit{
  78. display: flex;
  79. flex-direction: column;
  80. }
  81. .el-table__row{
  82. color:$color_33;
  83. //font-size:14px;
  84. }
  85. .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
  86. color:$color_33;
  87. background-color:#f5f5f5;
  88. //font-size:16px;
  89. }
  90. .el-table__header-wrapper{
  91. height:60px;
  92. }
  93. .el-table__body-wrapper{
  94. border:1px solid #dfe6ec;
  95. flex: 1;
  96. overflow-y: scroll!important;
  97. }
  98. .el-table--fit{
  99. flex: 1;
  100. }
  101. //表格滚动条样式
  102. .el-table__body-wrapper::-webkit-scrollbar{
  103. width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  104. height: 8px;
  105. }
  106. .el-table__body-wrapper::-webkit-scrollbar-thumb{
  107. border-radius: 5px;
  108. //-webkit-box-shadow: inset 0 0 5px #cac8c8;
  109. background: #CBCDD1;
  110. }
  111. .el-table__body-wrapper::-webkit-scrollbar-track{
  112. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  113. border-radius: 0;
  114. background: rgba(255,255,255,0);
  115. }
  116. //表格内容高度部分
  117. //表头
  118. .el-table__fixed-header-wrapper{
  119. th, td{
  120. padding:18px 0;
  121. }
  122. .el-table--medium th, .el-table--medium td{
  123. padding:12px 0!important;
  124. border-top: 1px solid #dfe6ec!important;
  125. }
  126. }
  127. //.el-table__fixed::before, .el-table__fixed-right::before{
  128. // height:0;
  129. //}
  130. .el-table__fixed, .el-table__fixed-right{
  131. top:1px;
  132. left:1px;
  133. }
  134. .el-table__header-wrapper{
  135. th, td{
  136. padding:19px 0;
  137. }
  138. }
  139. //表格
  140. .el-table__body-wrapper{
  141. th, td{
  142. padding:10px 0;
  143. }
  144. }
  145. //.el-table--medium th, .el-table--medium td{
  146. // padding:18px 0;
  147. //}
  148. .el-table{
  149. font-size:14px;
  150. }
  151. //============================实心按钮部分================================
  152. .el-button--primary{
  153. font-size:14px;
  154. background:$back_one;
  155. }
  156. .el-button{
  157. width:70px;
  158. height:40px;
  159. border-radius:6px;
  160. }
  161. //============================空心按钮部分================================
  162. //新增
  163. .el-button--primary.is-plain{
  164. width:120px;
  165. height:40px;
  166. color:$color_one!important;
  167. border:1px solid $color_one!important;
  168. background: $back_ff;
  169. }
  170. .el-button--primary.is-plain:hover{
  171. color:$color_ff!important;
  172. background: $back_one;
  173. }
  174. //修改
  175. .el-button--success.is-plain.is-disabled{
  176. }
  177. .el-button--success.is-plain.is-disabled:hover{
  178. }
  179. //删除
  180. .el-button--danger.is-plain.is-disabled{
  181. }
  182. .el-button--danger.is-plain.is-disabled:hover{
  183. }
  184. //导出
  185. .el-button--warning.is-plain{
  186. }
  187. .el-button--warning.is-plain:hover{
  188. }
  189. //===========================输入框
  190. .el-form-item__label{
  191. line-height:40px!important;
  192. }
  193. .el-input--small{
  194. width:220px;
  195. }
  196. .el-input--small input{
  197. height: 40px !important;
  198. }
  199. .el-input--medium .el-input__inner{
  200. height: 40px ;
  201. }
  202. //===========================弹窗窗体
  203. .el-dialog{
  204. border-radius: 10px;
  205. }
  206. //===========================弹窗title
  207. .el-dialog__title{
  208. color:$color_one;
  209. font-weight: bold;
  210. }
  211. //===========================弹出层
  212. .el-dialog__header{
  213. border-bottom:1px solid #E0E0E0;
  214. padding-bottom:20px;
  215. }
  216. .el-dialog__footer{
  217. padding-top:20px!important;
  218. border-top:1px solid #E0E0E0;
  219. }
  220. //===========================提示弹窗按钮(包含登录失效)
  221. .el-message-box__btns{
  222. .el-button{
  223. width:100px;
  224. }
  225. }
  226. //==================抽屉滚动条
  227. .el-drawer__body::-webkit-scrollbar{
  228. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  229. height: 4px;
  230. }
  231. .el-drawer__body::-webkit-scrollbar-thumb{
  232. border-radius: 5px;
  233. -webkit-box-shadow: inset 0 0 5px #999;
  234. background: #fff;
  235. }
  236. .el-drawer__body::-webkit-scrollbar-track{
  237. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  238. border-radius: 0;
  239. background: rgba(255,255,255,0);
  240. }
  241. //====================公共滚动条样式
  242. .scrollbar-box::-webkit-scrollbar{
  243. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  244. height: 4px;
  245. }
  246. .scrollbar-box::-webkit-scrollbar-thumb{
  247. border-radius: 5px;
  248. -webkit-box-shadow: inset 0 0 5px #999;
  249. background: #fff;
  250. }
  251. .scrollbar-box::-webkit-scrollbar-track{
  252. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  253. border-radius: 0;
  254. background: rgba(255,255,255,0);
  255. }
  256. /*=================================switch按钮样式==================================*/
  257. .el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
  258. cursor: pointer!important;
  259. }
  260. /*============================表格缺省样式*/
  261. .el-table__empty-text{
  262. font-size:0;
  263. color:rgba(0,0,0,0);
  264. width:100%;
  265. height:100%;
  266. background: url("../ZDimages/null-data-1.png") no-repeat 50% 50%;
  267. background-size: 10%;
  268. }
  269. /*======================el-dialog弹窗居中*/
  270. .el-dialog__wrapper{
  271. position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-align: center;-webkit-box-pack: center;
  272. }
  273. .el-dialog__wrapper .el-dialog{
  274. -webkit-box-flex: 0;
  275. margin-top:-1%!important;
  276. }
  277. /*表格标题字号*/
  278. .el-table th > .cell{
  279. font-size:14px;
  280. }
  281. /*表格内容*/
  282. .el-table td div{
  283. font-weight:500;
  284. }
  285. //左侧导航滚动条
  286. .scrollbar-wrapper{
  287. padding-right:17px;
  288. }
  289. .scrollbar-wrapper::-webkit-scrollbar{
  290. display: none;
  291. }
  292. /*顶部按钮滚动条*/
  293. .tags-view-container{
  294. padding:0!important;
  295. margin:0!important;
  296. overflow: hidden;
  297. .scroll-container{
  298. padding:0!important;
  299. margin:0!important;
  300. overflow: hidden;
  301. .el-scrollbar__wrap{
  302. padding:0!important;
  303. margin:0!important;
  304. overflow: hidden;
  305. .el-scrollbar__view{
  306. margin-top:16px;
  307. height:50px;
  308. overflow-x: scroll;
  309. overflow-y: hidden;
  310. }
  311. //滚动条样式
  312. .el-scrollbar__view::-webkit-scrollbar{
  313. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  314. height: 4px;
  315. }
  316. .el-scrollbar__view::-webkit-scrollbar-thumb{
  317. border-radius: 5px;
  318. -webkit-box-shadow: inset 0 0 5px #999;
  319. background: #fff
  320. }
  321. .el-scrollbar__view::-webkit-scrollbar-track{
  322. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  323. border-radius: 0;
  324. background: rgba(255,255,255,0);
  325. }
  326. }
  327. }
  328. }
  329. /*登录页面*/
  330. .login{
  331. .login-input-box{
  332. margin-bottom:30px!important;
  333. }
  334. .login-input-box-one{
  335. margin-bottom:0!important;
  336. }
  337. .login-input-box-two{
  338. margin-bottom:50px!important;
  339. }
  340. .login-max-box .right-box .login-form .el-input{
  341. height:50px!important;
  342. }
  343. .login-max-box .right-box .login-form .el-input input{
  344. height:50px!important;
  345. background: #f8f8f8!important;
  346. border: 1px solid #E0E0E0!important;
  347. border-radius:10px;
  348. }
  349. .el-form-item__error{
  350. padding-top:10px;
  351. }
  352. .el-button{
  353. height:50px;
  354. }
  355. }
  356. //消息详情列表展示富文本弹窗信息
  357. .manageInformation{
  358. .el-collapse{
  359. border:none!important;
  360. }
  361. .el-collapse-item__header.is-active{
  362. border:none!important;
  363. }
  364. .el-collapse-item__header{
  365. height:23px;
  366. color:#999;
  367. }
  368. .el-table--enable-row-hover .el-table__body tr:hover > td{
  369. background: rgba(255,255,255,0);
  370. }
  371. img{
  372. max-width:100%!important;
  373. }
  374. }
  375. //消息弹窗
  376. .user-home-el-dialog{
  377. .el-dialog__body{
  378. overflow: auto;
  379. height:800px;
  380. img{
  381. max-width:100%!important;
  382. }
  383. }
  384. .el-dialog__body::-webkit-scrollbar{
  385. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  386. height: 4px;
  387. }
  388. .el-dialog__body::-webkit-scrollbar-thumb{
  389. border-radius: 5px;
  390. -webkit-box-shadow: inset 0 0 5px #999;
  391. background: #fff
  392. }
  393. .el-dialog__body::-webkit-scrollbar-track{
  394. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  395. border-radius: 0;
  396. background: rgba(255,255,255,0);
  397. }
  398. }
  399. //管理员工作台
  400. .manageHome{
  401. .top-max-big-box .top-right-max-box .top-right-top-box .top-right-top-for-max-box .top-right-top-for-box div:nth-child(1) p{
  402. font-weight: 500;
  403. }
  404. .top-max-big-box .top-right-max-box .top-right-bottom-box .top-right-bottom-for-max-box .top-right-bottom-for-box{
  405. font-weight: 500;
  406. }
  407. }
  408. //关联配置页面
  409. .associationConfiguration{
  410. .el-input-group__append{
  411. padding:0;
  412. }
  413. }
  414. //实验室列表
  415. .subject-page{
  416. .left-subject-list{
  417. .el-table{
  418. .el-input--medium .el-input__inner{
  419. height:30px;
  420. line-height:30px;
  421. width:55px;
  422. text-align: center;
  423. padding:0 10px;
  424. }
  425. }
  426. .pagination-container{
  427. height: 45px;
  428. }
  429. }
  430. }
  431. //实验室编辑
  432. .addSubject{
  433. .el-form .el-select__tags-text {
  434. display: inline-block;
  435. max-width: 455px;
  436. overflow: hidden;
  437. text-overflow: ellipsis;
  438. white-space: nowrap;
  439. }
  440. .el-select .el-tag__close.el-icon-close {
  441. top: -7px;
  442. }
  443. }
  444. //table 过长文本浮层样式
  445. .el-tooltip__popper.is-dark{
  446. max-width:60%!important;
  447. }
  448. /*****************input-number去除加减按钮*****************/
  449. .input-number-none-box{
  450. .el-input-number__decrease{
  451. display: none;
  452. }
  453. .el-input-number__increase{
  454. display: none;
  455. }
  456. .el-input__inner{
  457. padding:0 15px;
  458. }
  459. }
  460. .input-number-none-box-left{
  461. .el-input-number__decrease{
  462. display: none;
  463. }
  464. .el-input-number__increase{
  465. display: none;
  466. }
  467. .el-input__inner{
  468. padding:0 15px;
  469. text-align: left;
  470. }
  471. }