框架源码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2076 lines
55 KiB

4 years ago
  1. @charset "UTF-8";
  2. [data-theme="blue"] {
  3. /* BEM support Func
  4. -------------------------- */
  5. /* Element Chalk Variables */
  6. /* Transition
  7. -------------------------- */
  8. /* Color
  9. -------------------------- */
  10. /* 53a8ff */
  11. /* 66b1ff */
  12. /* 79bbff */
  13. /* 8cc5ff */
  14. /* a0cfff */
  15. /* b3d8ff */
  16. /* c6e2ff */
  17. /* d9ecff */
  18. /* ecf5ff */
  19. /* Link
  20. -------------------------- */
  21. /* Border
  22. -------------------------- */
  23. /* Fill
  24. -------------------------- */
  25. /* Typography
  26. -------------------------- */
  27. /* Size
  28. -------------------------- */
  29. /* z-index
  30. -------------------------- */
  31. /* Disable base
  32. -------------------------- */
  33. /* Icon
  34. -------------------------- */
  35. /* Checkbox
  36. -------------------------- */
  37. /* Radio
  38. -------------------------- */
  39. /* Select
  40. -------------------------- */
  41. /* Alert
  42. -------------------------- */
  43. /* MessageBox
  44. -------------------------- */
  45. /* Message
  46. -------------------------- */
  47. /* Notification
  48. -------------------------- */
  49. /* Input
  50. -------------------------- */
  51. /* Cascader
  52. -------------------------- */
  53. /* Group
  54. -------------------------- */
  55. /* Tab
  56. -------------------------- */
  57. /* Button
  58. -------------------------- */
  59. /* cascader
  60. -------------------------- */
  61. /* Switch
  62. -------------------------- */
  63. /* Dialog
  64. -------------------------- */
  65. /* Table
  66. -------------------------- */
  67. /* Pagination
  68. -------------------------- */
  69. /* Popup
  70. -------------------------- */
  71. /* Popover
  72. -------------------------- */
  73. /* Tooltip
  74. -------------------------- */
  75. /* Tag
  76. -------------------------- */
  77. /* Tree
  78. -------------------------- */
  79. /* Dropdown
  80. -------------------------- */
  81. /* Badge
  82. -------------------------- */
  83. /* Card
  84. --------------------------*/
  85. /* Slider
  86. --------------------------*/
  87. /* Steps
  88. --------------------------*/
  89. /* Menu
  90. --------------------------*/
  91. /* Rate
  92. --------------------------*/
  93. /* DatePicker
  94. --------------------------*/
  95. /* Loading
  96. --------------------------*/
  97. /* Scrollbar
  98. --------------------------*/
  99. /* Carousel
  100. --------------------------*/
  101. /* Collapse
  102. --------------------------*/
  103. /* Transfer
  104. --------------------------*/
  105. /* Header
  106. --------------------------*/
  107. /* Footer
  108. --------------------------*/
  109. /* Main
  110. --------------------------*/
  111. /* Timeline
  112. --------------------------*/
  113. /* Backtop
  114. --------------------------*/
  115. /* Link
  116. --------------------------*/
  117. /* Calendar
  118. --------------------------*/
  119. /* Form
  120. -------------------------- */
  121. /* Avatar
  122. --------------------------*/
  123. /* Break-point
  124. --------------------------*/
  125. /* Break-points
  126. -------------------------- */
  127. /* Scrollbar
  128. -------------------------- */
  129. /* Placeholder
  130. -------------------------- */
  131. /* BEM
  132. -------------------------- */
  133. /* BEM support Func
  134. -------------------------- */
  135. /* Element Chalk Variables */
  136. /* Transition
  137. -------------------------- */
  138. /* Color
  139. -------------------------- */
  140. /* 53a8ff */
  141. /* 66b1ff */
  142. /* 79bbff */
  143. /* 8cc5ff */
  144. /* a0cfff */
  145. /* b3d8ff */
  146. /* c6e2ff */
  147. /* d9ecff */
  148. /* ecf5ff */
  149. /* Link
  150. -------------------------- */
  151. /* Border
  152. -------------------------- */
  153. /* Fill
  154. -------------------------- */
  155. /* Typography
  156. -------------------------- */
  157. /* Size
  158. -------------------------- */
  159. /* z-index
  160. -------------------------- */
  161. /* Disable base
  162. -------------------------- */
  163. /* Icon
  164. -------------------------- */
  165. /* Checkbox
  166. -------------------------- */
  167. /* Radio
  168. -------------------------- */
  169. /* Select
  170. -------------------------- */
  171. /* Alert
  172. -------------------------- */
  173. /* MessageBox
  174. -------------------------- */
  175. /* Message
  176. -------------------------- */
  177. /* Notification
  178. -------------------------- */
  179. /* Input
  180. -------------------------- */
  181. /* Cascader
  182. -------------------------- */
  183. /* Group
  184. -------------------------- */
  185. /* Tab
  186. -------------------------- */
  187. /* Button
  188. -------------------------- */
  189. /* cascader
  190. -------------------------- */
  191. /* Switch
  192. -------------------------- */
  193. /* Dialog
  194. -------------------------- */
  195. /* Table
  196. -------------------------- */
  197. /* Pagination
  198. -------------------------- */
  199. /* Popup
  200. -------------------------- */
  201. /* Popover
  202. -------------------------- */
  203. /* Tooltip
  204. -------------------------- */
  205. /* Tag
  206. -------------------------- */
  207. /* Tree
  208. -------------------------- */
  209. /* Dropdown
  210. -------------------------- */
  211. /* Badge
  212. -------------------------- */
  213. /* Card
  214. --------------------------*/
  215. /* Slider
  216. --------------------------*/
  217. /* Steps
  218. --------------------------*/
  219. /* Menu
  220. --------------------------*/
  221. /* Rate
  222. --------------------------*/
  223. /* DatePicker
  224. --------------------------*/
  225. /* Loading
  226. --------------------------*/
  227. /* Scrollbar
  228. --------------------------*/
  229. /* Carousel
  230. --------------------------*/
  231. /* Collapse
  232. --------------------------*/
  233. /* Transfer
  234. --------------------------*/
  235. /* Header
  236. --------------------------*/
  237. /* Footer
  238. --------------------------*/
  239. /* Main
  240. --------------------------*/
  241. /* Timeline
  242. --------------------------*/
  243. /* Backtop
  244. --------------------------*/
  245. /* Link
  246. --------------------------*/
  247. /* Calendar
  248. --------------------------*/
  249. /* Form
  250. -------------------------- */
  251. /* Avatar
  252. --------------------------*/
  253. /* Break-point
  254. --------------------------*/
  255. /* Break-points
  256. -------------------------- */
  257. /* Scrollbar
  258. -------------------------- */
  259. /* Placeholder
  260. -------------------------- */
  261. /* BEM
  262. -------------------------- */
  263. /* Element Chalk Variables */
  264. /* Transition
  265. -------------------------- */
  266. /* Color
  267. -------------------------- */
  268. /* 53a8ff */
  269. /* 66b1ff */
  270. /* 79bbff */
  271. /* 8cc5ff */
  272. /* a0cfff */
  273. /* b3d8ff */
  274. /* c6e2ff */
  275. /* d9ecff */
  276. /* ecf5ff */
  277. /* Link
  278. -------------------------- */
  279. /* Border
  280. -------------------------- */
  281. /* Fill
  282. -------------------------- */
  283. /* Typography
  284. -------------------------- */
  285. /* Size
  286. -------------------------- */
  287. /* z-index
  288. -------------------------- */
  289. /* Disable base
  290. -------------------------- */
  291. /* Icon
  292. -------------------------- */
  293. /* Checkbox
  294. -------------------------- */
  295. /* Radio
  296. -------------------------- */
  297. /* Select
  298. -------------------------- */
  299. /* Alert
  300. -------------------------- */
  301. /* MessageBox
  302. -------------------------- */
  303. /* Message
  304. -------------------------- */
  305. /* Notification
  306. -------------------------- */
  307. /* Input
  308. -------------------------- */
  309. /* Cascader
  310. -------------------------- */
  311. /* Group
  312. -------------------------- */
  313. /* Tab
  314. -------------------------- */
  315. /* Button
  316. -------------------------- */
  317. /* cascader
  318. -------------------------- */
  319. /* Switch
  320. -------------------------- */
  321. /* Dialog
  322. -------------------------- */
  323. /* Table
  324. -------------------------- */
  325. /* Pagination
  326. -------------------------- */
  327. /* Popup
  328. -------------------------- */
  329. /* Popover
  330. -------------------------- */
  331. /* Tooltip
  332. -------------------------- */
  333. /* Tag
  334. -------------------------- */
  335. /* Tree
  336. -------------------------- */
  337. /* Dropdown
  338. -------------------------- */
  339. /* Badge
  340. -------------------------- */
  341. /* Card
  342. --------------------------*/
  343. /* Slider
  344. --------------------------*/
  345. /* Steps
  346. --------------------------*/
  347. /* Menu
  348. --------------------------*/
  349. /* Rate
  350. --------------------------*/
  351. /* DatePicker
  352. --------------------------*/
  353. /* Loading
  354. --------------------------*/
  355. /* Scrollbar
  356. --------------------------*/
  357. /* Carousel
  358. --------------------------*/
  359. /* Collapse
  360. --------------------------*/
  361. /* Transfer
  362. --------------------------*/
  363. /* Header
  364. --------------------------*/
  365. /* Footer
  366. --------------------------*/
  367. /* Main
  368. --------------------------*/
  369. /* Timeline
  370. --------------------------*/
  371. /* Backtop
  372. --------------------------*/
  373. /* Link
  374. --------------------------*/
  375. /* Calendar
  376. --------------------------*/
  377. /* Form
  378. -------------------------- */
  379. /* Avatar
  380. --------------------------*/
  381. /* Break-point
  382. --------------------------*/
  383. /* Element Chalk Variables */
  384. /* Transition
  385. -------------------------- */
  386. /* Color
  387. -------------------------- */
  388. /* 53a8ff */
  389. /* 66b1ff */
  390. /* 79bbff */
  391. /* 8cc5ff */
  392. /* a0cfff */
  393. /* b3d8ff */
  394. /* c6e2ff */
  395. /* d9ecff */
  396. /* ecf5ff */
  397. /* Link
  398. -------------------------- */
  399. /* Border
  400. -------------------------- */
  401. /* Fill
  402. -------------------------- */
  403. /* Typography
  404. -------------------------- */
  405. /* Size
  406. -------------------------- */
  407. /* z-index
  408. -------------------------- */
  409. /* Disable base
  410. -------------------------- */
  411. /* Icon
  412. -------------------------- */
  413. /* Checkbox
  414. -------------------------- */
  415. /* Radio
  416. -------------------------- */
  417. /* Select
  418. -------------------------- */
  419. /* Alert
  420. -------------------------- */
  421. /* MessageBox
  422. -------------------------- */
  423. /* Message
  424. -------------------------- */
  425. /* Notification
  426. -------------------------- */
  427. /* Input
  428. -------------------------- */
  429. /* Cascader
  430. -------------------------- */
  431. /* Group
  432. -------------------------- */
  433. /* Tab
  434. -------------------------- */
  435. /* Button
  436. -------------------------- */
  437. /* cascader
  438. -------------------------- */
  439. /* Switch
  440. -------------------------- */
  441. /* Dialog
  442. -------------------------- */
  443. /* Table
  444. -------------------------- */
  445. /* Pagination
  446. -------------------------- */
  447. /* Popup
  448. -------------------------- */
  449. /* Popover
  450. -------------------------- */
  451. /* Tooltip
  452. -------------------------- */
  453. /* Tag
  454. -------------------------- */
  455. /* Tree
  456. -------------------------- */
  457. /* Dropdown
  458. -------------------------- */
  459. /* Badge
  460. -------------------------- */
  461. /* Card
  462. --------------------------*/
  463. /* Slider
  464. --------------------------*/
  465. /* Steps
  466. --------------------------*/
  467. /* Menu
  468. --------------------------*/
  469. /* Rate
  470. --------------------------*/
  471. /* DatePicker
  472. --------------------------*/
  473. /* Loading
  474. --------------------------*/
  475. /* Scrollbar
  476. --------------------------*/
  477. /* Carousel
  478. --------------------------*/
  479. /* Collapse
  480. --------------------------*/
  481. /* Transfer
  482. --------------------------*/
  483. /* Header
  484. --------------------------*/
  485. /* Footer
  486. --------------------------*/
  487. /* Main
  488. --------------------------*/
  489. /* Timeline
  490. --------------------------*/
  491. /* Backtop
  492. --------------------------*/
  493. /* Link
  494. --------------------------*/
  495. /* Calendar
  496. --------------------------*/
  497. /* Form
  498. -------------------------- */
  499. /* Avatar
  500. --------------------------*/
  501. /* Break-point
  502. --------------------------*/ }
  503. [data-theme="blue"] .el-progress {
  504. position: relative;
  505. line-height: 1; }
  506. .el-progress__text {
  507. font-size: 14px;
  508. color: #FFFFFF;
  509. display: inline-block;
  510. vertical-align: middle;
  511. margin-left: 10px;
  512. line-height: 1; }
  513. .el-progress__text i {
  514. vertical-align: middle;
  515. display: block; }
  516. [data-theme="blue"] .el-progress--circle, [data-theme="blue"] .el-progress--dashboard {
  517. display: inline-block; }
  518. [data-theme="blue"] .el-progress--circle .el-progress__text, [data-theme="blue"] .el-progress--dashboard .el-progress__text {
  519. position: absolute;
  520. top: 50%;
  521. left: 0;
  522. width: 100%;
  523. text-align: center;
  524. margin: 0;
  525. -webkit-transform: translate(0, -50%);
  526. transform: translate(0, -50%); }
  527. [data-theme="blue"] .el-progress--circle .el-progress__text i, [data-theme="blue"] .el-progress--dashboard .el-progress__text i {
  528. vertical-align: middle;
  529. display: inline-block; }
  530. [data-theme="blue"] .el-progress--without-text .el-progress__text {
  531. display: none; }
  532. [data-theme="blue"] .el-progress--without-text .el-progress-bar {
  533. padding-right: 0;
  534. margin-right: 0;
  535. display: block; }
  536. [data-theme="blue"] .el-progress--text-inside .el-progress-bar {
  537. padding-right: 0;
  538. margin-right: 0; }
  539. [data-theme="blue"] .el-progress.is-success .el-progress-bar__inner {
  540. background-color: #92D9FF; }
  541. [data-theme="blue"] .el-progress.is-success .el-progress__text {
  542. color: #92D9FF; }
  543. [data-theme="blue"] .el-progress.is-warning .el-progress-bar__inner {
  544. background-color: #FFCE6D; }
  545. [data-theme="blue"] .el-progress.is-warning .el-progress__text {
  546. color: #FFCE6D; }
  547. [data-theme="blue"] .el-progress.is-exception .el-progress-bar__inner {
  548. background-color: #FF6D6D; }
  549. [data-theme="blue"] .el-progress.is-exception .el-progress__text {
  550. color: #FF6D6D; }
  551. [data-theme="blue"] .el-progress-bar {
  552. padding-right: 50px;
  553. display: inline-block;
  554. vertical-align: middle;
  555. width: 100%;
  556. margin-right: -55px;
  557. -webkit-box-sizing: border-box;
  558. box-sizing: border-box; }
  559. .el-progress-bar__outer {
  560. height: 6px;
  561. border-radius: 100px;
  562. background-color: #EBEEF5;
  563. overflow: hidden;
  564. position: relative;
  565. vertical-align: middle; }
  566. .el-progress-bar__inner {
  567. position: absolute;
  568. left: 0;
  569. top: 0;
  570. height: 100%;
  571. background-color: #92D9FF;
  572. text-align: right;
  573. border-radius: 100px;
  574. line-height: 1;
  575. white-space: nowrap;
  576. -webkit-transition: width 0.6s ease;
  577. transition: width 0.6s ease; }
  578. .el-progress-bar__inner::after {
  579. display: inline-block;
  580. content: "";
  581. height: 100%;
  582. vertical-align: middle; }
  583. .el-progress-bar__innerText {
  584. display: inline-block;
  585. vertical-align: middle;
  586. color: #000000;
  587. font-size: 12px;
  588. margin: 0 5px; }
  589. @-webkit-keyframes progress {
  590. 0% {
  591. background-position: 0 0; }
  592. 100% {
  593. background-position: 32px 0; } }
  594. @keyframes progress {
  595. 0% {
  596. background-position: 0 0; }
  597. 100% {
  598. background-position: 32px 0; } }
  599. [data-theme="blue"] .el-upload {
  600. display: inline-block;
  601. text-align: center;
  602. cursor: pointer;
  603. outline: none;
  604. /* 照片墙模式 */ }
  605. .el-upload__input {
  606. display: none; }
  607. .el-upload__tip {
  608. font-size: 12px;
  609. color: #FFFFFF;
  610. margin-top: 7px; }
  611. [data-theme="blue"] .el-upload iframe {
  612. position: absolute;
  613. z-index: -1;
  614. top: 0;
  615. left: 0;
  616. opacity: 0;
  617. filter: alpha(opacity=0); }
  618. [data-theme="blue"] .el-upload--picture-card {
  619. background-color: #fbfdff;
  620. border: 1px dashed #c0ccda;
  621. border-radius: 6px;
  622. -webkit-box-sizing: border-box;
  623. box-sizing: border-box;
  624. width: 148px;
  625. height: 148px;
  626. cursor: pointer;
  627. line-height: 146px;
  628. vertical-align: top; }
  629. [data-theme="blue"] .el-upload--picture-card i {
  630. font-size: 28px;
  631. color: #8c939d; }
  632. [data-theme="blue"] .el-upload--picture-card:hover {
  633. border-color: #92D9FF;
  634. color: #92D9FF; }
  635. [data-theme="blue"] .el-upload:focus {
  636. border-color: #92D9FF;
  637. color: #92D9FF; }
  638. [data-theme="blue"] .el-upload:focus .el-upload-dragger {
  639. border-color: #92D9FF; }
  640. [data-theme="blue"] .el-upload-dragger {
  641. border: 1px dashed #d9d9d9;
  642. border-radius: 6px;
  643. -webkit-box-sizing: border-box;
  644. box-sizing: border-box;
  645. width: 360px;
  646. height: 180px;
  647. text-align: center;
  648. cursor: pointer;
  649. position: relative;
  650. overflow: hidden; }
  651. [data-theme="blue"] .el-upload-dragger .el-icon-upload {
  652. font-size: 67px;
  653. color: rgba(255, 255, 255, 0.5);
  654. margin: 40px 0 16px;
  655. line-height: 50px; }
  656. [data-theme="blue"] .el-upload-dragger + .el-upload__tip {
  657. text-align: center; }
  658. [data-theme="blue"] .el-upload-dragger ~ .el-upload__files {
  659. border-top: 1px solid #DCDFE6;
  660. margin-top: 7px;
  661. padding-top: 5px; }
  662. [data-theme="blue"] .el-upload-dragger .el-upload__text {
  663. color: #FFFFFF;
  664. font-size: 14px;
  665. text-align: center; }
  666. [data-theme="blue"] .el-upload-dragger .el-upload__text em {
  667. color: #92D9FF;
  668. font-style: normal; }
  669. [data-theme="blue"] .el-upload-dragger:hover {
  670. border-color: #92D9FF; }
  671. [data-theme="blue"] .el-upload-dragger.is-dragover {
  672. background-color: rgba(32, 159, 255, 0.06);
  673. border: 2px dashed #92D9FF; }
  674. [data-theme="blue"] .el-upload-list {
  675. margin: 0;
  676. padding: 0;
  677. list-style: none; }
  678. .el-upload-list__item {
  679. -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  680. transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  681. font-size: 14px;
  682. color: #FFFFFF;
  683. line-height: 1.8;
  684. margin-top: 5px;
  685. position: relative;
  686. -webkit-box-sizing: border-box;
  687. box-sizing: border-box;
  688. border-radius: 4px;
  689. width: 100%; }
  690. .el-upload-list__item .el-progress {
  691. position: absolute;
  692. top: 20px;
  693. width: 100%; }
  694. .el-upload-list__item .el-progress__text {
  695. position: absolute;
  696. right: 0;
  697. top: -13px; }
  698. .el-upload-list__item .el-progress-bar {
  699. margin-right: 0;
  700. padding-right: 0; }
  701. .el-upload-list__item:first-child {
  702. margin-top: 10px; }
  703. .el-upload-list__item .el-icon-upload-success {
  704. color: #92D9FF; }
  705. .el-upload-list__item .el-icon-close {
  706. display: none;
  707. position: absolute;
  708. top: 5px;
  709. right: 5px;
  710. cursor: pointer;
  711. opacity: .75;
  712. color: #FFFFFF; }
  713. .el-upload-list__item .el-icon-close:hover {
  714. opacity: 1; }
  715. .el-upload-list__item .el-icon-close-tip {
  716. display: none;
  717. position: absolute;
  718. top: 5px;
  719. right: 5px;
  720. font-size: 12px;
  721. cursor: pointer;
  722. opacity: 1;
  723. color: #92D9FF; }
  724. .el-upload-list__item:hover {
  725. background-color: rgba(255, 255, 255, 0.15); }
  726. .el-upload-list__item:hover .el-icon-close {
  727. display: inline-block; }
  728. .el-upload-list__item:hover .el-progress__text {
  729. display: none; }
  730. .el-upload-list__item.is-success .el-upload-list__item-status-label {
  731. display: block; }
  732. .el-upload-list__item.is-success .el-upload-list__item-name:hover, .el-upload-list__item.is-success .el-upload-list__item-name:focus {
  733. color: #92D9FF;
  734. cursor: pointer; }
  735. .el-upload-list__item.is-success:focus:not(:hover) {
  736. /* 键盘focus */ }
  737. .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
  738. display: inline-block; }
  739. .el-upload-list__item.is-success:not(.focusing):focus, .el-upload-list__item.is-success:active {
  740. /* click时 */
  741. outline-width: 0; }
  742. .el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip, .el-upload-list__item.is-success:active .el-icon-close-tip {
  743. display: none; }
  744. .el-upload-list__item.is-success:hover .el-upload-list__item-status-label, .el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
  745. display: none; }
  746. [data-theme="blue"] .el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label {
  747. display: block; }
  748. .el-upload-list__item-name {
  749. color: #FFFFFF;
  750. display: block;
  751. margin-right: 40px;
  752. overflow: hidden;
  753. padding-left: 4px;
  754. text-overflow: ellipsis;
  755. -webkit-transition: color .3s;
  756. transition: color .3s;
  757. white-space: nowrap; }
  758. .el-upload-list__item-name [class^="el-icon"] {
  759. height: 100%;
  760. margin-right: 7px;
  761. color: #909399;
  762. line-height: inherit; }
  763. .el-upload-list__item-status-label {
  764. position: absolute;
  765. right: 5px;
  766. top: 0;
  767. line-height: inherit;
  768. display: none; }
  769. .el-upload-list__item-delete {
  770. position: absolute;
  771. right: 10px;
  772. top: 0;
  773. font-size: 12px;
  774. color: #FFFFFF;
  775. display: none; }
  776. .el-upload-list__item-delete:hover {
  777. color: #92D9FF; }
  778. [data-theme="blue"] .el-upload-list--picture-card {
  779. margin: 0;
  780. display: inline;
  781. vertical-align: top; }
  782. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item {
  783. overflow: hidden;
  784. border: 1px solid #c0ccda;
  785. border-radius: 6px;
  786. -webkit-box-sizing: border-box;
  787. box-sizing: border-box;
  788. width: 148px;
  789. height: 148px;
  790. margin: 0 8px 8px 0;
  791. display: inline-block; }
  792. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item .el-icon-check,
  793. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  794. color: #000000; }
  795. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
  796. display: none; }
  797. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label {
  798. display: none; }
  799. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  800. display: block; }
  801. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-name {
  802. display: none; }
  803. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  804. width: 100%;
  805. height: 100%; }
  806. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-status-label {
  807. position: absolute;
  808. right: -15px;
  809. top: -6px;
  810. width: 40px;
  811. height: 24px;
  812. background: #13ce66;
  813. text-align: center;
  814. -webkit-transform: rotate(45deg);
  815. transform: rotate(45deg);
  816. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  817. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  818. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-status-label i {
  819. font-size: 12px;
  820. margin-top: 11px;
  821. -webkit-transform: rotate(-45deg);
  822. transform: rotate(-45deg); }
  823. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions {
  824. position: absolute;
  825. width: 100%;
  826. height: 100%;
  827. left: 0;
  828. top: 0;
  829. cursor: default;
  830. text-align: center;
  831. color: #fff;
  832. opacity: 0;
  833. font-size: 20px;
  834. background-color: rgba(0, 0, 0, 0.5);
  835. -webkit-transition: opacity .3s;
  836. transition: opacity .3s; }
  837. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions::after {
  838. display: inline-block;
  839. content: "";
  840. height: 100%;
  841. vertical-align: middle; }
  842. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions span {
  843. display: none;
  844. cursor: pointer; }
  845. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  846. margin-left: 15px; }
  847. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete {
  848. position: static;
  849. font-size: inherit;
  850. color: inherit; }
  851. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  852. opacity: 1; }
  853. [data-theme="blue"] .el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  854. display: inline-block; }
  855. [data-theme="blue"] .el-upload-list--picture-card .el-progress {
  856. top: 50%;
  857. left: 50%;
  858. -webkit-transform: translate(-50%, -50%);
  859. transform: translate(-50%, -50%);
  860. bottom: auto;
  861. width: 126px; }
  862. [data-theme="blue"] .el-upload-list--picture-card .el-progress .el-progress__text {
  863. top: 50%; }
  864. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item {
  865. overflow: hidden;
  866. z-index: 0;
  867. background-color: #fff;
  868. border: 1px solid #c0ccda;
  869. border-radius: 6px;
  870. -webkit-box-sizing: border-box;
  871. box-sizing: border-box;
  872. margin-top: 10px;
  873. padding: 10px 10px 10px 90px;
  874. height: 92px; }
  875. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item .el-icon-check,
  876. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  877. color: #000000; }
  878. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label {
  879. background: transparent;
  880. -webkit-box-shadow: none;
  881. box-shadow: none;
  882. top: -2px;
  883. right: -12px; }
  884. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  885. display: block; }
  886. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
  887. line-height: 70px;
  888. margin-top: 0; }
  889. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i {
  890. display: none; }
  891. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item-thumbnail {
  892. vertical-align: middle;
  893. display: inline-block;
  894. width: 70px;
  895. height: 70px;
  896. float: left;
  897. position: relative;
  898. z-index: 1;
  899. margin-left: -80px;
  900. background-color: #000000; }
  901. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item-name {
  902. display: block;
  903. margin-top: 20px; }
  904. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item-name i {
  905. font-size: 70px;
  906. line-height: 1;
  907. position: absolute;
  908. left: 9px;
  909. top: 10px; }
  910. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item-status-label {
  911. position: absolute;
  912. right: -17px;
  913. top: -7px;
  914. width: 46px;
  915. height: 26px;
  916. background: #13ce66;
  917. text-align: center;
  918. -webkit-transform: rotate(45deg);
  919. transform: rotate(45deg);
  920. -webkit-box-shadow: 0 1px 1px #ccc;
  921. box-shadow: 0 1px 1px #ccc; }
  922. [data-theme="blue"] .el-upload-list--picture .el-upload-list__item-status-label i {
  923. font-size: 12px;
  924. margin-top: 12px;
  925. -webkit-transform: rotate(-45deg);
  926. transform: rotate(-45deg); }
  927. [data-theme="blue"] .el-upload-list--picture .el-progress {
  928. position: relative;
  929. top: -7px; }
  930. [data-theme="blue"] .el-upload-cover {
  931. position: absolute;
  932. left: 0;
  933. top: 0;
  934. width: 100%;
  935. height: 100%;
  936. overflow: hidden;
  937. z-index: 10;
  938. cursor: default; }
  939. [data-theme="blue"] .el-upload-cover::after {
  940. display: inline-block;
  941. content: "";
  942. height: 100%;
  943. vertical-align: middle; }
  944. [data-theme="blue"] .el-upload-cover img {
  945. display: block;
  946. width: 100%;
  947. height: 100%; }
  948. .el-upload-cover__label {
  949. position: absolute;
  950. right: -15px;
  951. top: -6px;
  952. width: 40px;
  953. height: 24px;
  954. background: #13ce66;
  955. text-align: center;
  956. -webkit-transform: rotate(45deg);
  957. transform: rotate(45deg);
  958. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  959. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  960. .el-upload-cover__label i {
  961. font-size: 12px;
  962. margin-top: 11px;
  963. -webkit-transform: rotate(-45deg);
  964. transform: rotate(-45deg);
  965. color: #fff; }
  966. .el-upload-cover__progress {
  967. display: inline-block;
  968. vertical-align: middle;
  969. position: static;
  970. width: 243px; }
  971. .el-upload-cover__progress + .el-upload__inner {
  972. opacity: 0; }
  973. .el-upload-cover__content {
  974. position: absolute;
  975. top: 0;
  976. left: 0;
  977. width: 100%;
  978. height: 100%; }
  979. .el-upload-cover__interact {
  980. position: absolute;
  981. bottom: 0;
  982. left: 0;
  983. width: 100%;
  984. height: 100%;
  985. background-color: rgba(0, 0, 0, 0.72);
  986. text-align: center; }
  987. .el-upload-cover__interact .btn {
  988. display: inline-block;
  989. color: #000000;
  990. font-size: 14px;
  991. cursor: pointer;
  992. vertical-align: middle;
  993. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  994. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  995. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  996. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  997. margin-top: 60px; }
  998. .el-upload-cover__interact .btn i {
  999. margin-top: 0; }
  1000. .el-upload-cover__interact .btn span {
  1001. opacity: 0;
  1002. -webkit-transition: opacity .15s linear;
  1003. transition: opacity .15s linear; }
  1004. .el-upload-cover__interact .btn:not(:first-child) {
  1005. margin-left: 35px; }
  1006. .el-upload-cover__interact .btn:hover {
  1007. -webkit-transform: translateY(-13px);
  1008. transform: translateY(-13px); }
  1009. .el-upload-cover__interact .btn:hover span {
  1010. opacity: 1; }
  1011. .el-upload-cover__interact .btn i {
  1012. color: #000000;
  1013. display: block;
  1014. font-size: 24px;
  1015. line-height: inherit;
  1016. margin: 0 auto 5px; }
  1017. .el-upload-cover__title {
  1018. position: absolute;
  1019. bottom: 0;
  1020. left: 0;
  1021. background-color: #000000;
  1022. height: 36px;
  1023. width: 100%;
  1024. overflow: hidden;
  1025. text-overflow: ellipsis;
  1026. white-space: nowrap;
  1027. font-weight: normal;
  1028. text-align: left;
  1029. padding: 0 10px;
  1030. margin: 0;
  1031. line-height: 36px;
  1032. font-size: 14px;
  1033. color: #000000; }
  1034. [data-theme="blue"] .el-upload-cover + .el-upload__inner {
  1035. opacity: 0;
  1036. position: relative;
  1037. z-index: 1; }
  1038. /* BEM support Func
  1039. -------------------------- */
  1040. /* Element Chalk Variables */
  1041. /* Transition
  1042. -------------------------- */
  1043. /* Color
  1044. -------------------------- */
  1045. /* 53a8ff */
  1046. /* 66b1ff */
  1047. /* 79bbff */
  1048. /* 8cc5ff */
  1049. /* a0cfff */
  1050. /* b3d8ff */
  1051. /* c6e2ff */
  1052. /* d9ecff */
  1053. /* ecf5ff */
  1054. /* Link
  1055. -------------------------- */
  1056. /* Border
  1057. -------------------------- */
  1058. /* Fill
  1059. -------------------------- */
  1060. /* Typography
  1061. -------------------------- */
  1062. /* Size
  1063. -------------------------- */
  1064. /* z-index
  1065. -------------------------- */
  1066. /* Disable base
  1067. -------------------------- */
  1068. /* Icon
  1069. -------------------------- */
  1070. /* Checkbox
  1071. -------------------------- */
  1072. /* Radio
  1073. -------------------------- */
  1074. /* Select
  1075. -------------------------- */
  1076. /* Alert
  1077. -------------------------- */
  1078. /* MessageBox
  1079. -------------------------- */
  1080. /* Message
  1081. -------------------------- */
  1082. /* Notification
  1083. -------------------------- */
  1084. /* Input
  1085. -------------------------- */
  1086. /* Cascader
  1087. -------------------------- */
  1088. /* Group
  1089. -------------------------- */
  1090. /* Tab
  1091. -------------------------- */
  1092. /* Button
  1093. -------------------------- */
  1094. /* cascader
  1095. -------------------------- */
  1096. /* Switch
  1097. -------------------------- */
  1098. /* Dialog
  1099. -------------------------- */
  1100. /* Table
  1101. -------------------------- */
  1102. /* Pagination
  1103. -------------------------- */
  1104. /* Popup
  1105. -------------------------- */
  1106. /* Popover
  1107. -------------------------- */
  1108. /* Tooltip
  1109. -------------------------- */
  1110. /* Tag
  1111. -------------------------- */
  1112. /* Tree
  1113. -------------------------- */
  1114. /* Dropdown
  1115. -------------------------- */
  1116. /* Badge
  1117. -------------------------- */
  1118. /* Card
  1119. --------------------------*/
  1120. /* Slider
  1121. --------------------------*/
  1122. /* Steps
  1123. --------------------------*/
  1124. /* Menu
  1125. --------------------------*/
  1126. /* Rate
  1127. --------------------------*/
  1128. /* DatePicker
  1129. --------------------------*/
  1130. /* Loading
  1131. --------------------------*/
  1132. /* Scrollbar
  1133. --------------------------*/
  1134. /* Carousel
  1135. --------------------------*/
  1136. /* Collapse
  1137. --------------------------*/
  1138. /* Transfer
  1139. --------------------------*/
  1140. /* Header
  1141. --------------------------*/
  1142. /* Footer
  1143. --------------------------*/
  1144. /* Main
  1145. --------------------------*/
  1146. /* Timeline
  1147. --------------------------*/
  1148. /* Backtop
  1149. --------------------------*/
  1150. /* Link
  1151. --------------------------*/
  1152. /* Calendar
  1153. --------------------------*/
  1154. /* Form
  1155. -------------------------- */
  1156. /* Avatar
  1157. --------------------------*/
  1158. /* Break-point
  1159. --------------------------*/
  1160. /* Break-points
  1161. -------------------------- */
  1162. /* Scrollbar
  1163. -------------------------- */
  1164. /* Placeholder
  1165. -------------------------- */
  1166. /* BEM
  1167. -------------------------- */
  1168. /* BEM support Func
  1169. -------------------------- */
  1170. /* Element Chalk Variables */
  1171. /* Transition
  1172. -------------------------- */
  1173. /* Color
  1174. -------------------------- */
  1175. /* 53a8ff */
  1176. /* 66b1ff */
  1177. /* 79bbff */
  1178. /* 8cc5ff */
  1179. /* a0cfff */
  1180. /* b3d8ff */
  1181. /* c6e2ff */
  1182. /* d9ecff */
  1183. /* ecf5ff */
  1184. /* Link
  1185. -------------------------- */
  1186. /* Border
  1187. -------------------------- */
  1188. /* Fill
  1189. -------------------------- */
  1190. /* Typography
  1191. -------------------------- */
  1192. /* Size
  1193. -------------------------- */
  1194. /* z-index
  1195. -------------------------- */
  1196. /* Disable base
  1197. -------------------------- */
  1198. /* Icon
  1199. -------------------------- */
  1200. /* Checkbox
  1201. -------------------------- */
  1202. /* Radio
  1203. -------------------------- */
  1204. /* Select
  1205. -------------------------- */
  1206. /* Alert
  1207. -------------------------- */
  1208. /* MessageBox
  1209. -------------------------- */
  1210. /* Message
  1211. -------------------------- */
  1212. /* Notification
  1213. -------------------------- */
  1214. /* Input
  1215. -------------------------- */
  1216. /* Cascader
  1217. -------------------------- */
  1218. /* Group
  1219. -------------------------- */
  1220. /* Tab
  1221. -------------------------- */
  1222. /* Button
  1223. -------------------------- */
  1224. /* cascader
  1225. -------------------------- */
  1226. /* Switch
  1227. -------------------------- */
  1228. /* Dialog
  1229. -------------------------- */
  1230. /* Table
  1231. -------------------------- */
  1232. /* Pagination
  1233. -------------------------- */
  1234. /* Popup
  1235. -------------------------- */
  1236. /* Popover
  1237. -------------------------- */
  1238. /* Tooltip
  1239. -------------------------- */
  1240. /* Tag
  1241. -------------------------- */
  1242. /* Tree
  1243. -------------------------- */
  1244. /* Dropdown
  1245. -------------------------- */
  1246. /* Badge
  1247. -------------------------- */
  1248. /* Card
  1249. --------------------------*/
  1250. /* Slider
  1251. --------------------------*/
  1252. /* Steps
  1253. --------------------------*/
  1254. /* Menu
  1255. --------------------------*/
  1256. /* Rate
  1257. --------------------------*/
  1258. /* DatePicker
  1259. --------------------------*/
  1260. /* Loading
  1261. --------------------------*/
  1262. /* Scrollbar
  1263. --------------------------*/
  1264. /* Carousel
  1265. --------------------------*/
  1266. /* Collapse
  1267. --------------------------*/
  1268. /* Transfer
  1269. --------------------------*/
  1270. /* Header
  1271. --------------------------*/
  1272. /* Footer
  1273. --------------------------*/
  1274. /* Main
  1275. --------------------------*/
  1276. /* Timeline
  1277. --------------------------*/
  1278. /* Backtop
  1279. --------------------------*/
  1280. /* Link
  1281. --------------------------*/
  1282. /* Calendar
  1283. --------------------------*/
  1284. /* Form
  1285. -------------------------- */
  1286. /* Avatar
  1287. --------------------------*/
  1288. /* Break-point
  1289. --------------------------*/
  1290. /* Break-points
  1291. -------------------------- */
  1292. /* Scrollbar
  1293. -------------------------- */
  1294. /* Placeholder
  1295. -------------------------- */
  1296. /* BEM
  1297. -------------------------- */
  1298. /* Element Chalk Variables */
  1299. /* Transition
  1300. -------------------------- */
  1301. /* Color
  1302. -------------------------- */
  1303. /* 53a8ff */
  1304. /* 66b1ff */
  1305. /* 79bbff */
  1306. /* 8cc5ff */
  1307. /* a0cfff */
  1308. /* b3d8ff */
  1309. /* c6e2ff */
  1310. /* d9ecff */
  1311. /* ecf5ff */
  1312. /* Link
  1313. -------------------------- */
  1314. /* Border
  1315. -------------------------- */
  1316. /* Fill
  1317. -------------------------- */
  1318. /* Typography
  1319. -------------------------- */
  1320. /* Size
  1321. -------------------------- */
  1322. /* z-index
  1323. -------------------------- */
  1324. /* Disable base
  1325. -------------------------- */
  1326. /* Icon
  1327. -------------------------- */
  1328. /* Checkbox
  1329. -------------------------- */
  1330. /* Radio
  1331. -------------------------- */
  1332. /* Select
  1333. -------------------------- */
  1334. /* Alert
  1335. -------------------------- */
  1336. /* MessageBox
  1337. -------------------------- */
  1338. /* Message
  1339. -------------------------- */
  1340. /* Notification
  1341. -------------------------- */
  1342. /* Input
  1343. -------------------------- */
  1344. /* Cascader
  1345. -------------------------- */
  1346. /* Group
  1347. -------------------------- */
  1348. /* Tab
  1349. -------------------------- */
  1350. /* Button
  1351. -------------------------- */
  1352. /* cascader
  1353. -------------------------- */
  1354. /* Switch
  1355. -------------------------- */
  1356. /* Dialog
  1357. -------------------------- */
  1358. /* Table
  1359. -------------------------- */
  1360. /* Pagination
  1361. -------------------------- */
  1362. /* Popup
  1363. -------------------------- */
  1364. /* Popover
  1365. -------------------------- */
  1366. /* Tooltip
  1367. -------------------------- */
  1368. /* Tag
  1369. -------------------------- */
  1370. /* Tree
  1371. -------------------------- */
  1372. /* Dropdown
  1373. -------------------------- */
  1374. /* Badge
  1375. -------------------------- */
  1376. /* Card
  1377. --------------------------*/
  1378. /* Slider
  1379. --------------------------*/
  1380. /* Steps
  1381. --------------------------*/
  1382. /* Menu
  1383. --------------------------*/
  1384. /* Rate
  1385. --------------------------*/
  1386. /* DatePicker
  1387. --------------------------*/
  1388. /* Loading
  1389. --------------------------*/
  1390. /* Scrollbar
  1391. --------------------------*/
  1392. /* Carousel
  1393. --------------------------*/
  1394. /* Collapse
  1395. --------------------------*/
  1396. /* Transfer
  1397. --------------------------*/
  1398. /* Header
  1399. --------------------------*/
  1400. /* Footer
  1401. --------------------------*/
  1402. /* Main
  1403. --------------------------*/
  1404. /* Timeline
  1405. --------------------------*/
  1406. /* Backtop
  1407. --------------------------*/
  1408. /* Link
  1409. --------------------------*/
  1410. /* Calendar
  1411. --------------------------*/
  1412. /* Form
  1413. -------------------------- */
  1414. /* Avatar
  1415. --------------------------*/
  1416. /* Break-point
  1417. --------------------------*/
  1418. .el-progress {
  1419. position: relative;
  1420. line-height: 1; }
  1421. .el-progress__text {
  1422. font-size: 14px;
  1423. color: #FFFFFF;
  1424. display: inline-block;
  1425. vertical-align: middle;
  1426. margin-left: 10px;
  1427. line-height: 1; }
  1428. .el-progress__text i {
  1429. vertical-align: middle;
  1430. display: block; }
  1431. .el-progress--circle, .el-progress--dashboard {
  1432. display: inline-block; }
  1433. .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text {
  1434. position: absolute;
  1435. top: 50%;
  1436. left: 0;
  1437. width: 100%;
  1438. text-align: center;
  1439. margin: 0;
  1440. -webkit-transform: translate(0, -50%);
  1441. transform: translate(0, -50%); }
  1442. .el-progress--circle .el-progress__text i, .el-progress--dashboard .el-progress__text i {
  1443. vertical-align: middle;
  1444. display: inline-block; }
  1445. .el-progress--without-text .el-progress__text {
  1446. display: none; }
  1447. .el-progress--without-text .el-progress-bar {
  1448. padding-right: 0;
  1449. margin-right: 0;
  1450. display: block; }
  1451. .el-progress--text-inside .el-progress-bar {
  1452. padding-right: 0;
  1453. margin-right: 0; }
  1454. .el-progress.is-success .el-progress-bar__inner {
  1455. background-color: #92D9FF; }
  1456. .el-progress.is-success .el-progress__text {
  1457. color: #92D9FF; }
  1458. .el-progress.is-warning .el-progress-bar__inner {
  1459. background-color: #FFCE6D; }
  1460. .el-progress.is-warning .el-progress__text {
  1461. color: #FFCE6D; }
  1462. .el-progress.is-exception .el-progress-bar__inner {
  1463. background-color: #FF6D6D; }
  1464. .el-progress.is-exception .el-progress__text {
  1465. color: #FF6D6D; }
  1466. .el-progress-bar {
  1467. padding-right: 50px;
  1468. display: inline-block;
  1469. vertical-align: middle;
  1470. width: 100%;
  1471. margin-right: -55px;
  1472. -webkit-box-sizing: border-box;
  1473. box-sizing: border-box; }
  1474. .el-progress-bar__outer {
  1475. height: 6px;
  1476. border-radius: 100px;
  1477. background-color: #EBEEF5;
  1478. overflow: hidden;
  1479. position: relative;
  1480. vertical-align: middle; }
  1481. .el-progress-bar__inner {
  1482. position: absolute;
  1483. left: 0;
  1484. top: 0;
  1485. height: 100%;
  1486. background-color: #92D9FF;
  1487. text-align: right;
  1488. border-radius: 100px;
  1489. line-height: 1;
  1490. white-space: nowrap;
  1491. -webkit-transition: width 0.6s ease;
  1492. transition: width 0.6s ease; }
  1493. .el-progress-bar__inner::after {
  1494. display: inline-block;
  1495. content: "";
  1496. height: 100%;
  1497. vertical-align: middle; }
  1498. .el-progress-bar__innerText {
  1499. display: inline-block;
  1500. vertical-align: middle;
  1501. color: #000000;
  1502. font-size: 12px;
  1503. margin: 0 5px; }
  1504. @keyframes progress {
  1505. 0% {
  1506. background-position: 0 0; }
  1507. 100% {
  1508. background-position: 32px 0; } }
  1509. /* Element Chalk Variables */
  1510. /* Transition
  1511. -------------------------- */
  1512. /* Color
  1513. -------------------------- */
  1514. /* 53a8ff */
  1515. /* 66b1ff */
  1516. /* 79bbff */
  1517. /* 8cc5ff */
  1518. /* a0cfff */
  1519. /* b3d8ff */
  1520. /* c6e2ff */
  1521. /* d9ecff */
  1522. /* ecf5ff */
  1523. /* Link
  1524. -------------------------- */
  1525. /* Border
  1526. -------------------------- */
  1527. /* Fill
  1528. -------------------------- */
  1529. /* Typography
  1530. -------------------------- */
  1531. /* Size
  1532. -------------------------- */
  1533. /* z-index
  1534. -------------------------- */
  1535. /* Disable base
  1536. -------------------------- */
  1537. /* Icon
  1538. -------------------------- */
  1539. /* Checkbox
  1540. -------------------------- */
  1541. /* Radio
  1542. -------------------------- */
  1543. /* Select
  1544. -------------------------- */
  1545. /* Alert
  1546. -------------------------- */
  1547. /* MessageBox
  1548. -------------------------- */
  1549. /* Message
  1550. -------------------------- */
  1551. /* Notification
  1552. -------------------------- */
  1553. /* Input
  1554. -------------------------- */
  1555. /* Cascader
  1556. -------------------------- */
  1557. /* Group
  1558. -------------------------- */
  1559. /* Tab
  1560. -------------------------- */
  1561. /* Button
  1562. -------------------------- */
  1563. /* cascader
  1564. -------------------------- */
  1565. /* Switch
  1566. -------------------------- */
  1567. /* Dialog
  1568. -------------------------- */
  1569. /* Table
  1570. -------------------------- */
  1571. /* Pagination
  1572. -------------------------- */
  1573. /* Popup
  1574. -------------------------- */
  1575. /* Popover
  1576. -------------------------- */
  1577. /* Tooltip
  1578. -------------------------- */
  1579. /* Tag
  1580. -------------------------- */
  1581. /* Tree
  1582. -------------------------- */
  1583. /* Dropdown
  1584. -------------------------- */
  1585. /* Badge
  1586. -------------------------- */
  1587. /* Card
  1588. --------------------------*/
  1589. /* Slider
  1590. --------------------------*/
  1591. /* Steps
  1592. --------------------------*/
  1593. /* Menu
  1594. --------------------------*/
  1595. /* Rate
  1596. --------------------------*/
  1597. /* DatePicker
  1598. --------------------------*/
  1599. /* Loading
  1600. --------------------------*/
  1601. /* Scrollbar
  1602. --------------------------*/
  1603. /* Carousel
  1604. --------------------------*/
  1605. /* Collapse
  1606. --------------------------*/
  1607. /* Transfer
  1608. --------------------------*/
  1609. /* Header
  1610. --------------------------*/
  1611. /* Footer
  1612. --------------------------*/
  1613. /* Main
  1614. --------------------------*/
  1615. /* Timeline
  1616. --------------------------*/
  1617. /* Backtop
  1618. --------------------------*/
  1619. /* Link
  1620. --------------------------*/
  1621. /* Calendar
  1622. --------------------------*/
  1623. /* Form
  1624. -------------------------- */
  1625. /* Avatar
  1626. --------------------------*/
  1627. /* Break-point
  1628. --------------------------*/
  1629. .el-upload {
  1630. display: inline-block;
  1631. text-align: center;
  1632. cursor: pointer;
  1633. outline: none;
  1634. /* 照片墙模式 */ }
  1635. .el-upload__input {
  1636. display: none; }
  1637. .el-upload__tip {
  1638. font-size: 12px;
  1639. color: #FFFFFF;
  1640. margin-top: 7px; }
  1641. .el-upload iframe {
  1642. position: absolute;
  1643. z-index: -1;
  1644. top: 0;
  1645. left: 0;
  1646. opacity: 0;
  1647. filter: alpha(opacity=0); }
  1648. .el-upload--picture-card {
  1649. background-color: #fbfdff;
  1650. border: 1px dashed #c0ccda;
  1651. border-radius: 6px;
  1652. -webkit-box-sizing: border-box;
  1653. box-sizing: border-box;
  1654. width: 148px;
  1655. height: 148px;
  1656. cursor: pointer;
  1657. line-height: 146px;
  1658. vertical-align: top; }
  1659. .el-upload--picture-card i {
  1660. font-size: 28px;
  1661. color: #8c939d; }
  1662. .el-upload--picture-card:hover {
  1663. border-color: #92D9FF;
  1664. color: #92D9FF; }
  1665. .el-upload:focus {
  1666. border-color: #92D9FF;
  1667. color: #92D9FF; }
  1668. .el-upload:focus .el-upload-dragger {
  1669. border-color: #92D9FF; }
  1670. .el-upload-dragger {
  1671. border: 1px dashed #d9d9d9;
  1672. border-radius: 6px;
  1673. -webkit-box-sizing: border-box;
  1674. box-sizing: border-box;
  1675. width: 360px;
  1676. height: 180px;
  1677. text-align: center;
  1678. cursor: pointer;
  1679. position: relative;
  1680. overflow: hidden; }
  1681. .el-upload-dragger .el-icon-upload {
  1682. font-size: 67px;
  1683. color: rgba(255, 255, 255, 0.5);
  1684. margin: 40px 0 16px;
  1685. line-height: 50px; }
  1686. .el-upload-dragger + .el-upload__tip {
  1687. text-align: center; }
  1688. .el-upload-dragger ~ .el-upload__files {
  1689. border-top: 1px solid #DCDFE6;
  1690. margin-top: 7px;
  1691. padding-top: 5px; }
  1692. .el-upload-dragger .el-upload__text {
  1693. color: #FFFFFF;
  1694. font-size: 14px;
  1695. text-align: center; }
  1696. .el-upload-dragger .el-upload__text em {
  1697. color: #92D9FF;
  1698. font-style: normal; }
  1699. .el-upload-dragger:hover {
  1700. border-color: #92D9FF; }
  1701. .el-upload-dragger.is-dragover {
  1702. background-color: rgba(32, 159, 255, 0.06);
  1703. border: 2px dashed #92D9FF; }
  1704. .el-upload-list {
  1705. margin: 0;
  1706. padding: 0;
  1707. list-style: none; }
  1708. .el-upload-list__item {
  1709. -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1710. transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1711. font-size: 14px;
  1712. color: #FFFFFF;
  1713. line-height: 1.8;
  1714. margin-top: 5px;
  1715. position: relative;
  1716. -webkit-box-sizing: border-box;
  1717. box-sizing: border-box;
  1718. border-radius: 4px;
  1719. width: 100%; }
  1720. .el-upload-list__item .el-progress {
  1721. position: absolute;
  1722. top: 20px;
  1723. width: 100%; }
  1724. .el-upload-list__item .el-progress__text {
  1725. position: absolute;
  1726. right: 0;
  1727. top: -13px; }
  1728. .el-upload-list__item .el-progress-bar {
  1729. margin-right: 0;
  1730. padding-right: 0; }
  1731. .el-upload-list__item:first-child {
  1732. margin-top: 10px; }
  1733. .el-upload-list__item .el-icon-upload-success {
  1734. color: #92D9FF; }
  1735. .el-upload-list__item .el-icon-close {
  1736. display: none;
  1737. position: absolute;
  1738. top: 5px;
  1739. right: 5px;
  1740. cursor: pointer;
  1741. opacity: .75;
  1742. color: #FFFFFF; }
  1743. .el-upload-list__item .el-icon-close:hover {
  1744. opacity: 1; }
  1745. .el-upload-list__item .el-icon-close-tip {
  1746. display: none;
  1747. position: absolute;
  1748. top: 5px;
  1749. right: 5px;
  1750. font-size: 12px;
  1751. cursor: pointer;
  1752. opacity: 1;
  1753. color: #92D9FF; }
  1754. .el-upload-list__item:hover {
  1755. background-color: rgba(255, 255, 255, 0.15); }
  1756. .el-upload-list__item:hover .el-icon-close {
  1757. display: inline-block; }
  1758. .el-upload-list__item:hover .el-progress__text {
  1759. display: none; }
  1760. .el-upload-list__item.is-success .el-upload-list__item-status-label {
  1761. display: block; }
  1762. .el-upload-list__item.is-success .el-upload-list__item-name:hover, .el-upload-list__item.is-success .el-upload-list__item-name:focus {
  1763. color: #92D9FF;
  1764. cursor: pointer; }
  1765. .el-upload-list__item.is-success:focus:not(:hover) {
  1766. /* 键盘focus */ }
  1767. .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
  1768. display: inline-block; }
  1769. .el-upload-list__item.is-success:not(.focusing):focus, .el-upload-list__item.is-success:active {
  1770. /* click时 */
  1771. outline-width: 0; }
  1772. .el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip, .el-upload-list__item.is-success:active .el-icon-close-tip {
  1773. display: none; }
  1774. .el-upload-list__item.is-success:hover .el-upload-list__item-status-label, .el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
  1775. display: none; }
  1776. .el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label {
  1777. display: block; }
  1778. .el-upload-list__item-name {
  1779. color: #FFFFFF;
  1780. display: block;
  1781. margin-right: 40px;
  1782. overflow: hidden;
  1783. padding-left: 4px;
  1784. text-overflow: ellipsis;
  1785. -webkit-transition: color .3s;
  1786. transition: color .3s;
  1787. white-space: nowrap; }
  1788. .el-upload-list__item-name [class^="el-icon"] {
  1789. height: 100%;
  1790. margin-right: 7px;
  1791. color: #909399;
  1792. line-height: inherit; }
  1793. .el-upload-list__item-status-label {
  1794. position: absolute;
  1795. right: 5px;
  1796. top: 0;
  1797. line-height: inherit;
  1798. display: none; }
  1799. .el-upload-list__item-delete {
  1800. position: absolute;
  1801. right: 10px;
  1802. top: 0;
  1803. font-size: 12px;
  1804. color: #FFFFFF;
  1805. display: none; }
  1806. .el-upload-list__item-delete:hover {
  1807. color: #92D9FF; }
  1808. .el-upload-list--picture-card {
  1809. margin: 0;
  1810. display: inline;
  1811. vertical-align: top; }
  1812. .el-upload-list--picture-card .el-upload-list__item {
  1813. overflow: hidden;
  1814. border: 1px solid #c0ccda;
  1815. border-radius: 6px;
  1816. -webkit-box-sizing: border-box;
  1817. box-sizing: border-box;
  1818. width: 148px;
  1819. height: 148px;
  1820. margin: 0 8px 8px 0;
  1821. display: inline-block; }
  1822. .el-upload-list--picture-card .el-upload-list__item .el-icon-check,
  1823. .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  1824. color: #000000; }
  1825. .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
  1826. display: none; }
  1827. .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label {
  1828. display: none; }
  1829. .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  1830. display: block; }
  1831. .el-upload-list--picture-card .el-upload-list__item-name {
  1832. display: none; }
  1833. .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  1834. width: 100%;
  1835. height: 100%; }
  1836. .el-upload-list--picture-card .el-upload-list__item-status-label {
  1837. position: absolute;
  1838. right: -15px;
  1839. top: -6px;
  1840. width: 40px;
  1841. height: 24px;
  1842. background: #13ce66;
  1843. text-align: center;
  1844. -webkit-transform: rotate(45deg);
  1845. transform: rotate(45deg);
  1846. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  1847. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  1848. .el-upload-list--picture-card .el-upload-list__item-status-label i {
  1849. font-size: 12px;
  1850. margin-top: 11px;
  1851. -webkit-transform: rotate(-45deg);
  1852. transform: rotate(-45deg); }
  1853. .el-upload-list--picture-card .el-upload-list__item-actions {
  1854. position: absolute;
  1855. width: 100%;
  1856. height: 100%;
  1857. left: 0;
  1858. top: 0;
  1859. cursor: default;
  1860. text-align: center;
  1861. color: #fff;
  1862. opacity: 0;
  1863. font-size: 20px;
  1864. background-color: rgba(0, 0, 0, 0.5);
  1865. -webkit-transition: opacity .3s;
  1866. transition: opacity .3s; }
  1867. .el-upload-list--picture-card .el-upload-list__item-actions::after {
  1868. display: inline-block;
  1869. content: "";
  1870. height: 100%;
  1871. vertical-align: middle; }
  1872. .el-upload-list--picture-card .el-upload-list__item-actions span {
  1873. display: none;
  1874. cursor: pointer; }
  1875. .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  1876. margin-left: 15px; }
  1877. .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete {
  1878. position: static;
  1879. font-size: inherit;
  1880. color: inherit; }
  1881. .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  1882. opacity: 1; }
  1883. .el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  1884. display: inline-block; }
  1885. .el-upload-list--picture-card .el-progress {
  1886. top: 50%;
  1887. left: 50%;
  1888. -webkit-transform: translate(-50%, -50%);
  1889. transform: translate(-50%, -50%);
  1890. bottom: auto;
  1891. width: 126px; }
  1892. .el-upload-list--picture-card .el-progress .el-progress__text {
  1893. top: 50%; }
  1894. .el-upload-list--picture .el-upload-list__item {
  1895. overflow: hidden;
  1896. z-index: 0;
  1897. background-color: #fff;
  1898. border: 1px solid #c0ccda;
  1899. border-radius: 6px;
  1900. -webkit-box-sizing: border-box;
  1901. box-sizing: border-box;
  1902. margin-top: 10px;
  1903. padding: 10px 10px 10px 90px;
  1904. height: 92px; }
  1905. .el-upload-list--picture .el-upload-list__item .el-icon-check,
  1906. .el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  1907. color: #000000; }
  1908. .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label {
  1909. background: transparent;
  1910. -webkit-box-shadow: none;
  1911. box-shadow: none;
  1912. top: -2px;
  1913. right: -12px; }
  1914. .el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  1915. display: block; }
  1916. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
  1917. line-height: 70px;
  1918. margin-top: 0; }
  1919. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i {
  1920. display: none; }
  1921. .el-upload-list--picture .el-upload-list__item-thumbnail {
  1922. vertical-align: middle;
  1923. display: inline-block;
  1924. width: 70px;
  1925. height: 70px;
  1926. float: left;
  1927. position: relative;
  1928. z-index: 1;
  1929. margin-left: -80px;
  1930. background-color: #000000; }
  1931. .el-upload-list--picture .el-upload-list__item-name {
  1932. display: block;
  1933. margin-top: 20px; }
  1934. .el-upload-list--picture .el-upload-list__item-name i {
  1935. font-size: 70px;
  1936. line-height: 1;
  1937. position: absolute;
  1938. left: 9px;
  1939. top: 10px; }
  1940. .el-upload-list--picture .el-upload-list__item-status-label {
  1941. position: absolute;
  1942. right: -17px;
  1943. top: -7px;
  1944. width: 46px;
  1945. height: 26px;
  1946. background: #13ce66;
  1947. text-align: center;
  1948. -webkit-transform: rotate(45deg);
  1949. transform: rotate(45deg);
  1950. -webkit-box-shadow: 0 1px 1px #ccc;
  1951. box-shadow: 0 1px 1px #ccc; }
  1952. .el-upload-list--picture .el-upload-list__item-status-label i {
  1953. font-size: 12px;
  1954. margin-top: 12px;
  1955. -webkit-transform: rotate(-45deg);
  1956. transform: rotate(-45deg); }
  1957. .el-upload-list--picture .el-progress {
  1958. position: relative;
  1959. top: -7px; }
  1960. .el-upload-cover {
  1961. position: absolute;
  1962. left: 0;
  1963. top: 0;
  1964. width: 100%;
  1965. height: 100%;
  1966. overflow: hidden;
  1967. z-index: 10;
  1968. cursor: default; }
  1969. .el-upload-cover::after {
  1970. display: inline-block;
  1971. content: "";
  1972. height: 100%;
  1973. vertical-align: middle; }
  1974. .el-upload-cover img {
  1975. display: block;
  1976. width: 100%;
  1977. height: 100%; }
  1978. .el-upload-cover__label {
  1979. position: absolute;
  1980. right: -15px;
  1981. top: -6px;
  1982. width: 40px;
  1983. height: 24px;
  1984. background: #13ce66;
  1985. text-align: center;
  1986. -webkit-transform: rotate(45deg);
  1987. transform: rotate(45deg);
  1988. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  1989. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  1990. .el-upload-cover__label i {
  1991. font-size: 12px;
  1992. margin-top: 11px;
  1993. -webkit-transform: rotate(-45deg);
  1994. transform: rotate(-45deg);
  1995. color: #fff; }
  1996. .el-upload-cover__progress {
  1997. display: inline-block;
  1998. vertical-align: middle;
  1999. position: static;
  2000. width: 243px; }
  2001. .el-upload-cover__progress + .el-upload__inner {
  2002. opacity: 0; }
  2003. .el-upload-cover__content {
  2004. position: absolute;
  2005. top: 0;
  2006. left: 0;
  2007. width: 100%;
  2008. height: 100%; }
  2009. .el-upload-cover__interact {
  2010. position: absolute;
  2011. bottom: 0;
  2012. left: 0;
  2013. width: 100%;
  2014. height: 100%;
  2015. background-color: rgba(0, 0, 0, 0.72);
  2016. text-align: center; }
  2017. .el-upload-cover__interact .btn {
  2018. display: inline-block;
  2019. color: #000000;
  2020. font-size: 14px;
  2021. cursor: pointer;
  2022. vertical-align: middle;
  2023. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  2024. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  2025. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  2026. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  2027. margin-top: 60px; }
  2028. .el-upload-cover__interact .btn i {
  2029. margin-top: 0; }
  2030. .el-upload-cover__interact .btn span {
  2031. opacity: 0;
  2032. -webkit-transition: opacity .15s linear;
  2033. transition: opacity .15s linear; }
  2034. .el-upload-cover__interact .btn:not(:first-child) {
  2035. margin-left: 35px; }
  2036. .el-upload-cover__interact .btn:hover {
  2037. -webkit-transform: translateY(-13px);
  2038. transform: translateY(-13px); }
  2039. .el-upload-cover__interact .btn:hover span {
  2040. opacity: 1; }
  2041. .el-upload-cover__interact .btn i {
  2042. color: #000000;
  2043. display: block;
  2044. font-size: 24px;
  2045. line-height: inherit;
  2046. margin: 0 auto 5px; }
  2047. .el-upload-cover__title {
  2048. position: absolute;
  2049. bottom: 0;
  2050. left: 0;
  2051. background-color: #000000;
  2052. height: 36px;
  2053. width: 100%;
  2054. overflow: hidden;
  2055. text-overflow: ellipsis;
  2056. white-space: nowrap;
  2057. font-weight: normal;
  2058. text-align: left;
  2059. padding: 0 10px;
  2060. margin: 0;
  2061. line-height: 36px;
  2062. font-size: 14px;
  2063. color: #000000; }
  2064. .el-upload-cover + .el-upload__inner {
  2065. opacity: 0;
  2066. position: relative;
  2067. z-index: 1; }