sist_web/src/views/index/components/party_building_activities.vue

<template>
  <div class="party_building_activities">
    <!--title-->

    <div class="headline">
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="title">
        <!--{{ $t('message.news_center') }}-->
        党群工作
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>
    <!--<el-row>-->
    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
    <!--    <div class="grid-content"></div>-->
    <!--  </el-col>-->
    <!--  -->
    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
    <!--    <div class="title">-->
    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
    <!--      党群工作-->
    <!--    </div>-->
    <!--    <el-row>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <div class="divider_text">Party Building Activities</div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--  </el-col>-->
    <!--</el-row>-->
    <!--轮播图-->

    <el-row>
      <el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="24" :sm="22" :md="24" :lg="20" :xl="18">
        <SlideshowCard/>
      </el-col>
    </el-row>
    <!--更多-->


    <div class="headline">
      <!--<div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
      <!--  {{ $t('message.more') }}-->
      <!--</div>-->
      <!--<div class="more_img">-->
      <!--  <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
      <!--</div>-->
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="hr_text" style="color:#DA2D2D;">
        <!--{{ $t('message.news_center') }}-->
        党史教育
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>


    <!--党史教育内容-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
        <div class="phe_row" v-for="(item,index) in listData" :key="index">
          <el-row>
            <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
              <div class="phe_img">
                <img :src="item.imgurl" alt="">
              </div>
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
              <div class="phe_context">
                <div class="phe_context_title">{{item.title}}</div>
                <div class="phe_context_text" v-html="item.content">
                </div>
              </div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="22" :lg="3" :xl="3">
              <div class="phe_time">{{getTitme(item.publishTime)}}</div>
            </el-col>
          </el-row>
          <hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SlideshowCard from './slideshow_card'
import {getArticleList} from "@/api";

export default {
  name: "party_building_activities",
  components: {
    SlideshowCard
  },
  data(){
    return{
      listData:[]
    }
  },
  created() {
    this.getListData()
  },
  methods:{
    getListData(){
      getArticleList({
        type: "LlBbF5OM6ILqxX69TIg7ipg",
        pageNum: 1,
        pageSize: 6
      }).then(res => {
        this.listData = res.rows
      })
    },
    getTitme(time){
      let date = new Date(time)
      return date.getFullYear() +"." + date.getMonth()+1 +"." + date.getDate()
    }
  }
}
</script>

<style scoped lang="scss">
.party_building_activities {
  background-image: url("../../../assets/index/party_building_activities/sy_bj3.png");
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.headline {

  .hr_line_left,.hr_line_right{
    border-color: #DA2D2D !important;
  }
  .hr_dot_left,.hr_dot_right{
    background-color: #DA2D2D !important;
  }

  .title {
    background: #DA2D2D;
  }

  .divider_text {
    color: #DA2D2D;
  }

}

.hr {
  border: .1rem solid #D13C3C;
}

.phe_row{
  margin: 4rem 0;
}
.phe {
  font-family: PingFangSC-Medium, PingFang SC;
  margin-top: 4rem;
  margin-bottom: 4rem;

  .phe_img {
    img {
      height: 10rem;
    }
  }


  .phe_context {
    .phe_context_title {
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
      cursor: pointer;
      font-size: 2rem;
      font-weight: 600;
      color: #161616;
      letter-spacing: 2px;
    }

    .phe_context_title:hover {
      color: #DA2D2D;
    }

    .phe_context_text {
      margin-top: 0.8rem;
      font-size: 1.6rem;
      color: #565656;
      letter-spacing: 1px;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:3; //显示的行
    }
  }

  .phe_time {
    text-align: right;
    font-size: 2rem;
    font-weight: 500;
    color: #565656;
    letter-spacing: 2px;
  }
}



</style>