前端ui样式优化

web/src/view/example/customer/customer.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <div class="search-term">
-      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
-        <el-form-item>
-          <el-button size="mini" type="primary" icon="el-icon-search" @click="openDialog">新增</el-button>
-        </el-form-item>
-      </el-form>
+      <div class="gva-btn-list">
+        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
+      </div>
     </div>
     <el-table
       ref="multipleTable"
@@ -156,5 +154,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>

web/src/view/example/excel/excel.vue

@@ -8,10 +8,10 @@
         :on-success="loadExcel"
         :show-file-list="false"
       >
-        <el-button size="small" type="primary" icon="el-icon-upload2">导入</el-button>
+        <el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
       </el-upload>
-      <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
-      <el-button class="excel-btn" size="small" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
+      <el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
+      <el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
     </div>
     <el-table :data="tableData" border row-key="ID" stripe>
       <el-table-column label="ID" min-width="100" prop="ID" />
@@ -74,6 +74,7 @@ export default {
 .btn-list{
   display: flex;
   margin-bottom: 12px;
+  justify-content: flex-end;
   .excel-btn+.excel-btn{
     margin-left: 12px;
   }

web/src/view/example/upload/upload.vue

@@ -1,28 +1,26 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading">
     <div class="upload">
-      <el-row>
-        <el-col :span="12">
-          <el-upload
-            :action="`${path}/fileUploadAndDownload/upload`"
-            :before-upload="checkFile"
-            :headers="{ 'x-token': token }"
-            :on-error="uploadError"
-            :on-success="uploadSuccess"
-            :show-file-list="false"
-          >
-            <el-button size="small" type="primary">点击上传</el-button>
-            <template #tip>
-              <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-            </template>
-          </el-upload>
-        </el-col>
-        <el-col :span="12">
-          带压缩的上传, (512(k)为压缩限制)
-          <upload-image v-model="imageUrl" :file-size="512" :max-w-h="1080" @on-success="getTableData" />
-          已上传文件 {{ imageUrl }}
-        </el-col>
-      </el-row>
+      <div class="upload-box">
+        <el-upload
+          :action="`${path}/fileUploadAndDownload/upload`"
+          :before-upload="checkFile"
+          :headers="{ 'x-token': token }"
+          :on-error="uploadError"
+          :on-success="uploadSuccess"
+          :show-file-list="false"
+          class="upload-btn"
+        >
+          <el-button size="mini" type="primary">普通上传</el-button>
+        </el-upload>
+        <upload-image
+          v-model="imageUrl"
+          :file-size="512"
+          :max-w-h="1080"
+          class="upload-btn"
+          @on-success="getTableData"
+        />
+      </div>
 
       <el-table :data="tableData" border stripe>
         <el-table-column label="预览" width="100">
@@ -127,13 +125,13 @@ export default {
       this.fullscreenLoading = true
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+      const isLt2M = file.size / 1024 / 1024 < 0.5
       if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 JPG或png 格式!')
+        this.$message.error('上传图片只能是 jpg或png 格式!')
         this.fullscreenLoading = false
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
         this.fullscreenLoading = false
       }
       return (isPng || isJPG) && isLt2M