给我一个element 仪表盘的代码
时间: 2024-03-18 10:41:34 浏览: 21
以下是一个简单的Element UI仪表盘代码示例:
```html
<template>
<div class="dashboard">
<el-row>
<el-col :span="12">
<el-card>
<div class="dashboard-item">
<div class="dashboard-item-title">Total Sales</div>
<div class="dashboard-item-value">$5000</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div class="dashboard-item">
<div class="dashboard-item-title">New Users</div>
<div class="dashboard-item-value">50</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-card>
<div class="dashboard-item">
<div class="dashboard-item-title">Orders</div>
<div class="dashboard-item-value">100</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div class="dashboard-item">
<div class="dashboard-item-title">Conversion Rate</div>
<div class="dashboard-item-value">5%</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Dashboard",
};
</script>
<style scoped>
.dashboard {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.dashboard-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.dashboard-item-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.dashboard-item-value {
font-size: 24px;
font-weight: bold;
}
</style>
```
这是一个简单的仪表盘布局,使用了Element UI的Grid系统和Card组件。在每个Card中,有一个包含标题和值的div元素,可以根据实际需求添加更多的元素和样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)