web-common/src/layout/news/newsRight.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 newsRightList" :key="index"
                  :type="item.type">
            <el-col :span="24" class="twoTitle">
              <el-col :span="21" class="title">
                <p class="textOver">{{ item.title }}</p>
              </el-col>
              <el-col :span="3" class="more">
                <!-- @click="$router.push({ path: `moreList/${newsRightList[0].id}` })" -->
                <el-link :underline="false" @click="$router.push({ path: '/lists/moreList' })">more</el-link>
              </el-col>
            </el-col>
            <el-col :span="24" class="children" v-for="(tag, index) in item.children" :key="index">
              <el-col :span="20" class="title" @click.native="$router.push({ name: 'detail', params:{id:tag.id} })">
                <p class="textOver">{{ tag.title }}</p>
              </el-col>
              <el-col :span="4" class="time">
                {{tag.publish_time}}
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'newsRight',
  props: {
    newsRightList: 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 {
  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;
}
.twoTitle {
  padding: 10px 0;
}
.twoTitle .title {
  font-size: 25px;
  font-weight: bold;
}
.twoTitle .more .el-link {
  font-size: 18px;
  color: #336699;
  text-transform: uppercase;
}
.children {
  padding: 8px 10px;
  border-bottom: 1px dashed #000;
}
.children:hover .title {
  color: #336699;
  cursor: pointer;
}
.children .title {
  font-size: 18px;
}
.children .time {
  font-size: 18px;
  text-align: center;
  color: red;
}
</style>