SocialNetworks_duan/src/views/LinkPrediction/socialGroups/components/userPanel.vue

<template>
  <div class="userPanel-component">
    <img :src="title" alt="" class="title" />
    <div class="user-list" :style="{ height: panelHeight + 'px' }">
      <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" v-if="group.list.length > 2 && group?.interactivity != ' '">
            <img
              src="@/assets/images/linkPrediction/title/group-item-title.png"
              class="group-type-back"
            />
            <div class="group-type-content">TOP{{ index+1 }}</div>
          </div>
          <div class="user-list-item" v-for="child in group.list" :key="child.id">
            <img :src="defaultAvatar" 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";
import defaultAvatar from "@/assets/images/avatar/default.png";
import { useSocialGroupsStore } from "@/store/llinkPrediction/index";
const socialGroupsStore = useSocialGroupsStore()
const curUserGroupIndex = ref(0);
const emit = defineEmits(["click:selectedGroup"]);
const props = defineProps({
  userList: {
    type: Array,
    default: []
  },
  title: {
    type: String,
    default: ""
  },
  panelHeight: {
    type: Number,
    default: 480
  }
});

const handleUserItem = (index, group = {}) => {
  curUserGroupIndex.value = index;
  // 设置需要高亮的用户id
  socialGroupsStore.curHighlightUserIdList = group.list.map((item)=>item.userId)
  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%;
    padding: 0px 20px;
    overflow-y: 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 {
          height: 40px;
          color: #fff;
          position: relative;
          top: 10px;
          .group-type-content {
            color: #8EFBFF;
            position: absolute;
            top: 0;
            left: 7px;
            font-size: 14px;
            font-family: "PingFang SC";
          }
        }
        &: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 {
          width: 200px;
          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>