修改按钮选中和未选中状态布局样式

src/components/EditPanel.vue

@@ -38,31 +38,36 @@
       <div v-show="panelState === 11||panelState===15">
 
         <div
-          style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
+          style="vertical-align: middle;display: flex; flex-direction: column; padding: 12px 0; border-bottom: #E2E4EE solid 1px; align-items: center"
           v-show="panelState == 15">
-          <div>
-            <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+          <div style="display: flex;flex-direction: row;background:rgba(244,246,255,1);
+          border-radius:8px; padding: 12px;">
+            <div style="display: flex; flex-direction: column; align-items: center">
+              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
               'background-position': 'center',
               'background-size': 'contain'}"></div>
-          </div>
-          <div style="display:flex; flex-direction: column;margin-left: 16px;">
-            <span style="font-size:14px;
-            font-family:MicrosoftYaHei;
-            margin-bottom: 4px;
-            color:rgba(100,107,129,1);
-            line-height:19px;">当前图片</span>
-            <span style="font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(100,107,129,1);
-            line-height:19px;">
-              {{element.imgSrc|currentImageName}}
-            </span>
+              <span style="font-size:12px;
+              font-family:MicrosoftYaHei;
+              color:rgba(51,51,51,1);
+              display: block;
+              line-height:16px;">未选中状态</span>
+            </div>
 
-            <label style="display: block;
-            cursor: pointer; width:108px; position: relative;
+            <div style="margin-left: 14px; display: flex; flex-direction: column; align-items: center">
+              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
+              <span style="font-size:12px;
+              font-family:MicrosoftYaHei;
+              color:rgba(51,51,51,1);
+              line-height:16px;">选中状态</span>
+            </div>
+          </div>
+          <label style="display: block;
+            cursor: pointer; width:166px; position: relative;
             margin-bottom: 12px;
               height:28px;">
-              <div @click="showSelectedPicOrUnSelectedPic" style="width:108px;
+            <div @click="showSelectedPicOrUnSelectedPic" style="width:166px;
               height:28px;
               background:rgba(78,93,255,1);
               border-radius:14px;font-size:14px;
@@ -70,12 +75,11 @@
               color:rgba(255,255,255,1);
               display: flex;
               justify-content: center;
-              line-height:28px;">替换元素
-              </div>
-              <!-- <input style="display: none;position: absolute;top: 0px;" type="file" @change="fileChange"
+              line-height:28px;">替换按钮样式
+            </div>
+            <!-- <input style="display: none;position: absolute;top: 0px;" type="file" @change="fileChange"
                 multiple="false"> -->
-            </label>
-          </div>
+          </label>
         </div>
         <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
           <div style="font-size: 12px; font-family:MicrosoftYaHei;
@@ -719,7 +723,7 @@
       panelState: {
         type: Number
       },
-      showSelectedPicOrUnSelectedPic:{
+      showSelectedPicOrUnSelectedPic: {
         type: Function
       }
     },