[WIP] Изменил таблицу расписания в соответствии с макетом, правка стилей

src/pages/schedule/components/ScheduleTableHeader.vue

@@ -1,21 +1,26 @@
 <template lang="pug">
-  .table-header.flex.w-full.pr-2
-    .flex.items-center.justify-center.pl-11(
-      :style="{width: 'calc(25% + 43px)'}"
+  .table-header.flex.w-full.pr-2.pl-6
+    .flex.items-center.pr-9.justify-between(
+      :style="{minWidth: '357px', maxWidth: '357px'}"
     )
-      .text.font-bold Сотрудник
-    .column-wrapper.flex
-      .flex.flex-col.items-center.justify-center.w-11(
-        v-for="day in result",
-        :class="{'column-color': changelColumnColor(day)}",
-        :style="{width: `calc(100% / ${result.length})`}"
+      .text.font-semibold.text-sm Сотрудники
+      q-icon(
+        name="app:icon-sort-number",
+        size="12px",
+        style="color: var(--font-dark-blue-color)"
       )
-        .text.flex.font-bold(
-          :style="{opacity: changeOpacity(day)}"
-        ) {{day.format("D")}}
-        .text.flex.font-bold(
-          :style="{opacity: changeOpacity(day)}"
-        ) {{day.format("ddd")}}
+    .flex
+      .flex.items-center.justify-center.w-11(
+        v-for="day in result",
+        :class="{'column-color': changeColumnColor(day)}",
+        :style="{width: '82px'}"
+      )
+        .text.flex.font-semibold.text-smm(
+          :style="{color: changeColor(day)}"
+        ) {{day.format("D") + "\xa0"}}
+        .text.flex.font-semibold.text-smm(
+          :style="{opacity: '0.5', color: changeColor(day)}"
+        ) {{formatDay(day)}}
 </template>
 
 <script>
@@ -23,34 +28,36 @@ export default {
   name: "ScheduleTableHeader",
   props: { result: Array },
   methods: {
-    changelColumnColor(day) {
+    changeColumnColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
         ? true
         : false;
     },
-    changeOpacity(day) {
+    changeColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
-        ? "0.6"
-        : "1";
+        ? "var(--border-red-color)"
+        : null;
+    },
+    formatDay(day) {
+      let str = day.format("ddd");
+      return str.charAt(0).toUpperCase() + str.slice(1) + ".";
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.text
+  color: var(--font-grey-color)
+
 .table-header
-  height: 50px
-  background-color: #D7D9FF
+  overflow: hidden
+  height: 36px
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
   border-top-left-radius: 2px
   border-top-right-radius: 2px
   color: var(--btn-blue-color)
 
-.column-wrapper
-  overflow: auto
-  overflow-x: hidden
-  width: calc(75% - 44px)
-
 .column-color
   background-color: var(--bg-white-color-1)
 </style>