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

fix(style): 样式美化

Browse Source
This commit is contained in:
BTMuli
2023-04-01 18:51:32 +08:00
parent 15ce357b8b
commit 8ffb95ed90
11 changed files with 79 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Achievements.vue
View File

@@ -348,7 +348,7 @@ async function exportJson() {
}
</script>
<style lang="css">
<style lang="css" scoped>
/* 顶部按钮 */
.top-btn {
background: #393b40;

2
src/pages/Config.vue
View File

@@ -164,7 +164,7 @@ async function setDefaultConfig() {
}
</script>
<style lang="css">
<style lang="css" scoped>
.config-list {
margin: 10px;
font-family: "Genshin-Light", serif;

136
src/pages/News.vue
View File

@@ -23,19 +23,21 @@
<v-window-item value="notice">
<div class="news-grid">
<v-card v-for="item in postData.notice" class="news-card" width="340">
<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
<div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" />
</div>
<v-card-title>{{ item.title }}</v-card-title>
<v-card-actions>
<v-btn @click="toPost(item)" class="ms-2 card-btn">
<v-btn @click="toPost(item)" class="card-btn">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
查看
</v-btn>
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
<v-btn @click="toJson(item)" class="card-btn" v-show="appStore.devMode">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
JSON
</v-btn>
@@ -43,9 +45,9 @@
</v-card>
</div>
<div class="load-news">
<v-btn @click="loadMore('notice')">
<v-btn @click="loadMore('notice')" :loading="loadingSub">
<template v-slot:append>
<img src="../assets/icons/arrow-left.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-left.svg" alt="right" />
</template>
已加载：{{ noticeData.last_id }}，加载更多
</v-btn>
@@ -54,20 +56,21 @@
<v-window-item value="activity">
<div class="news-grid">
<v-card class="news-card" v-for="item in postData.activity" width="340">
<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
<div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" />
</div>
<v-card-title>{{ item.title }}</v-card-title>
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
<v-card-actions>
<v-btn @click="toPost(item)" class="ms-2 card-btn">
<v-btn @click="toPost(item)" class="card-btn">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
查看
</v-btn>
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
<div v-show="!appStore.devMode">
<v-btn
class="ms-2"
:style="{
background: item.status?.colorCss,
color: '#faf7e8 !important',
@@ -75,9 +78,9 @@
>{{ item.status?.status }}</v-btn
>
</div>
<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
<v-btn @click="toJson(item)" class="card-btn" v-show="appStore.devMode">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
JSON
</v-btn>
@@ -85,9 +88,9 @@
</v-card>
</div>
<div class="load-news">
<v-btn @click="loadMore('activity')">
<v-btn @click="loadMore('activity')" :loading="loadingSub">
<template v-slot:append>
<img src="../assets/icons/arrow-left.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-left.svg" alt="right" />
</template>
已加载:{{ activityData.last_id }}，加载更多
</v-btn>
@@ -96,19 +99,21 @@
<v-window-item value="news">
<div class="news-grid">
<v-card class="news-card" v-for="item in postData.news" width="340">
<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
<div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" />
</div>
<v-card-title>{{ item.title }}</v-card-title>
<v-card-actions>
<v-btn @click="toPost(item)" class="ms-2 card-btn">
<v-btn @click="toPost(item)" class="card-btn">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
查看
</v-btn>
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
<v-btn @click="toJson(item)" class="card-btn" v-show="appStore.devMode">
<template v-slot:prepend>
<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-right.svg" alt="right" />
</template>
JSON
</v-btn>
@@ -116,9 +121,9 @@
</v-card>
</div>
<div class="load-news">
<v-btn @click="loadMore('news')">
<v-btn @click="loadMore('news')" :loading="loadingSub">
<template v-slot:append>
<img src="../assets/icons/arrow-left.svg" alt="right" onload="SVGInject(this)" />
<img src="../assets/icons/arrow-left.svg" alt="right" />
</template>
已加载：{{ newsData.last_id }}，加载更多
</v-btn>
@@ -136,9 +141,6 @@ import TLoading from "../components/t-loading.vue";
import { dialog } from "@tauri-apps/api";
// store
import useAppStore from "../store/modules/app";
// tools
// @ts-ignore
import "../tools/svg-inject.js";
// plugin
import MysOper from "../plugins/Mys";
// utils
@@ -153,6 +155,7 @@ const appStore = useAppStore();
// loading
const loading = ref(true);
const loadingTitle = ref("正在加载");
const loadingSub = ref(false);
// 路由
const router = useRouter();
// search
@@ -188,55 +191,46 @@ onMounted(async () => {
// 加载更多
async function loadMore(data: string) {
let check = true;
loadingSub.value = true;
switch (data) {
case "notice":
if (noticeData.value.is_last) {
await dialog.message("已经是最后一页了");
loadingSub.value = false;
return;
}
if (noticeData.value.last_id === 50) {
check = await dialog.confirm("由于API限制，获取到的数据数量可能变更为20，是否继续？");
if (!check) return;
}
loading.value = true;
loadingTitle.value = "正在获取公告数据...";
noticeData.value = await MysOper.News.get.notice(noticeData.value.last_id + 10);
loadingTitle.value = "正在渲染数据...";
const getNotice = await MysOper.News.get.notice(20, noticeData.value.last_id);
noticeData.value.last_id = getNotice.last_id;
noticeData.value.is_last = getNotice.is_last;
noticeData.value.list = noticeData.value.list.concat(getNotice.list);
postData.value.notice = MysOper.News.card.notice(noticeData.value);
loading.value = false;
loadingSub.value = false;
break;
case "activity":
if (activityData.value.is_last) {
await dialog.message("已经是最后一页了");
loadingSub.value = false;
return;
}
if (activityData.value.last_id === 50) {
check = await dialog.confirm("由于API限制，获取到的数据数量可能变更为20，是否继续？");
if (!check) return;
}
loading.value = true;
loadingTitle.value = "正在获取活动数据...";
activityData.value = await MysOper.News.get.activity(activityData.value.last_id + 10);
loadingTitle.value = "正在渲染数据...";
const getActivity = await MysOper.News.get.activity(20, activityData.value.last_id);
activityData.value.last_id = getActivity.last_id;
activityData.value.is_last = getActivity.is_last;
activityData.value.list = activityData.value.list.concat(getActivity.list);
postData.value.activity = MysOper.News.card.activity(activityData.value);
loading.value = false;
loadingSub.value = false;
break;
case "news":
if (newsData.value.is_last) {
await dialog.message("已经是最后一页了");
loadingSub.value = false;
return;
}
if (newsData.value.last_id === 50) {
check = await dialog.confirm("由于API限制，获取到的数据数量可能变更为20，是否继续？");
if (!check) return;
}
loading.value = true;
loadingTitle.value = "正在获取新闻数据...";
newsData.value = await MysOper.News.get.news(newsData.value.last_id + 10);
loadingTitle.value = "正在渲染数据...";
const getNews = await MysOper.News.get.news(20, newsData.value.last_id);
newsData.value.last_id = getNews.last_id;
newsData.value.is_last = getNews.is_last;
newsData.value.list = newsData.value.list.concat(getNews.list);
postData.value.news = MysOper.News.card.news(newsData.value);
loading.value = false;
loadingSub.value = false;
break;
}
}
@@ -297,7 +291,7 @@ async function searchPost() {
}
</script>
<style lang="css">
<style lang="css" scoped>
.news-grid {
font-family: Genshin, serif;
display: grid;
@@ -305,22 +299,29 @@ async function searchPost() {
grid-gap: 20px;
}
.news-grid img {
transition: all 0.3s linear;
}
.news-grid :hover img {
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s linear;
}
.news-card {
border-radius: 10px;
background: #faf7e8;
color: #546d8b;
}
.news-cover {
height: 150px;
overflow: hidden;
}
.news-cover :hover {
transform: scale(1.1);
transition: all 0.3s linear;
cursor: pointer;
}
.news-cover img {
object-fit: cover;
width: 100%;
height: 150px;
transition: all 0.3s linear;
}
/* load more */
.load-news {
font-family: Genshin, serif;
@@ -330,7 +331,6 @@ async function searchPost() {
align-items: center;
padding: 10px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s linear;
}
@@ -339,12 +339,8 @@ async function searchPost() {
color: #faf7e8 !important;
}
.load-news button svg {
.load-news button img {
width: 18px;
height: 18px;
}
.load-news button svg path {
fill: #faf7e8;
}
</style>