Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-frontM
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
云深项目组
beyond-clouds-frontM
Commits
d37437c6
Commit
d37437c6
authored
Mar 13, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成导航栏组件
parent
76206a1b
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
105 additions
and
0 deletions
+105
-0
components/moblie/nav.vue
+105
-0
No files found.
components/moblie/nav.vue
0 → 100644
View file @
d37437c6
<
template
>
<yun-div
:height-v=
"76"
bg-color-v=
"#fff"
:border-v=
"[1,'solid','#EFEFEF','bottom']"
:extend-style=
"
{boxShadow: '-18px -2px 20px -23px rgba(0,0,0,.2) inset',overflowX: 'auto'}"
>
<yun-div
:width-v=
"750"
:height-v=
"96"
:flex-v=
"['row','flex-start','flex-start']"
:font-style=
"[28,36,400,'#999','left']"
:extend-style=
"
{overflowX: 'auto'}"
>
<yun-div
:no-flex-shrink=
"true"
:padding-v=
"[20,0,0,40]"
v-for=
"(item, index) in navList"
:class=
"
{active:index === actived}"
:flex-v="['column','flex-start','center']"
>
<span
@
click=
"toggle(index, item.id)"
>
{{
item
.
label
}}
</span>
<yun-div
:width-v=
"16"
:height-v=
"4"
:border-r=
"[2,2,0,0]"
:margin-v=
"[16,0,0]"
:bg-color-v=
"index === actived ? '#00AAE6' : '#fff'"
></yun-div>
</yun-div>
</yun-div>
</yun-div>
</
template
>
<
script
>
import
commonMixin
from
"./commonMixin"
;
export
default
{
mixins
:
[
commonMixin
],
data
()
{
return
{
actived
:
0
,
navList
:
[
{
label
:
'前端'
,
id
:
'all'
},
{
label
:
'JavaScript'
,
id
:
'10'
},
{
label
:
'Java'
,
id
:
'11'
},
{
label
:
'JavaWeb'
,
id
:
'12'
},
{
label
:
'前端'
,
id
:
'13'
},
{
label
:
'前端'
,
id
:
'14'
},
{
label
:
'前端'
,
id
:
'15'
},
{
label
:
'前端'
,
id
:
'16'
},
{
label
:
'前端'
,
id
:
'17'
},
{
label
:
'前端'
,
id
:
'18'
},
{
label
:
'前端'
,
id
:
'19'
}
]
}
},
methods
:
{
toggle
(
index
,
id
)
{
this
.
actived
=
index
this
.
$router
.
push
({
path
:
'/test'
,
query
:
{
type
:
id
}
})
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.active
{
color
:
#333333
!important
;
@extend
%animate-transition;
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment