From 8f8353f17a5ac4e981a04d85a38a5c34bdd03d99 Mon Sep 17 00:00:00 2001 From: zpc Date: Tue, 24 Mar 2026 01:55:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/Report/CharacterTypes.cshtml | 62 +++++++++++++------ .../Pages/Report/Cover.cshtml | 3 - .../Pages/Report/Disclaimer.cshtml | 12 ++-- .../wwwroot/css/pages/character-types.css | 16 +++-- .../wwwroot/css/pages/cover.css | 4 +- uniapp/pages/login/index.vue | 5 +- 6 files changed, 67 insertions(+), 35 deletions(-) diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml index 47fad5a..3ad36d1 100644 --- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml @@ -17,19 +17,22 @@ else
7、性格类型
- +
+
性格类型
+
性格类型
- +
-
+ +
性格类型排名
- +
@@ -84,6 +87,8 @@ else var colors = ['#4A90E2', '#52A06A', '#F5A623', '#E88B9C', '#2ABFBF']; var colorsAlpha = ['rgba(74,144,226,0.7)', 'rgba(82,160,106,0.7)', 'rgba(245,166,35,0.7)', 'rgba(232,139,156,0.7)', 'rgba(42,191,191,0.7)']; + // 横向柱状图颜色（按排名顺序） + var barColors = ['#2ABFBF', '#E88B9C', '#F5C842', '#52A06A', '#4A90E2']; // ---- 环形图 ---- var donutLabelPlugin = { @@ -93,18 +98,25 @@ else var meta = chart.getDatasetMeta(0); var dataset = chart.data.datasets[0]; var total = dataset.data.reduce(function(a, b) { return a + b; }, 0); - ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; + ctx.font = 'bold 10px "Microsoft YaHei", sans-serif'; ctx.textBaseline = 'middle'; meta.data.forEach(function(arc, i) { var pct = (dataset.data[i] / total * 100).toFixed(2) + '%'; var name = chart.data.labels[i]; var angle = (arc.startAngle + arc.endAngle) / 2; - var x = arc.x + Math.cos(angle) * (arc.outerRadius + 30); - var y = arc.y + Math.sin(angle) * (arc.outerRadius + 30); + var labelR = arc.outerRadius + 18; + var x = arc.x + Math.cos(angle) * labelR; + var y = arc.y + Math.sin(angle) * labelR; + if (Math.cos(angle) < -0.1) { + ctx.textAlign = 'right'; + } else if (Math.cos(angle) > 0.1) { + ctx.textAlign = 'left'; + } else { + ctx.textAlign = 'center'; + } ctx.fillStyle = dataset.backgroundColor[i]; - ctx.textAlign = 'center'; - ctx.fillText(name, x, y - 8); - ctx.fillText(pct, x, y + 8); + ctx.fillText(name, x, y - 7); + ctx.fillText(pct, x, y + 7); }); } }; @@ -113,28 +125,42 @@ else new Chart(ctxDonut, { type: 'doughnut', data: { labels: labels, datasets: [{ data: scores, backgroundColor: colors, borderWidth: 2, borderColor: '#fff' }] }, - options: { responsive: false, cutout: '50%', plugins: { legend: { display: false } }, layout: { padding: 40 } }, + options: { responsive: false, cutout: '50%', plugins: { legend: { display: false } }, layout: { padding: { top: 44, bottom: 44, left: 50, right: 50 } } }, plugins: [donutLabelPlugin] }); // ---- 雷达图 ---- - var radarColor = '#E88B9C'; + var radarColor = '#4A90E2'; var ctxRadar = document.getElementById('radarChart').getContext('2d'); new Chart(ctxRadar, { type: 'radar', - data: { labels: labels, datasets: [{ data: scores, backgroundColor: 'rgba(232,139,156,0.12)', borderColor: 'rgba(232,139,156,0.8)', borderWidth: 2, pointBackgroundColor: 'rgba(232,139,156,0.9)', pointBorderColor: '#fff', pointRadius: 4, pointBorderWidth: 1 }] }, - options: { responsive: false, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, max: maxScore, ticks: { stepSize: 2, font: { size: 10 }, backdropColor: 'transparent', color: '#999' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#333', padding: 8 }, grid: { color: 'rgba(0,0,0,0.06)' }, angleLines: { color: 'rgba(0,0,0,0.06)' } } } }, + data: { labels: labels, datasets: [{ data: scores, backgroundColor: 'rgba(74,144,226,0.15)', borderColor: 'rgba(74,144,226,0.8)', borderWidth: 2, pointBackgroundColor: 'rgba(74,144,226,0.9)', pointBorderColor: '#fff', pointRadius: 4, pointBorderWidth: 1 }] }, + options: { responsive: false, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, max: maxScore, ticks: { stepSize: 2, font: { size: 11 }, backdropColor: 'transparent', color: '#999' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#333', padding: 10 }, grid: { color: 'rgba(0,0,0,0.06)' }, angleLines: { color: 'rgba(0,0,0,0.06)' } } } }, plugins: [{ afterDatasetsDraw: function(chart) { var meta = chart.getDatasetMeta(0); var ctx2 = chart.ctx; ctx2.font = 'bold 11px sans-serif'; ctx2.fillStyle = radarColor; ctx2.textBaseline = 'middle'; meta.data.forEach(function(point, i) { var val = scores[i]; var cx = chart.scales.r.xCenter; var cy = chart.scales.r.yCenter; var dx = point.x - cx, dy = point.y - cy; var dist = Math.sqrt(dx*dx+dy*dy) || 1; ctx2.textAlign = 'center'; ctx2.fillText(val, point.x + (dx/dist)*14, point.y + (dy/dist)*14); }); } }] }); - // ---- 竖向柱状图 ---- - var barDataLabelPlugin = { id: 'barDataLabels', afterDatasetsDraw: function(chart) { var ctx = chart.ctx; var meta = chart.getDatasetMeta(0); var dataset = chart.data.datasets[0]; ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; meta.data.forEach(function(bar, i) { ctx.fillStyle = '#333'; ctx.fillText(dataset.data[i], bar.x, bar.y - 4); }); } }; + // ---- 横向柱状图 ---- + var barDataLabelPlugin = { + id: 'barDataLabels', + afterDatasetsDraw: function(chart) { + var ctx = chart.ctx; + var meta = chart.getDatasetMeta(0); + var dataset = chart.data.datasets[0]; + ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; + ctx.textBaseline = 'middle'; + meta.data.forEach(function(bar, i) { + ctx.fillStyle = '#333'; + ctx.textAlign = 'left'; + ctx.fillText(dataset.data[i], bar.x + 6, bar.y); + }); + } + }; var ctxBar = document.getElementById('barChart').getContext('2d'); new Chart(ctxBar, { type: 'bar', - data: { labels: barLabels, datasets: [{ data: barScores, backgroundColor: colorsAlpha, borderColor: colors, borderWidth: 0, borderRadius: 3, barThickness: 40 }] }, - options: { responsive: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 10 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { ticks: { font: { size: 11 }, color: '#666' }, grid: { display: false } } }, layout: { padding: { top: 20 } } }, + data: { labels: barLabels, datasets: [{ data: barScores, backgroundColor: barColors, borderWidth: 0, borderRadius: 4, barThickness: 32 }] }, + options: { responsive: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 11 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, y: { ticks: { font: { size: 12 }, color: '#666' }, grid: { display: false } } }, layout: { padding: { right: 24, top: 10 } } }, plugins: [barDataLabelPlugin] }); diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Cover.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Cover.cshtml index dd3efce..74a9bee 100644 --- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Cover.cshtml +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Cover.cshtml @@ -16,9 +16,6 @@ else {
-
- 测评报告 -
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml index 2e8f7fa..85f0a8c 100644 --- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml @@ -11,13 +11,15 @@
特此说明
-

