no message

resources/assets/js/components/UserAvatar.vue

@@ -12,9 +12,9 @@
             </div>
         </div>
         <div class="avatar-wrapper">
-            <div :class="['avatar-box', userId === userid || user.online ? 'online' : '']">
+            <div :class="['avatar-box', userId === userid || user.online ? 'online' : '']" :style="boxStyle">
-                <WAvatar v-if="showImg" :src="user.userimg" :size="size"/>
+                <WAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
-                <WAvatar v-else :size="size" class="avatar-text">{{nickname}}</WAvatar>
+                <WAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</WAvatar>
             </div>
             <div v-if="showName" class="avatar-name">{{user.nickname}}</div>
         </div>
@@ -48,6 +48,14 @@
                 type: Boolean,
                 default: false
             },
+            borderWitdh: {
+                type: Number,
+                default: 0
+            },
+            borderColor: {
+                type: String,
+                default: ''
+            },
         },
         data() {
             return {
@@ -60,6 +68,24 @@
         computed: {
             ...mapState(["userId", "userOnline"]),
 
+            boxStyle() {
+                const style = {};
+                const {borderWitdh, borderColor} = this
+                if (borderWitdh > 0) {
+                    style.border = borderWitdh + "px solid " + (borderColor || "#ffffff");
+                }
+                return style;
+            },
+
+            avatarSize() {
+                const {borderWitdh, size} = this
+                if (borderWitdh > 0) {
+                    return size - borderWitdh * 2;
+                } else {
+                    return size;
+                }
+            },
+
             showImg() {
                 const {userimg} = this.user
                 if (!userimg) {

resources/assets/js/pages/manage.vue

@@ -42,14 +42,10 @@
         </div>
 
         <div class="manage-box-main">
-            <div class="manage-box-body">
-                <div class="manage-box-body-content">
             <keep-alive>
-                        <router-view class="manage-box-view"></router-view>
+                <router-view class="manage-box-view overlay"></router-view>
             </keep-alive>
         </div>
-            </div>
-        </div>
 
         <!--新建项目-->
         <Modal

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -169,7 +169,7 @@
                             <div class="task-users">
                                 <ul>
                                     <li v-for="(user, keyu) in item.task_user" :key="keyu">
-                                        <UserAvatar :userid="user.userid" size="28"/>
+                                        <UserAvatar :userid="user.userid" size="32" :borderWitdh="2" :borderColor="item.color"/>
                                     </li>
                                 </ul>
                                 <div v-if="item.file_num > 0" class="task-icon">{{item.file_num}}<Icon type="ios-link-outline" /></div>

resources/assets/js/pages/manage/components/TaskRow.vue

@@ -69,7 +69,7 @@
                 <Col span="3" class="row-member">
                     <ul>
                         <li v-for="(user, keyu) in item.task_user" :key="keyu" v-if="keyu < 3">
-                            <UserAvatar :userid="user.userid" size="28"/>
+                            <UserAvatar :userid="user.userid" size="32" :borderWitdh="2" :borderColor="item.color"/>
                         </li>
                     </ul>
                 </Col>

resources/assets/sass/common-avatar.scss

@@ -5,6 +5,7 @@
         align-items: center;
         .avatar-box {
             position: relative;
+            border-radius: 50%;
             .avatar-text {
                 background-color: #87d068;
             }

resources/assets/sass/main.scss

@@ -1,3 +1,11 @@
+body {
+    overflow: hidden;
+    .ivu-input,
+    .ivu-select-selection {
+        border-color: #e8e8e8;
+    }
+}
+
 *[hidden="hidden"] {
     display: none !important;
 }
@@ -15,13 +23,6 @@
     }
 }
 
-body {
-    .ivu-input,
-    .ivu-select-selection {
-        border-color: #e8e8e8;
-    }
-}
-
 .ivu-modal-wrap {
     &.simple-modal {
         .ivu-modal {

resources/assets/sass/manage-wrapper.scss

@@ -155,19 +155,6 @@
         }
     }
     .manage-box-main {
-        flex: 1;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        background: white;
-        .manage-box-body {
-            width: 100%;
-            flex: 1;
-            position: relative;
-            overflow: auto;
-            display: flex;
-            flex-direction: column;
-            .manage-box-body-content {
         flex: 1;
         position: relative;
         .manage-box-view {
@@ -180,5 +167,3 @@
         }
     }
 }
-    }
-}

resources/assets/sass/project-list.scss

@@ -370,9 +370,6 @@
                                     &:first-child {
                                         margin-left: 0;
                                     }
-                                    .common-avatar {
-                                        padding: 2px;
-                                    }
                                 }
                             }
                             .task-icon {
@@ -663,19 +660,16 @@
                         }
                     }
                     &.row-member {
+                        padding: 8px;
                         > ul {
-                            display: flex;
+                            height: 32px;
-                            align-items: center;
-                            margin-left: -4px;
                             overflow: hidden;
                             text-overflow:ellipsis;
                             white-space: nowrap;
                             > li {
                                 list-style: none;
+                                display: inline-block;
                                 margin-left: -6px;
-                                overflow: hidden;
-                                text-overflow:ellipsis;
-                                white-space: nowrap;
                                 &:first-child {
                                     margin-left: 0;
                                 }