diff --git a/src/views/PlatformData/UserLoginStats.vue b/src/views/PlatformData/UserLoginStats.vue index ea15ef4..c9242b0 100644 --- a/src/views/PlatformData/UserLoginStats.vue +++ b/src/views/PlatformData/UserLoginStats.vue @@ -875,12 +875,12 @@ const updatePieChart = (chartRef, chartInstance, data) => { const option = { color: regionColors, tooltip: { trigger: 'item' }, - legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, + legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, series: [ { type: 'pie', radius: '70%', - center: ['30%', '50%'], + center: ['50%', '50%'], // 改为居中显示 data: data, label: { show: false }, itemStyle: { @@ -1011,12 +1011,12 @@ const initCharts = () => { chart.setOption({ color: regionColors, tooltip: { trigger: 'item' }, - legend: { orient: 'vertical', right: '10%', top: 'center' }, + legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, series: [ { type: 'pie', - radius: '80%', - center: ['40%', '50%'], + radius: '70%', + center: ['50%', '50%'], data: [ { value: 1048, name: '香港地区' }, { value: 735, name: '新加坡地区' }, @@ -1042,14 +1042,14 @@ const initCharts = () => { chart.setOption({ color: regionColors, tooltip: { trigger: 'item' }, - legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, + legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, series: [ { type: 'pie', radius: '70%', - center: ['30%', '50%'], + center: ['50%', '50%'], data: [ - { value: 1048, name: '香港地区' }, + { value: 1048, name: '香港地区' }, { value: 735, name: '新加坡地区' }, { value: 580, name: '泰国地区' }, { value: 484, name: '越南地区' }, @@ -1068,12 +1068,12 @@ const initCharts = () => { chart.setOption({ color: regionColors, tooltip: { trigger: 'item' }, - legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, + legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } }, series: [ { type: 'pie', radius: '70%', - center: ['30%', '50%'], + center: ['50%', '50%'], data: [ { value: 1048, name: '香港地区' }, { value: 735, name: '新加坡地区' }, @@ -1142,6 +1142,10 @@ onMounted(() => { gap: 10px; margin-bottom: 20px; border: 1px solid #f0f0f0; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .search-label { font-weight: bold; diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue index 27f3a76..bd06649 100644 --- a/src/views/PlatformData/UserOverview.vue +++ b/src/views/PlatformData/UserOverview.vue @@ -36,31 +36,35 @@
-
+
会员总数
-
{{ overviewData.member }}
-
-
- {{ getGrowthText(overviewData.member_growth) }} +
+
{{ overviewData.member }}
+
+
+ {{ getGrowthText(overviewData.member_growth) }} +
-
+
非会员总数
-
{{ overviewData.normal }}
-
-
- {{ getGrowthText(overviewData.normal_growth) }} -
+
+
{{ overviewData.normal }}
+
+
+ {{ getGrowthText(overviewData.normal_growth) }} +
+
@@ -117,6 +121,7 @@ @@ -622,14 +627,29 @@ onMounted(() => { border-radius: 12px; padding: 20px; display: flex; - flex-direction: column; - justify-content: flex-start; /* 改为从顶部开始布局 */ + flex-direction: row; + justify-content: space-between; + align-items: center; color: #fff; position: relative; /* 确保绝对定位相对于卡片 */ } +.left-part { + display: flex; + align-items: center; + align-self: flex-start; /* 标题垂直居上 */ +} + +.right-part { + display: flex; + flex-direction: column; + align-items: center; /* 改为水平居中 */ + justify-content: center; + margin-right: 150px; /* 右边容器向左移 */ +} + .card-title { - font-size: 24px; /* 字体放大 */ + font-size: 34px; /* 字体放大 */ font-weight: bold; /* 加粗 */ display: flex; align-items: center; @@ -637,6 +657,12 @@ onMounted(() => { margin-bottom: 20px; /* 增加底部间距 */ width: 100%; /* 占满宽度 */ } + +.small-card .card-title { + width: auto; + margin-bottom: 0; +} + .card-value { font-size: 64px; font-weight: bold; @@ -652,10 +678,16 @@ onMounted(() => { gap: 10px; /* 数字和百分比之间的间距 */ } .card-value-small { - font-size: 48px; + font-size: 64px; font-weight: bold; margin-left: auto; } + +.small-card .card-value-small { + margin-left: 0; + line-height: 1.2; +} + .top-row { display: flex; align-items: center; @@ -666,6 +698,10 @@ onMounted(() => { justify-content: flex-end; margin-top: 10px; } + +.small-card .card-tag-wrapper { + margin-top: 8px; +} .card-tag { background-color: #fff; padding: 8px 16px; /* 增加高度 */ @@ -753,6 +789,10 @@ onMounted(() => { gap: 10px; margin-bottom: 20px; border: 1px solid #f0f0f0; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .search-label { font-weight: bold; @@ -793,6 +833,7 @@ onMounted(() => { .text-red { color: #ff4d4f; font-weight: bold; } .text-green { color: #52c41a; font-weight: bold; } +.text-black-bold { color: #333; font-weight: bold; } .sub-item-text { font-size: 12px;