錯誤修正(顏色按鈕傳遞物件錯誤、文字靠右、更換圖片改置中)

src/views/Card/Edit.vue

@@ -495,10 +495,8 @@ const handleSubmit = async () => {
                             :src="form.json5.cards[form.page - 1].image"
                             alt=""
                           />
-                          <p
+                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
-                            class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill"
+                            <i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
-                          >
-                            <i class="fa-solid fa-arrow-left"></i> 點擊更換圖片
                           </p>
                         </div>
                       </template>
@@ -508,11 +506,8 @@ const handleSubmit = async () => {
                             class="upload-img"
                             src="@/assets/images/upload.jpg"
                           />
-                          <p class="ml-3">請上傳圖片</p>
+                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
-                          <p
+                            <i class="fa-solid fa-arrow-up"></i> 請上傳圖片
-                            class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill"
-                          >
-                            請上傳圖片
                           </p>
                         </div>
                       </template>
@@ -581,6 +576,7 @@ const handleSubmit = async () => {
                   v-model="form.json5.cards[form.page - 1].titleColor"
                   label="標題文字顏色"
                   id="vcard-titleColor"
+                  input-align="right"
                   placeholder="請輸入標題文字的色碼，如：#333333"
                   :border="false"
                   :rules="[{ required: true, message: '標題文字色碼必填' }]"
@@ -641,6 +637,7 @@ const handleSubmit = async () => {
                   v-model="form.json5.cards[form.page - 1].descColor"
                   label="說明文字顏色"
                   id="vcard-descColor"
+                  input-align="right"
                   placeholder="請輸入說明文字的色碼，如：#333333"
                   :rules="[{ required: true, message: '說明文字色碼必填' }]"
                 >
@@ -750,19 +747,18 @@ const handleSubmit = async () => {
                         <input
                           v-model="btn.color"
                           type="color"
-                          class="form-control-color"
+                          class="colorCube"
                         />
                       </template>
                     </van-field>
 
                     <van-field
-                      v-model="btn.color"
+                      v-model="btn.btnHeight"
-                      label="按鈕背景顏色"
+                      label="按鈕大小"
-                      id="vcard-titleColor"
+                      id="vcard-btnHeight"
                       input-align="right"
-                      placeholder="請輸入標題文字的色碼，如：#333333"
                       :border="false"
-                      :rules="[{ required: true, message: '標題文字色碼必填' }]"
+                      :rules="[{ required: true, message: '按鈕大小必填' }]"
                     >
                       <template #input>
                         <van-radio-group
@@ -797,8 +793,8 @@ const handleSubmit = async () => {
 </template>
 
 <style lang="less" scoped>
-.form-control-color,
+.colorCube,
-.form-control-color:valid {
+.colorCube:valid {
   appearance: none;
   background: 0 0;
   border: 1px solid #ced4da;
@@ -810,11 +806,16 @@ const handleSubmit = async () => {
 .flex-section {
   width: 100%;
 }
-.upload-main {
+.van-field__control{
-  .upload-img {
+  justify-content: center;
-    margin: 5px 0;
+  .upload-main {
-    width: 250px;
+    flex-direction: column;
+    .upload-img {
+      margin: 5px 0;
+      width: 250px;
+    }
   }
+
 }