Skip to content

Commit ba3fe56

Browse files
NOTF-APINOTF-API
committed
修复不能正确显示品级的问题
1 parent 19dc691 commit ba3fe56

File tree

3 files changed

+164
-251
lines changed

3 files changed

+164
-251
lines changed

‎src/components/CollectiblesList/CollectibleItem.less‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
.item {
2+
&.list-styled {
3+
width: 100% !important;
4+
margin-bottom: .25rem;
5+
6+
.image {
7+
transform-origin: left top;
8+
position: absolute;
9+
left: 0;
10+
top: 0;
11+
}
12+
13+
14+
.name {
15+
padding: 0 .75rem;
16+
display: block;
17+
position: absolute;
18+
left: 64px;
19+
height: 1.75rem;
20+
line-height: 1.75rem;
21+
top: 0.375rem;
22+
font-size: 1.75rem;
23+
}
24+
25+
.description {
26+
padding: 0 .75rem;
27+
display: block;
28+
position: absolute;
29+
left: 64px;
30+
line-height: 2rem;
31+
top: 34px;
32+
bottom: 0;
33+
font-size: 1.25rem;
34+
}
35+
36+
.id {
37+
position: absolute;
38+
right: .5rem;
39+
bottom: .5rem;
40+
display: block;
41+
padding: 0 1rem;
42+
width: fit-content;
43+
min-width: 5rem;
44+
height: calc(64px - 1rem);
45+
line-height: calc(64px - 1rem);
46+
text-align: center;
47+
font-size: 2rem;
48+
}
49+
50+
}
51+
52+
>* {
53+
pointer-events: none;
54+
}
55+
56+
.number {
57+
font-size: 1.25rem;
58+
visibility: hidden;
59+
position: absolute;
60+
left: 50%;
61+
top: 100%;
62+
transform: translateX(-50%);
63+
width: 100%;
64+
height: 2rem;
65+
line-height: 2rem;
66+
text-align: center;
67+
border-radius: 4px;
68+
background-color: #fff;
69+
color: #000;
70+
z-index: 1000;
71+
}
72+
73+
.quality {
74+
font-size: 1rem;
75+
position: absolute;
76+
left: 0;
77+
top: 0;
78+
width: 20px;
79+
text-align: center;
80+
height: 20px;
81+
line-height: 18px;
82+
background-color: #000;
83+
box-shadow: 0 0 0 2.5px #000 inset;
84+
border-radius: 6px;
85+
image-rendering: pixelated;
86+
transform-origin: left bottom;
87+
z-index: 1000;
88+
color: #000;
89+
90+
&.level {
91+
visibility: hidden;
92+
93+
&0 {
94+
background-image: linear-gradient(#ffffff, #838383);
95+
96+
&::after {
97+
content: "0";
98+
}
99+
}
100+
101+
&1 {
102+
background-image: linear-gradient(#dbffc3, #4dd300);
103+
104+
&::after {
105+
content: "1";
106+
}
107+
}
108+
109+
&2 {
110+
background-image: linear-gradient(#d5ffff, #00a1dd);
111+
112+
&::after {
113+
content: "2";
114+
}
115+
}
116+
117+
&3 {
118+
background-image: linear-gradient(#e388d8, #c729b5);
119+
120+
&::after {
121+
content: "3";
122+
}
123+
}
124+
125+
&4 {
126+
background-image: linear-gradient(#fff69a, #e6a600);
127+
128+
&::after {
129+
content: "4";
130+
}
131+
}
132+
}
133+
}
134+
135+
.image {
136+
width: 32px;
137+
height: 32px;
138+
scale: 2;
139+
background-repeat: no-repeat;
140+
}
141+
142+
.description,
143+
.name {
144+
display: none;
145+
}
146+
147+
.id {
148+
background-color: #ffffffbf;
149+
position: absolute;
150+
bottom: 0;
151+
padding: 0 .25rem;
152+
border-radius: 4px;
153+
right: 0;
154+
display: block;
155+
height: 16px;
156+
line-height: 16px;
157+
text-align: center;
158+
font-size: 1rem;
159+
display: block;
160+
}
161+
}

‎src/components/CollectiblesList/CollectibleItem.vue‎

Lines changed: 1 addition & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -37,159 +37,5 @@ const getImageSource = (gfx) => {
3737
</script>
3838

3939
<style lang="less" scoped>
40-
.item {
41-
&.list-styled {
42-
width: 100% !important;
43-
margin-bottom: .25rem;
44-
45-
.image {
46-
transform-origin: left top;
47-
position: absolute;
48-
left: 0;
49-
top: 0;
50-
}
51-
52-
53-
.name {
54-
padding: 0 .75rem;
55-
display: block;
56-
position: absolute;
57-
left: 64px;
58-
height: 1.75rem;
59-
line-height: 1.75rem;
60-
top: 0.375rem;
61-
font-size: 1.75rem;
62-
}
63-
64-
.description {
65-
padding: 0 .75rem;
66-
display: block;
67-
position: absolute;
68-
left: 64px;
69-
line-height: 2rem;
70-
top: 34px;
71-
bottom: 0;
72-
font-size: 1.25rem;
73-
}
74-
75-
.id {
76-
position: absolute;
77-
right: .5rem;
78-
bottom: .5rem;
79-
display: block;
80-
padding: 0 1rem;
81-
width: fit-content;
82-
min-width: 5rem;
83-
height: calc(64px - 1rem);
84-
line-height: calc(64px - 1rem);
85-
text-align: center;
86-
font-size: 2rem;
87-
}
88-
89-
}
90-
91-
>* {
92-
pointer-events: none;
93-
}
94-
95-
.number {
96-
font-size: 1.25rem;
97-
visibility: hidden;
98-
position: absolute;
99-
left: 50%;
100-
top: 100%;
101-
transform: translateX(-50%);
102-
width: 100%;
103-
height: 2rem;
104-
line-height: 2rem;
105-
text-align: center;
106-
border-radius: 4px;
107-
background-color: #fff;
108-
color: #000;
109-
z-index: 1000;
110-
}
111-
112-
.quality {
113-
font-size: 1rem;
114-
position: absolute;
115-
left: 0;
116-
top: 0;
117-
width: 20px;
118-
text-align: center;
119-
height: 20px;
120-
line-height: 18px;
121-
background-color: #000;
122-
box-shadow: 0 0 0 2.5px #000 inset;
123-
border-radius: 6px;
124-
image-rendering: pixelated;
125-
transform-origin: left bottom;
126-
z-index: 1000;
127-
color: #000;
128-
129-
&.level {
130-
visibility: hidden;
131-
&0 {
132-
background-image: linear-gradient(#ffffff,#838383);
133-
&::after {
134-
content: "0";
135-
}
136-
}
137-
138-
&1 {
139-
background-image: linear-gradient(#dbffc3,#4dd300);
140-
&::after {
141-
content: "1";
142-
}
143-
}
144-
145-
&2 {
146-
background-image: linear-gradient(#d5ffff,#00a1dd);
147-
&::after {
148-
content: "2";
149-
}
150-
}
151-
152-
&3 {
153-
background-image: linear-gradient(#e388d8,#c729b5);
154-
&::after {
155-
content: "3";
156-
}
157-
}
158-
159-
&4 {
160-
background-image: linear-gradient(#fff69a,#e6a600);
161-
&::after {
162-
content: "4";
163-
}
164-
}
165-
}
166-
}
167-
168-
.image {
169-
width: 32px;
170-
height: 32px;
171-
scale: 2;
172-
background-repeat: no-repeat;
173-
}
174-
175-
.description,
176-
.name {
177-
display: none;
178-
}
179-
180-
.id {
181-
background-color: #ffffffbf;
182-
position: absolute;
183-
bottom: 0;
184-
padding: 0 .25rem;
185-
border-radius: 4px;
186-
right: 0;
187-
display: block;
188-
height: 16px;
189-
line-height: 16px;
190-
text-align: center;
191-
font-size: 1rem;
192-
display: block;
193-
}
194-
}
40+
@import url("./CollectibleItem.less");
19541
</style>

0 commit comments

Comments
 (0)