开发者选项

2023-05-16 14:42:51 +08:00
parent 479c3dd423
commit 1a4942ffcf
1 changed files with 90 additions and 0 deletions
--- a/src/pages/modules/systemmanage/developer.vue
+++ b/src/pages/modules/systemmanage/developer.vue
@@ -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>