root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

开发者选项

Browse Source
This commit is contained in:
caill
2023-05-16 14:42:51 +08:00
parent 479c3dd423
commit 1a4942ffcf
1 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/modules/systemmanage/developer.vue
View File

@@ -0,0 +1,90 @@
<template>
<div class="right_side">
<div class="tabs_container">
<div class="tabs_header">
<div class="tabs_wrap">
<div class="tabs_scroll">
<div class="tabs_nav">
<div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
</div>
</div>
</div>
</div>
<div class="tabs_content">
<div v-show="tab === '1'" class="tab_pane">首页首页首页首页首页首页首页</div>
<div v-show="tab === '2'" class="tab_pane">动态</div>
<div v-show="tab === '3'" class="tab_pane">项目</div>
<div v-show="tab === '4'" class="tab_pane">项目</div>
<div v-show="tab === '5'" class="tab_pane">项目</div>
<div v-show="tab === '6'" class="tab_pane">其他</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tabs: [{id: '1', label: '首页'}, {id: '2', label: '动态'}, {id: '3', label: '项目'}, {id: '4', label: '项目'}, {id: '5', label: '项目'}, {id: '6', label: '其他'}],
tab: '1'
}
},
methods: {
changeTab (id) {
this.tab = id
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@style/mixin'
.tabs_container
background #fff
border 1px solid #dcdfe6
box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
.tabs_header
position relative
background-color #f5f7fa
border-bottom 1px solid #e4e7ed
.tabs_wrap
overflow hidden
margin-bottom -1px
position relative
.tabs_scroll
overflow hidden
.tabs_nav
white-space nowrap
position relative
transition transform .3s
float left
z-index 2
.tabs_item
padding 0 20px
height 40px
box-sizing border-box
line-height 40px
display inline-block
list-style none
font-size 14px
font-weight 500
position relative
transition all .3s cubic-bezier(.645,.045,.355,1)
border 1px solid transparent
margin-top -1px
color #909399
&:first-child
margin-left -1px
.is_active
color: #409eff;
background-color: #fff;
border-right-color: #dcdfe6;
border-left-color: #dcdfe6;
.tabs_content
overflow: hidden;
position: relative;
padding: 15px;
.tab_pane
_font(16px, 28px, #323232,,)
</style>