You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.9 KiB
82 lines
1.9 KiB
<template> |
|
<div class="view-container"> |
|
<div class="banner"></div> |
|
<div class="container"> |
|
<div class="top-video-box"> |
|
<div class="video"> |
|
<video id="video" width="100%" height="100%" controls> |
|
<source src="../../assets//videos/920b6703c5f95b9ff774f27abf5d4f29.mp4" type="video/mp4" /> |
|
您的浏览器不支持视频播放 |
|
</video> |
|
</div> |
|
<div class="info-list"></div> |
|
</div> |
|
<div class="title-container"> |
|
<div class="title">课程体系</div> |
|
<div class="description"> |
|
全面落实立德树人根本任务，CDIO工程教育理念 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import {} from 'vue' |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.view-container { |
|
height: 100%; |
|
// background-color: #2080f7; |
|
.container { |
|
width: $base-container-width; |
|
margin: 0 auto; |
|
padding-top: 300px; |
|
.top-video-box { |
|
position: absolute; |
|
top: 120px; |
|
display: flex; |
|
height: 545px; |
|
justify-content: space-between; |
|
.video { |
|
width: 1073px; |
|
height: 100%; |
|
background-color: #d9d9d9; |
|
#video{ |
|
object-fit: cover; |
|
} |
|
} |
|
.info-list { |
|
margin-left: 20px; |
|
width: 519px; |
|
background-color: #fff; |
|
} |
|
} |
|
.title-container { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
height: 300px; |
|
.title { |
|
color: #333333; |
|
font-size: 42px; |
|
font-weight: 700; |
|
} |
|
.description { |
|
margin-top: 30px; |
|
color: #777777; |
|
font-size: 20px; |
|
} |
|
} |
|
} |
|
.banner { |
|
width: 100%; |
|
height: 410px; |
|
background: url('../../assets/images/banner2.png') no-repeat; |
|
background-size: cover; |
|
} |
|
} |
|
</style>
|
|
|