头像相关

src/components/Header.vue

@@ -43,7 +43,10 @@
       </div>
       <el-dropdown @command="handleChange" v-else>
         <span class="el-dropdown-link">
-            <img class="avatar" :src="touxiang?touxiang:userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')" />
+            <el-image
+                :src="touxiang?touxiang:userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')"
+                fit="cover" style="width:24px;height:24px;margin:0 8px">
+            </el-image>
             <span class="name">{{userMessage.user_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">

src/components/Upload.vue

@@ -18,11 +18,19 @@
       :on-remove="handleRemove"
       :show-file-list="showList?false:true"
     >
-      
-      <el-button size="mini" type="primary">
-        <svg-icon icon-class="upload"></svg-icon>
-        上传
-      </el-button>
+      <template v-if="styleType==='upload'">
+        <div class="upload-style">
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+            <br/>
+            Upload
+        </div>
+      </template>
+      <template v-else>
+        <el-button size="mini" type="primary">
+            <svg-icon icon-class="upload"></svg-icon>
+            上传
+        </el-button>
+      </template>
       <div
         slot="tip"
         class="el-upload__tip"
@@ -47,7 +55,8 @@ export default {
     "fileName",
     "showList",
     "tips",
-    "pageName"
+    "pageName",
+    "styleType"
   ],
   data() {
     return {
@@ -164,7 +173,7 @@ export default {
       let name = "只能上传";
       switch (this.uploadType) {
         case "image":
-          this.accept = "image/*";
+          this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
           this.fileTypeName = "图片";
           this.uploadName = name + "图片";
           this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB"
@@ -211,13 +220,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.zhezhao {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 10000;
+.upload-style{
+    padding: 8px;
+    border-radius: 2px;
+    border: 1px dashed #E5E6EB;
+    background: #F2F3F5;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
 }
 </style>

src/views/personalCenter/components/PersonalInfo.vue

@@ -4,7 +4,7 @@
         <div class="avator-box">
            <el-image
             :src="data.avatar?data.avatar:require('../../../assets/avatar.png')"
-            fit="cover">
+            fit="cover" style="width:96px;height:96px;">
           </el-image>
           <a @click="toggleShow" class="img-crop">
             <svg-icon icon-class="camera"></svg-icon>

src/views/personalCenter/components/Setting.vue

@@ -5,7 +5,7 @@
             <div class="avator-box">
             <el-image
                 :src="personalInfo.avatar?personalInfo.avatar:require('../../../assets/avatar.png')"
-                fit="cover">
+                fit="cover" style="width:96px;height:96px;">
             </el-image>
             <a @click="toggleShow" class="img-crop">
                 <svg-icon icon-class="camera"></svg-icon>

src/views/register.vue

@@ -15,7 +15,7 @@
         <el-form :model="registerForm" :rules="rulesRegister" ref="registerFormUser" label-width="100px" class="registerForm">
             <el-divider content-position="left">基本信息</el-divider>
             <el-form-item label="头像" prop="cover_image_url">
-                <upload :datafileList="registerForm.cover_image_list" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" :filleNumber="1" pageName="register" v-if="!registerForm.cover_image_url" />
+                <upload :datafileList="registerForm.cover_image_list" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" :filleNumber="1" pageName="register" v-if="!registerForm.cover_image_url" styleType="upload"/>
                 <div class="cover-box" v-else @mouseover="Imagemouseover('coverFlag',true)" @mouseout="Imagemouseover('coverFlag',false)">
                     <el-image :src="registerForm.cover_image_url" fit="cover" style="width:200px;height:200px;"></el-image>
                     <p v-show="coverFlag" @click="handleDeleteFile('cover',0)"><i class="el-icon-delete"></i></p>