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

💄 美化样式

Browse Source
This commit is contained in:
BTMuli
2023-06-20 21:12:15 +08:00
parent babd9a3b09
commit d1e778bcb7
1 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/overlay/to-channel.vue
View File

@@ -1,13 +1,20 @@
<template> <template>
<TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px"> <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
<div class="toc-box"> <div class="toc-box">
<div class="toc-title"> <div class="toc-top">
请选择要跳转的频道 <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> </div>
<div class="toc-list"> <div class="toc-close" @click="onCancel">
<div v-for="item in channelList" class="toc-list-item" @click="toChannel(item.link)"> <div class="toc-close-btn">
<img :src="item.icon" alt="icon"> <v-icon>mdi-close</v-icon>
<span>{{ item.title }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -84,7 +91,8 @@ const channelList: ToChannelItem[] = [
function onCancel () { function onCancel () {
visible.value = false; visible.value = false;
} }
function toChannel (link:string) {
function toChannel (link: string) {
visible.value = false; visible.value = false;
router.push(link); router.push(link);
setTimeout(() => { setTimeout(() => {
@@ -94,8 +102,12 @@ function toChannel (link:string) {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.toc-box { .toc-box {
background: rgb(255 255 255 / 30%); padding: 10px;
}
.toc-top {
border-radius: 5px; border-radius: 5px;
background: rgb(255 255 255 / 30%);
padding: 10px; padding: 10px;
} }
@@ -106,6 +118,7 @@ function toChannel (link:string) {
} }
.toc-list { .toc-list {
margin-top: 10px;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-gap: 10px; grid-gap: 10px;
@@ -140,4 +153,24 @@ function toChannel (link:string) {
font-size: 16px; font-size: 16px;
margin-right: 10px; margin-right: 10px;
} }
.toc-close {
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.toc-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> </style>