个人中心/头像样式

README.md

@@ -31,6 +31,7 @@
 │   ├── utils                  # 全局公用方法
 │   ├── views                  # views 所有页面
 │   │   ├── archivesConfig        # 档案配置
+│   │   ├── category              # 门类管理
 │   │   ├── components            # views内页面组件
 │   │   ├── dashboard             # 首页面板内容
 │   │   ├── features              # 错误页面
@@ -70,4 +71,9 @@ npm run build:stage
 
 # 构建生产环境
 npm run build:prod
+
+#打包注意
+router.js - mode改为'hash'
+vue.config.js - publicPath: './'
+.env.production - 地址改为真实的生产服务器地址
 ```

src/assets/styles/index.scss

@@ -129,6 +129,7 @@ ul{
   }
 }
 
+
 //main-container全局样式
 .app-wrapper{
   background-color: $menuBg;

src/assets/styles/yxk-admin.scss

@@ -726,4 +726,12 @@
       background-size: contain;
     }
   }
+}
+
+// 默认底图 - 暂时只有头像
+.user-img-cover{
+  border-radius: 50%;
+  background: url(~@/assets/images/avatar.png) no-repeat #fff;
+  background-size: cover;
+  overflow: hidden;
 }

src/layout/components/Navbar.vue

@@ -6,7 +6,7 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <el-tooltip content="项目文档" effect="dark" placement="bottom">
@@ -20,20 +20,21 @@
         <el-tooltip content="布局设置" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
-      </template>
+      </template> -->
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
+          <div class="user-img-cover">
+            <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
+          </div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <span style="display:block;" @click="show = true">
+          <!-- <span style="display:block;" @click="show = true">
             <el-dropdown-item>
               布局设置
             </el-dropdown-item>
-          </span>
+          </span> -->
           <router-link to="/user/center">
             <el-dropdown-item>
               个人中心
@@ -55,25 +56,26 @@ import { mapGetters } from 'vuex'
 import Logo from '@/layout/components/Sidebar/Logo'
 // import Breadcrumb from '@/components/Breadcrumb'
 // import Hamburger from '@/components/Hamburger'
-import Doc from '@/components/Doc'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+// import Doc from '@/components/Doc'
+// import Screenfull from '@/components/Screenfull'
+// import SizeSelect from '@/components/SizeSelect'
+// import Search from '@/components/HeaderSearch'
 import Avatar from '@/assets/images/avatar.png'
 
 export default {
   components: {
     // Breadcrumb,
     // Hamburger,
-    Screenfull,
-    SizeSelect,
-    Search,
-    Doc,
+    // Screenfull,
+    // SizeSelect,
+    // Search,
+    // Doc,
     Logo
   },
   data() {
     return {
       Avatar: Avatar,
+      defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
       dialogVisible: false
     }
   },
@@ -187,7 +189,10 @@ export default {
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
-
+        .user-img-cover{
+          width: 40px;
+          height: 40px;
+        }
         .user-avatar {
           cursor: pointer;
           width: 40px;

src/views/system/user/center.vue

@@ -7,7 +7,9 @@
         <div class="user-content">
           <h4 class="info-title">个人信息</h4>
           <div class="el-upload">
-            <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
+            <div class="user-img-cover">
+              <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" :onerror="defaultImg" @click="toggleShow">
+            </div>
             <myUpload
               v-model="show"
               :headers="headers"
@@ -130,6 +132,7 @@ export default {
       }
     }
     return {
+      defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
       show: false,
       Avatar: Avatar,
       activeIndex: 0,
@@ -222,6 +225,11 @@ export default {
     border-radius: 50%;
     margin: 40px auto 60px auto;
     overflow: hidden;
+    .user-img-cover{
+      width: 120px;
+      height: 120px;
+      line-height: 120px;
+    }
     .avatar {
       width: 100%;
       height: 100%;