From 4bfd6f2351838193d015e564ba1eea29df0f3119 Mon Sep 17 00:00:00 2001 From: Wxp Date: Tue, 12 Aug 2025 19:52:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/AppHeader.vue | 5 ++- src/views/CourseDetail.vue | 32 +++++++++++----- src/views/CourseDetailEnrolled.vue | 31 ++++++++++++---- src/views/Profile.vue | 57 ++++++++++++++--------------- 4 files changed, 78 insertions(+), 47 deletions(-) diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index 882c2d3..44a9648 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -222,7 +222,10 @@ const handleMenuSelect = (key: string) => { const handleUserMenuSelect = (key: string) => { switch (key) { case 'profile': - router.push('/profile') + router.push('/profile').then(() => { + // 检查sessionStorage中是否已有刷新标志 + window.location.reload(); + }) break case 'logout': userStore.logout() diff --git a/src/views/CourseDetail.vue b/src/views/CourseDetail.vue index de32a04..3b31a10 100644 --- a/src/views/CourseDetail.vue +++ b/src/views/CourseDetail.vue @@ -177,14 +177,14 @@
-
+
@@ -194,13 +194,13 @@
{{ comment.username }} - {{ comment.time }} +
{{ comment.content }}
@@ -208,9 +208,9 @@
-
+
@@ -693,7 +693,7 @@ const displayComments = ref([ { id: 2, username: 'AI爱好者', - avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80', + avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80', time: '5天前', content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！', likes: 18 @@ -2604,6 +2604,7 @@ onMounted(() => { .comment-actions { display: flex; + align-items: center; gap: 16px; } @@ -2615,7 +2616,7 @@ onMounted(() => { cursor: pointer; display: flex; align-items: center; - gap: 4px; + gap: 14px; transition: color 0.3s; } @@ -2623,6 +2624,19 @@ onMounted(() => { color: #1890ff; } +.action-btn span { + font-size: 12px; + color: #999; +} + +.action-btn .top { + padding: 4px 8px; + font-size: 10px; + color: #FF304B; + background-color: #FFF4F4; + border-radius: 30px; +} + .load-more { text-align: center; margin-top: 24px; diff --git a/src/views/CourseDetailEnrolled.vue b/src/views/CourseDetailEnrolled.vue index 1bce61e..c409fe7 100644 --- a/src/views/CourseDetailEnrolled.vue +++ b/src/views/CourseDetailEnrolled.vue @@ -162,14 +162,14 @@
-
+
@@ -184,8 +184,8 @@
{{ comment.content }}
@@ -193,9 +193,9 @@
-
+
@@ -519,7 +519,7 @@ const displayComments = ref([ { id: 2, username: 'AI爱好者', - avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80', + avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80', time: '5天前', content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！', likes: 18 @@ -2043,6 +2043,7 @@ onUnmounted(() => { .comment-actions { display: flex; + align-items: center; gap: 16px; } @@ -2054,7 +2055,7 @@ onUnmounted(() => { cursor: pointer; display: flex; align-items: center; - gap: 4px; + gap: 14px; transition: color 0.3s; } @@ -2062,6 +2063,20 @@ onUnmounted(() => { color: #1890ff; } +.action-btn span { + font-size: 12px; + color: #999; +} + +.action-btn .top { + padding: 4px 8px; + font-size: 10px; + color: #FF304B; + background-color: #FFF4F4; + border-radius: 30px; +} + + .load-more { text-align: center; padding: 20px 0; diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 36574f7..61d6257 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -519,7 +519,7 @@
-
活动简介
+
{{ activity.description }}
@@ -545,11 +545,6 @@
-
- {{ activity.status === 'ongoing' ? '进行中' : - '已结束' - }} -
+
+ {{ activity.status === 'ongoing' ? '进行中' : + '已结束' + }} +
@@ -1697,7 +1697,7 @@ const mockActivities: Activity[] = [ duration: 120, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'ongoing', score: null }, @@ -1710,7 +1710,7 @@ const mockActivities: Activity[] = [ duration: 88, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'finished', score: null }, @@ -1723,7 +1723,7 @@ const mockActivities: Activity[] = [ duration: 88, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'finished', score: null }, @@ -1736,7 +1736,7 @@ const mockActivities: Activity[] = [ duration: 120, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'ongoing', score: null }, @@ -1749,7 +1749,7 @@ const mockActivities: Activity[] = [ duration: 88, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'finished', score: null }, @@ -1762,7 +1762,7 @@ const mockActivities: Activity[] = [ duration: 88, activityType: '激励类活动', registeredCount: '100/200', - description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。', status: 'finished', score: null } @@ -5160,9 +5160,11 @@ onMounted(() => { } .intro-content { - font-size: 13px; + padding-bottom: 10px; + font-size: 14px; color: #666; line-height: 1.5; +border-bottom: 1.5px solid #E6E6E6; } .practice-footer { @@ -5225,7 +5227,6 @@ onMounted(() => { .activity-card { background: #ffffff; border: 1px solid #e8e8e8; - border-radius: 0.42vw; /* 8px转换为vw */ padding: 0; /* 移除内边距，让图片可以占满顶部 */ @@ -5249,10 +5250,9 @@ onMounted(() => { /* 活动卡片顶部图片容器 */ .activity-card-image { width: 100%; - height: 18.59vh; + height: 179px; /* 179px转换为vh (179/1080*100) */ overflow: hidden; - border-radius: 0.42vw 0.42vw 0 0; /* 只有顶部圆角 */ } @@ -5283,11 +5283,11 @@ onMounted(() => { } .activity-title { - font-size: 0.83vw; + font-size: 16px; /* 16px转换为vw */ - font-weight: 600; + /* font-weight: 600; */ color: #333; - margin: 0 0 0.83vh 0; + margin: 15px 0 5px 0; /* 0 0 16px 0转换 */ line-height: 1.4; padding: 0 1.04vw; @@ -5295,16 +5295,15 @@ onMounted(() => { } .activity-details { - margin-bottom: 1.04vh; /* 20px转换为vh */ padding: 0 1.04vw; /* 添加左右内边距 */ } .activity-meta-item { - margin-bottom: 0.42vh; + margin-bottom: 10px; /* 8px转换为vh */ - font-size: 0.68vw; + font-size: 14px; /* 13px转换为vw */ line-height: 1.4; } @@ -5327,13 +5326,13 @@ onMounted(() => { } .intro-content { - font-size: 0.68vw; + font-size: 14px; /* 13px转换为vw */ color: #666; line-height: 1.5; - margin-bottom: 0.83vh; + margin-bottom: 10px; /* 16px转换为vh */ - display: -webkit-box; + /* display: -webkit-box; */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; @@ -5344,23 +5343,23 @@ onMounted(() => { justify-content: space-between; align-items: center; margin-top: auto; - padding: 0 1.04vw 1.04vh; + padding: 5px 15px 15px 15px; /* 添加内边距 */ } .activity-status-left { - flex: 1; + /* flex: 1; */ } .activity-status-text { - font-size: 0.68vw; + font-size: 12px; /* 13px转换为vw */ font-weight: 500; } /* 活动状态颜色 - 与练习中保持一致 */ .activity-status-text.ongoing { - color: #FF6B35; + color: #FF520F; /* 进行中 - 橙色 */ }