peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 用户卡片UI优化

Browse Source
This commit is contained in:
ronger 2021-08-24 22:34:23 +08:00
parent a7559813c9
commit c7016381f9
1 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
components/common/user/list.vue
View File

@ -1,18 +1,29 @@
<template>
<div class="wrapper">
<el-row>
<el-col :span="12" v-for="user in users.users" :key="user.idUser" style="margin-bottom: 1rem;">
<el-col :span="3">
<el-avatar size="medium" :src="user.avatarUrl"></el-avatar>
</el-col>
<el-col :span="21">
<div>
<el-link rel="nofollow" @click="onRouter(user.account)" :underline="false" class="text-default">
<span v-html="user.nickname"></span>
<el-row :gutter="20">
<el-col :span="8" v-for="user in users.users" :key="user.idUser" style="margin-bottom: 1rem;">
<el-card shadow="always" :body-style="{textAlign: 'center', paddingBottom: '20'}">
<el-col :span="24">
<el-link target="_blank" :href="'/user/' + user.account" class="text-default" :underline="false">
<el-avatar :src="user.avatarUrl" style="width: 50px;height: 50px;"></el-avatar>
</el-link>
<small class="d-block text-muted" v-html="user.signature"></small>
</div>
</el-col>
</el-col>
<el-col :span="24">
<el-link target="_blank" :href="'/user/' + user.account" class="text-default">
<span style="font-size: 20px;font-weight: bold;">{{ user.nickname }}</span>
</el-link>
</el-col>
<el-col :span="24" style="padding: 1rem 0;">
<small class="d-block text-muted" v-if="user.signature" v-html="user.signature"></small>
<small class="d-block text-muted" v-else>还没有介绍自己</small>
</el-col>
<el-col :span="24" style="padding: 2rem 0;">
<template v-if="userInfo.idUser !== user.idUser">
<el-button v-if="isFollower(user.idUser)" size="medium" round @click="cancelFollowUser2(user.idUser)">取消关注</el-button>
<el-button v-else size="medium" round @click="followUser2(user.idUser)">关注</el-button>
</template>
</el-col>
</el-card>
</el-col>
<el-col v-show="!users" class="text-center">
这里什么都没有!
@ -32,8 +43,14 @@
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "UserList",
computed: {
...mapState({
userInfo: state => state.oauth
})
},
props: {
users: Object
},
@ -45,6 +62,15 @@ export default {
},
currentChange(page) {
this.$emit('currentChange', page);
},
followUser2(idUser) {
this.$emit('followUser', idUser);
},
cancelFollowUser2(idUser) {
this.$emit('cancelFollowUser', idUser);
},
isFollower(idUser) {
return this.$store.getters["follow/isFollower"](idUser)
}
}
}