You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.vue 997 B

1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <img id="banner-media" src="/images/header-banalites.jpg"/>
  3. <header>
  4. <CPMMenu :items="contents.sections"/>
  5. </header>
  6. <main>
  7. <section v-for="section in innerSections" v-html="section.content">
  8. </section>
  9. </main>
  10. </template>
  11. <script setup>
  12. const contents = await $fetch('/api/contents');
  13. const innerSections = contents.sections.filter((item) => item.content);
  14. </script>
  15. <style lang="scss">
  16. * {
  17. margin : 0;
  18. padding: 0;
  19. font-family: Verdana, Geneva, Tahoma, sans-serif;
  20. }
  21. #banner-media {
  22. width: 100vw;
  23. }
  24. main {
  25. width : 80vw;
  26. margin: auto;
  27. section {
  28. margin-top: 50px;
  29. h1 {
  30. font-size : 1.5rem;
  31. }
  32. h2 {
  33. font-size : 1.3rem;
  34. }
  35. figure {
  36. margin-bottom : 25px;
  37. img {
  38. width : 100%;
  39. }
  40. figcaption {
  41. text-align: center;
  42. color: white;
  43. background-color: black;
  44. }
  45. }
  46. }
  47. }
  48. </style>