index.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. #app {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. /* 步骤一页面 */
  6. .step-1 {
  7. width: 100%;
  8. height: 100%;
  9. display: flex;
  10. flex-direction: column;
  11. align-items: center;
  12. justify-content: flex-start;
  13. margin-top: 10px;
  14. overflow-y: scroll;
  15. }
  16. .node-and-text {
  17. width: 95%;
  18. display: flex;
  19. flex-direction: column;
  20. align-items: center;
  21. justify-content: flex-start;
  22. margin-left: 10px;
  23. }
  24. .title-and-operate-buttons {
  25. width: 100%;
  26. display: flex;
  27. flex-direction: row;
  28. justify-content: space-between;
  29. }
  30. .title-and-alias {
  31. width: 40%;
  32. display: flex;
  33. flex-direction: row;
  34. justify-content: flex-start;
  35. }
  36. .alias-input-close {
  37. width: 80px;
  38. display: flex;
  39. flex-direction: row;
  40. justify-content: flex-start;
  41. }
  42. .operate-buttons {
  43. display: flex;
  44. flex-direction: row;
  45. justify-content: center;
  46. position: relative;
  47. top: 15px;
  48. }
  49. .step-1-buttons {
  50. width: 95%;
  51. display: flex;
  52. flex-direction: row;
  53. justify-content: space-between;
  54. margin-left: 10px;
  55. margin-bottom: 15px;
  56. }
  57. .last-guide {
  58. cursor: pointer;
  59. position: relative;
  60. top: 5px;
  61. }
  62. .touch-and-key {
  63. width: 100%;
  64. display: flex;
  65. flex-direction: row;
  66. justify-content: center;
  67. align-items: center;
  68. }
  69. .key-input-btn {
  70. width: 100%;
  71. display: flex;
  72. flex-direction: row;
  73. justify-content: center;
  74. align-items: center;
  75. }
  76. .touch-node-btn {
  77. width: 100%;
  78. display: flex;
  79. flex-direction: row;
  80. justify-content: center;
  81. align-items: center;
  82. }
  83. /* 步骤二页面 */
  84. .step-2 {
  85. width: 100%;
  86. height: 100%;
  87. display: flex;
  88. flex-direction: column;
  89. align-items: center;
  90. justify-content: flex-start;
  91. margin-top: 10px;
  92. overflow-y: scroll;
  93. }
  94. .section-list {
  95. width: 95%;
  96. display: flex;
  97. flex-direction: column;
  98. align-items: center;
  99. justify-content: flex-start;
  100. margin-left: 10px;
  101. }
  102. .section {
  103. display: flex;
  104. flex-flow: row wrap;
  105. flex-direction: row;
  106. justify-content: space-around;
  107. align-items: center;
  108. }
  109. .img-checkbox {
  110. width: 50%;
  111. height: 90px;
  112. display: flex;
  113. flex-direction: column;
  114. align-items: center;
  115. justify-content: space-between;
  116. margin-top: 20px;
  117. margin-bottom: 20px;
  118. }
  119. .text-pos-checkbox-list {
  120. margin-top: 15px;
  121. }
  122. .step-2-buttons {
  123. width: 95%;
  124. display: flex;
  125. flex-direction: row;
  126. justify-content: flex-end;
  127. margin-top: 15px;
  128. margin-left: 10px;
  129. margin-bottom: 20px;
  130. }
  131. .textarea-btn {
  132. width: 100%;
  133. display: flex;
  134. flex-direction: row;
  135. align-items: center;
  136. justify-content: flex-end;
  137. position: relative;
  138. right: 1%;
  139. bottom: 24%;
  140. margin-top: -35px;
  141. }