style:refine tabsview css

src/components/GithubCorner/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
       aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"

src/components/ScrollPane/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class='scroll-container' ref='scrollContainer' @mousewheel="handleScroll">
+    <div class='scroll-wrapper' ref='scrollWrapper' :style="{left: left + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'scrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      e.preventDefault()
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperWidth = $wrapper.offsetWidth
+      console.log($containerWidth, $wrapperWidth)
+      if (e.wheelDelta > 0) {
+        this.left = Math.min(0, this.left + e.wheelDelta)
+      } else {
+        if ($containerWidth - 100 < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  .scroll-wrapper {
+    position: absolute;
+  }
+}
+</style>