web-common/src/layout/gain/gainRight.vue

<template>
  <div id="newsRight">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
            <el-breadcrumb-item>导航一</el-breadcrumb-item>
            <el-breadcrumb-item>数据列表</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="24" class="search">
          <div>
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="24" class="list">
          <el-col :span="24" class="mainRightList" v-for="(item, index) in gainList" :key="index" :type="item.type">
            <el-col :span="8" class="image">
              <el-image style="width:265px;height:179px;" :src="item.pic"></el-image>
            </el-col>
            <el-col :span="16" class="info">
              <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>{{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: {
    gainList: null,
  },
  components: {},
  data: () => ({
    input3: '',
  }),
  created() { },
  computed: {},
  methods: {

  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main {
  width: 880px;
  min-height: 500px;
  margin: 0 0 0 20px;
  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;
}
.info {
  padding: 0 0 0 15px;
}
.mainRightList .title {
  font-size: 20px;
  padding: 0 0 5px 0;
}
.mainRightList .time {
  font-size: 16px;
  color: #999;
  padding: 0 0 5px 0;
}
.mainRightList .content p {
  text-indent: 2rem;
  font-size: 18px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.mainRightList .button {
  text-align: right;
  padding: 7px 0px;
}
/deep/.el-button {
  padding: 10px;
}
.page {
  padding: 0 20px;
  text-align: center;
  margin: 0 0 20px 0;
}
</style>