vue构建dashboard

最新推荐文章于 2025-05-25 09:45:51 发布

IcedOtaku

最新推荐文章于 2025-05-25 09:45:51 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue dashboard html css

本文链接：https://blog.csdn.net/IcedOtaku/article/details/98989414

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Vue来构建一个dashboard，通过三个步骤实现组件的水平和垂直划分，确保div铺满整个屏幕。首先，通过调整div布局解决边缘空白问题；接着，更新App.vue和index.html文件使得三个div完全占据屏幕；最后，进一步将组件垂直分为两层。完整源码可在GitHub上找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

step1 水平划分组件为三层

<template>
  <div>
    <div class="upPart">
      a
    </div>
    <div class="centerPart">
      b
    </div>
    <div class="downPart">
      c
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
.upPart{
  background-color:blanchedalmond;
}
.centerPart{
  background-color: aqua;
}
.downPart{
  background-color: blueviolet;
}
</style>

写了三个div会发现边缘还是有空白的，在index.html文件里加入如下代码即可解决
在这里插入图片描述

<style>
    html,body{
        margin: 0;
        padding: 0;
    }
</style>

效果如下
在这里插入图片描述

step2 使三个div铺满整个屏幕

<template>
  <div class="mainPage">
    <div class="upPart">
      a
    </div>
    <div class="centerPart">
      b
    </div>
    <div class="downPart">
      c
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
html,body{
  height: 100%;
  width: 100%;
}
.mainPage{
  height: 100%;
  width: 100%;
}
.upPart{
  height: 30%;
  background-color:blanchedalmond;
}
.centerPart{
  height: 30%;
  background-color: aqua;
}
.downPart{
  height: 40%;
  background-color: blueviolet;
}
</style>

App.vue添加

#app{
  height: 100%;
  width: 100%;
}

index.html添加

html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

效果如下
在这里插入图片描述

step3垂直划分组件为两层

<template>
  <div class="mainPage">
    <div class="upPart">
      a
    </div>
    <div class="centerPart">
      b
    </div>
    <div class="downPart">
      <div class="downPartLeft">
        c
      </div>
      <div class="downPartRight">
        d
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
html,body{
  height: 100%;
  width: 100%;
}
.mainPage{
  height: 100%;
  width: 100%;
}
.upPart{
  height: 30%;
  background-color:blanchedalmond;
}
.centerPart{
  height: 30%;
  background-color: aqua;
}
.downPart{
  height: 40%;
  background-color: blueviolet;
}
.downPartLeft{
  width: 40%;
  /* 高度设置为父组件downPart的高度 */
  height: 40%;
  position: absolute;
  display: inline-block;
}
.downPartRight{
  width: 60%;
  height: 40%;
  background-color: coral;
  /* position设置为absolu可以进行left right top bottom等设置 */
  position: absolute;
  /* 重要 设置右边离屏幕右边距离为0 */
  right: 0%;
  display: inline-block;
}
</style>