Skip to content

Commit bc98e3b

Browse files
iRuxuiRuxu
committed
perf:team
1 parent 6fbacb1 commit bc98e3b

26 files changed

Lines changed: 1005 additions & 379 deletions

‎src/assets/css/team/battle/battle-item.less‎

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
position: relative;
55
display: grid;
66
width: 100%;
7-
padding: 14px @team-space-3;
7+
padding: 18px @team-space-4;
88
border: 1px solid @team-border;
99
border-radius: @team-radius-control;
1010
background: @team-surface;
1111
box-shadow: @team-shadow-xs;
1212
box-sizing: border-box;
13-
grid-template-columns: minmax(250px, 0.9fr) minmax(500px, 1.55fr) auto;
14-
grid-template-areas: "summary content action";
15-
gap: @team-space-3;
13+
grid-template-columns: minmax(0, 1fr) auto;
14+
grid-template-areas:
15+
"summary action"
16+
"content content";
17+
gap: 14px @team-space-4;
1618
transition:
1719
border-color @team-duration-fast @team-ease-standard,
1820
box-shadow @team-duration-fast @team-ease-standard,
@@ -36,14 +38,14 @@
3638
.u-battle-summary {
3739
display: flex;
3840
min-width: 0;
39-
align-items: center;
41+
align-items: flex-start;
4042
grid-area: summary;
4143
gap: @team-space-2;
4244
}
4345

4446
.u-team-logo {
45-
width: 58px;
46-
height: 58px;
47+
width: 64px;
48+
height: 64px;
4749
flex: none;
4850
border: 1px solid @team-border-light;
4951
border-radius: 11px;
@@ -88,6 +90,10 @@
8890
text-transform: uppercase;
8991
}
9092

93+
.u-detail-toggle {
94+
margin: 0;
95+
}
96+
9197
.u-battle-badges {
9298
display: flex;
9399
flex-wrap: wrap;
@@ -115,44 +121,15 @@
115121
}
116122
}
117123

118-
.u-battle-meta {
119-
display: flex;
120-
flex-wrap: wrap;
121-
align-items: center;
122-
margin: 6px 0 0;
123-
gap: 4px 14px;
124-
125-
> div {
126-
display: inline-flex;
127-
min-width: 0;
128-
align-items: center;
129-
gap: 5px;
130-
}
131-
132-
dt,
133-
dd {
134-
margin: 0;
135-
}
136-
137-
dd {
138-
overflow: hidden;
139-
color: @team-text-secondary;
140-
font-size: 12px;
141-
font-weight: 400;
142-
line-height: 18px;
143-
text-overflow: ellipsis;
144-
white-space: nowrap;
145-
}
146-
}
147-
148124
.u-battle-content {
149125
display: grid;
150126
min-width: 0;
151-
padding-left: @team-space-3;
152-
border-left: 1px solid @team-border-light;
127+
padding-top: 14px;
128+
border-top: 1px solid @team-border-light;
153129
grid-area: content;
154-
grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.8fr);
155-
gap: @team-space-3;
130+
grid-template-columns: minmax(0, 720px) minmax(0, 660px);
131+
justify-content: space-between;
132+
gap: 32px;
156133
}
157134

158135
.u-team-setting,
@@ -162,7 +139,7 @@
162139
flex-direction: column;
163140

164141
h3 {
165-
margin: 0 0 6px;
142+
margin: 0 0 8px;
166143
font-size: 11px;
167144
line-height: 14px;
168145
white-space: nowrap;
@@ -177,14 +154,14 @@
177154
display: grid;
178155
margin: 0;
179156
grid-template-columns: repeat(3, minmax(0, 1fr));
180-
gap: @team-space-2;
157+
gap: 6px;
181158

182159
> div {
183160
min-width: 0;
184-
height: 50px;
185-
padding: 6px 10px;
186-
border: 1px solid transparent;
187-
border-radius: 8px;
161+
height: 54px;
162+
padding: 8px 11px;
163+
border: 1px solid @team-border-light;
164+
border-radius: 9px;
188165
background: @team-surface-muted;
189166
box-sizing: border-box;
190167
}
@@ -196,7 +173,7 @@
196173
}
197174

198175
dt {
199-
font-weight: 500;
176+
font-weight: 400;
200177
}
201178

