Plat Admin

upload.css 25KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001
  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. /* Menu
  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. /* Menu
  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. /* Menu
  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: #606266;
  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: #67c23a; }
  390. .el-progress.is-success .el-progress__text {
  391. color: #67c23a; }
  392. .el-progress.is-exception .el-progress-bar__inner {
  393. background-color: #f56c6c; }
  394. .el-progress.is-exception .el-progress__text {
  395. color: #f56c6c; }
  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: #ebeef5;
  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: #1b73a5;
  417. text-align: right;
  418. border-radius: 100px;
  419. line-height: 1;
  420. white-space: nowrap;
  421. -webkit-transition: width 0.6s ease;
  422. transition: width 0.6s ease; }
  423. .el-progress-bar__inner::after {
  424. display: inline-block;
  425. content: "";
  426. height: 100%;
  427. vertical-align: middle; }
  428. .el-progress-bar__innerText {
  429. display: inline-block;
  430. vertical-align: middle;
  431. color: #fff;
  432. font-size: 12px;
  433. margin: 0 5px; }
  434. @-webkit-keyframes progress {
  435. 0% {
  436. background-position: 0 0; }
  437. 100% {
  438. background-position: 32px 0; } }
  439. @keyframes progress {
  440. 0% {
  441. background-position: 0 0; }
  442. 100% {
  443. background-position: 32px 0; } }
  444. /* Element Chalk Variables */
  445. /* Transition
  446. -------------------------- */
  447. /* Colors
  448. -------------------------- */
  449. /* 53a8ff */
  450. /* 66b1ff */
  451. /* 79bbff */
  452. /* 8cc5ff */
  453. /* a0cfff */
  454. /* b3d8ff */
  455. /* c6e2ff */
  456. /* d9ecff */
  457. /* ecf5ff */
  458. /* Link
  459. -------------------------- */
  460. /* Background
  461. -------------------------- */
  462. /* Border
  463. -------------------------- */
  464. /* Box-shadow
  465. -------------------------- */
  466. /* Fill
  467. -------------------------- */
  468. /* Font
  469. -------------------------- */
  470. /* Size
  471. -------------------------- */
  472. /* z-index
  473. -------------------------- */
  474. /* Disable base
  475. -------------------------- */
  476. /* Icon
  477. -------------------------- */
  478. /* Checkbox
  479. -------------------------- */
  480. /* Radio
  481. -------------------------- */
  482. /* Select
  483. -------------------------- */
  484. /* Alert
  485. -------------------------- */
  486. /* Message Box
  487. -------------------------- */
  488. /* Message
  489. -------------------------- */
  490. /* Notification
  491. -------------------------- */
  492. /* Input
  493. -------------------------- */
  494. /* Cascader
  495. -------------------------- */
  496. /* Group
  497. -------------------------- */
  498. /* Tab
  499. -------------------------- */
  500. /* Button
  501. -------------------------- */
  502. /* cascader
  503. -------------------------- */
  504. /* Switch
  505. -------------------------- */
  506. /* Dialog
  507. -------------------------- */
  508. /* Table
  509. -------------------------- */
  510. /* Pagination
  511. -------------------------- */
  512. /* Popover
  513. -------------------------- */
  514. /* Tooltip
  515. -------------------------- */
  516. /* Tag
  517. -------------------------- */
  518. /* Tree
  519. -------------------------- */
  520. /* Dropdown
  521. -------------------------- */
  522. /* Badge
  523. -------------------------- */
  524. /* Card
  525. --------------------------*/
  526. /* Slider
  527. --------------------------*/
  528. /* Steps
  529. --------------------------*/
  530. /* Menu
  531. --------------------------*/
  532. /* Rate
  533. --------------------------*/
  534. /* DatePicker
  535. --------------------------*/
  536. /* Loading
  537. --------------------------*/
  538. /* Scrollbar
  539. --------------------------*/
  540. /* Carousel
  541. --------------------------*/
  542. /* Collapse
  543. --------------------------*/
  544. /* Transfer
  545. --------------------------*/
  546. /* Header
  547. --------------------------*/
  548. /* Footer
  549. --------------------------*/
  550. /* Main
  551. --------------------------*/
  552. /* Break-point
  553. --------------------------*/
  554. .el-upload {
  555. display: inline-block;
  556. text-align: center;
  557. cursor: pointer;
  558. outline: none;
  559. /* 照片墙模式 */ }
  560. .el-upload__input {
  561. display: none; }
  562. .el-upload__tip {
  563. font-size: 12px;
  564. color: #606266;
  565. margin-top: 7px; }
  566. .el-upload iframe {
  567. position: absolute;
  568. z-index: -1;
  569. top: 0;
  570. left: 0;
  571. opacity: 0;
  572. filter: alpha(opacity=0); }
  573. .el-upload--picture-card {
  574. background-color: #fbfdff;
  575. border: 1px dashed #c0ccda;
  576. border-radius: 6px;
  577. -webkit-box-sizing: border-box;
  578. box-sizing: border-box;
  579. width: 148px;
  580. height: 148px;
  581. cursor: pointer;
  582. line-height: 146px;
  583. vertical-align: top; }
  584. .el-upload--picture-card i {
  585. font-size: 28px;
  586. color: #8c939d; }
  587. .el-upload--picture-card:hover {
  588. border-color: #1b73a5;
  589. color: #1b73a5; }
  590. .el-upload:focus {
  591. border-color: #1b73a5;
  592. color: #1b73a5; }
  593. .el-upload:focus .el-upload-dragger {
  594. border-color: #1b73a5; }
  595. .el-upload-dragger {
  596. background-color: #fff;
  597. border: 1px dashed #d9d9d9;
  598. border-radius: 6px;
  599. -webkit-box-sizing: border-box;
  600. box-sizing: border-box;
  601. width: 360px;
  602. height: 180px;
  603. text-align: center;
  604. cursor: pointer;
  605. position: relative;
  606. overflow: hidden; }
  607. .el-upload-dragger .el-icon-upload {
  608. font-size: 67px;
  609. color: #c0c4cc;
  610. margin: 40px 0 16px;
  611. line-height: 50px; }
  612. .el-upload-dragger + .el-upload__tip {
  613. text-align: center; }
  614. .el-upload-dragger ~ .el-upload__files {
  615. border-top: 1px solid #dcdfe6;
  616. margin-top: 7px;
  617. padding-top: 5px; }
  618. .el-upload-dragger .el-upload__text {
  619. color: #606266;
  620. font-size: 14px;
  621. text-align: center; }
  622. .el-upload-dragger .el-upload__text em {
  623. color: #1b73a5;
  624. font-style: normal; }
  625. .el-upload-dragger:hover {
  626. border-color: #1b73a5; }
  627. .el-upload-dragger.is-dragover {
  628. background-color: rgba(32, 159, 255, 0.06);
  629. border: 2px dashed #1b73a5; }
  630. .el-upload-list {
  631. margin: 0;
  632. padding: 0;
  633. list-style: none; }
  634. .el-upload-list__item {
  635. -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  636. transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  637. font-size: 14px;
  638. color: #606266;
  639. line-height: 1.8;
  640. margin-top: 5px;
  641. position: relative;
  642. -webkit-box-sizing: border-box;
  643. box-sizing: border-box;
  644. border-radius: 4px;
  645. width: 100%; }
  646. .el-upload-list__item .el-progress {
  647. position: absolute;
  648. top: 20px;
  649. width: 100%; }
  650. .el-upload-list__item .el-progress__text {
  651. position: absolute;
  652. right: 0;
  653. top: -13px; }
  654. .el-upload-list__item .el-progress-bar {
  655. margin-right: 0;
  656. padding-right: 0; }
  657. .el-upload-list__item:first-child {
  658. margin-top: 10px; }
  659. .el-upload-list__item .el-icon-upload-success {
  660. color: #67c23a; }
  661. .el-upload-list__item .el-icon-close {
  662. display: none;
  663. position: absolute;
  664. top: 5px;
  665. right: 5px;
  666. cursor: pointer;
  667. opacity: .75;
  668. color: #606266; }
  669. .el-upload-list__item .el-icon-close:hover {
  670. opacity: 1; }
  671. .el-upload-list__item .el-icon-close-tip {
  672. display: none;
  673. position: absolute;
  674. top: 5px;
  675. right: 5px;
  676. font-size: 12px;
  677. cursor: pointer;
  678. opacity: 1;
  679. color: #1b73a5; }
  680. .el-upload-list__item:hover {
  681. background-color: #f5f7fa; }
  682. .el-upload-list__item:hover .el-icon-close {
  683. display: inline-block; }
  684. .el-upload-list__item:hover .el-progress__text {
  685. display: none; }
  686. .el-upload-list__item.is-success .el-upload-list__item-status-label {
  687. display: block; }
  688. .el-upload-list__item.is-success .el-upload-list__item-name:hover, .el-upload-list__item.is-success .el-upload-list__item-name:focus {
  689. color: #1b73a5;
  690. cursor: pointer; }
  691. .el-upload-list__item.is-success:focus:not(:hover) {
  692. /* 键盘focus */ }
  693. .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
  694. display: inline-block; }
  695. .el-upload-list__item.is-success:not(.focusing):focus, .el-upload-list__item.is-success:active {
  696. /* click时 */
  697. outline-width: 0; }
  698. .el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip, .el-upload-list__item.is-success:active .el-icon-close-tip {
  699. display: none; }
  700. .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 {
  701. display: none; }
  702. .el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label {
  703. display: block; }
  704. .el-upload-list__item-name {
  705. color: #606266;
  706. display: block;
  707. margin-right: 40px;
  708. overflow: hidden;
  709. padding-left: 4px;
  710. text-overflow: ellipsis;
  711. -webkit-transition: color .3s;
  712. transition: color .3s;
  713. white-space: nowrap; }
  714. .el-upload-list__item-name [class^="el-icon"] {
  715. height: 100%;
  716. margin-right: 7px;
  717. color: #909399;
  718. line-height: inherit; }
  719. .el-upload-list__item-status-label {
  720. position: absolute;
  721. right: 5px;
  722. top: 0;
  723. line-height: inherit;
  724. display: none; }
  725. .el-upload-list__item-delete {
  726. position: absolute;
  727. right: 10px;
  728. top: 0;
  729. font-size: 12px;
  730. color: #606266;
  731. display: none; }
  732. .el-upload-list__item-delete:hover {
  733. color: #1b73a5; }
  734. .el-upload-list--picture-card {
  735. margin: 0;
  736. display: inline;
  737. vertical-align: top; }
  738. .el-upload-list--picture-card .el-upload-list__item {
  739. overflow: hidden;
  740. background-color: #fff;
  741. border: 1px solid #c0ccda;
  742. border-radius: 6px;
  743. -webkit-box-sizing: border-box;
  744. box-sizing: border-box;
  745. width: 148px;
  746. height: 148px;
  747. margin: 0 8px 8px 0;
  748. display: inline-block; }
  749. .el-upload-list--picture-card .el-upload-list__item .el-icon-check,
  750. .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  751. color: #fff; }
  752. .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
  753. display: none; }
  754. .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label {
  755. display: none; }
  756. .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  757. display: block; }
  758. .el-upload-list--picture-card .el-upload-list__item-name {
  759. display: none; }
  760. .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  761. width: 100%;
  762. height: 100%; }
  763. .el-upload-list--picture-card .el-upload-list__item-status-label {
  764. position: absolute;
  765. right: -15px;
  766. top: -6px;
  767. width: 40px;
  768. height: 24px;
  769. background: #13ce66;
  770. text-align: center;
  771. -webkit-transform: rotate(45deg);
  772. transform: rotate(45deg);
  773. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  774. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  775. .el-upload-list--picture-card .el-upload-list__item-status-label i {
  776. font-size: 12px;
  777. margin-top: 11px;
  778. -webkit-transform: rotate(-45deg);
  779. transform: rotate(-45deg); }
  780. .el-upload-list--picture-card .el-upload-list__item-actions {
  781. position: absolute;
  782. width: 100%;
  783. height: 100%;
  784. left: 0;
  785. top: 0;
  786. cursor: default;
  787. text-align: center;
  788. color: #fff;
  789. opacity: 0;
  790. font-size: 20px;
  791. background-color: rgba(0, 0, 0, 0.5);
  792. -webkit-transition: opacity .3s;
  793. transition: opacity .3s; }
  794. .el-upload-list--picture-card .el-upload-list__item-actions::after {
  795. display: inline-block;
  796. content: "";
  797. height: 100%;
  798. vertical-align: middle; }
  799. .el-upload-list--picture-card .el-upload-list__item-actions span {
  800. display: none;
  801. cursor: pointer; }
  802. .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  803. margin-left: 15px; }
  804. .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete {
  805. position: static;
  806. font-size: inherit;
  807. color: inherit; }
  808. .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  809. opacity: 1; }
  810. .el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  811. display: inline-block; }
  812. .el-upload-list--picture-card .el-progress {
  813. top: 50%;
  814. left: 50%;
  815. -webkit-transform: translate(-50%, -50%);
  816. transform: translate(-50%, -50%);
  817. bottom: auto;
  818. width: 126px; }
  819. .el-upload-list--picture-card .el-progress .el-progress__text {
  820. top: 50%; }
  821. .el-upload-list--picture .el-upload-list__item {
  822. overflow: hidden;
  823. z-index: 0;
  824. background-color: #fff;
  825. border: 1px solid #c0ccda;
  826. border-radius: 6px;
  827. -webkit-box-sizing: border-box;
  828. box-sizing: border-box;
  829. margin-top: 10px;
  830. padding: 10px 10px 10px 90px;
  831. height: 92px; }
  832. .el-upload-list--picture .el-upload-list__item .el-icon-check,
  833. .el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  834. color: #fff; }
  835. .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label {
  836. background: transparent;
  837. -webkit-box-shadow: none;
  838. box-shadow: none;
  839. top: -2px;
  840. right: -12px; }
  841. .el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  842. display: block; }
  843. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
  844. line-height: 70px;
  845. margin-top: 0; }
  846. .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i {
  847. display: none; }
  848. .el-upload-list--picture .el-upload-list__item-thumbnail {
  849. vertical-align: middle;
  850. display: inline-block;
  851. width: 70px;
  852. height: 70px;
  853. float: left;
  854. position: relative;
  855. z-index: 1;
  856. margin-left: -80px; }
  857. .el-upload-list--picture .el-upload-list__item-name {
  858. display: block;
  859. margin-top: 20px; }
  860. .el-upload-list--picture .el-upload-list__item-name i {
  861. font-size: 70px;
  862. line-height: 1;
  863. position: absolute;
  864. left: 9px;
  865. top: 10px; }
  866. .el-upload-list--picture .el-upload-list__item-status-label {
  867. position: absolute;
  868. right: -17px;
  869. top: -7px;
  870. width: 46px;
  871. height: 26px;
  872. background: #13ce66;
  873. text-align: center;
  874. -webkit-transform: rotate(45deg);
  875. transform: rotate(45deg);
  876. -webkit-box-shadow: 0 1px 1px #ccc;
  877. box-shadow: 0 1px 1px #ccc; }
  878. .el-upload-list--picture .el-upload-list__item-status-label i {
  879. font-size: 12px;
  880. margin-top: 12px;
  881. -webkit-transform: rotate(-45deg);
  882. transform: rotate(-45deg); }
  883. .el-upload-list--picture .el-progress {
  884. position: relative;
  885. top: -7px; }
  886. .el-upload-cover {
  887. position: absolute;
  888. left: 0;
  889. top: 0;
  890. width: 100%;
  891. height: 100%;
  892. overflow: hidden;
  893. z-index: 10;
  894. cursor: default; }
  895. .el-upload-cover::after {
  896. display: inline-block;
  897. content: "";
  898. height: 100%;
  899. vertical-align: middle; }
  900. .el-upload-cover img {
  901. display: block;
  902. width: 100%;
  903. height: 100%; }
  904. .el-upload-cover__label {
  905. position: absolute;
  906. right: -15px;
  907. top: -6px;
  908. width: 40px;
  909. height: 24px;
  910. background: #13ce66;
  911. text-align: center;
  912. -webkit-transform: rotate(45deg);
  913. transform: rotate(45deg);
  914. -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  915. box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); }
  916. .el-upload-cover__label i {
  917. font-size: 12px;
  918. margin-top: 11px;
  919. -webkit-transform: rotate(-45deg);
  920. transform: rotate(-45deg);
  921. color: #fff; }
  922. .el-upload-cover__progress {
  923. display: inline-block;
  924. vertical-align: middle;
  925. position: static;
  926. width: 243px; }
  927. .el-upload-cover__progress + .el-upload__inner {
  928. opacity: 0; }
  929. .el-upload-cover__content {
  930. position: absolute;
  931. top: 0;
  932. left: 0;
  933. width: 100%;
  934. height: 100%; }
  935. .el-upload-cover__interact {
  936. position: absolute;
  937. bottom: 0;
  938. left: 0;
  939. width: 100%;
  940. height: 100%;
  941. background-color: rgba(0, 0, 0, 0.72);
  942. text-align: center; }
  943. .el-upload-cover__interact .btn {
  944. display: inline-block;
  945. color: #fff;
  946. font-size: 14px;
  947. cursor: pointer;
  948. vertical-align: middle;
  949. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  950. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  951. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  952. 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);
  953. margin-top: 60px; }
  954. .el-upload-cover__interact .btn i {
  955. margin-top: 0; }
  956. .el-upload-cover__interact .btn span {
  957. opacity: 0;
  958. -webkit-transition: opacity .15s linear;
  959. transition: opacity .15s linear; }
  960. .el-upload-cover__interact .btn:not(:first-child) {
  961. margin-left: 35px; }
  962. .el-upload-cover__interact .btn:hover {
  963. -webkit-transform: translateY(-13px);
  964. transform: translateY(-13px); }
  965. .el-upload-cover__interact .btn:hover span {
  966. opacity: 1; }
  967. .el-upload-cover__interact .btn i {
  968. color: #fff;
  969. display: block;
  970. font-size: 24px;
  971. line-height: inherit;
  972. margin: 0 auto 5px; }
  973. .el-upload-cover__title {
  974. position: absolute;
  975. bottom: 0;
  976. left: 0;
  977. background-color: #fff;
  978. height: 36px;
  979. width: 100%;
  980. overflow: hidden;
  981. text-overflow: ellipsis;
  982. white-space: nowrap;
  983. font-weight: normal;
  984. text-align: left;
  985. padding: 0 10px;
  986. margin: 0;
  987. line-height: 36px;
  988. font-size: 14px;
  989. color: #303133; }
  990. .el-upload-cover + .el-upload__inner {
  991. opacity: 0;
  992. position: relative;
  993. z-index: 1; }