index.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .app-drawer {
  2. --el-mask-color: rgba(0, 0, 0, .25);
  3. &__wrapper {
  4. display: flex;
  5. flex-direction: column;
  6. max-height: 100vh;
  7. min-width: 360px;
  8. color: #fff;
  9. border-radius: 4px;
  10. background: linear-gradient(#084258 0, #102e45 38px, #102e45 100%);
  11. box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
  12. overflow: hidden;
  13. }
  14. &__header {
  15. position: relative;
  16. height: 38px;
  17. line-height: 38px;
  18. text-align: center;
  19. h1 {
  20. font-size: 16px;
  21. }
  22. .el-icon {
  23. position: absolute;
  24. top: 50%;
  25. right: 24px;
  26. transform: translate3d(0, -50%, 0);
  27. font-size: 16px;
  28. cursor: pointer;
  29. }
  30. }
  31. &__body {
  32. flex: 1;
  33. line-height: normal;
  34. background-color: #0f1a25;
  35. padding: 24px;
  36. padding-bottom: 0;
  37. &:last-child {
  38. padding-bottom: 24px;
  39. }
  40. }
  41. &__footer {
  42. text-align: center;
  43. background-color: #0f1a25;
  44. padding: 24px;
  45. }
  46. &.border &__wrapper {
  47. padding: 8px;
  48. padding-top: 0;
  49. }
  50. &.border &__header {
  51. .el-icon {
  52. left: 10px;
  53. right: auto;
  54. }
  55. }
  56. &.border &__body {
  57. padding: 20px;
  58. }
  59. &.border &__footer {
  60. padding: 20px;
  61. padding-top: 0;
  62. }
  63. }