1

frontend/src/pages/Dnfhelper/index.vue

@@ -11,8 +11,9 @@
         //   rgba(0, 0, 0, 0.95) 100%
         // ),
         `url(${getImageURL('adventure/bg.png')})`,
-      backgroundSize: '100% auto',
-      backgroundPosition: 'center',
+      backgroundSize: '80% auto',
+      backgroundPosition: 'center center',
+      backgroundRepeat: 'no-repeat',
       /* url(https://wfiles.gtimg.cn/wuji_open/wupload/dnf_universe_data.picture_info/30b81227_1245MGsPY_R.png); */
     }"
   >

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

frontend/src/pages/Dnfhelper/processing.vue

@@ -1,2 +1,10 @@
-<template></template>
-<script lang="ts" name="dnfhelper-processing" setup></script>
+<template>
+  <div class="w-full h-full flex flex-col items-center justify-center gap-1">
+    <img :src="getImageURL('loading2.webp')" alt="loading2" class="mb-1" />
+    <div>同步数据中</div>
+    <div>请稍候，正在处理从助手识别数据。请勿刷新页面。</div>
+  </div>
+</template>
+<script lang="ts" name="dnfhelper-processing" setup>
+import { getImageURL } from '@/utils/images'
+</script>

frontend/src/pages/Home/Index.vue

@@ -41,6 +41,8 @@ export default defineComponent(async () => {
 
   const adventure = await api.adventures()
 
+  // https://bbs.colg.cn/zfj_auth.html?r=${Date.now().toString()}
+
   return () => (
     <Fragment>
       <div
@@ -103,6 +105,15 @@ export default defineComponent(async () => {
         ></div>
       </div>
       */}
+      <div
+        class="flex flex-col"
+        style={`position: absolute;top: ${30 + 82 * 0}px;left: 750px;width: 160px;height: 150px;`}
+      >
+        <div
+          class="w-70px h-50px bg-no-repeat"
+          style={`z-index:5;background-position:2% 50%;background-size:100% auto;background-image: url('${import.meta.env.BASE_URL}images/tooltips/login.gif')`}
+        ></div>
+      </div>
     </Fragment>
   )
 })