adata-ui 0.3.55 → 0.3.57

package/src/components/index.js

@@ -8,6 +8,7 @@ import APasswordField from "./PasswordField/PasswordField";
 import AAlert from "./Alert/Alert";
 import AHeader from "./Header/Header";
 import AFooter from "./Footer/Footer";
+import AFooterNew from "./newComponents/FooterNew/FooterNew";
 import ASearchTextField from "./SearchTextField/SearchTextField";
 import AMailTo from "./MailTo/MailTo";
 import ATable from "./Table/ATable";
@@ -30,6 +31,7 @@ const Components = {
   AAlert,
   AHeader,
   AFooter,
+  AFooterNew,
   ASearchTextField,
   AMailTo,
   ATable,

package/src/components/newComponents/FooterNew/FooterBottom.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="bottom">
+    <div class="bottom__left">
+      <a v-for="item in list" :key="item.id" :href="item.link" class="bottom__left__link">
+        {{ item.name }}
+      </a>
+    </div>
+    <div class="bottom__right">
+      <span class="bottom__right-text">2022 © ТОО "Alldata"</span>
+      <span class="logo-desktop"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FooterBottom",
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
+    },
+  },
+  data() {
+    return {
+      main: {
+        dev: "https://adtdev.kz",
+        prod: "https://adata.kz",
+        staging: "https://adada.kz",
+      },
+    }
+  },
+  computed:{
+    environment() {
+      return this.main[this.mode]
+    },
+
+    list(){
+      return [
+        {
+          id: 1,
+          name: 'Тарифы',
+          link: `${this.environment}/tariffs`
+        },
+        {
+          id: 2,
+          name: 'Полезное',
+          link: `${this.environment}/about`
+        },
+        {
+          id: 3,
+          name: 'Описание API',
+          link: `${this.environment}/apiInfo`
+        },
+        {
+          id: 4,
+          name: 'Пользовательское соглашение',
+          link: `${this.environment}/user-agreements`
+        },
+        {
+          id: 5,
+          name: 'Политика конфиденциальности',
+          link: `${this.environment}/privacy-policy`
+        },
+        {
+          id: 6,
+          name: 'Вакансии',
+          link: `${this.environment}/vacancy`
+        },
+        {
+          id: 7,
+          name: 'Каталог предприятий',
+          link: `${this.environment}/counterparty`
+        },
+        {
+          id: 8,
+          name: 'Контакты',
+          link: `${this.environment}/contacts`
+        },
+      ]
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 20px 0;
+  @media (max-width: 1140px) {
+    padding: 20px 16px;
+  }
+  @media (max-width: 768px) {
+    padding: 20px 16px 12px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    @media screen and (max-width: 1140px) {
+    flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+      &__link {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 16px;
+      color: #FFFFFF;
+    }
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &-text {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 16px;
+      color: #FFFFFF;
+      @media screen and (max-width: 1140px) {
+        display: none;
+      }
+    }
+  }
+}
+
+.logo-desktop {
+  display: inline-block;
+  width: 90px;
+  height: 26px;
+  background-image: url("~@/assets/logo-white-desktop.svg");
+  background-size: cover;
+  background-position: center;
+  @media screen and (max-width: 1140px) {
+    display: none;
+
+  }
+}
+</style>

package/src/components/newComponents/FooterNew/FooterItem.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="item">
+    <div class="item-title" @click="toggleClick">
+      {{ title }}
+      <div class="dropdown" :class="{ icon: dropdown }"></div>
+    </div>
+    <div class="item__link" :class="{ active: dropdown }" v-show="dropdown">
+      <div v-for="item in cols" :key="item.id" class="item__link-text">
+        <a :href="item.link">
+          {{ item.text }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FooterItem",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    cols: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      dropdown: false,
+    }
+  },
+
+  mounted() {
+    this.checkWidth()
+
+    window.addEventListener('resize', () => {
+      this.checkWidth()
+    })
+  },
+  methods: {
+    checkWidth() {
+      this.dropdown = window.innerWidth > 1140;
+    },
+    toggleClick(){
+     if(window.innerWidth < 1140){
+       this.dropdown = !this.dropdown
+     }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &-title {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #FFFFFF;
+    text-align: left;
+    @media (max-width: 1140px) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-text {
+      text-align: left;
+
+      a {
+        color: #FFFFFF;
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: left;
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+
+.dropdown {
+  display: none;
+  transform: rotate(0deg);
+  transition: 0.3s;
+  @media (max-width: 1140px) {
+    display: block;
+    width: 24px;
+    height: 24px;
+    background-image: url('~@/assets/up-down.svg');
+  }
+}
+.icon{
+  transform: rotate(180deg);
+  transition: 0.3s;
+}
+.active {
+  transition: 0.3s;
+}
+</style>

package/src/components/newComponents/FooterNew/FooterNew.stories.js

@@ -0,0 +1,20 @@
+import AFooterNew from './FooterNew.vue'
+
+export default {
+    title: 'Footer',
+    component: AFooterNew,
+    template: '<a-footer-new></a-footer-new>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { AFooterNew },
+    props: Object.keys(argTypes),
+    template: '<a-footer-new v-bind="$props"></a-footer-new>'
+});
+
+export const MainFooter = Template.bind({});
+
+export const WithBottomMenu = Template.bind({});
+WithBottomMenu.args = {
+    hasBottomMenu: true
+}

package/src/components/newComponents/FooterNew/FooterNew.vue

@@ -0,0 +1,41 @@
+<template>
+  <footer class="footer">
+    <footer-top :mode="mode"/>
+    <hr/>
+    <footer-bottom :mode="mode"/>
+  </footer>
+</template>
+
+<script>
+import FooterTop from "@/components/newComponents/FooterNew/FooterTop";
+import FooterBottom from "@/components/newComponents/FooterNew/FooterBottom";
+
+export default {
+  name: "Footer",
+  components: {FooterTop, FooterBottom},
+  props: {
+    hasBottomMenu: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  background: #2C3E50;
+  border-bottom: 0.5px solid #FFFFFF;
+
+
+}
+
+
+</style>

package/src/components/newComponents/FooterNew/FooterTop.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="block">
+    <div class="block__pk">
+      <footer-item :cols="pk" :title="pkTitle"/>
+    </div>
+    <div class="block__item">
+      <footer-item :cols="work" :title="workTitle"/>
+    </div>
+    <div class="block__item">
+      <footer-item :cols="tender" :title="tenderTitle"/>
+    </div>
+    <div class="block__item">
+      <footer-item :cols="avto" :title="avtoTitle"/>
+    </div>
+    <div class="block__item">
+      <footer-item :cols="marketing" :title="marketingTitle"/>
+    </div>
+    <div class="block__web">
+      <a href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured" class="youtube"/>
+      <a href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els" class="instagram"></a>
+      <a href="https://t.me/adatakz_official" class="telegram"></a>
+      <a href="https://www.facebook.com/adata.kz" class="facebook"></a>
+      <a href="https://www.tiktok.com/@adata.kz?lang=ru-RU" class="tiktok"/>
+    </div>
+  </div>
+</template>
+<script>
+import FooterItem from "@/components/newComponents/FooterNew/FooterItem";
+export default {
+  name: "FooterTop",
+  components:{
+    FooterItem
+  },
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  data() {
+    return {
+      pkTitle: 'Контрагенты',
+      workTitle: 'Работа',
+      tenderTitle: 'Тендеры',
+      avtoTitle: 'Штрафы',
+      marketingTitle: 'Маркетинг',
+      main: {
+        dev: "adtdev.kz",
+        prod: "adata.kz",
+        staging: "adada.kz",
+      },
+    }
+  },
+  computed:{
+    environment() {
+      return this.main[this.mode]
+    },
+    pk(){
+      return  [
+        {
+          id: 1,
+          text: 'Проверка контрагентов',
+          link: `https://pk.${this.environment}`
+        },
+        {
+          id: 2,
+          text: 'Сравнение контрагентов',
+          link: `https://pk.${this.environment}/counterparty/compare`
+
+        },
+        {
+          id: 3,
+          text: 'Косвенные связи',
+          link: `https://pk.${this.environment}/counterparty/search-connections/check`,
+        },
+        {
+          id: 4,
+          text: 'Массовая проверка',
+          link: `https://pk.${this.environment}/counterparty/employees-check`,
+        },
+        {
+          id: 5,
+          text: 'Зарубежные контрагенты',
+          link: `https://pk.${this.environment}/counterparty/foreign`,
+        },
+        {
+          id: 6,
+          text: 'Санкции',
+          link: `https://pk.${this.environment}/counterparty/sanctions`,
+        },
+        {
+          id: 8,
+          text: 'Офшоры',
+          link: `https://pk.${this.environment}/counterparty/offshore`,
+        },
+        {
+          id: 9,
+          text: 'Интеграция по API',
+          link: `https://pk.${this.environment}/counterparty/offshore`,
+        },
+
+      ]
+    },
+    work(){
+      return [
+        {
+          id: 1,
+          text: 'Создание и поиск вакансий',
+          link: `https://work.${this.environment}/company/create#vacancy`
+
+        },
+        {
+          id: 2,
+          text: 'Создание и поиск резюме',
+          link: `https://work.${this.environment}/user/create#summary`
+        },
+      ]
+    },
+    tender(){
+      return [
+        {
+          id: 1,
+          text: 'Информация по тендерам',
+          link: `https://tender.${this.environment}/`
+        },
+        {
+          id: 2,
+          text: 'Информация по договорам',
+          link: `https://tender.${this.environment}/main/contracts`
+        },
+        {
+          id: 3,
+          text: 'Информация по планам закупок',
+          link: `https://tender.${this.environment}/main/plans`
+        },
+      ]
+    },
+    avto(){
+      return [
+        {
+          id: 1,
+          text: 'Проверка штрафов',
+          link: `https://avto.${this.environment}/`
+        },
+        {
+          id: 2,
+          text: 'Проверка штрафов',
+          link: `https://avto.${this.environment}/check`
+        },
+        {
+          id: 3,
+          text: 'Массовая проверка авто',
+          link: `https://avto.${this.environment}/bulk-check`
+        },
+      ]
+    },
+    marketing(){
+      return [
+        {
+          id: 1,
+          text: 'Поиск клиентов',
+          link: `https://marketing.${this.environment}/unload-data`
+        },
+        {
+          id: 2,
+          text: 'Анализ закупок',
+          link: `https://marketing.${this.environment}/purchasing-analysis`
+        },
+        {
+          id: 3,
+          text: 'Индекс деловой активности',
+          link: `https://marketing${this.environment}/business-activity`
+        },
+        {
+          id: 4,
+          text: 'Рейтинг налогоплательщиков',
+          link: `https://marketing.${this.environment}/tax-payment`
+        },
+      ]
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.block {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto;
+  text-align: center;
+  color: #FFF;
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 40px 0 20px;
+  @media (max-width: 1140px) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px 16px;
+  }
+
+    &__pk {
+    display: grid;
+    gap: 8px;
+    grid-column: 1;
+    grid-row: 1 / 3;
+    @media (max-width: 1140px) {
+      display: flex;
+      gap: 8px;
+      flex-direction: column;
+    }
+
+    &__item {
+      display: flex;
+      gap: 8px;
+      flex-direction: column;
+      @media (max-width: 1140px) {
+        display: grid;
+        gap: 8px;
+        grid-column: 1;
+        grid-row: 1 / 3;
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__web {
+    grid-column: 2/6;
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    justify-content: flex-end;
+    margin-right: 30px;
+    @media (max-width: 1140px) {
+      justify-content: flex-start;
+      gap: 16px;
+    }
+  }
+}
+
+.item-title {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: #FFFFFF;
+  text-align: left;
+  @media (max-width: 1140px) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.item-text {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: left;
+  color: #FFFFFF;
+
+  a {
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+}
+
+
+
+.youtube {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/youtube.svg');
+  cursor: pointer;
+}
+
+.instagram {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/instagram.svg');
+  cursor: pointer;
+}
+
+.telegram {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/telegram.svg');
+  cursor: pointer;
+}
+
+.facebook {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/facebook.svg');
+  cursor: pointer;
+}
+
+.tiktok {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/tiktok.svg');
+  cursor: pointer;
+}
+</style>