修改样式

This commit is contained in:
2025-12-04 14:23:49 +08:00
parent 5b3b55cf10
commit ed4780d6c2
6 changed files with 57 additions and 26 deletions

View 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

View 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

View File

@@ -8,10 +8,17 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useRouter, useRoute } from 'vue-router';
const home = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
// 组件加载时根据当前路由判断是否在管理页
onMounted(() => {
// 如果当前路径以 /admin 开头,说明在管理页,应该显示"前往用户页"
home.value = route.path.startsWith('/admin');
});
function changeHome(){
if(home.value){

View File

@@ -499,7 +499,7 @@ onMounted(() => {
height: 80%;
max-width: 1142px;
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;
overflow: hidden;
justify-content: center;

View File

@@ -517,7 +517,7 @@ onUnmounted(() => {
height: 80%;
max-width: 1142px;
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;
overflow: hidden;
justify-content: center;

View File

@@ -6,19 +6,6 @@
<!-- 任务进度 -->
<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="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;