<template>
  <div class="com-container home-container">
    <div>
      <el-carousel height="300px">
        <el-carousel-item :key="index" v-for="(item,index) in bannerlist">
          <img :src="item.url" class="small"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 热门活动   -->
    <div>
      <div class="home_title">
        热门活动
      </div>
      <div class="active-list">
        <div :key="index" :style="{
        '-webkit-animation-delay': (index+1)*0.1+'s',
        'imation-delay': (index+1)*0.1+'s',
      }" class="active-list-item"
             v-for="(item, index) in activeList">
          <div class="inner">
            <div class="active-list-item-bg">
              <el-image :src="item.cover" fit="cover"></el-image>
            </div>
            <div class="active-list-item-cont">
              <div class="active-list-item-cont-header">
                <div class="label">{{item.label}}</div>
                <div class="title">{{item.name}}</div>
              </div>
              <div class="active-list-item-cont-txt1">{{item.school}}</div>
              <div class="active-list-item-cont-txt2">{{item.beginTime}} （共{{item.days}}天）</div>
              <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
              <div @click="$router.push('/active/'+item.id)" class="active-list-item-cont-bottom">
                <div>查看详情</div>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学生感想和体会   -->
    <div>
      <div class="home_title">
        学生感想和体会
      </div>
      <div class="reflectionList">
        <div :key="index"
             class="reflections_item" v-for="(item, index) in reflectionsList">
          <div class="item_float">
            <div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
              {{item2}}
            </div>
            <div class="item_name">
              {{item.name}}
            </div>
          </div>
          <div>
            <div class="item_text">
              {{item.think}}
            </div>
          </div>

          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import img from "../../../assets/img/recruit.png";

  export default {
    name: "Home",
    data() {
      return {
        bannerlist: [{
          // url: require("@/assets/img/Banner/banner@2x.png")
        }, {
          // url: require("@/assets/img/Banner/banner@2x.png")
        }],
        activeList: [
          {
            id: 1,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地2',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地3',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 1,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地2',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地3',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          }
        ],
        reflectionsList: [{
          name: '同学',
          think: '我想小鸟肯定是害怕了，小鸟失去了自由，一定高兴不起来了，只有外面的天空才是小鸟的家，小鸟被细绳牵着失去自由实在是太可怜了，我决心把小鸟放走我轻轻的走过去，把小鸟腿上的细绳解开了。我把小鸟放在窗台上，我站在远处看着它，只见小鸟趴在窗台上还是一动也不动，嘴巴张着。妈妈说小鸟可能吓坏了，我有点后悔。后来过了好一会儿，小鸟才回过神来，它眨了眨眼睛，慢慢飞了起来。我看我觉的小鸟是我们人类的朋友，我们不能伤害小鸟，只有让小鸟在天空中自由的飞翔，它才会感到快乐',
          tag: ['北京市第八中序', '2023南开历史营']
        },
          {
            name: '同学',
            think: '2222222',
            tag: ['北京市第八中序', '2023南开历史营']
          },
          {
            name: '同学',
            think: '2222222',
            tag: ['北京市第八中序', '2023南开历史营']
          },
          {
            name: '同学',
            think: '2222222',
            tag: ['北京市第八中序', '2023南开历史营']
          },
          {
            name: '同学',
            think: '2222222',
            tag: ['北京市第八中序', '2023南开历史营']
          },
          {
            name: '同学',
            think: '2222222',
            tag: ['北京市第八中序', '2023南开历史营']
          }]
      };
    },
  }
</script>

