style.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. @import '@/common/scss/base.scss';
  2. .volume-container {
  3. display: flex;
  4. flex-direction: column;
  5. height: 100%;
  6. .head {
  7. padding: 0 $sp-lg;
  8. padding-bottom: $sp-lg * 4;
  9. color: $color-f;
  10. position: relative;
  11. overflow: hidden;
  12. .logo {
  13. height: $size-xl;
  14. margin-top: $sp-md;
  15. img {
  16. height: 100%;
  17. width: auto;
  18. }
  19. }
  20. .bg {
  21. position: absolute;
  22. top: -30%;
  23. left: -15%;
  24. right: -15%;
  25. bottom: 0;
  26. border-radius: 50%;
  27. background-image: linear-gradient($color-lg, $color);
  28. }
  29. .cont {
  30. position: relative;
  31. z-index: 2;
  32. }
  33. h1 {
  34. margin: 0;
  35. padding-top: $sp-xs;
  36. padding-bottom: $sp-lg;
  37. text-align: center;
  38. font-size: $size-md * 2;
  39. font-family: 'PangMenZhengDao';
  40. }
  41. .des {
  42. padding-bottom: $sp-lg;
  43. font-size: $size-xs;
  44. }
  45. }
  46. .body {
  47. flex: 1;
  48. }
  49. .volume-content {
  50. position: relative;
  51. z-index: 2;
  52. margin-top: -$sp-lg * 4;
  53. > li {
  54. list-style: none;
  55. padding: $sp-lg;
  56. background: $color-f;
  57. margin: $sp-lg;
  58. margin-top: 0;
  59. border-radius: $sp-md;
  60. box-shadow: 0 0 4px 1px $color-5;
  61. > p {
  62. margin: 0;
  63. font-weight: 500;
  64. position: relative;
  65. > label {
  66. color: $color-error;
  67. }
  68. > i {
  69. position: absolute;
  70. left: -$sp-lg;
  71. top: 0;
  72. height: 100%;
  73. width: 4px;
  74. background: $color;
  75. &.cur {
  76. background: $color-success;
  77. }
  78. }
  79. }
  80. .vertical {
  81. margin-bottom: $sp-sm;
  82. &:last-child {
  83. margin-bottom: 0;
  84. }
  85. }
  86. > div {
  87. padding-top: $sp-lg;
  88. display: flex;
  89. > textarea, input {
  90. border: 0;
  91. border-bottom: 1px solid $color-5;
  92. width: 100%;
  93. }
  94. > textarea {
  95. min-height: 86px;
  96. }
  97. &.align-right {
  98. justify-content: flex-end;
  99. textarea,
  100. input {
  101. text-align: right;
  102. }
  103. }
  104. }
  105. }
  106. }
  107. .footer {
  108. position: relative;
  109. z-index: 3;
  110. padding: $sp-md $sp-lg;
  111. background: $color-f;
  112. box-shadow: 0 -2px 4px 1px $color-5;
  113. }
  114. }