{"version":3,"mappings":";sNAAA,MAAeA,EAAA,4tCCqEf,MAAMC,EAAMC,IAENC,EAAQC,EAAI,CAChB,CACE,GAAI,EACJ,KAAM,2DACN,MAAO,6BACP,YACE,qIACJ,EACA,CACE,GAAI,EACJ,KAAM,2DACN,MAAO,qBACP,YACE,yJACJ,EACA,CACE,GAAI,EACJ,KAAM,2DACN,MAAO,0BACP,YACE,4HACJ,EACA,CACE,GAAI,EACJ,KAAM,2DACN,MAAO,8BACP,YACE,wMACJ,EACA,CACE,GAAI,EACJ,KAAM,2DACN,MAAO,wCACP,YACE,yLACJ,EACD,EACKC,EAAeD,EAAI,EAAK,EACxBE,EAAS,CAACC,EAAcC,EAAYC,IAC5BR,EAAI,YAAY,aAAaM,CAAI,EAAE,OAAOC,EAAGC,CAAM,EAAE,SAAS","names":["_imports_0","ctx","useNuxtApp","cards","ref","showCollapse","imgUrl","path","w","height"],"ignoreList":[],"sources":["../../../../assets/images/svg/logo.svg","../../../../components/tariffs-page/TariffsHelper.vue"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='54'%20height='55'%20viewBox='0%200%2054%2055'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.5488%2020.21H53.4917V54.9717H37.9803C35.4295%2054.9745%2032.9032%2054.4735%2030.5458%2053.4975C28.1884%2052.5214%2026.0461%2051.0894%2024.2415%2049.2833C22.4368%2047.4772%2021.0052%2045.3324%2020.0284%2042.9716C19.0516%2040.6108%2018.5488%2038.0802%2018.5488%2035.5246V20.21Z'%20fill='%23EE3C6B'/%3e%3cpath%20d='M36.0137%200V35.0372H1.31057V19.4612C1.31057%2014.3035%203.35559%209.35708%206.99573%205.71004C10.6359%202.06301%2015.573%200.0141202%2020.7209%200.0141202L36.0137%200.0141202V0Z'%20fill='%234DA3DA'/%3e%3cpath%20d='M36.0344%2020.21H18.5137V35.0443H36.0344V20.21Z'%20fill='%232E358F'/%3e%3c/svg%3e\"","<template>\n  <div\n    class=\"tariffs-helper\"\n    data-test=\"questions-block\"\n  >\n    <div class=\"tariffs-helper__main d-flex flex-column\">\n      <div\n        v-for=\"item in [cards[2], cards[0], cards[3]]\"\n        class=\"tariffs-helper__item\"\n      >\n        <img\n          loading=\"lazy\"\n          :src=\"imgUrl(item.icon, 0, 40)\"\n          alt=\"icon\"\n        >\n        <p class=\"tariffs-helper__item-title fwb\">\n          {{ item.title }}\n        </p>\n        <p class=\"tariffs-helper__item-descr gray-dark--text\">\n          {{ item.description }}\n        </p>\n      </div>\n    </div>\n    <div class=\"tariffs-helper__collaps-wrap white--bg\">\n      <div\n        class=\"tariffs-helper__collaps d-flex\"\n        @click=\"showCollapse = !showCollapse\"\n      >\n        <span class=\"tariffs-helper__collaps-title fwm d-flex align-center\">\n          <img\n            loading=\"lazy\"\n            src=\"@/assets/images/svg/logo.svg\"\n            class=\"d-flex\"\n            alt=\"close\"\n          >\n          ДомИнтернет – маркетплейс домашнего интернета без скрытых\n          наценок и комиссий</span>\n        <img\n          :class=\"{ rotate: showCollapse }\"\n          style=\"transition: transform 0.24s; width: 24px; height: 24px; margin-left: auto; margin-top: 8px;\"\n          loading=\"lazy\"\n          src=\"@/assets/images/svg/arrow-expand.svg\"\n          alt=\"arrow\"\n        >\n      </div>\n      <LazyVCollapse :show-more=\"showCollapse\">\n        <ul class=\"tariffs-helper__collaps-text\">\n          <li>\n            Провайдеры самостоятельно размещают свои тарифы у нас на сайте\n          </li>\n          <li>\n            Маркетплейс не берет с пользователей никаких комиссий и тут нет\n            наценок\n          </li>\n          <li>\n            Стоимость тарифов на 100% соответствует ценам на официальных\n            сайтах провайдеров\n          </li>\n          <li>\n            Мы работаем для вас за небольшое вознаграждение от самих\n            провайдеров\n          </li>\n        </ul>\n      </LazyVCollapse>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst ctx = useNuxtApp()\n\nconst cards = ref([\n  {\n    id: 1,\n    icon: 'https://api.dominter.net/media/uploads/blog/thelper6.png',\n    title: 'Какого провайдера выбрать?',\n    description:\n      'Мы уже отсортировали провайдеров по рейтингу и качеству. Выбирайте тот бренд который вам больше нравится или просто первый в списке',\n  },\n  {\n    id: 2,\n    icon: 'https://api.dominter.net/media/uploads/blog/thelper1.png',\n    title: 'Как выбрать тариф?',\n    description:\n      'Выбирайте комфортную абонентскую плату, необходимый набор услуг и нужную скорость. Не уверены, какой тариф вам подходит? Мы подскажем выгодный вариант.',\n  },\n  {\n    id: 3,\n    icon: 'https://api.dominter.net/media/uploads/blog/thelper3.png',\n    title: 'Какую скорость выбрать?',\n    description:\n      'Скорости 100 Мбит/с с запасом хватит для любых задач. Большинство пользователей не почувствует разницы между 100, 200, 300',\n  },\n  {\n    id: 4,\n    icon: 'https://api.dominter.net/media/uploads/blog/thelper4.png',\n    title: 'Как происходит подключение?',\n    description:\n      'Мы перезваниваем для консультации и согласования деталей и удобного времени подключения. После передаем заявку провайдеру, который и производит подключение. Договор и расчеты напрямую с провайдером.',\n  },\n  {\n    id: 5,\n    icon: 'https://api.dominter.net/media/uploads/blog/thelper5.png',\n    title: 'Какие тарифы рекомендует ДомИнтернет?',\n    description:\n      'Алгоритмы нашего сервиса уже отобрали для вас выгодные тарифы. Предложения с высокой скоростью по лучшей цене от надёжных провайдеров. На них вы можете видеть пометку «рекомендуемый».',\n  },\n])\nconst showCollapse = ref(false)\nconst imgUrl = (path: string, w?: number, height?: number) => {\n  const url = ctx.$thumborURL.setImagePath(path).resize(w, height).buildUrl()\n  return url\n}\n</script>\n\n<style scoped lang=\"scss\">\n.tariffs-helper {\n  padding-top: 40px;\n\n  &__item {\n    padding: 24px 24px 24px 44px;\n    position: relative;\n    background: color(white);\n    border-radius: 12px;\n    border: 1px solid color(gray-darker);\n    margin-bottom: 8px;\n    font-size: fontSize(paragraph);\n    line-height: 1.4;\n    img {\n      position: absolute;\n      left: 20px;\n      top: 24px;\n      width: 20px;\n      height: 20px;\n      object-fit: contain;\n      object-position: center;\n    }\n    &-title {\n      margin-bottom: 4px;\n    }\n\n    @media (max-width: getBreakpoint(mobile-lg)) {\n      font-size: 13px;\n    }\n    @media (max-width: getBreakpoint(mobile-md)) {\n      font-size: fontSize(label);\n    }\n  }\n\n  &__card {\n    width: 267px;\n    padding: 24px;\n    background: color(white);\n    border-radius: 12px;\n    border: 1px solid color(gray-darker);\n    cursor: pointer;\n    transition: box-shadow 0.24s;\n    @media (max-width: getBreakpoint(tablet)) {\n      width: 222px;\n      padding: 24px 16px;\n      font-size: fontSize(paragraph);\n      line-height: 1.4;\n    }\n    &:hover {\n      box-shadow: 0px 0px 18px rgba(3, 5, 32, 0.15);\n    }\n    img {\n      width: 34px;\n      height: 48px;\n      object-fit: contain;\n      object-position: center;\n      margin-right: 16px;\n\n      @media (max-width: getBreakpoint(tablet)) {\n        width: 32px;\n        height: 45px;\n        margin-right: 12px;\n      }\n    }\n  }\n\n  &__collaps {\n    background-color: color(white);\n    padding: 24px;\n    cursor: pointer;\n\n    @media (max-width: getBreakpoint(tablet)) {\n      padding: 20px 16px;\n    }\n    @media (max-width: getBreakpoint(mobile-lg)) {\n      padding: 20px 16px;\n    }\n    @media (max-width: getBreakpoint(mobile-md)) {\n      padding: 16px 12px;\n    }\n    &-wrap {\n      border-radius: 12px;\n      overflow: hidden;\n      border: 1px solid color(gray-light);\n    }\n\n    &-title {\n      @media (max-width: getBreakpoint(tablet)) {\n        font-size: 15px;\n      }\n      @media (max-width: getBreakpoint(mobile-lg)) {\n        font-size: fontSize(paragraph);\n      }\n      @media (max-width: getBreakpoint(mobile-md)) {\n        font-size: 13px;\n      }\n      img {\n        margin-right: 16px;\n        width: 36px;\n        height: 38px;\n        @media (max-width: getBreakpoint(tablet)) {\n          margin-right: 12px;\n          width: 33px;\n          height: 35px;\n        }\n        @media (max-width: getBreakpoint(mobile-lg)) {\n          margin-right: 8px;\n          width: 28px;\n          height: 30px;\n        }\n        @media (max-width: getBreakpoint(mobile-md)) {\n          width: 24px;\n          height: 24px;\n        }\n      }\n\n    }\n    &-text {\n      padding-left: 36px;\n      padding-bottom: 16px;\n      @media (max-width: getBreakpoint(tablet)) {\n        padding-left: 16px;\n      }\n      li {\n        padding-left: 16px;\n        position: relative;\n        font-size: fontSize(title);\n        line-height: 1.4;\n        margin-bottom: 8px;\n        @media (max-width: getBreakpoint(tablet)) {\n          font-size: 15px;\n        }\n        @media (max-width: getBreakpoint(mobile-lg)) {\n          font-size: fontSize(paragraph);\n        }\n        @media (max-width: getBreakpoint(mobile-md)) {\n          font-size: 13px;\n        }\n        &:before {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          top: 7px;\n          width: 8px;\n          height: 8px;\n          background-color: color(primary);\n          border-radius: 50%;\n          @media (max-width: getBreakpoint(tablet)) {\n            top: 6px;\n          }\n          @media (max-width: getBreakpoint(mobile-lg)) {\n            top: 5px;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"file":"_nuxt/BM5GeLh7.js"}