🌱 技能&命座

src/components/userAvatar/tua-dc-constellations.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="tua-dcc-box">
+    <div
+      v-for="constellation in props.modelValue"
+      :key="constellation.pos"
+      class="tua-dcc-item"
+      :title="`${constellation.pos}命-${constellation.name}`"
+    >
+      <img :src="constellation.icon" alt="constellation" class="tua-dcc-icon" />
+      <div v-if="!constellation.is_actived" class="tua-dcc-lock">
+        <v-icon size="10px">mdi-lock</v-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TuaDcConstellationsProps {
+  modelValue: TGApp.Game.Avatar.Constellation[];
+}
+
+const props = defineProps<TuaDcConstellationsProps>();
+</script>
+<style lang="css" scoped>
+.tua-dcc-box {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tua-dcc-item {
+  position: relative;
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 50%;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 20%);
+}
+
+.tua-dcc-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.tua-dcc-lock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 50%);
+}
+</style>

src/components/userAvatar/tua-dc-talents.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="tua-dct-box">
+    <div
+      v-for="skill in props.modelValue"
+      :key="skill.skill_id"
+      :title="skill.name"
+      class="tua-dct-item"
+    >
+      <img :src="skill.icon" alt="talent" class="tua-dct-icon" />
+      <div v-if="!skill.is_unlock" class="tua-dct-lock">
+        <v-icon size="10px">mdi-lock</v-icon>
+      </div>
+      <div class="tua-dct-level" v-if="skill.is_unlock">
+        {{ skill.level === 0 ? 1 : skill.level }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TuaDcTalentsProps {
+  modelValue: TGApp.Game.Avatar.Skill[];
+}
+
+const props = defineProps<TuaDcTalentsProps>();
+</script>
+<style lang="css" scoped>
+.tua-dct-box {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tua-dct-item {
+  position: relative;
+  display: flex;
+  width: 35px;
+  height: 35px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 50%;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 20%);
+}
+
+.tua-dct-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.tua-dct-lock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 50%);
+}
+
+.tua-dct-lock v-icon {
+  color: var(--tgc-white-1);
+}
+
+.tua-dct-level {
+  position: absolute;
+  right: 0;
+  bottom: -15px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1px;
+  border-radius: 4px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 50%);
+  color: var(--tgc-white-1);
+  font-size: 8px;
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
+</style>

src/components/userAvatar/tua-detail-card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tua-dc-container">
-    <!-- 右上分享 -->
+    <img :src="props.modelValue.avatar.image" class="tua-dc-avatar" alt="avatar" />
     <v-btn
       class="tua-dc-share"
       icon="mdi-share-variant"
@@ -8,9 +8,8 @@
       variant="outlined"
       :loading="loading"
       data-html2canvas-ignore
+      size="small"
     />
-    <!-- 左侧角色剪影 -->
-    <img :src="props.modelValue.avatar.image" class="tua-dc-avatar" alt="avatar" />
     <!-- 右侧武器跟圣遗物具体属性 -->
     <div class="tua-dc-detail">
       <TuaDcWeapon :model-value="props.modelValue.weapon" />
@@ -20,6 +19,11 @@
       <TuaDcRelic :model-value="relicList[3]" pos="4" />
       <TuaDcRelic :model-value="relicList[4]" pos="5" />
     </div>
+    <!-- 左下命座跟天赋 -->
+    <div class="tua-dc-lb">
+      <TuaDcTalents :model-value="props.modelValue.skills" />
+      <TuaDcConstellations :model-value="props.modelValue.constellations" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -28,7 +32,9 @@ import { computed, onMounted, ref, watch } from "vue";
 import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
 import { generateShareImg } from "../../utils/TGShare.js";
 
+import TuaDcConstellations from "./tua-dc-constellations.vue";
 import TuaDcRelic from "./tua-dc-relic.vue";
+import TuaDcTalents from "./tua-dc-talents.vue";
 import TuaDcWeapon from "./tua-dc-weapon.vue";
 
 interface TuaDetailCardProps {
@@ -98,8 +104,8 @@ async function share(): Promise<void> {
 
 .tua-dc-share {
   position: absolute;
-  top: 10px;
+  top: 5px;
-  right: 10px;
+  left: 5px;
   color: var(--tgc-white-1);
 }
 
@@ -121,4 +127,17 @@ async function share(): Promise<void> {
   grid-template-columns: repeat(3, 170px);
   grid-template-rows: repeat(2, 140px);
 }
+
+.tua-dc-lb {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  display: flex;
+  width: 260px;
+  height: 90px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+}
 </style>