fad-dashboard/frontend/packages/Layout/BigScreenHomeLayout/index.vue

<template>
  <div class="big-screen-home-wrap">
    <header class="big-screen-home-wrap-top">
      <div class="logo-title">
        <img
          class="logo"
          :src="logo"
        >
        <span>{{ title }}</span><span style="font-size: 18px;margin-left: 8px">2.x</span>
      </div>

      <div class="big-screen-nav-container">
        <Nav
          :navs="tabList"
          @change="changeTab"
        />
      </div>
      <a
        v-if="giteeSvg && giteeHref"
        class="fork-me-on-gitee"
        :href="giteeHref"
        target="_blank"
      >
        <img
          :src="giteeSvg"
          alt="Fork me on Gitee"
        >
      </a>
    </header>
    <div class="big-screen-router-view-wrap">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>
<script>
import Nav from './NavTop.vue'
// import Nav from './Nav.vue'
export default {
  name: 'BigScreenHome',
  components: {
    Nav
  },
  props: [],
  data () {
    return {
      // 和此处路由保持一致，将会激活tab，请按需更改
      giteeHref: '',
      giteeSvg: ''
    }
  },
  computed: {
    title () {
      if (this.$route.query.edit) return '大屏设计器'
      return window?.BS_CONFIG?.starter?.title ?? 'DataRoom大屏设计器'
    },
    logo () {
      return window?.BS_CONFIG?.starter?.logo ?? require('./images/logo.png')
    },
    tabList () {
      if (this.$route.query.edit) {
        return [
          {
            id: 1,
            name: '资源库',
            path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
            icon: 'icon-tupian'
          },
          {
            id: 2,
            name: '组件库',
            path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
            icon: 'icon-zujian1'
          }
        ]
      }
      return [
        {
          id: 0,
          name: '大屏管理',
          path: window?.BS_CONFIG?.routers?.pageListUrl || '/big-screen-list',
          icon: 'icon-icon-shujudaping'
        },
        // {
        //   id: 1,
        //   name: '模版管理',
        //   path: window?.BS_CONFIG?.routers?.templateListUrl || '/big-screen-template',
        //   icon: 'icon-xiangmuwenjianmobanku_mobanku'
        // },
        {
          id: 1,
          name: '资源库',
          path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
          icon: 'icon-tupian'
        },
        {
          id: 2,
          name: '组件库',
          path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
          icon: 'icon-zujian1'
        },
        {
          id: 3,
          name: '数据源管理',
          path:
            window?.BS_CONFIG?.routers?.dataSourceUrl ||
            '/big-screen-dataSource',
          icon: 'icon-datafull'
        },
        {
          id: 4,
          name: '数据集管理',
          path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet',
          icon: 'icon-data'
        },
        {
          id: 5,
          name: '地图数据管理',
          path: '/big-screen-map-data',
          icon: 'icon-data'
        }
      ]
    }
  },
  created () {
    document.title = this.title
  },
  mounted () {
    this.giteeHref = 'https://gitee.com/gcpaas/DataRoom'
    this.giteeSvg = 'https://gitee.com/gcpaas/DataRoom/widgets/widget_1.svg?color=007bff'
  },
  methods: {
    changeTab (tab) {
      if (this.$route.query.edit) {
        this.$router.push({
          path: tab.path,
          query: { edit: 1 }
        })
      } else {
        this.$router.push({
          path: tab.path
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.big-screen-home-wrap > * {
  box-sizing: border-box;
}
.big-screen-home-wrap {
  height: 100%;

  .big-screen-home-wrap-top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    background-image: url('./images/nav_img.png');
    background-size: 100% 150px;
    background-color: #0D0F12;
    background-position: center right;

    .logo-title {
      // 禁用可选
      user-select: none;
      font-size: 30px;
      position: absolute;
      z-index: 23;
      top: 40px;
      left: 40px;
      display: flex;
      align-items: center;
      color: var(--bs-el-color-primary);

      .logo {
        height: 30px;
      }

      span {
        font-family: Source Han Sans CN;
        font-size: 30px;
        font-weight: 700;
        padding-left: 8px;
        -webkit-background-clip: text;
        background-size: 400% 400%;
      }
    }
  }

  .big-screen-router-view-wrap {
    position: absolute;
    top: 150px;
    overflow: hidden;
    // padding-top: 16px;
    width: 100%;
    height: calc(100vh - 150px);
    background-color: var(--bs-background-1);
    box-sizing: border-box;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }
}

@keyframes text-animate {
  0% {
    background-position: 0 0;
    -webkit-background-clip: text;
  }

  50% {
    background-position: 0 0;
    -webkit-background-clip: text;
  }

  100% {
    background-position: 0 0;
    -webkit-background-clip: text;
  }
}
.fork-me-on-gitee{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  img{
    width: 120px;
    height: 120px;
  }
}
</style>