Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
nizhengjia888
gin-vue-admin
提交
1c0e1412
G
gin-vue-admin
项目概览
nizhengjia888
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1c0e1412
编写于
9月 01, 2021
作者:
范
范庆磊
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改dashbord 样式
上级
2f8a3e35
变更
6
展开全部
隐藏空白更改
内联
并排
Showing
6 changed file
with
9393 addition
and
180 deletion
+9393
-180
web/package.json
web/package.json
+0
-1
web/src/assets/dashbord.png
web/src/assets/dashbord.png
+0
-0
web/src/view/dashboard/index.vue
web/src/view/dashboard/index.vue
+220
-178
web/src/view/dashboard/index1.vue
web/src/view/dashboard/index1.vue
+197
-0
web/vue.config.js
web/vue.config.js
+2
-1
web/yarn.lock
web/yarn.lock
+8974
-0
未找到文件。
web/package.json
浏览文件 @
1c0e1412
...
@@ -17,7 +17,6 @@
...
@@ -17,7 +17,6 @@
"path"
:
"^0.12.7"
,
"path"
:
"^0.12.7"
,
"qs"
:
"^6.8.0"
,
"qs"
:
"^6.8.0"
,
"quill"
:
"^1.3.7"
,
"quill"
:
"^1.3.7"
,
"sass"
:
"^1.34.1"
,
"screenfull"
:
"^5.0.2"
,
"screenfull"
:
"^5.0.2"
,
"script-ext-html-webpack-plugin"
:
"^2.1.4"
,
"script-ext-html-webpack-plugin"
:
"^2.1.4"
,
"spark-md5"
:
"^3.0.1"
,
"spark-md5"
:
"^3.0.1"
,
...
...
web/src/assets/dashbord.png
0 → 100644
浏览文件 @
1c0e1412
70.5 KB
web/src/view/dashboard/index.vue
浏览文件 @
1c0e1412
<
template
>
<
template
>
<div
class=
"big"
>
<div
class=
"page"
>
<el-row
class=
"card"
>
<div
class=
"mycard dashbord1"
>
<el-col
:xs=
"24"
:lg=
"16"
:md=
"16"
style=
"height:90px"
>
<div
class=
"dashbord1-left"
>
<div
class=
"car-left"
>
<div
class=
"dashbord1-left-title"
>
早安,管理员,请开始一天的工作吧
</div>
<el-row>
<div
class=
"dashbord1-left-dot"
>
今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。
</div>
<el-col
:xs=
"4"
:md=
"3"
:lg=
"3"
>
<div
class=
"dashbord1-left-rows"
>
<span
class=
"card-img"
>
<el-row
:gutter=
"20"
>
<img
:src=
"userInfo.headerImg"
alt=
""
>
<el-col
:span=
"8"
:xs=
"24"
:sm=
"8"
>
</span>
<div
class
>
</el-col>
<i
class=
"el-icon-sort icon"
></i>
今日流量 (1231231)
<el-col
:xs=
"20"
:lg=
"12"
:md=
"12"
>
</div>
<div
class=
"text"
>
</el-col>
<h4>
早安,管理员, 请开始您一天的工作吧!
</h4>
<el-col
:span=
"8"
:xs=
"24"
:sm=
"8"
>
<p
class=
"tips-text"
>
<div
class
>
<i
class=
"el-icon-sunny el-icon"
/>
<i
class=
"el-icon-s-custom icon"
></i>
总用户数 (24001)
<span>
今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。
</span>
</div>
</p>
</el-col>
</div>
<el-col
:span=
"8"
:xs=
"24"
:sm=
"8"
>
</el-col>
<div
class
>
</el-row>
<i
class=
"el-icon-s-comment icon"
></i>
好评率 (99%)
</div>
</el-col>
</el-row>
</div>
</div>
<img
src=
"@/assets/dashbord.png"
class=
"dashbord1-right"
alt
/>
</div>
</div>
</el-col>
<div
class=
"mycard dashbord2"
>
<el-col
:xs=
"24"
:lg=
"8"
:md=
"8"
>
<div>
<div
class=
"car-right"
>
<div
class=
"dashbord2-item"
>
<el-row>
使用教学:
<el-col
:span=
"8"
>
<a
<div
class=
"card-item"
>
style=
"color:#409EFF"
<span
class=
"flow"
><i
class=
"el-icon-s-grid"
/></span>
target=
"view_window"
<span>
今日流量
</span>
href=
"https://www.bilibili.com/video/BV1Rg411u7xH/"
<b>
13260
</b>
>
https://www.bilibili.com/video/BV1Rg411u7xH
</a>
</div>
</div>
</el-col>
<div
class=
"dashbord2-item"
>
<el-col
:span=
"8"
>
插件仓库:
<div
class=
"card-item"
>
<a
<span
class=
"user-number"
>
style=
"color:#409EFF"
<i
class=
"el-icon-s-custom"
/>
target=
"view_window"
</span>
href=
"https://github.com/flipped-aurora/gva-plugins"
<span>
总用户
</span>
>
https://github.com/flipped-aurora/gva-plugins
</a>
<b>
48286
</b>
</div>
</div>
</div>
</el-col>
</div>
<el-col
:span=
"8"
>
<div
class=
"card-item"
>
<div
class=
"mycard quick-entrance"
>
<span
class=
"feedback"
>
<el-row
:gutter=
"20"
>
<i
class=
"el-icon-star-on"
/>
<el-col
</span>
v-for=
"(card, key) in toolCards"
<span>
好评率
</span>
:key=
"key"
<b>
98%
</b>
:span=
"4"
</div>
:xs=
"8"
</el-col>
@
click=
"toTarget(card.name)"
</el-row>
class=
"quick-entrance-items"
>
<div
class=
"quick-entrance-item"
>
<div
class=
"quick-entrance-item-icon"
:style=
"
{ backgroundColor: card.bg }"
>
<i
:class=
"card.icon"
:style=
"
{ color: card.color }" />
</div>
<p>
{{
card
.
label
}}
</p>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card
shadow=
"hover"
>
<h2>
使用教学:
<a
style=
"color:#409EFF"
target=
"view_window"
href=
"https://www.bilibili.com/video/BV1Rg411u7xH/"
>
https://www.bilibili.com/video/BV1Rg411u7xH/
</a>
</h2>
<br>
<h2>
插件仓库:
<a
style=
"color:#409EFF"
target=
"view_window"
href=
"https://github.com/flipped-aurora/gva-plugins"
>
https://github.com/flipped-aurora/gva-plugins
</a>
</h2>
<div
/>
</el-card>
</el-col>
</el-row>
<div
class=
"shadow"
>
<el-row
:gutter=
"20"
>
<el-col
v-for=
"(card, key) in toolCards"
:key=
"key"
:span=
"4"
:xs=
"8"
@
click=
"toTarget(card.name)"
>
<el-card
shadow=
"hover"
class=
"grid-content"
>
<i
:class=
"card.icon"
:style=
"
{ color: card.color }" />
<p>
{{
card
.
label
}}
</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
export
default
{
name
:
'
Dashboard
'
,
data
()
{
components
:
{
return
{
toolCards
:
[
},
{
data
()
{
label
:
'
用户管理
'
,
return
{
icon
:
'
el-icon el-icon-monitor
'
,
toolCards
:
[
name
:
'
user
'
,
{
color
:
'
#ff9c6e
'
,
label
:
'
用户管理
'
,
bg
:
'
rgba(255, 156, 110,.3)
'
icon
:
'
el-icon el-icon-monitor
'
,
},
name
:
'
user
'
,
{
color
:
'
#ff9c6e
'
label
:
'
角色管理
'
,
},
icon
:
'
el-icon el-icon-setting
'
,
{
name
:
'
authority
'
,
label
:
'
角色管理
'
,
color
:
'
#69c0ff
'
,
icon
:
'
el-icon el-icon-setting
'
,
bg
:
'
rgba(105, 192, 255,.3)
'
name
:
'
authority
'
,
},
color
:
'
#69c0ff
'
{
},
label
:
'
菜单管理
'
,
{
icon
:
'
el-icon el-icon-menu
'
,
label
:
'
菜单管理
'
,
name
:
'
menu
'
,
icon
:
'
el-icon el-icon-menu
'
,
color
:
'
#b37feb
'
,
name
:
'
menu
'
,
bg
:
'
rgba(179, 127, 235,.3)
'
color
:
'
#b37feb
'
},
},
{
{
label
:
'
代码生成器
'
,
label
:
'
代码生成器
'
,
icon
:
'
el-icon-cpu
'
,
icon
:
'
el-icon el-icon-cpu
'
,
name
:
'
autoCode
'
,
name
:
'
autoCode
'
,
color
:
'
#ffd666
'
,
color
:
'
#ffd666
'
bg
:
'
rgba(255, 214, 102,.3)
'
},
},
{
{
label
:
'
表单生成器
'
,
label
:
'
表单生成器
'
,
icon
:
'
el-icon el-icon-document-checked
'
,
icon
:
'
el-icon-document-checked
'
,
name
:
'
formCreate
'
,
name
:
'
formCreate
'
,
color
:
'
#ff85c0
'
color
:
'
#ff85c0
'
,
},
bg
:
'
rgba(255, 133, 192,.3)
'
{
},
label
:
'
关于我们
'
,
{
icon
:
'
el-icon el-icon-user
'
,
label
:
'
关于我们
'
,
name
:
'
about
'
,
icon
:
'
el-icon-user
'
,
color
:
'
#5cdbd3
'
name
:
'
about
'
,
color
:
'
#5cdbd3
'
,
bg
:
'
rgba(92, 219, 211,.3)
'
}
]
}
}
]
}
}
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
])
},
methods
:
{
toTarget
(
name
)
{
this
.
$router
.
push
({
name
})
}
}
}
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.big
{
.page
{
margin
:
100px
0
0
0
;
background
:
#f8f8f8
;
padding-top
:
10px
;
padding
:
10px
;
background-color
:
rgb
(
243
,
243
,
243
);
.top
{
.mycard
{
width
:
100%
;
background-color
:
#fff
;
height
:
360px
;
border-radius
:
10px
;
margin-top
:
20px
;
height
:
auto
;
overflow
:
hidden
;
padding
:
10px
30px
;
.chart-container
{
overflow
:
hidden
;
position
:
relative
;
margin-bottom
:
20px
;
width
:
100%
;
height
:
100%
;
padding
:
20px
;
background-color
:
#fff
;
}
}
}
.dashbord1
{
.mid
{
height
:
150px
;
width
:
100%
;
display
:
flex
;
height
:
380px
;
align-items
:
center
;
.chart-wrapper
{
justify-content
:
space-between
;
height
:
340px
;
color
:
#777
;
background
:
#fff
;
&
-left
{
padding
:
16px
16px
0
;
&
-title
{
margin-bottom
:
32px
;
font-size
:
22px
;
color
:
#000
;
}
&
-dot
{
font-size
:
14px
;
margin-top
:
10px
;
}
&
-rows
{
margin-top
:
15px
;
width
:
600px
;
align-items
:
center
;
}
}
&
-right
{
height
:
600px
;
width
:
600px
;
margin-top
:
-20px
;
}
}
}
}
.dashbord2
{
.bottom
{
display
:
flex
;
width
:
100%
;
align-items
:
center
;
height
:
420px
;
justify-content
:
flex-start
;
// margin: 20px 0;
height
:
60px
;
.el-row
{
&
-item
{
margin-right
:
4px
!
important
;
line-height
:
25px
;
}
}
}
.chart-player
{
width
:
100%
;
.quick-entrance-items
{
height
:
270px
;
display
:
flex
;
padding
:
10px
;
align-items
:
center
;
background-color
:
#fff
;
justify-content
:
center
;
text-align
:
center
;
color
:
#333
;
.quick-entrance-item
{
height
:
auto
;
&
-icon
{
width
:
50px
;
height
:
50px
!
important
;
border-radius
:
8px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
i
{
font-size
:
24px
;
}
}
p
{
margin-top
:
10px
;
}
}
}
}
.iPlayer
{
}
width
:
100%
;
.icon
{
height
:
100%
;
font-size
:
22px
;
color
:
rgb
(
85
,
160
,
248
);
width
:
30px
;
height
:
30px
;
margin-right
:
10px
;
}
//小屏幕不显示右侧,将登陆框居中
@media
(
max-width
:
750px
)
{
.mycard
{
padding
:
20px
10px
!
important
;
.dashbord1
{
height
:
auto
;
&
-left
{
&
-title
{
font-size
:
20px
!
important
;
}
&
-rows
{
margin-top
:
15px
;
align-items
:
center
;
}
}
&
-right
{
display
:
none
;
}
}
.dashbord2
{
&
-item
{
line-height
:
20px
;
}
}
.icon
{
font-size
:
18px
;
}
}
}
}
}
}
</
style
>
</
style
>
\ No newline at end of file
web/src/view/dashboard/index1.vue
0 → 100644
浏览文件 @
1c0e1412
<
template
>
<div
class=
"big"
>
<el-row
class=
"card"
>
<el-col
:xs=
"24"
:lg=
"16"
:md=
"16"
style=
"height:90px"
>
<div
class=
"car-left"
>
<el-row>
<el-col
:xs=
"4"
:md=
"3"
:lg=
"3"
>
<span
class=
"card-img"
>
<img
:src=
"userInfo.headerImg"
alt=
""
>
</span>
</el-col>
<el-col
:xs=
"20"
:lg=
"12"
:md=
"12"
>
<div
class=
"text"
>
<h4>
早安,管理员, 请开始您一天的工作吧!
</h4>
<p
class=
"tips-text"
>
<i
class=
"el-icon-sunny el-icon"
/>
<span>
今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。
</span>
</p>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col
:xs=
"24"
:lg=
"8"
:md=
"8"
>
<div
class=
"car-right"
>
<el-row>
<el-col
:span=
"8"
>
<div
class=
"card-item"
>
<span
class=
"flow"
><i
class=
"el-icon-s-grid"
/></span>
<span>
今日流量
</span>
<b>
13260
</b>
</div>
</el-col>
<el-col
:span=
"8"
>
<div
class=
"card-item"
>
<span
class=
"user-number"
>
<i
class=
"el-icon-s-custom"
/>
</span>
<span>
总用户
</span>
<b>
48286
</b>
</div>
</el-col>
<el-col
:span=
"8"
>
<div
class=
"card-item"
>
<span
class=
"feedback"
>
<i
class=
"el-icon-star-on"
/>
</span>
<span>
好评率
</span>
<b>
98%
</b>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card
shadow=
"hover"
>
<h2>
使用教学:
<a
style=
"color:#409EFF"
target=
"view_window"
href=
"https://www.bilibili.com/video/BV1Rg411u7xH/"
>
https://www.bilibili.com/video/BV1Rg411u7xH/
</a>
</h2>
<br>
<h2>
插件仓库:
<a
style=
"color:#409EFF"
target=
"view_window"
href=
"https://github.com/flipped-aurora/gva-plugins"
>
https://github.com/flipped-aurora/gva-plugins
</a>
</h2>
<div
/>
</el-card>
</el-col>
</el-row>
<div
class=
"shadow"
>
<el-row
:gutter=
"20"
>
<el-col
v-for=
"(card, key) in toolCards"
:key=
"key"
:span=
"4"
:xs=
"8"
@
click=
"toTarget(card.name)"
>
<el-card
shadow=
"hover"
class=
"grid-content"
>
<i
:class=
"card.icon"
:style=
"
{ color: card.color }" />
<p>
{{
card
.
label
}}
</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
name
:
'
Dashboard
'
,
components
:
{
},
data
()
{
return
{
toolCards
:
[
{
label
:
'
用户管理
'
,
icon
:
'
el-icon el-icon-monitor
'
,
name
:
'
user
'
,
color
:
'
#ff9c6e
'
},
{
label
:
'
角色管理
'
,
icon
:
'
el-icon el-icon-setting
'
,
name
:
'
authority
'
,
color
:
'
#69c0ff
'
},
{
label
:
'
菜单管理
'
,
icon
:
'
el-icon el-icon-menu
'
,
name
:
'
menu
'
,
color
:
'
#b37feb
'
},
{
label
:
'
代码生成器
'
,
icon
:
'
el-icon el-icon-cpu
'
,
name
:
'
autoCode
'
,
color
:
'
#ffd666
'
},
{
label
:
'
表单生成器
'
,
icon
:
'
el-icon el-icon-document-checked
'
,
name
:
'
formCreate
'
,
color
:
'
#ff85c0
'
},
{
label
:
'
关于我们
'
,
icon
:
'
el-icon el-icon-user
'
,
name
:
'
about
'
,
color
:
'
#5cdbd3
'
}
]
}
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
])
},
methods
:
{
toTarget
(
name
)
{
this
.
$router
.
push
({
name
})
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.big
{
margin
:
100px
0
0
0
;
padding-top
:
10px
;
background-color
:
rgb
(
243
,
243
,
243
);
.top
{
width
:
100%
;
height
:
360px
;
margin-top
:
20px
;
overflow
:
hidden
;
.chart-container
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
padding
:
20px
;
background-color
:
#fff
;
}
}
.mid
{
width
:
100%
;
height
:
380px
;
.chart-wrapper
{
height
:
340px
;
background
:
#fff
;
padding
:
16px
16px
0
;
margin-bottom
:
32px
;
}
}
.bottom
{
width
:
100%
;
height
:
420px
;
// margin: 20px 0;
.el-row
{
margin-right
:
4px
!
important
;
}
.chart-player
{
width
:
100%
;
height
:
270px
;
padding
:
10px
;
background-color
:
#fff
;
}
.iPlayer
{
width
:
100%
;
height
:
100%
;
}
}
}
</
style
>
web/vue.config.js
浏览文件 @
1c0e1412
...
@@ -25,7 +25,8 @@ module.exports = {
...
@@ -25,7 +25,8 @@ module.exports = {
// 把key的路径代理到target位置
// 把key的路径代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy
// detail: https://cli.vuejs.org/config/#devserver-proxy
[
process
.
env
.
VUE_APP_BASE_API
]:
{
// 需要代理的路径 例如 '/api'
[
process
.
env
.
VUE_APP_BASE_API
]:
{
// 需要代理的路径 例如 '/api'
target
:
`
${
process
.
env
.
VUE_APP_BASE_PATH
}
:
${
process
.
env
.
VUE_APP_SERVER_PORT
}
/`
,
// 代理到 目标路径
// target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
target
:
`https://demo.gin-vue-admin.com/api/`
,
// 代理到 目标路径
changeOrigin
:
true
,
changeOrigin
:
true
,
pathRewrite
:
{
// 修改路径数据
pathRewrite
:
{
// 修改路径数据
[
'
^
'
+
process
.
env
.
VUE_APP_BASE_API
]:
''
// 举例 '^/api:""' 把路径中的/api字符串删除
[
'
^
'
+
process
.
env
.
VUE_APP_BASE_API
]:
''
// 举例 '^/api:""' 把路径中的/api字符串删除
...
...
web/yarn.lock
0 → 100644
浏览文件 @
1c0e1412
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录