drawerPage.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template name="dever-drawer-page">
  2. <view class="DrawerPage" :class="show">
  3. <slot name="links"></slot>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. show : '',
  10. },
  11. methods:{
  12. }
  13. }
  14. </script>
  15. <style>
  16. .DrawerPage {
  17. position: fixed;
  18. width: 100vw;
  19. height: 100vh;
  20. left: 0vw;
  21. background-color: #f1f1f1;
  22. transition: all 0.4s;
  23. }
  24. .DrawerPage.left1 {
  25. transform: scale(0.9, 0.9);
  26. left: 85vw;
  27. box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
  28. transform-origin: 0;
  29. }
  30. .DrawerPage .cu-bar.tabbar .action button.cuIcon {
  31. width: 64upx;
  32. height: 64upx;
  33. line-height: 64upx;
  34. margin: 0;
  35. display: inline-block;
  36. }
  37. .DrawerPage .cu-bar.tabbar .action .cu-avatar {
  38. margin: 0;
  39. }
  40. .DrawerPage .nav {
  41. flex: 1;
  42. }
  43. .DrawerPage .nav .cu-item.cur {
  44. border-bottom: 0;
  45. position: relative;
  46. }
  47. .DrawerPage .nav .cu-item.cur::after {
  48. content: "";
  49. width: 10upx;
  50. height: 10upx;
  51. background-color: currentColor;
  52. position: absolute;
  53. bottom: 10upx;
  54. border-radius: 10upx;
  55. left: 0;
  56. right: 0;
  57. margin: auto;
  58. }
  59. .DrawerPage .cu-bar.tabbar .action {
  60. flex: initial;
  61. }
  62. </style>