Merge pull request #80 from IBEC-BOX/ErgVacancies

Erg vacancies
IBEC-BOX · Feb 23, 2024 · 966716e · 966716e
2 parents 8b06d62 + fb58bac
commit 966716e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 189 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -2,7 +2,18 @@ export default defineNuxtConfig({
   modules: ['../src/module', '@pinia/nuxt'],
   nuxt3UIKit: {
     theme: 'dark',
-    components: ['pagesTestVuetify', 'partsFooterDefault', 'partsCard', 'partsForms', 'partsErgVacancies', 'partsHeaderDefault', 'partsHeaderErg']
+    components: [
+      'pagesTestVuetify',
+      'partsFooterDefault',
+      'partsCard',
+      'partsForms',
+      'partsErgVacancies',
+      'partsHeaderDefault',
+      'partsHeaderErg',
+      'partsSlider',
+      'partsNews',
+      'partsModal',
+    ]
   },
   devtools: { enabled: true },
   build: {

diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
@@ -5,21 +5,7 @@
     />
     <NuxtPage />
     <section class="h-100">
-      <v-container id="slider" class="bg-amber px-4">
-
-        <partsSlider
-          id="slider"
-          :slides="sliderAbout"
-          :show-buttons="false"
-          slider-direction="vertical"
-          :slider-pagination-active-variant="'white'"
-          :height="'400px'"
-          :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"
-          :controlScroll="controlScroll"
-          :slider-background-image-zoom="true"
-          :slider-background-image-zoom-scale="3"
-        />
-
+      <v-container class="bg-amber px-4">
 
         <partsSlider
           :slider-loop="true"
@@ -36,6 +22,7 @@
           control-buttons-align="left-bottom"
           :slider-pagination="true"
           :slider-pagination-type="'dot'"
+          :sliderPaginationCenter="true"
         />
 
 
@@ -100,160 +87,10 @@
         text: '2023 Untitled UI. All rights reserverd'
       }"
     />
-    <partsFooterDefault
-      id="footer"
-      :logo-in-body="true"
-      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
-      nav-class="text-h6 text-black"
-      :nav="[
-        { id: 1, text: 'Overview', to: '/' },
-        { id: 2, text: 'Features', to: '/' },
-        { id: 3, text: 'Pricing', to: '/' },
-        { id: 4, text: 'Careers', to: '/' },
-        { id: 5, text: 'Help centre', to: '/' },
-        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
-      ]"
-      :copyright="{
-        text: '2023 Untitled UI. All rights reserverd'
-      }"
-    />
-    <partsFooterDefault
-      id="footer"
-      :logo-in-body="true"
-      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
-      nav-class="text-h6 text-black"
-      :nav="[
-        { id: 1, text: 'Overview', to: '/' },
-        { id: 2, text: 'Features', to: '/' },
-        { id: 3, text: 'Pricing', to: '/' },
-        { id: 4, text: 'Careers', to: '/' },
-        { id: 5, text: 'Help centre', to: '/' },
-        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
-      ]"
-      :copyright="{
-        text: '2023 Untitled UI. All rights reserverd'
-      }"
-    />
-    <partsFooterDefault
-      id="footer"
-      :logo-in-body="true"
-      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
-      nav-class="text-h6 text-black"
-      :nav="[
-        { id: 1, text: 'Overview', to: '/' },
-        { id: 2, text: 'Features', to: '/' },
-        { id: 3, text: 'Pricing', to: '/' },
-        { id: 4, text: 'Careers', to: '/' },
-        { id: 5, text: 'Help centre', to: '/' },
-        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
-      ]"
-      :copyright="{
-        text: '2023 Untitled UI. All rights reserverd'
-      }"
-    />
   </v-app>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue";
