Browse Source

修改优化

zhengjinyi 5 years ago
parent
commit
da0ec39bf3

+ 69 - 61
src/components/Ctiy/index.vue

@@ -1,46 +1,52 @@
 <template>
-  <div>
-    <el-form-item :rules="rules" label="*会所地址:" :label-width="'130px'" style="width: 640px;text-align: right;">
-      <el-select
-        v-model="province"
-        placeholder="省级地区"
-        style="width:167px;"
-        @change="choseProvince"
-      >
-        <el-option
-          v-for="item in provinceArray"
-          :key="item.provinceID"
-          :label="item.name"
-          :value="item.provinceID"
-        />
-      </el-select>
-      <el-select
-        v-model="city"
-        placeholder="市级地区"
-        style="width:167px;"
-        @change="choseCity"
-      >
-        <el-option
-          v-for="item in cityArray"
-          :key="item.cityID"
-          :label="item.name"
-          :value="item.cityID"
-        />
-      </el-select>
-      <el-select
-        v-model="town"
-        placeholder="区级地区"
-        style="width:167px;"
-        @change="choseBlock"
-      >
-        <el-option
-          v-for="item in townArray"
-          :key="item.townID"
-          :label="item.name"
-          :value="item.townID"
-        />
-      </el-select>
-    </el-form-item>
+  <div class="address">
+    <el-form :rules="rules" :model="from" :label-width="'130px'" style="width: 670px;text-align: right;">
+      <el-form-item label="会所地址:" prop="province" style="float: left;width: 300px;margin-right: 8px;">
+        <el-select
+          v-model="from.province"
+          placeholder="省级地区"
+          style="width:167px;"
+          @change="choseProvince"
+        >
+          <el-option
+            v-for="item in provinceArray"
+            :key="item.provinceID"
+            :label="item.name"
+            :value="item.provinceID"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="city" style="float: left;margin-left: 0;margin-right: 8px;">
+        <el-select
+          v-model="from.city"
+          placeholder="市级地区"
+          style="width:167px;margin-left: 0;"
+          @change="choseCity"
+        >
+          <el-option
+            v-for="item in cityArray"
+            :key="item.cityID"
+            :label="item.name"
+            :value="item.cityID"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="town" style="float: left;margin-left:0;margin-right: 8px;">
+        <el-select
+          v-model="from.town"
+          placeholder="区级地区"
+          style="width:167px;margin-left: 0;"
+          @change="choseBlock"
+        >
+          <el-option
+            v-for="item in townArray"
+            :key="item.townID"
+            :label="item.name"
+            :value="item.townID"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -58,14 +64,14 @@ export default {
   },
   data() {
     return {
-      provinceArray: '',
-      province: '',
-      city: '',
-      cityArr: [],
-      town: '',
-      townArr: [],
-      cityArray: '',
-      townArray: '',
+      provinceArray: [],
+      cityArray: [],
+      townArray: [],
+      from: {
+        province: '',
+        city: '',
+        town: ''
+      },
       rules: {
         province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
         city: [{ required: true, message: '请选择市', trigger: 'blur' }],
@@ -75,9 +81,9 @@ export default {
   },
   created: function() {
     console.log(this.addressData)
-    this.province = this.addressData.province
-    this.city = this.addressData.city
-    this.town = this.addressData.town
+    this.from.province = this.addressData.province
+    this.from.city = this.addressData.city
+    this.from.town = this.addressData.town
     this.getCityData()
   },
   methods: {
@@ -89,16 +95,16 @@ export default {
     },
     // 选省
     choseProvince: function(e) {
-      this.province = e
+      this.from.province = e
       this.townArray = []
       this.cityArray = []
-      this.town = ''
+      this.from.town = ''
       for (var i in this.provinceArray) {
         if (e === this.provinceArray[i].provinceID) {
           const provinceid = { provinceid: this.provinceArray[i].provinceID }
           getCtiy(provinceid).then(response => {
             this.cityArray = response.data
-            this.city = this.cityArray[0].name
+            this.from.city = this.cityArray[0].name
           })
         }
       }
@@ -111,20 +117,22 @@ export default {
           const cityID = { cityid: this.cityArray[j].cityID }
           getTown(cityID).then(response => {
             this.townArray = response.data
-            this.town = this.cityArray[0].name
+            this.from.town = this.cityArray[0].name
           })
         }
       }
     },
     // 选区
     choseBlock: function(e) {
-      this.town = e
-      const addData = { provinceid: this.province, cityid: this.city, townid: this.town }
+      this.from.town = e
+      const addData = { provinceid: this.from.province, cityid: this.from.city, townid: this.from.town }
       this.$emit('addlist', addData)
     }
   }
 }
 </script>
-<style scoped>
-
+<style lang="scss" scoped>
+  .address .el-form-item__content{
+    margin-left: 0 !important;
+  }
 </style>

+ 0 - 140
src/components/Tinymce/components/EditorImages.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
-      上传
-    </el-button>
-    <el-dialog :visible.sync="dialogVisible">
-      <el-upload
-        :multiple="true"
-        :file-list="fileList"
-        :show-file-list="true"
-        :on-remove="handleRemove"
-        :on-success="handleAvatarSuccess"
-        :before-upload="beforeAvatarUpload"
-        class="editor-slide-upload"
-        :action="action"
-        list-type="picture-card"
-      >
-        <el-button size="small" type="primary">
-          点击上传
-        </el-button>
-      </el-upload>
-      <el-button @click="dialogVisible = false">
-        取消
-      </el-button>
-      <el-button type="primary" @click="handleSubmit">
-        确认
-      </el-button>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-// import { getToken } from 'api/qiniu'
-import { uploadFile, getBase64 } from '@/api/other'
-export default {
-  name: 'EditorSlideUpload',
-  props: {
-    color: {
-      type: String,
-      default: '#1890ff'
-    }
-  },
-  data() {
-    return {
-      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
-      dialogVisible: false,
-      listObj: {},
-      fileList: []
-    }
-  },
-  methods: {
-    checkAllSuccess() {
-      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
-    },
-    handleAvatarSuccess(res, file) {
-      getBase64(file.raw).then(res => {
-        uploadFile({ imgStr: res }).then(response => {
-          console.log(response)
-          if (response.code === '1') {
-            this.form.headpic = response.data
-          } else {
-            this.$message.error('上传图片失败')
-          }
-        })
-      })
-    },
-    // 对上传图片的大小、格式进行限制
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isJPG2 = file.type === 'image/jpg'
-      const isPNG = file.type === 'image/png'
-      const isLt5M = file.size / 1024 / 1024 < 5
-      if (!isJPG && !isJPG2 && !isPNG) {
-        this.$message.error('只支持jpg或png格式图片')
-      }
-      if (!isLt5M) {
-        this.$message.error('请上传5MB以内的图片!')
-      }
-      return (isJPG || isJPG2 || isPNG) && isLt5M
-    },
-    handleSubmit() {
-      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
-      if (!this.checkAllSuccess()) {
-        this.$message('请等待所有图像成功上载。如果有网络问题,请刷新页面并重新上传!')
-        return
-      }
-      this.$emit('successCBK', arr)
-      this.listObj = {}
-      this.fileList = []
-      this.dialogVisible = false
-    },
-    handleSuccess(response, file) {
-      console.log(response)
-      console.log(file)
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
-      for (let i = 0, len = objKeyArr.length; i < len; i++) {
-        if (this.listObj[objKeyArr[i]].uid === uid) {
-          this.listObj[objKeyArr[i]].url = response.files.file
-          this.listObj[objKeyArr[i]].hasSuccess = true
-          return
-        }
-      }
-    },
-    handleRemove(file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
-      for (let i = 0, len = objKeyArr.length; i < len; i++) {
-        if (this.listObj[objKeyArr[i]].uid === uid) {
-          delete this.listObj[objKeyArr[i]]
-          return
-        }
-      }
-    },
-    beforeUpload(file) {
-      const _self = this
-      const _URL = window.URL || window.webkitURL
-      const fileName = file.uid
-      this.listObj[fileName] = {}
-      return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.src = _URL.createObjectURL(file)
-        img.onload = function() {
-          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
-        }
-        resolve(true)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.editor-slide-upload {
-  margin-bottom: 20px;
-  /deep/ .el-upload--picture-card {
-    width: 100%;
-  }
-}
-</style>

+ 1 - 1
src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img src="@/assets/avatar.gif" class="user-avatar">
+          <!-- <img src="@/assets/avatar.gif" class="user-avatar"> -->
           <span class="admin-name">{{ adminName }}</span>
           <i class="el-icon-caret-bottom" />
         </div>

+ 42 - 34
src/views/club/editForm.vue

@@ -202,38 +202,46 @@ export default {
 }
 </script>
 <style lang="scss">
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
-  .el-form-item__label{
-      text-align: right !important;
-  }
-  .form-el-upload{
-    width: 180px;
-  }
-  .el-upload__tip{
-    line-height: 20px;
-    color: red;
-    text-align: left;
-  }
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+}
+.avatar {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
+.el-form-item__label{
+    text-align: right !important;
+}
+.form-el-upload{
+  width: 150px;
+}
+.el-upload__tip{
+  margin-top: 0;
+  line-height: 20px;
+  color: red;
+  text-align: left;
+  position: absolute;
+  right: -55%;
+  bottom: 0;
+}
+.address .el-form-item__content{
+  margin-left: 0 !important;
+}
 </style>

+ 10 - 2
src/views/club/form.vue

@@ -23,7 +23,7 @@
       <el-form-item label="营业执照编号:" prop="socialCreditCode" style="width: 500px; text-align: right;">
         <el-input v-model="form.socialCreditCode" placeholder="请填写统一社会信用代码" maxlength="18" />
       </el-form-item>
-      <el-form-item label="营业执照:" prop="imageUrl" style="width:400px;text-align: right;">
+      <el-form-item label="营业执照:" prop="businessLicenseImage" style="width:400px;text-align: right;">
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
@@ -39,7 +39,7 @@
           </el-upload>
         </div>
       </el-form-item>
-      <el-form-item label="门头照:" prop="doorwayImageUrl" style="width:400px; text-align: right;">
+      <el-form-item label="门头照:" prop="headpic" style="width:400px; text-align: right;">
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
@@ -94,6 +94,7 @@ export default {
       rules: {
         name: [{ required: true, message: '会所名称不能为空', trigger: 'blur' }],
         contractMobile: [{ required: true, message: '常用手机号不能为空', trigger: 'blur' }],
+        businessLicenseImage: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
         linkMan: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
         socialCreditCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
         address: [{ required: true, message: '会所详细地址不能为空', trigger: 'blur' }],
@@ -176,6 +177,7 @@ export default {
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  float: left;
 }
 .avatar-uploader .el-upload:hover {
   border-color: #409EFF;
@@ -204,5 +206,11 @@ export default {
   line-height: 20px;
   color: red;
   text-align: left;
+  position: absolute;
+  right: -55%;
+  bottom: 0;
+}
+.address .el-form-item__content{
+  margin-left: 0 !important;
 }
 </style>

+ 6 - 7
src/views/club/list.vue

@@ -3,16 +3,17 @@
     <div class="app-header-search">
       <el-form class="demo-form-inline">
         <el-form-item label="会所名称:" style="width:280px;float: left;">
-          <el-input v-model="listQuery.name" placeholder="请输入会所名称" maxlength="50" style="width:200px;" @keyup.enter.native="handleFilter" />
+          <el-input v-model="listQuery.userName" placeholder="请输入会所名称" maxlength="50" style="width:200px;" @keyup.enter.native="handleFilter" />
         </el-form-item>
         <el-form-item label="联系人:" style="width:230px;float: left;">
-          <el-input v-model="listQuery.linkName" placeholder="请输入联系人姓名" maxlength="10" style="width:150px" @keyup.enter.native="handleFilter" />
+          <el-input v-model="listQuery.linkMan" placeholder="请输入联系人姓名" maxlength="10" style="width:150px" @keyup.enter.native="handleFilter" />
         </el-form-item>
         <el-form-item label="手机号:" style="width:200px;float: left;">
           <el-input v-model="listQuery.bindMobile" placeholder="请输入手机号" maxlength="11" style="width:130px" @keyup.enter.native="handleFilter" />
         </el-form-item>
         <el-form-item label="上线状态:" style="width:190px;float: left;">
           <el-select v-model="listQuery.clubStatus" placeholder="请选择" style="width:100px" value="" @change="handleFilter">
+            <el-option label="全部" value="" />
             <el-option label="已上线" value="90" />
             <el-option label="已下线" value="91" />
           </el-select>
@@ -24,7 +25,6 @@
             value-format="yyyy-MM-dd"
             placeholder="选择日期"
             style="width: 150px;"
-            @change="handleFilter"
           />
           <el-date-picker
@@ -33,7 +33,6 @@
             value-format="yyyy-MM-dd"
             placeholder="选择日期"
             style="width: 150px;"
-            @change="handleFilter"
           />
         </el-form-item>
         <el-form-item style="width:100px;float: left;">
@@ -61,7 +60,7 @@
         </template>
       </el-table-column>
       <el-table-column label="账号" width="150" align="center" prop="account" />
-      <el-table-column label="会所名称" width="200" align="center" prop="name" />
+      <el-table-column label="会所名称" width="200" align="center" prop="userName" />
       <el-table-column label="联系人" width="100" align="center" prop="linkMan" />
       <el-table-column label="手机号" width="110" align="center" prop="bindMobile" />
       <el-table-column class-name="status-col" label="上线状态" width="150" align="center" prop="status">
@@ -131,8 +130,8 @@ export default {
         index: 1,
         pageSize: 20,
         userOrganizeID: this.$store.getters.organizeID,
-        name: '',
-        linkName: '',
+        userName: '',
+        linkMan: '',
         bindMobile: '',
         clubStatus: '',
         startTime: '',

+ 6 - 7
src/views/club/operateList.vue

@@ -4,13 +4,14 @@
     <div class="app-header-search">
       <el-form class="demo-form-inline">
         <el-form-item label="姓名:" style="width:210px;float: left;">
-          <el-input v-model="listQuery.name" placeholder="请输入姓名" maxlength="50" style="width:150px;" @keyup.enter.native="handleFilter" />
+          <el-input v-model="listQuery.linkName" placeholder="请输入姓名" maxlength="50" style="width:150px;" @keyup.enter.native="handleFilter" />
         </el-form-item>
         <el-form-item label="手机号:" style="width:200px;float: left;">
           <el-input v-model="listQuery.mobile" placeholder="请输入手机号" maxlength="11" style="width:130px" @keyup.enter.native="handleFilter" />
         </el-form-item>
         <el-form-item label="状态:" style="width:160px;float: left;">
           <el-select v-model="listQuery.status" placeholder="请选择" style="width:100px" value="" @change="handleFilter">
+            <el-option label="全部" value="" />
             <el-option label="已绑定" value="2" />
             <el-option label="未绑定" value="1" />
           </el-select>
@@ -22,7 +23,6 @@
             value-format="yyyy-MM-dd"
             placeholder="选择日期"
             style="width: 150px;"
-            @change="handleFilter"
           />
           <el-date-picker
@@ -31,7 +31,6 @@
             value-format="yyyy-MM-dd"
             placeholder="选择日期"
             style="width: 150px;"
-            @change="handleFilter"
           />
         </el-form-item>
         <el-form-item style="width:100px;float: left;">
@@ -66,7 +65,7 @@
           <span v-else type="info">----</span>
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="状态" width="80" align="center" prop="status">
+      <el-table-column class-name="status-col" label="状态" width="50" align="center" prop="status">
         <template slot-scope="{row}">
           <i v-if="row.status === '2'" class="el-icon-success" style="color:#67C23A;font-size: 18px;" />
           <!-- <i v-else class="el-icon-error" style="color: #E6A23C;font-size: 20px;" /> -->
@@ -78,7 +77,7 @@
           <span v-else>----</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="OpenID" width="200" prop="openid">
+      <el-table-column align="center" label="OpenID" prop="openid">
         <template slot-scope="{row}">
           <span v-if="row.openid">{{ row.openid }}</span>
           <span v-else>----</span>
@@ -219,10 +218,10 @@ export default {
       this.dialogVisible = true
       if (row.invitationCode) {
         this.dialogStatus = 'updateCode'
-        this.dialogVisibleText = '确定更新邀请码,并短信提醒该人员?'
+        this.dialogVisibleText = '确定生成邀请码吗?生成后将会短信通知该运营人员。'
       } else {
         this.dialogStatus = 'generate'
-        this.dialogVisibleText = '确定生成邀请码,并短信提醒该人员?'
+        this.dialogVisibleText = '确定生成邀请码吗?生成后将会短信通知该运营人员。'
       }
       this.handleConfirmType = 'generate'
       this.codeRemp = {

+ 24 - 22
src/views/goods/category-create.vue

@@ -16,9 +16,10 @@
           <el-upload
             class="avatar-uploader"
             :action="action"
+            :headers="getToken"
             :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
+            :on-success="handleSuccess"
+            :before-upload="beforeUpload"
           >
             <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
@@ -50,16 +51,16 @@
 
 <script>
 import { saveClassify } from '@/api/goods-classify'
-import { uploadFile, getBase64 } from '@/api/other'
 export default {
   data() {
     return {
       msg: '添加分类',
+      action: `${this.baseUrl}/formData/MultiPictareaddData`,
       activeIndex: '2',
       rules: {
         classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
         sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-        // classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
+        classifyImage: [{ required: true, message: '请上传分类图标', trigger: 'change' }],
         postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       },
@@ -78,6 +79,11 @@ export default {
     }
   },
   computed: {
+    getToken() {
+      return {
+        'token': this.$store.getters.token
+      }
+    },
     classifyId: function() {
       return window.location.href.split('/').reverse()[0]
     },
@@ -101,20 +107,11 @@ export default {
       })
     },
     // 上传图标事件
-    handleAvatarSuccess(res, file) {
-      getBase64(file.raw).then(res => {
-        uploadFile({ imgStr: res }).then(response => {
-          console.log(response)
-          if (response.code === '1') {
-            this.temp.classifyImage = response.data
-          } else {
-            this.$message.error('上传图片失败')
-          }
-        })
-      })
+    handleSuccess(response, file) {
+      this.temp.classifyImage = response.data
     },
     // 对上传图片的大小、格式进行限制
-    beforeAvatarUpload(file) {
+    beforeUpload(file) {
       const isJPG = file.type === 'image/jpeg'
       const isJPG2 = file.type === 'image/jpg'
       const isPNG = file.type === 'image/png'
@@ -147,6 +144,7 @@ export default {
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  float: left;
 }
 .avatar-uploader .el-upload:hover {
   border-color: #409EFF;
@@ -154,25 +152,29 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
   text-align: center;
 }
 .avatar {
-  width: 178px;
-  height: 178px;
+  width: 148px;
+  height: 148px;
   display: block;
 }
 .el-form-item__label{
     text-align: right !important;
 }
 .form-el-upload{
-  width: 180px;
+  width: 150px;
 }
 .el-upload__tip{
+  margin-top: 0;
   line-height: 20px;
   color: red;
   text-align: left;
+  position: absolute;
+  right: -50%;
+  bottom: 0;
 }
 </style>

+ 39 - 35
src/views/goods/category-edit.vue

@@ -60,7 +60,7 @@ export default {
       rules: {
         classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
         sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-        // classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
+        classifyImage: [{ required: true, message: '请上传分类图标', trigger: 'change' }],
         postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       },
@@ -149,38 +149,42 @@ export default {
 </script>
 
 <style scoped>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-.el-form-item__label{
-    text-align: right !important;
-}
-.form-el-upload{
-  width: 180px;
-}
-.el-upload__tip{
-  line-height: 20px;
-  color: red;
-  text-align: left;
-}
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    float: left;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 148px;
+    height: 148px;
+    display: block;
+  }
+  .el-form-item__label{
+      text-align: right !important;
+  }
+  .form-el-upload{
+    width: 150px;
+  }
+  .el-upload__tip{
+    line-height: 20px;
+    color: red;
+    text-align: left;
+    position: absolute;
+    right: -50%;
+    bottom: 0;
+  }
 </style>