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 ">
          <img src="../../assets/image/resource/who01.png">
          <span>我是管理者</span>
        </li>
        <li class=" show  ">
          <img src="../../assets/image/resource/who02.png">
          <span>我是教师</span>
        </li>
        <li class="show ">
          <img src="../../assets/image/resource/who03.png">
          <span>我是学生</span>
        </li>
        <li class="show">
          <img src="../../assets/image/resource/who04.png">
          <span>我是家长</span>
        </li>
      </ul>
    </div>
    <div class="arrow">
      <br><br>
      <h1>开通智慧学校</h1>
      <div class="box"></div>
    </div>
    <img class="center-img" src="../../assets/image/resource/center001.png">
    <div class="arrow">
      <img src="../../assets/image/resource/arrow.png">
      <h1>开通智慧云平台</h1>
      <div class="box"></div>
    </div>
    <img src="../../assets/image/resource/botton.png" style="width:100%">
    <div class="arrow">
      <img src="../../assets/image/resource/arrow.png" >
      <h1>联系我们</h1>
      <div class="box"></div>
    </div>
    <div class="center-info">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        homeCarouselImg: [
          {
            images: require('../../assets/image/resource/banner002.png')
          },
          //{
          //  images: require('../../assets/image/resource/banner01.png')
          //},
        ]
      };
    },

  }
</script>
<style scoped>
  .home {
    width: 100%;
    margin: auto;
  }

  .title {
    width: 100%;
    overflow:hidden;
  }

  .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: -80px;
    position: relative;
    z-index: 20;
    width: 60%;
    /*overflow: hidden;*/
    margin-left: 21%;
  }

  .people-list {
    display: block;
  }
  .center-img{
    max-width:100%;
  }

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

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

    .who-is ul li {
      float: left;
      width: 240px;
      height: 280px;
      text-align: center;
      position: relative;
      box-shadow: 0px 0px 5px #dde8f9;
      border-radius: 5%;
      margin-left: 38px;
      background-color: #fff;
    }
  .who-is ul li:first-child{margin-left:0}
  .show:hover {
    transition: all 0.6s;
    margin-top: -2%;
    cursor:pointer;
  }

  .who-is ul li img {
    border: 0;
    /* vertical-align: middle; */
    margin-top: 80px;
    height: 93px;
  }
  .arrow{
    width:100%;
    text-align:center;

  }
    .arrow h1 {
      margin-top: 70px;
      font-weight: 800;
      font-size: 26px;
      color: #0099FF;
      margin-bottom: 5px;
    }
    .arrow img{
      width:25px;
      margin-top: 20px;
    }
  .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>