Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
parent
e19eb4db4d
commit
70b4fda1d9
|
|
@ -90,7 +90,42 @@
|
|||
</div>
|
||||
<!-- 领袖分析 -->
|
||||
<div class="leader-ansys">
|
||||
<div><img src="../assets/images/chuanbofenxi.png" alt="" style="margin-top: -6px;"></div>
|
||||
<!-- <div><img src="../assets/images/chuanbofenxi.png" alt="" style="margin-top: -6px;"></div> -->
|
||||
<div class="charts-wrapper">
|
||||
<div v-for="(chart, index) in chartData" :key="index" class="chart-section">
|
||||
<h3 class="chart-title">{{ chart.title }}</h3>
|
||||
|
||||
<div class="chart-area">
|
||||
<div class="x-axis">
|
||||
<div class="axis-labels">
|
||||
<span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
|
||||
</div>
|
||||
<span class="unit">{{ chart.unit }}</span>
|
||||
</div>
|
||||
|
||||
<div class="chart-body">
|
||||
<div v-for="item in chart.series" :key="item.name" class="bar-row">
|
||||
<span class="row-label">{{ item.name }}</span>
|
||||
<div class="bar-wrapper">
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="bar"
|
||||
:class="item.name === '所有用户' ? 'bar-user' : 'bar-leader'"
|
||||
:style="{ width: (item.value / chart.max) * 100 + '%' }"
|
||||
></div>
|
||||
<span
|
||||
class="value"
|
||||
:class="item.name === '所有用户' ? 'value-user' : 'value-leader'"
|
||||
:style="{ left: `calc(${(item.value / chart.max) * 100}% + 8px)` }"
|
||||
>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -214,7 +249,38 @@ onUnmounted(() => {
|
|||
});
|
||||
;
|
||||
|
||||
|
||||
/* 领袖分析数据 */
|
||||
const chartData = ref([
|
||||
{
|
||||
title: '平均发帖数',
|
||||
unit: '数量',
|
||||
max: 10,
|
||||
series: [
|
||||
{ name: '领袖', value: 6.4 },
|
||||
{ name: '所有用户', value: 0.46 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '帖子平均生存周期',
|
||||
unit: '天数',
|
||||
max: 10,
|
||||
series: [
|
||||
{ name: '领袖', value: 2.19 },
|
||||
{ name: '所有用户', value: 0.46 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '平均粉丝数',
|
||||
// NOTE: The unit in the original image is '天数' (Days), which is likely a typo.
|
||||
// It has been replicated here to match the source image.
|
||||
unit: '天数',
|
||||
max: 10,
|
||||
series: [
|
||||
{ name: '领袖', value: 2.19 },
|
||||
{ name: '所有用户', value: 0.46 }
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -450,4 +516,182 @@ onUnmounted(() => {
|
|||
/* 为了兼容 Safari 浏览器 */
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* 领袖分析样式 */
|
||||
|
||||
.analysis-container {
|
||||
background-color: #0d1b38;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||||
color: #a7c5d4;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-title-container {
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(62, 115, 171, 0.3);
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 18px;
|
||||
color: #e0f7ff;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Decorative vertical bar for the title */
|
||||
.main-title-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #4d9fdf;
|
||||
}
|
||||
|
||||
/* Decorative chevrons for the title */
|
||||
.main-title-container::after {
|
||||
content: '////';
|
||||
letter-spacing: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
color: rgba(77, 159, 223, 0.6);
|
||||
font-weight: bold;
|
||||
transform: translateY(-50%) skewX(-20deg);
|
||||
}
|
||||
|
||||
.charts-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
color: #cdeeff;
|
||||
margin: 0 0 25px 0;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* Decorative square bullet for chart titles */
|
||||
.chart-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #4da0e0;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.x-axis {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 65px; /* Aligns with the start of the bars */
|
||||
right: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #8bacc8;
|
||||
}
|
||||
|
||||
.axis-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 25px); /* Leave space for unit */
|
||||
}
|
||||
|
||||
.unit {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
position: relative;
|
||||
/* Vertical grid lines */
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20% 100%;
|
||||
background-position: 20% 0, 40% 0, 60% 0, 80% 0, 100% 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.bar-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
width: 65px;
|
||||
flex-shrink: 0;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding-right: 5px;
|
||||
color: #cdeeff;
|
||||
}
|
||||
|
||||
.bar-wrapper {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 100%;
|
||||
border-radius: 7px;
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bar-leader {
|
||||
background-color: #3d8dcb;
|
||||
}
|
||||
.bar-user {
|
||||
background-color: #27c1a8;
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value-leader {
|
||||
color: #3d8dcb;
|
||||
}
|
||||
.value-user {
|
||||
color: #27c1a8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
8
src/views/new_file.vue
Normal file
8
src/views/new_file.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user