Skip to content

Commit df14656

Browse files
lin-xinlin-xin
committed
'新增dashboard,移除readme.vue'
1 parent 9601818 commit df14656

File tree

12 files changed

+271
-112
lines changed

12 files changed

+271
-112
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,18 @@
3737
| |-- Header.vue // 公共头部
3838
| |-- Home.vue // 公共路由入口
3939
| |-- Sidebar.vue // 公共左边栏
40+
| |-- Tags.vue // 页面切换标签组件
4041
| |-- page // 主要路由页面
42+
| |-- 403.vue
43+
| |-- 404.vue
4144
| |-- BaseCharts.vue // 基础图表
4245
| |-- BaseForm.vue // 基础表单
4346
| |-- BaseTable.vue // 基础表格
47+
| |-- DashBoard.vue // 系统首页
4448
| |-- DragList.vue // 拖拽列表组件
4549
| |-- Login.vue // 登录
4650
| |-- Markdown.vue // markdown组件
4751
| |-- Premission.vue // 权限测试组件
48-
| |-- Readme.vue // 自述组件
4952
| |-- Upload.vue // 图片上传
5053
| |-- VueEditor.vue // 富文本编辑器
5154
| |-- App.vue // 页面入口文件

‎README_EN.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,18 @@ The scheme as a set of multi-function background frame templates, suitable for m
3131
| |-- Header.vue // Header component
3232
| |-- Home.vue // Home component
3333
| |-- Sidebar.vue // Sidebar component
34+
| |-- Tags.vue
3435
| |-- page // Router page
36+
| |-- 403.vue
37+
| |-- 404.vue
3538
| |-- BaseCharts.vue // BaseCharts
3639
| |-- BaseForm.vue // BaseForm
3740
| |-- BaseTable.vue // BaseTable
3841
| |-- Login.vue // Login
42+
| |-- Dashboard.vue
3943
| |-- DragList.vue
4044
| |-- Markdown.vue // Markdown
4145
| |-- Premission.vue
42-
| |-- Readme.vue // Readme
4346
| |-- Upload.vue // Upload
4447
| |-- VueEditor.vue // VueEditor
4548
| |-- App.vue // Main component

