初始化

frontend/packages/Layout/BigScreenHomeLayout/NavTop.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="nav-main">
+    <span
+      v-for="nav in navs"
+      :key="nav.id"
+      class="nav-span"
+      :class="{ 'nav-active': activeNav === nav.id }"
+    >
+      <a
+        class="nav-link"
+        @click="toggleNav(nav)"
+      >
+        <span class="nav-icon">
+          <!-- <i :class="['iconfont-bigscreen', nav.icon]" /> -->
+        </span>
+        {{ nav.name }}
+      </a>
+    </span>
+    <span class="nav-span nav-span-last" />
+  </div>
+</template>
+
+<script lang='ts'>
+export default {
+  name: 'NavMain',
+  components: {},
+  data () {
+    return {
+      nc: null,
+      activeNav: 0
+    }
+  },
+  props: {
+    navs: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    $route () {
+      const nav = this.navs.find(m => m.path === this.$route.path)
+      if (nav) {
+        this.activeNav = nav.id
+      }
+    }
+  },
+  mounted () {
+    const nav = this.navs.find(m => m.path === this.$route.path)
+    this.activeNav = nav ? nav.id : 0
+  },
+  beforeDestroy () {
+  },
+  methods: {
+    toggleNav (nav) {
+      this.activeNav = nav.id
+      this.$emit('change', nav)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-main {
+  z-index: 10;
+  display: flex;
+  top: 30px;
+  position: sticky;
+  width: 100%;
+  margin-top: 109px;
+  min-width: 1024px;
+  user-select: none;
+
+  .nav-span {
+    position: relative;
+    top: 1px;
+    // background-image: url('./images/line.png');
+    background-repeat: repeat-x;
+    background-position: 0 34px;
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      transition: color 0.2s;
+      text-decoration: none !important;
+      color: var(--bs-el-title);
+      width: auto;
+      min-width: 140px;
+      line-height: 40px;
+      font-size: 14px;
+      text-align: left;
+      cursor: pointer;
+      padding: 0 40px;
+
+      &.nav-active,
+      &:hover {
+        color: var(--bs-el-text) !important;
+      }
+    }
+
+    .nav-icon {
+      margin-right: 5px;
+    }
+
+    &.nav-active {
+      background-color: var(--bs-background-1);
+      &:after{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--bs-el-color-primary);
+      }
+      // background-image: url('./images/tab.png');
+      // background-size: 100% 100%;
+      // background-repeat: no-repeat;
+      // background-position: center bottom;
+      /* border-bottom: 1px solid var(--bs-background-1); */
+      /* background-color: var(--bs-background-1) */
+    }
+
+  }
+
+  .nav-span-last {
+    flex: 1;
+  }
+}
+</style>