修改样式
This commit is contained in:
10
schoolNewsWeb/src/assets/imgs/finishtask.svg
Normal file
10
schoolNewsWeb/src/assets/imgs/finishtask.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="77" height="77" rx="6" fill="white"/>
|
||||||
|
<path d="M49.1296 16.4629C50.3467 16.463 51.3328 17.45 51.3328 18.667V45.1113H60.1482V53.9258C60.1482 57.5771 57.1882 60.5371 53.5369 60.5371H22.6853C19.0341 60.5371 16.074 57.5771 16.074 53.9258V18.667C16.074 17.4499 17.061 16.4629 18.2781 16.4629H49.1296ZM51.3328 53.9258C51.3328 55.1429 52.3198 56.1298 53.5369 56.1299C54.754 56.1299 55.741 55.1429 55.741 53.9258V49.5186H51.3328V53.9258ZM32.9167 38.917L28.1667 34.167L25.0007 37.334L32.9167 45.25L44.0007 34.167L40.8337 31L32.9167 38.917Z" fill="url(#paint0_linear_1534_4780)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1534_4780" x1="19.4445" y1="16.7219" x2="51.7222" y2="60.2775" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#82B7FD"/>
|
||||||
|
<stop offset="1" stop-color="#2F6AFF"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 918 B |
9
schoolNewsWeb/src/assets/imgs/learningtask.svg
Normal file
9
schoolNewsWeb/src/assets/imgs/learningtask.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M41.8702 48.4813H11.0183C7.36713 48.4813 4.40723 45.5215 4.40723 41.8702V6.61093C4.40723 5.39387 5.39387 4.40723 6.61093 4.40723H37.4628C38.6799 4.40723 39.6665 5.39387 39.6665 6.61093V33.0554H48.4813V41.8702C48.4813 45.5215 45.5215 48.4813 41.8702 48.4813ZM39.6665 37.4628V41.8702C39.6665 43.0873 40.6531 44.0739 41.8702 44.0739C43.0873 44.0739 44.0739 43.0873 44.0739 41.8702V37.4628H39.6665ZM13.222 15.4257V19.8332H30.8517V15.4257H13.222ZM13.222 24.2406V28.648H30.8517V24.2406H13.222ZM13.222 33.0554V37.4628H24.2406V33.0554H13.222Z" fill="url(#paint0_linear_1534_4772)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1534_4772" x1="7.77772" y1="4.66623" x2="40.0555" y2="48.2218" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FD9082"/>
|
||||||
|
<stop offset="1" stop-color="#FD6D78"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 918 B |
@@ -8,10 +8,17 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
|
||||||
const home = ref<boolean>(false);
|
const home = ref<boolean>(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 组件加载时根据当前路由判断是否在管理页
|
||||||
|
onMounted(() => {
|
||||||
|
// 如果当前路径以 /admin 开头,说明在管理页,应该显示"前往用户页"
|
||||||
|
home.value = route.path.startsWith('/admin');
|
||||||
|
});
|
||||||
|
|
||||||
function changeHome(){
|
function changeHome(){
|
||||||
if(home.value){
|
if(home.value){
|
||||||
|
|||||||
@@ -499,7 +499,7 @@ onMounted(() => {
|
|||||||
height: 80%;
|
height: 80%;
|
||||||
max-width: 1142px;
|
max-width: 1142px;
|
||||||
margin: auto auto;
|
margin: auto auto;
|
||||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.5);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -517,7 +517,7 @@ onUnmounted(() => {
|
|||||||
height: 80%;
|
height: 80%;
|
||||||
max-width: 1142px;
|
max-width: 1142px;
|
||||||
margin: auto auto;
|
margin: auto auto;
|
||||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.5);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -5,20 +5,7 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 任务进度 -->
|
<!-- 任务进度 -->
|
||||||
<h2 class="section-title">任务进度</h2>
|
<h2 class="section-title">任务进度</h2>
|
||||||
<div class="progress-card">
|
<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="task-stats">
|
<div class="task-stats">
|
||||||
<div class="stat-card pending">
|
<div class="stat-card pending">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
@@ -26,7 +13,7 @@
|
|||||||
<div class="stat-number">{{ pendingCount }}</div>
|
<div class="stat-number">{{ pendingCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-icon pending-icon">
|
<div class="stat-icon pending-icon">
|
||||||
<el-icon><DocumentCopy /></el-icon>
|
<el-icon><img src="@/assets/imgs/learningtask.svg" /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -36,7 +23,20 @@
|
|||||||
<div class="stat-number">{{ completedCount }}</div>
|
<div class="stat-number">{{ completedCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-icon completed-icon">
|
<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>
|
</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);
|
box-shadow: 0 17px 22.4px rgba(164, 182, 199, 0.1);
|
||||||
|
|
||||||
.progress-info {
|
.progress-info {
|
||||||
margin-bottom: 40px;
|
margin-top: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #F7F8F9;
|
||||||
|
padding: 10px;
|
||||||
.progress-header {
|
.progress-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -338,16 +340,17 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-container {
|
.progress-bar-container {
|
||||||
|
// margin: 20px;
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
background: #F7F8F9;
|
background: #ffffff;
|
||||||
border-radius: 27px;
|
border-radius: 27px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.progress-fill {
|
.progress-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
|
background: linear-gradient(143deg, #3D3D3D 1%, #3D3D3D 99%);
|
||||||
border-radius: 27px;
|
border-radius: 27px;
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
@@ -370,6 +373,8 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&.pending {
|
&.pending {
|
||||||
|
background: linear-gradient(45deg, #ffffff 0%, #FFF1F0 100%);
|
||||||
|
|
||||||
.stat-icon {
|
.stat-icon {
|
||||||
background: #FFF5F4;
|
background: #FFF5F4;
|
||||||
|
|
||||||
@@ -384,7 +389,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.completed {
|
&.completed {
|
||||||
background: #FBFDFF;
|
background: linear-gradient(45deg, #ffffff 0%, #F0FAFF 100%);
|
||||||
|
|
||||||
.stat-icon {
|
.stat-icon {
|
||||||
background: #EFF8FF;
|
background: #EFF8FF;
|
||||||
@@ -548,7 +553,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
|
|||||||
|
|
||||||
// 学习进度
|
// 学习进度
|
||||||
.task-progress {
|
.task-progress {
|
||||||
margin-bottom: auto;
|
margin-top: auto;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
.progress-header {
|
.progress-header {
|
||||||
@@ -593,7 +598,7 @@ function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; typ
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-top: auto;
|
// margin-top: auto;
|
||||||
|
|
||||||
.task-time {
|
.task-time {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user