chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: show new training modules on student home

Browse Source
dev-QQq
chenyuan 4 weeks ago
parent 2a8610b8da
commit 24ba0d069c
2 changed files with 324 additions and 649 deletions
Show Stats Download Patch File Download Diff File

956
src/views/student/index.vue
Unescape Escape View File

@ -1,692 +1,350 @@
<!--
* @Author: qinzhenpen qzp1807@126.com
* @Date: 2025-03-03 14:13:35
* @LastEditors: qinzhenpen qzp1807@126.com
* @LastEditTime: 2025-05-16 17:43:18
* @FilePath: \financial-big-data\src\components\Ai\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="index app-container">
<el-card>
<div class="student-home app-container">
<el-alert
v-if="loadError"
class="load-error"
type="error"
:title="loadError"
:closable="false"
show-icon
/>
<el-card class="dashboard-card score-card" v-loading="loading">
<template #header>
<div class="card-header">
<span>我的成绩</span>
<span>我的实训成绩</span>
<small>按当前教学班发布的实训模块统计</small>
</div>
</template>
<div class="Achievement Achievement1">
<div class="left">
<div>
<div class="AchievementChart" ref="AchievementChartRefs" style="width: 40rem; min-width: none; min-height: 300px"></div>
</div>
<div class="gradeDetails">
<div class="detalis-item">
<!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
<label>成绩：</label>
<span>{{ scoreInfo.totalScore || 0 }}分</span>
</div>
<div class="detalis-item">
<!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
<label>排名：</label>
<span>{{ scoreInfo.stuRank || "--" }}</span>
</div>
<div v-if="!loadError" class="score-layout">
<section class="score-visual" aria-label="模块成绩分布">
<div ref="scoreChartRef" class="score-chart"></div>
<div class="score-summary">
<span class="summary-label">综合成绩</span>
<strong>{{ formatScore(report.totalScore) }}</strong>
<span class="summary-unit">分</span>
<span class="rank-copy">当前排名：--</span>
</div>
</div>
<div class="right">
<el-table :data="tableData" stripe border style="width: 45rem">
<el-table-column type="index" label="序号" align="center" />
<el-table-column prop="model" label="项目" align="center" />
<el-table-column prop="scoce" label="成绩占比" align="center">
<template #default="scope">{{ scope.row.scoce }}%</template>
</section>
<section class="score-table-wrap" aria-label="模块成绩明细">
<el-table :data="participatingModules" stripe border class="score-table" empty-text="暂无已发布的实训模块">
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column prop="moduleName" label="实训模块" min-width="210" />
<el-table-column label="成绩占比" width="116" align="center">
<template #default="scope">{{ formatWeight(scope.row.weight) }}</template>
</el-table-column>
<el-table-column prop="address" label="成绩" align="center">
<template #default="scope">
{{ scope.row.address || 0 }}
</template>
<el-table-column label="模块得分" width="110" align="center">
<template #default="scope">{{ formatScore(scope.row.score) }}</template>
</el-table-column>
<el-table-column label="完成进度" width="138" align="center">
<template #default="scope">{{ progressText(scope.row) }}</template>
</el-table-column>
</el-table>
</div>
</section>
</div>
</el-card>
<el-card style="margin-top: 10px">
<el-card class="dashboard-card progress-card" v-loading="loading">
<template #header>
<div class="card-header">
<span>我的成绩</span>
<span>实训进度概览</span>
<small>完成任务越多，模块进度越靠前</small>
</div>
</template>
<div class="Achievement">
<div class="left">
<div class="chartMain">
<div id="echart3" style="width: 45vw; height: 36.14vh"></div>
<div v-if="!loadError" class="progress-layout">
<section class="learning-time" aria-label="有效学习时间">
<div class="time-orbit">
<div class="time-value">{{ studyHours }}</div>
<div class="time-unit">HRS</div>
</div>
</div>
<div class="right">
<div class="timeContent">
<div class="activeTime">
<div class="ring">
<div class="ringIn">
<div class="ringText">
<div style="text-align: center; padding-top: 15px">
<div>
{{ totalTime || "0" }}
</div>
<div class="line"></div>
<div>HRS</div>
</div>
</div>
</div>
</div>
<div class="profile">
<div class="num"></div>
<div class="text">有效时间</div>
<div class="text">有效学习时间的投入概况</div>
</div>
</div>
<div class="detail">
<div id="echart2" style="width: 11.979vw; height: 21.296vh"></div>
<div class="timeList">
<div class="listItem">
<img src="@/assets/images/x1.png" alt="" />
<span>市场需求挖掘</span>
<span>{{ statistic.marketResearchTime || "0" }}分钟</span>
</div>
<div class="listItem">
<img src="@/assets/images/x2.png" alt="" />
<span>产品规划</span>
<span>{{ statistic.productPlanningTime || "0" }}分钟</span>
</div>
<div class="listItem">
<img src="@/assets/images/x3.png" alt="" />
<span>产品投放测试</span>
<span>{{ statistic.productLaunchTestTime || "0" }}分钟</span>
</div>
<div class="listItem">
<img src="@/assets/images/x4.png" alt="" />
<span>供应渠道管理</span>
<span>{{ statistic.supplyChannelTime || "0" }}分钟</span>
</div>
<div class="listItem">
<img src="@/assets/images/x5.png" alt="" />
<span>产品评估与考核</span>
<span>{{ statistic.productEvaluationTime || "0" }} 分钟</span>
</div>
</div>
<strong>有效学习时间</strong>
<span>累计投入 {{ totalStudyMinutes }} 分钟</span>
</section>
<section class="progress-chart-wrap" aria-label="模块任务完成情况">
<div ref="progressChartRef" class="progress-chart"></div>
</section>
<section class="module-progress-list" aria-label="模块实训进度列表">
<article v-for="(module, index) in participatingModules" :key="module.moduleName" class="module-progress-item">
<div class="module-progress-head">
<span class="module-color" :style="{ backgroundColor: moduleColor(index) }"></span>
<strong>{{ module.moduleName }}</strong>
<span>{{ progressText(module) }}</span>
</div>
</div>
</div>
<el-progress
:percentage="progressPercent(module)"
:stroke-width="8"
:show-text="false"
:color="moduleColor(index)"
/>
</article>
</section>
</div>
</el-card>
</div>
</template>
<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as echarts from "echarts";
import useUserStore from "@/store/modules/user";
import * as indexApi from "@/api/index";
const AchievementChartRefs = ref(null);
const statistic = ref({});
const currentTeachingClassId = ref("");
const scoreTrend = ref([
{
title: "我",
scores: [0, 0, 0, 0, 0],
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
},
{
title: "第一名",
scores: [0, 0, 0, 0, 0],
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
},
{
title: "最后一名",
scores: [0, 0, 0, 0, 0],
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
},
]);
const list = ref([]);
const tableData = ref([
{
date: "2016-05-03",
model: "市场需求挖掘",
address: "20",
scoce: "20",
key: "oneScore",
key1: "oneWeight",
},
{
date: "2016-05-02",
model: "产品规划",
address: "20",
scoce: "20",
key: "twoScore",
key1: "twoWeight",
},
{
date: "2016-05-04",
model: "产品投放测试",
scoce: "20",
address: "20",
key: "threeScore",
key1: "threeWeight",
},
{
date: "2016-05-01",
model: "供应渠道管理",
address: "20",
scoce: "20",
key: "fourScore",
key1: "fourWeight",
},
{
date: "2016-05-01",
model: "产品评估与考核",
address: "20",
scoce: "15",
key: "fiveScore",
key1: "fiveWeight",
},
]);
const corList = ["#795ef3", "#419af2", "#f7b844", "red", "pink"];
const scoreInfo = ref({});
const timeKey = ref({
marketResearchTime: 0,
productPlanningTime: 0,
productLaunchTestTime: 0,
supplyChannelTime: 0,
productEvaluationTime: 0,
});
// 时间总和
const totalTime = computed(() => {
let time = 0;
for (let key in timeKey.value) {
time += timeKey.value[key];
}
return time;
});
const getgrade = () => {
let myChart = echarts.init(AchievementChartRefs.value);
let option;
option = {
legend: {
orient: "vertical",
right: 30,
top: "40%",
bottom: 20,
},
series: [
{
name: "Access From",
type: "pie",
radius: "80%",
center: ["35%", "50%"],
data: list.value,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
// 添加窗口大小变化监听
const handleResize = () => {
myChart.resize();
};
window.addEventListener("resize", handleResize);
// 在组件卸载时移除监听（Vue 3 示例）
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
myChart.dispose(); // 清理图表实例
});
const userStore = useUserStore();
const scoreChartRef = ref(null);
const progressChartRef = ref(null);
const report = ref({ totalScore: 0, modules: [] });
const studyTime = ref({});
const loading = ref(true);
const loadError = ref("");
const MODULE_COLORS = ["#6958e7", "#3698ee", "#ffb83e", "#ff6f4a", "#45b982", "#39b8ce"];
let scoreChart;
let progressChart;
const participatingModules = computed(() =>
(report.value.modules || []).filter((module) => module && module.participating !== false)
);
const totalStudyMinutes = computed(() =>
Object.values(studyTime.value || {}).reduce((total, value) => total + (Number(value) || 0), 0)
);
const studyHours = computed(() => (totalStudyMinutes.value / 60).toFixed(1));
const formatScore = (value) => Number(value || 0).toFixed(2).replace(/\.00$/, "");
const formatWeight = (weight) => `${(Number(weight || 0) * 100).toFixed(0)}%`;
const moduleColor = (index) => MODULE_COLORS[index % MODULE_COLORS.length];
const progressPercent = (module) => {
const total = Number(module.totalTaskCount) || 0;
const completed = Number(module.completedTaskCount) || 0;
return total > 0 ? Math.min(100, Math.round((completed / total) * 100)) : 0;
};
const echart3Init = () => {
var chartDom = document.getElementById("echart3");
var myChart = echarts.init(chartDom);
console.log(userStore.userInfo, "userStore.userInfo");
var option;
option = {
// title: {
// text: "Stacked Area Chart"
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["第一名", "我的成绩", "最后一名"],
top: 10,
},
const progressText = (module) => `${Number(module.completedTaskCount) || 0}/${Number(module.totalTaskCount) || 0}`;
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: scoreTrend.value[0].times,
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "最后一名",
type: "line",
// stack: "Total",
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(66,209,216,0.6)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
color: "#42D1D8",
},
itemStyle: {
color: "#42D1D8",
},
emphasis: {
focus: "series",
},
data: scoreTrend.value[2].scores,
// data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "我的成绩",
type: "line",
// stack: "Total",
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(133,64,251,0.6)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
color: "#8540FB",
},
itemStyle: {
color: "#8540FB",
},
emphasis: {
focus: "series",
},
data: scoreTrend.value[0].scores,
// data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "第一名",
type: "line",
// stack: "Total",
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,185,0,0.6)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
color: "#FFB900",
},
itemStyle: {
color: "#FFB900",
},
emphasis: {
focus: "series",
},
data: scoreTrend.value[1].scores,
// data: [220, 182, 191, 234, 290, 330, 310]
},
],
};
option && myChart.setOption(option);
// 添加窗口大小变化监听
const handleResize = () => {
myChart.resize();
};
window.addEventListener("resize", handleResize);
// 在组件卸载时移除监听（Vue 3 示例）
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
myChart.dispose(); // 清理图表实例
});
const renderScoreChart = () => {
if (!scoreChartRef.value) return;
scoreChart = scoreChart || echarts.init(scoreChartRef.value);
scoreChart.setOption({
tooltip: { trigger: "item", valueFormatter: (value) => `${formatScore(value)} 分` },
legend: { orient: "vertical", right: 8, top: "middle", itemWidth: 12, itemHeight: 12 },
series: [{
name: "模块得分",
type: "pie",
radius: ["42%", "72%"],
center: ["34%", "50%"],
avoidLabelOverlap: true,
label: { formatter: "{b}" },
data: participatingModules.value.map((module, index) => ({
name: module.moduleName,
value: Number(module.score) || 0,
itemStyle: { color: moduleColor(index) }
}))
}]
}, true);
};
const echart2Init = () => {
var chartDom = document.getElementById("echart2");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "时间占比",
left: "center",
top: "center",
textStyle: {
fontSize: 14,
fontWeight: "normal",
},
},
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
show: false,
const renderProgressChart = () => {
if (!progressChartRef.value) return;
progressChart = progressChart || echarts.init(progressChartRef.value);
const modules = participatingModules.value;
progressChart.setOption({
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
legend: { top: 0, data: ["已完成", "待完成"] },
grid: { left: 24, right: 24, top: 40, bottom: 22, containLabel: true },
xAxis: { type: "value", minInterval: 1 },
yAxis: {
type: "category",
inverse: true,
axisLabel: { width: 132, overflow: "truncate" },
data: modules.map((module) => module.moduleName)
},
series: [
{
name: "时间占比",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
// label: {
// show: true,
// formatter: '时间占比'
// // fontSize: 40,
// // fontWeight: "bold"
// }
},
labelLine: {
show: false,
},
data: [
{ value: 0, name: "收益与风险" },
{ value: 0, name: "现值和价值评估" },
{ value: 0, name: "投资决策" },
{ value: 0, name: "融资决策" },
{ value: 0, name: "营运资本管理" },
{ value: 0, name: "财务分析及估值" },
{ value: 0, name: "财务预警及风险管理" },
],
name: "已完成",
type: "bar",
stack: "tasks",
barMaxWidth: 18,
itemStyle: { color: "#3e9cf4", borderRadius: [9, 0, 0, 9] },
data: modules.map((module) => Number(module.completedTaskCount) || 0)
},
],
};
option && myChart.setOption(option);
};
const loadCurrentTeachingClassId = async () => {
const res = await indexApi.getCurrentTeachingClass({ userId: userStore.userInfo.userId });
currentTeachingClassId.value = res?.data?.schoolClassId || "";
return currentTeachingClassId.value;
{
name: "待完成",
type: "bar",
stack: "tasks",
barMaxWidth: 18,
itemStyle: { color: "#e8eef8", borderRadius: [0, 9, 9, 0] },
data: modules.map((module) => Math.max(0, (Number(module.totalTaskCount) || 0) - (Number(module.completedTaskCount) || 0)))
}
]
}, true);
};
const getScoreTrend = async () => {
const classId = currentTeachingClassId.value || (await loadCurrentTeachingClassId());
if (!classId) return;
indexApi
.getRouters({
userId: userStore.userInfo.userId,
classId,
schoolId: userStore.userInfo.schoolId,
})
.then((res) => {
if(!res.data) return;
scoreTrend.value = res.data;
echart3Init();
});
const renderCharts = () => {
renderScoreChart();
renderProgressChart();
};
// 查询学生权重
const getwight = async () => {
const classId = currentTeachingClassId.value || (await loadCurrentTeachingClassId());
if (!classId) return;
indexApi
.getStuWeightScore({
userId: userStore.userInfo.userId,
classId,
schoolId: userStore.userInfo.schoolId,
})
.then((res) => {
if (!res.data) return;
scoreInfo.value = res.data ;
tableData.value.forEach((item) => {
item.scoce = res.data[item.key1] * 100;
item.address = res.data[item.key];
});
list.value = tableData.value.map((item, index) => ({
name: item.model,
value: [item.address],
itemStyle: { color: corList[index] },
}));
console.log(list.value, "list");
getgrade();
});
const resizeCharts = () => {
scoreChart?.resize();
progressChart?.resize();
};
// 查看学习时间
const getStudyTime = () => {
indexApi
.getStudyTime({
userId: userStore.userInfo.userId,
})
.then((res) => {
if (!res.data) return;
statistic.value = res.data;
Object.keys(res.data).forEach((key) => {
if (key in timeKey.value) {
timeKey.value[key] = res.data[key];
}
});
});
const loadDashboard = async () => {
loading.value = true;
loadError.value = "";
const [reportResult, timeResult] = await Promise.allSettled([
indexApi.getCurrentExperimentReport(),
indexApi.getStudyTime({ userId: userStore.userInfo.userId })
]);
if (reportResult.status !== "fulfilled") {
loadError.value = "新版实训报告加载失败，请刷新页面后重试。";
loading.value = false;
return;
}
report.value = reportResult.value?.data || { totalScore: 0, modules: [] };
studyTime.value = timeResult.status === "fulfilled" ? (timeResult.value?.data || {}) : {};
loading.value = false;
await nextTick();
renderCharts();
};
onMounted(() => {
getwight();
getScoreTrend();
getStudyTime();
echart2Init();
console.log(userStore.userInfo, "54455445");
window.addEventListener("resize", resizeCharts);
loadDashboard();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", resizeCharts);
scoreChart?.dispose();
progressChart?.dispose();
});
</script>
<style lang="scss" scoped>
.app-container {
background: #fff;
.student-home {
min-height: calc(100vh - 70px);
background: #f5f8fd;
padding: 20px;
}
.index {
height: calc(100vh - 70px);
// padding: 20px 40px;
.Achievement {
display: flex;
.left {
display: flex;
flex: 1;
.AchievementChart {
border-right: 2px dashed #e4e7ed;
}
.gradeDetails {
padding-left: 20px;
.detalis-item {
label {
display: inline-block;
width: 3rem !important;
margin-left: 0.8rem;
}
span {
font-family: Source Han Sans CN;
font-weight: 400;
color: #3c38b8;
}
margin-bottom: 1rem;
}
}
}
.right {
padding-top: 20px;
// float: right;
.timeContent {
display: flex;
align-items: center;
.detail {
display: flex;
align-items: center;
margin-top: 15px;
height: 31vh;
border-radius: 10px;
border: 1px solid #3c38b8;
margin-left: 10px;
padding: 10px;
.listItem {
width: 13vw;
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
span {
margin-top: -10px;
}
span:nth-of-type(2) {
position: absolute;
right: 0;
color: #3c38b8;
font-weight: bold;
font-size: 16px;
}
}
}
}
.activeTime {
width: 160px;
min-width: 160px;
// width: 8.333vw;
height: 240px;
background: url("@/assets/images/有效时间.png");
background-size: 160px 240px;
margin-top: 15px;
padding-top: 20px;
.ring {
margin: 0 auto;
width: 100px;
height: 100px;
background: #b2d6fb;
border-radius: 50%;
padding-top: 4px;
.ringIn {
width: 92px;
height: 92px;
background: #64acf8;
border-radius: 50%;
margin-left: 4px;
padding-top: 7px;
.ringText {
width: 78px;
height: 78px;
background: #fff;
border-radius: 50%;
margin-left: 7px;
font-weight: bold;
font-size: 17px;
color: #3c38b8;
.line {
width: 50px;
height: 1px;
border-bottom: 1px solid #4568ee;
margin: 0 auto;
margin-bottom: 3px;
margin-top: 3px;
}
}
}
}
.profile {
text-align: center;
margin-top: 10px;
margin: 0px 5px;
.num {
font-weight: bold;
font-size: 35px;
color: #ffeec0;
height: 35px;
}
.text {
color: #fff;
line-height: 23px;
}
}
}
}
}
.Achievement1 {
display: flex;
.left {
display: flex;
.AchievementChart {
border-right: 2px dashed #e4e7ed;
}
.gradeDetails {
padding-left: 20px;
.detalis-item {
label {
display: inline-block;
width: 3rem !important;
margin-left: 0.8rem;
}
span {
font-family: Source Han Sans CN;
font-weight: 400;
color: #3c38b8;
}
margin-bottom: 1rem;
}
}
}
}
.load-error { margin-bottom: 14px; }
.dashboard-card {
margin-bottom: 16px;
border: 0;
box-shadow: 0 10px 30px rgba(37, 77, 135, 0.08);
:deep(.el-card__header) { padding: 17px 20px; }
}
.card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
span { color: #1d2b4a; font-size: 18px; font-weight: 700; }
small { color: #8a98af; font-size: 13px; }
}
.score-layout { display: grid; grid-template-columns: minmax(400px, 0.9fr) minmax(540px, 1.3fr); min-height: 330px; }
.score-visual {
position: relative;
display: flex;
min-width: 0;
border-right: 1px dashed #d8e2f1;
}
.score-chart { width: 100%; min-height: 330px; }
.score-summary {
position: absolute;
left: 28px;
top: 26px;
display: flex;
flex-direction: column;
color: #72809a;
strong { color: #5645d5; font-size: 34px; line-height: 1.1; }
.summary-unit { color: #5645d5; font-weight: 600; }
.rank-copy { margin-top: 18px; font-size: 13px; }
}
.summary-label { margin-bottom: 4px; font-size: 13px; }
.score-table-wrap { display: flex; align-items: center; min-width: 0; padding: 8px 0 8px 24px; }
.score-table { width: 100%; }
.progress-layout { display: grid; grid-template-columns: 190px minmax(370px, 1fr) minmax(320px, 0.9fr); gap: 24px; align-items: stretch; }
.learning-time {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 270px;
color: #fff;
border-radius: 14px;
background: linear-gradient(150deg, #5fa9fa 0%, #387ee2 100%);
box-shadow: 0 14px 24px rgba(57, 126, 226, 0.24);
strong { margin-top: 18px; font-size: 17px; }
span { margin-top: 7px; font-size: 13px; opacity: 0.88; }
}
.time-orbit {
display: grid;
place-content: center;
width: 108px;
height: 108px;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.16);
}
.time-value { font-size: 25px; font-weight: 800; line-height: 1; }
.time-unit { margin-top: 5px; font-size: 13px; letter-spacing: 0.08em; }
.progress-chart-wrap { min-width: 0; }
.progress-chart { min-height: 270px; width: 100%; }
.module-progress-list {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
min-width: 0;
padding: 8px 4px;
}
.module-progress-item { min-width: 0; }
.module-progress-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #6f7b91; font-size: 13px; }
.module-progress-head strong { flex: 1; overflow: hidden; color: #273858; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.module-color { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 1320px) {
.score-layout { grid-template-columns: 1fr; }
.score-visual { border-right: 0; border-bottom: 1px dashed #d8e2f1; }
.score-table-wrap { padding: 20px 0 0; }
.progress-layout { grid-template-columns: 180px 1fr; }
.module-progress-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.student-home { padding: 12px; }
.card-header { align-items: flex-start; flex-direction: column; }
.score-visual { min-height: 290px; }
.score-chart { min-height: 290px; }
.score-summary { left: 18px; top: 18px; }
.progress-layout { grid-template-columns: 1fr; }
.learning-time { min-height: 210px; }
.module-progress-list { grid-column: auto; grid-template-columns: 1fr; }
}
</style>

17
tests/student-home-new-modules.static.test.cjs
Unescape Escape View File

@ -0,0 +1,17 @@
const assert = require('assert');
const fs = require('fs');
const path = require('path');
const root = path.resolve(__dirname, '..');
const page = fs.readFileSync(path.join(root, 'src/views/student/index.vue'), 'utf8');
assert(/getCurrentExperimentReport/.test(page));
assert(/participatingModules/.test(page));
assert(/completedTaskCount/.test(page));
assert(/totalTaskCount/.test(page));
assert(/moduleName/.test(page));
assert(!/getStuWeightScore\(/.test(page));
assert(!/getRouters\(/.test(page));
assert(!/市场需求挖掘|产品投放测试|供应渠道管理|产品评估与考核/.test(page));
console.log('student home new module static checks passed');
Write Preview
Loading…
Cancel
Save