srcdev-nuxt-components 2.5.12 → 2.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
<div v-if="showGallery" class="gallery-content" :class="[{ galleryLoaded: !galleryLoaded }]">
|
|
9
9
|
<div class="list" ref="sliderGalleryImagesList">
|
|
10
10
|
<div v-for="(item, index) in galleryData" :key="index" class="item">
|
|
11
|
-
<NuxtImg
|
|
11
|
+
<NuxtImg @load="handleImageLoad(index)" @error="handleImageError(index)" :src="item.src" :alt="item.alt"
|
|
12
12
|
loading="lazy" />
|
|
13
|
-
<div class="content">
|
|
14
|
-
<div class="author">{{ item.stylist }}</div>
|
|
15
|
-
<div class="title">{{ item.title }}</div>
|
|
16
|
-
<div class="topic">{{ item.category }}</div>
|
|
17
|
-
<div class="des">{{ item.description }}</div>
|
|
18
|
-
<div class="buttons">
|
|
13
|
+
<div class="content" :class="item.textBrightness">
|
|
14
|
+
<div v-show="item.stylist !== ''" class="author" :class="item.textBrightness">{{ item.stylist }}</div>
|
|
15
|
+
<div v-show="item.title !== ''" class="title" :class="item.textBrightness">{{ item.title }}</div>
|
|
16
|
+
<div v-show="item.category !== ''" class="topic" :class="item.textBrightness">{{ item.category }}</div>
|
|
17
|
+
<div v-show="item.description !== ''" class="des" :class="item.textBrightness">{{ item.description }}</div>
|
|
18
|
+
<div class="buttons" :class="item.textBrightness">
|
|
19
19
|
<button>SEE MORE</button>
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
<div v-for="(item, index) in galleryData" :key="index" class="item">
|
|
27
27
|
<div class="inner">
|
|
28
28
|
<img :src="item.src" :alt="item.alt" loading="lazy" />
|
|
29
|
-
<div class="content">
|
|
30
|
-
<div
|
|
31
|
-
<div
|
|
29
|
+
<div class="content" :class="item.textBrightness">
|
|
30
|
+
<div v-show="item.thumbnail?.title !== ''" class="title" :class="item.textBrightness">{{ item.thumbnail?.title }}</div>
|
|
31
|
+
<div v-show="item.thumbnail?.description !== ''" class="description" :class="item.textBrightness">{{ item.thumbnail?.description }}
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
|
@@ -80,6 +80,7 @@ interface IGalleryData {
|
|
|
80
80
|
title: string;
|
|
81
81
|
description: string;
|
|
82
82
|
};
|
|
83
|
+
textBrightness: 'light' | 'dark';
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
@@ -381,24 +382,50 @@ onBeforeUnmount(() => {
|
|
|
381
382
|
transform: translateX(-50%);
|
|
382
383
|
padding-right: 30%;
|
|
383
384
|
box-sizing: border-box;
|
|
384
|
-
color: #fff;
|
|
385
385
|
text-shadow: 0 5px 10px #0004;
|
|
386
386
|
|
|
387
|
+
&.light {
|
|
388
|
+
color: #fff;
|
|
389
|
+
}
|
|
390
|
+
&.dark {
|
|
391
|
+
color: #000;
|
|
392
|
+
}
|
|
393
|
+
|
|
387
394
|
.author {
|
|
388
395
|
font-weight: bold;
|
|
389
396
|
letter-spacing: 10px;
|
|
397
|
+
|
|
398
|
+
&.light {
|
|
399
|
+
color: #fff;
|
|
400
|
+
}
|
|
401
|
+
&.dark {
|
|
402
|
+
color: #000;
|
|
403
|
+
}
|
|
390
404
|
}
|
|
391
405
|
|
|
392
406
|
.title {
|
|
393
407
|
font-size: 5em;
|
|
394
408
|
font-weight: bold;
|
|
395
409
|
line-height: 1.3em;
|
|
410
|
+
|
|
411
|
+
&.light {
|
|
412
|
+
color: #fff;
|
|
413
|
+
}
|
|
414
|
+
&.dark {
|
|
415
|
+
color: #000;
|
|
416
|
+
}
|
|
396
417
|
}
|
|
397
418
|
.topic {
|
|
398
419
|
font-size: 5em;
|
|
399
420
|
font-weight: bold;
|
|
400
421
|
line-height: 1.3em;
|
|
401
|
-
|
|
422
|
+
|
|
423
|
+
&.light {
|
|
424
|
+
color: #fff;
|
|
425
|
+
}
|
|
426
|
+
&.dark {
|
|
427
|
+
color: #000;
|
|
428
|
+
}
|
|
402
429
|
}
|
|
403
430
|
|
|
404
431
|
.buttons {
|
|
@@ -414,6 +441,13 @@ onBeforeUnmount(() => {
|
|
|
414
441
|
color: #fff;
|
|
415
442
|
letter-spacing: 3px;
|
|
416
443
|
font-weight: 500;
|
|
444
|
+
|
|
445
|
+
&.light {
|
|
446
|
+
color: #fff;
|
|
447
|
+
}
|
|
448
|
+
&.dark {
|
|
449
|
+
color: #000;
|
|
450
|
+
}
|
|
417
451
|
}
|
|
418
452
|
}
|
|
419
453
|
}
|
|
@@ -455,7 +489,6 @@ onBeforeUnmount(() => {
|
|
|
455
489
|
}
|
|
456
490
|
|
|
457
491
|
.content {
|
|
458
|
-
color: #fff;
|
|
459
492
|
position: absolute;
|
|
460
493
|
bottom: 10px;
|
|
461
494
|
left: 10px;
|
|
@@ -463,10 +496,24 @@ onBeforeUnmount(() => {
|
|
|
463
496
|
|
|
464
497
|
.title {
|
|
465
498
|
font-weight: 500;
|
|
499
|
+
|
|
500
|
+
&.light {
|
|
501
|
+
color: #fff;
|
|
502
|
+
}
|
|
503
|
+
&.dark {
|
|
504
|
+
color: #000;
|
|
505
|
+
}
|
|
466
506
|
}
|
|
467
507
|
|
|
468
508
|
.description {
|
|
469
509
|
font-weight: 300;
|
|
510
|
+
|
|
511
|
+
&.light {
|
|
512
|
+
color: #fff;
|
|
513
|
+
}
|
|
514
|
+
&.dark {
|
|
515
|
+
color: #000;
|
|
516
|
+
}
|
|
470
517
|
}
|
|
471
518
|
}
|
|
472
519
|
}
|
package/package.json
CHANGED