ExploreContainer.vue 823 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div id="container">
  3. <strong>{{ name }}</strong>
  4. <p>
  5. Explore
  6. <a
  7. class="text-red-500"
  8. target="_blank"
  9. rel="noopener noreferrer"
  10. href="https://ionicframework.com/docs/components"
  11. >UI Components</a
  12. >
  13. </p>
  14. </div>
  15. </template>
  16. <script setup lang="ts">
  17. defineProps({
  18. name: String,
  19. });
  20. </script>
  21. <style scoped>
  22. #container {
  23. text-align: center;
  24. position: absolute;
  25. left: 0;
  26. right: 0;
  27. top: 50%;
  28. transform: translateY(-50%);
  29. }
  30. #container strong {
  31. font-size: 20px;
  32. line-height: 26px;
  33. }
  34. #container p {
  35. font-size: 16px;
  36. line-height: 22px;
  37. color: #8c8c8c;
  38. margin: 0;
  39. }
  40. #container a {
  41. text-decoration: none;
  42. }
  43. </style>