<template>
  <div class="mainView">
    <div class="structure">
      <div class="menuBox">
        <div class="menu" v-for="item in menus" :key="item.key">
          <el-button
            link
            type="info"
            :class="{ active: jumpType == item.key }"
            @click="selectMenu(item.key)"
            >{{ item.title }}</el-button
          >
        </div>
      </div>
      <div class="contentBox">
        <leaderModule v-if="jumpType == 'ld'" />
        <jgzzModule v-if="jumpType == 'zz'" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import leaderModule from "./leader.vue";
import jgzzModule from "./jgzz.vue";
let router = useRouter();
const jumpType = ref(router.currentRoute.value.query.type);
const menus = [
  {
    key: "ld",
    title: "领导之窗",
  },
  {
    key: "zz",
    title: "机构职能",
  },
];

function selectMenu(type) {
  jumpType.value = type;
}
</script>
<style scoped lang="less">
.structure {
  .menuBox {
    overflow: hidden;

    .menu {
      float: left;

      .el-button {
        color: #0062eb;
        display: block;
        font-size: 22px;
        padding-right: 15px;
        margin: 20px 0 10px 75px;
        border-right: 1px solid #cfcfcf;
      }

      .el-button.active {
        color: #bd1a2d;
      }
    }
  }

  .contentBox {
    margin: 30px 0;
  }
}
</style>
