wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
wangys
2025-12-04 14:23:49 +08:00
parent 5b3b55cf10
commit ed4780d6c2
6 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
schoolNewsWeb/src/views/user/study-plan/StudyTasksView.vue
View File

@@ -5,20 +5,7 @@
<div class="container">
<!-- 任务进度 -->
<h2 class="section-title">任务进度</h2>
<div class="progress-card">
<div class="progress-info">
<div class="progress-header">
<span class="progress-text">当前学习进度（{{ completedCount }}/{{ totalCount }}）</span>
<!-- <span class="progress-percent">{{ progressPercent }}%</span> -->
<!-- <span class="progress-level">{{ userLevel }}</span> -->
</div>
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
</div>
</div>
</div>
<div class="progress-card">
<div class="task-stats">
<div class="stat-card pending">
<div class="stat-content">
@@ -26,7 +13,7 @@
<div class="stat-number">{{ pendingCount }}</div>
</div>
<div class="stat-icon pending-icon">
<el-icon><DocumentCopy /></el-icon>
<el-icon><img src="@/assets/imgs/learningtask.svg" /></el-icon>
</div>
</div>
@@ -36,7 +23,20 @@
<div class="stat-number">{{ completedCount }}</div>
</div>
<div class="stat-icon completed-icon">
<el-icon><DocumentChecked /></el-icon>
<el-icon><img src="@/assets/imgs/finishtask.svg" /></el-icon>
</div>
</div>
</div>
<div class="progress-info">
<div class="progress-header">
<span class="progress-text">当前学习进度（{{ completedCount }}/{{ totalCount }}）</span>
<!-- <span class="progress-percent">{{ progressPercent }}%</span> -->
<!-- <span class="progress-level">{{ userLevel }}</span> -->
</div>
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
</div>
</div>
</div>
@@ -310,8 +310,10 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
box-shadow: 0 17px 22.4px rgba(164, 182, 199, 0.1);
.progress-info {
margin-bottom: 40px;
margin-top: 20px;
border-radius: 10px;
background: #F7F8F9;
padding: 10px;
.progress-header {
display: flex;
justify-content: space-between;
@@ -338,16 +340,17 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
}
.progress-bar-container {
// margin: 20px;
.progress-bar {
width: 100%;
height: 12px;
background: #F7F8F9;
background: #ffffff;
border-radius: 27px;
overflow: hidden;
.progress-fill {
height: 100%;
background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
background: linear-gradient(143deg, #3D3D3D 1%, #3D3D3D 99%);
border-radius: 27px;
transition: width 0.3s ease;
}
@@ -370,6 +373,8 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
align-items: center;
&.pending {
background: linear-gradient(45deg, #ffffff 0%, #FFF1F0 100%);
.stat-icon {
background: #FFF5F4;
@@ -384,7 +389,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
}
&.completed {
background: #FBFDFF;
background: linear-gradient(45deg, #ffffff 0%, #F0FAFF 100%);
.stat-icon {
background: #EFF8FF;
@@ -548,7 +553,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
// 学习进度
.task-progress {
margin-bottom: auto;
margin-top: auto;
padding-bottom: 20px;
.progress-header {
@@ -593,7 +598,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: auto;
// margin-top: auto;
.task-time {
display: flex;