mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-18 10:18:14 +08:00
🎨 代码格式化
This commit is contained in:
@@ -1,18 +1,16 @@
|
||||
<template>
|
||||
<div class="tuc-dc-box">
|
||||
<div v-if="!modelValue.active" class="tuc-dc-lock">
|
||||
<v-icon color="white">
|
||||
mdi-lock
|
||||
</v-icon>
|
||||
<v-icon color="white"> mdi-lock </v-icon>
|
||||
</div>
|
||||
<div class="tuc-dc-icon">
|
||||
<img :src="modelValue.icon" alt="constellation">
|
||||
<img :src="modelValue.icon" alt="constellation" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface TucDetailConstellationProps {
|
||||
modelValue: TGApp.Sqlite.Character.RoleConstellation
|
||||
modelValue: TGApp.Sqlite.Character.RoleConstellation;
|
||||
}
|
||||
|
||||
defineProps<TucDetailConstellationProps>();
|
||||
|
||||
@@ -34,7 +34,7 @@ interface TucDetailDescConstellationProps {
|
||||
const props = defineProps<TucDetailDescConstellationProps>();
|
||||
|
||||
// 解析描述
|
||||
function parseDesc (desc: string): string {
|
||||
function parseDesc(desc: string): string {
|
||||
const reg = /<color=(.*?)>(.*?)<\/color>/g;
|
||||
let match = reg.exec(desc);
|
||||
while (match) {
|
||||
|
||||
@@ -12,14 +12,12 @@
|
||||
<span>{{ props.modelValue.level }}</span>
|
||||
</div>
|
||||
<div class="tuc-ddrc-bottom">
|
||||
<img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star">
|
||||
<img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #desc>
|
||||
<div class="tuc-ddrd-title">
|
||||
{{ props.modelValue.set.name }}:
|
||||
</div>
|
||||
<div class="tuc-ddrd-title">{{ props.modelValue.set.name }}:</div>
|
||||
<div v-for="desc in props.modelValue.set.effect" class="tuc-ddrc-desc">
|
||||
<span>{{ desc.active }}件套:</span>
|
||||
<span>{{ desc.description }}</span>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<span>阶</span>
|
||||
</div>
|
||||
<div class="tuc-ddwc-bottom">
|
||||
<img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star">
|
||||
<img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<div class="tuc-dib-box">
|
||||
<div v-if="modelValue.bg" class="tuc-dib-bg">
|
||||
<img :src="modelValue.bg" alt="bg">
|
||||
<img :src="modelValue.bg" alt="bg" />
|
||||
</div>
|
||||
<div v-if="modelValue.icon" class="tuc-dib-icon">
|
||||
<img :src="modelValue.icon" alt="icon">
|
||||
<img :src="modelValue.icon" alt="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
interface TucDetailItemBoxProps {
|
||||
modelValue: {
|
||||
icon?: string,
|
||||
bg?: string,
|
||||
icon?: string;
|
||||
bg?: string;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -2,13 +2,11 @@
|
||||
<TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
|
||||
<div class="tuc-do-box">
|
||||
<div class="tuc-do-bg">
|
||||
<img :src="data.bg" alt="role">
|
||||
</div>
|
||||
<div class="tuc-do-quote">
|
||||
* 所有数据以游戏内为准,此处仅供参考
|
||||
<img :src="data.bg" alt="role" />
|
||||
</div>
|
||||
<div class="tuc-do-quote">* 所有数据以游戏内为准,此处仅供参考</div>
|
||||
<!-- 衣装 -->
|
||||
<div v-if="data.costume.length>0" class="tuc-do-costume">
|
||||
<div v-if="data.costume.length > 0" class="tuc-do-costume">
|
||||
<v-switch v-model="showCostumeSwitch" color="#faf7e8" @click="switchBg">
|
||||
<template #label>
|
||||
<v-icon>mdi-tshirt-crew-outline</v-icon>
|
||||
@@ -26,7 +24,7 @@
|
||||
:style="{
|
||||
border: selected.pos === 0 ? '2px solid var(--common-color-yellow)' : '',
|
||||
}"
|
||||
@click="showDetail(data.weapon,'武器',0)"
|
||||
@click="showDetail(data.weapon, '武器', 0)"
|
||||
>
|
||||
<TucDetailItemBox v-model="weaponBox" />
|
||||
</div>
|
||||
@@ -37,7 +35,7 @@
|
||||
cursor: item ? 'pointer' : 'default',
|
||||
border: selected.pos === index + 1 ? '2px solid var(--common-color-yellow)' : '',
|
||||
}"
|
||||
@click="showDetail(item,'圣遗物',index + 1)"
|
||||
@click="showDetail(item, '圣遗物', index + 1)"
|
||||
>
|
||||
<TucDetailRelic :model-value="item" :pos="index.toString()" />
|
||||
</div>
|
||||
@@ -50,9 +48,9 @@
|
||||
class="tuc-dor-item"
|
||||
:model-value="item"
|
||||
:style="{
|
||||
border: selected.pos === item.pos+5 ? '2px solid var(--common-color-yellow)' : '',
|
||||
border: selected.pos === item.pos + 5 ? '2px solid var(--common-color-yellow)' : '',
|
||||
}"
|
||||
@click="showDetail(item, '命座', item.pos+5)"
|
||||
@click="showDetail(item, '命座', item.pos + 5)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,18 +121,21 @@ const data = ref({
|
||||
bg: "" as string,
|
||||
});
|
||||
const selected = ref({
|
||||
data: {} as TGApp.Sqlite.Character.RoleConstellation
|
||||
| TGApp.Sqlite.Character.RoleWeapon
|
||||
| TGApp.Sqlite.Character.RoleReliquary,
|
||||
data: {} as
|
||||
| TGApp.Sqlite.Character.RoleConstellation
|
||||
| TGApp.Sqlite.Character.RoleWeapon
|
||||
| TGApp.Sqlite.Character.RoleReliquary,
|
||||
type: "武器" || "命之座" || "圣遗物",
|
||||
pos: 0, // 用于标记选中的是哪个位置
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
function loadData () {
|
||||
function loadData() {
|
||||
if (!props.modelValue) return;
|
||||
data.value.weapon = JSON.parse(props.dataVal.weapon) as TGApp.Sqlite.Character.RoleWeapon;
|
||||
data.value.constellation = JSON.parse(props.dataVal.constellation) as TGApp.Sqlite.Character.RoleConstellation[];
|
||||
data.value.constellation = JSON.parse(
|
||||
props.dataVal.constellation,
|
||||
) as TGApp.Sqlite.Character.RoleConstellation[];
|
||||
if (props.dataVal.reliquary !== "") {
|
||||
const relics = JSON.parse(props.dataVal.reliquary) as TGApp.Sqlite.Character.RoleReliquary[];
|
||||
relics.map((item) => {
|
||||
@@ -173,12 +174,12 @@ const onCancel = () => {
|
||||
emits("cancel");
|
||||
};
|
||||
|
||||
function showDetail (
|
||||
function showDetail(
|
||||
item:
|
||||
TGApp.Sqlite.Character.RoleConstellation |
|
||||
TGApp.Sqlite.Character.RoleWeapon |
|
||||
TGApp.Sqlite.Character.RoleReliquary |
|
||||
false,
|
||||
| TGApp.Sqlite.Character.RoleConstellation
|
||||
| TGApp.Sqlite.Character.RoleWeapon
|
||||
| TGApp.Sqlite.Character.RoleReliquary
|
||||
| false,
|
||||
type: string,
|
||||
pos: number = 0,
|
||||
) {
|
||||
@@ -190,7 +191,7 @@ function showDetail (
|
||||
};
|
||||
}
|
||||
|
||||
function switchBg () {
|
||||
function switchBg() {
|
||||
if (data.value.bg === props.dataVal.img) {
|
||||
data.value.bg = data.value.costume[0].icon;
|
||||
} else {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="tuc-dr-box">
|
||||
<div class="tuc-dr-bg">
|
||||
<img :src="`/icon/relic/${props.pos}.webp`" alt="relic">
|
||||
<img :src="`/icon/relic/${props.pos}.webp`" alt="relic" />
|
||||
</div>
|
||||
<div v-if="props.modelValue" class="tuc-dr-bg">
|
||||
<img :src="`/icon/bg/${props.modelValue.star}-Star.webp`" alt="bg">
|
||||
<img :src="`/icon/bg/${props.modelValue.star}-Star.webp`" alt="bg" />
|
||||
</div>
|
||||
<div v-if="props.modelValue" class="tuc-dr-icon">
|
||||
<img :src="props.modelValue.icon" alt="relic">
|
||||
<img :src="props.modelValue.icon" alt="relic" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,21 +6,19 @@
|
||||
</div>
|
||||
<div class="tuc-rb-bottom">
|
||||
<!-- bg 好感名片 -->
|
||||
<div v-if="nameCard!==false" class="tuc-rbb-bg">
|
||||
<img :src="nameCard" alt="nameCard">
|
||||
<div v-if="nameCard !== false" class="tuc-rbb-bg">
|
||||
<img :src="nameCard" alt="nameCard" />
|
||||
</div>
|
||||
<!-- 表面 lock -->
|
||||
<div v-if="props.modelValue.fetter!==10" class="tuc-rbb-lock">
|
||||
<v-icon size="20" color="var(--page-bg)">
|
||||
mdi-lock
|
||||
</v-icon>
|
||||
<div v-if="props.modelValue.fetter !== 10" class="tuc-rbb-lock">
|
||||
<v-icon size="20" color="var(--page-bg)"> mdi-lock </v-icon>
|
||||
</div>
|
||||
<!-- 左上角好感等级 -->
|
||||
<div class="tuc-rbb-fetter">
|
||||
<img src="/icon/material/105.webp" alt="fetter">
|
||||
<img src="/icon/material/105.webp" alt="fetter" />
|
||||
<span>{{ props.modelValue.fetter }}</span>
|
||||
<!-- 衣装 icon -->
|
||||
<span v-if="props.modelValue.costume!=='[]'">
|
||||
<span v-if="props.modelValue.costume !== '[]'">
|
||||
<v-icon>mdi-tshirt-crew-outline</v-icon>
|
||||
</span>
|
||||
</div>
|
||||
@@ -83,14 +81,12 @@ onMounted(async () => {
|
||||
nameCard.value = `/source/nameCard/profile/${role.nameCard}.webp`;
|
||||
});
|
||||
|
||||
function getAvatarName () {
|
||||
return (
|
||||
props.modelValue.cid === 10000005
|
||||
? "旅行者-空"
|
||||
: props.modelValue.cid === 10000007
|
||||
? "旅行者-荧"
|
||||
: props.modelValue.name
|
||||
);
|
||||
function getAvatarName() {
|
||||
return props.modelValue.cid === 10000005
|
||||
? "旅行者-空"
|
||||
: props.modelValue.cid === 10000007
|
||||
? "旅行者-荧"
|
||||
: props.modelValue.name;
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
|
||||
Reference in New Issue
Block a user