skl-www/src/views/pages.vue

<template>
  <div class="details">
    <breadcrumb ref="breadcrumb"></breadcrumb>
    <div class="detailsHome" v-if="pagesItem">
      <div class="listBoxLeft">
        <letnav ref="letnav" :menuTree="menu"></letnav>
      </div>
      <div class="listBoxRight">
        <h2 class="title">{{ pagesItem.title }}</h2>
        <!-- <span class="describe">{{ pagesItem.describe }}</span> -->
        <span class="date">发表时间: {{ pagesItem.date | dates }}<span class="visit">访问量: {{ pagesItem.visit }}</span></span>
        <div class="content" v-html="pagesItem.content"></div>
      </div>
    </div>
    <el-divider class="divider" v-else>暂无数据</el-divider>
  </div>
</template>

<script>
import moment from 'moment';
import letnav from '../components/leftmenu/index.vue';
import breadcrumb from '../components/breadcrumb/index.vue';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'pagesHome',
  components: {
    letnav,
    breadcrumb
  },
  computed: {
    ...mapState(['pagesItem', 'menusall'])
  },
  data() {
    return {
      id: '',
      menu: {}
    };
  },
  async mounted() {
    await this.menusQueryAll();
    this.code = this.$route.params.code;
    await this.pagesFetch({ bind: this.code });
    // 顶级菜单参数
    this.parentCode = this.$route.query.parentCode;
    // 获取一例菜单
    this.menu = this.$setChildrenSession({ menus: this.menusall, iscode: this.parentCode });
    // 控制左侧菜单当前选项
    this.$refs.letnav.setIndex();
  },
  methods: {
    ...mapActions(['pagesFetch', 'menusQueryAll'])
  },
  filters: {
    dates(e) {
      return moment(e).format('YYYY-MM-DD');
    }
  }
};
</script>
<style lang="scss" scoped>
.details {
  width: 60%;
  margin: 0 auto;
}
.detailsHome {
  width: 100%;
  display: flex;
  margin-bottom: 5%;
  .listBoxLeft {
    width: 20%;
    margin-top: 3%;
    margin-right: 5%;
  }
  .listBoxRight {
    width: 75%;
    margin-top: 3%;
    .thumbnail {
      width: 100%;
    }
    .title, .describe, .content, .date {
      width: 100%;
      text-align: center;
    }
    .describe, .date {
      display: block;
      color: #999;
      line-height: 2em;
      .visit {
        margin-left: 30px;
      }
    }
    .content {
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
      iframe {
        width: 70%;
        height: 500px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>