门前三包和趋势分析

“dzb”

2022-11-03 41dabb0db9619b8dbb8a311966e0b9920f67f7c8

 src/views/layout/components/Main/index.vue

@@ -1,22 +1,85 @@
<template>
  <el-main>
    <NavBar />
    <!-- <NavBar /> -->
    <div class="content">
      <router-view></router-view>
      <!-- 页面导航区域 -->
      <div class="page-nav" v-if="navFlag">
        <div class="nav-item" v-for="item in navList" :key="item.id">
          <div class="nav-title">{{item.title}}</div>
          <div class="nav-child" v-if="item.children && item.children.length!==0">
            <el-link :underline="false" class="child-item" v-for="child in item.children" @click="handleJump(child.link)" :key="child.id">{{child.label}}</el-link>
          </div>
        </div>
      </div>
      <router-view v-else></router-view>
      <!-- 底部区域 -->
      <MyFooter/>
      <!-- <MyFooter/> -->
    </div>
  </el-main>
</template>

<script>
import MyFooter from "../Footer"
// import MyFooter from "../Footer"
import NavBar from "../NavBar"
export default {
  name: "Main",
  components: {
    MyFooter,
    // MyFooter,
    NavBar
  },
  data() {
    return {
      navFlag: true,
      navList:[
        {
          id:1,
          title:'系统设置',
          children:[
            {
              id:2,
              label:'部门管理',
              link:'',
            },
            {
              id:3,
              label:'账户管理',
              link:'',
            },
            {
              id:4,
              label:'角色管理',
              link:'',
            },
            {
              id:5,
              label:'权限管理',
              link:'',
            },
            {
              id:6,
              label:'日志管理',
              link:'',
            },
          ]
        },
        {
          id:7,
          title:'运营管理'
        }
      ]
    }
  },
  watch: {
    '$route.path'(newPath, oldPath) {
      newPath === '/home' ? this.navFlag = true : this.navFlag = false
    }
  },
  methods:{
    handleJump(url){
      console.log(url)
      // 路由跳转
      // this.$router.push({path:url})
    }
  }
};
</script>
@@ -24,9 +87,48 @@
.el-main {
  min-width: 1024px;
  padding: 0;

  .content {
    background-color: #f0f2f5;
    padding: 20px 40px;
    padding: 11px;
    height: 100%;
    .page-nav{
      padding: 40px 100px;
      text-align: left;
      .nav-item{
        line-height: 60px;
        .nav-title{
          color: #4b9bb7;
        }
        .nav-child{
          display: flex;
          // justify-content: space-between;
          flex-wrap: wrap;
          .el-link{
            justify-content: flex-start;
            padding-left: 30px;
          }
          .child-item{
            width: 24%;
            text-align: left;
            margin-bottom: 22px;
            margin-right: 1%;
            border: 1px solid #17324c;
            color: #4b9bb7;
            position: relative;
            &::after{
              content: '';
              display: block;
              position: absolute;
              left: 15px;
              height: 8px;
              width: 8px;
              border-radius: 50%;
              background-color: #4b9bb7;
            }
          }
        }
      }
    }
  }
}
</style>