Skip to content

Commit 333b3c4

Browse files
committed
update style
1 parent ef16263 commit 333b3c4

File tree

13 files changed

+901
-870
lines changed

13 files changed

+901
-870
lines changed

src/App.vue

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
<template>
22
<div id="AppView">
33
<Controller />
4-
<appViewHead
5-
:isSettingCloseDirect="needs.isSettingCloseDirect"
6-
:title="appTitle"
7-
></appViewHead>
4+
<appViewHead :isSettingCloseDirect="needs.isSettingCloseDirect" :title="appTitle"></appViewHead>
85
<Navigation />
96
<AppMainContainer />
10-
<appViewFoot
11-
:status="statusReal.status"
12-
:statusText="statusReal.text"
13-
></appViewFoot>
7+
<appViewFoot :status="statusReal.status" :statusText="statusReal.text"></appViewFoot>
148
</div>
159
</template>
1610

@@ -116,8 +110,8 @@ export default {
116110
.navigation {
117111
z-index: 2009;
118112
}
119-
.appViewHead {
120-
}
113+
114+
.appViewHead {}
121115
122116
:deep().el-message {
123117
z-index: 10000;
@@ -135,16 +129,20 @@ pre {
135129
#AppView {
136130
@apply text-gray-100 bg-gray-800 border-gray-400;
137131
}
132+
138133
.appViewHead {
139134
@apply bg-gray-800 text-gray-200;
140135
}
136+
141137
.navigation {
142138
@apply bg-gray-700 text-gray-200;
143139
}
140+
144141
.AppMainContainer,
145142
.UserArea {
146143
@apply bg-gray-800;
147144
}
145+
148146
:deep(.el-divider__text) {
149147
@apply bg-gray-800 text-gray-200;
150148
}
@@ -154,12 +152,15 @@ pre {
154152
#AppView {
155153
@apply text-gray-800 bg-gray-100 border-gray-400;
156154
}
155+
157156
.appViewHead {
158157
@apply bg-transparent text-gray-800;
159158
}
159+
160160
.navigation {
161161
@apply bg-white text-gray-800;
162162
}
163+
163164
.AppMainContainer,
164165
.UserArea {
165166
@apply bg-gray-100;
@@ -181,13 +182,20 @@ pre {
181182
/* 已经废弃,需要重新制作拟态滚动条 */
182183
183184
@font-face {
184-
font-family: Canger_xwz;
185-
src: url("../src/assets/fonts/Canger_xwz.ttf");
185+
font-family: CangerXS;
186+
src: url("../src/assets/fonts/CangerXuansanM-W03.ttf");
186187
}
188+
187189
@font-face {
188-
font-family: Canger_zkzdbs;
189-
src: url("../src/assets/fonts/Canger_zkzdbs.ttf");
190+
font-family: HanYiWH;
191+
src: url("../src/assets/fonts/HYWenHei-55S.ttf");
190192
}
193+
194+
@font-face {
195+
font-family: HanSerif;
196+
src: url("../src/assets/fonts/SourceHanSerifCN-Medium-6.otf");
197+
}
198+
191199
@font-face {
192200
font-family: Helvetica_otf;
193201
src: url("../src/assets/fonts/Helvetica.otf");
3.29 MB
Binary file not shown.

src/assets/fonts/Canger_xwz.ttf

-1.2 MB
Binary file not shown.

src/assets/fonts/HYWenHei-55S.ttf

9.13 MB
Binary file not shown.
16.3 MB
Binary file not shown.
Lines changed: 96 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,126 @@
11
<template>
2-
<div class="rank">
3-
<span class="title">Sign Rank</span>
4-
<div
5-
class="mainContainer"
6-
v-for="(item, index) in rankers"
7-
:key="item.nickname"
8-
v-loading="isLoading.single"
9-
>
10-
<Card class="card" :author="item" />
11-
<span class="time">{{ new Date(item.timeStamp).toLocaleString() }}</span>
12-
<span class="th"
13-
>{{ index + 1 }}&nbsp;<sup>{{ thString(index + 1) }}</sup></span
14-
>
15-
</div>
16-
</div>
2+
<div class="rank">
3+
<span class="title">签到榜单</span>
4+
<div
5+
class="mainContainer"
6+
v-for="(item, index) in rankers"
7+
:key="item.nickname"
8+
v-loading="isLoading.single"
9+
>
10+
<Card class="card" :author="item" />
11+
<span class="time">{{ new Date(item.timeStamp).toLocaleString() }}</span>
12+
<span class="th"
13+
>{{ index + 1 }}&nbsp;<sup>{{ thString(index + 1) }}</sup></span
14+
>
15+
</div>
16+
</div>
1717
</template>
1818

1919
<script>
20-
import Card from "@/components/UserAssets/Card/index.vue";
20+
import Card from "@/components/UserAssets/Card/index.vue"
2121
2222
export default {
23-
name: "Rank",
24-
components: { Card },
25-
data() {
26-
return {
27-
isLoading: true,
28-
rankers: [],
29-
};
30-
},
31-
beforeCreate() {
32-
this.$public.on("update-user-check", () => {
33-
this.initRankers();
34-
});
35-
this.$public.on("clear-user-sign-status", () => {
36-
this.initRankers();
37-
});
38-
},
39-
mounted() {
40-
this.initRankers();
41-
},
42-
methods: {
43-
initRankers: function () {
44-
this.$conf
45-
.getHost()
46-
.then((h) => {
47-
this.isLoading = true;
48-
this.isLoading = true;
49-
this.$conf
50-
.allCheckToday(this.$conf.getHttpString(h.host))
51-
.then((adata) => {
52-
this.rankers = [];
53-
adata.data.forEach((element) => {
54-
this.$conf.getHost().then((h) => {
55-
this.$conf
56-
.getUserDetailById({
57-
host: this.$conf.getHttpString(h.host),
58-
id: element.userid,
59-
})
60-
.then((data) => {
61-
const { nickname, avatar, introduce } = data.data[0];
62-
this.rankers.push({
63-
nickname,
64-
avatar,
65-
introduce,
66-
timeStamp: Number(element.timeStamp),
67-
});
68-
this.rankers.sort((a, b) => a.timeStamp - b.timeStamp);
69-
this.isLoading = false;
70-
this.isLoading = false;
71-
});
72-
});
73-
});
74-
})
75-
.catch((e) => {
76-
console.log(e.messgae);
77-
});
78-
})
79-
.catch((e) => {
80-
console.log(e.messgae);
81-
});
82-
},
83-
thString: function (i) {
84-
if (i == 1) return "st";
85-
else if (i == 2) return "nd";
86-
else if (i == 3) return "rd";
87-
return "th";
88-
},
89-
},
90-
};
23+
name: "Rank",
24+
components: { Card },
25+
data() {
26+
return {
27+
isLoading: true,
28+
rankers: [],
29+
}
30+
},
31+
beforeCreate() {
32+
this.$public.on("update-user-check", () => {
33+
this.initRankers()
34+
})
35+
this.$public.on("clear-user-sign-status", () => {
36+
this.initRankers()
37+
})
38+
},
39+
mounted() {
40+
this.initRankers()
41+
},
42+
methods: {
43+
initRankers: function () {
44+
this.$conf
45+
.getHost()
46+
.then((h) => {
47+
this.isLoading = true
48+
this.$conf
49+
.allCheckToday(this.$conf.getHttpString(h.host))
50+
.then((adata) => {
51+
this.rankers = []
52+
adata.data.forEach((element) => {
53+
this.$conf.getHost().then((h) => {
54+
this.$conf
55+
.getUserDetailById({
56+
host: this.$conf.getHttpString(h.host),
57+
id: element.userid,
58+
})
59+
.then((data) => {
60+
const { nickname, avatar, introduce } = data.data[0]
61+
this.rankers.push({
62+
nickname,
63+
avatar,
64+
introduce,
65+
timeStamp: Number(element.timeStamp),
66+
})
67+
this.rankers.sort((a, b) => a.timeStamp - b.timeStamp)
68+
this.isLoading = false
69+
})
70+
})
71+
})
72+
})
73+
.catch((e) => {
74+
console.log(e.messgae)
75+
})
76+
})
77+
.catch((e) => {
78+
console.log(e.messgae)
79+
})
80+
},
81+
thString: function (i) {
82+
if (i == 1) return "st"
83+
else if (i == 2) return "nd"
84+
else if (i == 3) return "rd"
85+
return "th"
86+
},
87+
},
88+
}
9189
</script>
9290

9391
<style scoped lang="postcss">
9492
.rank {
95-
@apply relative w-full mt-8;
93+
@apply relative w-full mt-8;
9694
}
9795
9896
.title {
99-
@apply sticky inline-block w-full h-full top-0 mx-4 px-4 py-4 text-lg font-bold text-left font-mono;
100-
z-index: 2001;
97+
@apply sticky inline-block w-full h-full top-0 px-4 py-4 text-lg font-bold text-left font-mono;
98+
z-index: 2001;
10199
}
102100
.mainContainer {
103-
@apply relative py-4 my-2 max-w-xs;
101+
@apply relative py-4 my-2 max-w-xs;
104102
}
105103
106104
.card {
107-
@apply flex-col px-4;
105+
@apply flex-col px-4;
108106
}
109107
.time {
110-
@apply text-xs font-bold opacity-60;
108+
@apply text-xs font-bold opacity-60;
111109
}
112110
113111
.th {
114-
@apply inline-block absolute top-0 right-8 font-semibold text-lg;
112+
@apply inline-block absolute top-0 right-8 font-semibold text-lg;
115113
}
116114
117115
@media (prefers-color-scheme: dark) {
118-
.title {
119-
@apply bg-gray-800;
120-
}
116+
.title {
117+
@apply bg-gray-800;
118+
}
121119
}
122120
123121
@media (prefers-color-scheme: light) {
124-
.title {
125-
@apply bg-gray-100;
126-
}
122+
.title {
123+
@apply bg-gray-100;
124+
}
127125
}
128-
</style>
126+
</style>

0 commit comments

Comments
 (0)