web-live/src/views/techolchat/list.vue

<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="5" class="menu">
            <el-image :src="squareImage"></el-image>
            <span class="menuTitle">Menu</span>
            <el-col :span="24" class="menuList" v-for="(item, index) in menuList" :key="index">
              <p @click="changeMenu(item.component, index)" :style="`color:${menuIndex == index ? menuColor : ''};margin-left:${20 * (item.indent || 0)}px`">
                {{ item.name }}
              </p>
            </el-col>
          </el-col>
          <el-col :span="19" class="listInfo">
            <component :is="component" v-bind="params"></component>
            <!-- <keep-alive>
              <component :is="component" v-bind="params"></component>
            </keep-alive> -->
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list',
  props: {},
  components: {
    question: () => import('./list/question.vue'),
    work: () => import('./list/work.vue'),
    serve: () => import('./list/serve.vue'),
    result: () => import('./list/result.vue'),
  },
  data: function() {
    return {
      component: '',
      menuList: [
        { name: '调研调查', component: 'question', options: { useTab: false, useSearch: false, listModel: 5 } },
        { name: '行业研究', component: 'work', options: { useTab: false, useSearch: false, listModel: 6 } },
        // { name: '科技服务', options: { useTab: false, useSearch: false, listModel: 2 } },
        // { name: '会展服务', component: 'serve', options: { useTab: false, useSearch: false, listModel: 2 }, indent: 1 },
        // { name: '成果评价', component: 'result', options: { useTab: false, useSearch: false, listModel: 2 }, indent: 1 },
      ],
      squareImage: require('@p/live/square_big.png'),
      column_name: '',
      params: {},
      menuColor: 'rgb(254, 149, 14)',
    };
  },
  created() {},
  methods: {
    changeMenu(component, index) {
      if (!component) return;
      if (index !== this.menuIndex) this.$router.push({ path: './list', query: { index } });
      this.component = component;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    menuIndex() {
      const index = this.$route.query.index || 0;
      const obj = this.menuList[index];
      const params = {
        title: _.get(obj, 'name'),
        ..._.get(obj, 'options'),
      };
      this.$set(this, 'component', _.get(obj, 'component', 'achieve'));
      this.$set(this, 'params', params);
      return index;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  padding: 10px 0;
  .menu {
    height: 600px;
    overflow: hidden;
    padding: 15px 10px;
    background: no-repeat 100% 100%;
    background-image: url('~@p/live/menu_back.jpg');
    box-sizing: border-box;
    box-shadow: 0 0 10px #bbbaba;
    .menuTitle {
      font-size: 24px;
      color: #92959a;
      font-weight: bold;
      position: relative;
      top: -10px;
      left: 10px;
    }
    .menuList {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #2d64b3;
      p {
        font-weight: bold;
        font-size: 18px;
        color: #044b79;
      }
    }
    .menuList:hover {
      cursor: pointer;
    }
  }
  .listInfo {
    float: right;
    width: 78%;
    min-height: 600px;
    overflow: hidden;
    box-shadow: 0 0 10px #2d64b3;
    padding: 10px;
  }
}
</style>