home.scss 4.0 KB

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