feat(Luma): 加上传前后帧调换功能

web/src/assets/css/luma.styl

@@ -21,6 +21,7 @@
       flex-flow row
       padding-bottom 10px
       justify-content center
+      align-items center
 
       .item {
         position relative
@@ -45,8 +46,16 @@
           }
         }
       }
+
+      .btn-swap {
+        margin-right 10px
+        .icon{
+          fill #fff
+        }
+      }
     }
 
+
     .prompt-container {
       width: 100%;
       .input-container {
@@ -131,6 +140,7 @@
 
         .video-box {
           width 100%
+          aspect-ratio: 16/9;
           border-radius 10px
           video,img {
             width: 100%;

web/src/views/Luma.vue

@@ -2,15 +2,21 @@
   <div class="page-luma">
     <div class="prompt-box">
       <div class="images">
-        <div v-for="img in images" :key="img" class="item">
-          <el-image :src="img" fit="cover"/>
-          <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
-        </div>
+        <template v-for="(img, index) in images" :key="img">
+          <div class="item">
+            <el-image :src="img" fit="cover"/>
+            <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
+          </div>
+          <div class="btn-swap" v-if="images.length == 2 && index == 0">
+            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" @click="switchReverse">
+              <path d="M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z"></path>
+            </svg>
+          </div>
+        </template>
       </div>
       <div class="prompt-container">
         <div class="input-container">
-          <div class="upload-icon">
-
+          <div class="upload-icon" v-if="images.length < 2">
             <el-upload
                 class="avatar-uploader"
                 :auto-upload="true"
@@ -160,6 +166,10 @@ const remove = (img) => {
   images.value = images.value.filter(item => item !== img)
 }
 
+const switchReverse = () => {
+  images.value = images.value.reverse()
+}
+
 
 </script>