1

frontend/src/pages/Dnfhelper/list.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex-1 overflow-hidden w-full flex items-center justify-center p-20 box-border">
-    <div class="max-h-full w-full overflow-auto flex flex-wrap gap-4 items-center">
+    <div
+      class="max-h-full w-full overflow-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
+    >
       <template v-for="item in sortedList" :key="item.roleId">
         <div
-          class="flex flex-col items-center gap-4 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 w-40 relative h-50 cursor-pointer p-2"
+          class="mx-auto w-full max-w-52 h-65 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 cursor-pointer px-3 py-4 box-border"
           :style="{
             borderColor: acitveRoleId == item.roleId ? '#F4C08A' : '',
           }"
@@ -13,11 +15,9 @@
           <img
             :src="item.avatarLink"
             alt="avatar"
-            class="w-auto h-50 rounded-full object-cover border-2 border-white/50 absolute top--5"
+            class="h-auto w-40 rounded-full object-cover border-2 border-white/50 shrink-0"
           />
-          <div
-            class="absolute bottom-2 left-1/2 transform -translate-x-1/2 text-center flex flex-col w-50"
-          >
+          <div class="w-full text-center flex flex-col items-center leading-6">
             <span class="text-sm text-#DED29A">{{ item.roleName }}</span>
             <span class="text-sm text-#908150">{{ item.roleJob }}</span>
             <span class="text-sm text-[#3ea74e]">名望: {{ formatFame(item.fame) }}</span>
@@ -30,16 +30,18 @@
     <div class="flex-1"></div>
     <calc-button class="h-10 w-30">导入角色</calc-button>
     <div class="flex-1 flex justify-end px-10 gap-5">
-      <calc-button>选择职业</calc-button>
-      <calc-button>刷新</calc-button>
-      <calc-button>取消绑定</calc-button>
+      <calc-button @click="navToHome">选择职业</calc-button>
+      <calc-button @click="helperStore.refreshHelperInfo(helperStore.helperInfo?.id)">
+        刷新
+      </calc-button>
+      <calc-button @click="helperStore.logout">取消绑定</calc-button>
     </div>
   </div>
 </template>
 <script setup lang="ts" name="dnfhelper-list">
-import { computed } from 'vue'
-
+import router from '@/router'
 import { useDnfHelperStore } from '@/stores/dnfhelper'
+import { computed } from 'vue'
 
 const props = defineProps<{
   list: {
@@ -53,7 +55,6 @@ const props = defineProps<{
 
 const { list } = toRefs(props)
 const acitveRoleId = ref<string | null>(null)
-
 const helperStore = useDnfHelperStore()
 
 const sortedList = computed(() => {
@@ -64,6 +65,10 @@ const formatFame = (fame: number) => {
   return new Intl.NumberFormat('zh-CN').format(fame)
 }
 
+const navToHome = () => {
+  router.push({ path: '/' })
+}
+
 const chooseRole = ({ roleId }: { roleId: string }) => {
   console.log(roleId)
   acitveRoleId.value = roleId