mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
♻️ 替换 t-mini-avatar 与 t-mini-weapon 组件
This commit is contained in:
BTMuli
13
src/components/itembox/tib-wiki-avatar.vue
Normal file
13
src/components/itembox/tib-wiki-avatar.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-avatar" display="inner" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TItemBox from "../main/t-itembox.vue";
|
||||
|
||||
interface TibCalendarAvatarProps {
|
||||
size: string,
|
||||
modelValue: TGApp.App.Character.WikiBriefInfo
|
||||
}
|
||||
|
||||
const props = defineProps<TibCalendarAvatarProps>();
|
||||
</script>
|
||||
13
src/components/itembox/tib-wiki-weapon.vue
Normal file
13
src/components/itembox/tib-wiki-weapon.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-weapon" display="inner" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TItemBox from "../main/t-itembox.vue";
|
||||
|
||||
interface TibCalendarWeaponProps {
|
||||
size: string,
|
||||
modelValue: TGApp.App.Weapon.WikiBriefInfo
|
||||
}
|
||||
|
||||
const props = defineProps<TibCalendarWeaponProps>();
|
||||
</script>
|
||||
@@ -90,6 +90,21 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
|
||||
} as TItemBoxCard;
|
||||
case "wiki-avatar":
|
||||
cardData = props.data as TGApp.App.Character.WikiBriefInfo;
|
||||
return {
|
||||
bg: `/icon/bg/${cardData.star}-Star.webp`,
|
||||
icon: `/WIKI/character/icon/${cardData.id}.webp`,
|
||||
lt: `/icon/element/${cardData.element}元素.webp`,
|
||||
innerIcon: `/icon/weapon/${cardData.weapon}.webp`,
|
||||
innerText: cardData.name,
|
||||
} as TItemBoxCard;
|
||||
case "wiki-weapon":
|
||||
cardData = props.data as TGApp.App.Weapon.WikiBriefInfo;
|
||||
return {
|
||||
bg: cardData.bg,
|
||||
icon: cardData.icon,
|
||||
lt: cardData.weaponIcon,
|
||||
innerText: cardData.name,
|
||||
} as TItemBoxCard;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div class="card-box">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="props.modelValue.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层角色图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="props.modelValue.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-element">
|
||||
<img :src="props.modelValue.elementIcon" alt="element">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<img :src="props.modelValue.weaponIcon" alt="weapon">
|
||||
<span>{{ props.modelValue.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
interface TMiniWeaponProps {
|
||||
size: string;
|
||||
modelValue: TGApp.App.Character.WikiBriefInfo | TGApp.App.Calendar.Item;
|
||||
}
|
||||
|
||||
const props = defineProps<TMiniWeaponProps>();
|
||||
|
||||
const getSize = computed(() => {
|
||||
return props.size === "100px" ? "30px" : "40px";
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.card-box {
|
||||
position: relative;
|
||||
width: v-bind(size);
|
||||
height: v-bind(size);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-element {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: v-bind(getSize);
|
||||
height: v-bind(getSize);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-element img {
|
||||
width: calc(v-bind(getSize) - 10px);
|
||||
height: calc(v-bind(getSize) - 10px);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-name img {
|
||||
width: calc(v-bind(getSize) / 1.5);
|
||||
height: calc(v-bind(getSize) / 1.5);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: v-bind(getSize);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgb(20 20 20 / 50%);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: calc(v-bind(getSize) / 3);
|
||||
text-shadow: 0 0 5px #000;
|
||||
font-family: Genshin, serif;
|
||||
}
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="card-box">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="props.modelValue.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层武器图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="props.modelValue.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-weapon">
|
||||
<img :src="props.modelValue.weaponIcon" alt="type">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<span>{{ props.modelValue.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
interface TMiniWeaponProps {
|
||||
size: string;
|
||||
modelValue: TGApp.App.Weapon.WikiBriefInfo | TGApp.App.Calendar.Item
|
||||
}
|
||||
|
||||
const props = defineProps<TMiniWeaponProps>();
|
||||
const getSize = computed(() => {
|
||||
return props.size === "100px" ? "30px" : "40px";
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.card-box {
|
||||
position: relative;
|
||||
width: v-bind(size);
|
||||
height: v-bind(size);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-weapon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: v-bind(getSize);
|
||||
height: v-bind(getSize);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-weapon img {
|
||||
width: calc(v-bind(getSize) - 10px);
|
||||
height: calc(v-bind(getSize) - 10px);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgb(20 20 20 / 50%);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: calc(v-bind(getSize) / 3);
|
||||
text-shadow: 0 0 5px #000;
|
||||
font-family: Genshin, serif;
|
||||
}
|
||||
</style>
|
||||
@@ -4,8 +4,8 @@
|
||||
<div class="box-div">
|
||||
<div class="toc-top">
|
||||
<div class="toc-icon">
|
||||
<TMiniAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
|
||||
<TMiniWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
|
||||
<TibCalendarAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
|
||||
<TibCalendarWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
|
||||
</div>
|
||||
<div class="toc-material-grid">
|
||||
<TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
|
||||
@@ -46,8 +46,8 @@
|
||||
import { computed, ref } from "vue";
|
||||
import TOverlay from "../main/t-overlay.vue";
|
||||
import TCalendarMaterial from "../mini/t-calendar-material.vue";
|
||||
import TMiniAvatar from "../mini/t-mini-avatar.vue";
|
||||
import TMiniWeapon from "../mini/t-mini-weapon.vue";
|
||||
import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
|
||||
import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
|
||||
// utils
|
||||
import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
|
||||
import { createTGWindow } from "../../utils/TGWindow";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
|
||||
<TMiniAvatar size="128px" :model-value="item" />
|
||||
<TibWikiAvatar size="128px" :model-value="item" />
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
该角色暂无详情
|
||||
@@ -12,7 +12,7 @@
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, computed } from "vue";
|
||||
import TMiniAvatar from "../../components/mini/t-mini-avatar.vue";
|
||||
import TibWikiAvatar from "../../components/itembox/tib-wiki-avatar.vue";
|
||||
// utils
|
||||
import { createTGWindow } from "../../utils/TGWindow";
|
||||
import { AppCharacterData } from "../../data";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
|
||||
<TMiniWeapon size="128px" :model-value="item" />
|
||||
<TibWikiWeapon size="128px" :model-value="item" />
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
该武器暂无详情
|
||||
@@ -12,7 +12,7 @@
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, computed } from "vue";
|
||||
import TMiniWeapon from "../../components/mini/t-mini-weapon.vue";
|
||||
import TibWikiWeapon from "../../components/itembox/tib-wiki-weapon.vue";
|
||||
// utils
|
||||
import { createTGWindow } from "../../utils/TGWindow";
|
||||
import { AppWeaponData } from "../../data";
|
||||
|
||||
Reference in New Issue
Block a user