init
This commit is contained in:
196
src/pages/PersonalProfile/components/StudyStudes/index.css
Normal file
196
src/pages/PersonalProfile/components/StudyStudes/index.css
Normal file
@@ -0,0 +1,196 @@
|
||||
.study-studes-card-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
.study-studes-card-title {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.study-studes-card-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.study-studes-card-study-info {
|
||||
flex-shrink: 0;
|
||||
width: 338px;
|
||||
height: 308px;
|
||||
position: relative;
|
||||
background-image: url("@/assets/images/PersonalProfile/study_study_bg.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 37px;
|
||||
|
||||
.study-studes-card-time-wrapper {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
width: 314px;
|
||||
height: 156px;
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 2px 16.4px 0px rgba(103, 162, 247, 0.25);
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
.study-studes-card-study-time-wrapper {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.study-studes-card-study-info-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #4e5969;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.study-studes-card-study-time-line-class {
|
||||
> i {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#4564ff,
|
||||
#ab2cff
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
.study-studes-card-study-time-line {
|
||||
width: 265px;
|
||||
height: 10px;
|
||||
border-radius: 12px;
|
||||
background-color: #cedefa;
|
||||
position: relative;
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(to right, #2c7aff, #00aeff);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
transform: translate(50%, 30%);
|
||||
font-style: normal;
|
||||
width: 38px;
|
||||
height: 21px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #2358ed;
|
||||
background-image: url("@/assets/images/PersonalProfile/line_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.study-studes-card-study-progress {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 308px;
|
||||
width: 330px;
|
||||
border-radius: 8px;
|
||||
margin-left: 20px;
|
||||
|
||||
.study-studes-card-study-progress-chart {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.study-studes-card-study-progress-title {
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.study-studes-card-curriculum-homework {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.study-studes-card-curriculum {
|
||||
width: 194px;
|
||||
height: 350px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
|
||||
.study-studes-card-curriculum-chart {
|
||||
width: 194px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.study-studes-card-curriculum-info {
|
||||
width: 194px;
|
||||
height: 69px;
|
||||
border-radius: 8px;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4e5969;
|
||||
}
|
||||
> span {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.study-studes-card-curriculum-info-span1 {
|
||||
color: #0aa4ff;
|
||||
}
|
||||
.study-studes-card-curriculum-info-span2 {
|
||||
color: #5e57ff;
|
||||
}
|
||||
.study-studes-card-curriculum-info-span3 {
|
||||
color: #ff9d2c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.study-studes-card-curriculum-chart-center-content {
|
||||
width: 127px;
|
||||
height: 127px;
|
||||
border-radius: 50%;
|
||||
line-height: 127px;
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background-color: #e8f3ff;
|
||||
box-shadow: inset 0 0 15.6px 0 rgba(0, 172, 255, 0.2); /* #0AC3FF 转 rgba，20% 透明度 */
|
||||
}
|
||||
}
|
||||
}
|
||||
148
src/pages/PersonalProfile/components/StudyStudes/index.jsx
Normal file
148
src/pages/PersonalProfile/components/StudyStudes/index.jsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import * as echarts from "echarts";
|
||||
import StudyProgress from "../StudyProgress";
|
||||
import ScoreRingChart from "../ScoreRingChart";
|
||||
import AttendanceRingChart from "../AttendanceRingChart";
|
||||
import "./index.css";
|
||||
|
||||
const ringData = [
|
||||
{
|
||||
value: 80,
|
||||
name: "我的",
|
||||
title: {
|
||||
offsetCenter: ["-30%", "-90%"],
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||
{ offset: 0, color: "#2C7AFF" },
|
||||
{ offset: 1, color: "#00AEFF" },
|
||||
]),
|
||||
},
|
||||
}, // 外环
|
||||
{
|
||||
value: 60,
|
||||
name: "班级",
|
||||
title: {
|
||||
offsetCenter: ["-60%", "-90%"],
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||
{ offset: 0, color: "#4564FF" },
|
||||
{ offset: 1, color: "#AB2CFF" },
|
||||
]),
|
||||
},
|
||||
}, // 中环
|
||||
];
|
||||
|
||||
const attendanceData = [
|
||||
{
|
||||
name: "出勤率",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||
{ offset: 0, color: "#2C7AFF" },
|
||||
{ offset: 1, color: "#00D5FF" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{ name: "缺勤率", value: 8, itemStyle: { color: "#FF9D2C" } },
|
||||
// 可添加更多状态（如迟到、早退、缺勤等）
|
||||
];
|
||||
|
||||
const StudyStudes = () => {
|
||||
return (
|
||||
<div className="study-studes-card-wrapper">
|
||||
<p className="study-studes-card-title">学习情况</p>
|
||||
<ul className="study-studes-card-list">
|
||||
{/* 时长 */}
|
||||
<li className="study-studes-card-study-info">
|
||||
<div className="study-studes-card-time-wrapper">
|
||||
<div className="study-studes-card-study-time-wrapper">
|
||||
<p className="study-studes-card-study-info-title">
|
||||
个人学习时长（h）
|
||||
</p>
|
||||
<p className="study-studes-card-study-time-line">
|
||||
<i style={{ width: "70%" }}>
|
||||
<span>145</span>
|
||||
</i>
|
||||
</p>
|
||||
</div>
|
||||
<div className="study-studes-card-study-time-wrapper">
|
||||
<p className="study-studes-card-study-info-title">
|
||||
班级平均学习时长（h）
|
||||
</p>
|
||||
<p className="study-studes-card-study-time-line study-studes-card-study-time-line-class">
|
||||
<i style={{ width: "80%" }}>
|
||||
<span>145</span>
|
||||
</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* 进度 */}
|
||||
<li className="study-studes-card-study-progress">
|
||||
<StudyProgress
|
||||
value={75}
|
||||
className="study-studes-card-study-progress-chart"
|
||||
/>
|
||||
<p className="study-studes-card-study-progress-title">
|
||||
整体课程完成进度
|
||||
</p>
|
||||
</li>
|
||||
{/* 课程整体完成情况 */}
|
||||
<li className="study-studes-card-curriculum">
|
||||
<ScoreRingChart
|
||||
title={`整体课程\n完成情况`}
|
||||
ringData={ringData}
|
||||
className="study-studes-card-curriculum-chart"
|
||||
/>
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>班级平均进度</p>
|
||||
<span className="study-studes-card-curriculum-info-span1">60%</span>
|
||||
</div>
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>我的进度</p>
|
||||
<span className="study-studes-card-curriculum-info-span2">60%</span>
|
||||
</div>
|
||||
</li>
|
||||
{/* 课后作业完成情况 */}
|
||||
<li className="study-studes-card-curriculum-homework study-studes-card-curriculum">
|
||||
<ScoreRingChart
|
||||
title={`课后作业\n完成情况`}
|
||||
ringData={ringData}
|
||||
className="study-studes-card-curriculum-chart"
|
||||
/>
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>班级平均进度</p>
|
||||
<span className="study-studes-card-curriculum-info-span1">60%</span>
|
||||
</div>
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>我的进度</p>
|
||||
<span className="study-studes-card-curriculum-info-span2">60%</span>
|
||||
</div>
|
||||
</li>
|
||||
{/* 考勤情况 */}
|
||||
<li className="study-studes-card-curriculum">
|
||||
<AttendanceRingChart
|
||||
data={attendanceData}
|
||||
centerContent={
|
||||
<div className="study-studes-card-curriculum-chart-center-content">
|
||||
考勤情况
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>出勤率</p>
|
||||
<span className="study-studes-card-curriculum-info-span1">60%</span>
|
||||
</div>
|
||||
<div className="study-studes-card-curriculum-info">
|
||||
<p>缺勤率</p>
|
||||
<span className="study-studes-card-curriculum-info-span3">60%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StudyStudes;
|
||||
Reference in New Issue
Block a user