App.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <template>
  2. <div id="app" v-cloak>
  3. <router-view v-if="isRouterAlive" v-cloak/>
  4. </div>
  5. </template>
  6. <script>
  7. import Vue from "vue";
  8. export default {
  9. name: "App",
  10. provide() {
  11. return {
  12. reloads: this.reloads,
  13. };
  14. },
  15. data() {
  16. return {
  17. isRouterAlive: true,
  18. };
  19. },
  20. created() {},
  21. methods: {
  22. reloads() {
  23. this.isRouterAlive = false;
  24. this.$nextTick(function () {
  25. this.isRouterAlive = true;
  26. });
  27. },
  28. },
  29. };
  30. </script>
  31. <style lang="scss">
  32. * {
  33. margin: 0;
  34. padding: 0;
  35. touch-action: none !important;
  36. }
  37. [v-cloak] {
  38. display: none !important;
  39. }
  40. html {
  41. --color-primary: #00A79D;
  42. }
  43. // 13817a
  44. body {
  45. background-color: #eef4f9 !important;
  46. }
  47. /* 出去多选框中的关闭按钮 */
  48. .el-select__tags .el-tag__close.el-icon-close {
  49. display: none;
  50. }
  51. .el-checkbox__input.is-focus {
  52. visibility: hidden;
  53. }
  54. .el-checkbox__inner:hover {
  55. background-color: val(--color-primary);
  56. }
  57. .el-checkbox__input.is-checked .el-checkbox__inner,
  58. .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  59. background-color: var(--color-primary);
  60. border-color: var(--color-primary);
  61. }
  62. .el-select__tags .el-tag__close.el-icon-close {
  63. display: inline-block;
  64. }
  65. .el-checkbox__input.is-checked + .el-checkbox__label {
  66. color: #606266;
  67. }
  68. </style>
  69. <style lang="scss">
  70. .el-table {
  71. width: 99% !important;
  72. border-left: 1px solid #ebeef5;
  73. border-right: 1px solid #ebeef5;
  74. }
  75. .el-tabs__content {
  76. overflow: auto;
  77. }
  78. .el-tabs__item:focus.is-active.is-focus:not(:active) {
  79. box-shadow: none;
  80. border-top-left-radius: 20px;
  81. border-top-right-radius: 20px;
  82. }
  83. input::-webkit-outer-spin-button,
  84. input::-webkit-inner-spin-button {
  85. -webkit-appearance: none;
  86. }
  87. input[type="number"] {
  88. -moz-appearance: textfield;
  89. }
  90. .el-input__inner {
  91. line-height: 1px !important;
  92. }
  93. .el-dialog {
  94. margin-bottom: 10vh;
  95. .el-dialog__header {
  96. // background: #363d55;
  97. background: var(--color-primary);
  98. padding: 15px 20px 15px;
  99. .el-dialog__title {
  100. color: #fff;
  101. }
  102. .el-dialog__headerbtn .el-dialog__close {
  103. color: #fff;
  104. }
  105. }
  106. }
  107. .el-tabs__item.is-active {
  108. // color: var(--color-primary) !important;
  109. // font-size: 14px;
  110. font-weight: 600;
  111. }
  112. .el-tabs__item:hover {
  113. // color: var(--color-primary) !important;
  114. // font-size: 14px;
  115. font-weight: 600;
  116. }
  117. // 选择框组件
  118. .el-form-item__content {
  119. font-size: 14px !important;
  120. }
  121. .el-select {
  122. width: 180px !important;
  123. }
  124. .el-input__count{
  125. background-color: transparent!important;
  126. }
  127. .multiple.el-select {
  128. width: 180px !important;
  129. }
  130. .searchBtn {
  131. width: 100px;
  132. height: 36px;
  133. line-height: 36px;
  134. background-color: #f85043;
  135. color: #fff;
  136. font-size: 14px;
  137. text-align: center;
  138. border-radius: 4px;
  139. position: relative;
  140. top: 3px;
  141. cursor: pointer;
  142. }
  143. .newBand {
  144. min-width: 100px;
  145. max-width: 150px;
  146. padding: 0 10px;
  147. height: 36px;
  148. line-height: 36px;
  149. margin-bottom: 20px;
  150. background-color: var(--color-primary);
  151. border: 1px solid var(--color-primary);
  152. cursor: pointer;
  153. color: #fff;
  154. font-size: 14px;
  155. text-align: center;
  156. border-radius: 4px;
  157. position: relative;
  158. top: 3px;
  159. }
  160. .btn-primary {
  161. background-color: var(--color-primary);
  162. border-color: var(--color-primary);
  163. color: #fff;
  164. margin-bottom: 20px;
  165. min-width: 100px;
  166. &:focus,
  167. &:hover {
  168. // background-color: #0e726c;
  169. // border-color: #0e726c;
  170. color: #fff;
  171. }
  172. }
  173. // 公用的搜索组件
  174. .searchWrap {
  175. display: flex;
  176. flex-direction: row;
  177. justify-content: flex-start;
  178. align-items: center;
  179. font-size: 14px;
  180. font-weight: 500;
  181. color: rgba(119, 119, 119, 1);
  182. height: 30px;
  183. margin-bottom: 30px;
  184. p {
  185. font-size: 14px;
  186. padding-left: 4px;
  187. }
  188. .searchItem {
  189. margin-left: 20px;
  190. position: relative;
  191. box-sizing: border-box;
  192. min-width: 116px;
  193. padding: 0 25px;
  194. height: 30px;
  195. line-height: 30px;
  196. background: rgba(246, 246, 246, 1);
  197. border-radius: 15px;
  198. color: #777;
  199. font-size: 14px;
  200. .el-icon-close {
  201. position: absolute;
  202. right: 5px;
  203. top: 8px;
  204. }
  205. }
  206. }
  207. .headWrap {
  208. padding: 40px 0;
  209. display: flex;
  210. flex-direction: row;
  211. justify-content: space-between;
  212. align-items: center;
  213. .left {
  214. width: 1100px;
  215. display: flex;
  216. flex-direction: row;
  217. justify-content: flex-start;
  218. align-items: center;
  219. flex-wrap: wrap;
  220. .headItem {
  221. width: 320px;
  222. height: 30px;
  223. color: #444;
  224. border-right: 1px solid #979797;
  225. p {
  226. font-size: 14px;
  227. line-height: 30px;
  228. span {
  229. font-size: 22px;
  230. line-height: 30px;
  231. }
  232. }
  233. &:nth-child(1) {
  234. width: 256px;
  235. }
  236. &:nth-child(2n) {
  237. text-align: center;
  238. }
  239. &:nth-child(3n) {
  240. border-right: 1px solid #fff;
  241. text-align: center;
  242. }
  243. &:nth-child(4n) {
  244. text-align: left !important;
  245. width: 256px;
  246. }
  247. &:nth-child(5n) {
  248. text-align: center;
  249. }
  250. }
  251. }
  252. }
  253. // 公用编剧模板
  254. .m-container {
  255. box-sizing: border-box;
  256. background-color: #fff;
  257. padding: 18px 30px 40px;
  258. // height: calc(100vh - 145px) !important;
  259. // height: calc(100vh - 70px);
  260. width: 100%;
  261. // min-width: 1440px;
  262. // overflow: auto;
  263. .m-core {
  264. margin-top: 10px;
  265. background-color: #fff;
  266. position: relative;
  267. }
  268. // & > h2 {
  269. // display: none !important;
  270. // }
  271. & > h2 {
  272. height: 48px;
  273. line-height: 48px;
  274. position: relative;
  275. // padding-left: 20px;
  276. font-size: 26px;
  277. font-weight: 600;
  278. padding-bottom: 15px;
  279. margin-bottom: 20px;
  280. display: flex;
  281. flex-direction: row;
  282. justify-content: flex-start;
  283. align-items: center;
  284. color: #212121;
  285. border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  286. .term {
  287. height: 32px;
  288. line-height: 32px;
  289. border-radius: 24px;
  290. width: 100px;
  291. color: var(--color-primary);
  292. border: 1px solid var(--color-primary);
  293. font-size: 14px;
  294. text-align: center;
  295. margin-right: 12px;
  296. &:nth-child(1) {
  297. margin-left: 47px;
  298. }
  299. }
  300. .term.active {
  301. color: #fff;
  302. background-color: var(--color-primary);
  303. }
  304. .squrt {
  305. // margin-right: 15px;
  306. // height: 34px;
  307. // width: 8px;
  308. // background-color: var(--color-primary);
  309. }
  310. }
  311. }
  312. .btnWrap {
  313. display: flex;
  314. flex-direction: row;
  315. justify-content: flex-end;
  316. div {
  317. line-height: 40px;
  318. text-align: center;
  319. color: #fff;
  320. border-radius: 4px;
  321. margin-right: 20px;
  322. cursor: pointer;
  323. }
  324. .nextBtn {
  325. width: 120px;
  326. height: 40px;
  327. background-color: var(--color-primary);
  328. }
  329. .okBtn {
  330. width: 120px;
  331. height: 40px;
  332. background-color: #f97215;
  333. }
  334. .closeBtn {
  335. width: 120px;
  336. height: 40px;
  337. background-color: #777;
  338. }
  339. }
  340. ::-webkit-scrollbar {
  341. width: 8px; /* 纵向滚动条*/
  342. height: 8px; /* 横向滚动条 */
  343. background-color: #fff;
  344. }
  345. /*定义滚动条轨道 内阴影*/
  346. ::-webkit-scrollbar-track {
  347. -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
  348. background-color: #fff;
  349. }
  350. /*定义滑块 内阴影*/
  351. ::-webkit-scrollbar-thumb {
  352. -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
  353. background-color: #d5d5d5;
  354. }
  355. .el-input.is-disabled .el-input__inner {
  356. color: #333;
  357. opacity: 1;
  358. }
  359. .horizontal-scrollbar {
  360. .el-scrollbar__wrap {
  361. overflow-x: hidden;
  362. // margin-bottom: -8px !important;
  363. margin-right: -8px !important;
  364. .el-scrollbar__view {
  365. white-space: nowrap;
  366. }
  367. }
  368. }
  369. </style>
  370. <style lang="less">
  371. .main-dot {
  372. position: relative;
  373. &::after {
  374. content: "";
  375. display: block;
  376. position: absolute;
  377. height: 8px;
  378. width: 8px;
  379. background-color: #f56c6c;
  380. border-radius: 50%;
  381. right: 5px;
  382. top: 5px;
  383. }
  384. }
  385. .el-select__tags {
  386. overflow: hidden;
  387. flex-wrap: nowrap;
  388. }
  389. .el-select__tags {
  390. .el-tag.el-tag--info.el-tag--small.el-tag--light {
  391. display: flex;
  392. flex-direction: row;
  393. justify-content: space-between;
  394. align-items: center;
  395. .el-select__tags-text {
  396. flex-wrap: nowrap;
  397. max-width: 60px;
  398. overflow: hidden;
  399. text-overflow: ellipsis;
  400. display: inline-block;
  401. }
  402. }
  403. }
  404. </style>