проекте Vue-Pizza

frontend/package.json

@@ -13,6 +13,8 @@
     "axios": "^1.6.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
+    "primeicons": "^7.0.0",
+    "primevue": "^3.53.1",
     "vue": "^3.3.8",
     "vue-router": "^4.5.0"
   },

frontend/src/App.vue

@@ -9,3 +9,8 @@
 import AppLayout from "@/layouts/AppLayout.vue";
 import HomeView from "@/views/HomeView.vue"; 
 </script>
+
+<style lang="scss">
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+</style>

frontend/src/assets/scss/card.scss

@@ -0,0 +1,288 @@
+.layout-form {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .cart__title {
+    margin-bottom: 15px;
+  }
+
+  .cart__additional {
+    margin-top: 15px;
+    margin-bottom: 25px;
+  }
+
+  .cart__empty {
+    padding: 20px 30px;
+  }
+
+  .cart-form {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .cart-form__select {
+    display: flex;
+    align-items: center;
+
+    margin-right: auto;
+
+    span {
+      margin-right: 16px;
+    }
+  }
+
+  .cart-form__label {
+    @include b-s16-h19;
+
+    white-space: nowrap;
+  }
+
+  .cart-form__address {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .cart-form__input {
+    flex-grow: 1;
+
+    margin-bottom: 20px;
+    margin-left: 16px;
+
+    &--small {
+      max-width: 120px;
+    }
+  }
+
+  .cart-list {
+    @include clear-list;
+
+    padding: 15px 0;
+  }
+
+  .cart-list__item {
+    display: flex;
+    align-items: flex-start;
+
+    margin-bottom: 15px;
+    padding-right: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+
+    border-bottom: 1px solid rgba($green-500, 0.1);
+
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+
+      border-bottom: none;
+    }
+  }
+
+  .cart-list__product {
+    flex-grow: 1;
+
+    margin-right: auto;
+  }
+
+  .cart-list__counter {
+    width: 54px;
+    margin-right: auto;
+    margin-left: 20px;
+  }
+
+  .cart-list__price {
+    min-width: 100px;
+    margin-right: 36px;
+    margin-left: 10px;
+
+    text-align: right;
+
+    b {
+      @include b-s16-h19;
+    }
+  }
+
+  .cart-list__edit {
+    @include l-s11-h13;
+
+    cursor: pointer;
+    transition: 0.3s;
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    &:hover {
+      color: $green-500;
+    }
+
+    &:active {
+      color: $green-600;
+    }
+
+    &:focus {
+      color: $green-400;
+    }
+  }
+
+  .product {
+    display: flex;
+    align-items: center;
+  }
+
+  .product__text {
+    margin-left: 15px;
+
+    h2 {
+      @include b-s18-h21;
+
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    ul {
+      @include clear-list;
+      @include l-s11-h13;
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+
+    margin-top: auto;
+    padding: 25px 2.12%;
+
+    background-color: rgba($green-500, 0.1);
+  }
+
+  .footer__more {
+    width: 220px;
+    margin-right: 16px;
+
+    a {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+  }
+
+  .footer__text {
+    @include l-s11-h13;
+
+    color: rgba($black, 0.5);
+  }
+
+  .footer__price {
+    @include b-s24-h28;
+
+    margin-right: 12px;
+    margin-left: auto;
+  }
+
+  .footer__submit {
+    button {
+      padding: 16px 14px;
+    }
+  }
+
+  .additional-list {
+    @include clear-list;
+
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .additional-list__description {
+    display: flex;
+    align-items: flex-start;
+
+    margin: 0;
+    margin-bottom: 8px;
+  }
+
+  .additional-list__item {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+
+    width: 200px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+
+    img {
+      margin-right: 10px;
+      margin-left: 15px;
+    }
+
+    span {
+      @include b-s14-h16;
+
+      display: inline;
+
+      width: 100px;
+      margin-right: 15px;
+    }
+  }
+
+  .additional-list__wrapper {
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: auto;
+    padding-top: 18px;
+    padding-right: 15px;
+    padding-left: 15px;
+
+    border-top: 1px solid rgba($green-500, 0.1);
+  }
+
+  .additional-list__counter {
+    width: 54px;
+    margin-right: auto;
+  }
+
+  .additional-list__price {
+    @include b-s16-h19;
+  }
+
+  .select {
+    @include r-s16-h19;
+
+    display: block;
+
+    margin: 0;
+    padding: 8px 16px;
+    padding-right: 30px;
+
+    cursor: pointer;
+    transition: 0.3s;
+
+    color: $black;
+    border: 1px solid $purple-400;
+    border-radius: 8px;
+    outline: none;
+    background-color: $silver-100;
+    background-image: url("@/assets/img/select.svg");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    font-family: inherit;
+    appearance: none;
+
+    &:hover {
+      border-color: $orange-100;
+    }
+
+    &:focus {
+      border-color: $green-500;
+    }
+  }