From 4a09da3a253c6d4168e2a93b5293289ed1e02c80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=8F=8C=E6=98=8E?= <husm@pvc123.com>
Date: Mon, 2 Sep 2024 17:33:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(Luma):=20=E5=8A=A0=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=89=8D=E5=90=8E=E5=B8=A7=E8=B0=83=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/luma.styl | 10 ++++++++++
 web/src/views/Luma.vue       | 22 ++++++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 7d773b3f..62f82065 100644
--- a/web/src/assets/css/luma.styl
+++ b/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%;
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 6fa1df0d..b3760018 100644
--- a/web/src/views/Luma.vue
+++ b/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>