SocialNetworks/src/views/KeyNodeRecognition2/components/LeaderDetailDialog.vue

<template>
  <el-dialog v-model="isVisible" width="640" align-center class="custom-dialog">
    <template v-if="store.activeLeader">
      <img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
      <div class="dialog-content">
        <div class="dialog-content-leaderInfo">
          <img class="leaderInfo-avatar" :src="store.activeLeader.leaderOriginInfo.avatar" alt="" />
          <div class="leaderInfo-message">
            <div class="leader-name">{{ store.activeLeader.name }}</div>
            <div class="leader-heat">
              <div class="fancy">
                粉丝量:  {{ store.activeLeader.leaderOriginInfo.followers }}
              </div>
              <div class="post-number">
                发帖数:  {{ store.activeLeader.leaderOriginInfo.posts }}
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-content-post">
          <div class="leader-post-detail-content">
            <div
              class="content-item"
              v-for="item in store.activeLeader.leaderOriginInfo.labelling"
              :key="item.id"
            >
              <div class="item-type">{{ item.type }}</div>
              <div class="item-content">{{ item.content }}</div>
              <div class="item-heat">
                <div class="item-time">{{ item.time }}</div>
                <div class="item-heat-detail">
                  <div class="item-heat-like">
                    <Icon icon="ei:like" width="25" height="25" /> {{ item.like }}
                  </div>
                  <div class="item-heat-comment">
                    <Icon icon="la:comment-dots" width="25" height="25" /> {{ item.comment }}
                  </div>
                  <div class="item-heat-transmit">
                    <Icon icon="mdi:share-outline" width="25" height="25" /> {{ item.transmit }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-content-heat-degree">
          <div class="heat-item">
            <p class="diamond"></p>
            粉丝数量:   {{ store.activeLeader.leaderOriginInfo.followers }}
          </div>
          <div class="heat-item">
            <p class="diamond"></p>
            关注数量:   1329
          </div>
          <div class="heat-item">
            <p class="diamond"></p>
            发帖总数:   {{ store.activeLeader.leaderOriginInfo.posts }}
          </div>
          <div class="heat-item">
            <p class="diamond"></p>
            贴文被转总数:   1329
          </div>
          <div class="heat-item">
            <p class="diamond"></p>
            参与互动次数:   30
          </div>
          <div class="heat-item">
            <p class="diamond"></p>
            首次活跃事件:   2022.7.31 00:14
          </div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';
import { useKeyNodeStore } from '@/store/keyNodeStore';
import { Icon } from '@iconify/vue';

const store = useKeyNodeStore();

const isVisible = computed({
  get: () => store.isLeaderDetailDialogVisible,
  set: (value) => {
    if (!value) {
      store.closeLeaderDetail();
    }
  }
});
</script>

<style scoped>
:deep(.custom-dialog) {
  width: 640px;
  height: 680px;
  border-width: 0px, 0px, 0px, 0px;
  border-style: solid;
  border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
  background-color: rgba(6, 45, 90, 1);
  border: 1px solid #1a8bff;
  border-radius: 2px;
  padding: 0 0;
}
.dialogTitleImg {
  margin-top: -23px;
}
:deep(.custom-dialog) .dialog-content {
  width: 100%;
  height: 100%;
  padding: 23px 23px;
}
.dialog-content-leaderInfo {
  width: 100%;
  height: 70px;
  display: flex;
}
.leaderInfo-avatar {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}
.leaderInfo-message {
  flex: 1;
  height: 100%;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.leader-name {
  font-size: 20px;
  color: #fff;
}
.leader-heat {
  display: flex;
  color: #fff;
  font-size: 16px;
}
.post-number {
  margin-left: 30px;
}
.dialog-content-post {
  width: 100%;
  padding: 25px 0px;
}
.leader-post-detail-content {
  width: 100%;
  background:
    linear-gradient(0deg, #0d2743, #0d2743),
    linear-gradient(270deg, rgba(147, 210, 255, 0.06) 0%, rgba(147, 210, 255, 0.16) 100%);
  margin-top: 30px;
  height: 262px;
  overflow: auto;
  padding: 10px 20px;
}
.leader-post-detail-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.leader-post-detail-content::-webkit-scrollbar-thumb {
  background: rgba(147, 210, 255, 0.3);
  border-radius: 4px;
}
.leader-post-detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 210, 255, 0.5);
}
.item-type {
  font-size: 16px;
  color: #ffffff;
}
.item-content {
  color: #ffffffcc;
  font-size: 16px;
}
.content-item div {
  margin-bottom: 10px;
}
.item-heat {
  display: flex;
  justify-content: space-between;
  color: #ffffffcc;
}
.item-heat-detail {
  display: flex;
}
.item-heat-detail div {
  width: 60px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.dialog-content-heat-degree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 15px;
  color: #fff;
  font-size: 16px;
}
.heat-item {
  display: flex;
  align-items: center;
}
.heat-item .diamond {
  width: 6px;
  height: 6px;
  background-color: #fff;
  margin-right: 10px;
  box-shadow: 0 4px 8px rgb(0, 123, 255);
}
</style>