upload.css 25 KB

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