TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/home.vue

<template>
  <div class="home">
    <div class="title">
      <!--顶部轮播图-->
      <div>
        <Carousel>
          <CarouselItem v-for="(homeImagesList,index) in homeCarouselImg" :key="index">
            <div class="demo-carousel">
              <img class="carousel-img" :src="homeImagesList.images">
            </div>
          </CarouselItem>
        </Carousel>
      </div>
    </div>
    <div class="who-is">
      <ul class="people-list">
        <li class=" show animated slideInLeft delay-1s">
          <img src="../../assets/image/resource/who01.png">
          <span>我是管理者</span>
        </li>
        <li class=" show animated slideInLeft ">
          <img src="../../assets/image/resource/who02.png">
          <span>我是教师</span>
        </li>
        <li class="show animated slideInRight">
          <img src="../../assets/image/resource/who03.png">
          <span>我是学生</span>
        </li>
        <li class="show animated slideInRight delay-1s">
          <img src="../../assets/image/resource/who04.png">
          <span>我是家长</span>
        </li>
      </ul>
    </div>
    <div class="arrow">
      <img src="../../assets/image/resource/arrow.png">
      <h1>开通智慧学校</h1>
      <div class="box"></div>
    </div>
    <img src="../../assets/image/resource/center01.png">
    <div class="arrow">
      <img src="../../assets/image/resource/arrow.png">
      <h1>开通智慧云平台</h1>
      <div class="box"></div>
    </div>
    <img src="../../assets/image/resource/bottom.png">
    <div class="arrow">
      <img src="../../assets/image/resource/arrow.png">
      <h1>联系我们</h1>
      <div class="box"></div>
    </div>
    <div class="center-info">
      <!--<h1>已超过<span>1000</span>所学校开通了我们的服务</h1>
    <img  src="../../assets/image/resource/center01.png" >-->
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        homeCarouselImg: [
          {
            images: require('../../assets/image/resource/banner01.png')
          },
          {
            images: require('../../assets/image/resource/banner.png')
          },
        ]
      };
    },
   
  }
</script>
<style scoped>
  .home {
    width: 100%;
    margin: auto;
  }

  .title {
    width: 100%;
  }

  .header {
    height: 80px;
    background-color: rgb(29, 34, 34);
  }

  .demo-carousel {
    width: 100%;

  }
    .demo-carousel img {

      background-size:contain;
    }
  .carousel-img {
    width: 100%;
    cursor: pointer;
    margin: auto;
  }

  .who-is {
    height: 260px;
    margin-top: -20px;
    position: relative;
    z-index: 20;
    width: 56.5%;
    /*overflow: hidden;*/
    margin-left: 21.5%;
  }

  .people-list {
    display: block;
  }

  .who-is ul {
    list-style: none;
  }

    .who-is ul li span {
      padding-top: 10px;
      display: block;
      font-size: 24px;
      /* margin-top: 35px; */
      font-weight: 800;
      color: #141414;
    }

    .who-is ul li {
      float: left;
      width: 255px;
      height: 235px;
      text-align: center;
      position: relative;
      box-shadow: 1px 1px 1px 1px #808080;
      border-radius: 5%;
      margin-left: 12px;
      background-color: #fff;
    }

  .show:hover {
    transition: all 0.6s;
    margin-top: -2%;
    cursor:pointer;
  }

  .who-is ul li img {
    border: 0;
    /* vertical-align: middle; */
    margin-top: 10%;
  }
  .arrow{
    width:100%;
    text-align:center;
  }
    .arrow h1 {
      margin-top: 30px;
      font-weight: 800;
      font-size: 26px;
      color: #0099FF;
      margin-bottom: 5px;
    }
    .arrow img{
      width:25px;
    }
  .box {
    width: 120px;
    height: 5px;
    background-color: #0099FF;
    margin: auto;
    margin-bottom:20px;
    /*text-align:center;*/
  }
  .center-info {
    width: 100%;
  }
  .center-info h1{
    font-size:40px;
    text-align:center;
  }
    .center-info span {
      color: #289EFB;
      font-size:60px;
    }
</style>