页面完善

2024-11-07 17:06:51 +08:00
parent d375616372
commit ca1a2e11b5
58 changed files with 5467 additions and 837 deletions
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="flex_box flex_row_between top_box">
+      <div class="flex_box top_left">
+        <div @click="goHome" class="flex_box flex_row_center top_btn1">
+          <img src="@/assets/images/Home_icon.png" />
+          <div>回到主界面</div>
+        </div>
+        <div class="top_left_line"></div>
+        <div class="flex_box flex_col_top tab_box">
+          <div @click="goPath(item)" v-for="item in tabs" :key="item.id" class="flex_box flex_row_center flex_col tab_item" :class="{'tab_item1': active===item.id}">
+            <div class="tab_name">{{item.name}}</div>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </div>
+      <user-info></user-info>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import UserInfo from '../userInfo/userInfo.vue';
+  export default {
+    name: 'TabBar',
+    components: { UserInfo },
+    props: {
+      active: {
+        type: Number,
+        default: 1
+      }
+    },
+    data () {
+      return {
+        tabs: [
+          {
+            id: 1,
+            name: '系统管理',
+            path: '/manage'
+          },
+          {
+            id: 2,
+            name: '用户管理',
+            path: '/user'
+          },
+          {
+            id: 3,
+            name: '系统配置',
+            path: '/set'
+          }
+        ]
+      }
+    },
+    computed: {
+      ...mapGetters(['name', 'roles'])
+    },
+    methods: {
+      goHome() {
+        this.$router.go(-1)
+      },
+      goPath(e) {
+        console.log(e)
+        if (e.id === this.active) {
+          return
+        }
+        this.$router.replace(e.path)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .top_box {
+    height: 86px;
+    padding: 0 32px;
+    background-color: #ffffff;
+    border-bottom: 8px solid #F8F8F8;
+    .top_left {
+      .top_btn1 {
+        cursor: pointer;
+        padding: 0 16px;
+        height: 30px;
+        background: #00C325;
+        border-radius: 4px;
+        margin-right: 16px; 
+        font-weight: 500;
+        font-size: 15px;
+        color: #FFFFFF;
+        img {
+          width: 18px;
+          height: 18px;
+          margin-right: 8px;
+        }
+      }
+      .top_left_line {
+        width: 2px;
+        height: 30px;
+        background: #E0E0E0;
+        margin: 0 16px;
+      }
+      .tab_box {
+        .tab_item {
+          padding: 20px 16px;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          line-height: 24px;
+          cursor: pointer;
+          .tab_name {
+            padding-bottom: 4px;
+          }
+          .tab_line {
+            display: none;
+            width: 24px;
+            height: 4px;
+            background: #00C325;
+            border-radius: 4px;
+          }
+        }
+        .tab_item1 {
+          color: #00C325;
+          font-weight: bold;
+          .tab_line {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+</style>