diff --git a/src/api/modules/merchant.js b/src/api/modules/merchant.js
index d2beaa4..1cbf341 100644
--- a/src/api/modules/merchant.js
+++ b/src/api/modules/merchant.js
@@ -18,7 +18,7 @@ export function setMerchantPermissions(data) {
 
 export function shopBaseConfig(query, data) {
   return request({
-    url: '/shop/base_config',
+    url: '/merchant-api/shop/base_config',
     method: 'put',
     params: query,
     data
@@ -27,7 +27,7 @@ export function shopBaseConfig(query, data) {
 
 export function listPlatformCategory(params) {
   return request({
-    url: '/category/list',
+    url: '/merchant-api/category/list',
     method: 'get',
     params
   })
diff --git a/src/views/modules/operation-management/permission/merchant-account/index.vue b/src/views/modules/operation-management/permission/merchant-account/index.vue
index a27f2a5..3651747 100644
--- a/src/views/modules/operation-management/permission/merchant-account/index.vue
+++ b/src/views/modules/operation-management/permission/merchant-account/index.vue
@@ -8,8 +8,16 @@
       :rules="rules"
       style="max-width: 600px"
     >
-      <el-form-item v-if="!marketId && markets.length > 0" label="选择市场" prop="selectedMarketId">
-        <el-select v-model="form.selectedMarketId" placeholder="请选择市场" style="width: 100%">
+      <el-form-item
+        v-if="!marketId && markets.length > 0"
+        label="选择市场"
+        prop="selectedMarketId"
+      >
+        <el-select
+          v-model="form.selectedMarketId"
+          placeholder="请选择市场"
+          style="width: 100%"
+        >
           <el-option
             v-for="market in markets"
             :key="market.marketId"
@@ -20,7 +28,11 @@
       </el-form-item>
 
       <el-form-item label="操作类型" prop="operationType">
-        <el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
+        <el-select
+          v-model="form.operationType"
+          placeholder="请选择操作类型"
+          style="width: 100%"
+        >
           <el-option label="创建新商户" value="create"></el-option>
           <el-option label="维护商户信息" value="update"></el-option>
         </el-select>
@@ -28,10 +40,17 @@
 
       <template v-if="form.operationType === 'create'">
         <el-form-item label="商户账号" prop="mobile">
-          <el-input v-model="form.mobile" placeholder="请输入商户账号"></el-input>
+          <el-input
+            v-model="form.mobile"
+            placeholder="请输入商户账号"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+          ></el-input>
         </el-form-item>
 
         <h3>店铺基础信息</h3>
@@ -39,7 +58,11 @@
           <el-input v-model="form.name" placeholder="请输入摊位名称"></el-input>
         </el-form-item>
         <el-form-item label="主营类目" prop="categoryId">
-          <el-select v-model="form.categoryId" placeholder="请选择主营类目" style="width: 100%">
+          <el-select
+            v-model="form.categoryId"
+            placeholder="请选择主营类目"
+            style="width: 100%"
+          >
             <el-option
               v-for="item in categoryList"
               :key="item.id"
@@ -50,22 +73,27 @@
         </el-form-item>
         <el-form-item label="摊位背景图" prop="background">
           <el-upload
-            class="avatar-uploader"
+            accept="image/*"
             :action="uploadUrl"
+            list-type="picture-card"
             :headers="uploadHeaders"
             :show-file-list="false"
             :on-success="handleBackgroundSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="form.background" :src="form.background" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <img v-if="form.background" :src="form.background" width="148px" height="148px" />
+            <i v-else class="el-icon-plus"></i>
           </el-upload>
         </el-form-item>
         <el-form-item label="摊位联系电话" prop="contactPhone">
-          <el-input v-model="form.contactPhone" placeholder="请输入联系电话/手机号"></el-input>
+          <el-input
+            v-model="form.contactPhone"
+            placeholder="请输入联系电话/手机号"
+          ></el-input>
         </el-form-item>
         <el-form-item label="摊位照片" prop="fileList">
           <el-upload
+            accept="image/*"
             :action="uploadUrl"
             :headers="uploadHeaders"
             list-type="picture-card"
@@ -78,13 +106,20 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="摊位位置" prop="address">
-          <el-input v-model="form.address" placeholder="请输入摊位位置"></el-input>
+          <el-input
+            v-model="form.address"
+            placeholder="请输入摊位位置"
+          ></el-input>
         </el-form-item>
         <el-form-item label="摊位详细地址" prop="detailAddress">
-          <el-input v-model="form.detailAddress" placeholder="请输入摊位详细地址"></el-input>
+          <el-input
+            v-model="form.detailAddress"
+            placeholder="请输入摊位详细地址"
+          ></el-input>
         </el-form-item>
         <el-form-item label="许可证" prop="permits">
           <el-upload
+            accept="image/*"
             :action="uploadUrl"
             :headers="uploadHeaders"
             list-type="picture-card"
@@ -106,30 +141,41 @@
             range-separator="至"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
-            placeholder="选择时间范围">
+            placeholder="选择时间范围"
+          >
           </el-time-picker>
         </el-form-item>
         <el-form-item label="顾客自提点位置" prop="pickName">
-          <el-input v-model="form.pickName" placeholder="请输入顾客自提点位置"></el-input>
+          <el-input
+            v-model="form.pickName"
+            placeholder="请输入顾客自提点位置"
+          ></el-input>
         </el-form-item>
         <el-form-item label="自提点详细地址" prop="pickAddress">
-          <el-input v-model="form.pickAddress" placeholder="请输入自提点详细地址"></el-input>
+          <el-input
+            v-model="form.pickAddress"
+            placeholder="请输入自提点详细地址"
+          ></el-input>
         </el-form-item>
         <el-form-item label="自提点位置示意图" prop="pickImg">
           <el-upload
-            class="avatar-uploader"
+            accept="image/*"
             :action="uploadUrl"
+            list-type="picture-card"
             :headers="uploadHeaders"
             :show-file-list="false"
             :on-success="handlePickImgSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="form.pickImg" :src="form.pickImg" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <img v-if="form.pickImg" :src="form.pickImg" width="148px" height="148px" />
+            <i v-else class="el-icon-plus"></i>
           </el-upload>
         </el-form-item>
         <el-form-item label="承诺送达自提点时间" prop="promisePickDeliveryTime">
-          <el-input v-model.number="form.promisePickDeliveryTime" placeholder="请输入小时数">
+          <el-input
+            v-model.number="form.promisePickDeliveryTime"
+            placeholder="请输入小时数"
+          >
             <template slot="append">小时以内</template>
           </el-input>
         </el-form-item>
@@ -137,7 +183,12 @@
 
       <template v-if="form.operationType === 'update'">
         <el-form-item label="选择商户账号" prop="merchantId">
-          <el-select v-model="form.merchantId" placeholder="请选择要更新的商户账号" @change="handleAccountChange" style="width: 100%">
+          <el-select
+            v-model="form.merchantId"
+            placeholder="请选择要更新的商户账号"
+            @change="handleAccountChange"
+            style="width: 100%"
+          >
             <el-option
               v-for="item in merchantAccountList"
               :key="item.merchantId"
@@ -147,10 +198,16 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="warning" @click="openResetPasswordDialog">重置密码</el-button>
+          <el-button type="warning" @click="openResetPasswordDialog"
+            >重置密码</el-button
+          >
         </el-form-item>
         <el-form-item label="状态">
-          <el-switch v-model="form.enable" active-text="启用" inactive-text="禁用"></el-switch>
+          <el-switch
+            v-model="form.enable"
+            active-text="启用"
+            inactive-text="禁用"
+          ></el-switch>
         </el-form-item>
       </template>
 
@@ -179,7 +236,11 @@
     >
       <el-form label-width="80px">
         <el-form-item label="新密码">
-          <el-input v-model="newPassword" type="password" placeholder="请输入新密码"></el-input>
+          <el-input
+            v-model="newPassword"
+            type="password"
+            placeholder="请输入新密码"
+          ></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -193,9 +254,16 @@
 <script>
 import {
   getAvailablePermissions,
-  checkUsername,
+  checkUsername
 } from '@/api/modules/subaccount' // Assuming some APIs can be reused
-import { inviteJoin, setMerchantPermissions, shopBaseConfig, listPlatformCategory, getMerchantList, updatePassword } from '@/api/modules/merchant' // New merchant API
+import {
+  inviteJoin,
+  setMerchantPermissions,
+  shopBaseConfig,
+  listPlatformCategory,
+  getMerchantList,
+  updatePassword
+} from '@/api/modules/merchant' // New merchant API
 import { mer_admin } from '@/api/modules/mer_admin'
 import routerConfig from '@/router/full-routers'
 import { mapState } from 'vuex'
@@ -204,52 +272,61 @@ import cookie from 'js-cookie'
 // Function to filter the full menu tree based on available permissions
 const filterTreeByPerms = (tree, availablePerms) => {
   if (!Array.isArray(tree)) {
-    return [];
+    return []
   }
   return tree.reduce((acc, node) => {
-    const children = node.list && node.list.length > 0
-      ? filterTreeByPerms(node.list, availablePerms)
-      : [];
+    const children =
+      node.list && node.list.length > 0
+        ? filterTreeByPerms(node.list, availablePerms)
+        : []
 
     if (availablePerms.includes(node.perms) || children.length > 0) {
       acc.push({
         ...node,
-        list: children,
-      });
+        list: children
+      })
     }
-    return acc;
-  }, []);
-};
+    return acc
+  }, [])
+}
 
 // Function to map the filtered tree to the format required by el-tree
-const mapTreeForElTree = (tree) => {
-  return tree.map((item) => ({
+const mapTreeForElTree = tree => {
+  return tree.map(item => ({
     id: item.perms,
     label: item.name,
-    children: item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : [],
-  }));
-};
+    children:
+      item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : []
+  }))
+}
 
 export default {
   name: 'MerchantAccount',
   data() {
     const validateMobile = (rule, value, callback) => {
       if (this.form.operationType !== 'create') {
-        return callback();
+        return callback()
       }
       if (!value) {
-        return callback(new Error('请输入商户账号'));
+        return callback(new Error('请输入商户账号'))
       }
-      checkUsername(value, this.form.selectedMarketId || this.marketId).then(res => {
-        if (res && res.data && res.data.data && res.data.data.available === true) {
-          callback();
-        } else {
-          callback(new Error('商户账号已被占用'));
-        }
-      }).catch(() => {
-        callback(new Error('商户账号校验失败'));
-      });
-    };
+      checkUsername(value, this.form.selectedMarketId || this.marketId)
+        .then(res => {
+          if (
+            res &&
+            res.data &&
+            res.data.data &&
+            res.data.data.available === true
+          ) {
+            callback()
+          } else {
+            callback(new Error('商户账号已被占用'))
+          }
+        })
+        .catch(() => {
+          callback(new Error('商户账号校验失败'))
+        })
+    }
 
     return {
       resetPasswordDialogVisible: false,
@@ -281,9 +358,12 @@ export default {
         pickAddress: '',
         pickLat: '',
         pickImg: '',
-        promisePickDeliveryTime: '',
+        promisePickDeliveryTime: ''
       },
-      businessHours: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
+      businessHours: [
+        new Date(2016, 9, 10, 0, 0),
+        new Date(2016, 9, 10, 23, 59)
+      ],
       categoryList: [],
       merchantAccountList: [], // To be populated with merchant accounts
       permissionList: [],
@@ -293,180 +373,197 @@ export default {
       },
       rules: {
         operationType: [
-          { required: true, message: "请选择操作类型", trigger: "change" },
+          { required: true, message: '请选择操作类型', trigger: 'change' }
         ],
         mobile: [
-          { required: true, validator: validateMobile, trigger: "blur" },
-        ],
-        password: [
-          { required: true, message: "请输入密码", trigger: "blur" },
-        ],
-        name: [
-          { required: true, message: "请输入摊位名称", trigger: "blur" },
+          { required: true, validator: validateMobile, trigger: 'blur' }
         ],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入摊位名称', trigger: 'blur' }],
         categoryId: [
-          { required: true, message: "请选择主营类目", trigger: "change" },
+          { required: true, message: '请选择主营类目', trigger: 'change' }
         ],
         background: [
-          { required: true, message: "请上传摊位背景图", trigger: "change" },
+          { required: true, message: '请上传摊位背景图', trigger: 'change' }
         ],
         fileList: [
-          { required: true, message: "请上传摊位照片", trigger: "change" },
+          { required: true, message: '请上传摊位照片', trigger: 'change' }
         ],
         address: [
-          { required: true, message: "请输入摊位位置", trigger: "blur" },
+          { required: true, message: '请输入摊位位置', trigger: 'blur' }
         ],
         detailAddress: [
-          { required: true, message: "请输入摊位详细地址", trigger: "blur" },
+          { required: true, message: '请输入摊位详细地址', trigger: 'blur' }
         ],
         pickName: [
-          { required: true, message: "请输入顾客自提点位置", trigger: "blur" },
+          { required: true, message: '请输入顾客自提点位置', trigger: 'blur' }
         ],
         pickAddress: [
-          { required: true, message: "请输入自提点详细地址", trigger: "blur" },
+          { required: true, message: '请输入自提点详细地址', trigger: 'blur' }
         ],
         promisePickDeliveryTime: [
-          { required: true, message: "请输入承诺送达自提点时间", trigger: "blur" },
-          { type: 'number', message: '必须为数字值'}
+          {
+            required: true,
+            message: '请输入承诺送达自提点时间',
+            trigger: 'blur'
+          },
+          { type: 'number', message: '必须为数字值' }
         ],
         permissionCodes: [
-          { required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
+          {
+            required: true,
+            message: '请选择菜单权限',
+            trigger: 'change',
+            type: 'array'
+          }
         ],
         merchantId: [
-          { required: true, message: "请选择要更新的商户账号", trigger: "change" },
-        ],
-      },
-    };
+          {
+            required: true,
+            message: '请选择要更新的商户账号',
+            trigger: 'change'
+          }
+        ]
+      }
+    }
   },
   computed: {
-    ...mapState("userData", [
-      "isMerchant",
-      "marketList",
-      "storeList",
-      "marketId",
-      "shopId",
-      "markets"
+    ...mapState('userData', [
+      'isMerchant',
+      'marketList',
+      'storeList',
+      'marketId',
+      'shopId',
+      'markets'
     ]),
     uploadUrl() {
-      return mer_admin.uploadFile();
+      return mer_admin.uploadFile()
     },
     uploadHeaders() {
       return {
         token: cookie.get('token')
-      };
+      }
     }
   },
   watch: {
     'form.operationType'(newType) {
-      this.form.mobile = '';
-      this.form.password = '';
-      this.form.permissionCodes = [];
-      this.form.merchantId = null;
+      this.form.mobile = ''
+      this.form.password = ''
+      this.form.permissionCodes = []
+      this.form.merchantId = null
 
       this.$nextTick(() => {
-        this.$refs.ruleFormRef.clearValidate();
-      });
+        this.$refs.ruleFormRef.clearValidate()
+      })
 
       if (this.$refs.permissionTree) {
-        this.$refs.permissionTree.setCheckedKeys([]);
+        this.$refs.permissionTree.setCheckedKeys([])
       }
 
       if (newType === 'update') {
-        this.loadMerchantAccountList();
+        this.loadMerchantAccountList()
       }
     }
   },
   created() {
-    this.getPermissions();
-    this.getPlatformCategory();
+    this.getPermissions()
+    this.getPlatformCategory()
   },
   methods: {
     getPlatformCategory() {
       listPlatformCategory({ type: this.isCloudShop ? 1 : 0 }).then(res => {
-        this.categoryList = res.data.data;
-      });
+        this.categoryList = res.data.data
+      })
     },
     getPermissions() {
-      getAvailablePermissions().then((res) => {
-        const availablePerms = (res && res.data && Array.isArray(res.data.data)) ? res.data.data : [];
-        const menuList = (routerConfig && Array.isArray(routerConfig.menuList)) ? routerConfig.menuList : [];
-        const filteredTree = filterTreeByPerms(menuList, availablePerms);
-        this.permissionList = mapTreeForElTree(filteredTree);
-      });
+      getAvailablePermissions().then(res => {
+        const availablePerms =
+          res && res.data && Array.isArray(res.data.data) ? res.data.data : []
+        const menuList =
+          routerConfig && Array.isArray(routerConfig.menuList)
+            ? routerConfig.menuList
+            : []
+        const filteredTree = filterTreeByPerms(menuList, availablePerms)
+        this.permissionList = mapTreeForElTree(filteredTree)
+      })
     },
     openResetPasswordDialog() {
       if (!this.form.merchantId) {
-        this.$message.error('请先选择要更新的商户账号');
-        return;
+        this.$message.error('请先选择要更新的商户账号')
+        return
       }
-      this.resetPasswordDialogVisible = true;
+      this.resetPasswordDialogVisible = true
     },
     handleResetPassword() {
       if (!this.newPassword) {
-        this.$message.error('请输入新密码');
-        return;
+        this.$message.error('请输入新密码')
+        return
       }
       updatePassword({ password: this.newPassword }).then(() => {
-        this.$message.success('密码重置成功');
-        this.resetPasswordDialogVisible = false;
-      });
+        this.$message.success('密码重置成功')
+        this.resetPasswordDialogVisible = false
+      })
     },
     handleTreeCheck() {
-      this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
+      this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true)
     },
     handleBackgroundSuccess(res) {
-      this.form.background = res.data;
+      this.form.background = res.data
     },
     handleFileListSuccess(res, file, fileList) {
-      this.form.fileList = fileList;
+      this.form.fileList = fileList
     },
     handlePermitsSuccess(res, file, fileList) {
-      this.form.permits = fileList;
+      this.form.permits = fileList
     },
     handlePickImgSuccess(res) {
-      this.form.pickImg = res.data;
+      this.form.pickImg = res.data
     },
     beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isLt2M = file.size / 1024 / 1024 < 2;
