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