video 施工中
This commit is contained in:
GuanM
parent
9d69104327
commit
dc718d4cf2
@ -135,14 +135,14 @@ body {
|
||||
}
|
||||
|
||||
#newsman {
|
||||
padding: 60px 20px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
#newsman h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
@ -151,7 +151,7 @@ body {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 40px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@ -170,8 +170,8 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
max-width: 1200px;
|
||||
margin: 40px auto 0;
|
||||
padding: 20px 0;
|
||||
margin: 30px auto 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ body {
|
||||
}
|
||||
|
||||
#product {
|
||||
padding: 60px 20px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
@ -294,7 +294,7 @@ body {
|
||||
}
|
||||
|
||||
#news {
|
||||
padding: 60px 20px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -419,3 +419,101 @@ body {
|
||||
.news-right a:hover {
|
||||
color: #00a0e9;
|
||||
}
|
||||
|
||||
.video {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.video h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: #00a0e9;
|
||||
}
|
||||
|
||||
.video p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
flex: 0 0 calc(25% - 15px);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.video-item img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.video-item .play-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-item .play-icon::before {
|
||||
content: '';
|
||||
border-style: solid;
|
||||
border-width: 10px 0 10px 16px;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
|
||||
.video-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.video-text {
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video-text h3 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.video-text p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
|
||||
<div class="news-container">
|
||||
<div class="news-left">
|
||||
<img src="./images/ne.jpg" alt="News">
|
||||
<img src="./images/pro-center1.jpg" alt="News">
|
||||
<div class="news-text">
|
||||
<div class="news-date">
|
||||
<span class="day">15</span>
|
||||
@ -161,6 +161,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video">
|
||||
<h1>视频中心</h1>
|
||||
<p>我们坚持以用户为中心,打造优质的视频体验。在这里,我们用镜头记录每一个精彩时刻,让科技与生活完美融合!</p>
|
||||
|
||||
<div class="video-container">
|
||||
<div class="video-item">
|
||||
<img src="images/video1.jpg" alt="视频缩略图">
|
||||
<div class="play-icon"></div>
|
||||
<div class="video-text">
|
||||
<h3>享受生活,从这开始!</h3>
|
||||
<p>让生活更简单,更有品质</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-item">
|
||||
<img src="images/video2.jpg" alt="视频缩略图">
|
||||
<div class="play-icon"></div>
|
||||
<div class="video-text">
|
||||
<h3>智能厨房管家-第一期</h3>
|
||||
<p>智能科技,让烹饪更轻松</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-item">
|
||||
<img src="images/video3.jpg" alt="视频缩略图">
|
||||
<div class="play-icon"></div>
|
||||
<div class="video-text">
|
||||
<h3>PS-197: 每一天,每一刻...</h3>
|
||||
<p>科技改变生活,创新引领未来</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-item">
|
||||
<img src="images/video4.jpg" alt="视频缩略图">
|
||||
<div class="play-icon"></div>
|
||||
<div class="video-text">
|
||||
<h3>超级咖啡机,享味生活品质</h3>
|
||||
<p>品味咖啡,品味生活</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user