@fonixtree/magic-design 0.0.119 → 0.0.121

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.
Files changed (29) hide show
  1. package/es/composite-comp/bol/components/Banner/mobile/index.less +71 -48
  2. package/es/composite-comp/bol/components/Carousel/mobile/index.less +92 -76
  3. package/es/composite-comp/bol/components/ImageGallery/mobile/index.less +22 -15
  4. package/es/composite-comp/bol/components/ImageText/mobile/index.less +291 -232
  5. package/es/composite-comp/bol/components/Video/mobile/Layout1/index.less +26 -22
  6. package/es/composite-comp/bol/components/Video/mobile/Layout2/index.less +44 -37
  7. package/es/composite-comp/bol/components/Video/mobile/Layout3/index.less +36 -29
  8. package/es/composite-comp/bol/components/Video/mobile/index.less +3 -2
  9. package/es/composite-comp/bol/components/Wallet/mobile/index.less +40 -27
  10. package/es/composite-comp/bol/components/Wallet/pc/index.js +7 -3
  11. package/es/composite-comp/dito/components/FlashDeal/mobile/index.less +97 -83
  12. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +34 -20
  13. package/es/composite-comp/dito/components/Recommend/mobile/index.less +86 -73
  14. package/es/composite-comp/dito/components/SearchBar/mobile/index.less +44 -40
  15. package/lib/composite-comp/bol/components/Banner/mobile/index.less +71 -48
  16. package/lib/composite-comp/bol/components/Carousel/mobile/index.less +92 -76
  17. package/lib/composite-comp/bol/components/ImageGallery/mobile/index.less +22 -15
  18. package/lib/composite-comp/bol/components/ImageText/mobile/index.less +291 -232
  19. package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.less +26 -22
  20. package/lib/composite-comp/bol/components/Video/mobile/Layout2/index.less +44 -37
  21. package/lib/composite-comp/bol/components/Video/mobile/Layout3/index.less +36 -29
  22. package/lib/composite-comp/bol/components/Video/mobile/index.less +3 -2
  23. package/lib/composite-comp/bol/components/Wallet/mobile/index.less +40 -27
  24. package/lib/composite-comp/bol/components/Wallet/pc/index.js +7 -3
  25. package/lib/composite-comp/dito/components/FlashDeal/mobile/index.less +97 -83
  26. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +34 -20
  27. package/lib/composite-comp/dito/components/Recommend/mobile/index.less +86 -73
  28. package/lib/composite-comp/dito/components/SearchBar/mobile/index.less +44 -40
  29. package/package.json +1 -1
