Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
parent
e19eb4db4d
commit
70b4fda1d9
|
|
@ -90,7 +90,42 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 领袖分析 -->
|
<!-- 领袖分析 -->
|
||||||
<div class="leader-ansys">
|
<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>
|
||||||
</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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -450,4 +516,182 @@ onUnmounted(() => {
|
||||||
/* 为了兼容 Safari 浏览器 */
|
/* 为了兼容 Safari 浏览器 */
|
||||||
-webkit-backdrop-filter: blur(4px);
|
-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>
|
</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