-
-const sliderAbout = [
-  {
-    id: 0,
-    chip: {
-      text: 'О КОМПАНИИ',
-      attrs: {
-        class: 'mt-12 mb-8',
-        color: 'white',
-        variant: 'outlined',
-        style: 'margin-top: 106px !important'
-      }
-    },
-    title: 'АО «ССГПО» — крупнейшее градообразующее предприятие\n' +
-      'страны по переработке железных руд, доломита, известняка, строительного щебня',
-    subtitle: 'Рынки сбыта: Казахстан, Россия, Китай ',
-    titleAttrs: {
-      class: 'text-white mb-4 text-36',
-    },
-    textBlockAttrs: {
-      class: 'justify-start'
-    },
-    buttons: [
-      {
-        id: 0,
-        text: 'Large button',
-        attrs: {
-          size: 'large',
-          color: 'primary',
-          class: 'text-body-1',
-          style: 'margin-top: 106px',
-          href: '/vacancy'
-        }
-      }
-    ],
-    active: true,
-  },
-  {
-    id: 1,
-    chip: {
-      text: 'О КОМПАНИИ',
-      attrs: {
-        class: 'mt-12 mb-8',
-        color: 'white',
-        variant: 'outlined'
-      }
-    },
-    title: 'АО «ССГПО» — крупнейшее градообразующее предприятие\n' +
-      'страны по переработке железных руд, доломита, известняка, строительного щебня',
-    titleAttrs: {
-      class: 'text-white mb-4 text-36'
-    },
-    textBlockAttrs: {
-      class: 'justify-start'
-    },
-    buttons: [
-      {
-        id: 0,
-        text: 'Large button',
-        attrs: {
-          size: 'large',
-          color: 'primary',
-          class: 'text-body-1',
-        }
-      }
-    ],
-    active: false,
-    numbers: [
-      {
-        number: 5.5,
-        postfix: [
-          'mln'
-        ],
-        subtitle: [
-          'fdsfsdfds'
-        ]
-      },
-      {
-        number: 5.5,
-        postfix: [
-          'mln'
-        ],
-        subtitle: [
-          'fdsfsdfds'
-        ]
-      },
-      {
-        number: 5.5,
-        postfix: [
-          'mln'
-        ],
-        subtitle: [
-          'fdsfsdfds'
-        ]
-      }
-    ]
-  },
-]
 
 const slidesSocial = [
   {
@@ -320,24 +157,6 @@ const slidesSocial = [
   },
 ]
 
-const controlScroll = ref(false);
-const observer = ref(null);
-onMounted(() => {
-  const sliderElement = document.getElementById('slider');
-  observer.value = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      controlScroll.value = entry.isIntersecting;
-    });
-  }, { threshold: 1 });
-  if (sliderElement) {
-    observer.value.observe(sliderElement);
-  }
-});
-onUnmounted(() => {
-  if (observer.value) {
-    observer.value.disconnect();
-  }
-});
 </script>
 
 <style lang="scss">

diff --git a/src/runtime/components/Parts/ErgVacancies.vue b/src/runtime/components/Parts/ErgVacancies.vue
@@ -180,8 +180,10 @@ const props = defineProps({
 <style lang="scss">
 .erg-vacancies {
   &-bg {
-    img {
-      transform: scale(1.5);
+    @media(max-width: 600px) {
+      img {
+        transform: scale(1.5);
+      }
     }
   }
   .sheet {

diff --git a/src/runtime/components/Parts/Header/Erg.vue b/src/runtime/components/Parts/Header/Erg.vue
@@ -64,7 +64,8 @@
           :class="burger === true ? 'd-none d-lg-block' : ''"
           @click="buttonClick"
         >
-          {{ textBtn || 'Связаться' }}
+          <span class="btn-text-full">{{ textBtn || 'Связаться с нами' }}</span>
+          <span class="btn-text-short">{{ getFirstWord(textBtn) || 'Связаться' }}</span>
         </v-btn>
         <v-app-bar-nav-icon
           v-if="burger"
@@ -210,6 +211,10 @@ function toggleBodyScroll(isOpen: boolean) {
   }
 }
 
+function getFirstWord(text = '') {
+  return text.split(' ')[0];
+}
+
 watch(menu_open, (newValue) => {
   toggleBodyScroll(newValue);
 });
@@ -220,6 +225,24 @@ function buttonClick() {
 </script>
 
 <style lang="scss">
+@media (max-width: 600px) {
+  .btn-text-full {
+    display: none;
+  }
+  .btn-text-short {
+    display: block;
+  }
+}
+
+@media (min-width: 601px) {
+  .btn-text-full {
+    display: block;
+  }
+  .btn-text-short {
+    display: none;
+  }
+}
+
 .erg-header {
   ul {
     list-style: none;

diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative text-white overflow-hidden">
+  <div class="position-relative text-white">
     <v-img
       v-if="sliderBackgroundImage"
       class="zoom-background"
@@ -12,7 +12,7 @@
       v-bind="sliderAttrs"
       ref="slider"
       :slides-per-view="sliderPeeking ? '1.3' : '1'"
-      class="overflow-hidden w-100 position-relative"
+      class="overflow-hidden w-100 position-relative overflow-hidden"
       :class="[`rounded-${rounded}`]"
       :style="{height: height}"
       @swiperslidechange="updatePagination"