src/App.vue

@@ -1,77 +1,88 @@
<template>
   <div id="app" class="app app1">
      <!-- vue router
      axios
      less
      vuex
      vuels -->
      <!-- <demo/> -->
      <!-- <div id="nav">
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
        </div>
        <router-view/> -->

      <!-- 将上传组件全局注册 -->
      <!-- <global-uploader></global-uploader> -->
      <pp></pp>
   <div id="app" class="app">
      <router-view class=""></router-view>
   </div>
</template>

<script>
   import globalUploader from '@/components/globalUploader.vue'
   import HelloWorld from '@/components/HelloWorld.vue'
   import demo from '@/components/demo.vue'
   // import pp from '@/components/test1/parent1.vue'
   import pp from '@/components/layouts/test.vue'

   export default {
      name: 'app',
      components: {},
      data() {
         return {}
      },
      components: {
         globalUploader,
         HelloWorld,
         demo,
         pp

      },
      components: {},
      computed: {},
      created() {},
      watch: {},
      methods: {}
   }
</script>
<style>
   .app {
      overflow: auto;
      border: none;


<style lang="less">
   #app {
      // overflow: auto;
      //  border: none; 
   }
	
   #app,body,html {
     height: 100%;
   }
	
   .scrollbar {

   /* .scrollbar {
      margin: 0 auto;
   }

   .app1::-webkit-scrollbar {
   } */
   ::-webkit-scrollbar {
      /*滚动条整体样式*/
      /*高宽分别对应横竖滚动条的尺寸*/
      width: 8px;
      height: 5px;
      height: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
   }

   .app1::-webkit-scrollbar-thumb {
   ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 6px;
      background: #aaa;
   }

   .app1::-webkit-scrollbar-track {
   ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 8px;
      background: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 20px;
   }
	
   a {
      position: relative;
   }
	
   a:hover:after {
      left: 0;
      width: 100%;
      -webkit-transition: width 350ms;
      -moz-transition: width 350ms;
      -ms-transition: width 350ms;
      -o-transition: width 350ms;
      transition: width 350ms;
   }
	
   a:after {
      position: absolute;
      bottom: -0.0625rem;
      left: 100%;
      width: 0;
      border-bottom: 0.0625rem solid #30a9de;
      content: "";
      -webkit-transition: width 350ms, left 350ms;
      -moz-transition: width 350ms, left 350ms;
      -ms-transition: width 350ms, left 350ms;
      -o-transition: width 350ms, left 350ms;
      transition: width 350ms, left 350ms;
   }
   .fade-enter-active,
   .fade-leave-active {
      transition: opacity .5s;
   }
	
   .fade-enter,
   .fade-leave-to {
      opacity: 0;
   }
</style>