web-test/src/views/market/marketlists.vue

<template>
  <div id="marketlists">
    <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.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
            </el-col>
          </el-col>
          <el-col :span="18" class="listInfo">
            <span v-if="display == 'list'">
              <el-col :span="24" class="listTop">
                <el-col :span="12" class="columnname">
                  <span>|</span> <span>{{ column_name }}</span>
                </el-col>
                <el-col :span="12" class="search">
                  <el-input placeholder="请输入名称" v-model="infoName" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="listDown">
                <el-button @click="display = 'detail'">详情</el-button>
              </el-col>
            </span>
            <span v-else>
              <el-button @click="display = 'list'">返回</el-button>
            </span>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'marketlists',
  props: {},
  components: {},
  data: function() {
    return {
      squareImage: require('@/assets/live/square_big.png'),
      // 菜单
      menuList: [{ name: '科技需求' }, { name: '技术成果' }, { name: '商务信息' }, { name: '专家服务' }],
      menuIndex: '0',
      menuColor: 'rgb(254, 149, 14)',
      // 右侧显示
      // list:列表，detail:详情
      display: 'list',
      // 右侧头部栏目
      column_name: '科技需求',
      // 搜索
      infoName: '',
    };
  },
  created() {
    this.searchColumn();
  },
  methods: {
    // 查询栏目
    async searchColumn() {
      if (this.type == 0) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 1) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 2) {
        this.changeMenu(this.columnName, this.type);
      } else if (this.type == 3) {
        this.changeMenu(this.columnName, this.type);
      }
      if (this.id) {
        this.display = 'detail';
      } else {
        this.display = 'list';
      }
    },
    // 选择菜单
    changeMenu(name, index) {
      this.display = 'list';
      this.column_name = name;
      this.menuIndex = index;
      this.menuColor = 'rgb(254, 149, 14)';
    },
  },
  computed: {
    ...mapState(['user']),
    type() {
      return this.$route.query.type;
    },
    columnName() {
      return this.$route.query.column_name;
    },
    id() {
      return this.$route.query.id;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  margin: 15px 0;
  .menu {
    height: 600px;
    overflow: hidden;
    padding: 15px 10px;
    background: no-repeat 100% 100%;
    background-image: url('~@/assets/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%;
    height: 600px;
    overflow: hidden;
    box-shadow: 0 0 10px #2d64b3;
    padding: 10px;
    .listTop {
      height: 49px;
      line-height: 49px;
      border-bottom: 1px solid #ccc;
      .columnname {
        span:first-child {
          color: #22529a;
          font-weight: bold;
          font-size: 25px;
        }
        span:last-child {
          color: #22529a;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>