@jx3box/jx3box-ui 2.1.19 → 2.2.0
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.
- package/package.json +1 -1
- package/src/CommonFooter.vue +84 -8
- package/src/CommonHeader.vue +21 -10
package/package.json
CHANGED
package/src/CommonFooter.vue
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<footer class="c-footer--v4
|
|
3
|
-
<div class="
|
|
4
|
-
<div class="
|
|
5
|
-
<section class="
|
|
6
|
-
<a class="
|
|
7
|
-
<img
|
|
8
|
-
|
|
2
|
+
<footer class="c-footer--v4">
|
|
3
|
+
<div class="c-footer--v4__container">
|
|
4
|
+
<div class="c-footer--v4__main">
|
|
5
|
+
<section class="c-footer--v4__brand">
|
|
6
|
+
<a class="c-footer--v4__brand-link" href="/">
|
|
7
|
+
<img
|
|
8
|
+
class="c-footer--v4__logo u-logo"
|
|
9
|
+
svg-inline
|
|
10
|
+
src="../assets/img/common/logo.svg"
|
|
11
|
+
alt="JX3BOX"
|
|
12
|
+
/>
|
|
13
|
+
<span class="c-footer--v4__brand-name">JX3BOX</span>
|
|
9
14
|
</a>
|
|
10
|
-
<p class="
|
|
15
|
+
<p class="c-footer--v4__slogan">
|
|
11
16
|
{{ $jx3boxT("jx3boxUi.commonFooter.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
|
|
12
17
|
{{ $jx3boxT("jx3boxUi.commonFooter.slogan2", "江湖路远，幸甚有你。") }}
|
|
13
18
|
</p>
|
|
@@ -49,6 +54,77 @@ body::after {
|
|
|
49
54
|
background: #111827;
|
|
50
55
|
}
|
|
51
56
|
.c-footer--v4{
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
padding: 3rem 1.5rem;
|
|
59
|
+
background: #111827;
|
|
60
|
+
color: #9ca3af;
|
|
61
|
+
|
|
62
|
+
@media (min-width: 768px) {
|
|
63
|
+
padding-left: 2.5rem;
|
|
64
|
+
padding-right: 2.5rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (min-width: 1024px) {
|
|
68
|
+
padding-left: 4rem;
|
|
69
|
+
padding-right: 4rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media (min-width: 1280px) {
|
|
73
|
+
padding-left: 5rem;
|
|
74
|
+
padding-right: 5rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&__container {
|
|
78
|
+
width: 100%;
|
|
79
|
+
margin: 0 auto;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&__main {
|
|
83
|
+
display: grid;
|
|
84
|
+
grid-template-columns: 1fr;
|
|
85
|
+
gap: 2.5rem;
|
|
86
|
+
padding-bottom: 2.5rem;
|
|
87
|
+
|
|
88
|
+
@media (min-width: 1024px) {
|
|
89
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
90
|
+
gap: 2rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&__brand {
|
|
95
|
+
@media (min-width: 1024px) {
|
|
96
|
+
grid-column: span 3 / span 3;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__brand-link {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 0.75rem;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&__logo {
|
|
108
|
+
width: 2.25rem;
|
|
109
|
+
height: 2.25rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&__brand-name {
|
|
113
|
+
font-size: 1.5rem;
|
|
114
|
+
line-height: 2rem;
|
|
115
|
+
font-weight: 700;
|
|
116
|
+
letter-spacing: -0.025em;
|
|
117
|
+
color: #fff;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&__slogan {
|
|
121
|
+
max-width: 20rem;
|
|
122
|
+
margin-top: 1.25rem;
|
|
123
|
+
font-size: 0.875rem;
|
|
124
|
+
line-height: 1.75rem;
|
|
125
|
+
color: #9ca3af;
|
|
126
|
+
}
|
|
127
|
+
|
|
52
128
|
.u-logo{
|
|
53
129
|
fill:#fff;
|
|
54
130
|
}
|
package/src/CommonHeader.vue
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<header class="c-header" id="c-header" :class="{ isOverlay: overlayEnable && isOverlay }">
|
|
3
|
-
<div class="c-header-inner">
|
|
3
|
+
<div class="c-header__inner c-header-inner">
|
|
4
4
|
<!-- logo -->
|
|
5
|
-
<header-logo />
|
|
5
|
+
<header-logo class="c-header__logo" />
|
|
6
6
|
|
|
7
7
|
<!-- client -->
|
|
8
|
-
<header-client :defaultValue="client" />
|
|
8
|
+
<header-client class="c-header__client" :defaultValue="client" />
|
|
9
9
|
|
|
10
10
|
<!-- search -->
|
|
11
|
-
<header-search :client="client" />
|
|
11
|
+
<header-search class="c-header__search" :client="client" />
|
|
12
12
|
|
|
13
13
|
<!-- nav -->
|
|
14
|
-
<header-nav :client="client" />
|
|
14
|
+
<header-nav class="c-header__nav" :client="client" />
|
|
15
15
|
|
|
16
|
-
<
|
|
16
|
+
<div class="c-header__extra">
|
|
17
|
+
<slot></slot>
|
|
18
|
+
</div>
|
|
17
19
|
|
|
18
20
|
<!-- user -->
|
|
19
|
-
<header-user ref="user" :client="client" :asset="asset" />
|
|
21
|
+
<header-user ref="user" class="c-header__user" :client="client" :asset="asset" />
|
|
20
22
|
</div>
|
|
21
|
-
<header-box v-if="isMobile" class="c-header-jx3box" :overlayEnable="overlayEnable" />
|
|
22
|
-
<header-box2 v-else />
|
|
23
|
+
<header-box v-if="isMobile" class="c-header__box c-header-jx3box" :overlayEnable="overlayEnable" />
|
|
24
|
+
<header-box2 v-else class="c-header__box c-header__box--desktop" />
|
|
23
25
|
</header>
|
|
24
26
|
</template>
|
|
25
27
|
|
|
@@ -85,7 +87,7 @@ export default {
|
|
|
85
87
|
const urlParams = new URLSearchParams(window.location.search);
|
|
86
88
|
const from = urlParams.get("from");
|
|
87
89
|
from && sessionStorage.setItem("from", from);
|
|
88
|
-
if (checkIsApp) {
|
|
90
|
+
if (checkIsApp()) {
|
|
89
91
|
localStorage.setItem("__env", "app");
|
|
90
92
|
}
|
|
91
93
|
if (isMiniProgram() || checkIsApp()) {
|
|
@@ -236,6 +238,15 @@ export default {
|
|
|
236
238
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
237
239
|
|
|
238
240
|
transition: 0.5s ease-in-out;
|
|
241
|
+
|
|
242
|
+
&__inner {
|
|
243
|
+
&:after {
|
|
244
|
+
content: "";
|
|
245
|
+
display: table;
|
|
246
|
+
clear: both;
|
|
247
|
+
}
|
|
248
|
+
.flex;
|
|
249
|
+
}
|
|
239
250
|
}
|
|
240
251
|
.c-header.isOverlay {
|
|
241
252
|
background-color: rgba(0, 0, 0, 0.85);
|