Ver Fonte

fix(upload): thumbnail

Casper Dai há 3 anos atrás
pai
commit
1c61c592c5

+ 14 - 9
src/layout/components/Navbar/UploadDashboard/FileProgress.vue

@@ -6,10 +6,10 @@
       class="l-flex--row c-progress-list__item"
     >
       <div
-        class="l-flex__none c-progress-list__thumbnail o-thumbnail"
+        class="l-flex__none c-sibling-item o-thumbnail has-bg"
         :style="{ 'background-image': file.url }"
       />
-      <div class="l-flex__auto l-flex--col">
+      <div class="l-flex__auto l-flex--col c-sibling-item">
         <div class="c-progress-list__tip">
           <div class="l-flex__auto c-progress-list__name u-ellipsis">{{ file.name }}</div>
           <div class="l-flex__none c-progress-list__percent">{{ file.percentage }}%</div>
@@ -105,10 +105,6 @@ export default {
     }
   }
 
-  &__thumbnail {
-    margin-right: $spacing;
-  }
-
   &__tip {
     display: flex;
     align-items: flex-end;
@@ -147,15 +143,24 @@ export default {
   .is-processing {
     ::v-deep {
       .el-progress-bar__outer::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         background-size: 3em 3em;
-        background-image: linear-gradient(90deg, transparent 0em, transparent 1em, $blue 1em, $blue 2em, transparent 2em, transparent 3em, $blue 3em);
-        animation: move .3s linear infinite;
+        background-image: linear-gradient(
+          90deg,
+          transparent 0em,
+          transparent 1em,
+          $blue 1em,
+          $blue 2em,
+          transparent 2em,
+          transparent 3em,
+          $blue 3em
+        );
+        animation: move 0.3s linear infinite;
       }
 
       .el-progress-bar__inner {