修改资源案例web页面
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user