129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<div class="groupPanel-component">
|
|
<img :src="title" alt="" class="title" />
|
|
<div class="groupPanel-list">
|
|
<div class="group-item" v-for="group in groupList" :key="group.id">
|
|
<div class="group-item-title">
|
|
<img
|
|
class="group-item-title-icon"
|
|
src="@/assets/images/linkPrediction/icon/top-icon.png"
|
|
alt=""
|
|
/>
|
|
<div class="group-item-title-type">{{ group.type }}</div>
|
|
<div class="title-content">{{ group.title }}</div>
|
|
</div>
|
|
|
|
<div class="group-item-statistics">
|
|
<div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id">
|
|
<img :src="statistic.iconImg" alt="" class="sta-prefix" />
|
|
<div class="statistics-content">
|
|
<div class="sta-name">{{ statistic.name }}</div>
|
|
<div class="sta-count">{{ statistic.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from "vue"
|
|
|
|
const props = defineProps({
|
|
groupList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.groupPanel-component {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title {
|
|
margin-top: -7px;
|
|
margin-left: -2px;
|
|
}
|
|
.groupPanel-list {
|
|
width: 100%;
|
|
height: 470px;
|
|
padding: 20px 20px;
|
|
overflow: auto;
|
|
&::-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); /* 更明显的蓝色 */
|
|
}
|
|
.group-item {
|
|
width: 100%;
|
|
padding-bottom: 20px;
|
|
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
|
.group-item-title {
|
|
position: relative;
|
|
.group-item-title-type {
|
|
position: absolute;
|
|
top: 3px;
|
|
color: #8efbff;
|
|
left: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.title-content {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-top: 10px;
|
|
white-space: nowrap; /* 强制不换行 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
}
|
|
.group-item-statistics {
|
|
width: 80%;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.statistics-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
.sta-prefix {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.statistics-content {
|
|
width: 150px;
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
.sta-count {
|
|
font-family: MiSans;
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.group-item:not(:first-child) {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|