PageHome.vue 1017 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div class="container home-container">
  3. <img :src="IntroductionWords" alt="公司标语" class="introduction-words" />
  4. <section class="home-bg" />
  5. <section class="introduction-card-section">
  6. <IntroductionCard />
  7. </section>
  8. </div>
  9. </template>
  10. <script lang="ts" setup>
  11. import IntroductionWords from 'assets/images/home/introduction-words@1X.png';
  12. import IntroductionCard from './src/components/IntroductionCard.vue';
  13. </script>
  14. <style lang="scss" scoped>
  15. .home-container {
  16. width: 100%;
  17. height: 100%;
  18. position: relative;
  19. display: flex;
  20. flex-direction: column;
  21. }
  22. .introduction-words {
  23. position: absolute;
  24. left: 405cpx;
  25. top: 30cpx;
  26. width: 265cpx;
  27. }
  28. .home-bg {
  29. width: 100%;
  30. height: 510cpx;
  31. background: url('assets/images/home/home-bg@1X.png') no-repeat center center / cover;
  32. flex-shrink: 0;
  33. }
  34. .introduction-card-section {
  35. width: 100%;
  36. flex: 1;
  37. max-height: 407cpx;
  38. padding: 10cpx 20cpx;
  39. }
  40. </style>