GoCo/OL-LearnPlatform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式

Browse Source
This commit is contained in:
Wxp 2025-08-12 19:52:20 +08:00
parent d4db394b58
commit 4bfd6f2351
4 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/layout/AppHeader.vue
View File

@ -222,7 +222,10 @@ const handleMenuSelect = (key: string) => {
const handleUserMenuSelect = (key: string) => { const handleUserMenuSelect = (key: string) => {
switch (key) { switch (key) {
case 'profile': case 'profile':
router.push('/profile') router.push('/profile').then(() => {
// 检查sessionStorage中是否已有刷新标志
window.location.reload();
})
break break
case 'logout': case 'logout':
userStore.logout() userStore.logout()

32
src/views/CourseDetail.vue
View File

@ -177,14 +177,14 @@
<!-- 评论内容 --> <!-- 评论内容 -->
<div v-if="activeTab === 'comments'" class="tab-pane"> <div v-if="activeTab === 'comments'" class="tab-pane">
<div class="comments-content"> <div class="comments-content">
<div class="comment-stats"> <!-- <div class="comment-stats">
<span class="total-comments">共1251条评论</span> <span class="total-comments">共1251条评论</span>
<div class="comment-filters"> <div class="comment-filters">
<button class="filter-btn active">全部</button> <button class="filter-btn active">全部</button>
<button class="filter-btn">最新</button> <button class="filter-btn">最新</button>
<button class="filter-btn">最热</button> <button class="filter-btn">最热</button>
</div> </div>
</div> </div> -->
<div class="comment-list"> <div class="comment-list">
<div class="comment-item" v-for="comment in displayComments" :key="comment.id"> <div class="comment-item" v-for="comment in displayComments" :key="comment.id">
@ -194,13 +194,13 @@
<div class="comment-content"> <div class="comment-content">
<div class="comment-header"> <div class="comment-header">
<span class="comment-username">{{ comment.username }}</span> <span class="comment-username">{{ comment.username }}</span>
<span class="comment-time">{{ comment.time }}</span> <!-- <span class="comment-time">{{ comment.time }}</span> -->
</div> </div>
<div class="comment-text">{{ comment.content }}</div> <div class="comment-text">{{ comment.content }}</div>
<div class="comment-actions"> <div class="comment-actions">
<button class="action-btn"> <button class="action-btn">
<i class="icon-like"></i> <span class="top">置顶评论</span>
{{ comment.likes }} <span>2025.07.23 16:28</span>
</button> </button>
<button class="action-btn">回复</button> <button class="action-btn">回复</button>
</div> </div>
@ -208,9 +208,9 @@
</div> </div>
</div> </div>
<div class="load-more"> <!-- <div class="load-more">
<button class="btn-load-more">加载更多评论</button> <button class="btn-load-more">加载更多评论</button>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@ -693,7 +693,7 @@ const displayComments = ref([
{ {
id: 2, id: 2,
username: 'AI爱好者', 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天前', time: '5天前',
content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！', content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！',
likes: 18 likes: 18
@ -2604,6 +2604,7 @@ onMounted(() => {
.comment-actions { .comment-actions {
display: flex; display: flex;
align-items: center;
gap: 16px; gap: 16px;
} }
@ -2615,7 +2616,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 14px;
transition: color 0.3s; transition: color 0.3s;
} }
@ -2623,6 +2624,19 @@ onMounted(() => {
color: #1890ff; 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 { .load-more {
text-align: center; text-align: center;
margin-top: 24px; margin-top: 24px;

31
src/views/CourseDetailEnrolled.vue
View File

@ -162,14 +162,14 @@
<!-- 评论内容 --> <!-- 评论内容 -->
<div v-if="activeTab === 'comments'" class="tab-pane"> <div v-if="activeTab === 'comments'" class="tab-pane">
<div class="comments-content"> <div class="comments-content">
<div class="comment-stats"> <!-- <div class="comment-stats">
<span class="total-comments">共1251条评论</span> <span class="total-comments">共1251条评论</span>
<div class="comment-filters"> <div class="comment-filters">
<button class="filter-btn active">全部</button> <button class="filter-btn active">全部</button>
<button class="filter-btn">最新</button> <button class="filter-btn">最新</button>
<button class="filter-btn">最热</button> <button class="filter-btn">最热</button>
</div> </div>
</div> </div> -->
<div class="comment-list"> <div class="comment-list">
<div class="comment-item" v-for="comment in displayComments" :key="comment.id"> <div class="comment-item" v-for="comment in displayComments" :key="comment.id">
@ -184,8 +184,8 @@
<div class="comment-text">{{ comment.content }}</div> <div class="comment-text">{{ comment.content }}</div>
<div class="comment-actions"> <div class="comment-actions">
<button class="action-btn"> <button class="action-btn">
<i class="icon-like"></i> <span class="top">置顶评论</span>
{{ comment.likes }} <span>2025.07.23 16:28</span>
</button> </button>
<button class="action-btn">回复</button> <button class="action-btn">回复</button>
</div> </div>
@ -193,9 +193,9 @@
</div> </div>
</div> </div>
<div class="load-more"> <!-- <div class="load-more">
<button class="btn-load-more">加载更多评论</button> <button class="btn-load-more">加载更多评论</button>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@ -519,7 +519,7 @@ const displayComments = ref([
{ {
id: 2, id: 2,
username: 'AI爱好者', 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天前', time: '5天前',
content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！', content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！',
likes: 18 likes: 18
@ -2043,6 +2043,7 @@ onUnmounted(() => {
.comment-actions { .comment-actions {
display: flex; display: flex;
align-items: center;
gap: 16px; gap: 16px;
} }
@ -2054,7 +2055,7 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 14px;
transition: color 0.3s; transition: color 0.3s;
} }
@ -2062,6 +2063,20 @@ onUnmounted(() => {
color: #1890ff; 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 { .load-more {
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;

57
src/views/Profile.vue
View File

@ -519,7 +519,7 @@
<!-- 活动简介 --> <!-- 活动简介 -->
<div class="activity-intro"> <div class="activity-intro">
<div class="intro-title">活动简介</div> <!-- <div class="intro-title">活动简介</div> -->
<div class="intro-content"> <div class="intro-content">
{{ activity.description }} {{ activity.description }}
</div> </div>
@ -545,11 +545,6 @@
<!-- 活动底部 --> <!-- 活动底部 -->
<div class="activity-footer"> <div class="activity-footer">
<div class="activity-status-left">
<span :class="['activity-status-text', activity.status]">{{ activity.status === 'ongoing' ? '进行中' :
'已结束'
}}</span>
</div>
<div class="activity-action-right"> <div class="activity-action-right">
<button v-if="activity.status === 'ongoing'" class="action-btn ongoing-btn" <button v-if="activity.status === 'ongoing'" class="action-btn ongoing-btn"
@click="continueActivity(activity.id)"> @click="continueActivity(activity.id)">
@ -560,6 +555,11 @@
查看详情 查看详情
</button> </button>
</div> </div>
<div class="activity-status-left">
<span :class="['activity-status-text', activity.status]">{{ activity.status === 'ongoing' ? '进行中' :
'已结束'
}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1697,7 +1697,7 @@ const mockActivities: Activity[] = [
duration: 120, duration: 120,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'ongoing', status: 'ongoing',
score: null score: null
}, },
@ -1710,7 +1710,7 @@ const mockActivities: Activity[] = [
duration: 88, duration: 88,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'finished', status: 'finished',
score: null score: null
}, },
@ -1723,7 +1723,7 @@ const mockActivities: Activity[] = [
duration: 88, duration: 88,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'finished', status: 'finished',
score: null score: null
}, },
@ -1736,7 +1736,7 @@ const mockActivities: Activity[] = [
duration: 120, duration: 120,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'ongoing', status: 'ongoing',
score: null score: null
}, },
@ -1749,7 +1749,7 @@ const mockActivities: Activity[] = [
duration: 88, duration: 88,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'finished', status: 'finished',
score: null score: null
}, },
@ -1762,7 +1762,7 @@ const mockActivities: Activity[] = [
duration: 88, duration: 88,
activityType: '激励类活动', activityType: '激励类活动',
registeredCount: '100/200', registeredCount: '100/200',
description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
status: 'finished', status: 'finished',
score: null score: null
} }
@ -5160,9 +5160,11 @@ onMounted(() => {
} }
.intro-content { .intro-content {
font-size: 13px; padding-bottom: 10px;
font-size: 14px;
color: #666; color: #666;
line-height: 1.5; line-height: 1.5;
border-bottom: 1.5px solid #E6E6E6;
} }
.practice-footer { .practice-footer {
@ -5225,7 +5227,6 @@ onMounted(() => {
.activity-card { .activity-card {
background: #ffffff; background: #ffffff;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 0.42vw;
/* 8px转换为vw */ /* 8px转换为vw */
padding: 0; padding: 0;
/* 移除内边距，让图片可以占满顶部 */ /* 移除内边距，让图片可以占满顶部 */
@ -5249,10 +5250,9 @@ onMounted(() => {
/* 活动卡片顶部图片容器 */ /* 活动卡片顶部图片容器 */
.activity-card-image { .activity-card-image {
width: 100%; width: 100%;
height: 18.59vh; height: 179px;
/* 179px转换为vh (179/1080*100) */ /* 179px转换为vh (179/1080*100) */
overflow: hidden; overflow: hidden;
border-radius: 0.42vw 0.42vw 0 0;
/* 只有顶部圆角 */ /* 只有顶部圆角 */
} }
@ -5283,11 +5283,11 @@ onMounted(() => {
} }
.activity-title { .activity-title {
font-size: 0.83vw; font-size: 16px;
/* 16px转换为vw */ /* 16px转换为vw */
font-weight: 600; /* font-weight: 600; */
color: #333; color: #333;
margin: 0 0 0.83vh 0; margin: 15px 0 5px 0;
/* 0 0 16px 0转换 */ /* 0 0 16px 0转换 */
line-height: 1.4; line-height: 1.4;
padding: 0 1.04vw; padding: 0 1.04vw;
@ -5295,16 +5295,15 @@ onMounted(() => {
} }
.activity-details { .activity-details {
margin-bottom: 1.04vh;
/* 20px转换为vh */ /* 20px转换为vh */
padding: 0 1.04vw; padding: 0 1.04vw;
/* 添加左右内边距 */ /* 添加左右内边距 */
} }
.activity-meta-item { .activity-meta-item {
margin-bottom: 0.42vh; margin-bottom: 10px;
/* 8px转换为vh */ /* 8px转换为vh */
font-size: 0.68vw; font-size: 14px;
/* 13px转换为vw */ /* 13px转换为vw */
line-height: 1.4; line-height: 1.4;
} }
@ -5327,13 +5326,13 @@ onMounted(() => {
} }
.intro-content { .intro-content {
font-size: 0.68vw; font-size: 14px;
/* 13px转换为vw */ /* 13px转换为vw */
color: #666; color: #666;
line-height: 1.5; line-height: 1.5;
margin-bottom: 0.83vh; margin-bottom: 10px;
/* 16px转换为vh */ /* 16px转换为vh */
display: -webkit-box; /* display: -webkit-box; */
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
@ -5344,23 +5343,23 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: auto; margin-top: auto;
padding: 0 1.04vw 1.04vh; padding: 5px 15px 15px 15px;
/* 添加内边距 */ /* 添加内边距 */
} }
.activity-status-left { .activity-status-left {
flex: 1; /* flex: 1; */
} }
.activity-status-text { .activity-status-text {
font-size: 0.68vw; font-size: 12px;
/* 13px转换为vw */ /* 13px转换为vw */
font-weight: 500; font-weight: 500;
} }
/* 活动状态颜色 - 与练习中保持一致 */ /* 活动状态颜色 - 与练习中保持一致 */
.activity-status-text.ongoing { .activity-status-text.ongoing {
color: #FF6B35; color: #FF520F;
/* 进行中 - 橙色 */ /* 进行中 - 橙色 */
} }