可视化主页面的设置

小步快跑CCC

已于 2024-07-29 22:12:21 修改

阅读量226

点赞数 2

分类专栏： vue可视化大屏设计文章标签：前端 javascript html

于 2024-07-28 13:03:44 首次发布

本文链接：https://blog.csdn.net/2401_82773588/article/details/140749447

版权

vue可视化大屏设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.大屏主页

<template>
  <div class="client">
    <div class="header">
      <img src="../../assets/img/nav-img.png" alt="" style="width: 100%;height: 200px;">
      <div class="title">
        <p> WELCOME TO *********</p>
      </div>
      <navCanvas @change="handleChange"></navCanvas>
    </div>
    <div class="main">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script>
import navCanvas from "@/views/home/nav/navCanvas"
export default {
  name: "mainBody",
  components: {
    navCanvas
  },
  methods:{
    handleChange (nav) {
      this.$router.push({ path: nav.path })
    }
  }
}
</script>

<style lang="scss">
.client {
  height: 100%;
  .header {
    position: relative;
    .title {
      position: absolute;
      top: 60px;
      left: 20px;
      font-size: 50px;
      font-style: oblique;
      color: rgb(0, 186, 255);
      font-weight: bold;
      line-height: 35px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 200px);
  }
}
</style>