feat(image-gallery) support delete background image

ly525
1 parent 3c40c452
Showing 3 changed files with 24 additions and 11 deletions
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/core/support/image-gallery/gallery.js
front-end/h5/src/components/core/support/image-gallery/gallery.scss
@@ -155,6 +155,10 @@
   }
 }
  
+.ant-tabs-nav .ant-tabs-tab {
+  padding: 12px 0 !important;
+}
+
 // 动画编辑面板定制
 #animation-edit-panel {
   .ant-collapse-header {
@@ -38,6 +38,9 @@ export default {
     }
   },
   methods: {
+    showGallery () {
+      this.innerVisible = true
+    },
     handleClose () {
       this.innerVisible = false
     },
@@ -63,24 +66,25 @@ export default {
     renderDefaultActivator () {
       const activatorWithoutImg = (
         <div
-          class="default-activator cursor-pointer "
-          onClick={() => { this.innerVisible = true }}
+          class="default-activator cursor-pointer empty-bg-activator"
+          onClick={this.showGallery}
         >
           <a-icon type="plus" />
         </div>
       )
  
       const activatorWithImg = (
-        <div
-          class="default-activator cursor-pointer "
-          onClick={() => { this.innerVisible = true }}
-        >
-          <img src={this.value} />
+        <div onClick={this.showGallery}>
+          <div class="default-activator cursor-pointer "><img src={this.value} width="50%" style={{ margin: 'auto' }} /></div>
           <div class="flex-space-between" style="margin-top: 8px;">
-            <a-button>更换图片</a-button>
-            <a-button onClick={e => {
+            <a-button size="small">更换</a-button>
+            <a-button size="small" onClick={e => {
+              e.stopPropagation()
+            }}>裁剪</a-button>
+            <a-button size="small" onClick={(e) => {
               e.stopPropagation()
-            }}>裁剪图片</a-button>
+              this.handleSelectImage({ previewURL: '' })
+            }}>移除</a-button>
           </div>
         </div>
       )
@@ -3,7 +3,12 @@
   text-align: center;
  
   img {
-    width: 100%;
+    width: 50%;
     border: 1px dashed #ccc;
   }
+}
+
+.empty-bg-activator {
+  height: 178px;
+  line-height: 178px;
 }
 \ No newline at end of file