202179
dd {
@@ -206,9 +183,9 @@
206183
margin-top: 1px;
207184
overflow: hidden;
208185
color: @team-text-regular;
209-
font-size: 13px;
186+
font-size: 12px;
210187
font-weight: 500;
211-
line-height: 18px;
188+
line-height: 1.8;
212189
text-overflow: ellipsis;
213190
white-space: nowrap;
214191
gap: 6px;
@@ -231,27 +208,27 @@
231208
.u-battle-link {
232209
display: grid;
233210
min-width: 0;
234-
height: 50px;
211+
height: 54px;
235212
align-content: center;
236-
padding: 5px 9px;
213+
padding: 8px 11px;
237214
border: 1px solid @team-border-light;
238-
border-radius: 8px;
239-
background: @team-surface;
215+
border-radius: 9px;
216+
background: @team-surface-muted;
240217
box-sizing: border-box;
241218
gap: 1px;
242219

243220
> span {
244221
color: @team-text-muted;
245222
font-size: 12px;
246-
font-weight: 500;
223+
font-weight: 400;
247224
line-height: 18px;
248225
white-space: nowrap;
249226
}
250227

251228
em,
252229
.u-link {
253230
overflow: hidden;
254-
font-size: 13px;
231+
font-size: 12px;
255232
font-style: normal;
256233
font-weight: 500;
257234
line-height: 18px;
@@ -275,20 +252,37 @@
275252

276253
.u-team-op {
277254
display: flex;
278-
align-items: center;
279-
padding-top: 12px;
255+
align-items: flex-start;
280256
box-sizing: border-box;
281257
grid-area: action;
258+
gap: @team-space-2;
282259

283260
.el-button {
284-
min-height: 36px;
261+
display: inline-flex;
262+
min-width: 108px;
263+
min-height: 38px;
264+
align-items: center;
265+
justify-content: center;
285266
margin: 0;
286-
padding: 7px 13px;
287-
border-color: @team-primary;
267+
padding: 8px 15px;
288268
border-radius: 10px;
289-
background: @team-primary;
269+
font-size: 13px;
290270
font-weight: 600;
291-
box-shadow: 0 4px 10px rgba(91, 92, 245, 0.16);
271+
line-height: 20px;
272+
273+
.el-icon {
274+
width: 16px;
275+
height: 16px;
276+
margin: 0;
277+
font-size: 16px;
278+
}
279+
280+
}
281+
282+
.u-bind-battle {
283+
border-color: @team-primary;
284+
background: @team-primary;
285+
box-shadow: 0 5px 12px rgba(91, 92, 245, 0.2);
292286

293287
&:hover,
294288
&:focus {
@@ -301,21 +295,9 @@
301295

302296
@media screen and (max-width: 1240px) {
303297
.u-battle-team {
304-
grid-template-columns: minmax(0, 1fr) auto;
305-
grid-template-areas:
306-
"summary action"
307-
"content content";
308-
309298
.u-battle-content {
310-
padding-top: @team-space-2;
311-
padding-left: 0;
312-
border-top: 1px solid @team-border-light;
313-
border-left: 0;
314-
grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.8fr);
315-
}
316-
317-
.u-team-op {
318-
padding-top: 0;
299+
grid-template-columns: minmax(0, 1fr);
300+
justify-content: stretch;
319301
}
320302
}
321303
}
@@ -333,13 +315,27 @@
333315
gap: @team-space-3;
334316
}
335317

318+
.u-battle-fields {
319+
grid-template-columns: repeat(2, minmax(0, 1fr));
320+
gap: @team-space-2;
321+
322+
> div,
323+
> div:first-child {
324+
padding: 6px 10px;
325+
border: 1px solid @team-border-light;
326+
border-radius: 8px;
327+
background: @team-surface-muted;
328+
}
329+
}
330+
336331
.u-battle-data {
337332
min-width: 0;
338333
}
339334

340335
.u-team-op {
336+
.u-detail-toggle,
341337
.el-button {
342-
width: 100%;
338+
flex: 1;
343339
}
344340
}
345341
}
@@ -374,6 +370,10 @@
374370
line-height: 24px;
375371
white-space: normal;
376372
}
373+
374+
.u-detail-toggle {
375+
margin-top: 4px;
376+
}
377377
}
378378

379379
.u-team-status > span {

‎src/assets/css/team/battle/index.less‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,32 @@
122122

123123
.u-team-collapse {
124124
margin-bottom: @team-space-2;
125+
border-radius: @team-radius-control;
126+
transition: box-shadow @team-duration-fast @team-ease-standard;
125127

126128
.u-team-title {
127129
cursor: pointer;
128130
}
129-
.u-team-item {
130-
// height: 0;
131-
// transition: height 0.4s;
131+
132+
&.is-expanded {
133+
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
134+
135+
.u-battle-team {
136+
border-bottom: 1px dotted @team-border;
137+
border-radius: @team-radius-control @team-radius-control 0 0;
138+
box-shadow: none;
139+
transform: none;
140+
}
141+
142+
.u-team-item {
143+
margin-top: 0;
144+
}
145+
146+
.m-rank-top100-item {
147+
border-color: @team-border;
148+
border-radius: 0 0 @team-radius-control @team-radius-control;
149+
box-shadow: none;
150+
}
132151
}
133152
}
134153

0 commit comments

Comments
 (0)