修改资源案例web页面
This commit is contained in:
@@ -31,9 +31,7 @@
|
||||
>
|
||||
<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">
|
||||
@@ -56,9 +54,7 @@
|
||||
<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>
|
||||
@@ -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;
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user