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 {
width: 800px;
height: 450px;
border-radius: 10px;
}
.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>
Created with Pixso.
</desc>
<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>
<defs>
<clipPath id="clip3_11">
<rect id="left" width="256.000000" height="256.000000" fill="white"/>
<rect id="left" width="256" height="256" />
</clipPath>
</defs>
</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>
Created with Pixso.
</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/>
</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;
}
.card-btn svg {
.card-btn img {
width: 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>
<style lang="css">
<style lang="css" scoped>
.loading-div {
position: v-bind(position);
display: flex;

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

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

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

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

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

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

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>