From 206f766c69579979b53915b879878ac5688937b2 Mon Sep 17 00:00:00 2001 From: Jonathan Chevalier Date: Thu, 6 Oct 2022 13:40:20 +0200 Subject: [PATCH] WIP MMCM --- src/App.vue | 29 +- src/assets/common_css.css | 2179 ------------------------- src/assets/vue.svg | 1 - src/components/Wizard.vue | 2 +- src/main.js | 4 +- src/router/index.js | 2 +- src/stores/mmcm.js | 2 +- src/style.css | 24 +- src/views/address-check.vue | 2 +- src/views/delivery-option-step-2.vue | 32 +- src/views/delivery-option-summary.vue | 5 +- src/views/final-step.vue | 10 +- src/views/index.vue | 10 +- vite.config.js | 4 + 14 files changed, 53 insertions(+), 2253 deletions(-) delete mode 100644 src/assets/common_css.css delete mode 100644 src/assets/vue.svg diff --git a/src/App.vue b/src/App.vue index 2ac427b..415626b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,37 +6,10 @@ import Wizard from "./components/Wizard.vue"; - diff --git a/src/assets/common_css.css b/src/assets/common_css.css deleted file mode 100644 index 58ee839..0000000 --- a/src/assets/common_css.css +++ /dev/null @@ -1,2179 +0,0 @@ -html, -body { - width: 100%; - overflow-x: hidden; -} - -@media screen and (min-width: 992px) { - .inner { - max-width: 1650px; - padding-left: .667em; - padding-right: .667em; - } - - .largest #header.inner, - .largest #content.inner { - max-width: 100%; - } -} - -@media screen and (min-width: 1648.98px) { - .bs_inner { - max-width: 1650px; - margin-left: auto; - margin-right: auto; - } - - .largest .bs_inner { - max-width: 100%; - } -} - -.carousel-content { - text-align: center -} - -.glide__wrapper { - z-index: 0 -} - -a { - color: inherit; -} - -fieldset, -form { - padding: 0; - margin: 0; - border: 0 -} - -article, -aside, -footer, -header, -hgroup, -menu, -nav, -section { - display: block -} - -iframe, -img, -table { - border: 0 -} - -address { - font-style: normal -} - -.hidden { - display: none !important -} - -.nomargin { - margin: 0 !important -} - -.nomargint { - margin-top: 0 !important -} - -.nomarginb { - margin-bottom: 0 !important -} - -.center, -.my-center { - text-align: center -} - -.left { - text-align: left -} - -.right, -.my-right { - text-align: right -} - -.justify { - text-align: justify -} - -.separ:before, -.separ:after { - content: " "; - display: table; -} - -.separ:after { - clear: both; -} - -.my-uppercase { - text-transform: uppercase; -} - -/* ** Boutons 2021 DB ** */ -/* bouton arrondi */ -.cac-touch { - display: inline-block; - color: #212121; - background-color: gainsboro; - border: 0; - outline: none; - cursor: pointer; - font-family: inherit; - font-weight: 600; - text-decoration: none; - -webkit-user-select: none; - /* Safari 3.1+ */ - -moz-user-select: none; - /* Firefox 2+ */ - -ms-user-select: none; - /* IE 10+ */ - user-select: none; - /* Standard syntax */ - - transition: 333ms all; - -ms-touch-action: manipulation; - touch-action: manipulation; - -webkit-transition: 333ms all; - -moz-transition: 333ms all; - -o-transition: 333ms all; - -ms-transition: 333ms all; - - padding: .25em 1em; - font-size: .933em !important; - border-radius: 1em; -} - -.cac-touch:hover, -.cac-touch:focus:hover { - color: white; - background-color: black; - text-decoration: none !important; -} - -/* petit bouton rectangulaire */ -.cac-basic { - display: inline-block; - color: #212121; - background-color: gainsboro; - border: 0; - outline: none; - cursor: pointer; - font-family: inherit; - font-weight: 600; - text-decoration: none; - -webkit-user-select: none; - /* Safari 3.1+ */ - -moz-user-select: none; - /* Firefox 2+ */ - -ms-user-select: none; - /* IE 10+ */ - user-select: none; - /* Standard syntax */ - - transition: 333ms all; - -ms-touch-action: manipulation; - touch-action: manipulation; - -webkit-transition: 333ms all; - -moz-transition: 333ms all; - -o-transition: 333ms all; - -ms-transition: 333ms all; - - padding: .25em 1em; - font-size: .933em !important; -} - -.cac-basic:hover, -.cac-basic:focus:hover { - color: white; - background-color: black; - text-decoration: none !important; -} - -/* en rose / vert */ -.cac-primary { - color: white !important; - background-color: var(--primary_color); -} - -.cac-primary:hover, -.cac-primary:focus:hover { - background-color: var(--primary_color_hover); -} - -/* en foncé */ -.cac-dark { - background-color: #212121; - color: white !important; -} - -/* en clair */ -.cac-light { - background-color: #e5e5e5; -} - -.cac-light:hover, -.cac-light:focus:hover { - background-color: whitesmoke; - color: #212121 !important; -} - -/* transparent */ -.cac-transparent { - background-color: transparent; - color: inherit !important; -} - -.cac-transparent:hover, -.cac-transparent:focus:hover { - color: gainsboro !important; -} - -/* en vert (valid) */ -.cac-success { - background-color: green; - color: white !important; -} - -.cac-success:hover, -.cac-success:focus:hover { - background-color: darkgreen; - color: white !important; -} - -/* en rouge (fail) */ -.cac-fail { - background-color: red; - color: white !important; -} - -.cac-fail:hover, -.cac-fail:focus:hover { - background-color: darkred; - color: white !important; -} - -/* en orange (warning) */ -.cac-warning { - background-color: darkorange; - color: white !important; -} - -.cac-warning:hover, -.cac-warning:focus:hover { - background-color: orangered; - color: white !important; -} - -/* en rouge sur jaune */ -.cac-yellow { - background-color: #ff0; - color: red !important; -} - -.cac-yellow:hover, -.cac-yellow:focus:hover { - background-color: red; - color: #ff0 !important; -} - -/* en conseiller */ -.cac-advisor { - background-color: red; - color: white !important; -} - -.cac-advisor:hover, -.cac-advisor:focus:hover { - background-color: darkred; - color: white !important; -} - -/* PPM - Forcé en ROSE PARA. */ -.cac-force-para { - background-color: #f91ea9; - color: white !important; -} - -.cac-force-para:hover, -.cac-force-para:focus:hover { - background-color: #EC008C; -} - -/* PPM - Forcé en VERT MEDIC. */ -.cac-force-medic { - background-color: #00cc33; - color: white !important; -} - -.cac-force-medic:hover, -.cac-force-medic:focus:hover { - background-color: forestgreen; -} - -/* plus gros */ -.cac-bigger { - font-size: 1.133em !important; -} - -/* le plus gros */ -.cac-biggest { - font-size: 1.533em !important; -} - -/* plus petit */ -.cac-smaller { - font-size: .867em !important; -} - -/* le plus petit */ -.cac-smallest { - font-size: .733em !important; -} - -/* 100% */ -.cac-block { - display: inline-block; - width: 100%; - text-align: center; - padding-left: .333em; - padding-right: .333em; -} - -/* majuscules */ -.cac-uppercase { - text-transform: uppercase; -} - -/* bold */ -.cac-bold { - font-weight: bold; -} - -/* non cliquable - juste visuel */ -.cac-noaction { - cursor: default; -} - -.badge.my-orange { - color: white; - background-color: var(--orange_color); -} - -/* ** TITRES PRINCIPAUX (Gros et centrés) ** */ -.my-main-title-v2021 { - padding: 0; - margin: 0 0 .667em 0; - color: black; - font-size: 1.8em; - font-weight: 800; - line-height: 1.1; - text-transform: uppercase; - text-align: center; -} - -.webpage .my-main-title-v2021 { - text-align: left; -} - -.my-main-title-v2021 a { - color: inherit; - text-decoration: none; -} - -.my-main-title-v2021 h1, -.my-main-title-v2021 h2, -.my-main-title-v2021 h3, -.my-main-title-v2021 h4, -.my-main-title-v2021 h5 { - font: inherit; - padding: 0; - margin: 0; -} - -/* ** TITRE (Gros et centrés) ** */ -.my-title-v2021 { - padding: 0; - margin: 0 0 .667em 0; - font-size: 1.333em; - font-weight: bold; - line-height: 1.1; - text-align: center; -} - -.my-title-v2021 a { - color: inherit; - text-decoration: none; -} - -/* ** SOUS-TITRE (Gros et centrés) ** */ -.my-subtitle-v2021 { - padding: 0; - margin: 0 0 .667em 0; - font-size: 1.067em; - font-weight: bold; - line-height: 1.1; - text-align: center; -} - -.my-subtitle-v2021 a { - color: inherit; - text-decoration: none; -} - -.color-success { - color: #393; -} - -.color-fail { - color: #C00; -} - - -.my-bloc-v2021 { - padding-left: 1rem; - padding-right: 1rem; - margin: 0 auto 2em auto; -} - -.jslink { - cursor: pointer -} - -.my-model-text h1 { - font-size: 1.267em; - font-weight: bold; - line-height: 1.1; - text-transform: uppercase -} - -.my-model-text h1 a { - text-decoration: none -} - -.my-model-text h2 { - color: var(--primary_color); - font-size: 1.133em; - font-weight: bold; - line-height: 1.1 -} - -.PRESTIGE .my-model-text h2 { - color: var(--prestige_color); -} - -.my-model-text h3 { - font-size: 1.067em; - font-weight: bold; - line-height: 1.1 -} - -.my-model-text h4 { - font-size: 1em; - font-weight: bold; - line-height: 1.1 -} - -.my-model-text h2 a { - text-decoration: none -} - -.my-model-text h2 a:hover { - text-decoration: underline -} - -.my-model-text p { - margin-top: .667em; - margin-bottom: .667em; -} - -.my-model-text li { - margin-top: 1em; - margin-bottom: 1em -} - -.my-model-text .my-resp { - max-width: 100%; - height: auto !important; - margin-left: auto; - margin-right: auto; -} - -/* ** TITRES PRINCIPAUX (au format barre horizontale) ** */ -.my-main-title { - color: white; - font-size: 1.133em; - font-weight: bold; - padding: .333em 1rem; - margin: 0 0 1em 0; - text-transform: uppercase; - background-color: black; -} - -.my-main-title.black-friday { - font-weight: bold; - text-shadow: 3px 0px 7px #f91ea9, -3px 0px 7px #f91ea9, 0px 4px 7px #f91ea9; -} - -.my-main-title h1, -.my-main-title h2, -.my-main-title h3, -.my-main-title h4, -.my-main-title h5 { - font: inherit; - padding: 0; - margin: 0; -} - -.my-main-title a { - color: inherit; - text-decoration: none; -} - -.my-main-title a:hover { - text-decoration: underline; -} - -.my-main-title .page_count { - font-size: 80%; - font-weight: 600; - color: white; - margin-left: .333em; - text-transform: none; -} - -/* ** TITRES (au format barre horizontale) ** */ -.my-title { - color: white; - font-size: 1em; - font-weight: 600; - padding: .267em 1rem; - margin: 0 0 1em 0; - background-color: var(--primary_color); -} - -.my-title.red { - background-color: #C00; -} - -.my-title.black { - background-color: black; -} - -.my-title h1, -.my-title h2, -.my-title h3, -.my-title h4, -.my-title h5 { - font: inherit; - padding: 0; - margin: 0; -} - -.my-title a { - color: inherit; - text-decoration: none; -} - -.my-title a:hover { - text-decoration: underline; -} - -/* ** SOUS-TITRES (au format barre horizontale) ** */ -.my-subtitle { - font-size: .933em; - font-weight: 600; - padding: .267em 1rem; - margin: 0 0 1em 0; - background-color: gainsboro; -} - -.my-subtitle h1, -.my-subtitle h2, -.my-subtitle h3, -.my-subtitle h4, -.my-subtitle h5 { - font: inherit; - padding: 0; - margin: 0; -} - -.my-subtitle a { - color: inherit; - text-decoration: none; -} - -.my-subtitle a:hover { - text-decoration: underline; -} - -.webpage h1:not(.my-main-title) { - font-size: 1.733em; -} - -.webpage h2 { - font-size: 1.467em; - color: var(--primary_color); -} - -.webpage h3 { - font-size: 1.267em; -} - -.webpage .my-resp { - max-width: 100%; - height: auto !important; - margin-left: auto; - margin-right: auto; -} - -/* ** SLIDE v2021 ** */ -.my-slide { - margin-bottom: 1em; -} - -.homepage .my-slide { - margin-bottom: 0; -} - -.my-slide .image-area { - position: relative; - width: 100vw; - height: 100vw; -} - -.inner .my-slide .image-area { - width: 100%; - height: auto; -} - -.my-slide .image-area img { - display: block; - width: 100vw; - height: 100vw; -} - -.inner .my-slide .image-area img { - width: 100%; - height: auto !important; -} - -.my-slide .bullet-area { - background-color: white; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding-top: .667em; - padding-bottom: 1em; -} - -.my-slide .bullet-area button { - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - font-size: 1.2em; - width: 1em; - height: 1em; - color: gainsboro; - - background-color: transparent; - border: 0; - margin: 0 .5em; - padding: 0; -} - -.my-slide .bullet-area button:disabled { - color: var(--primary_color); -} - -.my-slide .arrow-area { - position: absolute; - top: 0; - width: 60px; - height: 100vw; -} - -@media screen and (min-width:429.98px) { - .my-slide .image-area { - height: 22vw; - } - - .my-slide .image-area img { - height: 22vw; - } - - .my-slide .arrow-area { - height: 22vw; - } -} - -.my-slide .arrow-area.previous { - left: 0 -} - -.my-slide .arrow-area.next { - right: 0 -} - -.my-slide .arrow-area button { - cursor: pointer; - width: 100%; - height: 100%; - color: dimgrey; - background-color: transparent; - border: 0; - margin: 0; - padding: 0; - text-indent: -999em; -} - -@media screen and (min-width:640px) { - .my-slide .arrow-area { - top: 50%; - visibility: hidden; - opacity: .5; - filter: alpha(opacity=50); - /* For IE8 and earlier */ - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); - width: 7.333em; - height: 7.333em; - display: flex; - justify-content: center; - align-items: center; - background-repeat: no-repeat; - background-position: center center; - background-color: rgba(255, 255, 255, .67); - } - - .my-slide .arrow-area button { - text-indent: initial; - } - - .my-slide:hover .arrow-area { - visibility: visible; - } - - .my-slide .arrow-area.previous { - left: 2em; - } - - .my-slide .arrow-area.next { - right: 2em; - } - - .my-slide .arrow-area:hover { - opacity: 1; - filter: alpha(opacity=100); - /* For IE8 and earlier */ - } -} - -/* ** ancien app_css.css (app_css plus justifié en mobilefirst ** */ -/* ce sont les css du descktop qu'il va falloir isoler */ -.top-area.wishlist-area-v2021 button, -.top-area.account-area-v2021 button, -.top-area.cart-area-v2021 button { - height: 100%; - font-family: inherit; - font-size: 1.667em; - color: inherit; - background-color: transparent; - padding: 0; - margin: 0; - border: 0; - outline: none; - cursor: pointer; - text-decoration: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.top-area.wishlist-area-v2021 button { - width: 31px; -} - -.top-area.account-area-v2021 button, -.top-area.cart-area-v2021 button { - width: 45px; -} - -.top-area.cart-area-v2021 button { - background-color: var(--primary_color); - color: white; -} - -#m-top .top-area.cart-area-v2021 { - position: relative; -} - -#m-top .top-area.cart-area-v2021 .bullet { - position: absolute; - top: -1px; - right: -1px; - color: var(--primary_color); - font-weight: bold; - padding: 0 3px; - border: 1px solid currentColor; - background-color: white; -} - -#m-top .top-area.language-area { - width: 23px; - margin-right: 10px; -} - -#m-top .top-area.language-area .inside .icon-area { - display: none; -} - -#m-top .top-area.language-area .text-area .label { - display: flex; - width: 23px; - height: 45px; -} - -#m-top .top-area.language-area .text-area .label img { - width: 23px; - height: auto !important; - margin: auto; -} - -#m-toolbar .search_area.searching { - display: flex; - align-items: center; - height: 3.167em; -} - -#m-toolbar .search_area.searching progress { - width: 100%; -} - - -/********* TEMPLATES *********/ -.fleurdebach #G_main { - background-image: url(/gfm/840002/m/img/fleur_de_bach_last.png); - background-repeat: repeat-y; - background-position: center top; - background-attachment: scroll; - /*background-size: contain;*/ -} - -#content { - background-color: white; - padding-top: 15px; - padding-bottom: 15px; -} - -#content.webpage { - padding: .667em; -} - -@media screen and (min-width:992px) { - #content.webpage { - padding: 1em; - } -} - -.eCrm_area { - background-color: white; -} - -/*** FIL D'ARIANE ***/ -.breadcrumb20 { - color: white; - font-size: 1.2em; - font-weight: 600; - padding: .333em .667em; - margin-bottom: 1rem; - background-color: #000000; -} - -.breadcrumb20 h1, -.breadcrumb20 h2, -.breadcrumb20 h3, -.breadcrumb20 h4 { - display: inline; - font: inherit; - margin: 0; - padding: 0; -} - -.breadcrumb20 div { - display: inline-block; -} - -.breadcrumb20 a { - color: inherit; - text-decoration: none; -} - -.breadcrumb20 .uppercase { - text-transform: uppercase; -} - -.breadcrumb20 a:hover { - text-decoration: underline; -} - -.breadcrumb20 .last_item { - text-decoration: none; -} - -.PARA.PRESTIGE .breadcrumb20 .last_item { - color: #c99d57; -} - -.breadcrumb20 .last_item { - text-decoration: none; -} - -.breadcrumb20 .page_count { - font-size: .875em; - color: white; - margin-left: .333em; -} - -/*************** FIN MISE EN PAGE ***************/ - -/* ** paiement en plusieurs fois : a déplacer une fosi le service e,n place / figé ** */ -.pledg_split_price_info { - font-weight: 600; -} - -.pledg_split_price_info span { - font-size: 1.062em; - font-weight: 700; -} - -.pledg_split_price_info span.currency { - font-size: .925em; - padding-left: 0.125em; -} - -#product .add_to_cart_box .price_area .pledg_split_price_info { - font-size: .933em; - margin-top: .2em; -} - - - -/* ** Affiner les résultats - colonne de gauche / btn haut mobile ** */ -#left .search_area { - padding: .333em; - border: 1px solid gainsboro; -} - -#left .search_area .title_area { - display: none; -} - -#left .search_area .title_area_mobile.opened { - margin-bottom: .333em; -} - -#left .search_area .title_area_mobile button { - text-align: left; - background: linear-gradient(45deg, var(--primary_color) 67%, var(--primary_color_hover)); -} - -#left .search_area .content_area { - display: none; -} - -@media screen and (min-width:768px) { - #left .search_area { - padding: 0; - border: 0; - } -} - -.goog-te-banner-frame { - bottom: 0; - top: auto; -} - -.skiptranslate { - display: none !important; - visibility: hidden !important; -} - - -/******* DEBUT LISTE DE PRODUITS ******/ -.product_list_area { - display: table; - width: 100%; -} - -.category_description { - margin-bottom: 2em; - padding-left: .333em; - padding-right: .333em; -} - -.category_description strong { - font-weight: 600; -} - -.category_description h2 strong { - font-weight: inherit; -} - -.product_list_area .category_description.bottom { - display: table-caption; - caption-side: bottom; -} - -/* ** START : CAPS > BLOC VIGNETTE ** */ -@media screen and (min-width:1200px) { - .caps_area .card:hover { - /*box-shadow: 0 0 .5em 0 rgb(0 0 0 / 25%);*/ - box-shadow: 0 0.5em 1.5em 1px rgb(0 0 0 / 20%); - } - - .caps_area .card:hover .cta-button { - color: white; - background-color: var(--primary_color); - } - - .PRESTIGE .caps_area .card:hover .cta-button { - color: white; - background-color: var(--prestige_color); - } -} - -.caps_area .gotoprod { - cursor: pointer -} - -.caps_area .fav-star16 { - color: var(--bs-gray-500); -} - -.caps_area .fav-star16:hover, -.caps_area .fav-star16.active { - color: var(--primary_color); -} - -.PRESTIGE .caps_area .fav-star16:hover, -.PRESTIGE .caps_area .fav-star16.active { - color: var(--prestige_color); -} - -.search_into_oligo { - display: flex; - flex-wrap: wrap; - background: linear-gradient(45deg, gainsboro, whitesmoke); -} - -.search_into_oligo .filter { - /*display: flex;*/ - /*flex-direction: column;*/ - /*flex: 1;*/ - margin: .333em; - - flex: auto; -} - -.search_into_oligo label { - display: block; - white-space: nowrap; - font-weight: 600; - margin-bottom: .333em; -} - -.search_into_oligo select { - color: inherit; - font-family: inherit; - font-size: 1.133em; - font-weight: 600; - padding: .333em; - background-color: white; - outline: none; - - width: 100%; -} - -.search_into_oligo select:disabled { - color: silver; -} - -.search_into_oligo .reset_area { - flex-basis: 100%; -} - -.search_into_oligo .reset_area button { - margin: .333em; -} - -/* IMAGE DE LA CATEGORY */ -.category_image_area { - display: flex; - margin-bottom: 1em; -} - -.category_image_area img { - width: 100%; - height: auto !important; - margin-left: auto; - margin-right: auto; -} - -/* ** AJOUT PAGE ARTICLE E-COMMERCE ** */ -/* ok pour le CLS page article y compris desktop > large device */ -#product { - background-color: white; - padding: .667em .333em; -} - -@media screen and (min-width:576px) { - #product { - padding: 1em .667em; - } -} - -#product .breadcrumb20 { - margin-bottom: 0; -} - -#product .product_name_area { - font-size: 1.467em; - line-height: 1.2; - font-weight: bold; - margin: 15px 0 1em 0; -} - -.navigation_between_products_area { - display: none; - /* not for small devices */ -} - -/* ** IMAGES ** */ -#product .medias-area { - margin-bottom: 1em; - padding-bottom: 1em; - border-bottom: 1px solid gainsboro; -} - -#product .medias-area .main_image_area { - display: flex; - min-height: 350px; - position: relative; -} - -#product .medias-area .main_image_area #media img { - width: 100%; - height: auto !important; - margin: auto; - max-width: 550px !important; - /* car vu des images trop grandes 2000px */ - max-height: 550px !important; -} - -#product .mz-expand.dark-bg { - background-color: rgba(0, 0, 0, .7); -} - -#product .mz-expand.dark-bg button.mz-button { - color: white !important; -} - -#product .mz-expand.dark-bg button.mz-button:hover { - color: white !important; - border-color: white !important; -} - -#product .mz-hint { - bottom: .333em !important; - font-family: inherit !important; -} - -#product .mz-hint-message { - padding: 2px 10px !important; - background-color: rgba(255, 255, 255, .67); - color: grey; - border-radius: 0; - border: 1px solid gainsboro -} - -#product .mz-hint-message:before { - display: none; -} - -#product .medias-area .digimark_area { - color: grey; - font-size: .733em; - line-height: 1.1; - text-align: center; - padding-top: .667em; -} - -#product .medias-area .digimark_area br { - display: none; -} - -#product .medias-area .other_image_area { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -} - -#product .medias-area .other_image_area a { - margin: .333em; - border: 1px solid transparent; -} - -#product .medias-area .other_image_area a.mz-thumb-selected { - border-color: currentColor; -} - -#product .medias-area .other_image_area img { - width: auto !important; - height: auto !important; - max-width: 80px; - max-height: 80px; - padding: 0; - border: 0; -} - -#product .medias-area .picto_left, -#product .medias-area .picto_right { - position: absolute; - z-index: 1; - top: 0; - display: flex; - flex-direction: column; -} - -#product .medias-area .picto_left { - left: 0; - align-items: flex-start; -} - -#product .medias-area .picto_right { - right: 0; - align-items: flex-end; -} - -#product .medias-area .picto_left .item, -#product .medias-area .picto_right .item { - margin-top: .667em; -} - -#product .medias-area .picto_left .item:first-child, -#product .medias-area .picto_right .item:first-child { - margin-top: 0; -} - -#product .medias-area .picto_left .just-an-img { - width: 100px; -} - -#product .medias-area .picto_right .just-an-img { - width: 128px; -} - -#product .medias-area .picto_left .just-an-img img, -#product .medias-area .picto_right .just-an-img img { - display: flex; - max-width: 100%; - width: auto; - height: auto !important; - margin-right: auto; -} - -#product .product-area .info_bar_area { - color: white; - font-weight: bold; - padding: .2em; - margin-bottom: 1em; - background-color: darkorange; - text-align: center; - text-transform: uppercase; -} - -#product .product-area .info_bar_area h2, -#product .product-area .info_bar_area h3 { - font-size: inherit; - font-weight: inherit; - padding: 0; - margin: 0; -} - -#product .product-area .multi-misc-area { - margin-bottom: 1em; -} - -#product .product-area .description_area { - font-size: .933em; - margin-bottom: .667em; -} - -#product .product-area .description_area h2, -#product .product-area .description_area h3 { - color: inherit; - font-size: inherit; - font-weight: inherit; - padding: 0; - margin: 0; -} - -#product .product-area .remboursable_area, -#product .product-area .limit_area { - font-size: .933em; - margin: .333em 0; - color: darkorange; -} - -#product .product-area .availability_area { - font-size: .933em; - font-weight: bold; - margin-top: .667em; -} - -#product .product-area .multi-misc-area .brand_area a { - display: flex; -} - -/* ** Zone d'info pour les produits en précommande ** */ -#product .product-area .info_precommande_area { - margin-bottom: 1em; - color: var(--primary_color); - border: 1px solid rgba(249, 30, 169, .2); - padding: .333em .667em; - background-color: rgba(249, 30, 169, .07); - font-size: 1.067em; - font-weight: bold; -} - -/* ** AJOUT AU PANIER ** */ -#product .product-area .add_to_cart_box { - margin-top: 1em; -} - -.PARA #product .product-area .add_to_cart_box { - padding: 1em; - background-color: rgba(249, 30, 169, .07); - border: 1px solid rgba(249, 30, 169, .2); - border-radius: .25rem; -} - -.PARA.PRESTIGE #product .product-area .add_to_cart_box { - padding: 1em; - background-color: #f4ebdd; - border: 1px solid #efe2cd; - color: #795e34; - border-radius: .25rem; -} - -.MEDIC #product .product-area .add_to_cart_box { - padding-top: 1em; - border-top: 1px solid gainsboro; -} - -#product .product-area .select_area { - margin-bottom: .667em; -} - -#product .product-area .select_area label { - display: block; - font-size: .933em; - font-weight: bold; - margin-bottom: .2em; -} - -#product .product-area .select_area .select_line { - display: flex; - flex-wrap: wrap; -} - -#product .product-area .select_area .select_line select { - max-width: 100%; - font-family: inherit; - /*font-size: inherit;*/ - font-size: 1.2em; - font-weight: 600; - color: inherit; - padding: .333em .667em; - text-overflow: ellipsis; - /* bug sur safari mac */ - /* border: 1px solid darkgrey; */ - /* bug sur safari mac */ - /* border-radius: 0; */ - background-color: white; -} - -#product .product-area .select_area .select_line .loading { - align-self: center; - margin-left: .667em; -} - -#product .product-area .add_to_cart_area { - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: wrap; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau { - flex-basis: 100%; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .info_about_custom_price { - margin-bottom: .2em; - font-size: .867em; - font-weight: 600; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price { - margin-bottom: 1em; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price a { - text-decoration: none; - padding: .333em .667em; - font-size: 1.133em; - font-weight: 700; - margin: .333em; - color: black; - border: 1px solid currentColor; - background-color: white; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price a.selected, -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price a:hover { - color: inherit; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price input { - color: inherit; - font-family: inherit; - font-size: inherit; - text-overflow: ellipsis; - border: 1px solid #a9a9a9; - border-radius: 0; - background-color: #fff; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - - text-align: center; - font-size: 1.667em; - font-weight: bold; -} - -#product .product-area .add_to_cart_area .price_area.cheque_cadeau .chosse_price .currency { - font-size: 1.667em; - font-weight: bold; - margin-left: .333em; -} - -#product .product-area .add_to_cart_area .price_area .price_del { - font-size: .867em; - margin-bottom: .2em; -} - -#product .product-area .add_to_cart_area .price_area .price { - font-size: 2.733em; - font-weight: 600; - line-height: 1; -} - -#product .product-area .add_to_cart_area .price_area .price .currency { - font-size: .925em; - padding-left: .125em; -} - -#product .product-area .add_to_cart_area .price_area .price .tax { - font-size: .667em; - padding-left: .25em; -} - -#product .product-area .add_to_cart_area .price_area .promo { - display: none; -} - -#product .product-area .add_to_cart_area .price_area .info_about_price_medic { - font-size: 0.8em; - font-weight: 600; -} - -#product .product-area .add_to_cart_area .price_area .price_info_gbp { - margin-top: .2em; -} - -#product .product-area .add_to_cart_area .qty_area { - margin-left: .667em -} - -#product .product-area .add_to_cart_area .qty_area .label-box { - margin-bottom: .2em; -} - -#product .product-area .add_to_cart_area .qty_area .label-box label { - font-size: .867em; - font-weight: 600; -} - -#product .product-area .add_to_cart_area .qty_area .input-box select { - font-family: inherit; - font-size: 1.133em; - font-weight: 600; - color: inherit; - padding: .25em .667em; - text-overflow: ellipsis; - background-color: white; -} - -#product .product-area .add_to_cart_box .cheque_cadeau_txt_area { - flex-basis: 100%; -} - -#product .product-area .add_to_cart_box .cheque_cadeau_txt_area .info_about_txt { - margin-bottom: .2em; - font-size: .867em; - font-weight: 600; -} - -#product .product-area .add_to_cart_box .cheque_cadeau_txt_area .txt textarea { - width: 100%; - font-family: inherit; - font-size: inherit; - padding: .667em; - height: 6.667em; - text-overflow: ellipsis; - border: 1px solid darkgrey; - background-color: white; - resize: vertical; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; -} - -#product .product-area .add_to_cart_box .is_medic_area { - flex-basis: 100%; - margin-top: 1em; - padding: .667em 1.333em; - background-color: rgba(0, 204, 51, .05); - border: 1px solid rgba(0, 204, 51, .25); -} - -#product .product-area .add_to_cart_box .is_medic_area .legal_title { - font-weight: 700; - margin-bottom: .667em; -} - -#product .product-area .add_to_cart_box .is_medic_area .legal_line { - display: flex; - align-items: center; -} - -#product .product-area .add_to_cart_box .is_medic_area .input-box { - padding-right: .667em; -} - -#product .product-area .add_to_cart_box .is_medic_area .input-box input { - width: 1.333em; - height: 1.333em; - margin: 0; - padding: 0; - display: flex; -} - -#product .product-area .add_to_cart_box .is_medic_area label { - flex: 1; - cursor: pointer; -} - - -#product .product-area .add_to_cart_area .order_area { - flex-basis: 100%; - margin-top: 1.333em; -} - -#product .flash-sale-row { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin-top: 1em; - /*font-size: .933em;*/ - font-weight: 600; - background-color: black; - color: white; - padding: .333em 1em; -} - -#product .flash-sale-row .clockdiv { - font-size: 1.067em; - color: var(--primary_color); -} - -#product .flash-sale-row .my-icon-clock { - margin-right: .333em -} - -#product .flash-sale-row .txt-start { - margin-right: .333em -} - -#product .flash-sale-row .txt-end { - margin-left: .333em -} - -/* Tablette paysage ou Desktop / Computer */ -@media screen and (min-width:992px) { - #product .breadcrumb20 { - margin-bottom: 1em; - } - - .navigation_between_products_area { - visibility: visible !important; - display: flex; - color: white; - background-color: var(--primary_color); - margin-bottom: 1em; - } - - .navigation_between_products_area a { - text-decoration: none; - } - - .PRESTIGE .navigation_between_products_area { - background-color: var(--prestige_color) - } - - - .navigation_between_products_area .arrow .item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - font-size: 1.333em; - color: inherit; - } - - .navigation_between_products_area .arrow button.item { - width: 100%; - border: 0; - font-family: inherit; - background-color: transparent; - padding: 0; - margin: 0; - cursor: pointer; - outline: none; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - } - - .navigation_between_products_area .links_area { - flex: 1; - display: flex; - justify-content: space-between; - } - - .navigation_between_products_area .links_area a { - display: flex; - align-items: center; - flex: 1; - color: inherit; - font-size: .867em; - line-height: 1.2; - margin: .333em; - } - - .navigation_between_products_area .links_area a:hover { - text-decoration: underline; - } - - .navigation_between_products_area .links_area a:first-child { - justify-content: flex-start; - text-align: left; - } - - .navigation_between_products_area .links_area a:last-child { - justify-content: flex-end; - text-align: right; - } - - #product .product_name_area { - font-size: 1.8em; - } - - #product .main-area { - display: flex; - } - - #product .c_medias_area { - min-width: 37.5%; - } - - #product .medias-area { - margin-bottom: 0; - margin-right: 2em; - padding-bottom: 0; - border-bottom: 0; - } - - #product .medias-area .digimark_area { - text-align: right; - } - - #product .medias-area .digimark_area br { - display: block; - } - - #product .medias-area.exists_other_images { - display: flex; - position: relative; - margin-bottom: 3em; - } - - #product .medias-area.exists_other_images .other_image_area { - order: 1; - margin-right: .667em; - flex-direction: column; - align-self: flex-start; - } - - #product .medias-area.exists_other_images .main_image_area { - order: 2; - flex: 1; - } - - #product .medias-area.exists_other_images .digimark_area { - position: absolute; - top: 100%; - right: 0; - } - - #product .product-area { - flex: 1; - } - - #product .product-area .add_to_cart_area .qty_area { - min-width: 6.667em; - } - - #product .product-area .add_to_cart_area .qty_area .input-box select { - width: 100%; - } -} - -/* Blocs interne zone de droite */ -@media screen and (min-width:576px) { - #product .product-area .multi-misc-area { - display: flex; - } - - #product .product-area .multi-misc-area .desc { - flex: 1; - align-self: center; - } - - #product .product-area .multi-misc-area .brand_area { - margin-left: .667em; - } -} - -/* fin page article */ - -/* MY-ALERT */ -.my-alert { - display: inline-block; - width: 100%; - padding: .333em .667rem; - margin-bottom: 1em; - border-width: 1px; - border-style: solid; - border-color: silver; - background-color: whitesmoke; -} - -.my-alert.my-alert-fail { - border-color: #C00; - background-color: #FFF2F2 -} - -.my-alert.my-alert-fail.my-alert-use-same-color { - color: #C00 -} - -.my-alert.my-alert-fail.my-alert-use-same-color a:hover { - color: inherit; -} - -.my-alert.my-alert-fail.my-alert-use-same-color .my-hr { - border-color: #C00 -} - -.my-alert.my-alert-success { - border-color: #393; - background-color: #EFE -} - -.my-alert.my-alert-success.my-alert-use-same-color { - color: #393 -} - -.my-alert.my-alert-success.my-alert-use-same-color .my-hr { - border-color: #393 -} - -.my-alert a { - color: inherit -} - -.my-alert p { - margin: .25em 0 -} - -/* PAGES LUXE */ -.page_luxe_template { - margin-bottom: 2em; -} - -.page_luxe_template .luxe-menu { - margin-bottom: 2em; -} - -.luxe-menu .trees { - padding: 0; - margin: 0; - list-style-type: none; - border: 1px solid gainsboro; -} - -.luxe-menu .trees a { - text-decoration: none; -} - -.luxe-menu .trees .lvl1 { - border-top: 1px solid gainsboro; - background-color: whitesmoke; -} - -.luxe-menu .trees .lvl1:first-child { - border-top: 0; -} - -.luxe-menu .trees .lvl1 .main { - display: flex; - width: 100%; - justify-content: space-between; - - padding-top: .333em; - padding-bottom: .333em; - /*font-size: .933em;*/ - /* too small for mobile */ - /*background: linear-gradient(90deg, black, dimgrey);*/ - background: linear-gradient(90deg, #333 67%, #666); - background-color: black; - color: white; -} - -.luxe-menu .trees .lvl1.current .main { - background: silver; - background-color: silver; -} - -.PARA .luxe-menu .trees .lvl1.current .main { - background: linear-gradient(90deg, #f91ea9 67%, #E01B98); - background-color: var(--primary_color); -} - -.MEDIC .luxe-menu .trees .lvl1.current .main { - background: linear-gradient(45deg, #00cc33 67%, #009900); - background-color: var(--primary_color); -} - -.PRESTIGE .luxe-menu .trees .lvl1.current .main { - background: linear-gradient(45deg, #c99d57 67%, darkgoldenrod); - background-color: var(--prestige_color); -} - -.luxe-menu .trees .lvl1 .main a.text { - flex: 1; - color: inherit; - font-weight: bold; - padding: .2em .667em; -} - -.luxe-menu .trees .lvl1 .main .badge { - align-self: center; - color: inherit; - line-height: normal; - font-weight: normal; - font-size: .733em; - background-color: gainsboro; - border-radius: 0; - padding: .25em .5em; - margin-right: .667em; - min-width: 2.25em; - text-align: center; -} - -.luxe-menu .trees .lvl1 .main button { - display: flex; - justify-content: center; - align-items: center; - color: inherit; - font-family: inherit; - background-color: transparent; - border-width: 0 0 0 1px; - border-style: solid; - border-color: gainsboro; - cursor: pointer; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - -webkit-tap-highlight-color: transparent; -} - -.luxe-menu .trees .lvl1 .lvl2 { - display: none; - padding: 0; - margin: 0; - list-style-type: none; - color: black; - background-color: whitesmoke; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel { - display: flex; - width: 100%; - justify-content: space-between; - border-top: 1px solid gainsboro; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel.current { - background: linear-gradient(-90deg, whitesmoke, white); - background-color: white; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel a.text { - flex: 1; - color: inherit; - padding: .5em 1.333em; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel.current a.text { - font-weight: 600; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel:hover a.text { - text-decoration: underline; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel .badge { - align-self: center; - color: inherit; - line-height: normal; - font-weight: normal; - font-size: .733em; - color: black; - background-color: gainsboro; - border-radius: 0; - padding: .25em .5em; - margin-right: .667em; - min-width: 2.25em; - text-align: center; -} - -.luxe-menu .trees .lvl1 .lvl2 .sublevel.current .badge { - color: white; - background-color: silver; -} - -.page_luxe_template .luxe-content .logo_area { - margin-bottom: 1em; - display: flex; - justify-content: center; -} - -.page_luxe_template .luxe-content .description_area { - margin-bottom: 2em; -} - -.page_luxe_template .luxe-content .image_area { - margin-bottom: 2em; -} - -.page_luxe_template .luxe-content .video_area { - margin-bottom: 2em; -} - -.page_luxe_template .luxe-content .video_area iframe { - height: 55vw; -} - -@media screen and (min-width:992px) { - .page_luxe_template { - display: flex; - } - - .page_luxe_template .luxe-menu { - flex-basis: 20%; - max-width: 310px; - min-width: 200px; - margin-right: 1em; - margin-bottom: 0; - } - - .luxe-menu .trees .lvl1 .lvl2 { - max-height: none; - } - - .page_luxe_template .luxe-content { - flex: 1; - border-left: 1px solid black; - padding-left: 1em; - } - - .page_luxe_template .luxe-content .logo_area { - justify-content: flex-start; - } - - .page_luxe_template .luxe-content .video_area iframe { - height: 50vh; - } -} - - -/**** MOVE FROM BUILD SASS ****/ -#sav-module h1 { - margin: 0; -} - -#tarteaucitron { - position: absolute !important; - top: 50px !important; -} - -.page header { - width: 99vw; - height: auto; - overflow: hidden; -} - -.page img { - display: block; - width: 100%; - -o-object-fit: cover; - object-fit: cover; -} - -.notification { - font-size: 1rem; - width: 360px; - height: 110px; - z-index: 9000; - position: fixed; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - padding: 20px; - margin: 0.5rem 0 1rem 0; - border-radius: 2px; - background-color: #fff; -} - -.notification .dismiss { - font-size: 0.85rem; - top: 10px; - right: 10px; - width: 20px; - height: 20px; - color: #fff; - text-align: center; - line-height: 20px; - overflow: hidden; - position: absolute; - background-color: #B8B8B8; - border-radius: 50%; -} - -.notification .illustration { - margin-right: 20px; - width: 60px; - text-align: center; - height: 70px; - color: #f91ea9; - float: left; -} - -.notification .illustration i { - font-size: 2.8rem; -} - -.notification .illustration img { - border-radius: 50%; -} - -.notification .text .title { - font-size: 16px; - font-weight: bold; -} - -#premium-zone .bg-gold { - background-color: #f6d165; - background-image: linear-gradient(0deg, #f6d165 0%, #eac455 75%); -} - -#premium-zone .btn-gold { - font-size: 1.2rem; -} - -#premium-zone .bg-grey-light { - background-color: #f3f1f1; -} - -#premium-zone .text-gold { - color: #f6d165; -} - -#premium-zone .btn-gold i { - color: black; -} - -#premium-zone .bg-black { - color: white; - background-color: #313540; -} - -#premium-zone .bg-opacity { - background-color: #313540; - opacity: 0.5; -} - -#premium-zone .price { - font-size: 2rem; - font-weight: bold; -} - -#premium-zone .service-desc ul li i { - color: #f6d165; - margin-right: 10px; -} - -#premium-zone .service-desc ul { - list-style: none; -} - -#premium-zone .service-desc ul li { - margin: 20px 0; -} diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Wizard.vue b/src/components/Wizard.vue index 55d9d8e..9533790 100644 --- a/src/components/Wizard.vue +++ b/src/components/Wizard.vue @@ -19,7 +19,7 @@ export default { setup() { const stepList = [ { - class: 'fa-regular fa-location-dot fa-fw', + class: 'fa-solid fa-location-dot fa-fw', name: 'Mon adresse', path: '/address-check', stepNumber: 1 diff --git a/src/main.js b/src/main.js index 4cebc21..96884f6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,12 @@ import { createApp } from 'vue' import './style.css' -import './assets/common_css.css' + import './assets/bootstrap-para.css' import fontawesome from '@fortawesome/fontawesome-free/css/fontawesome.css' import brands from '@fortawesome/fontawesome-free/css/brands.css' import solid from '@fortawesome/fontawesome-free/css/solid.css' +import regular from '@fortawesome/fontawesome-free/css/regular.css' + import App from './App.vue' import router from "./router/index" diff --git a/src/router/index.js b/src/router/index.js index 03c911b..9d5eacb 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -41,7 +41,7 @@ const routes = [ ] const router = createRouter({ - history: createWebHistory('/Mon-ordonnance-livree-a-domicile/p/4/11046/103652/'), + history: createWebHistory('/Mon-ordonnance-livree-a-domicile/p/3/11178/0/'), routes, }) diff --git a/src/stores/mmcm.js b/src/stores/mmcm.js index 505f3f2..8f16699 100644 --- a/src/stores/mmcm.js +++ b/src/stores/mmcm.js @@ -11,7 +11,7 @@ export const useMMCMStore = defineStore('counter', { dateDelivery: null }), getters: { - fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city, + fullAddress: (state) => state.street + ' ' + state.zipCode + ' ' + state.city, deliveryMethod: (state) => state.productList.filter(p => p.id === state.idProduct)[0].name, dateDeliveryString: (state) => new Date(state.dateDelivery).toLocaleDateString("fr-FR") }, diff --git a/src/style.css b/src/style.css index 1f246be..d8d1112 100644 --- a/src/style.css +++ b/src/style.css @@ -2,10 +2,30 @@ /*@tailwind components;*/ /*@tailwind utilities;*/ +@import 'https://fonts.googleapis.com/css?family=Montserrat'; + +.step_title{ + text-align: left; + font-size: 1.125rem; + font-weight: 700; + color: #000; + font-family: 'Montserrat',sans-serif; + margin-bottom: 30px +} + +.step_title:after { + width: 85px; + height: 3px; + background-color: #f91ea9; + content: ""; + display: block; + margin: 10px 0 0; +} #app { max-width: 1280px; - margin: 0 auto; + margin: 1rem auto; padding: 2rem; - text-align: center; + font-family: 'Montserrat',sans-serif; + background-color: #fff;; } diff --git a/src/views/address-check.vue b/src/views/address-check.vue index bc57785..3c8b160 100644 --- a/src/views/address-check.vue +++ b/src/views/address-check.vue @@ -4,7 +4,7 @@
- +
-
{{ product.name }}
+
{{ product.name }}
-

{{ text[i].short }}

-

{{ text[i].long }}

- +
+
@@ -19,30 +18,11 @@ import {useMMCMStore} from '../stores/mmcm.js' export default { setup() { - - const text = [{ - short: 'Dès aujourd’hui en moins de 2 h.', - long: '\n' + - 'En express\n' + - 'dès aujourd’hui en moins de 2 h.\n' + - 'La collecte de l’ordonnance originale et des documents de santé dans une enveloppe fermée et la livraison des médicaments sont réalisées en moins de 2 heures, du lundi au samedi.' - - }, - { - short: 'Dès aujourd’hui en moins de 2 h.', - long: '\n' + - 'En express\n' + - 'dès aujourd’hui en moins de 2 h.\n' + - 'La collecte de l’ordonnance originale et des documents de santé dans une enveloppe fermée et la livraison des médicaments sont réalisées en moins de 2 heures, du lundi au samedi.' - - } - ] - - const store = useMMCMStore() + + console.log(store.productList) return { - store, - text + store } }, name: "delivery-option-step-2", diff --git a/src/views/delivery-option-summary.vue b/src/views/delivery-option-summary.vue index 025118e..4a2419e 100644 --- a/src/views/delivery-option-summary.vue +++ b/src/views/delivery-option-summary.vue @@ -36,15 +36,16 @@ export default { addToCart: async function (idProduct) { this.suspens = true const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + this.store.idProduct - + '&with_prescription=' + this.store.widthPrescription + + '&with_prescription=' + this.store.withPrescription + '&date_delivery=' + this.store.dateDelivery + //+ '&ID_SESSION=0CuKKzvR' ; const result = await fetch(urlApi) .then(response => { if (response.ok) { this.suspens = false - this.$router.push({path : '/final-step'}) + this.$router.push({path: '/final-step'}) return response.json(); } }) diff --git a/src/views/final-step.vue b/src/views/final-step.vue index be45d17..98de90b 100644 --- a/src/views/final-step.vue +++ b/src/views/final-step.vue @@ -1,9 +1,9 @@