群的系统消息

pages/im/components/groupUserList.vue

@@ -3,13 +3,16 @@
         <view class="users">
             <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
                 v-for="(item, index) in users" :key="index" @click="toUser(item)">
-                <u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl"></u-avatar>
+                <view class="avatar">
+                    <u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl"></u-avatar>
+                    <view class="admin" v-if="item.is_admin">管理</view>
+                    <view class="owner" v-if="item.targetId === adminUid">群主</view>
+                </view>
                 <view class="name">{{ item.name }}</view>
-                <view class="admin" v-if="item.is_admin">管理</view>
-                <view class="owner" v-if="item.targetId === adminUid">群主</view>
             </view>
             <view class="user" v-if="isAdmin">
-                <u-avatar @click="inviteUser" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
+                <u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bg-color="#eeeeee"
+                    color="#999999">
                 </u-avatar>
                 <view class="name">邀请好友</view>
             </view>
@@ -58,17 +61,16 @@
                 currentUser: {},
                 avatarSize: 40
             }
-        },
-        computed: {
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
         },
         created() {
-            this.avatarSize = 126 / 750 * wx.getSystemInfoSync().windowWidth
-            console.log(this.avatarSize)
+            this.avatarSize = 90 / 750 * wx.getSystemInfoSync().windowWidth
         },
         mounted() {
             this.initGroupInfo()
@@ -237,7 +239,6 @@
     }
 </script>
 
-
 <style lang="scss" scoped>
     .users {
         flex-direction: row;
@@ -246,8 +247,6 @@
         padding: 20rpx 0;
 
         .user {
-            overflow: hidden;
-            position: relative;
             width: 126rpx;
             margin-left: 20rpx;
             margin-bottom: 20rpx;
@@ -255,12 +254,46 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            border-radius: 0 10rpx 0 0;
 
             &.active {
                 background-color: $window-color;
             }
 
+            .avatar {
+                border-radius: 0 8rpx 0 0;
+                position: relative;
+                width: 90rpx;
+                height: 90rpx;
+                overflow: hidden;
+
+                .admin {
+                    position: absolute;
+                    background-color: $main-color;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 12rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+                .owner {
+                    position: absolute;
+                    background-color: $text-price;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 12rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+            }
+
             .name {
                 color: $text-gray-m;
                 width: 126rpx;
@@ -272,31 +305,6 @@
                 word-break: break-word;
             }
 
-            .admin {
-                position: absolute;
-                background-color: $main-color;
-                transform: rotate(45deg);
-                color: #ffffff;
-                font-size: 12rpx;
-                width: 100rpx;
-                padding-top: 30rpx;
-                text-align: center;
-                right: -45rpx;
-                top: -20rpx;
-            }
-
-            .owner {
-                position: absolute;
-                background-color: $text-price;
-                transform: rotate(45deg);
-                color: #ffffff;
-                font-size: 12rpx;
-                width: 100rpx;
-                padding-top: 30rpx;
-                text-align: center;
-                right: -45rpx;
-                top: -20rpx;
-            }
         }
     }