<template>
  <div class="box">
    <div class="wrap">
      <div class="tit">
        <div class="left">科技活动</div>
        <div class="right">
          <div class="publish">发布活动</div>
          <div class="more">更多</div>
        </div>
      </div>
      <div class="content">
        <div class="item one">
          <img
            src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
            style="width: 100%"
          />
          <div class="des">
            <div class="left">
              <div>助力工厂公辅系统数字化及节能提效</div>
              <div class="time">活动时间：2021-11-01 08:00</div>
              <div>1988人已观看</div>
            </div>
            <div class="right">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
          </div>
          <div class="dess">
            <div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
            <div class="dess1">
               <div class="time">活动时间：2021-11-01 08:00</div>
               <div>1988人已观看</div>
            </div>
            <div class="enroll">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
          </div>
          <div class="dess">
            <div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
            <div class="dess1">
               <div class="time">活动时间：2021-11-01 08:00</div>
               <div>1988人已观看</div>
            </div>
            <div class="enroll">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
          </div>
          <div class="dess">
            <div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
            <div class="dess1">
               <div class="time">活动时间：2021-11-01 08:00</div>
               <div>1988人已观看</div>
            </div>
            <div class="enroll">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
          </div>
          <div class="dess">
            <div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
            <div class="dess1">
               <div class="time">活动时间：2021-11-01 08:00</div>
               <div>1988人已观看</div>
            </div>
            <div class="enroll end">已结束</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, reactive } from "vue";

</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  div.wrap {
    width: 1400px;
  }
}

.tit {
  overflow: hidden;
  padding: 20px 0;
  .left {
    float: left;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #333333;
  }
  .right {
    float: right;
    font-size: 20px;
    font-family: Source Han Sans CN;
    .publish {
      display: inline-block;
      font-weight: 500;
      color: #0054ff;
      margin-right: 20px;
      cursor: pointer;
      user-select: none;
    }
    .more {
      display: inline-block;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
      user-select: none;
    }
  }
}
.content {
  width: 101%;
  overflow: hidden;
  .time {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 0;
    background: #0054ff;
    border-radius: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
  .item {
    position: relative;
    float: left;
    width: 24%;
    margin: 0 1% 1% 0;
    .dess {
      overflow: hidden;
      .txt {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .dess1 {
        float: left;
      }
      .enroll {
        margin-top: 10px;
        float: right;
        width: 90px;
        height: 30px;
        line-height: 30px;
        background: #0054FF;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        &.end {
          background: #B4B4B4;
        }
      }

    }
    img {
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .img {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 54%;
    }
    &.one {
      width: 49%;
      height: 0;
      padding-bottom: 36.75%;
      overflow: hidden;
      .des {
        position: absolute;
        height: 94px;
        width: 100%;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        overflow: hidden;
        .left {
          float: left;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          margin: 16px 0 0 18px;
        }
        .right {
          margin: 27px 38px;
          float: right;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background: #0054ff;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>