diff --git a/main/_front/src/html/components.html b/main/_front/src/html/components.html new file mode 100644 index 0000000..5cb64da --- /dev/null +++ b/main/_front/src/html/components.html @@ -0,0 +1,303 @@ + + + + + + + Document + + + + + + +
+
+
+ +
+ Комплектующие + Конфигуратор + Готовые сборки + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Комплектующие

+
+
+
+
+
+
+
+ + + + + + + + +
+ + +
+
+
+
Сортировка:
+
+
+ + +
+
+ + +
+
+
+
+
+ +
+
ЦП AMD Ryzen 7 2700
+
8 500 ₽
+ +
+
+
+ +
+
ЦП AMD Ryzen 7 2700
+
8 500 ₽
+ +
+
+
+ +
+
ЦП AMD Ryzen 7 2700
+
8 500 ₽
+ +
+
+
+ +
+
ЦП AMD Ryzen 7 2700
+
8 500 ₽
+ +
+
+
+ +
+
ЦП AMD Ryzen 7 2700
+
8 500 ₽
+ +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js new file mode 100644 index 0000000..48a5f5b --- /dev/null +++ b/main/_front/src/js/components.js @@ -0,0 +1,22 @@ +const choiceLists = document.querySelectorAll(".choice"); + +choiceLists.forEach((choiceList) => { + const choiceItems = choiceList.querySelectorAll(".choice__elem"); + choiceItems.forEach((choice) => { + if (choice.classList.contains("active")) { + choiceList.dataset.value = choice.dataset.value; + // console.log(choice.dataset.value); + } + choice.addEventListener("click", (e) => { + choiceItems.forEach((choice) => { + if (choice === e.target) { + choiceList.dataset.value = choice.dataset.value; + choice.classList.add("active"); + console.log(choice.dataset.value); + }else { + choice.classList.remove("active"); + } + }); + }); + }); +}) diff --git a/main/_front/src/scss/_base.scss b/main/_front/src/scss/_base.scss index ed34690..4ae7707 100644 --- a/main/_front/src/scss/_base.scss +++ b/main/_front/src/scss/_base.scss @@ -8,4 +8,10 @@ body { max-width: 1170px; margin: 0 auto; padding: 0 15px; +} + +.grey_background { + border: 1px solid #d8d8d8; + background-color: #F8F8F8; + border-radius: 10px; } \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_card.scss b/main/_front/src/scss/blocks/_card.scss new file mode 100644 index 0000000..3fe4aa2 --- /dev/null +++ b/main/_front/src/scss/blocks/_card.scss @@ -0,0 +1,37 @@ +.cards { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.card { + width: 268px; + background-color: #fff; + box-shadow: 0 2px 10px 4px rgba(#727272, 0.25); + border-radius: 10px; + padding: 34px 16px 16px; + display: flex; + flex-direction: column; + align-items: center; +} + +.card__description { + display: flex; + flex-direction: column; + align-items: center; +} + +.card__name { + font-size: 16px; + text-align: center; + font-weight: 400; + line-height: 19px; + height: 65px; + margin: 8px 0 16px; +} + +.card__price { + font-size: 24px; + font-weight: 500; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_components.scss b/main/_front/src/scss/blocks/_components.scss new file mode 100644 index 0000000..7bb0c69 --- /dev/null +++ b/main/_front/src/scss/blocks/_components.scss @@ -0,0 +1,33 @@ +.components { + +} + +.components__inner { + display: flex; + justify-content: space-between; + align-items: flex-start; + column-gap: 20px; +} + +.components__choice { + width: 276px; + padding: 20px; + display: flex; + flex-direction: column; + gap: 15px; +} + +.components__choice-title { + font-size: 24px; + line-height: 28px; + font-weight: 700; + text-align: center; +} + +.components__main { + flex: 1; +} + +.components__sort { + margin-bottom: 20px; +} diff --git a/main/_front/src/scss/blocks/_sort.scss b/main/_front/src/scss/blocks/_sort.scss new file mode 100644 index 0000000..1b0f27c --- /dev/null +++ b/main/_front/src/scss/blocks/_sort.scss @@ -0,0 +1,19 @@ +.sort { + display: flex; + align-items: center; + width: 100%; + padding: 13px 20px; +} + +.sort__text { + font-size: 18px; + color: #000; + margin-right: 20px; + font-weight: 500; +} + +.sort__block { + display: flex; + justify-content: space-between; + width: 100%; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_title.scss b/main/_front/src/scss/blocks/_title.scss new file mode 100644 index 0000000..a34af29 --- /dev/null +++ b/main/_front/src/scss/blocks/_title.scss @@ -0,0 +1,9 @@ +.title { + margin: 15px 0 20px; +} + +.title__text { + font-size: 30px; + font-weight: 700; + line-height: 47px; +} \ No newline at end of file