index.vue 923 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="e-home">
  3. <!-- <aside-mune class="aside"></aside-mune>
  4. <div class="e-content">
  5. <router-view>
  6. </router-view>
  7. </div> -->
  8. </div>
  9. </template>
  10. <script>
  11. import AsideMune from '../asideMenu'
  12. export default {
  13. components: {
  14. AsideMune
  15. },
  16. mixins: [],
  17. props: {
  18. },
  19. data () {
  20. return {
  21. }
  22. },
  23. computed: {
  24. },
  25. mounted() {
  26. },
  27. methods: {
  28. },
  29. }
  30. </script>
  31. <style scoped lang="less" >
  32. .e-home {
  33. .aside {
  34. position: fixed;
  35. z-index: 999;
  36. top: 60px;
  37. left: 0;
  38. bottom: 0;
  39. width: 80px;
  40. border-right: 1px solid #ebecf0;
  41. transition: all 0.3s ease-in-out;
  42. overflow-x: hidden;
  43. overflow-y: auto;
  44. }
  45. .e-content {
  46. margin-left: 80px;
  47. transition: all 0.3s ease-in-out;
  48. background: #ccc;
  49. }
  50. &>.aside:hover {
  51. width: 300px;
  52. }
  53. &>.aside:hover + .e-content {
  54. margin-left: 300px;
  55. }
  56. }
  57. </style>