导航、车辆、系统、弹窗、登录
This commit is contained in:
@@ -1,24 +1,31 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<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 class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>开发者选项</h2>
|
||||
</div>
|
||||
<div class="page_container">
|
||||
<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">{{ result1 }}</div>
|
||||
<div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
|
||||
<div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
|
||||
<div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
|
||||
<div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
|
||||
<div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs_content">
|
||||
<div v-show="tab === '1'" class="tab_pane">{{ result1 }}</div>
|
||||
<div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
|
||||
<div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
|
||||
<div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
|
||||
<div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
|
||||
<div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,14 +135,12 @@ export default {
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.tabs_container
|
||||
_wh(100%,100%)
|
||||
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
|
||||
_wh(100%,100%)
|
||||
.tabs_header
|
||||
position absolute
|
||||
top: -92px;
|
||||
right: -52px;
|
||||
.tabs_wrap
|
||||
overflow hidden
|
||||
margin-bottom -1px
|
||||
@@ -149,34 +154,33 @@ export default {
|
||||
float left
|
||||
z-index 2
|
||||
.tabs_item
|
||||
padding 0 40px
|
||||
height 40px
|
||||
padding 0 10px
|
||||
width 200px
|
||||
height 46px
|
||||
box-sizing border-box
|
||||
line-height 40px
|
||||
line-height 46px
|
||||
display inline-block
|
||||
list-style none
|
||||
font-size 14px
|
||||
font-weight 500
|
||||
_font(24px, 46px, #ACBFE3, 500, center)
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
position relative
|
||||
transition all .3s cubic-bezier(.645,.045,.355,1)
|
||||
border 1px solid transparent
|
||||
margin-top -1px
|
||||
color #909399
|
||||
background center / 100% 100% url(../../../images/new/tab_bg.png) no-repeat
|
||||
&:first-child
|
||||
margin-left -1px
|
||||
.is_active
|
||||
color: #409eff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
color: #3CC1FF;
|
||||
background center / 100% 100% url(../../../images/new/tab_bg_active.png) no-repeat
|
||||
.tabs_content
|
||||
_wh(100%, calc(100% - 39px))
|
||||
_wh(100%, 100%)
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
.tab_pane
|
||||
_wh(100%,100%)
|
||||
_font(14px, 21px, #323232,,)
|
||||
_font(24px, 36px, #fff,,)
|
||||
font-family SourceHanSansCN-Regular
|
||||
white-space pre-line
|
||||
word-break break-all
|
||||
overflow-y auto
|
||||
|
||||
Reference in New Issue
Block a user