diff --git a/frontend_nuxt/components/AchievementList.vue b/frontend_nuxt/components/AchievementList.vue
index 232d6d48c..bb687a123 100644
--- a/frontend_nuxt/components/AchievementList.vue
+++ b/frontend_nuxt/components/AchievementList.vue
@@ -3,13 +3,14 @@
![]()
+
展示
{{ medal.title }}
{{ medal.description }}
@@ -54,6 +55,7 @@ const sortedMedals = computed(() => {
}
.achievements-list-item {
+ position: relative;
display: flex;
flex-direction: column;
align-items: center;
@@ -64,6 +66,10 @@ const sortedMedals = computed(() => {
border-radius: 10px;
}
+.achievements-list-item.select {
+ border: 2px solid var(--primary-color);
+}
+
.achievements-list-item-icon {
width: 200px;
height: 200px;
@@ -82,5 +88,36 @@ const sortedMedals = computed(() => {
.not_completed {
filter: grayscale(100%);
}
+
+.achievements-list-item-top-right-label {
+ font-size: 10px;
+ color: white;
+ background-color: var(--primary-color);
+ padding: 2px 4px;
+ border-radius: 2px;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+@media (max-width: 768px) {
+ .achievements-list-item-icon {
+ width: 100px;
+ height: 100px;
+ }
+
+ .achievements-list-item-title {
+ font-size: 14px;
+ }
+
+ .achievements-list-item-description {
+ font-size: 12px;
+ }
+
+ .achievements-list-item {
+ min-width: calc(50% - 30px);
+ }
+}
+
diff --git a/frontend_nuxt/components/MedalPopup.vue b/frontend_nuxt/components/MedalPopup.vue
index fd0b79229..2407baf72 100644
--- a/frontend_nuxt/components/MedalPopup.vue
+++ b/frontend_nuxt/components/MedalPopup.vue
@@ -9,8 +9,8 @@
@@ -75,8 +75,8 @@ export default {
}
.medal-popup-item-icon {
- width: 60px;
- height: 60px;
+ width: 100px;
+ height: 100px;
object-fit: contain;
}
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 1ca4aea78..59700f8ad 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -66,7 +66,7 @@
@@ -466,7 +466,15 @@ export default {
const init = async () => {
try {
await fetchUser()
- await loadSummary()
+ if (selectedTab.value === 'summary') {
+ await loadSummary()
+ } else if (selectedTab.value === 'timeline') {
+ await loadTimeline()
+ } else if (selectedTab.value === 'following') {
+ await loadFollow()
+ } else if (selectedTab.value === 'achievements') {
+ await loadAchievements()
+ }
} catch (e) {
console.error(e)
} finally {
@@ -477,7 +485,7 @@ export default {
onMounted(init)
watch(selectedTab, async val => {
- router.replace({ query: { ...route.query, tab: val } })
+ // router.replace({ query: { ...route.query, tab: val } })
if (val === 'timeline' && timelineItems.value.length === 0) {
await loadTimeline()
} else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {