wirenboard · ninedev-i · Jul 26, 2024 · Jul 24, 2024 · Jul 24, 2024 · Jul 24, 2024
@@ -34,4 +34,13 @@ main hr {
 
 main h2 {
   font-size: 27px;
+}
+
+[data-pc-section="input"] {
+  -webkit-appearance: auto !important;
+}
+
+[data-pc-name="radiobutton"] {
+  display: flex;
+  align-items: center;
 }
@@ -8,4 +8,5 @@
   --primary-color-hover: #4d9900;
 
   --input-shadow: 0px 0px #0000, 0px 0px #0000, 0px 1px 2px 0px rgba(18,18,23,0.05);
+  --app-bar-height: 80px;
 }
@@ -0,0 +1,5 @@
+export enum ArticleType {
+    WithoutSubCategories,
+    WithSubCategories,
+    SubCategory,
+}
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import dayjs from 'dayjs';
+import 'dayjs/locale/ru';
+
+defineProps<{ title: string; cover: string; url: string; date: string; }>();
+</script>
+
+<template>
+  <NuxtLink :to="url" class="article">
+    <NuxtImg
+      :src="cover"
+      class="article-cover"
+      loading="lazy"
+      :alt="title"
+    />
+    <div>
+      <h4 class="article-title">{{ title }}</h4>
+      <time :datetime="date" class="article-date">{{ dayjs(date).locale('ru').format('D MMMM YYYY') }}</time>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.article {
+  text-decoration: none;
+
+  @media (min-width: 460px) and (max-width: 940px) {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.article:hover .article-title {
+  color: var(--link-color);
+}
+
+.article-cover {
+  width: 100%;
+  height: 160px;
+  border-radius: 12px;
+  text-decoration: none;
+  object-fit: cover;
+  border: 1px solid var(--gray-color);
+
+  @media (min-width: 400px) and (max-width: 940px) {
+    width: 220px;
+    height: auto;
+  }
+
+  @media (max-width: 460px) {
+    width: 100%;
+    height: 160px;
+  }
+}
+
+.article-title {
+  margin: 6px 0 12px;
+  font-weight: bold;
+  color: var(--text-color);
+}
+
+.article-date {
+  font-size: 16px;
+  color: var(--text-color);
+}
+</style>
@@ -42,7 +42,9 @@ const scrollToElement = (title: string) => {
         </LIcon>
         <LPopup>
           <NuxtImg :src="item.logo" class="partner-logo" />
-          <strong class="map-detailsLink" @click="scrollToElement(item.title as string)">{{ item.title }}</strong>
+          <strong class="map-detailsLink" @click="scrollToElementById(slug(item.title as string))">
+            {{ item.title }}
+          </strong>
         </LPopup>
       </LMarker>
       <LTileLayer

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton';
+
+defineProps<{ options: string[]; }>();
+
+const model = defineModel();
+
+const change = ({ value }) => {
+  if (!value) {
+    const reValue = model.value;
+    setTimeout(() => {
+      model.value = reValue;
+    });
+  }
+};
+</script>
+
+<template>
+  <SelectButton v-model="model" :options="options" @change="change" />
+</template>
+
+<style>
+[data-pc-name="selectbutton"] {
+  display: inline-flex;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+[data-pc-name="pcbutton"] {
+  font-family: 'Plumb', sans-serif;
+  border-radius: 1px;
+  white-space: nowrap;
+  position: relative;
+  font-size: 16px;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--text-color);
+  background: var(--gray-color);
+  padding: 7px 14px;
+  border: 0;
+}
+
+[data-pc-name="pcbutton"]:hover {
+  color: #0f172a;
+}
+
+[data-pc-name="pcbutton"][data-p-checked="true"] {
+  z-index: 1;
+  color: #0f172a;
+}
+
+[data-pc-name="pcbutton"][data-p-checked="true"]::before {
+  content: "";
+  background: #fff;
+  z-index: -1;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: calc(100% - 8px);
+  height: calc(100% - 8px);
+  border-radius: 6px;
+  box-shadow: 0 0 3px #cacaca;
+}
+</style>
@@ -62,7 +62,7 @@ const formatPhoneNumber = (phone: number) => {
 .partner-title {
   margin: 0;
   font-size: 22px;
-  scroll-margin-top: 144px;
+  scroll-margin-top: calc(var(--app-bar-height) + 64px);
 }
 
 .partner-contacts {

@@ -0,0 +1,8 @@
+---
+title: Подключаем шторы Akko и Dooya к Алисе и Apple Home
+url: https://comf.life/podklyuchaem-shtory-k-alise-i-apple-home-privody-akko-dm35eq-x-i-am82tv.html
+cover: /img/articles/educational/3rd_party_devices/blinds_with_alice.webp
+date: 2023-01-18
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Слезаем с облачной иглы Aqara и подключаем устройства к WB
+url: https://habr.com/ru/companies/wirenboard/articles/710177/
+cover: /img/articles/educational/3rd_party_devices/leaving_from_aqara.jpg
+date: 2023-01-12
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: 'Рыбачим в эфире: метеостанция, номер борта самолёта, звонок'
+url: https://habr.com/ru/companies/wirenboard/articles/793268/
+cover: /img/articles/educational/3rd_party_devices/meteo_fishing.jpg
+date: 2024-02-13
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Путь от глупого чайника Redmond к умному
+url: https://sprut.ai/article/put-ot-glupogo-chaynika-k-umnomu-redmond
+cover: /img/articles/educational/3rd_party_devices/redmond_teapot.png
+date: 2022-10-31
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Подключение конвектора Varman Qtherm
+url: https://comf.life/podklyuchenie-konvektora-varmann-v-umnyj-dom-apple-home-alisa.html
+cover: /img/articles/educational/3rd_party_devices/varman_qtherm.webp
+date: 2022-12-30
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Управление домофоном Визит с Wiren Board
+url: https://sprut.ai/article/put-ot-glupogo-chaynika-k-umnomu-redmond
+cover: /img/articles/educational/3rd_party_devices/vizit_intercom.jpg
+date: 2022-06-05
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Беспроводное подключение штор Akko и Dooya
+url: https://smarttone.ru/blog/wiren-board-rf-blinds-dooya/
+cover: /img/articles/educational/3rd_party_devices/wireless_akko_dooya.png
+date: 2022-03-24
+category: educational
+sub_category: 3rd_party_devices
+---
@@ -0,0 +1,8 @@
+---
+title: Как собрать бюджетный умный дом. Общие принципы проектирования
+url: https://habr.com/ru/companies/wirenboard/articles/764778/
+cover: /img/articles/educational/beginners/budget_smart_home.jpg
+date: 2023-10-03
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,9 @@
+---
+title: Как устроен сценарий «Темная комната»
+url: https://comf.life/bolshoj-obzor-scenarij-temnaya-komnata.html
+cover: /img/articles/educational/beginners/dark_room_scenario.jpg
+date: 2022-08-04
+category: educational
+sub_category: beginners
+---
+``
@@ -0,0 +1,8 @@
+---
+title: Сборка электрического щита на Wiren Board 6
+url: https://sprut.ai/article/sborka-el-shchita-na-wiren-board-6-v-tom-chisle-silovaya-chast
+cover: /img/articles/educational/beginners/electrical_panel.webp
+date: 2020-02-18
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,8 @@
+---
+title: Слезаем с облачной иглы Aqara и подключаем устройства к WB
+url: https://habr.com/ru/companies/wirenboard/articles/710177/
+cover: /img/articles/educational/beginners/from_aqara_to_wb.jpg
+date: 2023-01-12
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,9 @@
+---
+title: Подбор оборудования Wiren Board и проектирование системы
+url: https://home-matic.ru/2020/09/wirenboard_podbor_oborudovania/
+cover: /img/articles/educational/beginners/hardware_selection.jpg
+date: 2020-09-04
+category: educational
+sub_category: beginners
+---
+``
@@ -0,0 +1,8 @@
+---
+title: Делаем HMI-панель из планшета для системы автоматизации
+url: https://habr.com/ru/companies/wirenboard/articles/765232/
+cover: /img/articles/educational/beginners/hmi_from_tablet.jpg
+date: 2023-10-10
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,9 @@
+---
+title: Как расположить датчики Wiren Board WB-MSW v.3
+url: https://comf.life/bolshoj-obzor-kak-raspolozhit-datchiki-v-dvuhetazhnom-dome.html
+cover: /img/articles/educational/beginners/sensors_placement.jpg
+date: 2022-08-19
+category: educational
+sub_category: beginners
+---
+``
@@ -0,0 +1,8 @@
+---
+title: 'Облачный умный дом: что нужно знать, чтобы избежать проблем'
+url: https://habr.com/ru/companies/wirenboard/articles/707678/
+cover: /img/articles/educational/beginners/smart_home_base_knowledge.webp
+date: 2022-12-27
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,8 @@
+---
+title: Инструкция по первой настройке УД
+url: https://home-matic.ru/2020/09/wirenboard-first-manual/
+cover: /img/articles/educational/beginners/smart_home_instruction.jpg
+date: 2022-01-10
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,9 @@
+---
+title: Большой обзор выключателей в умном доме
+url: https://comf.life/bolshoj-obzor-vyklyuchateli-v-umnom-dome.html
+cover: /img/articles/educational/beginners/switchers_overview.jpg
+date: 2023-01-13
+category: educational
+sub_category: beginners
+---
+``
@@ -0,0 +1,8 @@
+---
+title: Wiren Board и с чем его едят. Краткий обзор
+url: https://sprut.ai/article/wiren-board-i-s-chem-ego-edyat-kratkiy-obzor
+cover: /img/articles/educational/beginners/what_for_wb.webp
+date: 2019-02-23
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,8 @@
+---
+title: Подключаем Zigbee-устройства через Zigbee2mqtt и wb-rules
+url: https://habr.com/ru/companies/wirenboard/articles/750640/
+cover: /img/articles/educational/beginners/zigbee2mqtt.jpg
+date: 2023-07-27
+category: educational
+sub_category: beginners
+---
@@ -0,0 +1,8 @@
+---
+title: Краткий обзор диммера WB-MDM3 от Wiren Board
+url: https://sprut.ai/article/kratkiy-obzor-dimmera-wb-mdm3-ot-wirenboard
+cover: /img/articles/educational/electrics/dimmer_wb_mdm3.webp
+date: 2020-01-15
+category: educational
+sub_category: electrics
+---
@@ -0,0 +1,8 @@
+---
+title: От классической до умной электрики один шаг!
+url: https://dzen.ru/a/ZUygiho-bwcqttaU
+cover: /img/articles/educational/electrics/smart_electrics.png
+date: 2023-11-09
+category: educational
+sub_category: electrics
+---
@@ -0,0 +1,8 @@
+---
+title: Умный свет в Wiren Board. Варианты реализаций
+url: https://sprut.ai/article/umnyy-svet-v-wirenboard-varianty-realizaciy
+cover: /img/articles/educational/electrics/smart_light.png
+date: 2019-08-25
+category: educational
+sub_category: electrics
+---