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

💄 fix overflow

Browse Source
This commit is contained in:
目棃
2025-01-17 17:37:55 +08:00
parent 054a0839c6
commit e332dcf384
1 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/app/to-nameCard.vue
View File

@@ -1,33 +1,31 @@
<template> <template>
<TOverlay v-model="visible"> <TOverlay v-model="visible" v-if="props.data">
<div v-if="props.data" class="ton-container"> <slot name="left"></slot>
<slot name="left"></slot> <div class="ton-box">
<div class="ton-box"> <img
<img alt="bg"
alt="bg" class="ton-bg"
class="ton-bg" v-if="props.data"
v-if="props.data" :src="`/WIKI/nameCard/profile/${props.data.name}.webp`"
:src="`/WIKI/nameCard/profile/${props.data.name}.webp`" />
/> <div class="ton-content">
<div class="ton-content"> <span>{{ props.data.name }}</span>
<span>{{ props.data.name }}</span> <span>{{ parseNameCard(props.data.desc) }}</span>
<span>{{ parseNameCard(props.data.desc) }}</span> <span>获取途径：{{ props.data.source }}</span>
<span>获取途径：{{ props.data.source }}</span>
</div>
<div class="ton-type">{{ getType }}</div>
<v-btn
class="ton-share"
@click="shareNameCard"
variant="outlined"
:loading="loading"
data-html2canvas-ignore
>
<v-icon>mdi-share-variant</v-icon>
<span>分享</span>
</v-btn>
</div> </div>
<slot name="right"></slot> <div class="ton-type">{{ getType }}</div>
<v-btn
class="ton-share"
@click="shareNameCard"
variant="outlined"
:loading="loading"
data-html2canvas-ignore
>
<v-icon>mdi-share-variant</v-icon>
<span>分享</span>
</v-btn>
</div> </div>
<slot name="right"></slot>
</TOverlay> </TOverlay>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -136,13 +134,6 @@ async function shareNameCard(): Promise<void> {
} }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.ton-container {
display: flex;
align-items: center;
justify-content: center;
column-gap: 10px;
}
.ton-box { .ton-box {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -155,6 +146,7 @@ async function shareNameCard(): Promise<void> {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10px;
} }
.ton-type { .ton-type {
@@ -172,12 +164,14 @@ async function shareNameCard(): Promise<void> {
right: 0; right: 0;
left: 0; left: 0;
display: flex; display: flex;
overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
padding: 10px; padding: 10px;
border-radius: 10px;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
color: var(--tgc-white-1); color: var(--tgc-white-1);