@jx3box/jx3box-common-ui 5.7.4 → 5.7.7

package/assets/css/header.less

@@ -251,7 +251,7 @@ body {
     }
     .mt(0px) !important;
 }
-@media screen and (max-width: @ipad) {
+@media screen and (max-width: @mininote) {
     .c-header-nav {
         display: none;
     }
@@ -794,4 +794,4 @@ body {
     top: @header-height;
     left: 0;
     position: absolute;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "5.7.4",
+  "version": "5.7.7",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/src/upload/upload_banner.vue

@@ -9,44 +9,54 @@
         <div v-else class="u-upload el-upload el-upload--picture-card" @click="select">
             <i class="el-icon-plus"></i>
         </div>
-        <input class="u-upload-input" type="file" @change="upload" ref="uploadInput" accept=".jpg, .jpeg, .png, .gif, .bmp" />
+        <input
+            class="u-upload-input"
+            type="file"
+            @change="upload"
+            ref="uploadInput"
+            accept=".jpg, .jpeg, .png, .gif, .bmp,.webp"
+        />
     </div>
 </template>
 
 <script>
 import { getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { uploadImage } from '../../service/cms.js';
+import { uploadImage } from "../../service/cms.js";
 export default {
-    name: 'upload-banner',
+    name: "upload-banner",
     props: {
         content: {
             type: String,
-            default: '',
+            default: "",
         },
         info: {
             type: String,
-            default: '用于展示tips',
+            default: "用于展示tips",
         },
         size: {
             type: [Array, Number],
             default: 148,
-        }
+        },
+        maxSize: {
+            type: Number,
+            default: 10,
+        },
     },
     data() {
         return {
-            data: this.content || '',
+            data: this.content || "",
         };
     },
     model: {
-        prop: 'content',
-        event: 'input',
+        prop: "content",
+        event: "input",
     },
     watch: {
         content(val) {
             this.data = val;
         },
         data(val) {
-            this.$emit('input', val);
+            this.$emit("input", val);
         },
     },
     computed: {
@@ -60,25 +70,31 @@ export default {
         uploadStyle() {
             let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
             return {
-                width: size[0] + 'px',
-                height: size[1] + 'px',
+                width: size[0] + "px",
+                height: size[1] + "px",
             };
         },
     },
     methods: {
         select() {
-            this.fileInput.dispatchEvent(new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-                view: window,
-            }));
+            this.fileInput.dispatchEvent(
+                new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                })
+            );
         },
         upload() {
             const file = this.fileInput.files[0];
             if (!file) return;
+            if (file.size > this.maxSize * 1024 * 1024) {
+                this.$message.error("图片大小不能超过" + this.maxSize + "M");
+                return;
+            }
             const formData = new FormData();
-            formData.append('avatar', file);
-            uploadImage(formData).then(res => {
+            formData.append("avatar", file);
+            uploadImage(formData).then((res) => {
                 this.data = res.data.data[0];
                 this.$message({
                     message: "上传成功",
@@ -87,16 +103,16 @@ export default {
             });
         },
         remove() {
-            this.data = '';
+            this.data = "";
         },
-    }
-}
+    },
+};
 </script>
 
 <style lang="less">
 .c-upload-banner {
-    .u-tip{
-        padding:5px 15px;
+    .u-tip {
+        padding: 5px 15px;
     }
     .u-upload {
         .pr;