Comparatif.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <div id="Comparatif">
  3. <LayoutContainer class="mt-6">
  4. <LayoutUISubTitle
  5. :iconSize="6"
  6. :iconClasses="iconClasses"
  7. :titleText="' Comparatif de nos solutions'"
  8. />
  9. <LayoutUITitle
  10. title="Choisissez la version qui vous convient ! "
  11. />
  12. <CommonTableComparatif
  13. :standardPrice="'32,90€'"
  14. :premiumPrice="'46,20€'"
  15. :color="'#0e2d32'"
  16. :stripeColor="'rgba(32, 147, 190, 0.2)'"
  17. :tableData="tableData"
  18. />
  19. </LayoutContainer>
  20. </div>
  21. </template>
  22. <script setup>
  23. const tableData = [
  24. {
  25. id: 1,
  26. column1: "GESTION DU RÉPERTOIRE",
  27. column2: "check",
  28. column3: "check",
  29. },
  30. {
  31. id: 2,
  32. column1: "AGENDA",
  33. column2: "check",
  34. column3: "check",
  35. },
  36. {
  37. id: 3,
  38. column1: "SUIVI PÉDAGOGIQUE",
  39. column2: "check",
  40. column3: "check",
  41. },
  42. {
  43. id: 4,
  44. column1: "GESTION DU PARC MATÉRIEL",
  45. column2: "check",
  46. column3: "check",
  47. },
  48. {
  49. id: 5,
  50. column1: "COMMUNICATION",
  51. column2: "check",
  52. column3: "check",
  53. },
  54. {
  55. id: 6,
  56. column1: "SMS",
  57. column2: "Option",
  58. column3: "Option",
  59. },
  60. {
  61. id: 6,
  62. column1: "NOM DE DOMAINE",
  63. column2: "Option",
  64. column3: "Option",
  65. },
  66. {
  67. id: 7,
  68. column1: "SITE INTERNET",
  69. column2: "check",
  70. column3: "check",
  71. },
  72. {
  73. id: 8,
  74. column1: "STATISTIQUES",
  75. column2: "check",
  76. column3: "check",
  77. },
  78. {
  79. id: 9,
  80. column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
  81. column2: "check",
  82. column3: "check",
  83. },
  84. {
  85. id: 10,
  86. column1: "SAUVEGARDE",
  87. column2: "check",
  88. column3: "check",
  89. },
  90. {
  91. id: 11,
  92. column1: "EXTRANET UTILISATEURS",
  93. column2: "cross",
  94. column3: "Option",
  95. },
  96. {
  97. id: 12,
  98. column1: "PRÉINSCRIPTION EN LIGNE",
  99. column2: "cross",
  100. column3: "Option",
  101. },
  102. {
  103. id: 13,
  104. column1: "GRILLES D'ÉVALUATION",
  105. column2: "check",
  106. column3: "Option",
  107. },
  108. {
  109. id: 14,
  110. column1: "GESTION DES RÈGLEMENTS",
  111. column2: "Option",
  112. column3: "Option",
  113. },
  114. {
  115. id: 15,
  116. column1: "ESPACE DE STOCKAGE",
  117. column2: "500 Mo",
  118. column3: "1 Go",
  119. },
  120. {
  121. id: 16,
  122. column1: "PAGE DU SITE INTERNET",
  123. column2: "restreint",
  124. column3: "illimités",
  125. },
  126. ];
  127. </script>
  128. <style scoped>
  129. .v-container{
  130. width: 95%;
  131. margin-right: auto;
  132. margin-left: auto;
  133. }</style>