AgendaPage.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
  2. <template>
  3. <section class="mobile-placeholder">
  4. <div class="mobile-placeholder__badge">
  5. <q-icon name="mdi-calendar-blank-outline" />
  6. </div>
  7. <h1 class="mobile-placeholder__title">Agenda</h1>
  8. <p class="mobile-placeholder__description">
  9. Área reservada para exibir compromissos, confirmações e próximas diárias.
  10. </p>
  11. </section>
  12. </template>
  13. <style scoped>
  14. .mobile-placeholder {
  15. display: flex;
  16. flex-direction: column;
  17. align-items: center;
  18. justify-content: center;
  19. min-height: calc(100dvh - 240px);
  20. padding: 32px 20px;
  21. text-align: center;
  22. }
  23. .mobile-placeholder__badge {
  24. display: grid;
  25. place-items: center;
  26. width: 88px;
  27. height: 88px;
  28. border-radius: 28px;
  29. margin-bottom: 20px;
  30. background: linear-gradient(180deg, rgba(255, 0, 234, 0.14), rgba(107, 17, 203, 0.08));
  31. color: #ff00ea;
  32. font-size: 44px;
  33. }
  34. .mobile-placeholder__title {
  35. margin: 0 0 8px;
  36. font-size: 28px;
  37. font-weight: 700;
  38. line-height: 1.1;
  39. color: #4d4d4d;
  40. }
  41. .mobile-placeholder__description {
  42. max-width: 280px;
  43. margin: 0;
  44. font-size: 16px;
  45. line-height: 1.5;
  46. color: #8d8d8d;
  47. }
  48. </style>