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

💄 app-bar

Browse Source
This commit is contained in:
目棃
2024-08-26 17:55:12 +08:00
parent 6223280ffe
commit 2535e3e5ae
2 changed files with 84 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/common/Announcements.vue
View File

@@ -1,33 +1,40 @@
<template>
<ToLoading v-model="loading" :title="loadingTitle" />
<v-tabs v-model="tab" align-tabs="start" class="anno-tab">
<v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
{{ AnnoType[value] }}
</v-tab>
<v-select
class="anno-select"
:items="annoServerList"
v-model="curRegionName"
label="服务器"
dense
outlined
/>
<v-select
class="anno-select"
:items="langList"
v-model="curLangName"
label="语言"
dense
outlined
/>
<v-spacer />
<v-btn class="anno-switch-btn" @click="switchNews">
<template #prepend>
<v-icon>mdi-bullhorn</v-icon>
</template>
切换米游社咨讯
</v-btn>
</v-tabs>
<v-app-bar>
<template #prepend>
<v-tabs v-model="tab" align-tabs="start" class="anno-tab">
<v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
{{ AnnoType[value] }}
</v-tab>
</v-tabs>
<div class="anno-selects">
<v-select
class="anno-select"
:items="annoServerList"
v-model="curRegionName"
label="服务器"
width="200px"
density="compact"
/>
<v-select
class="anno-select"
:items="langList"
v-model="curLangName"
label="语言"
width="200px"
density="compact"
/>
</div>
</template>
<template #append>
<v-btn class="anno-switch-btn" @click="switchNews">
<template #prepend>
<v-icon>mdi-bullhorn</v-icon>
</template>
切换米游社咨讯
</v-btn>
</template>
</v-app-bar>
<v-window v-model="tab">
<v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
<div class="anno-grid">
@@ -257,14 +264,21 @@ async function createAnno(item: TGApp.App.Announcement.ListCard): Promise<void>
<style lang="css" scoped>
.anno-tab {
margin-bottom: 10px;
color: var(--common-text-title);
font-family: var(--font-title);
}
.anno-selects {
display: flex;
align-items: center;
justify-content: center;
padding-top: 25px;
margin: 0 10px;
gap: 10px;
}
.anno-select {
width: 150px;
margin-left: 10px;
color: var(--common-text-title);
font-family: var(--font-title);
}

69
src/pages/common/News.vue
View File

@@ -1,33 +1,44 @@
<!-- todo app-bar -->
<template>
<ToLoading v-model="loading" :title="loadingTitle" />
<v-tabs v-model="tab" align-tabs="start" class="news-tab">
<v-tab v-for="(value, index) in tabValues" :key="index" :value="value" @click="firstLoad(value)"
>{{ rawData[value].name }}
</v-tab>
<v-text-field
v-model="search"
class="news-search"
append-icon="mdi-magnify"
label="请输入帖子 ID 或搜索词"
:single-line="true"
hide-details
@keyup.enter="searchPost()"
/>
<v-spacer />
<v-btn class="news-top-btn" @click="firstLoad(tab, true)">
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-btn class="news-top-btn" @click="showList = true">
<v-icon>mdi-view-list</v-icon>
</v-btn>
<v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'">
<template #prepend>
<v-icon>mdi-bullhorn</v-icon>
</template>
切换游戏内公告
</v-btn>
</v-tabs>
<v-app-bar density="compact">
<template #prepend>
<v-tabs v-model="tab" align-tabs="start" class="news-tab">
<v-tab
v-for="(value, index) in tabValues"
:key="index"
:value="value"
@click="firstLoad(value)"
>{{ rawData[value].name }}
</v-tab>
</v-tabs>
</template>
<template #title>
<v-text-field
v-model="search"
class="news-search"
append-icon="mdi-magnify"
label="请输入帖子 ID 或搜索词"
:single-line="true"
hide-details
@keyup.enter="searchPost()"
@click:append="searchPost()"
/>
</template>
<template #append>
<v-btn class="news-top-btn" @click="firstLoad(tab, true)">
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-btn class="news-top-btn" @click="showList = true">
<v-icon>mdi-view-list</v-icon>
</v-btn>
<v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'">
<template #prepend>
<v-icon>mdi-bullhorn</v-icon>
</template>
切换游戏内公告
</v-btn>
</template>
</v-app-bar>
<v-window v-model="tab">
<v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
<div class="news-grid">
@@ -225,7 +236,7 @@ async function searchPost(): Promise<void> {
}
.news-search {
margin-left: 10px;
margin: 0 10px;
color: var(--box-text-1);
}