<style lang="scss" scoped>
  @import "a/scss/common";

  @-webkit-keyframes fade {
    0% {
      -webkit-transform: translate3d(0, 3em, 0);
      transform: translate3d(0, 3em, 0);
      opacity: 0
    }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1
    }
  }

  @keyframes fade {
    0% {
      -webkit-transform: translate3d(0, 3em, 0);
      transform: translate3d(0, 3em, 0);
      opacity: 0
    }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1
    }
  }

  .active-list {
    margin-top: 30px;
    display: flex;
    flex-flow: wrap;

    .active-list-item {
      flex-basis: 31%;
      margin: 1.75% 0;
      -webkit-transform: translate3d(0, 3em, 0);
      transform: translate3d(0, 3em, 0);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      opacity: 0;
      -webkit-animation: fade ease-out 0.5s forwards;
      animation: fade ease-out 0.5s forwards;
      -webkit-animation-delay: .3s;
      animation-delay: .3s;

      &:nth-child(3n+2) {
        margin: 1.75% 3.5%;
      }

      .inner {
        border-radius: 4px;
        overflow: hidden;
        max-width: none;
        background: #fff;
        box-sizing: border-box;
        transition: all ease-out 0.2s;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        .active-list-item-bg {
          width: 100%;
          height: 163px;
          overflow: hidden;
          background-color: #D8D8D8;
          border-radius: 4px 4px 0px 0px;

          ::v-deep .el-image {
            width: 100%;
            height: 100%;
            transition: all .5s;
            -webkit-transition: all .5s;

            .el-image__error {
              background-color: #D8D8D8;
            }

            &:hover {
              transform: scale(1.1);
              -ms-transform: scale(1.1); /* IE 9 */
              -moz-transform: scale(1.1); /* Firefox */
              -webkit-transform: scale(1.1); /* Safari 和 Chrome */
              -o-transform: scale(1.1);
            }
          }
        }

        .active-list-item-cont {
          flex: 1;
          /*height: 240px;*/
          padding: 10px 20px 0;
          background-color: #ffffff;
          border-radius: 0 0 4px 4px;
          font-family: PingFang SC;
          font-weight: 400;

          .active-list-item-cont-header {
            display: flex;
            flex-flow: row;
            align-items: center;
            line-height: 28px;
            margin: 10px 0 5px;

            .label {
              font-size: 12px;
              padding: 0 10px;
              border-radius: 8px;
              color: #ffffff;
              background-color: var(--all_color);
              margin-right: 5px;
            }

            .title {
              font-size: 18px;
              font-weight: 500;
            }
          }

          .active-list-item-cont-txt1 {
            font-size: 16px;
            line-height: 32px;
          }

          .active-list-item-cont-txt2 {
            font-size: 14px;
            color: #999999;
            line-height: 24px;
          }

          .active-list-item-cont-txt3 {
            font-size: 15px;
            color: #EC808D;
            line-height: 32px;
          }

          .active-list-item-cont-bottom {
            display: flex;
            flex-flow: row;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #cccccc;
            margin-top: 10px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;

            .el-icon-right {
              font-size: 18px;
            }

            &:hover {
              color: var(--all_color);
            }
          }
        }
      }

      &:hover {
        .inner {
          box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);

          .active-list-item-bg {
            ::v-deep .el-image {
              transform: scale(1.1);
              -ms-transform: scale(1.1); /* IE 9 */
              -moz-transform: scale(1.1); /* Firefox */
              -webkit-transform: scale(1.1); /* Safari 和 Chrome */
              -o-transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  .home_title {
    font-size: 20px;
    margin: 20px 0;
  }

  .home-container {
    padding: 50px;
    color: #333333;
    font-family: "PingFang SC";
  }

  .reflectionList {
    /*margin-top: 30px;*/
    display: flex;
    flex-flow: wrap;
    font-size: 12px;

    .reflections_item {
      flex-basis: 31%;
      margin: 1.75% 0;
      background-color: #ffffff;
      height: 163px;
      position: relative;
      width: 200px;
      &:nth-child(3n+2) {
        margin: 1.75% 3.5%;
      }

      .item_float {
        display: flex;
        position: absolute;
        top: -10%;
        margin-left: 10px;

        .tag {
          display: flex;
          background-color: #D7D7D7;
          padding: 9px;
          margin-right: 10px;
        }

        .item_name {
          border-bottom: 2px solid #D7D7D7;
        }
      }

      .item_text {
        margin: 7% 3%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
      }
    }
  }

</style>
