feat: achievement select to show

frontend_nuxt/components/AchievementList.vue

@@ -3,13 +3,14 @@
     <div
       v-for="medal in sortedMedals"
       :key="medal.type"
-      class="achievements-list-item"
+      class="achievements-list-item select"
     >
       <img
         :src="medal.icon"
         :alt="medal.title"
         :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"
       />
+      <div class="achievements-list-item-top-right-label">展示</div>
       <div class="achievements-list-item-title">{{ medal.title }}</div>
       <div class="achievements-list-item-description">
         {{ 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);
+  }
+}
+
 </style>
 

frontend_nuxt/components/MedalPopup.vue

@@ -9,8 +9,8 @@
         </div>
       </div>
       <div class="medal-popup-actions">
-        <div class="medal-popup-button" @click="gotoMedals">去看看</div>
         <div class="medal-popup-close" @click="close">知道了</div>
+        <div class="medal-popup-button" @click="gotoMedals">去看看</div>
       </div>
     </div>
   </BasePopup>
@@ -75,8 +75,8 @@ export default {
 }
 
 .medal-popup-item-icon {
-  width: 60px;
-  height: 60px;
+  width: 100px;
+  height: 100px;
   object-fit: contain;
 }