1、本次解读分析数据均来源于您的自测结果；

-

2、您的成长会因为环境、时间的变化而变化，建议您每年测评一次，跟踪变化，了解成长中的自己！

-

3、解读报告最终解释权归本机构所有；

+

1、本次分析基于您的自测结果；

+

2、使用本报告需以开放心态结合动态观察，让测评真正成为支持成长的工具，而非限制发展的枷锁；

+

3、本机构拥有分析报告的最终解释权。

- - +
+ + 小程序：学业邑规划 +
@section Styles { diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css index a74867c..e6e062f 100644 --- a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css +++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css @@ -1,5 +1,5 @@ /* ============================================ - 性格类型分析页（三图+结论卡片版） + 性格类型分析页（环形图+雷达图+横向柱状图+结论卡片） 页面固定尺寸：1309×926px ============================================ */ @@ -8,7 +8,7 @@ flex-direction: column; width: 100%; height: 100%; - gap: 16px; + gap: 12px; } .ct-section-title { @@ -17,9 +17,10 @@ color: #E67E73; } +/* ---- 上半部分：三图并排 ---- */ .ct-charts { display: flex; - gap: 20px; + gap: 12px; align-items: flex-start; } @@ -30,7 +31,13 @@ align-items: center; } -.ct-panel-donut { flex: 0.9; } +.ct-panel-donut { + flex: 0.8; +} + +.ct-panel-bar { + flex: 1.1; +} .ct-chart-title { font-size: 16px; @@ -40,6 +47,7 @@ text-align: center; } +/* ---- 下半部分：结论卡片 ---- */ .ct-conclusions { display: flex; gap: 30px; diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/cover.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/cover.css index 09ccd26..e5e6135 100644 --- a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/cover.css +++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/cover.css @@ -31,8 +31,8 @@ } .cover-wheel img { - max-width: 680px; - max-height: 460px; + max-width: 740px; + max-height: 580px; object-fit: contain; } diff --git a/uniapp/pages/login/index.vue b/uniapp/pages/login/index.vue index 28fbc5a..51a77e1 100644 --- a/uniapp/pages/login/index.vue +++ b/uniapp/pages/login/index.vue @@ -296,13 +296,12 @@ $login-btn-active: #E09518; flex: 1; display: flex; justify-content: center; - align-items: center; + align-items: flex-start; + padding-top: 180rpx; .logo-wrapper { width: 360rpx; height: 360rpx; - border: 2rpx solid $border-color; - border-radius: $border-radius-md; display: flex; align-items: center; justify-content: center;