home.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. @import 'style';
  2. @import 'base';
  3. $height: 50px;
  4. .el-header{
  5. padding: 0;
  6. height: 111px !important;
  7. }
  8. .header {
  9. background: linear-gradient(180deg, #A1C3E8 0%, #FFFFFF 100%);
  10. color: #0F1F8C;
  11. height: 56px !important;
  12. text-align: center;
  13. font-size-adjust: 20px;
  14. line-height: 56px;
  15. font-weight: bolder;
  16. .logo{
  17. height: 43px;
  18. margin: 5px 0 0 23px;
  19. float: left;
  20. }
  21. }
  22. .nav{
  23. background: #0F1F8C;
  24. padding: 0 44px;
  25. a{
  26. display: inline-block;
  27. line-height: 55px;
  28. padding: 0 12px;
  29. color: #fff;
  30. font-size: 14px;
  31. text-decoration: none;
  32. margin-right: 20px;
  33. }
  34. .active{
  35. background: #09166F;
  36. }
  37. .setting{
  38. float: right;
  39. color: #fff;
  40. line-height: 55px;
  41. .el-dropdown{
  42. color: #fff;
  43. margin: 0 20px;
  44. }
  45. }
  46. }
  47. .main {
  48. position: relative;
  49. height: calc(100vh - 111px);
  50. background: #F4F4F4;
  51. // padding-top: 10px;
  52. }
  53. .left-aside {
  54. height: 100%;
  55. overflow-y: auto;
  56. overflow-x: hidden;
  57. background: #fff;
  58. .left-menue {
  59. border: none;
  60. & > .is-active {
  61. background-color: #DCECFF !important;
  62. position: relative;
  63. // border-left: 10px solid #ECF0F5;
  64. transition: all .3s linear;
  65. .iconfont{
  66. color: #3895FE;
  67. }
  68. &>.el-submenu__title{
  69. color: #3895FE !important;
  70. }
  71. .is-active {
  72. background-color: #DCECFF !important;
  73. // border-left: 10px solid #ECF0F5;
  74. transition: all .3s linear;
  75. position: relative;
  76. .iconfont{
  77. color: #3895FE;
  78. }
  79. }
  80. }
  81. .is-opened{
  82. background-color: #fff !important;
  83. border-left: none !important;
  84. &>.el-submenu__title{
  85. color: #fff !important;
  86. }
  87. }
  88. .el-menu-item-group__title{
  89. padding: 0;
  90. }
  91. .child{
  92. padding-left: 60px !important;
  93. }
  94. .el-menu-item, .el-submenu__title{
  95. height: 48px;
  96. line-height: 48px;
  97. font-size: 15px;
  98. }
  99. // .el-menu-item{
  100. // height: 44px;
  101. // line-height: 44px;
  102. // }
  103. }
  104. .iconfont{
  105. margin-right: 5px;
  106. }
  107. }
  108. .el-main {
  109. // border: 1px solid red;
  110. // padding:20px 20px;
  111. position: relative;
  112. // overflow:hidden;
  113. section>p{
  114. color:#666666;
  115. font-size:14px;
  116. font-weight: 400;
  117. span{
  118. color:#cccccc;
  119. }
  120. }
  121. .content{
  122. background: #fff;
  123. padding: 20px;
  124. margin-top: 12px;
  125. // height: calc(100vh - 190px);
  126. box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
  127. // overflow:scroll;
  128. }
  129. .title_top{
  130. .add_btn{
  131. width:90px;
  132. height:32px;
  133. background:$mainColor;
  134. border:1px solid rgba(237,237,237,1);
  135. border-radius:4px;
  136. float: right;
  137. text-align: center;
  138. line-height: 32px;
  139. color: #FFF;
  140. }
  141. }
  142. .table{
  143. background: #fff;
  144. // border: 1px solid #EDEDED;
  145. // min-height: calc(100vh - 430px);
  146. // height:calc(100vh - 350px);
  147. }
  148. .edit_btn{
  149. color: #25486A;
  150. }
  151. .info_btn{
  152. background: #ECF0F5;
  153. color: #1F2328;
  154. border-color: #ECF0F5;
  155. }
  156. // 分页
  157. .el-pagination {
  158. // position: absolute;
  159. // left: 0;
  160. // bottom: 15px;
  161. text-align: right;
  162. width: 100%;
  163. margin-top: 20px;
  164. }
  165. }
  166. .el-dialog{
  167. .el-select{display: block;}
  168. }
  169. .main_btn{
  170. background: $mainColor;
  171. border-color: $mainColor;
  172. width: 120px;
  173. font-size: 14px;
  174. }
  175. .cancel_btn{
  176. width: 170px;
  177. font-size: 14px;
  178. color: #6A737B;
  179. }
  180. // 表头
  181. thead{
  182. tr th{
  183. background-color: #F2F2F2 !important;
  184. padding: 8px 0 !important;
  185. }
  186. }
  187. tbody{
  188. tr td{
  189. padding: 4px 0 !important;
  190. }
  191. }
  192. .edit{
  193. color: #FFB82F;
  194. }
  195. .del{
  196. color: #F01010;
  197. }
  198. .logout:hover{
  199. cursor: pointer;
  200. }
  201. .upload_btn{
  202. position: relative;
  203. input{
  204. position: absolute;
  205. width: 100%;
  206. left: 0;
  207. opacity: 0;
  208. }
  209. }
  210. // 内容区域滚动
  211. .el-form.over_y{
  212. max-height: calc( 100vh - 290px);
  213. padding:0 10px;
  214. overflow-y:auto;
  215. &::-webkit-scrollbar {/*滚动条整体样式*/
  216. width:4px;/*高宽分别对应横竖滚动条的尺寸*/
  217. height:4px;
  218. }
  219. &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  220. border-radius:5px;
  221. -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
  222. background:rgba(0,0,0,0.2);
  223. }
  224. &::-webkit-scrollbar-track {/*滚动条里面轨道*/
  225. -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
  226. border-radius:0;
  227. background:rgba(0,0,0,0.1);
  228. }
  229. }
  230. // 弹框
  231. .el-dialog__footer{
  232. text-align: center;
  233. }