[WIP] Добавил отображение услуг на форме создания записи, фикс стилей

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -5,13 +5,13 @@
         .flex.gap-x-3.items-center
           .text.font-semibold Статус
           .flex.gap-x-1
-            .input.flex.items-center.pl-4.gap-x-1
+            .input.flex.items-center.pl-4.gap-x-1.rounded-md
               img(:src="currentStatus.icon")
-              .text-input.font-medium {{currentStatus.name}}
+              .dark-blue.font-medium {{currentStatus.name}}
-            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+            q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
               img(:src="folder")
               q-menu
-                .status.flex.items-center.gap-x-1.font-medium.text-smm(
+                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
                   v-for="status in patientData.statuses",
                   @click="choiceStatus(status)",
                   v-close-popup
@@ -21,9 +21,9 @@
         .flex.gap-x-3.items-center
           .text.font-semibold Дата:
           .flex.gap-x-1
-            .input.flex.items-center.pl-4
+            .input.flex.items-center.pl-4.rounded-md
-              .text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
+              .dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
-            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+            q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
               img(:src="calendar")
               q-menu(
                 transition-show="scale",
@@ -35,42 +35,48 @@
         .flex.gap-x-3.items-center
           .text.font-semibold Время:
           .flex.gap-x-1
-            .input.flex.items-center.pl-4
+            .input.flex.items-center.pl-4.rounded-md
-              .text-input.font-medium 13:00 - 14:00
+              .dark-blue.font-medium 13:00 - 14:00
-            q-btn.change.flex.w-7.h-7(@click="isShowTime = true", dense, padding="4px 4px")
+            q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
               img(:src="time")
             base-modal(v-model="isShowTime", title="Время", modal-padding)
               base-time-modal(:times="times", :close-modal-time="closeModalTime")
       .flex.h-14.gap-x-3.items-center.text-smm
         .text.font-semibold Медкарта:
         .flex.gap-x-1 
-          .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
+          .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
             .photo.flex.h-10.w-10.items-center.justify-center
               img(:src="noname")
             .flex.flex-col.font-medium
-              .text-input Имя Фамилия
+              .dark-blue Имя Фамилия
-              .name-date.text-xsx Дата
+              .grey-color.text-xsx.rounded-md Дата
-          .change.flex.items-center
+          .change.flex.items-center.rounded-md
             q-btn(dense, padding="24px 8px")
               q-icon(name="app:icon-plus", size="12px")
     .flex.items-center.gap-x-3.text-smm
       .text.font-semibold Услуги:
       .flex.gap-x-1
-        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9(
+        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
           :class="{'other-serivices': services.length}"
         )
-          span(v-if="!services.length") Выберите услуги
+          .service.flex.gap-x-1.items-center.rounded.relative(
-          .service.flex.px-4.items-center(
+            :style="{ width: color ? '415px' : 'full'}"
-            id="miDuv",
+          )
-            v-else,
+            span(v-if="!services.length") Выберите услуги
-            v-for="service in services",
+            .dark-blue.flex.px-4.items-center.rounded.h-7(
-            :style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
+              id="service",
-          ) {{service.name}}
+              v-else,
-          .other.flex.h-7.items-center.justify-center(
+              v-for="service in services",
+              :style="{background: service.color}"
+            ) {{service.name}}
+            .gradient.flex.absolute(
+              :style="{background: `linear-gradient(270deg, ${color} 0%, rgba(247, 217, 255, 0) 100%)`}"
+            )
+          .other.flex.h-7.items-center.justify-center.rounded(
             v-if="services.length > 3"
           ) {{`+${services.length - 3}`}}
-        .price.flex.items-center.items-center.justify-center(v-if="services.length") {{sumService}}
+        .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
           img(:src="folder")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
@@ -165,6 +171,10 @@ export default {
       services: [
         { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
         { id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
+        { id: 2, name: "Чистка", price: 500, color: "#D8E3FF" },
+        { id: 3, name: "Осмотр", price: 1300, color: "#FFF0CA" },
+        { id: 4, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
+        { id: 5, name: "Осмотр", price: 1300, color: "#FFF0CA" },
       ],
       forms: [
         {
@@ -190,6 +200,7 @@ export default {
       ],
       currentForm: "form-create-basic-info",
       networksSettings: column.find((el) => el.name === "networks")?.settings,
+      color: null,
     };
   },
   computed: {
@@ -239,6 +250,19 @@ export default {
     closeModalTime() {
       this.isShowTime = false;
     },
+    addShadow() {
+      let num = 415;
+      let arr = [];
+      const target = document.querySelectorAll("#service");
+      target.forEach((e) => {
+        num = num - e.offsetWidth;
+        if (num <= 10) return arr.push(e);
+      });
+      this.color = arr[0]?.__vnode?.props?.style.background;
+    },
+  },
+  mounted() {
+    this.addShadow();
   },
 };
 </script>
@@ -247,12 +271,13 @@ export default {
 .input
   width: 200px
   background: var(--bg-light-grey)
-  border-radius: 6px
 
-.text-input
+.dark-blue
   color: var(--font-dark-blue-color)
+  min-width: 50px
 
-.name-date
+
+.grey-color
   color: var(--font-grey-color)
 
 .text
@@ -261,12 +286,10 @@ export default {
 
 .change
   background: var(--bg-light-grey)
-  border-radius: 6px
   color: var(--font-grey-color)
 
 .name
   background: var(--bg-light-grey)
-  border-radius: 6px
   border-bottom-color: var(--border-light-grey-color)
   border-bottom-width: 4px
   width: 200px
@@ -278,30 +301,31 @@ export default {
 .services
   background: var(--bg-light-grey)
   color: var(--font-grey-color)
-  border-radius: 6px
   width: 560px
 
 .service
-  color: var(--font-dark-blue-color)
+  display: -webkit-box
-  border-radius: 4px
+  overflow: hidden
+
+.gradient
+  width: 5%
   height: 28px
+  right: 0
 
 .other-serivices
   width: 474px
   padding: 4px
-  border: 1px solid #D3D4DC
+  border: 1px solid var(--border-light-grey-color)
   background: var(--default-white)
 
 .other
   width: 46px
-  height: 28px
   background: var(--bg-light-grey)
 
 .price
   background: var(--bg-light-grey)
-  border-radius: 6px
   width: 82px
-  color: #9294A7
+  color: var(--font-grey-color)
 
 .title-info
   color: var(--font-grey-color)
@@ -319,8 +343,6 @@ export default {
   padding: 16px 32px 0px 32px
 
 .status
-  border-radius: 4px
-  height: 28px
   padding: 8px 8px 8px 5px
   &:hover
     background: var(--bg-light-grey)