‎src/components/common/Sidebar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
items: [
3333
{
3434
icon: 'el-icon-setting',
35-
index: 'readme',
36-
title: '自述文件'
35+
index: 'dashboard',
36+
title: '系统首页'
3737
},
3838
{
3939
icon: 'el-icon-tickets',

‎src/components/common/Tags.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,13 @@
4040
if (item) {
4141
delItem.path === this.$route.path && this.$router.push(item.path);
4242
}else{
43-
this.$router.push('/readme');
43+
this.$router.push('/');
4444
}
4545
},
4646
// 关闭全部标签
4747
closeAll(){
48-
console.log(1111);
4948
this.tagsList = [];
50-
this.$router.push('/readme');
49+
this.$router.push('/');
5150
},
5251
// 关闭其他标签
5352
closeOther(){

‎src/components/page/403.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="error-code">4<span>0</span>3</div>
44
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
55
<div class="error-handle">
6-
<router-link to="/readme">
6+
<router-link to="/">
77
<el-button type="primary" size="large">返回首页</el-button>
88
</router-link>
99
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

‎src/components/page/404.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="error-code">4<span>0</span>4</div>
44
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
55
<div class="error-handle">
6-
<router-link to="/readme">
6+
<router-link to="/">
77
<el-button type="primary" size="large">返回首页</el-button>
88
</router-link>
99
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

‎src/components/page/Dashboard.vue

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<template>
2+
<div>
3+
<el-row :gutter="20">
4+
<el-col :span="8">
5+
<el-row>
6+
<el-col>
7+
<el-card shadow="hover" class="mgb20">
8+
<div class="user-info">
9+
<img src="static/img/img.jpg" class="user-avator" alt="">
10+
<div class="user-info-cont">
11+
<div class="user-info-name">{{name}}</div>
12+
<div>{{role}}</div>
13+
</div>
14+
</div>
15+
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
16+
<div class="user-info-list">上次登录地点：<span>东莞</span></div>
17+
</el-card>
18+
<el-card shadow="hover">
19+
<div slot="header" class="clearfix">
20+
<span>语言详情</span>
21+
</div>
22+
Vue
23+
<el-progress :percentage="57.2" color="#42b983"></el-progress>
24+
JavaScript
25+
<el-progress :percentage="29.8" color="#f1e05a"></el-progress>
26+
CSS
27+
<el-progress :percentage="11.9"></el-progress>
28+
HTML
29+
<el-progress :percentage="1.1" color="#f56c6c"></el-progress>
30+
</el-card>
31+
</el-col>
32+
</el-row>
33+
</el-col>
34+
<el-col :span="16">
35+
<el-row :gutter="20" class="mgb20">
36+
<el-col :span="8">
37+
<el-card shadow="hover" :body-style="{padding: '0px'}">
38+
<div class="grid-content grid-con-1">
39+
<i class="el-icon-view grid-con-icon"></i>
40+
<div class="grid-cont-right">
41+
<div class="grid-num">1234</div>
42+
<div>用户访问量</div>
43+
</div>
44+
</div>
45+
</el-card>
46+
</el-col>
47+
<el-col :span="8">
48+
<el-card shadow="hover" :body-style="{padding: '0px'}">
49+
<div class="grid-content grid-con-2">
50+
<i class="el-icon-message grid-con-icon"></i>
51+
<div class="grid-cont-right">
52+
<div class="grid-num">321</div>
53+
<div>系统消息</div>
54+
</div>
55+
</div>
56+
</el-card>
57+
</el-col>
58+
<el-col :span="8">
59+
<el-card shadow="hover" :body-style="{padding: '0px'}">
60+
<div class="grid-content grid-con-3">
61+
<i class="el-icon-goods grid-con-icon"></i>
62+
<div class="grid-cont-right">
63+
<div class="grid-num">5000</div>
64+
<div>数量</div>
65+
</div>
66+
</div>
67+
</el-card>
68+
</el-col>
69+
</el-row>
70+
<el-card shadow="hover" :body-style="{ height: '304px'}">
71+
<div slot="header" class="clearfix">
72+
<span>待办事项</span>
73+
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
74+
</div>
75+
<el-table :data="todoList" :show-header="false" height="304" style="width: 100%;font-size:14px;">
76+
<el-table-column width="40">
77+
<template slot-scope="scope">
78+
<el-checkbox v-model="scope.row.status"></el-checkbox>
79+
</template>
80+
</el-table-column>
81+
<el-table-column>
82+
<template slot-scope="scope">
83+
<div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
84+
</template>
85+
</el-table-column>
86+
<el-table-column width="60">
87+
<template slot-scope="scope">
88+
<i class="el-icon-edit"></i>
89+
<i class="el-icon-delete"></i>
90+
</template>
91+
</el-table-column>
92+
</el-table>
93+
</el-card>
94+
95+
</el-col>
96+
</el-row>
97+
</div>
98+
</template>
99+
100+
<script>
101+
export default {
102+
data() {
103+
return {
104+
name: localStorage.getItem('ms_username'),
105+
todoList: [
106+
{
107+
title: '今天要修复100个bug',
108+
status: false,
109+
},
110+
{
111+
title: '今天要修复100个bug',
112+
status: false,
113+
},
114+
{
115+
title: '今天要写100行代码加几个bug吧',
116+
status: false,
117+
}, {
118+
title: '今天要修复100个bug',
119+
status: false,
120+
},
121+
{
122+
title: '今天要修复100个bug',
123+
status: true,
124+
},
125+
{
126+
title: '今天要写100行代码加几个bug吧',
127+
status: true,
128+
}
129+
]
130+
}
131+
},
132+
computed: {
133+
role() {
134+
return this.name === 'admin' ? '超级管理员' : '普通用户';
135+
}
136+
}
137+
}
138+
139+
</script>
140+
141+
142+
<style scoped>
143+
.el-row {
144+
margin-bottom: 20px;
145+
}
146+
147+
.grid-content {
148+
display: flex;
149+
align-items: center;
150+
height: 100px;
151+
}
152+
153+
.grid-cont-right {
154+
flex: 1;
155+
text-align: center;
156+
font-size: 12px;
157+
color: #999;
158+
}
159+
160+
.grid-num {
161+
font-size: 30px;
162+
font-weight: bold;
163+
}
164+
165+
.grid-con-icon {
166+
font-size: 50px;
167+
width: 100px;
168+
height: 100px;
169+
text-align: center;
170+
line-height: 100px;
171+
color: #fff;
172+
}
173+
174+
.grid-con-1 .grid-con-icon {
175+
background: rgb(45, 140, 240);
176+
}
177+
178+
.grid-con-1 .grid-num {
179+
color: rgb(45, 140, 240);
180+
}
181+
182+
.grid-con-2 .grid-con-icon {
183+
background: rgb(100, 213, 114);
184+
}
185+
186+
.grid-con-2 .grid-num {
187+
color: rgb(45, 140, 240);
188+
}
189+
190+
.grid-con-3 .grid-con-icon {
191+
background: rgb(242, 94, 67);
192+
}
193+
194+
.grid-con-3 .grid-num {
195+
color: rgb(242, 94, 67);
196+
}
197+
198+
.user-info {
199+
display: flex;
200+
align-items: center;
201+
padding-bottom: 20px;
202+
border-bottom: 2px solid #ccc;
203+
margin-bottom: 20px;
204+
}
205+
206+
.user-avator {
207+
width: 120px;
208+
height: 120px;
209+
border-radius: 50%;
210+
}
211+
212+
.user-info-cont {
213+
padding-left: 50px;
214+
flex: 1;
215+
font-size: 14px;
216+
color: #999;
217+
}
218+
219+
.user-info-cont div:first-child {
220+
font-size: 30px;
221+
color: #222;
222+
}
223+
224+
.user-info-list {
225+
font-size: 14px;
226+
color: #999;
227+
line-height: 25px;
228+
}
229+
230+
.user-info-list span {
231+
margin-left: 70px;
232+
}
233+
234+
.mgb20 {
235+
margin-bottom: 20px;
236+
}
237+
238+
.todo-item {
239+
font-size: 14px;
240+
}
241+
242+
.todo-item-del {
243+
text-decoration: line-through;
244+
color: #999;
245+
}
246+
247+
</style>

‎src/components/page/Login.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
this.$refs[formName].validate((valid) => {
4242
if (valid) {
4343
localStorage.setItem('ms_username',this.ruleForm.username);
44-
this.$router.push('/readme');
44+
this.$router.push('/');
4545
} else {
4646
console.log('error submit!!');
4747
return false;

0 commit comments

Comments
 (0)