mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改资源案例web页面

Browse Source
This commit is contained in:
马懿铭
2025-10-31 13:23:42 +08:00
parent 76f7ee9295
commit c54ad0041e
1 changed files with 82 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
web/src/views/CaseResources.vue
View File

@@ -22,18 +22,16 @@
<div v-if="activeTab === 'online' && !selectedCourse">
<h2 class="section-title">线上课程</h2>
<div class="courses-grid">
<div
class="course-card"
v-for="(course, index) in onlineCourses"
<div
class="course-card"
v-for="(course, index) in onlineCourses"
:key="index"
@click="selectCourse(course)"
style="cursor: pointer"
>
<div class="course-image">
<img :src="course.imageUrl" :alt="course.title" class="course-thumbnail">
<div v-if="index === 0" class="play-button">
<div class="play-icon">▶</div>
</div>
<!-- 已删除：线上课程列表页的播放按钮 -->
</div>
<div class="course-info">
<div class="course-meta" v-if="index === 0">
@@ -51,14 +49,12 @@
<!-- 线上课程详情页 -->
<div v-if="activeTab === 'online' && selectedCourse">
<button class="back-button" @click="selectedCourse = null">← 返回列表</button>
<h1 class="course-title">线上课程 Online courses</h1>
<div class="course-header">
<div class="course-video">
<img :src="selectedCourse.imageUrl" :alt="selectedCourse.title" class="video-thumbnail">
<div class="play-button">
<div class="play-icon">▶</div>
</div>
<!-- 已删除：线上课程详情页的播放按钮 -->
</div>
<div class="course-intro">
<h2>课程介绍</h2>
@@ -70,30 +66,30 @@
</div>
<div class="course-tabs">
<div
class="tab-item"
:class="{ active: activeDetailTab === 'content' }"
<div
class="tab-item"
:class="{ active: activeDetailTab === 'content' }"
@click="activeDetailTab = 'content'"
>
课程内容
</div>
<div
class="tab-item"
:class="{ active: activeDetailTab === 'resource' }"
<div
class="tab-item"
:class="{ active: activeDetailTab === 'resource' }"
@click="activeDetailTab = 'resource'"
>
拓展资源
</div>
<div
class="tab-item"
:class="{ active: activeDetailTab === 'activity' }"
<div
class="tab-item"
:class="{ active: activeDetailTab === 'activity' }"
@click="activeDetailTab = 'activity'"
>
学生活动
</div>
<div
class="tab-item"
:class="{ active: activeDetailTab === 'team' }"
<div
class="tab-item"
:class="{ active: activeDetailTab === 'team' }"
@click="activeDetailTab = 'team'"
>
教学团队
@@ -164,10 +160,10 @@
<option value="type">案例类型</option>
<option value="year">年份</option>
</select>
<input
type="text"
class="search-input"
placeholder="中华传承"
<input
type="text"
class="search-input"
placeholder="中华传承"
v-model="searchKeyword"
@keyup.enter="handleSearch"
/>
@@ -189,10 +185,10 @@
</div>
</div>
<div
class="case-item"
v-for="(caseItem, index) in filteredCases"
:key="caseItem.id"
<div
class="case-item"
v-for="(caseItem, index) in filteredCases"
:key="caseItem.id"
@click="selectCase(caseItem)"
>
<h3 class="case-title">{{ caseItem.title }}</h3>
@@ -389,24 +385,24 @@ const cases = [
// 筛选后的案例列表
const filteredCases = computed(() => {
let result = [...cases];
// 搜索过滤
if (searchKeyword.value) {
const keyword = searchKeyword.value.toLowerCase();
result = result.filter(item =>
item.title.toLowerCase().includes(keyword) ||
result = result.filter(item =>
item.title.toLowerCase().includes(keyword) ||
item.desc.toLowerCase().includes(keyword) ||
item.tags.some(tag => tag.toLowerCase().includes(keyword))
);
}
// 排序处理
if (sortType.value === 'views') {
result.sort((a, b) => b.views - a.views);
} else {
result.sort((a, b) => new Date(b.date) - new Date(a.date));
}
// 数量限制
return result.slice(0, parseInt(showCount.value));
});
@@ -562,32 +558,7 @@ body {
transform: scale(1.05);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.play-button:hover {
background-color: #fff;
transform: translate(-50%, -50%) scale(1.1);
}
.play-icon {
font-size: 1.5rem;
color: #e74c3c;
margin-left: 5px;
}
/* 已删除：播放按钮相关样式 */
.course-info {
display: flex;
@@ -907,8 +878,8 @@ body {
margin: 0 auto;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
margin: 30px 0 15px;
color: #2c3e50;
@@ -932,7 +903,7 @@ body {
margin: 0 0 20px;
}
.markdown-content ul,
.markdown-content ul,
.markdown-content ol {
margin: 0 0 20px 20px;
padding: 0;
@@ -951,6 +922,37 @@ body {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* 视频案例播放按钮样式（保留） */
.video .play-button,
.course-card:has(.video-case) .play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.video .play-button:hover,
.course-card:has(.video-case) .play-button:hover {
background-color: #fff;
transform: translate(-50%, -50%) scale(1.1);
}
.video .play-icon,
.course-card:has(.video-case) .play-icon {
font-size: 1.5rem;
color: #e74c3c;
margin-left: 5px;
}
/* 响应式适配 */
@media (max-width: 992px) {
.courses-grid {
@@ -962,43 +964,43 @@ body {
.banner {
height: 180px;
}
.banner h1 {
font-size: 2rem;
text-align: center;
padding: 0 20px;
}
.section-title {
font-size: 1.5rem;
}
.course-header {
grid-template-columns: 1fr;
}
.search-section {
flex-wrap: wrap;
}
.search-select {
border-radius: 4px;
border-right: 1px solid #ddd;
margin-bottom: 10px;
}
.search-input {
margin: 0 0 10px;
border-radius: 4px;
width: 100%;
}
.search-btn, .video-case-btn {
border-radius: 4px;
flex: 1;
margin: 0 5px 10px;
}
.list-header {
flex-direction: column;
align-items: flex-start;
@@ -1010,36 +1012,36 @@ body {
.courses-grid {
grid-template-columns: 1fr;
}
.tabs-wrapper {
flex-wrap: wrap;
}
.tab {
margin: 10px 10px 0 0;
}
.banner {
height: 150px;
}
.banner h1 {
font-size: 1.7rem;
}
.course-tabs {
flex-wrap: wrap;
}
.tab-item {
flex: 1 1 auto;
text-align: center;
}
.case-meta {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
</style>
</style>