App.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <div id="app">
  3. <router-view />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'App'
  9. }
  10. </script>
  11. <style >
  12. * {
  13. margin: 0;
  14. padding: 0;
  15. touch-action: none !important;
  16. }
  17. body {
  18. background-color: #eef4f9;
  19. }
  20. /* 出去多选框中的关闭按钮 */
  21. .el-select__tags .el-tag__close.el-icon-close {
  22. display: none;
  23. }
  24. </style>
  25. <style lang="scss">
  26. .el-tabs__content {
  27. overflow: auto;
  28. }
  29. input::-webkit-outer-spin-button,
  30. input::-webkit-inner-spin-button {
  31. -webkit-appearance: none;
  32. }
  33. input[type="number"] {
  34. -moz-appearance: textfield;
  35. }
  36. .el-tabs__item.is-active {
  37. color: #14928a !important;
  38. // font-size: 14px;
  39. font-weight: 600;
  40. }
  41. .el-tabs__item:hover {
  42. color: #14928a !important;
  43. // font-size: 14px;
  44. font-weight: 600;
  45. }
  46. // 选择框组件
  47. .el-form-item__content {
  48. font-size: 14px !important;
  49. }
  50. .el-select {
  51. width: 150px !important;
  52. }
  53. .multiple.el-select {
  54. width: 150px !important;
  55. }
  56. .searchBtn {
  57. width: 100px;
  58. height: 36px;
  59. line-height: 36px;
  60. background-color: #f85043;
  61. color: #fff;
  62. font-size: 14px;
  63. text-align: center;
  64. border-radius: 4px;
  65. position: relative;
  66. top: 3px;
  67. cursor: pointer;
  68. }
  69. .newBand {
  70. width: 100px;
  71. height: 36px;
  72. line-height: 36px;
  73. margin-bottom: 20px;
  74. background-color: #14928a;
  75. border: 1px solid #14928a;
  76. cursor: pointer;
  77. color: #fff;
  78. font-size: 14px;
  79. text-align: center;
  80. border-radius: 4px;
  81. position: relative;
  82. top: 3px;
  83. }
  84. // 公用的搜索组件
  85. .searchWrap {
  86. display: flex;
  87. flex-direction: row;
  88. justify-content: flex-start;
  89. align-items: center;
  90. font-size: 14px;
  91. font-weight: 500;
  92. color: rgba(119, 119, 119, 1);
  93. height: 30px;
  94. margin-bottom: 30px;
  95. p {
  96. font-size: 14px;
  97. padding-left: 4px;
  98. }
  99. .searchItem {
  100. margin-left: 20px;
  101. position: relative;
  102. box-sizing: border-box;
  103. min-width: 116px;
  104. padding: 0 25px;
  105. height: 30px;
  106. line-height: 30px;
  107. background: rgba(246, 246, 246, 1);
  108. border-radius: 15px;
  109. color: #777;
  110. font-size: 14px;
  111. .el-icon-close {
  112. position: absolute;
  113. right: 5px;
  114. top: 8px;
  115. }
  116. }
  117. }
  118. .headWrap {
  119. padding: 40px 0;
  120. display: flex;
  121. flex-direction: row;
  122. justify-content: space-between;
  123. align-items: center;
  124. .left {
  125. // width: 1000px;
  126. display: flex;
  127. flex-direction: row;
  128. justify-content: flex-start;
  129. align-items: center;
  130. flex-wrap: wrap;
  131. .headItem {
  132. width: 364px;
  133. height: 30px;
  134. color: #444;
  135. border-right: 1px solid #979797;
  136. p {
  137. font-size: 14px;
  138. line-height: 30px;
  139. span {
  140. font-size: 22px;
  141. line-height: 30px;
  142. }
  143. }
  144. &:nth-child(1) {
  145. width: 256px;
  146. }
  147. &:nth-child(2n) {
  148. text-align: center;
  149. }
  150. &:nth-child(3n) {
  151. border-right: 1px solid #fff;
  152. text-align: center;
  153. }
  154. &:nth-child(4n) {
  155. text-align: left !important;
  156. width: 256px;
  157. }
  158. }
  159. }
  160. }
  161. // 公用编剧模板
  162. .m-container {
  163. box-sizing: border-box;
  164. background-color: #fff;
  165. padding: 18px 60px 40px;
  166. // height: calc(100vh- 80px) !important;
  167. height: calc(100vh - 70px);
  168. width: 100;
  169. min-width: 1440px;
  170. overflow: auto;
  171. .m-core {
  172. margin-top: 10px;
  173. background-color: #fff;
  174. position: relative;
  175. }
  176. h2 {
  177. height: 48px;
  178. line-height: 48px;
  179. position: relative;
  180. // padding-left: 30px;
  181. font-size: 32px;
  182. font-weight: 600;
  183. margin-bottom: 10px;
  184. display: flex;
  185. flex-direction: row;
  186. justify-content: flex-start;
  187. align-items: center;
  188. .term {
  189. height: 32px;
  190. line-height: 32px;
  191. border-radius: 24px;
  192. width: 100px;
  193. color: #14928a;
  194. border: 1px solid rgba(20, 146, 138, 1);
  195. font-size: 14px;
  196. text-align: center;
  197. margin-right: 12px;
  198. &:nth-child(1) {
  199. margin-left: 47px;
  200. }
  201. }
  202. .term.active {
  203. color: #fff;
  204. background-color: #14928a;
  205. }
  206. .squrt {
  207. position: absolute;
  208. left: -25px;
  209. top: 8px;
  210. height: 34px;
  211. width: 8px;
  212. background-color: #14928a;
  213. }
  214. }
  215. }
  216. </style>