vue3:十二、图形看板- 基础准备+首行列表项展示

文章主要实现了看板页面的搭建；将看板页面加入左侧菜单；首行列表项的实现

一、效果展示

展示四个数据列表，四个列表颜色各不相同，列表左侧有颜色边线(同标题颜色、图标颜色一致)；展示的数字有一个从0到当前数据逐渐增长的一个动画效果

二、图形看板的准备工作

1、创建视图层

在src/views中创建图形看板页面，并在写入初始内容

2、更改路由

 初始的路由信息，指定的首页是home页面，但实际进入页面应该进入图形看板

如下图展示的是关于home的路由

应该将其替换为dashboard视图层

进入系统页面，可以直接进入图形看板

3、将图形看板加入左侧菜单

复制图标

查找看板对应图标，进行复制

修改左侧菜单信息 

找到存放左侧菜单的代码，将menu的值，写入name:图形看板，icon:复制的icon图标，path为路由中写入的数据/dashboard

效果

4、修改右侧背景底色

写入class

找到右侧内容部分，给其class值

设置背景色 

效果

由下图，可见内容的背景色已进行了设置

三、页面搭建

1、定义数据变量

这里暂时使用静态数据

首先在element-icon图标中，查找需要的图标放入数据项icon中，这里定义四个模块，展示标题，图标和数量

2、循环展示模块数据

3、基本样式搭建

视图层写入属性值

• 给外部一个总的div包裹
• 给其一个grid网格布局
• 让列表的内容左侧显示标题和数据，右侧显示图标

<template>
    <div class="main">
        <div class="line1 grid">
            <div v-for="(item, index) in item_data" :key="index" class="line1_item flex flex-between">
                <div class="line1_left flex flex-column">
                    <span class="line1_left_title" >{
  { item.title }}</span>
                    <span class="line1_left_count" >{
  { item.count }}</span>
                </div>
                <div class="line1_right">
                    <el-icon v-if="item.icon" :size="16">
                        <component :is="item.icon"></component>
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

定义全局样式

将grid网格布局写入全局main.css中

 写入基础样式

• 给整体一个边距
• 并使用网格布局一行等分四份，并且给边距为10px
• 给每个列表块背景色，圆角，内边距，阴影
• 设置文本的字体大小

<style>
/* 整体样式 */
.main {
    padding: 20px;
}

/* 第一行 */
.line1 {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px