Merge pull request #51 from IBEC-BOX/slider

update slider
IBEC-BOX · Feb 13, 2024 · dc66925 · dc66925
2 parents 11027ed + a4f001c
commit dc66925
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 98 deletions.
diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
@@ -3,45 +3,15 @@
     <partsHeaderErg />
     <NuxtPage />
     <v-container>
-      <partsCard
-        :date-author-right="true"
-        :horizontal-card="true"
-        :max-width="700"
-        :horizontal-width-image="300"
-        :image="{
-          src: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
-          attrs: {
-            class: 'rounded-circle',
-            'max-width': 86,
-            height: 86,
-            cover: true,
-          },
-        }"
-        variant-card="elevated"
-        style-card="standard"
-        title="Железнорудные окатыши"
-        text="СТ АО ССГПО-11402-2022"
-        title-class="text-h4"
-        title-style="width: 280px"
-        text-style="cursor: pointer"
-        text-class="text-black"
-        :gap="24"
-        card-class="px-12 py-13"
-        card-color="primary"
-        card-rounded="xl"
-        :hover-text="true"
-        :text-image="{
-          src: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
-          attrs: {
-            class: 'rounded-circle',
-            'max-width': 20,
-            height: 20,
-            cover: true,
-          },
-        }"
-        :modal="true"
-        :modal-img="'https://www.figma.com/file/4olLWc8CXyZmkwje9SuEah/image/2d13c92b16b427ccd0b154544ab7922d50edb16c'"
-      />
+      <partsSlider
+        :slides="sliders"
+        :sliderPagination="true"
+        :showButtons="false"
+        slider-direction="vertical"
+        :sliderPaginationActiveVariant="'white'"
+      >
+
+      </partsSlider>
     </v-container>
 
     <partsFooterDefault
@@ -60,11 +30,122 @@
   </v-app>
 </template>
 
-<script setup></script>
+<script setup>
+const sliders = [
+  {
+    id: 0,
+    chip: {
+      text: 'abvgd',
+      attrs: {
+        class: 'mt-12 mb-8',
+        color: 'primary'
+      }
+    },
+    title: 'АО «ССГПО» — крупнейшее градообразующее предприятие\n' +
+      'страны по переработке железных руд, доломита, известняка, строительного щебня',
+    subtitle: 'Рынки сбыта: Казахстан, Россия, Китай ',
+    titleAttrs: {
+      class: 'text-white mb-4 text-h4'
+    },
+    textBlockAttrs: {
+      class: 'justify-start'
+    },
+    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    buttons: [
+      {
+        id: 0,
+        text: 'Large button',
+        attrs: {
+          size: 'large',
+          color: 'primary',
+          class: 'text-body-1',
+        }
+      }
+    ],
+    active: true,
+  },
+  {
+    id: 1,
+    chip: {
+      text: 'abvgd',
+      attrs: {
+        color: 'primary'
+      }
+    },
+    title: 'Экологические акции',
+    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
+    textBlockAttrs: {
+      class: ''
+    },
+    subTitleAttrs: {
+      class: 'text-primary'
+    },
+    titleAttrs: {
+      class: 'text-primary text-h5 w-75'
+    },
+    img: {
+      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
+      attrs: {
+        'max-height': 400,
+        'max-width': '98%',
+        class: 'rounded-xl'
+      }
+    },
+    active: false,
+  },
+  {
+    id: 2,
+    chip: {
+      text: 'abvgd',
+      attrs: {
+        color: 'primary'
+      }
+    },
+    title: 'Экологические акции',
+    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
+    textBlockAttrs: {
+      class: ''
+    },
+    subTitleAttrs: {
+      class: 'text-primary'
+    },
+    titleAttrs: {
+      class: 'text-primary text-h5 w-75'
+    },
+    img: {
+      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
+      attrs: {
+        'max-height': 400,
+        'max-width': '98%',
+        class: 'rounded-xl'
+      }
+    },
+    active: false,
+  },
+]
+</script>
 
-<style>
+<style lang="scss">
 /* Redundant unused code to test treeshaking */
 .unused-selector-app {
   color: orange;
 }
+.slider_pagination_container {
+  top: 116px;
+  left: -30px;
+  .slider_pagination {
+    flex-direction: column;
+    gap: 0;
+    background: #ffffff61;
+    border-radius: 50px;
+    .slider-pagination-bullet {
+      width: 6px;
+      height: 66px;
+    }
+    .slider-pagination-bullet, .slider-pagination-dot {
+      border-radius: 50px;
+      background: none;
+    }
+  }
+}
 </style>
diff --git a/src/runtime/components/Parts/Card.vue b/src/runtime/components/Parts/Card.vue
@@ -85,9 +85,8 @@
   </v-card>
   <v-card
     v-else-if="styleCard === 'vacancy'"
-    :max-width="+maxWidth + 'px'"
-    :min-height="+minHeight == '' ? 100 + '%' : minHeight"
     :variant="variantCard"
+    v-bind="cardAttrs"
     class="card-vacancy px-2 py-4 w-100"
   >
     <v-card-title

diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
@@ -223,7 +223,7 @@
 
         <!-- Control buttons -->
         <div
-          v-if="controlButtonsAlign === 'bottom'"
+          v-if="controlButtonsAlign === 'bottom' && showButtons"
           class="d-flex ml-auto"
         >
           <v-btn
@@ -326,6 +326,11 @@ const props = defineProps({
     type: String,
     default: "bottom",
   },
+
+  showButtons: {
+    type: Boolean,
+    default: true
+  }
 });
 
 // Slider ref

diff --git a/src/runtime/plugins/vuetify/styles.css b/src/runtime/plugins/vuetify/styles.css
diff --git a/src/runtime/plugins/vuetify/styles.css.map b/src/runtime/plugins/vuetify/styles.css.map