Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +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

1
src/assets/css/mys-parser.css
View File

@@ -51,6 +51,7 @@
.mys-post-vod { .mys-post-vod {
width: 800px; width: 800px;
height: 450px; height: 450px;
border-radius: 10px;
} }
.mys-post-iframe { .mys-post-iframe {

6
src/assets/icons/arrow-left.svg
View File

@@ -1,13 +1,13 @@
<svg width="256.000000" height="256.000000" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc> <desc>
Created with Pixso. Created with Pixso.
</desc> </desc>
<g clip-path="url(#clip3_11)"> <g clip-path="url(#clip3_11)">
<path id="2 (边框)" d="M163.2 237.037L163.2 188.84L84.2667 130.37L80 127.21L163.2 65.5802L163.2 18.963L16.0001 128L163.2 237.037ZM163.2 73.8765L235.2 127.21L163.2 180.543L91.2 127.21L163.2 73.8765Z" fill-rule="evenodd" fill="#393B3C"/> <path id="2 (边框)" d="M163.2 237.037L163.2 188.84L84.2667 130.37L80 127.21L163.2 65.5802L163.2 18.963L16.0001 128L163.2 237.037ZM163.2 73.8765L235.2 127.21L163.2 180.543L91.2 127.21L163.2 73.8765Z" fill-rule="evenodd" fill="#faf7e8"/>
</g> </g>
<defs> <defs>
<clipPath id="clip3_11"> <clipPath id="clip3_11">
<rect id="left" width="256.000000" height="256.000000" fill="white"/> <rect id="left" width="256" height="256" />
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 613 B

After

Width:  |  Height:  |  Size: 573 B

4
src/assets/icons/arrow-right.svg
View File

@@ -1,7 +1,7 @@
<svg width="219.199921" height="218.074081" viewBox="0 0 219.2 218.074" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="256" height="256" viewBox="0 0 219.2 218.074" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc> <desc>
Created with Pixso. Created with Pixso.
</desc> </desc>
<path id="right" d="M72 218.074L72 169.877L150.933 111.407L155.2 108.247L71.9999 46.6173L72 0L219.2 109.037L72 218.074ZM72 54.9135L0 108.247L72 161.58L144 108.247L72 54.9135Z" fill-rule="evenodd" fill="#393B3C"/> <path id="right" d="M72 218.074L72 169.877L150.933 111.407L155.2 108.247L71.9999 46.6173L72 0L219.2 109.037L72 218.074ZM72 54.9135L0 108.247L72 161.58L144 108.247L72 54.9135Z" fill-rule="evenodd" fill="#faf7e8"/>
<defs/> <defs/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 419 B

6
src/assets/index.css
View File

@@ -26,11 +26,7 @@
color: #faf7e8 !important; color: #faf7e8 !important;
} }
.card-btn svg { .card-btn img {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.card-btn svg path {
fill: #faf7e8;
}

2
src/components/t-loading.vue
View File

@@ -38,7 +38,7 @@ const props = defineProps({
}, },
}); });
</script> </script>
<style lang="css"> <style lang="css" scoped>
.loading-div { .loading-div {
position: v-bind(position); position: v-bind(position);
display: flex; display: flex;

2
src/components/t-pool.vue
View File

@@ -135,7 +135,7 @@ async function toPost(pool: GachaCard) {
} }
</script> </script>
<style lang="css"> <style lang="css" scoped>
.pool-card { .pool-card {
font-family: "Genshin", serif; font-family: "Genshin", serif;
width: 100%; width: 100%;

2
src/components/t-position.vue
View File

@@ -123,7 +123,7 @@ async function toPost(card: PositionCard) {
} }
</script> </script>
<style lang="css"> <style lang="css" scoped>
.position-card { .position-card {
margin-top: 10px; margin-top: 10px;
font-family: "Genshin", serif; font-family: "Genshin", serif;

2
src/components/t-sidebar.vue
View File

@@ -76,7 +76,7 @@ function submenu(value: string) {
} }
</script> </script>
<style lang="css"> <style lang="css" scoped>
.sideList { .sideList {
font-family: "Genshin-Light", serif; font-family: "Genshin-Light", serif;
} }

2
src/pages/Achievements.vue
View File

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

2
src/pages/Config.vue
View File

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

136
src/pages/News.vue
View File

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