AddressSection.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <LayoutContainer>
  3. <v-row>
  4. <v-col cols="6" class="px-8">
  5. <ContactMap class="contact-map" />
  6. </v-col>
  7. <v-col cols="6" class="address-col px-8">
  8. <h4>
  9. <v-icon icon="fas fa-envelope"/> Pour nous écrire
  10. </h4>
  11. <v-card>
  12. <div>
  13. 2iOpenService
  14. </div>
  15. <div>
  16. 217, rue Raoul Follereau
  17. </div>
  18. <div>
  19. 74300 - Cluses
  20. </div>
  21. </v-card>
  22. <div class="mb-6" />
  23. <h4>
  24. <v-icon icon="fas fa-phone"/>
  25. Ou par téléphone
  26. </h4>
  27. <div>
  28. <v-btn
  29. v-if="!revealPhoneNumber"
  30. @click="revealPhoneNumber = !revealPhoneNumber"
  31. >
  32. Cliquer pour afficher le numéro de téléphone
  33. </v-btn>
  34. <span v-else>
  35. <v-card>
  36. Contactez nous au
  37. <a href="tel:+33972126017">
  38. 09 72 12 60 17
  39. </a>
  40. </v-card>
  41. </span>
  42. </div>
  43. </v-col>
  44. </v-row>
  45. </LayoutContainer>
  46. </template>
  47. <script setup lang="ts">
  48. const revealPhoneNumber = ref(false)
  49. </script>
  50. <style scoped lang="scss">
  51. .container {
  52. width: 70%;
  53. }
  54. h4 {
  55. display: flex;
  56. flex-direction: row;
  57. color: var(--primary-color);
  58. font-size: 20px;
  59. font-weight: 500;
  60. margin: 24px 0;
  61. }
  62. .v-icon {
  63. margin-right: 16px;
  64. }
  65. .address-col > div, .address-col > .v-card > div {
  66. padding: 8px 16px;
  67. }
  68. .v-card {
  69. margin: 16px 64px;
  70. padding: 12px;
  71. }
  72. .v-btn {
  73. margin: 16px 64px;
  74. }
  75. a {
  76. color: var(--on-neutral-color);
  77. text-decoration: underline;
  78. }
  79. </style>