From 1a4942ffcfb89c0b4e66542e1a37a0bfa782ae48 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Tue, 16 May 2023 14:42:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E8=80=85=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/modules/systemmanage/developer.vue | 90 ++++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/src/pages/modules/systemmanage/developer.vue b/src/pages/modules/systemmanage/developer.vue
index e69de29..bfc8175 100644
--- 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>