Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-04-22 21:59:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 添加角色列表数据

Browse Source
This commit is contained in:
BTMuli
2023-06-15 23:18:06 +08:00
parent 305cdad37e
commit fd89a7cc65
9 changed files with 520 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/mini/t-user-avatar.vue
View File

@@ -1,172 +0,0 @@
<template>
<div class="tua-box" @click="showData">
<div class="tua-top">
<div class="top-item">
<div class="top-icon">
<div class="ti-bg">
<img :src="`/icon/bg/${props.modelValue.rarity===105?5:props.modelValue.rarity}-Star.webp`" alt="rarity">
</div>
<div class="ti-content">
<img :src="props.modelValue.icon" alt="avatar">
</div>
<div class="ti-level">
{{ props.modelValue.actived_constellation_num }}
</div>
</div>
<div class="top-text">
Lv.{{ props.modelValue.level }}
</div>
</div>
<div class="top-item">
<div class="top-icon">
<div class="ti-bg">
<img :src="`/icon/bg/${props.modelValue.weapon.rarity}-Star.webp`" alt="rarity">
</div>
<div class="ti-content">
<img :src="props.modelValue.weapon.icon" alt="avatar">
</div>
<div class="ti-level">
{{ props.modelValue.weapon.affix_level }}
</div>
</div>
<div class="top-text">
Lv.{{ props.modelValue.level }}
</div>
</div>
</div>
<!-- <div class="tua-bottom">-->
<!-- <div class="bottom-item">A</div>-->
<!-- <div class="bottom-item">E</div>-->
<!-- <div class="bottom-item">Q</div>-->
<!-- </div>-->
</div>
</template>
<script lang="ts" setup>
interface TUAProps {
modelValue: TGApp.Game.Character.ListItem
}
const props = defineProps<TUAProps>();
function showData () {
console.log(JSON.stringify(props.modelValue, null, 2));
}
function getNameCard () {
}
</script>
<style lang="css">
.tua-box {
padding: 5px;
width: 190px;
height: 100%;
background: rgb(255 255 255 / 10%);
box-shadow: 0 0 10px rgb(0 0 0 / 40%);
border-radius: 5px;
cursor: pointer;
}
.tua-top {
width: 180px;
height: 110px;
border-radius: 5px;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-item {
width: 80px;
height: 100%;
background: rgb(0 0 0 / 20%);
border-radius: 5px;
}
.top-icon {
position: relative;
width: 80px;
height: 80px;
border-radius: 5px;
}
.ti-bg {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 5px;
}
.ti-bg img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.ti-content {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 5px;
}
.ti-content img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.ti-level {
position: absolute;
right: 0;
top: 0;
padding: 5px;
width: 20px;
height: 20px;
background: rgb(0 0 0 / 50%);
color: #faf7e8;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
font-family: Genshin,sans-serif;
}
.top-text {
width: 80px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #faf7e8;
font-family: Genshin-Light,sans-serif;
}
.top-love img {
width: 100%;
height: 100%;
}
.tua-bottom {
width: 100%;
height: 40%;
padding: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-item {
width: 32%;
height: 100%;
background: rgb(0 0 0 / 20%);
border-radius: 5px;
}
</style>

84
src/components/userCharacter/tuc-role-box.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div class="tuc-rb-box">
<div class="tuc-rb-top">
<TItemBox v-model="avatarBox" @click="showAvatarData" />
<TItemBox v-model="weaponBox" @click="showWeaponData" />
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import TItemBox from "../main/t-itembox.vue";
interface TucRoleBoxProps {
modelValue: TGApp.Sqlite.Character.UserRole;
}
const props = defineProps<TucRoleBoxProps>();
const avatarBox = computed(() => {
return {
size: "80px",
height: "80px",
ltSize: "30px",
bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
icon: `/WIKI/character/icon/${props.modelValue.cid}.webp`,
lt: `/icon/element/${props.modelValue.element}.webp`,
rt: props.modelValue.activeConstellation.toString() || "0",
rtSize: "20px",
innerText: `${getAvatarName()}`,
innerHeight: 20,
display: "inner",
};
});
const weaponBox = computed(() => {
const weapon = JSON.parse(props.modelValue.weapon) as TGApp.Sqlite.Character.RoleWeapon;
return {
size: "80px",
height: "80px",
ltSize: "30px",
bg: `/icon/bg/${weapon.star}-Star.webp`,
icon: `/WIKI/weapon/icon/${weapon.id}.webp`,
lt: `/icon/weapon/${weapon.type}.webp`,
rt: weapon.affix.toString() || "0",
rtSize: "20px",
innerText: `${weapon.name}`,
innerHeight: 20,
display: "inner",
};
});
function getAvatarName () {
return (
props.modelValue.cid === 10000005
? "旅行者-空"
: props.modelValue.cid === 10000007
? "旅行者-荧"
: props.modelValue.name
);
}
function showAvatarData () {
console.log(avatarBox.value);
}
function showWeaponData () {
const weapon = JSON.parse(props.modelValue.weapon) as TGApp.Sqlite.Character.RoleWeapon;
console.log(weapon);
}
</script>
<style lang="css" scoped>
.tuc-rb-box {
padding: 5px;
box-shadow: 0 0 10px var(--common-bg-4);
border: 1px inset var(--common-bg-4);
border-radius: 5px;
position: relative;
}
.tuc-rb-top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
</style>