Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-19 10:23:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

🌱 角色 wiki 材料组件化，命座样式草创

Browse Source
This commit is contained in:
BTMuli
2023-12-19 17:44:20 +08:00
parent 4ca76b168e
commit 1d4621843a
4 changed files with 169 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/wiki/twc-materials.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<!-- todo 点击展开 overlay -->
<div class="twc-materials-grid">
<div class="twc-material-box" v-for="(item, index) in props.data" :key="index">
<div class="twc-material-left">
<div class="twc-material-bg">
<img :src="item.bg" alt="bg" />
</div>
<div class="twc-material-icon">
<img :src="item.icon" alt="icon" />
</div>
</div>
<div class="twc-material-right">
{{ item.name }}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
interface TwcMaterialsProp {
data: TGApp.App.Calendar.Material[];
}
const props = defineProps<TwcMaterialsProp>();
</script>
<style lang="css" scoped>
.twc-materials-grid {
display: grid;
width: 100%;
grid-gap: 5px;
grid-template-columns: repeat(3, 1fr);
}
.twc-material-box {
position: relative;
display: flex;
height: 45px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-1);
gap: 10px;
}
.twc-material-left {
width: 45px;
height: 45px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.twc-material-bg,
.twc-material-icon {
position: absolute;
top: 0;
width: 45px;
height: 45px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.twc-material-bg img,
.twc-material-icon img {
width: 100%;
height: 100%;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
object-fit: cover;
}
.twc-material-right {
display: flex;
align-items: center;
justify-content: center;
color: var(--box-text-2);
font-size: 14px;
}
</style>