+      const isImage = file.type.startsWith('image/')
+      const isLt2M = file.size / 1024 / 1024 < 2
 
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!');
+      if (!isImage) {
+        this.$message.error('上传文件只能是图片格式!')
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!');
+        this.$message.error('上传图片大小不能超过 2MB!')
       }
-      return isJPG && isLt2M;
+      return isImage && isLt2M
     },
     handleRemove(file, fileList) {
-      this.form.fileList = fileList;
+      this.form.fileList = fileList
     },
     handlePermitsRemove(file, fileList) {
-      this.form.permits = fileList;
+      this.form.permits = fileList
     },
     loadMerchantAccountList() {
-      getMerchantList({ marketId: this.form.selectedMarketId || this.marketId }).then(res => {
-        this.merchantAccountList = res.data.data || [];
-      });
+      getMerchantList({
+        marketId: this.form.selectedMarketId || this.marketId
+      }).then(res => {
+        this.merchantAccountList = res.data.data || []
+      })
     },
     handleAccountChange(merchantId) {
-      if (!merchantId) return;
-      const accountDetails = this.merchantAccountList.find(item => item.merchantId === merchantId);
+      if (!merchantId) return
+      const accountDetails = this.merchantAccountList.find(
+        item => item.merchantId === merchantId
+      )
       if (accountDetails) {
-        this.form.permissionCodes = accountDetails.permissionCodes || [];
-        this.form.enable = accountDetails.enabled;
+        this.form.permissionCodes = accountDetails.permissionCodes || []
+        this.form.enable = accountDetails.enabled
         this.$nextTick(() => {
-          this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes);
-        });
+          this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes)
+        })
       }
     },
     save() {
-      this.$refs.ruleFormRef.validate((valid) => {
+      this.$refs.ruleFormRef.validate(valid => {
         if (valid) {
-          const marketId = this.form.selectedMarketId || this.marketId;
+          const marketId = this.form.selectedMarketId || this.marketId
           if (!marketId) {
-            this.$message.error('请选择市场');
-            return;
+            this.$message.error('请选择市场')
+            return
           }
 
           if (this.form.operationType === 'create') {
@@ -477,48 +574,52 @@ export default {
               remark: '',
               username: this.form.mobile,
               password: this.form.password
-            };
-            inviteJoin(createData).then((res) => {
-              const merchantAccountId = res.data.data.merchantId; // Assuming this is the merchant ID
-              const shopId = res.data.data.shopId; // Assuming this is the shop ID
+            }
+            inviteJoin(createData).then(res => {
+              const merchantAccountId = res.data.data.merchantAccountId // Assuming this is the merchant ID
+              const shopId = res.data.data.shopId // Assuming this is the shop ID
               const permissionsData = {
                 merchantAccountId,
                 permissionCodes: this.form.permissionCodes,
                 marketId
-              };
+              }
               setMerchantPermissions(permissionsData).then(() => {
                 const shopData = {
                   ...this.form,
                   imgs: this.form.fileList.map(f => f.url).join(','),
                   permits: this.form.permits.map(f => f.url).join(','),
-                  startBusinessTime: this.businessHours[0].getHours() * 60 + this.businessHours[0].getMinutes(),
-                  endBusinessTime: this.businessHours[1].getHours() * 60 + this.businessHours[1].getMinutes(),
-                };
+                  startBusinessTime:
+                    this.businessHours[0].getHours() * 60 +
+                    this.businessHours[0].getMinutes(),
+                  endBusinessTime:
+                    this.businessHours[1].getHours() * 60 +
+                    this.businessHours[1].getMinutes()
+                }
                 shopBaseConfig({ shopId }, shopData).then(() => {
-                  this.$message.success('商户创建成功，权限及店铺信息已设置');
-                  this.$refs.ruleFormRef.resetFields();
-                });
-              });
-            });
+                  this.$message.success('商户创建成功，权限及店铺信息已设置')
+                  this.$refs.ruleFormRef.resetFields()
+                })
+              })
+            })
           } else if (this.form.operationType === 'update') {
             if (!this.form.merchantId) {
-              this.$message.error('请先选择要更新的商户账号');
-              return;
+              this.$message.error('请先选择要更新的商户账号')
+              return
             }
             const permissionsData = {
               merchantAccountId: this.form.merchantId,
               permissionCodes: this.form.permissionCodes,
               marketId
-            };
+            }
             setMerchantPermissions(permissionsData).then(() => {
-              this.$message.success('商户信息更新成功');
-              this.$refs.ruleFormRef.resetFields();
-            });
+              this.$message.success('商户信息更新成功')
+              this.$refs.ruleFormRef.resetFields()
+            })
           }
         }
-      });
+      })
     }
-  },
+  }
 }
 </script>
 
@@ -527,25 +628,26 @@ export default {
   padding: 20px;
 }
 .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;
-  }
+  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;
+}
+</style>