This commit is contained in:
Veselov
parent
e5d0c2464d
commit
e2e031b7c5
8
app.vue
8
app.vue
@ -1,11 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use '@/assets/scss/main' as *;
|
||||
</style>
|
||||
|
||||
2
assets/css/main.css
Normal file
2
assets/css/main.css
Normal file
@ -0,0 +1,2 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@ -1,6 +0,0 @@
|
||||
// Breakpoints
|
||||
$breakpoint-sm: 576px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 992px;
|
||||
$breakpoint-xl: 1200px;
|
||||
$breakpoint-xxl: 1400px;
|
||||
@ -1,70 +0,0 @@
|
||||
/* Modern CSS Reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Remove default margin and padding */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements */
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
// Brand Colors
|
||||
$brand-primary: #4f46e5; // Основной цвет бренда
|
||||
$brand-secondary: #10b981; // Вторичный цвет бренда
|
||||
|
||||
// Neutral Colors
|
||||
$neutral-50: #f9fafb; // Самый светлый оттенок
|
||||
$neutral-100: #f3f4f6; // Светлый фон
|
||||
$neutral-200: #e5e7eb; // Светлая граница
|
||||
$neutral-300: #d1d5db; // Светлый текст
|
||||
$neutral-400: #9ca3af; // Неактивный текст
|
||||
$neutral-500: #6b7280; // Средний текст
|
||||
$neutral-600: #4b5563; // Основной текст
|
||||
$neutral-700: #374151; // Темный текст
|
||||
$neutral-800: #1f2937; // Очень темный текст
|
||||
$neutral-900: #111827; // Самый темный оттенок
|
||||
|
||||
// Semantic Colors
|
||||
$text-primary: $neutral-900; // Основной текст
|
||||
$text-secondary: $neutral-600; // Вторичный текст
|
||||
$text-muted: $neutral-400; // Неактивный текст
|
||||
$background-primary: $neutral-50; // Основной фон
|
||||
$background-secondary: $neutral-100; // Вторичный фон
|
||||
$border-color: $neutral-200; // Цвет границ
|
||||
|
||||
// Status Colors
|
||||
$success: #10b981; // Успех
|
||||
$warning: #f59e0b; // Предупреждение
|
||||
$error: #ef4444; // Ошибка
|
||||
$info: #3b82f6; // Информация
|
||||
|
||||
// Basic Colors
|
||||
$black: #000000;
|
||||
$dark-background: #13141c;
|
||||
$dark-grey: #171821;
|
||||
$grey-selector: #1b1b24;
|
||||
$grey-blocks: #1e1f2b;
|
||||
$grey-text-highlight: #23242c;
|
||||
$grey-blocks-hover: #262736;
|
||||
$grey-menu: #292a32;
|
||||
$grey-stroke: #323442;
|
||||
$grey-paginator: #323442;
|
||||
$grey-icons: #5b5e6d;
|
||||
$grey-text: #7f808b;
|
||||
$grey-text2: #9A9BAB;
|
||||
$white: #ffffff;
|
||||
$greeen: #9fff00;
|
||||
$greeen-dark: #43611b;
|
||||
$red: #ff4141;
|
||||
$red-dark: #3e232c;
|
||||
$green: #20b26c;
|
||||
$green-dark: #133324;
|
||||
$gold: #ffc35c;
|
||||
|
||||
// Form Elements
|
||||
$grey-form: #1c1d26;
|
||||
$grey-form-stroke: #323442;
|
||||
$grey-button: #21222d;
|
||||
$grey-button-2: #32323c;
|
||||
$grey-button-stroke: #5b5e6d;
|
||||
|
||||
// Export colors for JavaScript
|
||||
:export {
|
||||
black: $black;
|
||||
darkBackground: $dark-background;
|
||||
darkGrey: $dark-grey;
|
||||
greySelector: $grey-selector;
|
||||
greyBlocks: $grey-blocks;
|
||||
greyTextHighlight: $grey-text-highlight;
|
||||
greyBlocksHover: $grey-blocks-hover;
|
||||
greyMenu: $grey-menu;
|
||||
greyStroke: $grey-stroke;
|
||||
greyPaginator: $grey-paginator;
|
||||
greyIcons: $grey-icons;
|
||||
greyText: $grey-text;
|
||||
white: $white;
|
||||
greeen: $greeen;
|
||||
greeenDark: $greeen-dark;
|
||||
red: $red;
|
||||
redDark: $red-dark;
|
||||
green: $green;
|
||||
greenDark: $green-dark;
|
||||
greyForm: $grey-form;
|
||||
greyFormStroke: $grey-form-stroke;
|
||||
greyButton: $grey-button;
|
||||
greyButton2: $grey-button-2;
|
||||
greyButtonStroke: $grey-button-stroke;
|
||||
gold: $gold;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@use 'main' as *;
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: $text-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
@use 'reset';
|
||||
@use 'colors' as *;
|
||||
@use 'typography' as *;
|
||||
@use 'utils' as *;
|
||||
|
||||
// Base styles
|
||||
html {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family-base;
|
||||
color: white;
|
||||
background-color: black;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Typography
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include h1('h1');
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include h2('h2');
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include h3('h3');
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Forms
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
@ -1,121 +0,0 @@
|
||||
@use 'utils' as *;
|
||||
|
||||
// Font Face Declarations
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-Regular.woff2') format('woff2'),
|
||||
url('/fonts/Inter-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-Medium.woff2') format('woff2'),
|
||||
url('/fonts/Inter-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-SemiBold.woff2') format('woff2'),
|
||||
url('/fonts/Inter-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Font Variables
|
||||
$font-family-base:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
|
||||
// Font Weights
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
|
||||
// Custom type
|
||||
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
|
||||
@if ($namespace) {
|
||||
@if ($onlyVars) {
|
||||
--#{$namespace}-font-size: #{$size};
|
||||
--#{$namespace}-font-weight: #{$weight};
|
||||
--#{$namespace}-line-height: #{$lineHeight};
|
||||
} @else {
|
||||
font-size: var(--#{$namespace}-font-size, $size);
|
||||
font-weight: var(--#{$namespace}-font-weight, $weight);
|
||||
line-height: var(--#{$namespace}-line-height, $lineHeight);
|
||||
}
|
||||
} @else {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headline */
|
||||
@mixin h1($namespace: null, $onlyVars: false) {
|
||||
@include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
@include mobile {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@mixin h2($namespace: null, $onlyVars: false) {
|
||||
@include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
@include mobile {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@mixin h3($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
/* Text */
|
||||
// 16 medium-(medium/bold)
|
||||
@mixin txt-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-b($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 14 regular-(medium/bold)
|
||||
@mixin txt-r($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-m($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-b($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 12 text small-(medium/bold)
|
||||
@mixin txt-s($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-m($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-b($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 10 text-tiny
|
||||
@mixin txt-t($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
@ -1,153 +0,0 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:math';
|
||||
@use 'breakpoints' as *;
|
||||
|
||||
// Mixins
|
||||
@mixin responsive($breakpoint) {
|
||||
@media (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
|
||||
|
||||
@each $i in $indents {
|
||||
.m#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.mx#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.my#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.p#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.px#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.py#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
}
|
||||
|
||||
.mla {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mra {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@each $align in ('left', 'right', 'center') {
|
||||
.text-align-#{$align} {
|
||||
text-align: #{$align};
|
||||
}
|
||||
}
|
||||
|
||||
.w-25 { width: 25% !important; }
|
||||
.w-50 { width: 50% !important; }
|
||||
.w-75 { width: 75% !important; }
|
||||
.w-100 { width: 100% !important; }
|
||||
|
||||
.d-none { display: none !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-table { display: table !important; }
|
||||
.d-table-row { display: table-row !important; }
|
||||
.d-table-cell { display: table-cell !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
.d-inline-flex { display: inline-flex !important; }
|
||||
|
||||
.flex-row { flex-direction: row !important; }
|
||||
.flex-column { flex-direction: column !important; }
|
||||
.flex-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.flex-wrap { flex-wrap: wrap !important; }
|
||||
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-start { justify-content: flex-start !important; }
|
||||
.justify-content-end { justify-content: flex-end !important; }
|
||||
.justify-content-center { justify-content: center !important; }
|
||||
.justify-content-between { justify-content: space-between !important; }
|
||||
.justify-content-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-start { align-items: flex-start !important; }
|
||||
.align-items-end { align-items: flex-end !important; }
|
||||
.align-items-center { align-items: center !important; }
|
||||
.align-items-baseline { align-items: baseline !important; }
|
||||
.align-items-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-start { align-content: flex-start !important; }
|
||||
.align-content-end { align-content: flex-end !important; }
|
||||
.align-content-center { align-content: center !important; }
|
||||
.align-content-between { align-content: space-between !important; }
|
||||
.align-content-around { align-content: space-around !important; }
|
||||
.align-content-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-auto { align-self: auto !important; }
|
||||
.align-self-start { align-self: flex-start !important; }
|
||||
.align-self-end { align-self: flex-end !important; }
|
||||
.align-self-center { align-self: center !important; }
|
||||
.align-self-baseline { align-self: baseline !important; }
|
||||
.align-self-stretch { align-self: stretch !important; }
|
||||
|
||||
.text-align-center { text-align: center !important; }
|
||||
.text-align-left { text-align: left !important; }
|
||||
.text-align-right { text-align: right !important; }
|
||||
@ -17,18 +17,14 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/assets/scss/colors.scss' as colors;
|
||||
@use '@/assets/scss/main.scss' as main;
|
||||
@use '@/assets/scss/utils.scss' as utils;
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: colors.$dark-grey;
|
||||
}
|
||||
|
||||
.container {
|
||||
--ui-container: 100%;
|
||||
max-width: 100%;
|
||||
margin: 48px auto 100px;
|
||||
|
||||
|
||||
@ -3,4 +3,5 @@ export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-05-15',
|
||||
devtools: { enabled: true },
|
||||
modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts'],
|
||||
css: ['~/assets/css/main.css'],
|
||||
})
|
||||
|
||||
@ -1,39 +1,43 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card__images">
|
||||
<div
|
||||
v-for="image in currentVariantImages"
|
||||
:key="image?.id"
|
||||
>
|
||||
<img width="100%" :src="image?.src" :alt="image?.src">
|
||||
</div>
|
||||
</div>
|
||||
<UContainer>
|
||||
<UButton size="xl" label="btn" />
|
||||
|
||||
<div class="card__description">
|
||||
<h1>{{ productsData?.name }}</h1>
|
||||
|
||||
Цена
|
||||
{{ currentVariant?.price }}
|
||||
|
||||
Коротокое описание
|
||||
{{ productsData?.short_description }}
|
||||
|
||||
<div class="card__variation">
|
||||
<div class="card">
|
||||
<div class="card__images">
|
||||
<div
|
||||
v-for="variation in productsVariationsData"
|
||||
:key="variation?.id"
|
||||
@click="() => currentVariantId = variation?.id"
|
||||
v-for="image in currentVariantImages"
|
||||
:key="image?.id"
|
||||
>
|
||||
{{ variation?.id }}
|
||||
<img width="200px" :src="variation?.image?.src">
|
||||
<img width="100%" :src="image?.src" :alt="image?.src">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
<div class="card__description">
|
||||
<h1>{{ productsData?.name }}</h1>
|
||||
|
||||
Цена
|
||||
{{ currentVariant?.price }}
|
||||
|
||||
Коротокое описание
|
||||
{{ productsData?.short_description }}
|
||||
|
||||
<div class="card__variation">
|
||||
<div
|
||||
v-for="variation in productsVariationsData"
|
||||
:key="variation?.id"
|
||||
@click="() => currentVariantId = variation?.id"
|
||||
>
|
||||
{{ variation?.id }}
|
||||
<img width="200px" :src="variation?.image?.src" :alt="variation?.image?.src">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
{{ currentVariant }}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
16
tailwind.config.ts
Normal file
16
tailwind.config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
// tailwind.config.ts
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
content: [], // Nuxt сам заполняет content автоматически
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'], // если используешь @nuxt/fonts или свою кастомную типографику
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
export default config
|
||||
Loading…
x
Reference in New Issue
Block a user