修改资源案例web页面

This commit is contained in:
2025-10-31 13:23:42 +08:00
parent 76f7ee9295
commit c54ad0041e

View File

@@ -31,9 +31,7 @@
> >
<div class="course-image"> <div class="course-image">
<img :src="course.imageUrl" :alt="course.title" class="course-thumbnail"> <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>
<div class="course-info"> <div class="course-info">
<div class="course-meta" v-if="index === 0"> <div class="course-meta" v-if="index === 0">
@@ -56,9 +54,7 @@
<div class="course-header"> <div class="course-header">
<div class="course-video"> <div class="course-video">
<img :src="selectedCourse.imageUrl" :alt="selectedCourse.title" class="video-thumbnail"> <img :src="selectedCourse.imageUrl" :alt="selectedCourse.title" class="video-thumbnail">
<div class="play-button"> <!-- 已删除线上课程详情页的播放按钮 -->
<div class="play-icon"></div>
</div>
</div> </div>
<div class="course-intro"> <div class="course-intro">
<h2>课程介绍</h2> <h2>课程介绍</h2>
@@ -562,32 +558,7 @@ body {
transform: scale(1.05); 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 { .course-info {
display: flex; display: flex;
@@ -951,6 +922,37 @@ body {
box-shadow: 0 2px 10px rgba(0,0,0,0.1); 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) { @media (max-width: 992px) {
.courses-grid { .courses-grid {