Merge branch 'front-dev' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/src/components/Payment.vue

@@ -49,35 +49,38 @@ async function ecpay() {
 </script>
 
 <template>
-  <div class="payment-item me-6">
-    <span>分鐘數：</span>
-    <v-btn
-      density="compact"
-      icon="remove"
-      color="grey"
-      class="mx-2"
-      @click="decrement"
-    ></v-btn>
-    <span class="px-2">{{ credit }}</span>
+  <div class="d-flex align-center flex-wrap">
+    <div class="payment-item me-6 mt-3">
+      <span>分鐘數：</span>
+      <v-btn
+        density="compact"
+        icon="remove"
+        color="grey"
+        class="mx-2"
+        @click="decrement"
+      ></v-btn>
+      <span class="px-2">{{ credit }}</span>
+      <v-btn
+        density="compact"
+        icon="add"
+        color="grey"
+        class="mx-2"
+        @click="increment"
+      ></v-btn>
+      <span class="ms-2">NT＄{{ 500 * credit }}</span>
+    </div>
+
     <v-btn
-      density="compact"
-      icon="add"
-      color="grey"
-      class="mx-2"
-      @click="increment"
-    ></v-btn>
-    <span class="ms-2">NT＄{{ 500 * credit }}</span>
+      @click="ecpay"
+      variant="flat"
+      color="primary"
+      class="px-4 mt-3"
+      prepend-icon="add"
+      :loading="isLoading"
+      >我要加值</v-btn
+    >
   </div>
 
-  <v-btn
-    @click="ecpay"
-    variant="flat"
-    color="primary"
-    class="px-4"
-    prepend-icon="add"
-    :loading="isLoading"
-    >我要加值</v-btn
-  >
   <div id="pay-form"></div>
 </template>
 

frontend/src/views/main/Dashboard.vue

@@ -99,7 +99,7 @@ const greetedUser = computed(() => {
             ><small>秒</small>
           </v-card-text>
           <v-divider></v-divider>
-          <v-card-actions class="d-flex align-center mt-3">
+          <v-card-actions class="d-flex align-center">
             <Payment />
             <!-- <v-btn
               variant="flat"