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">
|
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||||
{{ snackbarText }}
|
{{ snackbarText }}
|
||||||
</v-snackbar>
|
</v-snackbar>
|
||||||
<v-overlay v-model="showList">
|
<ToChannel 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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -215,6 +151,7 @@
|
|||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import TOLoading from "../components/overlay/to-loading.vue";
|
import TOLoading from "../components/overlay/to-loading.vue";
|
||||||
|
import ToChannel from "../components/overlay/to-channel.vue";
|
||||||
// store
|
// store
|
||||||
import { useAppStore } from "../store/modules/app";
|
import { useAppStore } from "../store/modules/app";
|
||||||
// plugin
|
// plugin
|
||||||
@@ -311,12 +248,6 @@ async function switchAnno () {
|
|||||||
await router.push("/announcements");
|
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) {
|
async function loadMore (data: string) {
|
||||||
loadingSub.value = true;
|
loadingSub.value = true;
|
||||||
@@ -488,75 +419,4 @@ async function searchPost () {
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user