package/es/composite-comp/bol/components/Banner/mobile/index.less CHANGED
@@ -1,50 +1,73 @@
1
1
  .m-banner-mobile {
2
2
  position: relative;
3
- }
4
- .m-banner-mobile .carouselItem {
5
- position: relative;
6
- display: flex;
7
- }
8
- .m-banner-mobile .carouselItem .carouseContent {
9
- padding: 10.667vw 3.733vw 0;
10
- position: absolute;
11
- z-index: 2;
12
- display: flex;
13
- flex-direction: column;
14
- margin-bottom: auto;
15
- }
16
- .m-banner-mobile .carouselItem .title {
17
- margin-bottom: 1.067vw;
18
- }
19
- .m-banner-mobile .carouselItem .sub-title {
20
- margin-bottom: 2.667vw;
21
- }
22
- .m-banner-mobile .carouselItem .btn-wrap {
23
- display: flex;
24
- align-items: center;
25
- justify-content: flex-start;
26
- }
27
- .m-banner-mobile .carouselItem .btn-wrap .btn {
28
- margin-right: 1.6vw;
29
- }
30
- .m-banner-mobile .swiper-ban {
31
- position: absolute;
32
- width: 100%;
33
- bottom: 1.333vw;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- }
38
- .m-banner-mobile .swiper-ban .ban {
39
- font-size: 2.133vw;
40
- width: 1.5em;
41
- height: 0.3em;
42
- background: #FFF;
43
- cursor: inherit;
44
- margin-right: 0.3em;
45
- transition: all 0.5s;
46
- }
47
- .m-banner-mobile .swiper-ban .ban.active {
48
- width: 1.5em;
49
- opacity: 1;
50
- }
3
+ // .turnPage {
4
+ // position: absolute;
5
+ // top: 50%;
6
+ // transform: translateY(-50%);
7
+ // z-index: 3;
8
+ // cursor: pointer;
9
+ // }
10
+ // .leftBtn {
11
+ // left: 20px;
12
+ // }
13
+ // .rightBtn {
14
+ // right: 20px;
15
+ // }
16
+
17
+ .carouselItem {
18
+ // height: 386px;
19
+ position: relative;
20
+ display: flex;
21
+
22
+ .carouseContent {
23
+ padding: 80px 28px 0;
24
+ position: absolute;
25
+ z-index: 2;
26
+ display: flex;
27
+ flex-direction: column;
28
+ margin-bottom: auto;
29
+ }
30
+
31
+ .title {
32
+ margin-bottom: 8px;
33
+ }
34
+
35
+ .sub-title {
36
+ margin-bottom: 20px;
37
+ }
38
+
39
+ .btn-wrap {
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: flex-start;
43
+
44
+ .btn {
45
+ margin-right: 12px;
46
+ }
47
+ }
48
+ }
49
+
50
+ .swiper-ban {
51
+ position: absolute;
52
+ width: 100%;
53
+ bottom: 10px;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+
58
+ .ban {
59
+ font-size: 16px;
60
+ width: 1.5em;
61
+ height: 0.3em;
62
+ background: #FFF;
63
+ cursor: inherit;
64
+ margin-right: 0.3em;
65
+ transition: all .5s;
66
+
67
+ &.active {
68
+ width: 1.5em;
69
+ opacity: 1;
70
+ }
71
+ }
72
+ }
73
+ }
package/es/composite-comp/bol/components/Carousel/mobile/index.less CHANGED
@@ -1,79 +1,95 @@
1
1
  .m-carousel-mobile {
2
2
  position: relative;
3
3
  width: 100%;
4
- }
5
- .m-carousel-mobile .content {
6
- display: flex;
7
- margin: 0 auto;
8
- }
9
- .m-carousel-mobile .slider-wrap {
10
- width: 100%;
11
- margin: 0 auto;
12
- line-height: 1;
13
- }
14
- .m-carousel-mobile .slider-wrap .slick-list {
15
- padding-top: 13.333vw;
16
- margin-top: -13.333vw;
17
- padding-bottom: 13.333vw;
18
- margin-bottom: -13.333vw;
19
- margin-left: -1.467vw;
20
- margin-right: -1.467vw;
21
- }
22
- .m-carousel-mobile .slider-wrap .slick-list .slick-track {
23
- display: flex;
24
- align-items: center;
25
- gap: 1.6vw;
26
- }
27
- .m-carousel-mobile .slider-wrap .img-wrap .img {
28
- width: fit-content;
29
- height: fit-content;
30
- display: block;
31
- margin: 0 auto;
32
- }
33
- .m-carousel-mobile .slider-wrap .img-wrap .title {
34
- display: flex;
35
- justify-content: center;
36
- margin-top: 1.6vw;
37
- }
38
- .m-carousel-mobile .slider-wrap .img-wrap .text {
39
- display: flex;
40
- justify-content: center;
41
- margin-top: 0.267vw;
42
- }
43
- .m-carousel-mobile .slider-wrap .img-wrap .tags {
44
- margin-top: 1.067vw;
45
- margin-bottom: 1.6vw;
46
- display: flex;
47
- flex-direction: row;
48
- align-items: center;
49
- justify-content: center;
50
- }
51
- .m-carousel-mobile .slider-wrap .img-wrap .tags > div {
52
- margin-right: 1.067vw;
53
- }
54
- .m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
55
- margin-right: 0;
56
- }
57
- .m-carousel-mobile .swiper-ban {
58
- position: absolute;
59
- width: 100%;
60
- bottom: 0.8vw;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- }
65
- .m-carousel-mobile .swiper-ban .ban {
66
- font-size: 1.067vw;
67
- width: 1em;
68
- height: 1em;
69
- border-radius: 50%;
70
- background: #FFF;
71
- cursor: inherit;
72
- margin-right: 1em;
73
- transition: all 0.5s;
74
- }
75
- .m-carousel-mobile .swiper-ban .ban.active {
76
- width: 2em;
77
- border-radius: 13.333vw;
78
- opacity: 1;
79
- }
4
+
5
+ .content {
6
+ display: flex;
7
+ margin: 0 auto;
8
+ }
9
+
10
+ .slider-wrap {
11
+ width: 100%;
12
+ margin: 0 auto;
13
+ line-height: 1;
14
+
15
+ .slick-list {
16
+ padding-top: 100px;
17
+ margin-top: -100px;
18
+ padding-bottom: 100px;
19
+ margin-bottom: -100px;
20
+
21
+ margin-left: -11px;
22
+ margin-right: -11px;
23
+
24
+ .slick-track {
25
+ display: flex;
26
+ align-items: center;
27
+ gap: 12px;
28
+ }
29
+ }
30
+
31
+ .img-wrap {
32
+ .img {
33
+ width: fit-content;
34
+ height: fit-content;
35
+ display: block;
36
+ margin: 0 auto;
37
+ }
38
+
39
+ .title {
40
+ display: flex;
41
+ justify-content: center;
42
+ margin-top: 12px;
43
+ }
44
+
45
+ .text {
46
+ display: flex;
47
+ justify-content: center;
48
+ margin-top: 2px;
49
+ }
50
+
51
+ .tags {
52
+ margin-top: 8px;
53
+ margin-bottom: 12px;
54
+ display: flex;
55
+ flex-direction: row;
56
+ align-items: center;
57
+ justify-content: center;
58
+
59
+ >div {
60
+ margin-right: 8px;
61
+
62
+ &:last-child {
63
+ margin-right: 0;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ .swiper-ban {
71
+ position: absolute;
72
+ width: 100%;
73
+ bottom: 6px;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+
78
+ .ban {
79
+ font-size: 8px;
80
+ width: 1em;
81
+ height: 1em;
82
+ border-radius: 50%;
83
+ background: #FFF;
84
+ cursor: inherit;
85
+ margin-right: 1em;
86
+ transition: all .5s;
87
+
88
+ &.active {
89
+ width: 2em;
90
+ border-radius: 100px;
91
+ opacity: 1;
92
+ }
93
+ }
94
+ }
95
+ }
package/es/composite-comp/bol/components/ImageGallery/mobile/index.less CHANGED
@@ -1,15 +1,22 @@
1
- .m-image-gallery-mobile .content .line {
2
- margin-bottom: 1.6vw;
3
- }
4
- .m-image-gallery-mobile .content .line.isHorizontal {
5
- display: flex;
6
- justify-content: flex-start;
7
- }
8
- .m-image-gallery-mobile .content .line:last-child {
9
- margin-bottom: 0;
10
- }
11
- .m-image-gallery-mobile .content .line .img-wrap {
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- }
1
+ .m-image-gallery-mobile {
2
+ .content {
3
+ .line {
4
+ margin-bottom: 12px;
5
+
6
+ &.isHorizontal {
7
+ display: flex;
8
+ justify-content: flex-start;
9
+ }
10
+
11
+ &:last-child {
12
+ margin-bottom: 0;
13
+ }
14
+
15
+ .img-wrap {
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ }
20
+ }
21
+ }
22
+ }