导航、车辆、系统、弹窗、登录

This commit is contained in:
2023-10-21 17:28:31 +08:00
parent 0fee4ca8a3
commit 788e748ab3
48 changed files with 772 additions and 630 deletions

View File

@@ -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