web-common/src/layout/news/moreList.vue

<template>
  <div id="newsRight">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="list">
          <el-col :span="24" class="mainRightList" v-for="(item, index) in newsList" :key="index" :type="item.type">
            <el-col :span="8" class="image">
              <el-image style="width:340px;height:250px;" :src="item.pic"></el-image>
            </el-col>
            <el-col :span="16">
              <el-col :span="24" class="title" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
                <p class="textOver">{{item.title}}</p>
              </el-col>
              <el-col :span="24" class="time">
                <p>{{item.publish_time}}</p>
              </el-col>
              <el-col :span="24" class="content">
                <p v-html="item.content"></p>
              </el-col>
              <el-col :span="24" class="button">
                <el-button type="primary" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">进入
                </el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="page">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" layout="total,prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'newsRight',
  props: {
    newsList: null,
    total: null,
  },
  components: {},
  data: () => ({
    input3: '',
    currentPage: 1,
  }),
  created() { },
  computed: {},
  methods: {
    handleSizeChange(val) {
      // eslint-disable-next-line no-console
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // eslint-disable-next-line no-console
      console.log(`当前页: ${val}`);
    }
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main {
  min-height: 500px;
  margin: 20px 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.top {
  margin: 10px 0 0 20px;
}
.search {
  margin: 20px 0;
  padding: 0 20px;
}
/deep/.el-input-group {
  width: 40%;
}
/deep/.el-input__inner {
  border: 1px solid #336699;
}
/deep/.el-input-group__append {
  border: 1px solid #336699;
  background-color: #336699;
  color: #fff;
}
.list {
  padding: 0 20px;
}
.mainRightList {
  padding: 20px;
  margin: 0 0 20px 0;
  border: 1px dashed #000;
}
.mainRightList:hover .title {
  cursor: pointer;
  color: #336699;
}
.mainRightList .title {
  font-size: 30px;
  padding: 0 0 5px 0;
}
.mainRightList .time {
  font-size: 20px;
  color: #999;
  padding: 0 0 5px 0;
}
/deep/.mainRightList .content p p {
  text-indent: 2rem;
  font-size: 18px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.mainRightList .button {
  text-align: right;
  padding: 8px 25px;
}
/deep/.el-button {
  padding: 10px;
}
.page {
  padding: 0 20px;
  text-align: center;
  margin: 0 0 20px 0;
}
</style>