mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🎨 to-calendar 单独提出来
This commit is contained in:
BTMuli
@@ -56,62 +56,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<v-snackbar v-model="snackbar" :timeout="1500" :color="snackbarColor">
|
<ToCalendar v-model="showItem" :data-type="selectedType" :data-val="selectedItem" />
|
||||||
{{ snackbarText }}
|
|
||||||
</v-snackbar>
|
|
||||||
<v-overlay v-model="showItem">
|
|
||||||
<div class="calendar-item-box">
|
|
||||||
<div class="calendar-item-top">
|
|
||||||
<div class="calendar-item-icon">
|
|
||||||
<TMiniAvatar v-if="selectedType=== 'character'" :model-value="selectedItem" size="100px" />
|
|
||||||
<TMiniWeapon v-if="selectedType=== 'weapon'" :model-value="selectedItem" size="100px" />
|
|
||||||
</div>
|
|
||||||
<div class="calendar-item-content">
|
|
||||||
<div v-for="item in selectedItem.materials" class="calendar-item-sub">
|
|
||||||
<TCalendarMaterial :item="item" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="calendar-item-line">
|
|
||||||
<img src="/source/UI/item-line.webp" alt="line">
|
|
||||||
</div>
|
|
||||||
<div class="calendar-item-bottom">
|
|
||||||
<div class="calendar-item-source">
|
|
||||||
<div class="calendar-source-text">
|
|
||||||
来源：
|
|
||||||
</div>
|
|
||||||
<img :src="`/icon/nation/${selectedItem.source.area}.webp`" alt="icon">
|
|
||||||
<div class="calendar-source-text">
|
|
||||||
{{ selectedItem.source.area }} - {{ selectedItem.source.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="detail-btn">
|
|
||||||
<v-btn @click="showDetail(selectedItem)">
|
|
||||||
<template #append>
|
|
||||||
<img src="../../assets/icons/arrow-right.svg" alt="right">
|
|
||||||
</template>
|
|
||||||
详情
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="calendar-item-close" @click="showItem = false">
|
|
||||||
<v-icon>mdi-close</v-icon>
|
|
||||||
</div>
|
|
||||||
</v-overlay>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
// vue
|
// vue
|
||||||
import { computed, onMounted, ref } from "vue";
|
import { computed, onMounted, ref } from "vue";
|
||||||
|
import ToCalendar from "../overlay/to-calendar.vue";
|
||||||
import TMiniAvatar from "../mini/t-mini-avatar.vue";
|
import TMiniAvatar from "../mini/t-mini-avatar.vue";
|
||||||
import TMiniWeapon from "../mini/t-mini-weapon.vue";
|
import TMiniWeapon from "../mini/t-mini-weapon.vue";
|
||||||
import TCalendarMaterial from "../mini/t-calendar-material.vue";
|
|
||||||
// data
|
// data
|
||||||
import { AppCalendarData } from "../../data";
|
import { AppCalendarData } from "../../data";
|
||||||
// interface
|
|
||||||
import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
|
|
||||||
import { createTGWindow } from "../../utils/TGWindow";
|
|
||||||
|
|
||||||
// loading
|
// loading
|
||||||
const loading = ref(true as boolean);
|
const loading = ref(true as boolean);
|
||||||
@@ -132,11 +87,6 @@ const showItem = ref(false as boolean);
|
|||||||
const selectedItem = ref({} as TGApp.App.Calendar.Item);
|
const selectedItem = ref({} as TGApp.App.Calendar.Item);
|
||||||
const selectedType = ref("character");
|
const selectedType = ref("character");
|
||||||
|
|
||||||
// snackbar
|
|
||||||
const snackbar = ref(false as boolean);
|
|
||||||
const snackbarText = ref("" as string);
|
|
||||||
const snackbarColor = ref("success" as string);
|
|
||||||
|
|
||||||
const btnText = [
|
const btnText = [
|
||||||
{
|
{
|
||||||
week: 7,
|
week: 7,
|
||||||
@@ -194,17 +144,6 @@ function selectContent (item: TGApp.App.Calendar.Item, type: string) {
|
|||||||
showItem.value = true;
|
showItem.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showDetail (item: TGApp.App.Calendar.Item) {
|
|
||||||
if (item.contentId === 0) {
|
|
||||||
snackbarText.value = "暂无详情";
|
|
||||||
snackbarColor.value = "error";
|
|
||||||
snackbar.value = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const url = OBC_CONTENT_API.replace("{content_id}", item.contentId.toString());
|
|
||||||
createTGWindow(url, "素材详情", item.name, 1200, 800, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getContents (day: number) {
|
function getContents (day: number) {
|
||||||
btnNow.value = day;
|
btnNow.value = day;
|
||||||
calendarNow.value = getCalendar(day);
|
calendarNow.value = getCalendar(day);
|
||||||
@@ -287,129 +226,4 @@ function getContents (day: number) {
|
|||||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||||
grid-gap: 8px;
|
grid-gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* overlay 盒子 */
|
|
||||||
.calendar-item-box {
|
|
||||||
position: absolute;
|
|
||||||
width: 440px;
|
|
||||||
height: 200px;
|
|
||||||
color: #faf7e8;
|
|
||||||
top: calc(50vh - 100px);
|
|
||||||
left: calc(50vw - 220px);
|
|
||||||
background: var(--content-bg-2);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-top {
|
|
||||||
height: 100px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-icon {
|
|
||||||
height: 100px;
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-content {
|
|
||||||
margin-left: 10px;
|
|
||||||
font-family: Genshin, serif;
|
|
||||||
color: var(--content-bg-1);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
column-gap: 10px;
|
|
||||||
row-gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-sub {
|
|
||||||
width: 150px;
|
|
||||||
height: 45px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-sub img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-line {
|
|
||||||
width: 420px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-line img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-bottom {
|
|
||||||
background: rgb(0 0 0 / 30%);
|
|
||||||
padding: 3px 10px;
|
|
||||||
width: 420px;
|
|
||||||
height: 56px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-bottom img {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-source {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: left;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-source-text {
|
|
||||||
height: 50px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: Genshin-Light, serif;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-btn {
|
|
||||||
font-family: Genshin, serif;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: all 0.3s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-btn button {
|
|
||||||
background: var(--btn-bg-1);
|
|
||||||
color: #faf7e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-btn button img {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-item-close {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50vh + 120px);
|
|
||||||
left: calc(50vw - 15px);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: var(--content-bg-2);
|
|
||||||
color: #546D8B;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
191
src/components/overlay/to-calendar.vue
Normal file
191
src/components/overlay/to-calendar.vue
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<TOverlay v-model="visible">
|
||||||
|
<div class="toc-box">
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<div class="toc-material-grid">
|
||||||
|
<TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="/source/UI/item-line.webp" alt="line" class="toc-line">
|
||||||
|
<div class="toc-bottom">
|
||||||
|
<div class="toc-src-box">
|
||||||
|
<div class="toc-src-text">
|
||||||
|
来源：
|
||||||
|
</div>
|
||||||
|
<img :src="`/icon/nation/${itemVal.source.area}.webp`" alt="icon">
|
||||||
|
<div class="toc-src-text">
|
||||||
|
{{ itemVal.source.area }} - {{ itemVal.source.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-btn variant="outlined" @click="toDetail(itemVal)">
|
||||||
|
<template #append>
|
||||||
|
<img src="../../assets/icons/arrow-right.svg" alt="right" class="toc-btn-img">
|
||||||
|
</template>
|
||||||
|
详情
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="close-div">
|
||||||
|
<div class="close-btn" @click="onCancel">
|
||||||
|
<v-icon>mdi-close</v-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TOverlay>
|
||||||
|
<v-snackbar v-model="snackbar" :timeout="1500" color="error">
|
||||||
|
该 {{ itemType === "weapon" ? "武器" : "角色" }} 暂无详情
|
||||||
|
</v-snackbar>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
// vue
|
||||||
|
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";
|
||||||
|
// utils
|
||||||
|
import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
|
||||||
|
import { createTGWindow } from "../../utils/TGWindow";
|
||||||
|
|
||||||
|
interface TOCalendarProps {
|
||||||
|
modelValue: boolean;
|
||||||
|
dataType: string;
|
||||||
|
dataVal: TGApp.App.Calendar.Item;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TOCalendarEmits {
|
||||||
|
(e: "update:modelValue", value: TGApp.App.Calendar.Item): void;
|
||||||
|
(e: "cancel"): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emits = defineEmits<TOCalendarEmits>();
|
||||||
|
const props = withDefaults(defineProps<TOCalendarProps>(), {
|
||||||
|
modelValue: false,
|
||||||
|
dataType: "",
|
||||||
|
dataVal: {} as TGApp.App.Calendar.Item,
|
||||||
|
});
|
||||||
|
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (value) => emits("update:modelValue", value),
|
||||||
|
});
|
||||||
|
const itemType = computed(() => props.dataType);
|
||||||
|
const itemVal = computed(() => props.dataVal);
|
||||||
|
const snackbar = ref(false);
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
visible.value = false;
|
||||||
|
emits("cancel");
|
||||||
|
};
|
||||||
|
|
||||||
|
function toDetail (item: TGApp.App.Calendar.Item) {
|
||||||
|
if (item.contentId === 0) {
|
||||||
|
snackbar.value = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const url = OBC_CONTENT_API.replace("{content_id}", item.contentId.toString());
|
||||||
|
createTGWindow(url, "素材详情", item.name, 1200, 800, true);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
/* overlay 盒子 */
|
||||||
|
.toc-box {
|
||||||
|
width: 440px;
|
||||||
|
height: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-div {
|
||||||
|
height: 200px;
|
||||||
|
background: rgb(255 255 255 / 30%);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #faf7e8;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-top {
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-icon {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-material-grid {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-family: Genshin, serif;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-line {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-bottom {
|
||||||
|
background: rgb(0 0 0 / 30%);
|
||||||
|
padding: 3px 10px;
|
||||||
|
width: 420px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-bottom img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-src-box {
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-src-text {
|
||||||
|
height: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Genshin-Light, serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-btn-img {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-div {
|
||||||
|
height: 60px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: rgb(255 255 255 / 30%);
|
||||||
|
color: #faf7e8;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user