app.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834
  1. <!DOCTYPE html>
  2. <html {{ HTML_ATTRS }}>
  3. <head>
  4. <link rel="stylesheet" href="/css/base.css"/>
  5. <link rel="stylesheet" href="/css/bootstrap.min.css"/>
  6. <link rel="stylesheet" href="/css/common.css">
  7. <link rel="stylesheet" href="/css/AdminLTE.css">
  8. <link rel="stylesheet" href="/css/skins/_all-skins.css">
  9. <link rel="stylesheet" href="/css/calendar.css">
  10. <link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">
  12. <!-- 引入样式 -->
  13. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  14. <script type="text/javascript" src="//vuejs.org/js/vue.min.js"></script>
  15. <script type="text/javascript" src="//unpkg.com/uiv/dist/uiv.min.js"></script>
  16. {{ HEAD }}
  17. <script>
  18. (function (w, d) {
  19. if (/(MSIE)|(Trident)/.test(w.navigator.userAgent)) {
  20. var head = d.getElementsByTagName('head')[0]
  21. var appendScript = function (src) {
  22. var node = d.createElement('script')
  23. node.src = src
  24. head.appendChild(node)
  25. }
  26. // ployfill for all ie
  27. appendScript('https://cdn.bootcss.com/html5shiv/r29/html5.min.js')
  28. appendScript('https://cdn.bootcss.com/js-polyfills/0.1.33/polyfill.min.js')
  29. }
  30. })(window, document)
  31. </script>
  32. <style>
  33. body {
  34. font-family: "Microsoft Yahei", "微软雅黑";
  35. box-sizing: border-box;
  36. }
  37. .clearfix {
  38. clear: both;
  39. }
  40. /* 时间插件使用样式调整 */
  41. .el-input__prefix, .el-input__suffix {
  42. position: absolute;
  43. top: -4px;
  44. -webkit-transition: all .3s;
  45. height: 100%;
  46. color: #c0c4cc;
  47. text-align: center;
  48. }
  49. /* 调整消息提示样式 */
  50. .el-alert {
  51. width: 50%;
  52. margin-top: 10px;
  53. }
  54. .el-button {
  55. line-height: 0;
  56. }
  57. /* 调整模态框输入框大小 */
  58. #info-textarea {
  59. padding: 10px;
  60. height: 150px;
  61. width: 100%;
  62. }
  63. /*头部导航*/
  64. .header {
  65. padding: 0 40px 0 20px;
  66. width: 100%;
  67. height: 50px;
  68. line-height: 50px;
  69. background: #fff;
  70. box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  71. -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  72. -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  73. -o-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  74. z-index: 1000;
  75. }
  76. .header .navbar-left {
  77. position: relative;
  78. }
  79. .header a.logo {
  80. width: 100%;
  81. height: 100%;
  82. }
  83. .header a.logo img {
  84. width: 60px;
  85. height: 20px;
  86. }
  87. .header .logo-txt {
  88. margin: 0 30px 0 26px;
  89. font-size: 16px;
  90. font-weight: bold;
  91. color: #000;
  92. }
  93. .header .logo-txt:before {
  94. content: '';
  95. position: absolute;
  96. top: 18px;
  97. left: 75px;
  98. width: 1px;
  99. height: 18px;
  100. background: #000;
  101. }
  102. .header .logo-name {
  103. font-size: 12px;
  104. color: #333;
  105. }
  106. .header .logo-name i {
  107. margin-right: 5px;
  108. font-size: 16px;
  109. color: #7e7e7e;
  110. }
  111. .header .logo-name em {
  112. font-style: normal;
  113. font-size: 12px;
  114. color: #333;
  115. }
  116. .header .message {
  117. margin-left: 17px;
  118. position: relative;
  119. }
  120. .header .message i {
  121. font-size: 20px;
  122. font-weight: bold;
  123. color: #3a93f7;
  124. }
  125. .header .message .red {
  126. position: absolute;
  127. top: 0;
  128. right: -3px;
  129. width: 8px;
  130. height: 8px;
  131. background: #d82128;
  132. border-radius: 50%;
  133. }
  134. .header .navbar-right b {
  135. font-size: 12px;
  136. font-weight: normal;
  137. color: #333;
  138. }
  139. .header .navbar-right i {
  140. margin-right: 10px;
  141. font-size: 14px;
  142. }
  143. .header .navbar-right a:first-child i {
  144. color: #5777e0;
  145. }
  146. .header .navbar-right a:nth-child(2) i {
  147. color: #48bb20;
  148. }
  149. .header .navbar-right a:last-child i {
  150. color: #c83c3c;
  151. }
  152. .header .navbar-right a.line {
  153. position: relative;
  154. margin-right: 40px;
  155. }
  156. .header .navbar-right a.line b:after {
  157. content: '';
  158. position: absolute;
  159. top: 2px;
  160. right: -20px;
  161. display: inline-block;
  162. width: 1px;
  163. height: 16px;
  164. background: #adadad;
  165. }
  166. /*左侧菜单栏*/
  167. .main-sidebar, .left-side {
  168. margin-top: 50px;
  169. padding-top: 0;
  170. }
  171. .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
  172. background-color: #4d4a49;
  173. }
  174. .sidebar-menu .treeview-menu {
  175. padding-left: 0;
  176. }
  177. .sidebar-menu > li {
  178. border-bottom: 1px solid rgba(0, 0, 0, .5);
  179. }
  180. .sidebar-menu > li:last-child {
  181. border-bottom: none;
  182. }
  183. .skin-blue .sidebar-menu > li > a {
  184. border-left: none;
  185. }
  186. .skin-blue .sidebar-menu > li > a, .skin-blue .sidebar-menu > li > a {
  187. height: 40px;
  188. color: #d7d7d7;
  189. background: #4d4a49;
  190. }
  191. .skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
  192. color: #d7d7d7;
  193. background: #696d70;
  194. }
  195. .skin-blue .sidebar-menu > li > .treeview-menu {
  196. margin: 0;
  197. background: #4d4a49;
  198. }
  199. .sidebar-menu .treeview-list > li {
  200. border-bottom: 1px solid rgba(0, 0, 0, .5);
  201. }
  202. .sidebar-menu .treeview-list> li:last-child {
  203. border-bottom: none;
  204. }
  205. .skin-blue .treeview-list > li > a {
  206. color: #d7d7d7;
  207. padding-left: 55px;
  208. height: 40px;
  209. line-height: 40px;
  210. }
  211. .skin-blue .treeview-list > li > a.active, .skin-blue .treelist > li > a:hover {
  212. background: #696d70;
  213. }
  214. .sidebar .search {
  215. position: relative;
  216. margin: 0 auto;
  217. padding-top: 10px;
  218. height: 40px;
  219. line-height: 40px;
  220. text-align: center;
  221. }
  222. .sidebar .search input {
  223. margin: 0 auto;
  224. width: 178px;
  225. height: 24px;
  226. text-align: center;
  227. border-radius: 12px;
  228. background: #5f5c5c;
  229. border: 1px solid #5f5c5c;
  230. }
  231. .sidebar .search i {
  232. position: absolute;
  233. top: 13px;
  234. right: 38px;
  235. font-size: 16px;
  236. color: #a6a6a6;
  237. }
  238. .sidebar .search .close {
  239. position: absolute;
  240. top: 0;
  241. right: 0;
  242. display: inline-block;
  243. width: 16px;
  244. height: 16px;
  245. border-radius: 3px;
  246. background: #5f5c5c;
  247. }
  248. .sidebar .search .close i {
  249. font-size: 12px;
  250. color: #fff;
  251. }
  252. /*content*/
  253. .content {
  254. min-height: 250px;
  255. margin: 0 auto;
  256. }
  257. .content-wrapper, .right-side {
  258. background-color: #fff;
  259. box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  260. -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  261. -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  262. -o-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  263. }
  264. .content .content-row {
  265. padding-top: 30px;
  266. padding-left: 35px;
  267. margin-bottom: 30px;
  268. }
  269. .content .list-inline .all {
  270. width: 100%;
  271. overflow: hidden;
  272. }
  273. .boxes {
  274. position: relative;
  275. border-radius: 3px;
  276. background: #ffffff;
  277. margin-bottom: 20px;
  278. width: 100%;
  279. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  280. }
  281. .info {
  282. position: relative;
  283. }
  284. .info span {
  285. font-size: 14px;
  286. font-weight: bold;
  287. color: #000;
  288. }
  289. .info b.line:after {
  290. content: '';
  291. position: absolute;
  292. top: 10px;
  293. right: 0;
  294. width: 95%;
  295. height: 1px;
  296. background: #b7b7b7;
  297. }
  298. .form-group {
  299. position: relative;
  300. margin-right: 5%;
  301. float: left;
  302. height: 24px;
  303. line-height: 24px;
  304. }
  305. .form-group1 {
  306. position: relative;
  307. margin-right: 5%;
  308. margin-bottom: 10px;
  309. }
  310. .form-group1 textarea {
  311. width: 693px;
  312. border-radius: 0;
  313. }
  314. .form-group:last-child {
  315. margin-right: 0;
  316. }
  317. .form-group label {
  318. float: left;
  319. margin-right: 5px;
  320. width: 140px;
  321. font-size: 13px;
  322. font-weight: normal;
  323. color: #666;
  324. text-align: right;
  325. }
  326. .form-group2 label {
  327. margin-left: 10%;
  328. font-size: 16px;
  329. font-weight: normal;
  330. color: #666;
  331. text-align: right;
  332. margin-bottom: 10px;
  333. margin-top: 20px;
  334. }
  335. .form-group2 input {
  336. float: right;
  337. display: inline-block;
  338. margin-right: 30%;
  339. margin-bottom: 10px;
  340. margin-top: 20px;
  341. }
  342. .form-group1 label {
  343. float: left;
  344. margin-right: 5px;
  345. width: 140px;
  346. font-size: 13px;
  347. font-weight: normal;
  348. color: #666;
  349. text-align: right;
  350. }
  351. .form-group input {
  352. float: left;
  353. width: 250px;
  354. height: 30px;
  355. border-radius: 0;
  356. }
  357. .form-group1 input {
  358. float: left;
  359. width: 250px;
  360. height: 30px;
  361. border-radius: 0;
  362. }
  363. .form-group select {
  364. float: left;
  365. width: 250px;
  366. height: 30px;
  367. border-radius: 0;
  368. }
  369. .icon {
  370. position: absolute;
  371. top: 0;
  372. right: 3px;
  373. width: 25px;
  374. height: 24px;
  375. text-align: center;
  376. border-left: 1px solid #cfcfcf;
  377. cursor: pointer;
  378. }
  379. .icon i {
  380. font-size: 14px;
  381. color: #9d9d9d;
  382. }
  383. .find {
  384. position: absolute;
  385. top: 0;
  386. right: -80px;
  387. }
  388. .find a {
  389. display: inline-block;
  390. width: 62px;
  391. height: 24px;
  392. text-align: center;
  393. border-radius: 4px;
  394. color: #fff;
  395. background: #059eff;
  396. }
  397. .table > thead > tr {
  398. border: 1px solid #dcdcdc;
  399. height: 28px;
  400. background: #e4e4e4;
  401. text-align: left;
  402. }
  403. .table > thead > tr > th {
  404. font-size: 13px;
  405. font-weight: normal;
  406. color: #666;
  407. vertical-align: bottom;
  408. border: 1px solid #dcdcdc;
  409. background-color: #e4e4e4;
  410. }
  411. .table > tbody > tr {
  412. height: 28px;
  413. background: #fff;
  414. text-align: left;
  415. cursor: pointer;
  416. }
  417. .table > tbody > tr > td {
  418. font-size: 13px;
  419. color: #333;
  420. vertical-align: bottom;
  421. border: 1px solid #dcdcdc;
  422. }
  423. .table > tbody > tr > td.grey {
  424. /*background: #eee;*/
  425. z-index: 100;
  426. }
  427. .table > tbody > tr:hover {
  428. background: #bcd2ee !important;
  429. z-index: 1000;
  430. }
  431. .pagination {
  432. padding-left: 22px;
  433. margin: 0;
  434. }
  435. .pagination span {
  436. font-size: 12px;
  437. color: #5a5a5a;
  438. }
  439. .pagination span em {
  440. margin: 0 5px;
  441. font-size: 12px;
  442. font-style: normal;
  443. color: #2f95dd;
  444. }
  445. .pagination a {
  446. margin-left: 5px;
  447. text-decoration: none;
  448. font-size: 12px;
  449. color: #2f95dd;
  450. }
  451. .x-step {
  452. background: #e8e8e8;
  453. text-align: center;
  454. margin-left: 0;
  455. width: 100%;
  456. margin: 0 auto;
  457. height: 34px;
  458. margin-bottom: 10px;
  459. }
  460. .x-step-lg {
  461. font-size: 18px
  462. }
  463. .x-step-x li {
  464. width: 100%;
  465. cursor: pointer;
  466. font-weight: bold;
  467. }
  468. .x-step-2x li {
  469. width: 50%;
  470. float: left;
  471. cursor: pointer;
  472. font-weight: bold;
  473. }
  474. .x-step-2x li a:hover {
  475. color: #666;
  476. cursor: pointer;
  477. }
  478. .x-step-3x li {
  479. width: 33.3%;
  480. float: left;
  481. cursor: pointer;
  482. font-weight: bold;
  483. }
  484. .x-step-3x li a:hover {
  485. color: #666;
  486. cursor: pointer;
  487. }
  488. .x-step-10x li {
  489. width: 10%;
  490. float: left;
  491. }
  492. .x-step li {
  493. padding: 0;
  494. height: 34px;
  495. line-height: 34px;
  496. position: relative
  497. }
  498. .x-step-lg li {
  499. height: 46px;
  500. line-height: 46px;
  501. }
  502. .x-step li.active {
  503. background: #5078cb;
  504. color: #fff;
  505. }
  506. .x-step li.active:before, .x-step li.active:after, .x-step .x-split:before, .x-step .x-split:after {
  507. position: absolute;
  508. top: 0;
  509. display: inline-block;
  510. /* border-top: 17px solid transparent;
  511. border-bottom: 17px solid transparent;
  512. border-left: 17px solid transparent;*/
  513. content: '';
  514. }
  515. .x-step-lg li.active:before, .x-step-lg li.active:after, .x-step-lg .x-split:before, .x-step-lg .x-split:after {
  516. border-width: 23px
  517. }
  518. .x-step li.active:after {
  519. border-left-color: #5078cb;
  520. right: -17px;
  521. }
  522. .x-step-lg li.active:after {
  523. right: -23px;
  524. }
  525. .x-step li.active:before {
  526. border-left-color: #e8e8e8;
  527. left: -17px;
  528. z-index: 3
  529. }
  530. .x-step-lg li.active:before {
  531. left: -23px;
  532. }
  533. .x-step strong {
  534. font-style: italic;
  535. font-size: 120%;
  536. color: #777;
  537. margin-right: 5px;
  538. text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  539. }
  540. .x-step li.active strong {
  541. color: #fff;
  542. }
  543. .x-step .x-split {
  544. float: right;
  545. }
  546. .x-step .x-split:after {
  547. border-left-color: #f5f8fa;
  548. right: -20px;
  549. z-index: 1
  550. }
  551. .x-step-lg .x-split:after {
  552. right: -26px
  553. }
  554. .x-step .x-split:before {
  555. border-left-color: #e8e8e8;
  556. right: -18px;
  557. z-index: 2
  558. }
  559. .x-step-lg .x-split:before {
  560. right: -24px
  561. }
  562. .x-step li:first-child:before, .x-step li:last-child:after {
  563. border-width: 0
  564. }
  565. .x-step li:nth-of-type(1) .x-split:after {
  566. border-left-color: #e8e8e8;
  567. right: -18px;
  568. z-index: 1;
  569. }
  570. .x-step li:nth-of-type(1) .x-split:before {
  571. border-left-color: #5078cb;
  572. right: -17px;
  573. z-index: 4;
  574. }
  575. .x-step li:nth-of-type(2).active .x-split:after {
  576. border-left-color: #e8e8e8;
  577. right: -18px;
  578. z-index: 1;
  579. }
  580. .x-step li:nth-of-type(2).active .x-split:before {
  581. border-left-color: #5078cb;
  582. right: -17px;
  583. z-index: 4;
  584. }
  585. .x-step li:nth-of-type(1).active:after, .x-step li:nth-of-type(2).active:before, .x-step li:nth-of-type(3).active:before {
  586. border-width: 0
  587. }
  588. .tab table thead th {
  589. text-align: center;
  590. background-color:#e4e4e4;
  591. height:28px;
  592. }
  593. .tab table td {
  594. background-color: white;
  595. text-align: center;
  596. }
  597. .tab table tr td input {
  598. display: inline-block;
  599. border: 0px;
  600. height: 20px;
  601. width: 100%;
  602. }
  603. .tab table tr input[type='button'] {
  604. display: inline-block;
  605. line-height: 20px;
  606. text-align: center;
  607. background-color: white;
  608. font-size: 25px;
  609. }
  610. .toggle {
  611. width: 80px;
  612. height: 20px;
  613. border: 1px solid #dcdcdc;
  614. font-size: 12px;
  615. text-align: center;
  616. background-color: #5078cb;
  617. color: white;
  618. font-size: 15px;
  619. }
  620. .buttons {
  621. margin-left: 3%;
  622. }
  623. .buttons button {
  624. width: 80px;
  625. height: 30px;
  626. background-color: #5078cb;
  627. color: white;
  628. font-size: 15px;
  629. }
  630. #tabTitle {
  631. cursor: pointer;
  632. }
  633. input.el-upload__input {
  634. display: none;
  635. }
  636. .upload-demo {
  637. margin-left: 100px;
  638. }
  639. .el-upload-list__item {
  640. width: 30%;
  641. }
  642. /*弹框*/
  643. .modal-dialog {
  644. position: absolute;
  645. top: 0;
  646. bottom: 0;
  647. left: 0;
  648. right: 0;
  649. }
  650. .modal-content {
  651. /*overflow-y: scroll; */
  652. position: absolute;
  653. top: 0;
  654. bottom: 0;
  655. width: 100%;
  656. }
  657. .modal-body {
  658. overflow-y: scroll;
  659. position: absolute;
  660. top: 55px;
  661. bottom: 65px;
  662. width: 100%;
  663. }
  664. .modal-header .close {
  665. margin-right: 15px;
  666. }
  667. .modal-footer {
  668. position: absolute;
  669. width: 100%;
  670. bottom: 0;
  671. }
  672. .ul {
  673. float: left;
  674. }
  675. .ul li {
  676. font-size: 16px;
  677. font-weight: normal;
  678. color: #666;
  679. margin-bottom: 10px;
  680. margin-top: 20px;
  681. }
  682. .filebutton {
  683. position: absolute;
  684. top: 660px;
  685. padding-left: 60px;
  686. }
  687. .filebutton button {
  688. width: 80px;
  689. height: 30px;
  690. background-color: #5078cb;
  691. color: white;
  692. font-size: 15px;
  693. }
  694. .el-input__inner {
  695. padding:0
  696. }
  697. /* .form-control[readonly], fieldset[disabled] .form-control{
  698. opacity:1;
  699. background-color: white;
  700. }*/
  701. </style>
  702. </head>
  703. <body {{ BODY_ATTRS }}>
  704. {{ APP }}
  705. </body>
  706. </html>