<template>
  <div id="maininfo">
    <el-row>
      <el-col :span="24" class="top" id="list_top">
        <span>{{ title }}</span>
      </el-col>
      <el-col
        :span="24"
        class="noticelist"
        v-for="(item, index) in noticelist"
        :key="index"
        @click.native="$router.push({ name: 'master_detail', params: { type: 'news', id: item.id } })"
      >
        <el-col :span="5" class="image">
          <el-image style="width:222px;height:141px" :src="item.pic"></el-image>
        </el-col>
        <el-col :span="19" class="text">
          <el-col :span="24" class="title">
            <p>{{ item.title }}</p>
          </el-col>
          <el-col :span="24" class="content">
            <p>{{ item.content }}</p>
          </el-col>
          <el-col :span="24" class="time">
            {{ item.publish_time }}
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" style="text-align:right">
        <el-pagination @current-change="search" :page-size="8" layout="total, prev, pager, next, jumper" :total="totalRow"> </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'maininfo',
  props: {
    title: null,
    noticelist: null,
    totalRow: { type: Number, default: 0 },
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    search(page) {
      this.$emit('search', page);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.top {
  margin: 84px 0 13px 0;
}
.top span {
  display: inline-block;
  width: 99px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  background: #415285;
}
.noticelist {
  height: 223px;
  padding: 40px 0 0 0;
  border-bottom: 1px solid #ccc;
}
.noticelist:last-child {
  border-bottom: none;
}
.text .title p {
  font-size: 18px;
  color: #19110b;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text .title p:hover {
  color: #415285;
  cursor: pointer;
}
.text .content {
  padding: 13px 0;
}
.text .content p {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 25px;
}
.text .time {
  font-size: 13px;
  color: #999;
}
/deep/.el-pagination {
  padding: 15px 5px;
}
</style>
