web-center/src/layout/index/service.vue

<template>
  <div id="service">
    <el-row style="width:540px;height:369px;" v-loading="loading">
      <el-col :span="24" class="top">
        <el-col :span="20" class="topTit">
          <span> {{ serviceList.title || title }}</span>
        </el-col>
        <el-col :span="4" class="topLink">
          <el-link :underline="false" @click="$router.push({ path: path, query: { title: serviceList.title } })"
            >more<i class="el-icon-d-arrow-right"></i
          ></el-link>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col :span="24" class="list" v-for="(item, index) in infoList" :key="index" @click.native="$router.push({ path: `/detail?id=${item.id}` })">
          <el-col :span="19" class="title">
            <p class="textOver"><i class="el-icon-caret-right icon"></i>{{ item.title }}</p>
          </el-col>
          <el-col :span="5" class="date">
            {{ item.publish_time }}
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'service',
  props: {
    serviceList: null,
  },
  components: {},
  data: () => ({
    title: '档案服务',
    loading: true,
    infoList: [],
    path: undefined,
  }),
  watch: {
    serviceList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      let notice = [];
      for (const item of columns) {
        if (!this.path) this.path = item.path;
        let serviceList = _.get(item, `children`);
        if (serviceList) {
          notice = notice.concat(notice, serviceList);
        }
      }
      this.$set(this, `infoList`, notice);
      this.loading = false;
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 39px;
  line-height: 39px;
  border-bottom: 1px solid #176ebb;
}
.top .topTit span {
  display: inline-block;
  width: 110px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  background-color: #176ebb;
}
.top .topLink {
  height: 39px;
  line-height: 39px;
  text-align: center;
}
.top .topLink .el-link {
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
}
.top .topLink:hover .el-link {
  color: #a32324;
}
.list {
  padding: 8px 10px;
}
.list .title {
  font-size: 16px;
}
.list .title .icon {
  float: left;
  padding: 4px 4px;
  // color: #176ebb;
}
.list .date {
  font-size: 16px;
}
.list:hover {
  cursor: pointer;
}
.list:hover .title {
  color: #a32324;
}
.list:hover .date {
  color: #a32324;
}
</style>