148 lines
3.7 KiB
Vue
148 lines
3.7 KiB
Vue
<template>
|
|
<div class="userPanel-component">
|
|
<img :src="title" alt="" class="title" />
|
|
<div class="user-list">
|
|
<div class="a-pair-user-item" v-for="(group, index) in userList" :key="group.id">
|
|
<div
|
|
class="shadow-box"
|
|
@click="handleUserItem(index, group)"
|
|
:class="{ active: curUserGroupIndex == index }"
|
|
>
|
|
<div class="group-type">{{ group.title }}</div>
|
|
<div class="user-list-item" v-for="child in group.list" :key="child.id">
|
|
<img :src="child.avatarPath" alt="" class="avatar" />
|
|
<div class="user-info">
|
|
<div class="username">{{ child.userName }}</div>
|
|
<div class="userState">
|
|
<div class="userState-fancy">
|
|
粉丝数:
|
|
<p>{{ child.fans }}</p>
|
|
</div>
|
|
<div class="userState-monitor-count">
|
|
发帖数:
|
|
<p>{{ child.postNum }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, ref } from "vue";
|
|
const curUserGroupIndex = ref(0);
|
|
|
|
const emit = defineEmits(["click:selectedGroup"]);
|
|
const props = defineProps({
|
|
userList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
|
|
const handleUserItem = (index, group = {}) => {
|
|
curUserGroupIndex.value = index;
|
|
emit("click:selectedGroup", group);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.userPanel-component {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title {
|
|
margin-top: -7px;
|
|
margin-left: -2px;
|
|
}
|
|
.user-list {
|
|
width: 100%;
|
|
height: 480px;
|
|
padding: 0px 20px;
|
|
overflow: auto;
|
|
.a-pair-user-item {
|
|
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
|
padding: 20px 0;
|
|
.shadow-box {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
padding: 0px 10px;
|
|
.group-type {
|
|
color: #fff;
|
|
}
|
|
&:hover {
|
|
border-radius: 4px;
|
|
background-image: linear-gradient(to right, #0876be, #0ea7d500);
|
|
}
|
|
}
|
|
}
|
|
&::-webkit-scrollbar {
|
|
width: 3px; /* 垂直滚动条宽度 */
|
|
height: 5px; /* 水平滚动条高度 */
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
|
|
border-radius: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
|
|
}
|
|
.user-list-item {
|
|
width: 100%;
|
|
height: 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 5px;
|
|
}
|
|
.user-info {
|
|
flex: 1;
|
|
padding-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.username {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-family: "微软雅黑";
|
|
white-space: nowrap; /* 禁止换行 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
.userState {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: #cccccc9d;
|
|
.userState-monitor-count {
|
|
width: 90px;
|
|
}
|
|
div {
|
|
display: flex;
|
|
p {
|
|
color: #fff;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border-radius: 4px;
|
|
background-image: linear-gradient(to right, #0876be, #0ea7d500);
|
|
}
|
|
</style>
|