121
This commit is contained in:
zpc
parent
0752e108bc
commit
ceef2a5f5c
|
|
@ -23,6 +23,9 @@
|
|||
| 12.1 | 性格类型-图表页 | `/report/character-types-chart?recordId=3` | 网页截图 | CategoryType=7 雷达图+横向柱状图（无结论） | ✅ 已完成 |
|
||||
| 12.2 | 性格类型结论 | `/report/character-types-conclusion?recordId=3` | 网页截图 | CategoryType=7 最强性格结论详情（全页文本卡片） | ✅ 已完成 |
|
||||
| 13 | 未来关键发展能力分析 | `/report/future-abilities?recordId=3` | 网页截图 | CategoryType=8 雷达图+横向柱状图+结论 | ✅ 已完成 |
|
||||
| 13.1 | 未来关键发展能力-竖向柱状图 | `/report/future-abilities-v?recordId=3` | 网页截图 | CategoryType=8 雷达图+竖向柱状图+结论 | ✅ 已完成 |
|
||||
| 13.2 | 未来关键发展能力结论 | `/report/future-abilities-conclusion?recordId=3` | 网页截图 | CategoryType=8 最强能力结论详情（全页文本卡片） | ✅ 已完成 |
|
||||
| 14 | 报告尾页（特此说明） | `/report/disclaimer` | 网页截图 | 静态声明页+机构信息 | ✅ 已完成 |
|
||||
|
||||
## 静态资源目录
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
@page "/report/disclaimer"
|
||||
@{
|
||||
ViewData["Title"] = "特此说明";
|
||||
ViewData["PageTitle"] = null;
|
||||
ViewData["PageNumber"] = null;
|
||||
Layout = "_ReportLayout";
|
||||
}
|
||||
|
||||
<div class="disc-page">
|
||||
<!-- 上部：说明卡片 -->
|
||||
<div class="disc-card">
|
||||
<div class="disc-badge">特此说明</div>
|
||||
<div class="disc-content">
|
||||
<p>1、本次解读分析数据均来源于您的自测结果；</p>
|
||||
<p>2、您的成长会因为环境、时间的变化而变化，建议您每年测评一次，跟踪变化，了解成长中的自己！</p>
|
||||
<p>3、解读报告最终解释权归本机构所有；</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部：机构信息 -->
|
||||
<div class="disc-footer">
|
||||
<span class="disc-footer-left">天赋全能测评-本部</span>
|
||||
<span class="disc-footer-right">公众号【天赋测评研究所】</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/pages/disclaimer.css" />
|
||||
}
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.setAttribute('data-render-complete', 'true');
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@page "/report/future-abilities-conclusion"
|
||||
@model MiAssessment.Api.Pages.Report.FutureAbilitiesConclusionModel
|
||||
@{
|
||||
ViewData["Title"] = "未来关键发展能力";
|
||||
ViewData["PageTitle"] = null;
|
||||
ViewData["PageNumber"] = null;
|
||||
}
|
||||
|
||||
@if (!Model.IsSuccess)
|
||||
{
|
||||
<div class="report-error" data-render-error="true">
|
||||
<p>@Model.ErrorMessage</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="fac-page">
|
||||
<!-- 全页结论卡片 -->
|
||||
<div class="fac-card">
|
||||
<!-- 顶部红色 badge -->
|
||||
<div class="fac-badge">未来关键发展能力</div>
|
||||
|
||||
<!-- 结论文字内容 -->
|
||||
<div class="fac-content">
|
||||
@Html.Raw(Model.ConclusionContent.Replace("\\n", "<br/>").Replace("\n", "<br/>"))
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/pages/future-abilities-conclusion.css" />
|
||||
}
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.setAttribute('data-render-complete', 'true');
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
using Microsoft.EntityFrameworkCore;
|
||||
using MiAssessment.Core.Interfaces;
|
||||
using MiAssessment.Model.Data;
|
||||
using MiAssessment.Model.Models.Report;
|
||||
|
||||
namespace MiAssessment.Api.Pages.Report;
|
||||
|
||||
/// <summary>
|
||||
/// 未来关键发展能力结论页 PageModel
|
||||
/// 路由：/report/future-abilities-conclusion?recordId=3
|
||||
/// 展示最强未来能力的详细结论（全页文本卡片）
|
||||
/// </summary>
|
||||
public class FutureAbilitiesConclusionModel : ReportPageModelBase
|
||||
{
|
||||
/// <summary>
|
||||
/// 最强能力名称
|
||||
/// </summary>
|
||||
public string StrongestName { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
/// 结论内容
|
||||
/// </summary>
|
||||
public string ConclusionContent { get; set; } = "";
|
||||
|
||||
private readonly MiAssessmentDbContext _dbContext;
|
||||
|
||||
public FutureAbilitiesConclusionModel(IReportDataService reportDataService, MiAssessmentDbContext dbContext)
|
||||
: base(reportDataService)
|
||||
{
|
||||
_dbContext = dbContext;
|
||||
}
|
||||
|
||||
protected override async Task OnDataLoadedAsync()
|
||||
{
|
||||
if (ReportData?.ResultsByType == null ||
|
||||
!ReportData.ResultsByType.TryGetValue(8, out var allItems))
|
||||
{
|
||||
ErrorMessage = "缺少未来关键发展能力数据";
|
||||
return;
|
||||
}
|
||||
|
||||
var items = allItems.OrderByDescending(x => x.Score).ToList();
|
||||
if (items.Count == 0)
|
||||
{
|
||||
ErrorMessage = "未找到未来关键发展能力数据";
|
||||
return;
|
||||
}
|
||||
|
||||
// 最强能力
|
||||
var strongest = items.First();
|
||||
StrongestName = strongest.CategoryName;
|
||||
|
||||
// 从测评记录结论中查找
|
||||
if (ReportData.ConclusionsByCategory.TryGetValue(strongest.CategoryId, out var sc) && sc.Content != null)
|
||||
{
|
||||
ConclusionContent = sc.Content;
|
||||
}
|
||||
else
|
||||
{
|
||||
// fallback: 从模板表查 ConclusionType=1（最强）
|
||||
var template = await _dbContext.ReportConclusions
|
||||
.AsNoTracking()
|
||||
.FirstOrDefaultAsync(t =>
|
||||
t.CategoryId == strongest.CategoryId &&
|
||||
t.ConclusionType == 1 &&
|
||||
!t.IsDeleted);
|
||||
|
||||
ConclusionContent = template?.Content ?? "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
@page "/report/future-abilities-v"
|
||||
@model MiAssessment.Api.Pages.Report.FutureAbilitiesVModel
|
||||
@{
|
||||
ViewData["Title"] = "未来关键发展能力分析";
|
||||
ViewData["PageTitle"] = null;
|
||||
ViewData["PageNumber"] = null;
|
||||
}
|
||||
|
||||
@if (!Model.IsSuccess)
|
||||
{
|
||||
<div class="report-error" data-render-error="true">
|
||||
<p>@Model.ErrorMessage</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="fav-page">
|
||||
<div class="fav-section-title">8、未来关键发展能力</div>
|
||||
|
||||
<!-- 上半部分：雷达图 + 竖向柱状图 -->
|
||||
<div class="fav-charts">
|
||||
<!-- 左：雷达图 -->
|
||||
<div class="fav-chart-panel">
|
||||
<div class="fav-chart-title">未来关键发展能力</div>
|
||||
<canvas id="radarChart" width="460" height="400"></canvas>
|
||||
</div>
|
||||
<!-- 右：竖向柱状图 -->
|
||||
<div class="fav-chart-panel">
|
||||
<div class="fav-chart-title">未来关键发展能力排名</div>
|
||||
<canvas id="barChart" width="520" height="360"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下半部分：结论卡片 -->
|
||||
<div class="fav-conclusions">
|
||||
<div class="fav-conclusion-card fav-card-strong">
|
||||
<div class="fav-badge fav-badge-strong">最强能力解读</div>
|
||||
<div class="fav-conclusion-content">
|
||||
@if (Model.StrongestConclusion != null)
|
||||
{
|
||||
@Html.Raw(Model.StrongestConclusion.Content?.Replace("\\n", "<br/>").Replace("\n", "<br/>") ?? "暂无结论")
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="no-content">暂无结论数据</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="fav-conclusion-card fav-card-weak">
|
||||
<div class="fav-badge fav-badge-weak">较弱能力解读</div>
|
||||
<div class="fav-conclusion-content">
|
||||
@if (Model.WeakestConclusion != null)
|
||||
{
|
||||
@Html.Raw(Model.WeakestConclusion.Content?.Replace("\\n", "<br/>").Replace("\n", "<br/>") ?? "暂无结论")
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="no-content">暂无结论数据</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/pages/future-abilities-v.css" />
|
||||
}
|
||||
|
||||
@section Scripts {
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
window.__deferRenderComplete = true;
|
||||
|
||||
var labels = [@Html.Raw(string.Join(",", Model.Items.Select(x => $"\"{x.CategoryName}\"")))];
|
||||
var scores = [@Html.Raw(string.Join(",", Model.Items.Select(x => x.Score.ToString("F0"))))];
|
||||
var maxScore = Math.ceil(Math.max(...scores) / 2) * 2 + 2;
|
||||
|
||||
var barLabels = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => $"\"{x.CategoryName}\"")))];
|
||||
var barScores = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => x.Score.ToString("F0"))))];
|
||||
var barMax = Math.ceil(Math.max(...barScores) / 2) * 2 + 2;
|
||||
|
||||
// 10种颜色
|
||||
var colors = ['#4A90E2', '#52A06A', '#F5A623', '#E88B9C', '#2ABFBF', '#9B59B6', '#E67E73', '#3498DB', '#1ABC9C', '#F39C12'];
|
||||
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)', 'rgba(155,89,182,0.7)',
|
||||
'rgba(230,126,115,0.7)', 'rgba(52,152,219,0.7)', 'rgba(26,188,156,0.7)',
|
||||
'rgba(243,156,18,0.7)'
|
||||
];
|
||||
|
||||
// ---- 风车扇形图 ----
|
||||
(function() {
|
||||
var canvas = document.getElementById('radarChart');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var W = canvas.width, H = canvas.height;
|
||||
var cx = W / 2, cy = H / 2;
|
||||
var maxR = Math.min(cx, cy) - 50; // 最大半径，留空间给标签
|
||||
var n = labels.length;
|
||||
var angleStep = (2 * Math.PI) / n;
|
||||
// 每个扇形占 angleStep 的 60%，留 40% 间隙
|
||||
var wedgeRatio = 0.6;
|
||||
var wedgeAngle = angleStep * wedgeRatio;
|
||||
var gapAngle = angleStep * (1 - wedgeRatio);
|
||||
// 起始角度：从正上方开始（-90度）
|
||||
var startOffset = -Math.PI / 2;
|
||||
|
||||
// 绘制背景同心圆网格
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.08)';
|
||||
ctx.lineWidth = 1;
|
||||
var gridSteps = 3;
|
||||
for (var g = 1; g <= gridSteps; g++) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, maxR * g / gridSteps, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// 绘制角度分割线
|
||||
for (var k = 0; k < n; k++) {
|
||||
var lineAngle = startOffset + k * angleStep;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx, cy);
|
||||
ctx.lineTo(cx + maxR * Math.cos(lineAngle), cy + maxR * Math.sin(lineAngle));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// 绘制扇形楔块
|
||||
var fillColor = 'rgba(74,144,226,0.6)';
|
||||
var strokeColor = 'rgba(74,144,226,0.8)';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var ratio = scores[i] / maxScore;
|
||||
var r = maxR * ratio;
|
||||
// 扇形起始角 = 该分区中心 - wedgeAngle/2
|
||||
var sectorCenter = startOffset + i * angleStep + angleStep / 2;
|
||||
var a1 = sectorCenter - wedgeAngle / 2;
|
||||
var a2 = sectorCenter + wedgeAngle / 2;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx, cy);
|
||||
ctx.arc(cx, cy, r, a1, a2);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = strokeColor;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// 绘制标签
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = '500 12px "Microsoft YaHei", sans-serif';
|
||||
ctx.textBaseline = 'middle';
|
||||
var labelR = maxR + 24;
|
||||
for (var j = 0; j < n; j++) {
|
||||
var angle = startOffset + j * angleStep + angleStep / 2;
|
||||
var lx = cx + labelR * Math.cos(angle);
|
||||
var ly = cy + labelR * Math.sin(angle);
|
||||
// 根据角度调整对齐
|
||||
var cos = Math.cos(angle);
|
||||
if (cos > 0.3) ctx.textAlign = 'left';
|
||||
else if (cos < -0.3) ctx.textAlign = 'right';
|
||||
else ctx.textAlign = 'center';
|
||||
ctx.fillText(labels[j], lx, ly);
|
||||
}
|
||||
})();
|
||||
|
||||
// ---- 竖向柱状图 ----
|
||||
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 11px "Microsoft YaHei", sans-serif';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.textAlign = 'center';
|
||||
meta.data.forEach(function(bar, i) {
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.fillText(dataset.data[i], bar.x, bar.y - 4);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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: 32
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { font: { size: 10 }, color: '#666', maxRotation: 0, autoSkip: false },
|
||||
grid: { display: false }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: barMax,
|
||||
ticks: { stepSize: 2, font: { size: 10 }, color: '#999' },
|
||||
grid: { color: 'rgba(0,0,0,0.05)' }
|
||||
}
|
||||
},
|
||||
layout: { padding: { top: 20 } }
|
||||
},
|
||||
plugins: [barDataLabelPlugin]
|
||||
});
|
||||
|
||||
document.body.setAttribute('data-render-complete', 'true');
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
using Microsoft.EntityFrameworkCore;
|
||||
using MiAssessment.Core.Interfaces;
|
||||
using MiAssessment.Model.Data;
|
||||
using MiAssessment.Model.Models.Report;
|
||||
|
||||
namespace MiAssessment.Api.Pages.Report;
|
||||
|
||||
/// <summary>
|
||||
/// 未来关键发展能力分析页（竖向柱状图版）
|
||||
/// 路由：/report/future-abilities-v?recordId=3
|
||||
/// CategoryType=8：10项未来能力，雷达图+竖向柱状图+两结论卡片
|
||||
/// </summary>
|
||||
public class FutureAbilitiesVModel : ReportPageModelBase
|
||||
{
|
||||
/// <summary>
|
||||
/// 按 CategoryId 排序（雷达图用）
|
||||
/// </summary>
|
||||
public List<CategoryResultDataDto> Items { get; set; } = new();
|
||||
|
||||
/// <summary>
|
||||
/// 按分数降序（柱状图用）
|
||||
/// </summary>
|
||||
public List<CategoryResultDataDto> ItemsByScore { get; set; } = new();
|
||||
|
||||
/// <summary>
|
||||
/// 最强能力名称
|
||||
/// </summary>
|
||||
public string StrongestName { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
/// 最强能力结论
|
||||
/// </summary>
|
||||
public ConclusionDataDto? StrongestConclusion { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 较弱能力名称
|
||||
/// </summary>
|
||||
public string WeakestName { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
/// 较弱能力结论
|
||||
/// </summary>
|
||||
public ConclusionDataDto? WeakestConclusion { get; set; }
|
||||
|
||||
private readonly MiAssessmentDbContext _dbContext;
|
||||
|
||||
public FutureAbilitiesVModel(IReportDataService reportDataService, MiAssessmentDbContext dbContext)
|
||||
: base(reportDataService)
|
||||
{
|
||||
_dbContext = dbContext;
|
||||
}
|
||||
|
||||
protected override async Task OnDataLoadedAsync()
|
||||
{
|
||||
if (ReportData?.ResultsByType == null ||
|
||||
!ReportData.ResultsByType.TryGetValue(8, out var allItems))
|
||||
{
|
||||
ErrorMessage = "缺少未来关键发展能力数据";
|
||||
return;
|
||||
}
|
||||
|
||||
Items = allItems.OrderBy(x => x.CategoryId).ToList();
|
||||
if (Items.Count == 0)
|
||||
{
|
||||
ErrorMessage = "未找到未来关键发展能力数据";
|
||||
return;
|
||||
}
|
||||
|
||||
ItemsByScore = Items.OrderByDescending(x => x.Score).ToList();
|
||||
|
||||
// 最强结论
|
||||
var strongest = ItemsByScore.First();
|
||||
StrongestName = strongest.CategoryName;
|
||||
if (ReportData.ConclusionsByCategory.TryGetValue(strongest.CategoryId, out var sc))
|
||||
StrongestConclusion = sc;
|
||||
else
|
||||
StrongestConclusion = await GetTemplateConclusionAsync(strongest.CategoryId, 1);
|
||||
|
||||
// 较弱结论
|
||||
var weakest = ItemsByScore.Last();
|
||||
WeakestName = weakest.CategoryName;
|
||||
if (ReportData.ConclusionsByCategory.TryGetValue(weakest.CategoryId, out var wc))
|
||||
WeakestConclusion = wc;
|
||||
else
|
||||
WeakestConclusion = await GetTemplateConclusionAsync(weakest.CategoryId, 4);
|
||||
}
|
||||
|
||||
private async Task<ConclusionDataDto?> GetTemplateConclusionAsync(long categoryId, int conclusionType)
|
||||
{
|
||||
var template = await _dbContext.ReportConclusions
|
||||
.AsNoTracking()
|
||||
.FirstOrDefaultAsync(t =>
|
||||
t.CategoryId == categoryId &&
|
||||
t.ConclusionType == conclusionType &&
|
||||
!t.IsDeleted);
|
||||
if (template == null) return null;
|
||||
return new ConclusionDataDto
|
||||
{
|
||||
CategoryId = template.CategoryId,
|
||||
ConclusionType = template.ConclusionType,
|
||||
Title = template.Title,
|
||||
Content = template.Content
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* ============================================
|
||||
报告尾页 - 特此说明
|
||||
页面固定尺寸：1309×926px
|
||||
============================================ */
|
||||
|
||||
.disc-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
|
||||
/* 说明卡片 */
|
||||
.disc-card {
|
||||
border: 3px solid #C0392B;
|
||||
border-radius: 12px;
|
||||
padding: 50px 50px 40px;
|
||||
position: relative;
|
||||
margin: 0 60px;
|
||||
}
|
||||
|
||||
/* 顶部红色 badge */
|
||||
.disc-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-1px);
|
||||
padding: 6px 40px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: #C0392B;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* 说明文字 */
|
||||
.disc-content {
|
||||
font-size: 20px;
|
||||
line-height: 2.4;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.disc-content p {
|
||||
margin: 0;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
/* 底部机构信息 */
|
||||
.disc-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 3px solid #C0392B;
|
||||
border-radius: 12px;
|
||||
padding: 16px 40px;
|
||||
margin: 0 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.disc-footer-left,
|
||||
.disc-footer-right {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* ============================================
|
||||
未来关键发展能力结论页
|
||||
页面固定尺寸：1309×926px
|
||||
全页红色边框卡片 + 顶部红色badge
|
||||
============================================ */
|
||||
|
||||
.fac-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
/* 全页卡片 */
|
||||
.fac-card {
|
||||
flex: 1;
|
||||
border: 3px solid #C0392B;
|
||||
border-radius: 12px;
|
||||
padding: 44px 36px 28px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部红色 badge */
|
||||
.fac-badge {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-1px);
|
||||
padding: 6px 40px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: #C0392B;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
/* 结论文字 */
|
||||
.fac-content {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/* ============================================
|
||||
未来关键发展能力分析页（竖向柱状图版）
|
||||
页面固定尺寸：1309×926px
|
||||
雷达图 + 竖向柱状图 + 两结论卡片
|
||||
============================================ */
|
||||
|
||||
.fav-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.fav-section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #E67E73;
|
||||
}
|
||||
|
||||
/* ---- 上半部分：两图并排 ---- */
|
||||
.fav-charts {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.fav-chart-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fav-chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #E67E73;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- 下半部分：结论卡片 ---- */
|
||||
.fav-conclusions {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.fav-conclusion-card {
|
||||
flex: 1;
|
||||
border: 3px solid;
|
||||
border-radius: 12px;
|
||||
padding: 34px 20px 14px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fav-card-strong {
|
||||
border-color: #E67E73;
|
||||
background: #FFF5F5;
|
||||
}
|
||||
|
||||
.fav-card-weak {
|
||||
border-color: #E67E73;
|
||||
background: #FFF5F5;
|
||||
}
|
||||
|
||||
.fav-badge {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-1px);
|
||||
padding: 5px 24px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.fav-badge-strong { background: #C0392B; }
|
||||
.fav-badge-weak { background: #C0392B; }
|
||||
|
||||
.fav-conclusion-content {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 9;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user