index.vue 824B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div class="container">
  3. <div class="aud abs"></div>
  4. <Pg1 />
  5. <Pg2 />
  6. <Pg3 />
  7. </div>
  8. </template>
  9. <script setup>
  10. import { onMounted } from 'vue';
  11. import parallaxing from '@/utils/parallaxing.js';
  12. import Pg1 from './pg1/index.vue';
  13. import Pg2 from './pg2/index.vue';
  14. import Pg3 from './pg3/index.vue';
  15. onMounted(() => {
  16. parallaxing()
  17. })
  18. </script>
  19. <style lang="less">
  20. .container {
  21. width: 100vw;
  22. height: 100vh;
  23. position: relative;
  24. overflow-y: auto;
  25. .aud {
  26. top: 20px;
  27. right: 20px;
  28. width: 36px;
  29. height: 36px;
  30. background-image: url('./images/pg1/音乐按钮.png');
  31. background-size:100% 100%;
  32. z-index: 100;
  33. }
  34. .abs {
  35. position: absolute;
  36. }
  37. .pg {
  38. position: relative;
  39. width: 100%;
  40. height: 100%;
  41. overflow: hidden;
  42. }
  43. }
  44. </style>