upload.css 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
  1. @charset "UTF-8";
  2. /* BEM support Func
  3. -------------------------- */
  4. /* Element Chalk Variables */
  5. /* Transition
  6. -------------------------- */
  7. /* Color
  8. -------------------------- */
  9. /* 53a8ff */
  10. /* 66b1ff */
  11. /* 79bbff */
  12. /* 8cc5ff */
  13. /* a0cfff */
  14. /* b3d8ff */
  15. /* c6e2ff */
  16. /* d9ecff */
  17. /* ecf5ff */
  18. /* Link
  19. -------------------------- */
  20. /* Border
  21. -------------------------- */
  22. /* Fill
  23. -------------------------- */
  24. /* Typography
  25. -------------------------- */
  26. /* Size
  27. -------------------------- */
  28. /* z-index
  29. -------------------------- */
  30. /* Disable base
  31. -------------------------- */
  32. /* Icon
  33. -------------------------- */
  34. /* Checkbox
  35. -------------------------- */
  36. /* Radio
  37. -------------------------- */
  38. /* Select
  39. -------------------------- */
  40. /* Alert
  41. -------------------------- */
  42. /* MessageBox
  43. -------------------------- */
  44. /* Message
  45. -------------------------- */
  46. /* Notification
  47. -------------------------- */
  48. /* Input
  49. -------------------------- */
  50. /* Cascader
  51. -------------------------- */
  52. /* Group
  53. -------------------------- */
  54. /* Tab
  55. -------------------------- */
  56. /* Button
  57. -------------------------- */
  58. /* cascader
  59. -------------------------- */
  60. /* Switch
  61. -------------------------- */
  62. /* Dialog
  63. -------------------------- */
  64. /* Table
  65. -------------------------- */
  66. /* Pagination
  67. -------------------------- */
  68. /* Popup
  69. -------------------------- */
  70. /* Popover
  71. -------------------------- */
  72. /* Tooltip
  73. -------------------------- */
  74. /* Tag
  75. -------------------------- */
  76. /* Tree
  77. -------------------------- */
  78. /* Dropdown
  79. -------------------------- */
  80. /* Badge
  81. -------------------------- */
  82. /* Card
  83. --------------------------*/
  84. /* Slider
  85. --------------------------*/
  86. /* Steps
  87. --------------------------*/
  88. /* Menu
  89. --------------------------*/
  90. /* Rate
  91. --------------------------*/
  92. /* DatePicker
  93. --------------------------*/
  94. /* Loading
  95. --------------------------*/
  96. /* Scrollbar
  97. --------------------------*/
  98. /* Carousel
  99. --------------------------*/
  100. /* Collapse
  101. --------------------------*/
  102. /* Transfer
  103. --------------------------*/
  104. /* Header
  105. --------------------------*/
  106. /* Footer
  107. --------------------------*/
  108. /* Main
  109. --------------------------*/
  110. /* Timeline
  111. --------------------------*/
  112. /* Backtop
  113. --------------------------*/
  114. /* Link
  115. --------------------------*/
  116. /* Calendar
  117. --------------------------*/
  118. /* Form
  119. -------------------------- */
  120. /* Avatar
  121. --------------------------*/
  122. /* Break-point
  123. --------------------------*/
  124. /* Break-points
  125. -------------------------- */
  126. /* Scrollbar
  127. -------------------------- */
  128. /* Placeholder
  129. -------------------------- */
  130. /* BEM
  131. -------------------------- */
  132. /* BEM support Func
  133. -------------------------- */
  134. /* Element Chalk Variables */
  135. /* Transition
  136. -------------------------- */
  137. /* Color
  138. -------------------------- */
  139. /* 53a8ff */
  140. /* 66b1ff */
  141. /* 79bbff */
  142. /* 8cc5ff */
  143. /* a0cfff */
  144. /* b3d8ff */
  145. /* c6e2ff */
  146. /* d9ecff */
  147. /* ecf5ff */
  148. /* Link
  149. -------------------------- */
  150. /* Border
  151. -------------------------- */
  152. /* Fill
  153. -------------------------- */
  154. /* Typography
  155. -------------------------- */
  156. /* Size
  157. -------------------------- */
  158. /* z-index
  159. -------------------------- */
  160. /* Disable base
  161. -------------------------- */
  162. /* Icon
  163. -------------------------- */
  164. /* Checkbox
  165. -------------------------- */
  166. /* Radio
  167. -------------------------- */
  168. /* Select
  169. -------------------------- */
  170. /* Alert
  171. -------------------------- */
  172. /* MessageBox
  173. -------------------------- */
  174. /* Message
  175. -------------------------- */
  176. /* Notification
  177. -------------------------- */
  178. /* Input
  179. -------------------------- */
  180. /* Cascader
  181. -------------------------- */
  182. /* Group
  183. -------------------------- */
  184. /* Tab
  185. -------------------------- */
  186. /* Button
  187. -------------------------- */
  188. /* cascader
  189. -------------------------- */
  190. /* Switch
  191. -------------------------- */
  192. /* Dialog
  193. -------------------------- */
  194. /* Table
  195. -------------------------- */
  196. /* Pagination
  197. -------------------------- */
  198. /* Popup
  199. -------------------------- */
  200. /* Popover
  201. -------------------------- */
  202. /* Tooltip
  203. -------------------------- */
  204. /* Tag
  205. -------------------------- */
  206. /* Tree
  207. -------------------------- */
  208. /* Dropdown
  209. -------------------------- */
  210. /* Badge
  211. -------------------------- */
  212. /* Card
  213. --------------------------*/
  214. /* Slider
  215. --------------------------*/
  216. /* Steps
  217. --------------------------*/
  218. /* Menu
  219. --------------------------*/
  220. /* Rate
  221. --------------------------*/
  222. /* DatePicker
  223. --------------------------*/
  224. /* Loading
  225. --------------------------*/
  226. /* Scrollbar
  227. --------------------------*/
  228. /* Carousel
  229. --------------------------*/
  230. /* Collapse
  231. --------------------------*/
  232. /* Transfer
  233. --------------------------*/
  234. /* Header
  235. --------------------------*/
  236. /* Footer
  237. --------------------------*/
  238. /* Main
  239. --------------------------*/
  240. /* Timeline
  241. --------------------------*/
  242. /* Backtop
  243. --------------------------*/
  244. /* Link
  245. --------------------------*/
  246. /* Calendar
  247. --------------------------*/
  248. /* Form
  249. -------------------------- */
  250. /* Avatar
  251. --------------------------*/
  252. /* Break-point
  253. --------------------------*/
  254. /* Break-points
  255. -------------------------- */
  256. /* Scrollbar
  257. -------------------------- */
  258. /* Placeholder
  259. -------------------------- */
  260. /* BEM
  261. -------------------------- */
  262. /* Element Chalk Variables */
  263. /* Transition
  264. -------------------------- */
  265. /* Color
  266. -------------------------- */
  267. /* 53a8ff */
  268. /* 66b1ff */
  269. /* 79bbff */
  270. /* 8cc5ff */
  271. /* a0cfff */
  272. /* b3d8ff */
  273. /* c6e2ff */
  274. /* d9ecff */
  275. /* ecf5ff */
  276. /* Link
  277. -------------------------- */
  278. /* Border
  279. -------------------------- */
  280. /* Fill
  281. -------------------------- */
  282. /* Typography
  283. -------------------------- */
  284. /* Size
  285. -------------------------- */
  286. /* z-index
  287. -------------------------- */
  288. /* Disable base
  289. -------------------------- */
  290. /* Icon
  291. -------------------------- */
  292. /* Checkbox
  293. -------------------------- */
  294. /* Radio
  295. -------------------------- */
  296. /* Select
  297. -------------------------- */
  298. /* Alert
  299. -------------------------- */
  300. /* MessageBox
  301. -------------------------- */
  302. /* Message
  303. -------------------------- */
  304. /* Notification
  305. -------------------------- */
  306. /* Input
  307. -------------------------- */
  308. /* Cascader
  309. -------------------------- */
  310. /* Group
  311. -------------------------- */
  312. /* Tab
  313. -------------------------- */
  314. /* Button
  315. -------------------------- */
  316. /* cascader
  317. -------------------------- */
  318. /* Switch
  319. -------------------------- */
  320. /* Dialog
  321. -------------------------- */
  322. /* Table
  323. -------------------------- */
  324. /* Pagination
  325. -------------------------- */
  326. /* Popup
  327. -------------------------- */
  328. /* Popover
  329. -------------------------- */
  330. /* Tooltip
  331. -------------------------- */
  332. /* Tag
  333. -------------------------- */
  334. /* Tree
  335. -------------------------- */
  336. /* Dropdown
  337. -------------------------- */
  338. /* Badge
  339. -------------------------- */
  340. /* Card
  341. --------------------------*/
  342. /* Slider
  343. --------------------------*/
  344. /* Steps
  345. --------------------------*/
  346. /* Menu
  347. --------------------------*/
  348. /* Rate
  349. --------------------------*/
  350. /* DatePicker
  351. --------------------------*/
  352. /* Loading
  353. --------------------------*/
  354. /* Scrollbar
  355. --------------------------*/
  356. /* Carousel
  357. --------------------------*/
  358. /* Collapse
  359. --------------------------*/
  360. /* Transfer
  361. --------------------------*/
  362. /* Header
  363. --------------------------*/
  364. /* Footer
  365. --------------------------*/
  366. /* Main
  367. --------------------------*/
  368. /* Timeline
  369. --------------------------*/
  370. /* Backtop
  371. --------------------------*/
  372. /* Link
  373. --------------------------*/
  374. /* Calendar
  375. --------------------------*/
  376. /* Form
  377. -------------------------- */
  378. /* Avatar
  379. --------------------------*/
  380. /* Break-point
  381. --------------------------*/
  382. .el-progress {
  383. position: relative;
  384. line-height: 1; }
  385. .el-progress__text {
  386. font-size: 14px;
  387. color: #606266;
  388. display: inline-block;
  389. vertical-align: middle;
  390. margin-left: 10px;
  391. line-height: 1; }
  392. .el-progress__text i {
  393. vertical-align: middle;
  394. display: block; }
  395. .el-progress--circle, .el-progress--dashboard {
  396. display: inline-block; }
  397. .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text {
  398. position: absolute;
  399. top: 50%;
  400. left: 0;
  401. width: 100%;
  402. text-align: center;
  403. margin: 0;
  404. -webkit-transform: translate(0, -50%);
  405. transform: translate(0, -50%); }
  406. .el-progress--circle .el-progress__text i, .el-progress--dashboard .el-progress__text i {
  407. vertical-align: middle;
  408. display: inline-block; }
  409. .el-progress--without-text .el-progress__text {
  410. display: none; }
  411. .el-progress--without-text .el-progress-bar {
  412. padding-right: 0;
  413. margin-right: 0;
  414. display: block; }
  415. .el-progress--text-inside .el-progress-bar {
  416. padding-right: 0;
  417. margin-right: 0; }
  418. .el-progress.is-success .el-progress-bar__inner {
  419. background-color: #67C23A; }
  420. .el-progress.is-success .el-progress__text {
  421. color: #67C23A; }
  422. .el-progress.is-warning .el-progress-bar__inner {
  423. background-color: #E6A23C; }
  424. .el-progress.is-warning .el-progress__text {
  425. color: #E6A23C; }
  426. .el-progress.is-exception .el-progress-bar__inner {
  427. background-color: #e7304e; }
  428. .el-progress.is-exception .el-progress__text {
  429. color: #e7304e; }
  430. .el-progress-bar {
  431. padding-right: 50px;
  432. display: inline-block;
  433. vertical-align: middle;
  434. width: 100%;
  435. margin-right: -55px;
  436. -webkit-box-sizing: border-box;
  437. box-sizing: border-box; }
  438. .el-progress-bar__outer {
  439. height: 6px;
  440. border-radius: 100px;
  441. background-color: #EBEEF5;
  442. overflow: hidden;
  443. position: relative;
  444. vertical-align: middle; }
  445. .el-progress-bar__inner {
  446. position: absolute;
  447. left: 0;
  448. top: 0;
  449. height: 100%;
  450. background-color: #2D74E7;
  451. text-align: right;
  452. border-radius: 100px;
  453. line-height: 1;
  454. white-space: nowrap;
  455. -webkit-transition: width 0.6s ease;
  456. transition: width 0.6s ease; }
  457. .el-progress-bar__inner::after {
  458. display: inline-block;
  459. content: "";
  460. height: 100%;
  461. vertical-align: middle; }
  462. .el-progress-bar__innerText {
  463. display: inline-block;
  464. vertical-align: middle;
  465. color: #FFFFFF;
  466. font-size: 12px;
  467. margin: 0 5px; }
  468. @-webkit-keyframes progress {
  469. 0% {
  470. background-position: 0 0; }
  471. 100% {
  472. background-position: 32px 0; } }
  473. @keyframes progress {
  474. 0% {
  475. background-position: 0 0; }
  476. 100% {
  477. background-position: 32px 0; } }
  478. /* Element Chalk Variables */
  479. /* Transition
  480. -------------------------- */
  481. /* Color
  482. -------------------------- */
  483. /* 53a8ff */
  484. /* 66b1ff */
  485. /* 79bbff */
  486. /* 8cc5ff */
  487. /* a0cfff */
  488. /* b3d8ff */
  489. /* c6e2ff */
  490. /* d9ecff */
  491. /* ecf5ff */
  492. /* Link
  493. -------------------------- */
  494. /* Border
  495. -------------------------- */
  496. /* Fill
  497. -------------------------- */
  498. /* Typography
  499. -------------------------- */
  500. /* Size
  501. -------------------------- */
  502. /* z-index
  503. -------------------------- */
  504. /* Disable base
  505. -------------------------- */
  506. /* Icon
  507. -------------------------- */
  508. /* Checkbox
  509. -------------------------- */
  510. /* Radio
  511. -------------------------- */
  512. /* Select
  513. -------------------------- */
  514. /* Alert
  515. -------------------------- */
  516. /* MessageBox
  517. -------------------------- */
  518. /* Message
  519. -------------------------- */
  520. /* Notification
  521. -------------------------- */
  522. /* Input
  523. -------------------------- */
  524. /* Cascader
  525. -------------------------- */
  526. /* Group
  527. -------------------------- */
  528. /* Tab
  529. -------------------------- */
  530. /* Button
  531. -------------------------- */
  532. /* cascader
  533. -------------------------- */
  534. /* Switch
  535. -------------------------- */
  536. /* Dialog
  537. -------------------------- */
  538. /* Table
  539. -------------------------- */
  540. /* Pagination
  541. -------------------------- */
  542. /* Popup
  543. -------------------------- */
  544. /* Popover
  545. -------------------------- */
  546. /* Tooltip
  547. -------------------------- */
  548. /* Tag
  549. -------------------------- */
  550. /* Tree
  551. -------------------------- */
  552. /* Dropdown
  553. -------------------------- */
  554. /* Badge
  555. -------------------------- */
  556. /* Card
  557. --------------------------*/
  558. /* Slider
  559. --------------------------*/
  560. /* Steps
  561. --------------------------*/
  562. /* Menu
  563. --------------------------*/
  564. /* Rate
  565. --------------------------*/
  566. /* DatePicker
  567. --------------------------*/
  568. /* Loading
  569. --------------------------*/
  570. /* Scrollbar
  571. --------------------------*/
  572. /* Carousel
  573. --------------------------*/
  574. /* Collapse
  575. --------------------------*/
  576. /* Transfer
  577. --------------------------*/
  578. /* Header
  579. --------------------------*/
  580. /* Footer
  581. --------------------------*/
  582. /* Main
  583. --------------------------*/
  584. /* Timeline
  585. --------------------------*/
  586. /* Backtop
  587. --------------------------*/
  588. /* Link
  589. --------------------------*/
  590. /* Calendar
  591. --------------------------*/
  592. /* Form
  593. -------------------------- */
  594. /* Avatar
  595. --------------------------*/
  596. /* Break-point
  597. --------------------------*/
  598. .el-upload {
  599. display: inline-block;
  600. text-align: center;
  601. cursor: pointer;
  602. outline: none;
  603. /* 照片墙模式 */ }
  604. .el-upload__input {
  605. display: none; }
  606. .el-upload__tip {
  607. font-size: 12px;
  608. color: #606266;
  609. margin-top: 7px; }
  610. .el-upload iframe {
  611. position: absolute;
  612. z-index: -1;
  613. top: 0;
  614. left: 0;
  615. opacity: 0;
  616. filter: alpha(opacity=0); }
  617. .el-upload--picture-card {
  618. background-color: #fbfdff;
  619. border: 1px dashed #c0ccda;
  620. border-radius: 6px;
  621. -webkit-box-sizing: border-box;
  622. box-sizing: border-box;
  623. width: 148px;
  624. height: 148px;
  625. cursor: pointer;
  626. line-height: 146px;
  627. vertical-align: top; }
  628. .el-upload--picture-card i {
  629. font-size: 28px;
  630. color: #8c939d; }
  631. .el-upload--picture-card:hover {
  632. border-color: #2D74E7;
  633. color: #2D74E7; }
  634. .el-upload:focus {
  635. border-color: #2D74E7;
  636. color: #2D74E7; }
  637. .el-upload:focus .el-upload-dragger {
  638. border-color: #2D74E7; }
  639. .el-upload-dragger {
  640. background-color: #fff;
  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. .el-upload-dragger .el-icon-upload {
  652. font-size: 67px;
  653. color: #C0C4CC;
  654. margin: 40px 0 16px;
  655. line-height: 50px; }
  656. .el-upload-dragger + .el-upload__tip {
  657. text-align: center; }
  658. .el-upload-dragger ~ .el-upload__files {
  659. border-top: 1px solid #DCDFE6;
  660. margin-top: 7px;
  661. padding-top: 5px; }
  662. .el-upload-dragger .el-upload__text {
  663. color: #606266;
  664. font-size: 14px;
  665. text-align: center; }
  666. .el-upload-dragger .el-upload__text em {
  667. color: #2D74E7;
  668. font-style: normal; }
  669. .el-upload-dragger:hover {
  670. border-color: #2D74E7; }
  671. .el-upload-dragger.is-dragover {
  672. background-color: rgba(32, 159, 255, 0.06);
  673. border: 2px dashed #2D74E7; }
  674. .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: #606266;
  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: #67C23A; }
  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: #606266; }
  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: #2D74E7; }
  724. .el-upload-list__item:hover {
  725. background-color: #F5F7FA; }
  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: #2D74E7;
  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. .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: #606266;
  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: #606266;
  775. display: none; }
  776. .el-upload-list__item-delete:hover {
  777. color: #2D74E7; }
  778. .el-upload-list--picture-card {
  779. margin: 0;
  780. display: inline;
  781. vertical-align: top; }
  782. .el-upload-list--picture-card .el-upload-list__item {
  783. overflow: hidden;
  784. background-color: #fff;
  785. border: 1px solid #c0ccda;
  786. border-radius: 6px;
  787. -webkit-box-sizing: border-box;
  788. box-sizing: border-box;
  789. width: 148px;
  790. height: 148px;
  791. margin: 0 8px 8px 0;
  792. display: inline-block; }
  793. .el-upload-list--picture-card .el-upload-list__item .el-icon-check,
  794. .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  795. color: #FFFFFF; }
  796. .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
  797. display: none; }
  798. .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label {
  799. display: none; }
  800. .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  801. display: block; }
  802. .el-upload-list--picture-card .el-upload-list__item-name {
  803. display: none; }
  804. .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  805. width: 100%;
  806. height: 100%; }
  807. .el-upload-list--picture-card .el-upload-list__item-status-label {
  808. position: absolute;
  809. right: -15px;
  810. top: -6px;
  811. width: 40px;
  812. height: 24px;
  813. background: #13ce66;
  814. text-align: center;
  815. -webkit-transform: rotate(45deg);
  816. transform: rotate(45deg);
  817. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  818. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  819. .el-upload-list--picture-card .el-upload-list__item-status-label i {
  820. font-size: 12px;
  821. margin-top: 11px;
  822. -webkit-transform: rotate(-45deg);
  823. transform: rotate(-45deg); }
  824. .el-upload-list--picture-card .el-upload-list__item-actions {
  825. position: absolute;
  826. width: 100%;
  827. height: 100%;
  828. left: 0;
  829. top: 0;
  830. cursor: default;
  831. text-align: center;
  832. color: #fff;
  833. opacity: 0;
  834. font-size: 20px;
  835. background-color: rgba(0, 0, 0, 0.5);
  836. -webkit-transition: opacity .3s;
  837. transition: opacity .3s; }
  838. .el-upload-list--picture-card .el-upload-list__item-actions::after {
  839. display: inline-block;
  840. content: "";
  841. height: 100%;
  842. vertical-align: middle; }
  843. .el-upload-list--picture-card .el-upload-list__item-actions span {
  844. display: none;
  845. cursor: pointer; }
  846. .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  847. margin-left: 15px; }
  848. .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete {
  849. position: static;
  850. font-size: inherit;
  851. color: inherit; }
  852. .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  853. opacity: 1; }
  854. .el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  855. display: inline-block; }
  856. .el-upload-list--picture-card .el-progress {
  857. top: 50%;
  858. left: 50%;
  859. -webkit-transform: translate(-50%, -50%);
  860. transform: translate(-50%, -50%);
  861. bottom: auto;
  862. width: 126px; }
  863. .el-upload-list--picture-card .el-progress .el-progress__text {
  864. top: 50%; }
  865. .el-upload-list--picture .el-upload-list__item {
  866. overflow: hidden;
  867. z-index: 0;
  868. background-color: #fff;
  869. border: 1px solid #c0ccda;
  870. border-radius: 6px;
  871. -webkit-box-sizing: border-box;
  872. box-sizing: border-box;
  873. margin-top: 10px;
  874. padding: 10px 10px 10px 90px;
  875. height: 92px; }
  876. .el-upload-list--picture .el-upload-list__item .el-icon-check,
  877. .el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  878. color: #FFFFFF; }
  879. .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label {
  880. background: transparent;
  881. -webkit-box-shadow: none;
  882. box-shadow: none;
  883. top: -2px;
  884. right: -12px; }
  885. .el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  886. display: block; }
  887. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
  888. line-height: 70px;
  889. margin-top: 0; }
  890. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i {
  891. display: none; }
  892. .el-upload-list--picture .el-upload-list__item-thumbnail {
  893. vertical-align: middle;
  894. display: inline-block;
  895. width: 70px;
  896. height: 70px;
  897. float: left;
  898. position: relative;
  899. z-index: 1;
  900. margin-left: -80px;
  901. background-color: #FFFFFF; }
  902. .el-upload-list--picture .el-upload-list__item-name {
  903. display: block;
  904. margin-top: 20px; }
  905. .el-upload-list--picture .el-upload-list__item-name i {
  906. font-size: 70px;
  907. line-height: 1;
  908. position: absolute;
  909. left: 9px;
  910. top: 10px; }
  911. .el-upload-list--picture .el-upload-list__item-status-label {
  912. position: absolute;
  913. right: -17px;
  914. top: -7px;
  915. width: 46px;
  916. height: 26px;
  917. background: #13ce66;
  918. text-align: center;
  919. -webkit-transform: rotate(45deg);
  920. transform: rotate(45deg);
  921. -webkit-box-shadow: 0 1px 1px #ccc;
  922. box-shadow: 0 1px 1px #ccc; }
  923. .el-upload-list--picture .el-upload-list__item-status-label i {
  924. font-size: 12px;
  925. margin-top: 12px;
  926. -webkit-transform: rotate(-45deg);
  927. transform: rotate(-45deg); }
  928. .el-upload-list--picture .el-progress {
  929. position: relative;
  930. top: -7px; }
  931. .el-upload-cover {
  932. position: absolute;
  933. left: 0;
  934. top: 0;
  935. width: 100%;
  936. height: 100%;
  937. overflow: hidden;
  938. z-index: 10;
  939. cursor: default; }
  940. .el-upload-cover::after {
  941. display: inline-block;
  942. content: "";
  943. height: 100%;
  944. vertical-align: middle; }
  945. .el-upload-cover img {
  946. display: block;
  947. width: 100%;
  948. height: 100%; }
  949. .el-upload-cover__label {
  950. position: absolute;
  951. right: -15px;
  952. top: -6px;
  953. width: 40px;
  954. height: 24px;
  955. background: #13ce66;
  956. text-align: center;
  957. -webkit-transform: rotate(45deg);
  958. transform: rotate(45deg);
  959. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  960. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  961. .el-upload-cover__label i {
  962. font-size: 12px;
  963. margin-top: 11px;
  964. -webkit-transform: rotate(-45deg);
  965. transform: rotate(-45deg);
  966. color: #fff; }
  967. .el-upload-cover__progress {
  968. display: inline-block;
  969. vertical-align: middle;
  970. position: static;
  971. width: 243px; }
  972. .el-upload-cover__progress + .el-upload__inner {
  973. opacity: 0; }
  974. .el-upload-cover__content {
  975. position: absolute;
  976. top: 0;
  977. left: 0;
  978. width: 100%;
  979. height: 100%; }
  980. .el-upload-cover__interact {
  981. position: absolute;
  982. bottom: 0;
  983. left: 0;
  984. width: 100%;
  985. height: 100%;
  986. background-color: rgba(0, 0, 0, 0.72);
  987. text-align: center; }
  988. .el-upload-cover__interact .btn {
  989. display: inline-block;
  990. color: #FFFFFF;
  991. font-size: 14px;
  992. cursor: pointer;
  993. vertical-align: middle;
  994. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  995. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 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);
  997. 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);
  998. margin-top: 60px; }
  999. .el-upload-cover__interact .btn i {
  1000. margin-top: 0; }
  1001. .el-upload-cover__interact .btn span {
  1002. opacity: 0;
  1003. -webkit-transition: opacity .15s linear;
  1004. transition: opacity .15s linear; }
  1005. .el-upload-cover__interact .btn:not(:first-child) {
  1006. margin-left: 35px; }
  1007. .el-upload-cover__interact .btn:hover {
  1008. -webkit-transform: translateY(-13px);
  1009. transform: translateY(-13px); }
  1010. .el-upload-cover__interact .btn:hover span {
  1011. opacity: 1; }
  1012. .el-upload-cover__interact .btn i {
  1013. color: #FFFFFF;
  1014. display: block;
  1015. font-size: 24px;
  1016. line-height: inherit;
  1017. margin: 0 auto 5px; }
  1018. .el-upload-cover__title {
  1019. position: absolute;
  1020. bottom: 0;
  1021. left: 0;
  1022. background-color: #FFFFFF;
  1023. height: 36px;
  1024. width: 100%;
  1025. overflow: hidden;
  1026. text-overflow: ellipsis;
  1027. white-space: nowrap;
  1028. font-weight: normal;
  1029. text-align: left;
  1030. padding: 0 10px;
  1031. margin: 0;
  1032. line-height: 36px;
  1033. font-size: 14px;
  1034. color: #303133; }
  1035. .el-upload-cover + .el-upload__inner {
  1036. opacity: 0;
  1037. position: relative;
  1038. z-index: 1; }