src/App.vue

@@ -1,6 +1,6 @@
<template>
   <div id="app" class="app app1">
      <router-view class="scrollbar"></router-view>
   <div id="app" class="app">
      <router-view class=""></router-view>
   </div>
</template>

@@ -19,19 +19,49 @@
</script>


<style>
   .app {
      overflow: auto;
      border: none;
<style lang="less">
   body {
      background: #f0f2f5;
   }

   .scrollbar {
   .ant-modal-header {
      //ant 弹窗移动样式
      cursor: move;
   }

   @font-face {
      font-family: 'HYTangMeiRen';
      // font-display: swap;
      src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
   }

   span,
   p,
   a,
   body,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   code,
   pre{
      font-family: HYTangMeiRen !important;
   }

   #app {
      // overflow: auto;
      //  border: none; 
   }

   /* .scrollbar {
      margin: 0 auto;
   }

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

@@ -48,4 +78,42 @@
      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>