圖片大小於剪裁時修改

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,6 +464,12 @@
       />
     </div>
     <div class="crop-btn">
+      <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
       >
@@ -472,6 +478,7 @@
       >        
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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>