mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
♻️ 叠层单独提出来作为组件使用
This commit is contained in:
BTMuli
150
src/components/t-mini-avatar.vue
Normal file
150
src/components/t-mini-avatar.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="card-box">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="item.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层角色图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="item.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-element">
|
||||
<img :src="item.element" alt="element">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<img :src="item.weapon_type" alt="weapon">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
interface TMiniWeaponProps {
|
||||
size: string;
|
||||
modelValue: BTMuli.Genshin.Wiki.Character.BriefInfo | BTMuli.Genshin.Calendar.Data
|
||||
}
|
||||
|
||||
const props = defineProps<TMiniWeaponProps>();
|
||||
|
||||
const getSize = computed(() => {
|
||||
return props.size === "100px" ? "30px" : "40px";
|
||||
});
|
||||
|
||||
const item = computed(() => {
|
||||
let res;
|
||||
if (props.modelValue.hasOwnProperty("weapon_type")) {
|
||||
res = props.modelValue as BTMuli.Genshin.Wiki.Character.BriefInfo;
|
||||
return {
|
||||
bg: res.bg,
|
||||
icon: res.icon,
|
||||
element: res.element,
|
||||
weapon_type: res.weapon_type,
|
||||
name: res.name,
|
||||
};
|
||||
} else {
|
||||
res = props.modelValue as BTMuli.Genshin.Calendar.Data;
|
||||
return {
|
||||
bg: res.bg,
|
||||
icon: res.icon,
|
||||
element: res.element,
|
||||
weapon_type: res.weapon,
|
||||
name: res.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
</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>
|
||||
142
src/components/t-mini-weapon.vue
Normal file
142
src/components/t-mini-weapon.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="card-box">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="item.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层武器图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="item.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-weapon">
|
||||
<img :src="item.weapon_type" alt="type">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
interface TMiniWeaponProps {
|
||||
size: string;
|
||||
modelValue: BTMuli.Genshin.Wiki.Weapon.BriefInfo | BTMuli.Genshin.Calendar.Data
|
||||
}
|
||||
|
||||
const props = defineProps<TMiniWeaponProps>();
|
||||
const getSize = computed(() => {
|
||||
return props.size === "100px" ? "30px" : "40px";
|
||||
});
|
||||
|
||||
const item = computed(() => {
|
||||
let res;
|
||||
if (!props.modelValue.hasOwnProperty("weapon_type")) {
|
||||
res = props.modelValue as BTMuli.Genshin.Wiki.Weapon.BriefInfo;
|
||||
return {
|
||||
bg: res.bg,
|
||||
icon: res.icon,
|
||||
element: res.element,
|
||||
weapon_type: res.type,
|
||||
name: res.name,
|
||||
};
|
||||
} else {
|
||||
res = props.modelValue as BTMuli.Genshin.Calendar.Data;
|
||||
return {
|
||||
bg: res.bg,
|
||||
icon: res.icon,
|
||||
element: res.element,
|
||||
weapon_type: res.weapon_type,
|
||||
name: res.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
</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>
|
||||
@@ -1,24 +1,7 @@
|
||||
<template>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="item.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层角色图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="item.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-element">
|
||||
<img :src="item.element" alt="element">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<img :src="item.weapon" alt="weapon">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<TMiniAvatar size="128px" :model-value="item" />
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
该角色暂无详情
|
||||
@@ -29,6 +12,7 @@
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
import TMiniAvatar from "../../components/t-mini-avatar.vue";
|
||||
// utils
|
||||
import { createTGWindow } from "../../utils/TGWindow";
|
||||
import { TGAppData } from "../../data";
|
||||
@@ -60,95 +44,4 @@ function toOuter (item: BTMuli.Genshin.Wiki.Character.BriefInfo) {
|
||||
grid-gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-element img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-name img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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: 20px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
font-family: Genshin, serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,7 @@
|
||||
<template>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
|
||||
<!-- 底层背景图 -->
|
||||
<div class="card-bg">
|
||||
<img :src="item.bg" alt="bg">
|
||||
</div>
|
||||
<!-- 中层武器图 -->
|
||||
<div class="card-icon">
|
||||
<img :src="item.icon" alt="icon">
|
||||
</div>
|
||||
<!-- 上层图标&内容 -->
|
||||
<div class="card-cover">
|
||||
<div class="card-type">
|
||||
<img :src="item.type" alt="type">
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<TMiniWeapon size="128px" :model-value="item" />
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
该武器暂无详情
|
||||
@@ -28,6 +12,7 @@
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
import TMiniWeapon from "../../components/t-mini-weapon.vue";
|
||||
// utils
|
||||
import { createTGWindow } from "../../utils/TGWindow";
|
||||
import { TGAppData } from "../../data";
|
||||
@@ -56,98 +41,7 @@ function toOuter (item: BTMuli.Genshin.Wiki.Weapon.BriefInfo) {
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
|
||||
grid-gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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-type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-type img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-name img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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: 20px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
font-family: Genshin, serif;
|
||||
grid-gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
2
src/types/Calendar.d.ts
vendored
2
src/types/Calendar.d.ts
vendored
@@ -26,7 +26,7 @@ declare namespace BTMuli.Genshin.Calendar {
|
||||
*/
|
||||
export interface Data {
|
||||
id: number
|
||||
content_id: number
|
||||
content_id: number | null
|
||||
drop_day: number[]
|
||||
name: string
|
||||
item_type: string
|
||||
|
||||
6
src/types/Character.d.ts
vendored
6
src/types/Character.d.ts
vendored
@@ -2,13 +2,13 @@
|
||||
* @file types Character.d.ts
|
||||
* @author BTMuli<bt-muli@outlook.com>
|
||||
* @description 角色相关类型定义
|
||||
* @since Alpha v0.1.3
|
||||
* @since Alpha v0.1.5
|
||||
*/
|
||||
|
||||
declare namespace BTMuli.Genshin.Wiki.Character {
|
||||
/**
|
||||
* @description 简略信息，用于整体展示
|
||||
* @since Alpha v0.1.3
|
||||
* @since Alpha v0.1.5
|
||||
* @interface BriefInfo
|
||||
* @property {number} id - 角色 ID
|
||||
* @property {number} content_id - 观测枢 id
|
||||
@@ -22,7 +22,7 @@ declare namespace BTMuli.Genshin.Wiki.Character {
|
||||
*/
|
||||
export interface BriefInfo {
|
||||
id: number
|
||||
content_id?: number
|
||||
content_id?: number | null
|
||||
name: string
|
||||
star: number
|
||||
bg: string
|
||||
|
||||
2
src/types/Weapon.d.ts
vendored
2
src/types/Weapon.d.ts
vendored
@@ -22,7 +22,7 @@ declare namespace BTMuli.Genshin.Wiki.Weapon {
|
||||
*/
|
||||
export interface BriefInfo {
|
||||
id: number
|
||||
content_id?: number
|
||||
content_id?: number | null
|
||||
name: string
|
||||
star: number
|
||||
bg: string
|
||||
|
||||
Reference in New Issue
Block a user