Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
nizhengjia888
gin-vue-admin
提交
c009d684
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
c009d684
编写于
6月 27, 2021
作者:
奇
奇淼(piexlmax
提交者:
GitHub
6月 27, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Revert "新增网页侧边栏颜色配置,新增网页主题色配置"
上级
1bd8e67a
变更
17
展开全部
显示空白变更内容
内联
并排
Showing
17 changed file
with
284 addition
and
9955 deletion
+284
-9955
.gitignore
.gitignore
+1
-0
README.md
README.md
+0
-1
web/src/components/themeChange/index.vue
web/src/components/themeChange/index.vue
+0
-151
web/src/core/element_lazy.js
web/src/core/element_lazy.js
+1
-3
web/src/core/gin-vue-admin.js
web/src/core/gin-vue-admin.js
+0
-1
web/src/store/index.js
web/src/store/index.js
+1
-3
web/src/store/module/app.js
web/src/store/module/app.js
+0
-33
web/src/style/basics.scss
web/src/style/basics.scss
+1
-8
web/src/style/element_visiable.scss
web/src/style/element_visiable.scss
+0
-15
web/src/style/main.scss
web/src/style/main.scss
+122
-2
web/src/style/side.scss
web/src/style/side.scss
+0
-67
web/src/view/layout/aside/historyComponent/history.vue
web/src/view/layout/aside/historyComponent/history.vue
+5
-20
web/src/view/layout/aside/index.vue
web/src/view/layout/aside/index.vue
+2
-13
web/src/view/layout/index.vue
web/src/view/layout/index.vue
+149
-13
web/src/view/layout/search/search.vue
web/src/view/layout/search/search.vue
+2
-7
web/src/view/layout/setting/index.vue
web/src/view/layout/setting/index.vue
+0
-108
web/yarn.lock
web/yarn.lock
+0
-9510
未找到文件。
.gitignore
浏览文件 @
c009d684
.idea/
/web/node_modules
/web/dist
.DS_Store
# local env files
...
...
README.md
浏览文件 @
c009d684
...
...
@@ -294,7 +294,6 @@ swag init
├─api (向后台发送ajax的封装层)
├─assets (静态文件)
├─components(组件)
├─core (gin-vue-admin组装文件)
├─router (前端路由)
├─store (vuex 状态管理仓)
├─style (通用样式文件)
...
...
web/src/components/themeChange/index.vue
已删除
100644 → 0
浏览文件 @
1bd8e67a
<
template
>
<el-color-picker
v-model=
"theme"
:predefine=
"['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class=
"theme-picker"
popper-class=
"theme-picker-dropdown"
/>
</
template
>
<
script
>
const
version
=
require
(
'
element-ui/package.json
'
).
version
// element-ui version from node_modules
const
ORIGINAL_THEME
=
'
#409EFF
'
// default color
export
default
{
data
()
{
return
{
chalk
:
''
,
// content of theme-chalk css
theme
:
''
}
},
computed
:
{
defaultTheme
()
{
return
this
.
$store
.
state
.
app
.
theme
}
},
watch
:
{
defaultTheme
:
{
handler
:
function
(
val
,
oldVal
)
{
this
.
theme
=
val
},
immediate
:
true
},
async
theme
(
val
)
{
const
oldVal
=
this
.
chalk
?
this
.
theme
:
ORIGINAL_THEME
if
(
typeof
val
!==
'
string
'
)
return
const
themeCluster
=
this
.
getThemeCluster
(
val
.
replace
(
'
#
'
,
''
))
const
originalCluster
=
this
.
getThemeCluster
(
oldVal
.
replace
(
'
#
'
,
''
))
const
$message
=
this
.
$message
({
message
:
'
修改主题色中
'
,
customClass
:
'
theme-message
'
,
type
:
'
success
'
,
duration
:
0
,
iconClass
:
'
el-icon-loading
'
})
const
getHandler
=
(
variable
,
id
)
=>
{
return
()
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
'
#
'
,
''
))
const
newStyle
=
this
.
updateStyle
(
this
[
variable
],
originalCluster
,
themeCluster
)
let
styleTag
=
document
.
getElementById
(
id
)
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
'
style
'
)
styleTag
.
setAttribute
(
'
id
'
,
id
)
document
.
head
.
appendChild
(
styleTag
)
}
styleTag
.
innerText
=
newStyle
}
}
if
(
!
this
.
chalk
)
{
const
url
=
`https://unpkg.com/element-ui@
${
version
}
/lib/theme-chalk/index.css`
await
this
.
getCSSString
(
url
,
'
chalk
'
)
}
const
chalkHandler
=
getHandler
(
'
chalk
'
,
'
chalk-style
'
)
chalkHandler
()
const
styles
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'
style
'
))
.
filter
(
style
=>
{
const
text
=
style
.
innerText
return
new
RegExp
(
oldVal
,
'
i
'
).
test
(
text
)
&&
!
/Chalk Variables/
.
test
(
text
)
})
styles
.
forEach
(
style
=>
{
const
{
innerText
}
=
style
if
(
typeof
innerText
!==
'
string
'
)
return
style
.
innerText
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
)
})
this
.
$emit
(
'
change
'
,
val
)
$message
.
close
()
}
},
methods
:
{
updateStyle
(
style
,
oldCluster
,
newCluster
)
{
let
newStyle
=
style
oldCluster
.
forEach
((
color
,
index
)
=>
{
newStyle
=
newStyle
.
replace
(
new
RegExp
(
color
,
'
ig
'
),
newCluster
[
index
])
})
return
newStyle
},
getCSSString
(
url
,
variable
)
{
return
new
Promise
(
resolve
=>
{
const
xhr
=
new
XMLHttpRequest
()
xhr
.
onreadystatechange
=
()
=>
{
if
(
xhr
.
readyState
===
4
&&
xhr
.
status
===
200
)
{
this
[
variable
]
=
xhr
.
responseText
.
replace
(
/@font-face{
[^
}
]
+}/
,
''
)
resolve
()
}
}
xhr
.
open
(
'
GET
'
,
url
)
xhr
.
send
()
})
},
getThemeCluster
(
theme
)
{
const
tintColor
=
(
color
,
tint
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
if
(
tint
===
0
)
{
// when primary color is in its rgb space
return
[
red
,
green
,
blue
].
join
(
'
,
'
)
}
else
{
red
+=
Math
.
round
(
tint
*
(
255
-
red
))
green
+=
Math
.
round
(
tint
*
(
255
-
green
))
blue
+=
Math
.
round
(
tint
*
(
255
-
blue
))
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
}
const
shadeColor
=
(
color
,
shade
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
red
=
Math
.
round
((
1
-
shade
)
*
red
)
green
=
Math
.
round
((
1
-
shade
)
*
green
)
blue
=
Math
.
round
((
1
-
shade
)
*
blue
)
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
const
clusters
=
[
theme
]
for
(
let
i
=
0
;
i
<=
9
;
i
++
)
{
clusters
.
push
(
tintColor
(
theme
,
Number
((
i
/
10
).
toFixed
(
2
))))
}
clusters
.
push
(
shadeColor
(
theme
,
0.1
))
return
clusters
}
}
}
</
script
>
<
style
>
.theme-message
,
.theme-picker-dropdown
{
z-index
:
99999
!important
;
}
.theme-picker
.el-color-picker__trigger
{
height
:
26px
!important
;
width
:
26px
!important
;
padding
:
2px
;
}
.theme-picker-dropdown
.el-color-dropdown__link-btn
{
display
:
none
;
}
</
style
>
web/src/core/element_lazy.js
浏览文件 @
c009d684
...
...
@@ -58,8 +58,7 @@ import {
Upload
,
Progress
,
MessageBox
,
Image
,
ColorPicker
Image
}
from
'
element-ui
'
Vue
.
use
(
Button
)
...
...
@@ -111,7 +110,6 @@ Vue.use(Progress)
Vue
.
use
(
Scrollbar
)
Vue
.
use
(
Loading
.
directive
)
Vue
.
use
(
Image
)
Vue
.
use
(
ColorPicker
)
Vue
.
prototype
.
$loading
=
Loading
.
service
Vue
.
prototype
.
$message
=
Message
...
...
web/src/core/gin-vue-admin.js
浏览文件 @
c009d684
...
...
@@ -11,7 +11,6 @@ import '../../node_modules/timeline-vuejs/dist/timeline-vuejs.css'
// 路由守卫
import
Bus
from
'
@/utils/bus
'
// 加载网站配置文件夹
import
'
../style/element_visiable.scss
'
// 导入主题色配置
import
config
from
'
./config
'
Vue
.
prototype
.
$GIN_VUE_ADMIN
=
config
Vue
.
use
(
Bus
)
...
...
web/src/store/index.js
浏览文件 @
c009d684
...
...
@@ -5,7 +5,6 @@ import VuexPersistence from 'vuex-persist'
import
{
user
}
from
'
@/store/module/user
'
import
{
router
}
from
'
@/store/module/router
'
import
{
dictionary
}
from
'
@/store/module/dictionary
'
import
{
app
}
from
'
@/store/module/app
'
Vue
.
use
(
Vuex
)
const
vuexLocal
=
new
VuexPersistence
({
...
...
@@ -16,8 +15,7 @@ export const store = new Vuex.Store({
modules
:
{
user
,
router
,
dictionary
,
app
dictionary
},
plugins
:
[
vuexLocal
.
plugin
]
})
web/src/store/module/app.js
已删除
100644 → 0
浏览文件 @
1bd8e67a
import
variables
from
'
@/style/element_visiable.scss
'
export
const
app
=
{
namespaced
:
true
,
state
:
{
theme
:
variables
.
colorPrimary
,
sideMode
:
'
dark
'
},
mutations
:
{
CHANGETHEME
:
(
state
,
value
)
=>
{
state
.
theme
=
value
},
CHANGESIDEMODE
:
(
state
)
=>
{
if
(
state
.
sideMode
===
'
dark
'
)
{
state
.
sideMode
=
'
light
'
}
else
{
state
.
sideMode
=
'
dark
'
}
}
},
actions
:
{
changeTheme
({
commit
},
data
)
{
commit
(
'
CHANGETHEME
'
,
data
)
},
changeSideMode
({
commit
})
{
commit
(
'
CHANGESIDEMODE
'
)
}
},
getters
:
{
getSIdeMode
(
state
)
{
return
state
.
sideMode
}
}
}
web/src/style/basics.scss
浏览文件 @
c009d684
// basice
$font-size
:
14px
;
$icon-size
:
17px
;
...
...
@@ -15,11 +14,10 @@ $width-mobile-aside:210px;
$color-aside
:
rgba
(
255
,
255
,
255
,.
9
);
$icon-arrow-size-aside
:
12px
;
$width-submenu-aside
:
55px
;
$bg-aside
:
#
fff
;
$bg-aside
:
#
191a23
;
$height-aside-tilte
:
64px
;
$height-aside-img
:
30px
;
$width-aside-img
:
30px
;
$aside-color
:
#000
;
// header
$height-header
:
60px
;
// nav-scroll
...
...
@@ -37,8 +35,3 @@ $height-car:68px;
// mobile
$padding-xs
:
5px
;
$margin-xs
:
5px
;
:export
{
bg_aside
:
$bg-aside
;
color_aside
:
$aside-color
}
\ No newline at end of file
web/src/style/element_visiable.scss
已删除
100644 → 0
浏览文件 @
1bd8e67a
/* 改变主题色变量 */
$--color-primary
:
#1890ff
;
/* 改变 icon 字体路径变量,必需 */
$--font-path
:
'~element-ui/lib/theme-chalk/fonts'
;
@import
"~element-ui/packages/theme-chalk/src/index"
;
:export
{
colorPrimary
:
$--color-primary
}
\ No newline at end of file
web/src/style/main.scss
浏览文件 @
c009d684
...
...
@@ -8,7 +8,7 @@
*/
@import
'@/style/basics.scss'
;
@import
"side.scss"
;
html
{
line-height
:
1
.15
;
/* 1 */
...
...
@@ -546,18 +546,138 @@ li {
top
:
0
;
}
.el-aside
{
-webkit-transition
:
width
.2s
;
transition
:
width
.2s
;
width
:
$width-aside
;
background-color
:
$bg-aside
;
height
:
100%
;
position
:
fixed
;
font-size
:
0
;
top
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
1001
;
overflow
:
hidden
;
.el-menu
{
border-right
:
none
;
}
.tilte
{
min-height
:
$height-aside-tilte
;
line-height
:
$height-aside-tilte
;
background
:
$bg-aside
;
text-align
:
center
;
.logoimg
{
width
:
$width-aside-img
;
height
:
$height-aside-img
;
vertical-align
:
middle
;
background
:
#fff
;
border-radius
:
50%
;
padding
:
3px
;
}
.tit-text
{
display
:
inline-block
;
color
:
#fff
;
font-weight
:
600
;
font-size
:
20px
;
vertical-align
:
middle
;
padding-left
:
10px
;
}
}
}
.aside
{
.el-menu-vertical
{
background-color
:
$bg-aside
;
}
.el-submenu
{
background-color
:
$bg-aside
;
.el-menu
{
.el-menu-item
{
background-color
:
#000408
;
height
:
44px
;
line-height
:
44px
;
}
.is-active
{
background-color
:
#1890ff
;
// 关闭三级菜单二级菜单样式
ul
{
border
:none
;
}
}
// 关闭三级菜单二级菜单样式
.is-active.is-opened
{
background-color
:
#191a23
;
ul
{
border
:none
;
}
}
}
}
.el-menu-item
:focus
,
.el-menu-item
:hover
{
background-color
:
transparent
;
}
.el-menu-item
:hover
i
,
.el-menu-item
:hover
span
{
color
:
#fff
;
}
.el-submenu__title
:hover
{
background-color
:
$bg-aside
;
}
.el-submenu__title
:hover
i
,
.el-submenu__title
:hover
span
{
color
:
#fff
;
}
.el-menu--inline
{
border-left
:
5px
solid
#2c3b41
;
}
}
.hideside
{
.aside
{
width
:
$width-hideside-aside
;
}
}
.mobile.hideside
{
.el-aside
{
-webkit-transition-duration
:
.2s
;
transition-duration
:
.2s
;
-webkit-transform
:
translate3d
(
-210px
,
0
,
0
);
transform
:
translate3d
(
-220px
,
0
,
0
);
}
}
.mobile
{
.el-aside
{
-webkit-transition
:
-
webkit-transform
.28s
;
transition
:
-
webkit-transform
.28s
;
transition
:
transform
.28s
;
transition
:
transform
.28s
,
-
webkit-transform
.28s
;
width
:
$width-mobile-aside
;
}
}
.main-cont.el-main
{
min-height
:
100%
;
-webkit-transition
:
margin-left
.28s
;
transition
:
margin-left
.28s
;
margin-left
:
$width-aside
;
position
:
relative
;
}
.hideside
{
.main-cont.el-main
{
//
margin-left: 54px;
margin-left
:
54px
;
}
}
...
...
web/src/style/side.scss
已删除
100644 → 0
浏览文件 @
1bd8e67a
@import
'@/style/basics.scss'
;
.el-aside
{
-webkit-transition
:
width
.2s
;
transition
:
width
.2s
;
width
:
$width-aside
;
background-color
:
$bg-aside
;
height
:
100%
;
position
:
fixed
;
font-size
:
0
;
top
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
1001
;
overflow
:
hidden
;
color
:
$aside-color
;
.el-menu
{
border-right
:
none
;
}
.tilte
{
min-height
:
$height-aside-tilte
;
line-height
:
$height-aside-tilte
;
text-align
:
center
;
.logoimg
{
width
:
$width-aside-img
;
height
:
$height-aside-img
;
vertical-align
:
middle
;
border-radius
:
50%
;
padding
:
3px
;
}
.tit-text
{
display
:
inline-block
;
font-weight
:
600
;
font-size
:
20px
;
vertical-align
:
middle
;
padding-left
:
10px
;
}
}
}
.hideside
{
.aside
{
width
:
$width-hideside-aside
;
}
}
.mobile.hideside
{
.el-aside
{
-webkit-transition-duration
:
.2s
;
transition-duration
:
.2s
;
-webkit-transform
:
translate3d
(
-210px
,
0
,
0
);
transform
:
translate3d
(
-220px
,
0
,
0
);
}
}
.mobile
{
.el-aside
{
-webkit-transition
:
-
webkit-transform
.28s
;
transition
:
-
webkit-transform
.28s
;
transition
:
transform
.28s
;
transition
:
transform
.28s
,
-
webkit-transform
.28s
;
margin-left
:
-54px
;
}
}
web/src/view/layout/aside/historyComponent/history.vue
浏览文件 @
c009d684
...
...
@@ -9,12 +9,11 @@
@
tab-remove=
"removeTab"
>
<el-tab-pane
v-for=
"
(item , index)
in historys"
v-for=
"
item
in historys"
:key=
"item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:label=
"item.meta.title"
:name=
"item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:tab=
"item"
:style=
"'z-index:'+index"
/>
</el-tabs>
...
...
@@ -24,7 +23,6 @@
<li
@
click=
"closeLeft"
>
关闭左侧
</li>
<li
@
click=
"closeRight"
>
关闭右侧
</li>
<li
@
click=
"closeOther"
>
关闭其他
</li>
<li
v-if=
"activeValue"
@
click=
"reload"
>
重新加载
</li>
</ul>
</div>
</
template
>
...
...
@@ -259,9 +257,6 @@ export default {
}
}
this
.
historys
.
splice
(
index
,
1
)
},
reload
()
{
this
.
$bus
.
$emit
(
'
reload
'
)
}
}
}
...
...
@@ -271,9 +266,8 @@ export default {
.contextmenu
{
width
:
100px
;
margin
:
0
;
border
:
1px
solid
rgba
(
160
,
156
,
156
,
0
.2
);
background
:
rgba
(
255
,
255
,
255
,
0
.8
);
backdrop-filter
:
blur
(
10px
);
border
:
1px
solid
#ccc
;
background
:
#fff
;
z-index
:
3000
;
position
:
absolute
;
list-style-type
:
none
;
...
...
@@ -281,23 +275,14 @@ export default {
border-radius
:
4px
;
font-size
:
14px
;
color
:
#333
;
box-shadow
:
1px
1px
15px
0
rgba
(
0
,
0
,
0
,
0
.1
);
box-shadow
:
2px
2px
3px
0
rgba
(
0
,
0
,
0
,
0
.2
);
}
.contextmenu
li
{
margin
:
0
;
padding
:
7px
16px
;
}
.contextmenu
li
:hover
{
color
:
#1890ff
;
background
:
#f2f2f2
;
cursor
:
pointer
;
}
.el-tabs__item
{
-webkit-mask
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==)
;
mask
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==)
;
-webkit-mask-size
:
100%
100%
;
&
.is-closable
:hover
{
background
:
#dee1e6
;
}
}
</
style
>
web/src/view/layout/aside/index.vue
浏览文件 @
c009d684
...
...
@@ -6,9 +6,9 @@
:collapse=
"isCollapse"
:collapse-transition=
"true"
:default-active=
"active"
active-text-color=
"#fff"
class=
"el-menu-vertical"
:background-color=
"$store.getters['app/getSIdeMode'] === 'light' ? '#fff' : '#111'"
text-color=
"#777"
text-color=
"rgb(191, 203, 217)"
unique-opened
@
select=
"selectMenuItem"
>
...
...
@@ -95,15 +95,4 @@ export default {
vertical-align
:
middle
;
}
}
.el-menu-item
{
background-color
:
#fff
;
height
:
44px
;
line-height
:
44px
;
color
:
#000
;
&
.is-active
{
background-color
:
#e6f7ff
;
border-right
:
4px
solid
;
color
:
#1890ff
;
}
}
</
style
>
web/src/view/layout/index.vue
浏览文件 @
c009d684
...
...
@@ -3,7 +3,7 @@
<el-container
:class=
"[isSider?'openside':'hideside',isMobile ? 'mobile': '']"
>
<el-row
:class=
"[isShadowBg?'shadowBg':'']"
@
click.native=
"changeShadow()"
/>
<el-aside
class=
"main-cont main-left"
>
<div
class=
"tilte"
:class=
"$store.getters['app/getSIdeMode']"
>
<div
class=
"tilte"
>
<img
alt
class=
"logoimg"
:src=
"$GIN_VUE_ADMIN.appLogo"
>
<h2
v-if=
"isSider"
class=
"tit-text"
>
{{
$GIN_VUE_ADMIN
.
appName
}}
</h2>
</div>
...
...
@@ -74,9 +74,9 @@
<router-view
v-if=
"!$route.meta.keepAlive && reloadFlag"
v-loading=
"loadingFlag"
element-loading-text=
"正在加载中"
class=
"admin-box"
/>
</transition>
<BottomInfo
/>
<setting
/>
</el-main>
</el-container>
</el-container>
</
template
>
...
...
@@ -88,7 +88,6 @@ import Search from '@/view/layout/search/search'
import
BottomInfo
from
'
@/view/layout/bottomInfo/bottomInfo
'
import
{
mapGetters
,
mapActions
}
from
'
vuex
'
import
CustomPic
from
'
@/components/customPic
'
import
Setting
from
'
./setting
'
export
default
{
name
:
'
Layout
'
,
components
:
{
...
...
@@ -97,8 +96,7 @@ export default {
Screenfull
,
Search
,
BottomInfo
,
CustomPic
,
Setting
CustomPic
},
data
()
{
return
{
...
...
@@ -195,12 +193,150 @@ export default {
<
style
lang=
"scss"
>
@import
'@/style/mobile.scss'
;
.dark
{
background-color
:
#111
;
color
:
#fff
;
}
.light
{
background-color
:
#fff
;
color
:
#000
;
}
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
// min-width: 100px;
// }
// .topfix {
// position: fixed;
// top: 0;
// box-sizing: border-box;
// z-index: 999;
// }
// .admin-box {
// min-height: calc(100vh - 240px);
// background-color: rgb(255, 255, 255);
// margin-top: 100px;
// }
// .el-scrollbar__wrap {
// padding-bottom: 17px;
// }
// .layout-cont {
// .right-box {
// text-align: center;
// vertical-align: middle;
// img {
// vertical-align: middle;
// border: 1px solid #ccc;
// border-radius: 6px;
// }
// }
// .header-cont {
// height: $headerHigh !important;
// background: #fff;
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// line-height: $headerHigh;
// }
// .main-cont {
// .breadcrumb {
// line-height: 48px;
// display: inline-block;
// padding: 0 24px;
// // padding: 6px;
// // border-bottom: 1px solid #eee;
// }
// &.el-main {
// overflow: auto;
// background: #fff;
// // padding: 0px 10px;
// // background: #fff;
// }
// height: $mainHight !important;
// overflow: visible;
// position: relative;
// .menu-total {
// // z-index: 5;
// // position: absolute;
// // top: 10px;
// // right: -35px;
// margin-left: -10px;
// float: left;
// margin-top: 10px;
// width: 30px;
// height: 30px;
// line-height: 30px;
// font-size: 30px;
// // border: 0 solid #ffffff;
// // border-radius: 50%;
// // background: #fff;
// }
// .aside {
// overflow: auto;
// // background: #fff;
// &::-webkit-scrollbar {
// display: none;
// }
// }
// .el-menu-vertical {
// height: calc(100vh - 64px) !important;
// visibility: auto;
// &:not(.el-menu--collapse) {
// width: 220px;
// }
// }
// .el-menu--collapse {
// width: 54px;
// li {
// .el-tooltip,
// .el-submenu__title {
// padding: 0px 15px !important;
// }
// }
// }
// &::-webkit-scrollbar {
// display: none;
// }
// &.main-left {
// width: auto !important;
// }
// &.main-right {
// .admin-title {
// float: left;
// font-size: 16px;
// vertical-align: middle;
// margin-left: 20px;
// img {
// vertical-align: middle;
// }
// &.collapse {
// width: 53px;
// }
// }
// }
// }
// }
// .tilte {
// background: #001529;
// min-height: 64px;
// line-height: 64px;
// background: #002140;
// text-align: center;
// .logoimg {
// width: 30px;
// height: 30px;
// vertical-align: middle;
// background: #fff;
// border-radius: 50%;
// padding: 3px;
// }
// .tit-text {
// display: inline-block;
// color: #fff;
// font-weight: 600;
// font-size: 20px;
// vertical-align: middle;
// }
// }
// .screenfull {
// display: inline-block;
// }
// .header-avatar{
// display: flex;
// justify-content: center;
// align-items: center;
// }
</
style
>
web/src/view/layout/search/search.vue
浏览文件 @
c009d684
...
...
@@ -19,8 +19,6 @@
</el-select>
</div>
</transition>
<div
:style=
"
{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
class="user-box"
...
...
@@ -38,13 +36,11 @@ import { mapGetters } from 'vuex'
export
default
{
name
:
'
SearchComponent
'
,
data
()
{
return
{
value
:
''
,
show
:
false
,
reload
:
false
,
color
:
'
#fff
'
reload
:
false
}
},
computed
:
{
...
...
@@ -70,8 +66,7 @@ export default {
setTimeout
(()
=>
{
this
.
reload
=
false
},
500
)
},
}
}
}
</
script
>
...
...
web/src/view/layout/setting/index.vue
已删除
100644 → 0
浏览文件 @
1bd8e67a
<
template
>
<div>
<el-button
type=
"primary"
class=
"drawer-container"
icon=
"el-icon-setting"
@
click=
"showSettingDrawar"
/>
<el-drawer
title=
"系统配置"
:visible.sync=
"drawer"
:direction=
"direction"
:before-close=
"handleClose"
>
<div
class=
"setting_body"
>
<div
class=
"setting_card"
>
<div
class=
"setting_title"
>
侧边栏主题
</div>
<div
class=
"setting_content"
>
<div
class=
"item"
@
click=
"chageMode('light')"
>
<i
v-if=
"sideMode === 'light'"
class=
"el-icon-check check"
/>
<img
src=
"https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"
>
</div>
<div
class=
"item"
@
click=
"chageMode('dark')"
>
<i
v-if=
"sideMode === 'dark'"
class=
"el-icon-check check"
/>
<img
src=
"https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"
>
</div>
</div>
</div>
<div
class=
"setting_card"
>
<div
class=
"setting_title"
>
主题色
</div>
<div
class=
""
>
<theme-change
style=
"width: 30px;height: 30px;margin-top: 20px"
@
change=
"themeChange"
/>
</div>
</div>
</div>
</el-drawer>
</div>
</
template
>
<
script
>
import
themeChange
from
'
@/components/themeChange
'
export
default
{
data
()
{
return
{
drawer
:
false
,
direction
:
'
rtl
'
,
sideMode
:
'
dark
'
}
},
components
:
{
themeChange
},
methods
:
{
handleClose
()
{
this
.
drawer
=
false
},
showSettingDrawar
()
{
this
.
drawer
=
true
},
chageMode
(
e
)
{
this
.
sideMode
=
e
this
.
$store
.
dispatch
(
'
app/changeSideMode
'
)
},
themeChange
(
val
)
{
this
.
$store
.
dispatch
(
'
app/changeTheme
'
,
val
)
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.drawer-container
{
position
:
absolute
;
right
:
0
;
top
:
20%
;
height
:
40px
;
width
:
40px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
z-index
:
999
;
color
:
#fff
;
border-radius
:
4px
0
0
4px
;
cursor
:
pointer
;
-webkit-box-shadow
:
inset
0
0
6px
rgb
(
0
,
0
,
0
,
10%
);
}
.setting_body
{
padding
:
20px
;
.setting_card
{
margin-bottom
:
20px
;
}
.setting_content
{
margin-top
:
20px
;
display
:
flex
;
.item
{
position
:
relative
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
.check
{
position
:
absolute
;
font-size
:
20px
;
color
:
#00afff
;
}
img
{
margin-right
:
20px
;
}
}
}
}
</
style
>
web/yarn.lock
已删除
100644 → 0
浏览文件 @
1bd8e67a
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录