<template>
  <div class="party_building_activities">
    <!--  党群工作  -->
    <div class="headline">
      <div class="line_left">
        <img src="../../../assets/index/party_building_activities/gangh.png" alt="">
      </div>
      <div class="title">
        党群工作
      </div>
      <div class="line_right">
        <img src="../../../assets/index/party_building_activities/gangh3.png" alt="">
      </div>
    </div>

    <!--轮播图-->
    <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="more" @click="lookMore()">
      <span class="more_text">更多</span>
      <img src="../../../assets/index/party_building_activities/gangduohh.png" alt="">
    </div>

  </div>
</template>

<script>
import SlideshowCard from "./slideshow_card";
import {getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

export default {
  name: "party_building_activities",
  components: {
    SlideshowCard
  },
  data() {
    return {
      width: document.documentElement.clientWidth > 992,
      listData: []
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    getArticle(item) {
      toArticle(item, this.width);
    },
    lookMore() {
      // lookMoreComment(item,this.width)
      lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width);
    },

    getListData() {
      getArticleList({
        type: "N6CfFGz2UWpQ9Uhk3uwiJAQ",
        pageNum: 1,
        pageSize: 6
      }).then(res => {
        this.listData = res.rows;
      });
    },
    getTime(date) {
      let time = new Date(date);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    }
  }
};
</script>

<style scoped lang="scss">
.party_building_activities {
  background-image: url("../../../assets/index/announcements/sy_bj3.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  //height: 55.6rem;

  .headline {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 6.3rem;
    padding-bottom: 4.4rem;

    .line_left {
      line-height: 4.4rem;
    }

    .title {
      width: 12.9rem;
      height: 4.4rem;
      font-size: 3.1rem;
      font-weight: 500;
      color: #DA2D2D;
      line-height: 4.4rem;
      letter-spacing: .1rem;
      margin: 0 1.3rem;
    }

    .line_right {
      line-height: 4.4rem;
    }
  }

  .more {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 2.3rem;
    margin-top: 2rem;
    padding-bottom: 2rem;
    cursor: pointer;

    .more_text {
      font-size: 1.6rem;
      font-weight: 500;
      color: #DA2D2D;
      line-height: 2.3rem;
      letter-spacing: .2rem;
    }

    img {
      width: 2.9rem;
      height: 1.4rem;
      margin-left: 0.8rem;
      margin-top: .5rem;
    }
  }
}


</style>
