<template>
  <div class="home-container">
    <div class="bannerImg">
      <el-carousel :height="bannerHeight+'px'">
        <el-carousel-item :key="index" v-for="(item,index) in bannerlist">
          <img :src="item.url" class="small" style="width: 100%;"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="com-container home_content">
      <!-- 热门活动   -->
      <div>
        <div class="home_title">
          热门活动
        </div>
        <div class="active-list">
          <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
               :style="{
        '-webkit-animation-delay': (index+1)*0.1+'s',
        'imation-delay': (index+1)*0.1+'s',
      }">
            <div class="inner">
              <div class="active-list-item-bg">
                <el-image :src="item.activityCover" fit="cover"></el-image>
              </div>
              <div class="active-list-item-cont">
                <div class="active-list-item-cont-header">
                  <div class="label" v-if="item.activityLabel">
                <span v-for="(item2, index2) in item.activityLabel.split(',')"
                      :key="index2">{{item2}}</span>

                  </div>
                  <div class="title">{{item.name}}</div>
                </div>
                <div class="active-list-item-cont-txt1">{{item.schoolName}} | {{item.subjectName}}</div>
                <div class="active-list-item-cont-txt2">{{item.activityStartTime}} （共{{item.activityTime}}天）</div>
                <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
                <div class="active-list-item-cont-bottom" @click="$router.push('/active/current/'+item.id)">
                  <div>查看详情</div>
                  <i class="el-icon-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--查看更多-->
      <div class="flex line">
        <div class="line"></div>
        <span>查看更多</span>
      </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 class="item_float_content">
                <div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
                  {{item2}}
                </div>
                <div class="item_name">
                  <div>
                    <div class="name">
                      {{item.name}}
                    </div>
                    <div class="name_line">
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div>
              <div class="item_text">
                {{item.think}}
              </div>

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

  </div>
</template>

<script>
  import img from "../../../assets/img/recruit.png";
  import banner1 from "../../../assets/img/Banner/banner1.jpg";
  import banner2 from "../../../assets/img/Banner/banner2.jpg";

  export default {
    name: "Home",
    data() {
      return {
        bannerHeight: "",
        bannerlist: [{
          url: banner1
        }, {
          url: banner2
        }],
        activeList: [
          {
            id: 1,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地',
            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地2',

            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地3',
            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 1,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地',
            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地2',
            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            activityCover: img,
            activityLabel: '线上',
            name: '2023年寒假历史营地3',
            schoolName: '南开大学',
            subjectName: '历史学',
            activityStartTime: '2023-09-01',
            activityEndTime: '20230903',
            activityTime: '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南开历史营']
          }]
      };
    },
    mounted() {
      // 首次加载时,初始化高度
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
      // 窗口大小发生改变
      window.onresize = () => {
        this.screenWidth = window.innerWidth
        this.bannerHeight = 600 / 1550 * this.screenWidth
      }
    },

  }
</script>

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

  .bannerImg {
    width: 100%;
    min-width: 1150px;

    ::v-deep .el-carousel__container {
      height: inherit;
      min-height: 450px;

      .el-carousel__arrow {
        width: 50px;
        height: 50px;

        .el-icon-arrow-left,
        .el-icon-arrow-right {
          font-size: 20px;
        }
      }
    }

    img {
      /*width: 100%;*/
      height: inherit;
    }
  }

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

  .active-list {
    margin-top: -10px;
  }

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

  .home_content {
    padding: 50px;
  }

  .line {
    align-items: center;

    div {
      width: 100%;
      border-bottom: 1px solid #D7D7D7;
    }

    span {
      color: #333333;
      font-size: 14px;
      width: 74px;
      margin-left: 20px;
    }
  }

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

    .reflections_item {
      flex-basis: 48%;
      margin: 1.75% 0;
      background-color: #ffffff;
      height: 10vw;
      min-height: 173px;
      position: relative;
      width: 200px;
      border-radius: 0 0 4px 4px;
      border: 1px solid #aaaaaa;

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

      .item_float {
        height: 20px;
        position: absolute;
        top: -1px;
        left: 8%;
        padding: 0 25px 0 0;
        background-color: #ffffff;
        .item_float_content{
          display: flex;
          transform: translateY(-50%);
        }

        .tag {
          font-size: 16px;
          display: flex;
          background-color: #D7D7D7;
          padding: 0 9px;
          margin-right: 10px;
          line-height: 40px;
        }

        .item_name {
          line-height: 40px;
          font-size: 18px;
          display: flex;
          align-items: flex-end;
          margin-left: 15px;
        }

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

        }
      }

      .item_text {
        font-size: 14px;
        margin: 7% 3% 3%;
        line-height: 24px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }
    }
  }

</style>
