样式
This commit is contained in:
Wxp
parent
d4db394b58
commit
4bfd6f2351
@ -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()
|
||||
|
||||
@ -177,14 +177,14 @@
|
||||
<!-- 评论内容 -->
|
||||
<div v-if="activeTab === 'comments'" class="tab-pane">
|
||||
<div class="comments-content">
|
||||
<div class="comment-stats">
|
||||
<!-- <div class="comment-stats">
|
||||
<span class="total-comments">共1251条评论</span>
|
||||
<div class="comment-filters">
|
||||
<button class="filter-btn active">全部</button>
|
||||
<button class="filter-btn">最新</button>
|
||||
<button class="filter-btn">最热</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="comment-list">
|
||||
<div class="comment-item" v-for="comment in displayComments" :key="comment.id">
|
||||
@ -194,13 +194,13 @@
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<span class="comment-username">{{ comment.username }}</span>
|
||||
<span class="comment-time">{{ comment.time }}</span>
|
||||
<!-- <span class="comment-time">{{ comment.time }}</span> -->
|
||||
</div>
|
||||
<div class="comment-text">{{ comment.content }}</div>
|
||||
<div class="comment-actions">
|
||||
<button class="action-btn">
|
||||
<i class="icon-like"></i>
|
||||
{{ comment.likes }}
|
||||
<span class="top">置顶评论</span>
|
||||
<span>2025.07.23 16:28</span>
|
||||
</button>
|
||||
<button class="action-btn">回复</button>
|
||||
</div>
|
||||
@ -208,9 +208,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="load-more">
|
||||
<!-- <div class="load-more">
|
||||
<button class="btn-load-more">加载更多评论</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
@ -162,14 +162,14 @@
|
||||
<!-- 评论内容 -->
|
||||
<div v-if="activeTab === 'comments'" class="tab-pane">
|
||||
<div class="comments-content">
|
||||
<div class="comment-stats">
|
||||
<!-- <div class="comment-stats">
|
||||
<span class="total-comments">共1251条评论</span>
|
||||
<div class="comment-filters">
|
||||
<button class="filter-btn active">全部</button>
|
||||
<button class="filter-btn">最新</button>
|
||||
<button class="filter-btn">最热</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="comment-list">
|
||||
<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-actions">
|
||||
<button class="action-btn">
|
||||
<i class="icon-like"></i>
|
||||
{{ comment.likes }}
|
||||
<span class="top">置顶评论</span>
|
||||
<span>2025.07.23 16:28</span>
|
||||
</button>
|
||||
<button class="action-btn">回复</button>
|
||||
</div>
|
||||
@ -193,9 +193,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="load-more">
|
||||
<!-- <div class="load-more">
|
||||
<button class="btn-load-more">加载更多评论</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
@ -519,7 +519,7 @@
|
||||
|
||||
<!-- 活动简介 -->
|
||||
<div class="activity-intro">
|
||||
<div class="intro-title">活动简介</div>
|
||||
<!-- <div class="intro-title">活动简介</div> -->
|
||||
<div class="intro-content">
|
||||
{{ activity.description }}
|
||||
</div>
|
||||
@ -545,11 +545,6 @@
|
||||
|
||||
<!-- 活动底部 -->
|
||||
<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">
|
||||
<button v-if="activity.status === 'ongoing'" class="action-btn ongoing-btn"
|
||||
@click="continueActivity(activity.id)">
|
||||
@ -560,6 +555,11 @@
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
<div class="activity-status-left">
|
||||
<span :class="['activity-status-text', activity.status]">{{ activity.status === 'ongoing' ? '进行中' :
|
||||
'已结束'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
/* 进行中 - 橙色 */
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user