<template>
  <div class="news">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in 3" :key="item">
            <div class="carousel" :style="{'background-image': `url(${require(`../img/carousel${item}.png`)})`}"></div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="12">
        <div class="news-btn">
          <el-button size="medium" type="primary" round>通知公告</el-button>
        </div>
        <div class="news-title">
          住房和城乡建设部拟修订《建筑工程施工发包与承包计价管理办法》
        </div>
        <div class="news-tag">
          <div>2021-09-03</div>
          <div>施工管理事业部撰稿</div>
        </div>
        <div class="news-text">
          为贯彻落实国务院“放管服”改革要求、促进建筑业高质量发展，住房和城乡建设部修订了《建筑工程施工发包与承包计价管理办法》，形成征求意见稿，日前开始征求意见。意见反馈截止时间为12月25日前。
          据介绍，《建筑工程施工发包与承包计价管理办法》（住房和城乡建设部令第16号）自2014年2月实施以来，对规范计价行为、加强造价管控、维护建设各方合法权益发挥了重要作用。随着工程造价市场化改革和行政审批制度改革的推进，16号部令的部分条款已不能满足建筑工程发承包计价管理的需要。
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" plain round size="mini" class="more">更多</el-button>
  </div>
</template>

<style lang="scss" scoped>

.news-btn {
  .el-button {
    font-size: 16px;
    font-weight: 600;
    color: #389CE9;
    border-color: #389CE9;
  }
  .el-button--primary {
    border-color: rgba(86, 220, 255, 1);
    color: #fff;
    background: linear-gradient(90deg, rgba(17, 122, 255, 1) 0%, rgba(17, 122, 255, 1) 0%, rgba(86, 220, 255, 1) 100%, rgba(86, 220, 255, 1) 100%);
    &:hover {
      background: linear-gradient(90deg, rgba(17, 122, 255, 0.9) 0%, rgba(17, 122, 255, 0.9) 0%, rgba(86, 220, 255, 0.9) 100%, rgba(86, 220, 255, 0.9) 100%);
    }
  }
}
.carousel {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  border-radius: 8px;
  overflow: hidden;
  background-size: 100% 100%;
}
.news {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  height: 326px;
  position: relative;
  box-sizing: border-box;
  &-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 36px;
    color: #3075FF;
    margin: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  &-tag {
    color: #8996AF;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  &-text {
    font-size: 14px;
    color: #515E78;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    text-indent: 26px;
  }
}
.more {
  position: absolute;
  bottom: 10px;
  right: 24px;
}
</style>
