725 lines
17 KiB
Vue
725 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view class="grades-page flex flex-col">
|
|||
|
|
<!-- 顶部蓝色背景 -->
|
|||
|
|
<view class="blue-header">
|
|||
|
|
<view class="header-content">
|
|||
|
|
<text class="title">2024学年第一学期二年级期中</text>
|
|||
|
|
<text class="subtitle">教学质量监测成绩报告</text>
|
|||
|
|
|
|||
|
|
<view class="color-bar"></view>
|
|||
|
|
|
|||
|
|
<text class="total-score">全科（满分700分）</text>
|
|||
|
|
|
|||
|
|
<text class="grade">A</text>
|
|||
|
|
|
|||
|
|
<view class="grade-info">
|
|||
|
|
<text class="grade-explanation" @click="showGradeInfo">等级说明</text>
|
|||
|
|
<view class="grade-box">
|
|||
|
|
<text class="grade-label">区域等级</text>
|
|||
|
|
<text class="grade-value">相对较好</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 白色内容区 -->
|
|||
|
|
<view class="flex-1" style="background-color: #f6f6f6; position: relative">
|
|||
|
|
<view class="content-area">
|
|||
|
|
<!-- 选项卡 -->
|
|||
|
|
<view class="tabs">
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: activeTab === 'diagnosis' }"
|
|||
|
|
@click="switchTab('diagnosis')"
|
|||
|
|
>
|
|||
|
|
<text>学科诊断</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: activeTab === 'scores' }"
|
|||
|
|
@click="switchTab('scores')"
|
|||
|
|
>
|
|||
|
|
<text>学科成绩</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: activeTab === 'trend' }"
|
|||
|
|
@click="switchTab('trend')"
|
|||
|
|
>
|
|||
|
|
<text>分数趋势</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 学科成绩视图 -->
|
|||
|
|
<view class="score-view flex-1 po-re" v-if="activeTab === 'scores'">
|
|||
|
|
<view class="po-ab inset-0 px-15" style="overflow: auto">
|
|||
|
|
<view
|
|||
|
|
class="subject-item"
|
|||
|
|
v-for="(subject, index) in subjects"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<view class="subject-header">
|
|||
|
|
<text class="subject-name"
|
|||
|
|
>{{ subject.name }}(满分{{ subject.fullScore }})</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<view class="subject-body">
|
|||
|
|
<text class="subject-grade">{{ subject.grade }}</text>
|
|||
|
|
<text class="detail-btn">详情</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分数趋势视图 -->
|
|||
|
|
<view class="trend-view" v-if="activeTab === 'trend'">
|
|||
|
|
<!-- 图表占位区域 -->
|
|||
|
|
<view class="radar-placeholder" id="chart-container1">
|
|||
|
|
<canvas
|
|||
|
|
style="width: 100%; height: 100%"
|
|||
|
|
canvas-id="trendCanvas"
|
|||
|
|
id="trendCanvas"
|
|||
|
|
class="charts"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 学科诊断视图 -->
|
|||
|
|
<view class="diagnosis-view flex-1 po-re" v-if="activeTab === 'diagnosis'">
|
|||
|
|
<view class="po-ab inset-0 p-15" style="overflow: auto">
|
|||
|
|
<view class="radar-placeholder" id="chart-container">
|
|||
|
|
<canvas
|
|||
|
|
style="width: 100%; height: 100%"
|
|||
|
|
canvas-id="radarCanvas"
|
|||
|
|
id="radarCanvas"
|
|||
|
|
class="charts"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 诊断评语 -->
|
|||
|
|
<view class="diagnosis-comment">
|
|||
|
|
<text class="comment-title">尊敬的家长，您好</text>
|
|||
|
|
<text class="comment-text"
|
|||
|
|
>向您祝贺，朱信权同学本次考试成绩位于较优秀之列！</text
|
|||
|
|
>
|
|||
|
|
<text class="comment-text"
|
|||
|
|
>这次考试中道德与法治学科表现最优秀，继续保持学科优势！相对来说英语学科表现最弱，不过也有27道题的答题表现超出同层次的平均。</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 等级说明弹窗 -->
|
|||
|
|
<u-popup
|
|||
|
|
:show="gradeInfoPopupVisible"
|
|||
|
|
mode="center"
|
|||
|
|
round="10"
|
|||
|
|
:closeable="true"
|
|||
|
|
@close="hideGradeInfo"
|
|||
|
|
>
|
|||
|
|
<view class="grade-info-popup">
|
|||
|
|
<view class="popup-header">
|
|||
|
|
<text class="popup-title">等级说明</text>
|
|||
|
|
<u-icon
|
|||
|
|
name="close"
|
|||
|
|
size="20"
|
|||
|
|
color="#999"
|
|||
|
|
@click="hideGradeInfo"
|
|||
|
|
></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<view
|
|||
|
|
class="grade-item"
|
|||
|
|
v-for="(item, index) in gradeInfoList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="grade-label"
|
|||
|
|
:style="{ backgroundColor: item.color }"
|
|||
|
|
>{{ item.grade }}</view
|
|||
|
|
>
|
|||
|
|
<view class="grade-desc">
|
|||
|
|
<text class="grade-title">{{ item.desc }}</text>
|
|||
|
|
<text class="grade-detail">{{ item.description }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, watch, nextTick } from "vue";
|
|||
|
|
import { navigateBack } from "@/utils/uniapp";
|
|||
|
|
import uCharts from "@/components/charts/u-charts.js";
|
|||
|
|
|
|||
|
|
// 当前选中的选项卡
|
|||
|
|
const activeTab = ref("scores");
|
|||
|
|
|
|||
|
|
// 切换选项卡
|
|||
|
|
function switchTab(tab: string) {
|
|||
|
|
activeTab.value = tab;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 科目数据
|
|||
|
|
const subjects = ref([
|
|||
|
|
{ name: "语文", fullScore: 98, grade: "B" },
|
|||
|
|
{ name: "数学", fullScore: 96, grade: "A" },
|
|||
|
|
{ name: "英语", fullScore: 98, grade: "A" },
|
|||
|
|
{ name: "科学", fullScore: 94, grade: "A" },
|
|||
|
|
{ name: "音乐", fullScore: 93, grade: "A" },
|
|||
|
|
{ name: "美术", fullScore: 93, grade: "A" },
|
|||
|
|
{ name: "体育", fullScore: 93, grade: "A" },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 雷达图数据
|
|||
|
|
const radarData = {
|
|||
|
|
categories: ["语文", "数学", "英语", "科学", "音乐", "美术", "体育"],
|
|||
|
|
series: [{ name: "分数", data: [85, 90, 88, 92, 86, 91, 89] }],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 趋势图数据
|
|||
|
|
const trendData = {
|
|||
|
|
categories: ["01-04", "02-04", "03-04", "04-04", "05-04"],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "成绩趋势",
|
|||
|
|
data: [84, 81, 89, 92, 99],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 绘制雷达图
|
|||
|
|
const drawRadarChart = () => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
try {
|
|||
|
|
// 获取容器信息
|
|||
|
|
const query = uni.createSelectorQuery();
|
|||
|
|
query
|
|||
|
|
.select("#chart-container")
|
|||
|
|
.boundingClientRect((data) => {
|
|||
|
|
if (!data) {
|
|||
|
|
console.error("未找到雷达图容器");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全类型判断
|
|||
|
|
const rect = data as any;
|
|||
|
|
const canvasWidth = rect.width || 300;
|
|||
|
|
const canvasHeight = rect.height || 300;
|
|||
|
|
|
|||
|
|
const ctx = uni.createCanvasContext("radarCanvas");
|
|||
|
|
|
|||
|
|
// 绘制雷达图配置
|
|||
|
|
const options = {
|
|||
|
|
type: "radar",
|
|||
|
|
context: ctx,
|
|||
|
|
width: canvasWidth,
|
|||
|
|
height: canvasHeight,
|
|||
|
|
categories: radarData.categories,
|
|||
|
|
series: radarData.series,
|
|||
|
|
animation: true,
|
|||
|
|
background: "#FFFFFF",
|
|||
|
|
padding: [10, 10, 10, 10],
|
|||
|
|
dataLabel: false,
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
radar: {
|
|||
|
|
gridType: "radar",
|
|||
|
|
gridColor: "#CCCCCC",
|
|||
|
|
gridCount: 3,
|
|||
|
|
opacity: 0.2,
|
|||
|
|
labelShow: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
new uCharts(options);
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("绘制雷达图出错:", error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 绘制趋势图
|
|||
|
|
const drawTrendChart = () => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
try {
|
|||
|
|
// 获取容器信息
|
|||
|
|
const query = uni.createSelectorQuery();
|
|||
|
|
query
|
|||
|
|
.select("#chart-container1")
|
|||
|
|
.boundingClientRect((data) => {
|
|||
|
|
if (!data) {
|
|||
|
|
console.error("未找到趋势图容器");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全类型判断
|
|||
|
|
const rect = data as any;
|
|||
|
|
const canvasWidth = rect.width || 300;
|
|||
|
|
const canvasHeight = rect.height || 300;
|
|||
|
|
|
|||
|
|
const ctx = uni.createCanvasContext("trendCanvas");
|
|||
|
|
|
|||
|
|
// 绘制折线图配置
|
|||
|
|
const options = {
|
|||
|
|
type: "line",
|
|||
|
|
context: ctx,
|
|||
|
|
width: canvasWidth,
|
|||
|
|
height: canvasHeight,
|
|||
|
|
categories: trendData.categories,
|
|||
|
|
series: trendData.series,
|
|||
|
|
animation: true,
|
|||
|
|
background: "#FFFFFF",
|
|||
|
|
padding: [15, 15, 0, 15],
|
|||
|
|
dataLabel: true,
|
|||
|
|
dataPointShape: true,
|
|||
|
|
enableScroll: false,
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
disableGrid: true,
|
|||
|
|
axisLine: true,
|
|||
|
|
axisLineColor: "#CCCCCC",
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
gridType: "dash",
|
|||
|
|
dashLength: 2,
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
min: 80,
|
|||
|
|
max: 100,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
line: {
|
|||
|
|
type: "straight",
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
new uCharts(options);
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("绘制趋势图出错:", error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听选项卡变化，重新渲染对应图表
|
|||
|
|
watch(activeTab, (newValue) => {
|
|||
|
|
if (newValue === "diagnosis") {
|
|||
|
|
setTimeout(drawRadarChart, 50);
|
|||
|
|
} else if (newValue === "trend") {
|
|||
|
|
setTimeout(drawTrendChart, 50);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 默认绘制学科成绩视图
|
|||
|
|
// 延迟执行确保DOM已经渲染
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (activeTab.value === "diagnosis") {
|
|||
|
|
drawRadarChart();
|
|||
|
|
} else if (activeTab.value === "trend") {
|
|||
|
|
drawTrendChart();
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 等级说明弹窗状态
|
|||
|
|
const gradeInfoPopupVisible = ref(false);
|
|||
|
|
|
|||
|
|
// 等级说明数据
|
|||
|
|
const gradeInfoList = ref([
|
|||
|
|
{
|
|||
|
|
grade: "A+",
|
|||
|
|
color: "#FF6B6B",
|
|||
|
|
desc: "优异",
|
|||
|
|
description: "超过90%同学，处于年级前列",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
grade: "A",
|
|||
|
|
color: "#4D96FF",
|
|||
|
|
desc: "相对较好",
|
|||
|
|
description: "超过80%同学，表现良好",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
grade: "B",
|
|||
|
|
color: "#6BCB77",
|
|||
|
|
desc: "良好",
|
|||
|
|
description: "超过60%同学，达到年级中上水平",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
grade: "C",
|
|||
|
|
color: "#FFD93D",
|
|||
|
|
desc: "一般",
|
|||
|
|
description: "达到年级平均水平",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
grade: "D",
|
|||
|
|
color: "#B8B8B8",
|
|||
|
|
desc: "待提高",
|
|||
|
|
description: "未达到年级平均水平，需要加强",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 显示等级说明弹窗
|
|||
|
|
function showGradeInfo() {
|
|||
|
|
gradeInfoPopupVisible.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏等级说明弹窗
|
|||
|
|
function hideGradeInfo() {
|
|||
|
|
gradeInfoPopupVisible.value = false;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.grades-page {
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部蓝色背景 */
|
|||
|
|
.blue-header {
|
|||
|
|
background-color: #2672ff;
|
|||
|
|
padding: 15px 15px 50px 15px;
|
|||
|
|
position: relative;
|
|||
|
|
color: white;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.back-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
left: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
right: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-content {
|
|||
|
|
padding-top: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-bar {
|
|||
|
|
width: 180px;
|
|||
|
|
height: 15px;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
to right,
|
|||
|
|
#29b6f6,
|
|||
|
|
#4caf50,
|
|||
|
|
#ff9800,
|
|||
|
|
#f57c00,
|
|||
|
|
#ffab91,
|
|||
|
|
#ffe0b2
|
|||
|
|
);
|
|||
|
|
border-radius: 15px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-score {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade {
|
|||
|
|
font-size: 50px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.grade-explanation {
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-right: 15px;
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 2px;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-box {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|||
|
|
padding: 8px 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.grade-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-value {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 内容区域 */
|
|||
|
|
.content-area {
|
|||
|
|
border-top-left-radius: 20px;
|
|||
|
|
border-top-right-radius: 20px;
|
|||
|
|
background-color: white;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 3;
|
|||
|
|
top: -70rpx;
|
|||
|
|
left: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
/* 选项卡 */
|
|||
|
|
.tabs {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
position: relative;
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 15px;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #1976d2;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 25%;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 2px;
|
|||
|
|
background-color: #1976d2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 学科成绩视图 */
|
|||
|
|
.score-view {
|
|||
|
|
padding: 15px;
|
|||
|
|
|
|||
|
|
.subject-item {
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
.subject-header {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
|
|||
|
|
.subject-name {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subject-body {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
padding-bottom: 15px;
|
|||
|
|
|
|||
|
|
.subject-grade {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-btn {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分数趋势视图 */
|
|||
|
|
.trend-view {
|
|||
|
|
padding: 15px;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.chart-placeholder {
|
|||
|
|
height: 300px;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.placeholder-text {
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.radar-placeholder {
|
|||
|
|
height: 300px;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.placeholder-text {
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 学科诊断视图 */
|
|||
|
|
.diagnosis-view {
|
|||
|
|
padding: 15px;
|
|||
|
|
|
|||
|
|
.diagnosis-comment {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
|
|||
|
|
.comment-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 等级说明弹窗 */
|
|||
|
|
.grade-info-popup {
|
|||
|
|
width: 280px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.popup-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-bottom: 1px solid #f2f2f2;
|
|||
|
|
|
|||
|
|
.popup-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-content {
|
|||
|
|
padding: 10px 15px 20px;
|
|||
|
|
max-height: 60vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
.grade-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
padding: 8px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-label {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-desc {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.grade-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-detail {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|