mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
♻️ 选择跳转单提出来作为组件
This commit is contained in:
BTMuli
143
src/components/overlay/to-channel.vue
Normal file
143
src/components/overlay/to-channel.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
|
||||
<div class="toc-box">
|
||||
<div class="toc-title">
|
||||
请选择要跳转的频道
|
||||
</div>
|
||||
<div class="toc-list">
|
||||
<div v-for="item in channelList" class="toc-list-item" @click="toChannel(item.link)">
|
||||
<img :src="item.icon" alt="icon">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TOverlay>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import TOverlay from "../main/t-overlay.vue";
|
||||
|
||||
interface ToChannelProps {
|
||||
modelValue: boolean;
|
||||
}
|
||||
|
||||
interface ToChannelEmits {
|
||||
(e: "update:modelValue", value: boolean): void;
|
||||
}
|
||||
|
||||
interface ToChannelItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ToChannelProps>(), {
|
||||
modelValue: false,
|
||||
});
|
||||
const emits = defineEmits<ToChannelEmits>();
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emits("update:modelValue", value),
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
const channelList: ToChannelItem[] = [
|
||||
{
|
||||
title: "原神",
|
||||
icon: "/platforms/mhy/ys.webp",
|
||||
link: "/news/2",
|
||||
},
|
||||
{
|
||||
title: "崩坏：星穹铁道",
|
||||
icon: "/platforms/mhy/sr.webp",
|
||||
link: "/news/6",
|
||||
},
|
||||
{
|
||||
title: "崩坏3",
|
||||
icon: "/platforms/mhy/bh3.webp",
|
||||
link: "/news/1",
|
||||
},
|
||||
{
|
||||
title: "崩坏2",
|
||||
icon: "/platforms/mhy/bh2.webp",
|
||||
link: "/news/3",
|
||||
},
|
||||
{
|
||||
title: "未定事件簿",
|
||||
icon: "/platforms/mhy/wd.webp",
|
||||
link: "/news/4",
|
||||
},
|
||||
{
|
||||
title: "绝区零",
|
||||
icon: "/platforms/mhy/zzz.webp",
|
||||
link: "/news/8",
|
||||
},
|
||||
{
|
||||
title: "大别野",
|
||||
icon: "/platforms/mhy/dby.webp",
|
||||
link: "/news/5",
|
||||
}];
|
||||
|
||||
function onCancel () {
|
||||
visible.value = false;
|
||||
}
|
||||
function toChannel (link:string) {
|
||||
visible.value = false;
|
||||
router.push(link);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 300);
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.toc-box {
|
||||
background: rgb(255 255 255 / 30%);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
color: var(--common-color-blue);
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.toc-list-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
color: var(--common-color-black);
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
|
||||
.toc-list-item:hover {
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: var(--common-color-white);
|
||||
}
|
||||
|
||||
.toc-list-item img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.toc-list-item span {
|
||||
font-family: var(--font-title);
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -143,71 +143,7 @@
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
<v-overlay v-model="showList">
|
||||
<div class="choice-box">
|
||||
<div class="choice-title">
|
||||
请选择要跳转的频道
|
||||
</div>
|
||||
<div class="choice-list">
|
||||
<div class="choice-item" @click="toChannel('/news/2')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/ys.webp" alt="ys">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
原神
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/6')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/sr.webp" alt="sr">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
崩坏：星穹铁道
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/1')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/bh3.webp" alt="bh3">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
崩坏3
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/3')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/bh2.webp" alt="bh2">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
崩坏2
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/4')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/wd.webp" alt="wd">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
未定事件簿
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/8')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/zzz.webp" alt="zzz">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
绝区零
|
||||
</div>
|
||||
</div>
|
||||
<div class="choice-item" @click="toChannel('/news/5')">
|
||||
<div class="choice-icon">
|
||||
<img src="/platforms/mhy/dby.webp" alt="sg">
|
||||
</div>
|
||||
<div class="choice-name">
|
||||
大别野
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-overlay>
|
||||
<ToChannel v-model="showList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -215,6 +151,7 @@
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import TOLoading from "../components/overlay/to-loading.vue";
|
||||
import ToChannel from "../components/overlay/to-channel.vue";
|
||||
// store
|
||||
import { useAppStore } from "../store/modules/app";
|
||||
// plugin
|
||||
@@ -311,12 +248,6 @@ async function switchAnno () {
|
||||
await router.push("/announcements");
|
||||
}
|
||||
|
||||
async function toChannel (chan: string) {
|
||||
showList.value = false;
|
||||
await router.push(chan);
|
||||
await window.location.reload();
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
async function loadMore (data: string) {
|
||||
loadingSub.value = true;
|
||||
@@ -488,75 +419,4 @@ async function searchPost () {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* chan choice */
|
||||
.choice-box {
|
||||
position: absolute;
|
||||
top: calc(50vh - 200px);
|
||||
left: calc(50vw - 140px);
|
||||
width: 400px;
|
||||
height: 280px;
|
||||
background: var(--content-bg-2);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.choice-title {
|
||||
font-family: Genshin, serif;
|
||||
font-size: 20px;
|
||||
color: var(--content-text-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.choice-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.choice-item {
|
||||
cursor: pointer;
|
||||
font-family: Genshin, serif;
|
||||
background: rgb(0 0 0 / 30%);
|
||||
color: var(--content-text-3);
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.choice-item:hover {
|
||||
border-radius: 5px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
|
||||
.choice-icon {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.choice-icon img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.choice-name {
|
||||
width: calc(100% - 50px);
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user