<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>
