| commit | author | age | ||
| bf6fbe | 1 | <template> |
| f9c38e | 2 | <div id="app" class="app"> |
| I | 3 | <router-view class=""></router-view> |
| bf6fbe | 4 | </div> |
| L | 5 | </template> |
| 6 | ||
| 7 | <script> | |
| 8 | export default { | |
| d3f921 | 9 | components: {}, |
| bf6fbe | 10 | data() { |
| L | 11 | return {} |
| 12 | }, | |
| d3f921 | 13 | components: {}, |
| bf6fbe | 14 | computed: {}, |
| L | 15 | created() {}, |
| 16 | watch: {}, | |
| f9c38e | 17 | methods: {} |
| bf6fbe | 18 | } |
| L | 19 | </script> |
| d3f921 | 20 | |
| I | 21 | |
| 41b36f | 22 | <style lang="less"> |
| I | 23 | #app { |
| 24 | // overflow: auto; | |
| 25 | // border: none; | |
| bf6fbe | 26 | } |
| d3f921 | 27 | |
| 41b36f | 28 | /* .scrollbar { |
| bf6fbe | 29 | margin: 0 auto; |
| 41b36f | 30 | } */ |
| d3f921 | 31 | ::-webkit-scrollbar { |
| bf6fbe | 32 | /*滚动条整体样式*/ |
| L | 33 | width: 8px; |
| b505f3 | 34 | height: 8px; |
| d3f921 | 35 | /*高宽分别对应横竖滚动条的尺寸*/ |
| bf6fbe | 36 | } |
| L | 37 | |
| d3f921 | 38 | ::-webkit-scrollbar-thumb { |
| bf6fbe | 39 | /*滚动条里面小方块*/ |
| L | 40 | border-radius: 6px; |
| 41 | background: #aaa; | |
| 42 | } | |
| 43 | ||
| d3f921 | 44 | ::-webkit-scrollbar-track { |
| bf6fbe | 45 | /*滚动条里面轨道*/ |
| L | 46 | border-radius: 8px; |
| 47 | background: #FFFFFF; | |
| d3f921 | 48 | margin-top: 20px; |
| I | 49 | margin-bottom: 20px; |
| bf6fbe | 50 | } |
| b1336e | 51 | |
| I | 52 | a { |
| 53 | position: relative; | |
| 54 | } | |
| 55 | ||
| 56 | a:hover:after { | |
| 57 | left: 0; | |
| 58 | width: 100%; | |
| 59 | -webkit-transition: width 350ms; | |
| 60 | -moz-transition: width 350ms; | |
| 61 | -ms-transition: width 350ms; | |
| 62 | -o-transition: width 350ms; | |
| 63 | transition: width 350ms; | |
| 64 | } | |
| 65 | ||
| 66 | a:after { | |
| 67 | position: absolute; | |
| 68 | bottom: -0.0625rem; | |
| 69 | left: 100%; | |
| 70 | width: 0; | |
| 71 | border-bottom: 0.0625rem solid #30a9de; | |
| 72 | content: ""; | |
| 73 | -webkit-transition: width 350ms, left 350ms; | |
| 74 | -moz-transition: width 350ms, left 350ms; | |
| 75 | -ms-transition: width 350ms, left 350ms; | |
| 76 | -o-transition: width 350ms, left 350ms; | |
| 77 | transition: width 350ms, left 350ms; | |
| 78 | } | |
| ec6f20 | 79 | .fade-enter-active, |
| I | 80 | .fade-leave-active { |
| 81 | transition: opacity .5s; | |
| 82 | } | |
| 83 | ||
| 84 | .fade-enter, | |
| 85 | .fade-leave-to { | |
| 86 | opacity: 0; | |
| 87 | } | |
| bf6fbe | 88 | </style> |
