wlwy-package 4.0.0-beta.25 → 4.0.0-beta.27
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/dist/page-shell.html +225 -0
- package/package.json +3 -2
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
整页加载的第一段骨架。
|
|
3
|
+
浏览器还在下载 JS 时，页面只能显示普通 HTML。WMS 构建时把本文件注入 index.html，
|
|
4
|
+
用来盖住脚本下载完成前的白屏。脚本执行后由 page.vue 接替，本段会被替换掉。
|
|
5
|
+
-->
|
|
6
|
+
<style>
|
|
7
|
+
html,
|
|
8
|
+
body,
|
|
9
|
+
#app {
|
|
10
|
+
height: 100%;
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.w-page-shell {
|
|
15
|
+
display: flex;
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
background: #f4f6f8;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.w-page-shell .bar {
|
|
21
|
+
display: block;
|
|
22
|
+
border-radius: 4px;
|
|
23
|
+
background: linear-gradient(90deg, #f2f3f5 25%, #e6e8ec 37%, #f2f3f5 63%);
|
|
24
|
+
background-size: 400% 100%;
|
|
25
|
+
animation: w-page-shell-loading 1.4s ease infinite;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.w-page-shell .sider {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex: 0 0 216px;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
width: 216px;
|
|
33
|
+
background: #fff;
|
|
34
|
+
border-right: 1px solid #eef0f3;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.w-page-shell .logo {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
height: 64px;
|
|
42
|
+
border-bottom: 1px solid #eef0f3;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.w-page-shell .logo-bar {
|
|
46
|
+
width: 36px;
|
|
47
|
+
height: 36px;
|
|
48
|
+
border-radius: 6px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.w-page-shell .menus {
|
|
52
|
+
padding: 12px 16px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.w-page-shell .menu-bar {
|
|
56
|
+
width: 70%;
|
|
57
|
+
height: 16px;
|
|
58
|
+
margin: 14px 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.w-page-shell .body {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex: 1;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
min-width: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.w-page-shell .header,
|
|
69
|
+
.w-page-shell .header-left,
|
|
70
|
+
.w-page-shell .header-right {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.w-page-shell .header {
|
|
76
|
+
justify-content: space-between;
|
|
77
|
+
height: 64px;
|
|
78
|
+
padding: 0 16px;
|
|
79
|
+
background: #fff;
|
|
80
|
+
border-bottom: 1px solid #eef0f3;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.w-page-shell .header-left,
|
|
84
|
+
.w-page-shell .header-right {
|
|
85
|
+
gap: 16px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.w-page-shell .dot {
|
|
89
|
+
width: 20px;
|
|
90
|
+
height: 20px;
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.w-page-shell .title {
|
|
95
|
+
width: 120px;
|
|
96
|
+
height: 20px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.w-page-shell .menu,
|
|
100
|
+
.w-page-shell .tab {
|
|
101
|
+
width: 88px;
|
|
102
|
+
height: 16px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.w-page-shell .pill {
|
|
106
|
+
width: 108px;
|
|
107
|
+
height: 32px;
|
|
108
|
+
border-radius: 6px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.w-page-shell .lang {
|
|
112
|
+
width: 72px;
|
|
113
|
+
height: 16px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.w-page-shell .icon {
|
|
117
|
+
width: 28px;
|
|
118
|
+
height: 28px;
|
|
119
|
+
border-radius: 50%;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.w-page-shell .avatar {
|
|
123
|
+
width: 32px;
|
|
124
|
+
height: 32px;
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.w-page-shell .tabs {
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
height: 40px;
|
|
132
|
+
padding: 0 16px;
|
|
133
|
+
background: #fff;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.w-page-shell .main {
|
|
137
|
+
flex: 1;
|
|
138
|
+
min-height: 0;
|
|
139
|
+
padding: 10px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.w-page-shell .card {
|
|
143
|
+
margin-bottom: 10px;
|
|
144
|
+
padding: 16px;
|
|
145
|
+
background: #fff;
|
|
146
|
+
border-radius: 8px;
|
|
147
|
+
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.04);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.w-page-shell .search {
|
|
151
|
+
display: grid;
|
|
152
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
153
|
+
gap: 16px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.w-page-shell .field {
|
|
157
|
+
height: 32px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.w-page-shell .table-btn {
|
|
161
|
+
width: 88px;
|
|
162
|
+
height: 32px;
|
|
163
|
+
margin-bottom: 16px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.w-page-shell .row {
|
|
167
|
+
height: 16px;
|
|
168
|
+
margin: 16px 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@keyframes w-page-shell-loading {
|
|
172
|
+
0% {
|
|
173
|
+
background-position: 100% 50%;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
100% {
|
|
177
|
+
background-position: 0 50%;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
</style>
|
|
181
|
+
<div class="w-page-shell">
|
|
182
|
+
<aside class="sider">
|
|
183
|
+
<div class="logo"><i class="bar logo-bar"></i></div>
|
|
184
|
+
<div class="menus">
|
|
185
|
+
<i class="bar menu-bar"></i>
|
|
186
|
+
<i class="bar menu-bar"></i>
|
|
187
|
+
<i class="bar menu-bar"></i>
|
|
188
|
+
<i class="bar menu-bar"></i>
|
|
189
|
+
<i class="bar menu-bar"></i>
|
|
190
|
+
<i class="bar menu-bar"></i>
|
|
191
|
+
<i class="bar menu-bar"></i>
|
|
192
|
+
<i class="bar menu-bar"></i>
|
|
193
|
+
</div>
|
|
194
|
+
</aside>
|
|
195
|
+
<div class="body">
|
|
196
|
+
<header class="header">
|
|
197
|
+
<div class="header-left">
|
|
198
|
+
<i class="bar dot"></i>
|
|
199
|
+
<i class="bar title"></i>
|
|
200
|
+
<i class="bar menu"></i>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="header-right">
|
|
203
|
+
<i class="bar pill"></i>
|
|
204
|
+
<i class="bar lang"></i>
|
|
205
|
+
<i class="bar icon"></i>
|
|
206
|
+
<i class="bar avatar"></i>
|
|
207
|
+
</div>
|
|
208
|
+
</header>
|
|
209
|
+
<div class="tabs"><i class="bar tab"></i></div>
|
|
210
|
+
<div class="main">
|
|
211
|
+
<div class="card search">
|
|
212
|
+
<i class="bar field"></i>
|
|
213
|
+
<i class="bar field"></i>
|
|
214
|
+
<i class="bar field"></i>
|
|
215
|
+
<i class="bar field"></i>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="card">
|
|
218
|
+
<i class="bar table-btn"></i>
|
|
219
|
+
<i class="bar row"></i>
|
|
220
|
+
<i class="bar row"></i>
|
|
221
|
+
<i class="bar row"></i>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wlwy-package",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.27",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/wlwy-package.es.js",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"types": "./dist/types/index.d.ts"
|
|
12
12
|
},
|
|
13
13
|
"./style.css": "./dist/style.css",
|
|
14
|
-
"./dist/style.css": "./dist/style.css"
|
|
14
|
+
"./dist/style.css": "./dist/style.css",
|
|
15
|
+
"./page-shell.html": "./dist/page-shell.html"
|
|
15
16
|
},
|
|
16
17
|
"license": "MIT",
|
|
17
18
|
"files": [
|