code init

2021-05-25 18:06:45 +08:00
parent 02698d6dab
commit f54a8d4fa1
1367 changed files with 540755 additions and 21713 deletions
@@ -0,0 +1,22 @@
+<template>
+  <div class="panel-content">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'panel-content'
+}
+</script>
+
+<style lang="less">
+  @import '~@/assets/styles/style';
+  .panel-content{
+    width: 100%;
+    height: calc(~'100% - 30px');
+    position: relative;
+    background: @subContainerContentColor;
+    overflow: hidden;
+  }
+</style>
@@ -0,0 +1,111 @@
+<template>
+  <div class="panel-header test-1">
+    <ul class="tabs">
+      <li
+        v-for="(item, index) in tabs"
+        :key="index"
+        :class="{ 'active border-right': active === item.name}"
+        @click="activated(item.name, item.title)"
+      >
+        {{ item.title}}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'panel-header',
+  methods: {
+    // 组件切换
+    activated (name, title) {
+      this.$emit('activated', name, title)
+    }
+  },
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    },
+    active: String
+  },
+  computed: {
+    ...mapGetters(['getItemList'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '~@/assets/styles/style';
+  @import '~@/assets/styles/mixins';
+  .panel-header {
+    width: 100%;
+    box-sizing: border-box;
+    border-bottom: 1px solid #CCCDCE;
+    background: #F0F0F0;
+    height: 30px;
+    position: relative;
+    .tabs{
+      white-space: nowrap;
+      position: absolute;
+      bottom: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+      height: auto;
+      font-size: 0;
+      padding-left: 10px;
+      li{
+        display: inline-block;
+        vertical-align: baseline;
+        padding: 0 8px;
+        height: 28px;
+        line-height: 28px;
+        max-width: 150px;
+        text-align: center;
+        cursor: pointer;
+        user-select: none;
+        .ellipsis();
+        font-size: 14px;
+        border: 1px solid transparent;
+        border-bottom: none;
+        &.active{
+          height: 29px;
+          position: relative;
+          top: 1px;
+          background: @subContainerContentColor;
+          border-top: 1px solid #CCCCCC;
+          border-left: 1px solid #CFCFCF;
+          border-right: 1px solid #CFCFCF;
+          box-sizing: border-box;
+          color: @baseColor;
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+        &::before{
+          height: calc(~'100% + 1px');
+          top: -1px;
+        }
+      }
+    }
+  }
+  .test-1::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
+    height: 2px;
+  }
+  .test-1::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background   : #cecece;
+  }
+  .test-1::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background   : #ededed;
+  }
+</style>