Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
0438ab16
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
332
Star
18154
Fork
5505
代码
文件
提交
分支
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,发现更多精彩内容 >>
提交
0438ab16
编写于
11月 24, 2020
作者:
1
1319612909
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
手机端ui
上级
bf975af6
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
332 addition
and
195 deletion
+332
-195
web/src/App.vue
web/src/App.vue
+1
-0
web/src/style/basics.scss
web/src/style/basics.scss
+3
-0
web/src/style/main.scss
web/src/style/main.scss
+12
-4
web/src/style/mobile.scss
web/src/style/mobile.scss
+89
-0
web/src/view/dashboard/index.vue
web/src/view/dashboard/index.vue
+187
-162
web/src/view/example/form/form.vue
web/src/view/example/form/form.vue
+17
-17
web/src/view/layout/index.vue
web/src/view/layout/index.vue
+23
-12
未找到文件。
web/src/App.vue
浏览文件 @
0438ab16
...
...
@@ -15,6 +15,7 @@ export default {
// 引入初始化样式
@import
'@/style/main.scss'
;
@import
'@/style/base.scss'
;
@import
'@/style/mobile.scss'
;
#app
{
background
:
#eee
;
height
:
100vh
;
...
...
web/src/style/basics.scss
浏览文件 @
0438ab16
...
...
@@ -32,3 +32,6 @@ $color-table-tbody:#595959;
$color-table-thead
:
#262626
;
// dashboard
$height-car
:
68px
;
// mobile
$padding-xs
:
5px
;
$margin-xs
:
5px
;
web/src/style/main.scss
浏览文件 @
0438ab16
...
...
@@ -1204,6 +1204,14 @@ $mainHight: 100vh;
top
:
0
;
box-sizing
:
border-box
;
z-index
:
999
;
>
.el-row
{
padding
:
0
;
.el-col-lg-14
{
height
:
60px
;
}
}
}
...
...
@@ -1387,14 +1395,14 @@ $mainHight: 100vh;
.car-left
{
height
:
$height-car
;
width
:
70%
;
float
:
left
;
//
width: 70%;
//
float: left;
}
.car-right
{
height
:
$height-car
;
width
:
29%
;
float
:
left
;
//
width: 29%;
//
float: left;
.flow
,
.user-number
,
...
...
web/src/style/mobile.scss
0 → 100644
浏览文件 @
0438ab16
@import
'@/style/basics.scss'
;
@media
screen
and
(
min-width
:
320px
)
and
(
max-width
:
750px
){
.el-header
{
padding
:
0
$padding-xs
;
}
.layout-cont
{
.main-cont
{
.breadcrumb
{
padding
:
0
$padding-xs
;
}
}
}
.layout-cont
{
.right-box
{
margin-right
:
$margin-xs
;
}
}
.search-component
{
width
:
30px
;
}
.screenfull
{
width
:
26px
;
text-align
:
center
;
}
.el-main
{
.admin-box
{
margin-left
:
0
;
margin-right
:
0
;
}
.big.admin-box
{
padding
:
0
0
15px
0
;
}
.big
{
.bottom
{
.chart-player
{
height
:
auto
!
important
;
margin-bottom
:
15px
;
}
.todoapp
{
background-color
:
#fff
;
padding-bottom
:
10px
;
}
}
}
}
.card
.car-left
,
.card
.car-right
{
width
:
100%
;
height
:
100%
;
}
.card
{
padding-left
:
$padding-xs
;
padding-right
:
$padding-xs
;
}
.card
{
.text
{
width
:
100%
;
h4
{
white-space
:
break-spaces
;
}
}
}
.shadow
{
margin-left
:
5px
;
margin-right
:
5px
;
.grid-content
{
margin-bottom
:
10px
;
padding
:
0
;
}
}
.el-dialog
{
width
:
90%
;
}
.el-transfer
{
.el-transfer-panel
{
width
:
40%
;
display
:
inline-block
;
}
.el-transfer__buttons
{
padding
:
0
5px
;
display
:
inline-block
;
}
}
}
\ No newline at end of file
web/src/view/dashboard/index.vue
浏览文件 @
0438ab16
<
template
>
<div
class=
"big"
>
<div
class=
"card"
>
<div
class=
"car-left"
>
<div>
<span
class=
"card-img"
>
<img
:src=
"userInfo.headerImg"
alt=
""
>
</span>
<div
class=
"text"
><h4>
早安,管理员, 请开始您一天的工作吧!
</h4>
<p
class=
"tips-text"
>
<i
class=
"el-icon-sunny el-icon"
></i>
<span>
今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。
</span>
</p>
</div>
</div>
</div>
<div
class=
"car-right"
>
<el-row>
<el-col
:span=
"8"
><div
class=
"car-item"
>
<span
class=
"flow"
><i
class=
"el-icon-s-grid"
></i></span>
<span>
今日流量
</span>
<b>
13260
</b>
</div></el-col>
<el-col
:span=
"8"
><div
class=
"car-item"
>
<span
class=
"user-number"
>
<i
class=
"el-icon-s-custom "
></i>
</span>
<span>
总用户
</span>
<b>
48286
</b>
</div></el-col>
<el-col
:span=
"8"
><div
class=
"car-item "
>
<span
class=
"feedback"
>
<i
class=
"el-icon-star-on"
></i>
</span>
<span>
好评率
</span>
<b>
98%
</b>
</div></el-col>
</el-row>
</div>
</div>
<div
class=
"shadow"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"4"
v-for=
"(card,key) in toolCards"
:key=
"key"
@
click.native=
"toTarget(card.name)"
>
<el-card
shadow=
"hover"
class=
"grid-content"
>
<i
:class=
"card.icon"
:style=
"
{color:card.color}">
</i>
<p>
{{
card
.
label
}}
</p>
</el-card>
</el-col>
<div
class=
"big"
>
<el-row>
<div
class=
"card"
>
<el-col
:xs=
"24"
:lg=
"16"
:md=
"16"
>
<div
class=
"car-left"
>
<el-row>
<div>
<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"
></i>
<span>
今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。
</span>
</p>
</div>
</el-col>
</div>
</el-row>
</div>
<div
class=
"bottom"
>
<el-row
:gutter=
"32"
>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"12"
>
<div
class=
"chart-player"
>
<musicPlayer
/>
</div>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"12"
>
<div
class=
"chart-player"
>
<todo-list
/>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col
:xs=
"24"
:lg=
'8'
:md=
"8"
>
<div
class=
"car-right"
>
<el-row>
<el-col
:span=
"8"
><div
class=
"car-item"
>
<span
class=
"flow"
><i
class=
"el-icon-s-grid"
></i></span>
<span>
今日流量
</span>
<b>
13260
</b>
</div></el-col
>
<el-col
:span=
"8"
><div
class=
"car-item"
>
<span
class=
"user-number"
>
<i
class=
"el-icon-s-custom"
></i>
</span>
<span>
总用户
</span>
<b>
48286
</b>
</div></el-col
>
<el-col
:span=
"8"
><div
class=
"car-item"
>
<span
class=
"feedback"
>
<i
class=
"el-icon-star-on"
></i>
</span>
<span>
好评率
</span>
<b>
98%
</b>
</div></el-col
>
</el-row>
</div>
</el-col>
</div>
</el-row>
<div
class=
"shadow"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"4"
v-for=
"(card, key) in toolCards"
:key=
"key"
@
click.native=
"toTarget(card.name)"
:xs=
"8"
>
<el-card
shadow=
"hover"
class=
"grid-content"
>
<i
:class=
"card.icon"
:style=
"
{ color: card.color }">
</i>
<p>
{{
card
.
label
}}
</p>
</el-card>
</el-col>
</el-row>
</div>
<div
class=
"bottom"
>
<el-row
:gutter=
"32"
>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"12"
>
<div
class=
"chart-player"
>
<musicPlayer
/>
</div>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"12"
>
<div
class=
"chart-player"
>
<todo-list
/>
</div>
</el-col>
</el-row>
</div>
</div>
</
template
>
<
script
>
import
musicPlayer
from
"
./component/musicPlayer
"
import
TodoList
from
"
./component/todoList
"
import
{
mapGetters
}
from
'
vuex
'
import
musicPlayer
from
"
./component/musicPlayer
"
;
import
TodoList
from
"
./component/todoList
"
;
import
{
mapGetters
}
from
"
vuex
"
;
export
default
{
name
:
'
Dashboard
'
,
name
:
"
Dashboard
"
,
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
"
}
]
}
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
'
])
computed
:
{
...
mapGetters
(
"
user
"
,
[
"
userInfo
"
]),
},
components
:{
musicPlayer
,
//音乐播放器
TodoList
,
//TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
},
methods
:{
toTarget
(
name
){
this
.
$router
.
push
({
name
})
}
components
:
{
musicPlayer
,
//音乐播放器
TodoList
,
//TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
},
methods
:
{
toTarget
(
name
)
{
this
.
$router
.
push
({
name
});
},
}
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
.big
{
margin
:
100px
0
0
0
;
padding-top
:
0
;
background-color
:
rgb
(
243
,
243
,
243
);
padding-top
:
15px
;
.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
:
300px
;
// margin: 20px 0;
.el-row
{
margin-right
:
4px
!
important
;
}
.chart-player
{
width
:
100%
;
height
:
270px
;
padding
:
10px
;
background-color
:
#fff
;
}
}
.big
{
margin
:
100px
0
0
0
;
padding-top
:
0
;
background-color
:
rgb
(
243
,
243
,
243
);
padding-top
:
15px
;
.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
:
300px
;
// margin: 20px 0;
.el-row
{
margin-right
:
4px
!
important
;
}
.chart-player
{
width
:
100%
;
height
:
270px
;
padding
:
10px
;
background-color
:
#fff
;
}
}
}
</
style
>
web/src/view/example/form/form.vue
浏览文件 @
0438ab16
...
...
@@ -2,12 +2,12 @@
<div>
<el-form
:model=
"form"
label-width=
"80px"
ref=
"form"
>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动名称
</label></el-col>
<el-col
:span=
"10"
><el-input
v-model=
"form.name"
></el-input></el-col>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动名称
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
><el-input
v-model=
"form.name"
></el-input></el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动区域
</label></el-col>
<el-col
:span=
"10"
>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动区域
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
>
<el-select
placeholder=
"请选择活动区域"
v-model=
"form.region"
>
<el-option
label=
"上海"
value=
"shanghai"
></el-option>
<el-option
label=
"北京"
value=
"beijing"
></el-option>
...
...
@@ -15,8 +15,8 @@
</el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动时间
</label></el-col>
<el-col
:span=
"10"
>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动时间
</label></el-col>
<el-col
:span=
"10"
:xs=
"18"
>
<el-col
:span=
"11"
>
<el-date-picker
placeholder=
"选择日期"
style=
"width: 100%;"
type=
"date"
v-model=
"form.date1"
></el-date-picker>
</el-col>
...
...
@@ -27,12 +27,12 @@
</el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
即时配送
</label></el-col>
<el-col
:span=
"10"
><el-switch
v-model=
"form.delivery"
></el-switch></el-col>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
即时配送
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
><el-switch
v-model=
"form.delivery"
></el-switch></el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动性质
</label></el-col>
<el-col
:span=
"10"
>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动性质
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
>
<el-checkbox-group
v-model=
"form.type"
>
<el-checkbox
label=
"美食/餐厅线上活动"
name=
"type"
></el-checkbox>
<el-checkbox
label=
"地推活动"
name=
"type"
></el-checkbox>
...
...
@@ -42,8 +42,8 @@
</el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
特殊资源
</label></el-col>
<el-col
:span=
"10"
>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
特殊资源
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
>
<el-radio-group
v-model=
"form.resource"
>
<el-radio
label=
"线上品牌商赞助"
></el-radio>
<el-radio
label=
"线下场地免费"
></el-radio>
...
...
@@ -51,12 +51,12 @@
</el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动形式
</label></el-col>
<el-col
:span=
"10"
><el-input
type=
"textarea"
v-model=
"form.desc"
></el-input></el-col>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动形式
</label></el-col>
<el-col
:span=
"10"
:xs=
"14"
><el-input
type=
"textarea"
v-model=
"form.desc"
></el-input></el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
穿梭框
</label></el-col>
<el-col
:span=
"20"
>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
穿梭框
</label></el-col>
<el-col
:span=
"20"
:xs=
"24"
>
<el-transfer
:data=
"data"
:filter-method=
"filterMethod"
...
...
@@ -67,7 +67,7 @@
</el-col>
</el-row>
<el-row>
<el-col
:span=
"3"
><label
for=
""
>
活动时间
</label></el-col>
<el-col
:span=
"3"
:xs=
"6"
><label
for=
""
>
活动时间
</label></el-col>
<el-col
:span=
"10"
><el-input
v-model=
"form.name"
></el-input></el-col>
</el-row>
<el-row
type=
"flex"
justify=
"center"
>
...
...
web/src/view/layout/index.vue
浏览文件 @
0438ab16
...
...
@@ -16,18 +16,25 @@
:style=
"
{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
class="topfix"
>
<el-row>
<!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
<el-header
class=
"header-cont"
>
<div
@
click=
"totalCollapse"
class=
"menu-total"
>
<i
class=
"el-icon-s-unfold"
v-if=
"isCollapse"
></i>
<i
class=
"el-icon-s-fold"
v-else
></i>
</div>
<el-breadcrumb
class=
"breadcrumb"
separator-class=
"el-icon-arrow-right"
>
<el-breadcrumb-item
:key=
"item.path"
v-for=
"item in matched.slice(1,matched.length)"
>
{{
item
.
meta
.
title
}}
</el-breadcrumb-item>
</el-breadcrumb>
<div
class=
"fl-right right-box"
>
<el-col
:xs=
"2"
:lg=
"1"
:md=
"1"
:sm=
"1"
:xl=
"1"
>
<div
@
click=
"totalCollapse"
class=
"menu-total"
>
<i
class=
"el-icon-s-unfold"
v-if=
"isCollapse"
></i>
<i
class=
"el-icon-s-fold"
v-else
></i>
</div>
</el-col>
<el-col
:xs=
"10"
:lg=
"14"
:md=
'14'
:sm=
"14"
:xl=
"14"
>
<el-breadcrumb
class=
"breadcrumb"
separator-class=
"el-icon-arrow-right"
>
<el-breadcrumb-item
:key=
"item.path"
v-for=
"item in matched.slice(1,matched.length)"
>
{{
item
.
meta
.
title
}}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col
:xs=
"12"
:lg=
"9"
:md=
"9"
:sm=
"9"
:xl=
"9"
>
<div
class=
"fl-right right-box"
>
<Search
/>
<Screenfull
class=
"screenfull"
></Screenfull>
<el-dropdown>
...
...
@@ -48,7 +55,10 @@
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
</el-header>
</el-row>
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
<!--
:to="
{ path: item.path }" 暂时注释不用-->
...
...
@@ -172,8 +182,9 @@ export default {
}
}
</
script
>
<
style
lang=
"scss"
>
@import
'@/style/mobile.scss'
;
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录