web-common/src/layout/index/notice.vue

<template>
  <div id="notice">
    <el-row>
      <el-col :span="24" class="notice">
        <el-col :span="24" class="topTit">
          <el-col :span="20">
            <span :style="`border-color:${borderColor}`">最新公告</span>
          </el-col>
          <el-col :span="4">
            <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `/info/list/${notice.column.id}` })">
              MORE<i class="el-icon-video-play"></i>
            </el-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="noticeMain">
          <el-col
            :span="24"
            class="noticeList"
            v-for="(item, index) in notice.infoList"
            :key="index"
            :name="`${index}`"
            @click.native="$router.push({ path: `/info/detail?id=${item.id}` })"
          >
            <el-col :span="4" class="time">
              {{ item.publish_time | getDate }}
            </el-col>
            <el-col :span="20" class="title">
              <el-link :underline="false">
                <p class="textOver">{{ item.title }}</p>
              </el-link>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'notice',
  props: {
    notice: null,
  },
  components: {},
  data: () => ({
    borderColor: '#850000',
    Color: '#850000',
  }),
  created() {},
  computed: {},
  methods: {},
  filters: {
    getDate(date) {
      let arr = date.split('-');
      return `${arr[1]}-${arr[2]}`;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice {
  padding: 10px;
}
.topTit {
  border-bottom: 1px solid #ccc;
}
.topTit span {
  display: inline-block;
  height: 30px;
  border-bottom: 1px solid transparent;
}
.noticeList {
  padding: 7px 0;
  border-bottom: 1px dashed #ccc;
}
.noticeList .time {
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #850000;
  color: #fff;
  font-size: 18px;
}
.noticeList .title p {
  width: 290px;
  padding: 10px;
}
</style>