jiaoyixt/src/layout/dashboard/DashboardLayout.vue

<template>
  <div class="wrapper">
    <side-bar :backgroundColor="'#333D54'">
      <el-menu
        class="el-menu-vertical-demo"
        :default-openeds="['1', '2']"
        background-color="#333E54"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-medal-1"></i>
            <span>动量现货</span>
          </template>
          <el-menu-item index="1-1" @click="to('/')">概况</el-menu-item>
          <el-menu-item index="1-2" @click="to('/account/0')"
            >账号管理</el-menu-item
          >
          <el-menu-item index="1-3" @click="to('/robot/0')"
            >机器人管理</el-menu-item
          >
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-medal"></i>
            <span>动量趋势</span>
          </template>
          <el-menu-item index="2-1" @click="to('/')">概况</el-menu-item>
          <el-menu-item index="2-2" @click="to('/account/1')">
            账号管理</el-menu-item
          >
          <el-menu-item index="2-3" @click="to('/robot/1')"
            >机器人管理</el-menu-item
          >
        </el-submenu>
        <el-menu-item index="3" @click="to('/reCheck')">
          <i class="el-icon-bicycle"></i>
          <span slot="title">回测</span>
        </el-menu-item>
        <el-menu-item index="4" @click="to('/winRate')">
          <i class="el-icon-aim"></i>
          <span slot="title">短线胜率测试</span>
        </el-menu-item>
        <el-menu-item index="5" @click="to('/capital')">
          <i class="el-icon-trophy"></i>
          <span slot="title">总资金管理</span>
        </el-menu-item>
      </el-menu>
      <!-- <template slot="links">
        <span @click="test = !test" class="title">动量现货</span>

        <sidebar-link
          to="/robot"
          :name="'策略Robot'"
          icon="tim-icons icon-user-run"
        />
        <sidebar-link
          to="/account"
          :name="'账号管理'"
          icon="tim-icons icon-single-02"
        />
        <sidebar-link
          to="/reCheck"
          :name="'回测'"
          icon="tim-icons icon-single-02"
        />
        <sidebar-link
          to="/winRate"
          :name="'短线胜率测试'"
          icon="tim-icons icon-single-02"
        />
        <sidebar-link
          to="/capital"
          :name="'总资金管理'"
          icon="tim-icons icon-single-02"
        />
      </template> -->
    </side-bar>
    <div class="main-panel">
      <top-navbar></top-navbar>

      <dashboard-content @click.native="toggleSidebar"> </dashboard-content>

      <content-footer></content-footer>
    </div>
  </div>
</template>
<style lang="scss"></style>
<script>
import TopNavbar from "./TopNavbar.vue";
import ContentFooter from "./ContentFooter.vue";
import DashboardContent from "./Content.vue";
import MobileMenu from "./MobileMenu";
import Collapse from "../../components/Collapse";
export default {
  components: {
    TopNavbar,
    ContentFooter,
    DashboardContent,
    MobileMenu,
    Collapse
  },
  data() {
    return { test: false };
  },
  methods: {
    toggleSidebar() {
      if (this.$sidebar.showSidebar) {
        this.$sidebar.displaySidebar(false);
      }
    },
    to(path) {
      if (this.$route.path != path.toLowerCase()) this.$router.push({ path });
    }
  }
};
</script>

<style>
.off-canvas-sidebar {
  background: linear-gradient(0deg, #333 0%, #333 100%) !important;
}
.title {
  cursor: pointer;
  margin-left: 20px;
}
.el-menu {
  border-right: none !important;
}
</style>