App.vue 7.6 KB

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