From bea8e9cefe3300ab852e6aaa1e368b974361e69a Mon Sep 17 00:00:00 2001
From: Wayne Hsu <wwayne.hsu@gmail.com>
Date: Sat, 18 Feb 2023 11:39:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=96=E7=89=87=E5=A4=A7=E5=B0=8F=E6=96=BC?=
 =?UTF-8?q?=E5=89=AA=E8=A3=81=E6=99=82=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Card/Edit.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue
index c36a34d..25d7642 100644
--- a/src/views/Card/Edit.vue
+++ b/src/views/Card/Edit.vue
@@ -130,7 +130,7 @@
                   <br />
                   <van-switch v-model="form.json5.cards[form.page - 1].isShow" />
                 </div>
-                <div class="form-group mb-2 was-validated">
+                <!-- <div class="form-group mb-2 was-validated">
                   <label for="vcard-ratio">圖片長寬</label>
                   <div>
                     <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
@@ -139,7 +139,7 @@
                       <button type="button" class="btn btn-outline-success" @click="setRatio(3)" :class="{active: form.json5.cards[form.page - 1].ratio =='4:5'}">直向4:5</button>                      
                     </div>
                   </div>
-                </div>
+                </div> -->
 
                 <div class="form-group mb-2 was-validated">
                   <label for="vcard-image"> 卡片圖片 </label>
@@ -464,12 +464,19 @@
       />
     </div>
     <div class="crop-btn">
-      <van-button type="primary" size="small" plain @click="onClose"
+      <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+                      <button type="button" class="btn btn-outline-success" @click="setRatio(1)" :class="{active: form.json5.cards[form.page - 1].ratio =='4:3'}">橫向4:3</button>
+                      <button type="button" class="btn btn-outline-success" @click="setRatio(2)" :class="{active: form.json5.cards[form.page - 1].ratio =='1:1'}">方形1:1</button>
+                      <button type="button" class="btn btn-outline-success" @click="setRatio(3)" :class="{active: form.json5.cards[form.page - 1].ratio =='4:5'}">直向4:5</button>                      
+      </div>
+      <div>
+        <van-button type="primary" size="small" plain @click="onClose"
         >取消</van-button
       >
       <van-button type="success" size="small" plain @click="onCrop"
         >剪裁</van-button
-      >
+      >        
+      </div>
     </div>
   </div>
 </template>
@@ -1039,12 +1046,27 @@ export default defineComponent({
   }
 
   .crop-btn {
-    background-color: #666;
     text-align: center;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
   }
 }
 
 .flex-section {
   width: 100%;
 }
+
+.crop-btn{
+  display: flex;
+  justify-content: space-between;
+  background-color: #ddd;
+  div:child-nth(1){
+
+  }
+  
+  div:child-nth(2){
+
+  }
+}
 </style>