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

💄 调整样式

Browse Source
This commit is contained in:
目棃
2025-03-17 10:10:06 +08:00
parent 4ef3313eb1
commit a3e42b63e6
32 changed files with 233 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/index.css → src/assets/index.scss
View File

36
src/assets/styles/github.styles.scss Normal file
View File

@@ -0,0 +1,36 @@
/**
* @file styles/github.styles.scss
* @description GitHub styles
* @since Beta v0.7.2
*/
/* Card，传入theme参数 */
@mixin github-card($theme: 'default') {
@if $theme == 'default' {
background: #ffffff;
border: 1px solid #d1d9e0;
box-shadow: rgba(31, 35, 40, 0.06) 0 1px 1px 0, rgba(31, 35, 40, 0.06) 0 1px 3px 0;
} @else {
background: #0d1117;
border: 1px solid #3d444d;
box-shadow: rgba(1, 4, 9, 0.6) 0 1px 1px 0, rgba(1, 4, 9, 0.6) 0 1px 3px 0;
}
}
/* Btn，传入theme参数 */
@mixin github-btn($theme: 'default') {
@if $theme == 'default' {
background: #f6f8fa;
border: 1px solid #d1d9e0;
} @else {
background: #212830;
border: 1px solid #3d444d;
}
}
/* tags，深色主题 */
@mixin github-tag-dark-gen($color: #548af7) {
background: rgba($color, .18);
border: 1px solid rgba($color, .3);
color: $color;
}

4
src/assets/themes/dark.css
View File

@@ -1,7 +1,7 @@
/**
* @file assets/themes/dark.css
* @description 主题样式文件-深色主题
* @since Beta v0.4.5
* @since Beta v0.7.2
*/
/* dark mode */
@@ -33,8 +33,6 @@ html.dark {
/* button */
--btn-text: var(--tgc-yellow-1);
--btn-bg-1: var(--tgc-dark-5);
--btn-text-1: var(--tgc-yellow-1);
/* box-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);

4
src/assets/themes/default.css
View File

@@ -1,7 +1,7 @@
/**
* @file assets/themes/default.css
* @description 主题样式文件-默认（浅色）主题
* @since Beta v0.4.5
* @since Beta v0.7.2
*/
/* default(light) theme */
@@ -33,8 +33,6 @@ html.default {
/* button */
--btn-text: var(--tgc-yellow-2); /* with tgc-btn-1 */
--btn-bg-1: var(--tgc-yellow-1);
--btn-text-1: var(--tgc-blue-1);
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);

26
src/components/app/t-gameNav.vue
View File

@@ -127,30 +127,34 @@ async function toBBS(link: URL): Promise<void> {
showSnackbar.warn(`不支持的链接：${link.href}`);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.tgn-container {
position: relative;
display: flex;
padding: 5px;
gap: 10px;
padding: 8px;
gap: 8px;
}
.tgn-nav {
@include github-card();
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 5px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background: var(--common-shadow-t-4);
box-shadow: 0 0 5px var(--common-shadow-4);
padding: 4px;
border-radius: 4px;
color: var(--tgc-white-1);
cursor: pointer;
}
.dark .tgn-nav {
@include github-card("dark");
}
.tgn-nav img {
width: 25px;
height: 25px;
width: 28px;
height: 28px;
}
.tgn-nav span {

21
src/components/app/t-postcard.vue
View File

@@ -244,8 +244,11 @@ function onUserClick(): void {
emits("onUserClick", card.value.user);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.tpc-card {
@include github-card();
position: relative;
display: flex;
overflow: hidden;
@@ -254,15 +257,12 @@ function onUserClick(): void {
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-1);
box-shadow: 2px 2px 4px var(--common-shadow-2);
row-gap: 8px;
}
.dark .tpc-card {
box-shadow: unset;
@include github-card("dark");
}
.tpc-top {
@@ -334,31 +334,28 @@ function onUserClick(): void {
}
.tpc-tag {
@include github-tag-dark-gen(#e06c63);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
color: var(--box-text-5);
cursor: pointer;
gap: 4px;
&:hover {
color: var(--box-text-3);
@include github-tag-dark-gen(#00aeec);
}
}
.tpc-reason {
@include github-tag-dark-gen(#d19a66);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
color: var(--tgc-od-orange);
gap: 4px;
}

59
src/components/pageAnno/ta-card.vue
View File

@@ -1,13 +1,13 @@
<template>
<div :id="`anno_card_${props.modelValue.id}`" class="anno-card">
<div class="anno-cover" :title="props.modelValue.title" @click="createAnno">
<div :title="props.modelValue.title" class="anno-cover" @click="createAnno">
<TMiImg
v-if="props.modelValue.banner !== ''"
:ori="true"
:src="props.modelValue.banner"
alt="cover"
:ori="true"
v-if="props.modelValue.banner !== ''"
/>
<img alt="cover" src="/source/UI/defaultCover.webp" v-else />
<img v-else alt="cover" src="/source/UI/defaultCover.webp" />
<div class="anno-info">
<div class="anno-time">
<v-icon>mdi-clock-time-four-outline</v-icon>
@@ -15,10 +15,10 @@
</div>
</div>
</div>
<div class="anno-title" :title="props.modelValue.title" @click="shareAnno">
<div :title="props.modelValue.title" class="anno-title" @click="shareAnno">
{{ parseTitle(props.modelValue.subtitle) }}
</div>
<div class="anno-label" :title="`标签：${props.modelValue.tagLabel}`">
<div :title="`标签：${props.modelValue.tagLabel}`" class="anno-label">
<img :src="props.modelValue.tagIcon" alt="tag" />
<span>{{ props.modelValue.tagLabel }}</span>
</div>
@@ -29,11 +29,12 @@
import TMiImg from "@comp/app/t-mi-img.vue";
import showSnackbar from "@comp/func/snackbar.js";
import type { AnnoCard } from "@/pages/common/PageAnno.vue";
import TGLogger from "@/utils/TGLogger.js";
import { generateShareImg } from "@/utils/TGShare.js";
import { createTGWindow } from "@/utils/TGWindow.js";
type TAnnoCardProps = { region: string; modelValue: TGApp.App.Announcement.ListCard; lang: string };
type TAnnoCardProps = { region: string; modelValue: AnnoCard; lang: string };
const props = defineProps<TAnnoCardProps>();
function parseTitle(title: string): string {
@@ -58,14 +59,20 @@ async function shareAnno(): Promise<void> {
await generateShareImg(fileName, element, 2.5);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.anno-card {
@include github-card();
position: relative;
overflow: hidden;
width: 100%;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
box-shadow: 2px 2px 5px var(--common-shadow-2);
border-radius: 6px;
box-sizing: border-box;
}
.dark .anno-card {
@include github-card("dark");
}
.anno-cover {
@@ -89,13 +96,15 @@ async function shareAnno(): Promise<void> {
.anno-title {
position: relative;
overflow: hidden;
width: 100%;
padding: 5px;
max-width: 100%;
width: fit-content;
padding: 4px;
cursor: pointer;
font-size: 18px;
text-align: right;
margin-left: auto;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.anno-info {
@@ -116,9 +125,9 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 5px;
margin: 4px;
color: var(--tgc-white-1);
gap: 5px;
gap: 4px;
}
.anno-label {
@@ -128,19 +137,19 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px;
padding: 4px;
background-color: var(--tgc-od-white);
border-bottom-left-radius: 5px;
border-bottom-left-radius: 6px;
box-shadow: 0 0 10px var(--tgc-dark-1);
color: var(--tgc-white-1);
opacity: 0.8;
text-shadow: 0 0 5px var(--tgc-dark-1);
text-shadow: 0 0 4px var(--tgc-dark-1);
}
.anno-label img {
width: 20px;
height: 20px;
margin-right: 5px;
margin-right: 4px;
}
.anno-cover img:hover {
@@ -155,14 +164,14 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
padding: 0 4px;
background: var(--tgc-od-orange);
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 0 10px var(--tgc-dark-1);
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
box-shadow: 0 0 8px var(--tgc-dark-1);
color: var(--tgc-white-1);
font-size: 12px;
opacity: 0.8;
text-shadow: 0 0 5px var(--tgc-dark-1);
text-shadow: 0 0 4px var(--tgc-dark-1);
}
</style>

4
src/components/pageCollect/to-collectPost.vue
View File

@@ -133,8 +133,8 @@ async function freshData(): Promise<void> {
}
.tocp-btn {
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}

12
src/components/pageConfig/tco-gameLogin.vue
View File

@@ -61,6 +61,11 @@ const selects: Array<ToGameLoginSelect> = [
value: 7,
icon: "/platforms/mhy/bh2.webp",
},
// {
// title: "星布谷地",
// value: 13,
// icon: "/platforms/mhy/xbgd.webp",
// },
];
// eslint-disable-next-line no-undef
@@ -245,20 +250,21 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
column-gap: 4px;
column-gap: 8px;
}
.tog-select-item {
position: relative;
width: 36px;
height: 36px;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
&.active {
border: 3px solid var(--tgc-od-orange);
border: 2px solid var(--tgc-od-orange);
cursor: default;
opacity: 1;
}
img {

19
src/components/pageHome/ph-calendar-birth.vue
View File

@@ -95,14 +95,15 @@ function parseDesc(intro: string): string {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 5px inset var(--common-shadow-1);
padding: 8px;
border-radius: 4px;
background: var(--box-bg-1);
overflow-y: auto;
row-gap: 5px;
row-gap: 4px;
}
.tcb-top-none,
@@ -136,15 +137,17 @@ function parseDesc(intro: string): string {
width: 100%;
align-items: center;
justify-content: flex-start;
padding: 5px;
border-radius: 10px;
background: var(--box-bg-1);
padding: 8px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
}
.tcb-item img {
height: 100px;
height: 80px;
border-radius: 50%;
aspect-ratio: 1;
background: var(--box-bg-3);
cursor: pointer;
}

12
src/components/pageHome/ph-comp-calendar.vue
View File

@@ -120,7 +120,7 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
margin-bottom: 8px;
font-family: var(--font-title);
font-size: 20px;
}
@@ -130,14 +130,14 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
height: 36px;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-right: 4px;
}
.tc-btn-list {
display: flex;
align-items: center;
justify-content: center;
column-gap: 5px;
column-gap: 8px;
}
.tc-btn {
@@ -162,16 +162,16 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
.tc-content {
position: relative;
display: flex;
height: 210px;
height: 208px;
align-items: center;
justify-content: space-between;
column-gap: 10px;
column-gap: 8px;
}
.calendar-grid {
display: grid;
height: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(8, 100px);
place-items: flex-start flex-start;
}

38
src/components/pageHome/ph-comp-card.vue
View File

@@ -1,51 +1,61 @@
<template>
<div class="thc-container">
<div class="thc-title">
<slot name="title"></slot>
<slot name="title" />
</div>
<div v-if="append" class="thc-append">
<slot name="title-append"></slot>
<slot name="title-append" />
</div>
<div class="thc-box">
<slot name="default"></slot>
<slot name="default" />
</div>
</div>
</template>
<script lang="ts" setup>
defineProps<{ append?: boolean }>();
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.thc-container {
@include github-card();
position: relative;
min-height: 100px;
padding: 20px 10px 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-top: 30px;
box-shadow: 2px 2px 5px var(--common-shadow-1);
padding: 24px 8px 8px;
box-sizing: border-box;
border-radius: 4px;
margin-top: 24px;
}
.dark .thc-container {
@include github-card("dark");
}
.thc-title,
.thc-append {
position: absolute;
top: -20px;
top: -16px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 5px;
border-radius: 4px;
background: var(--tgc-od-blue);
font-family: var(--font-title);
border: 1px solid var(--tgc-od-white);
box-sizing: border-box;
}
.thc-title {
left: 10px;
color: var(--tgc-white-4);
left: 8px;
color: var(--tgc-white-1);
font-size: 20px;
}
.thc-append {
right: 10px;
right: 8px;
color: var(--tgc-white-1);
font-size: 16px;
}

8
src/components/pageHome/ph-comp-position.vue
View File

@@ -32,12 +32,10 @@ onMounted(async () => {
emits("success");
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
.position-grid {
display: grid;
margin-top: 10px;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 0.5fr));
grid-gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(calc(400px), 0.5fr));
}
</style>

2
src/components/pageHome/ph-pool-card.vue
View File

@@ -165,7 +165,7 @@ async function toPool(): Promise<void> {
width: 100%;
border-radius: 4px;
aspect-ratio: 69 / 32;
box-shadow: 2px 2px 4px var(--common-shadow-2);
box-shadow: 0 2px 4px var(--common-shadow-2);
}
.ph-pool-cover {

11
src/components/pageHome/ph-position-card.vue
View File

@@ -92,7 +92,9 @@ onUnmounted(() => {
if (timer !== null) clearInterval(timer);
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.ph-position-card {
position: relative;
display: flex;
@@ -101,13 +103,8 @@ onUnmounted(() => {
justify-content: flex-start;
border-radius: 4px;
background: var(--box-bg-1);
box-shadow: 0 0 5px var(--common-shadow-2);
color: var(--box-text-1);
}
.dark .ph-position-card {
border: 1px solid var(--common-shadow-1);
box-shadow: unset;
}
.top {
@@ -118,7 +115,7 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
padding: 8px;
border-bottom: 2px solid var(--common-shadow-2);
border-bottom: 1px solid var(--common-shadow-2);
.main {
position: relative;

4
src/components/userGacha/ugo-uid.vue
View File

@@ -319,8 +319,8 @@ async function handleExport(): Promise<void> {
.ugo-item-btn {
height: 40px;
border: 1px solid var(--common-shadow-2);
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
&.active {

4
src/components/viewPost/vp-overlay-collect.vue
View File

@@ -179,8 +179,8 @@ async function onSubmit(): Promise<void> {
}
.topc-btn {
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}

4
src/components/viewPost/vp-reply-item.vue
View File

@@ -252,7 +252,11 @@ async function handleUser(): Promise<void> {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
border-top: 1px inset var(--common-shadow-1);
border-right: 1px inset var(--common-shadow-1);
background-color: v-bind("props.modelValue.user.reply_bubble?.bg_color");
border-top-right-radius: 4px;
opacity: 0.5;
}

4
src/main.ts
View File

@@ -1,7 +1,7 @@
/**
* @file main.ts
* @description 应用入口
* @since Beta v0.4.0
* @since Beta v0.7.2
*/
import { createApp } from "vue";
@@ -14,6 +14,6 @@ import "https://static.geetest.com/static/js/gt.0.4.9.js";
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import "./assets/index.css";
import "./assets/index.scss";
createApp(App).use(router).use(store).use(createVuetify()).mount("#app");

1
src/pages/User/Abyss.vue
View File

@@ -243,6 +243,7 @@ async function refreshAbyss(): Promise<void> {
uidCur.value = account.value.gameUid;
await loadAbyss();
await showLoading.end();
showSnackbar.success(`已加载${account.value.gameUid}的${localAbyss.value.length}条深渊数据`);
}
async function shareAbyss(): Promise<void> {

20
src/pages/User/Characters.vue
View File

@@ -4,36 +4,33 @@
<div class="uc-top-title">
<img alt="icon" src="/source/UI/userAvatar.webp" />
<span>我的角色</span>
<v-btn variant="outlined" @click="showSelect = true">筛选角色</v-btn>
<v-btn variant="outlined" @click="resetSelect = true">重置筛选</v-btn>
<v-btn class="uc-top-btn" @click="showSelect = true">筛选角色</v-btn>
<v-btn class="uc-top-btn" @click="resetSelect = true">重置筛选</v-btn>
</div>
</template>
<template #append>
<div class="uc-top-btns">
<v-btn
class="uc-top-btn"
prepend-icon="mdi-refresh"
@click="refresh()"
:rounded="true"
variant="outlined"
v-model:loading="loadData"
>
刷新
</v-btn>
<v-btn
class="uc-top-btn"
prepend-icon="mdi-share"
:disabled="enableShare"
@click="share()"
:rounded="true"
variant="outlined"
v-model:loading="loadShare"
>
分享
</v-btn>
<v-btn
class="uc-top-btn"
prepend-icon="mdi-delete"
@click="deleteUid()"
:rounded="true"
variant="outlined"
:disabled="uidCur === undefined"
v-model:loading="loadDel"
>
@@ -465,6 +462,13 @@ function handleSwitch(next: boolean): void {
column-gap: 10px;
}
.uc-top-btn {
border-radius: 5px;
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-text);
}
.uc-grid {
display: grid;
grid-gap: 15px;

2
src/pages/User/Record.vue
View File

@@ -152,6 +152,7 @@ async function refreshRecord(): Promise<void> {
await loadUid();
await loadRecord();
await showLoading.end();
showSnackbar.success(`成功刷新${account.value.gameUid}的战绩数据`);
}
async function shareRecord(): Promise<void> {
@@ -210,6 +211,7 @@ async function deleteRecord(): Promise<void> {
.ur-top-btns {
display: flex;
margin-right: 15px;
gap: 15px;
}

4
src/pages/common/PageAchi.vue
View File

@@ -290,8 +290,8 @@ onUnmounted(async () => {
height: 40px;
border: 1px solid var(--common-shadow-2);
margin-left: 15px;
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}

16
src/pages/common/PageAnno.vue
View File

@@ -67,7 +67,7 @@ import Hk4eApi, { type AnnoLang, AnnoServer } from "@/web/request/hk4eReq.js";
type AnnoSelect = { text: string; value: string };
type AnnoKey = keyof typeof AnnoType;
type AnnoCard = {
export type AnnoCard = {
id: number;
title: string;
subtitle: string;
@@ -280,21 +280,17 @@ async function switchNews(): Promise<void> {
.anno-switch-btn {
height: 40px;
background: var(--btn-bg-1);
color: var(--btn-text-1);
margin-right: 15px;
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}
.dark .anno-switch-btn {
border: 1px solid var(--common-shadow-2);
}
.anno-grid {
display: grid;
padding: 5px;
font-family: var(--font-title);
grid-auto-rows: auto;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
</style>

7
src/pages/common/PageHome.vue
View File

@@ -45,6 +45,7 @@
</div>
<div class="home-select">
<v-select
width="300px"
variant="outlined"
v-model="showItems"
:items="showItemsAll"
@@ -176,11 +177,12 @@ async function loadEnd(item: SFComp): Promise<void> {
if (loadItems.value.length === components.value.length) await showLoading.end();
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
.home-container {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
gap: 12px;
}
.home-top {
@@ -195,7 +197,6 @@ async function loadEnd(item: SFComp): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.home-tool-select {

6
src/pages/common/PostCollect.vue
View File

@@ -424,15 +424,15 @@ async function mergePosts(posts: Array<TGApp.BBS.Post.FullData>, collect: string
.pc-btn {
height: 40px;
border: 1px solid var(--common-shadow-4);
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}
.pc-posts {
display: grid;
grid-auto-rows: auto;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(4, minmax(320px, 1fr));
}
</style>

7
src/pages/common/PostForum.vue
View File

@@ -382,8 +382,8 @@ function handleUserClick(user: TGApp.BBS.Post.User): void {
.post-forum-btn {
height: 40px;
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}
@@ -393,10 +393,9 @@ function handleUserClick(user: TGApp.BBS.Post.User): void {
.posts-grid {
display: grid;
padding: 5px;
font-family: var(--font-title);
grid-auto-rows: auto;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

7
src/pages/common/PostNews.vue
View File

@@ -191,8 +191,8 @@ async function searchPost(): Promise<void> {
height: 40px;
border-radius: 3px;
margin-left: 15px;
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}
@@ -207,10 +207,9 @@ async function searchPost(): Promise<void> {
.news-grid {
display: grid;
padding: 5px;
font-family: var(--font-title);
grid-auto-rows: auto;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

7
src/pages/common/PostTopic.vue
View File

@@ -323,8 +323,8 @@ function handleUserClick(user: TGApp.BBS.Post.User): void {
.post-topic-btn {
height: 40px;
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}
@@ -334,10 +334,9 @@ function handleUserClick(user: TGApp.BBS.Post.User): void {
.post-topic-grid {
display: grid;
padding: 5px;
font-family: var(--font-title);
grid-auto-rows: auto;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

50
src/views/t-post.vue
View File

@@ -62,7 +62,7 @@
v-if="postData.collection"
@click="showOverlayC()"
>
<v-icon size="12">mdi-widgets</v-icon>
<v-icon size="10">mdi-widgets</v-icon>
<span>{{ postData.collection.collection_title }}</span>
<span>{{ postData.collection.cur }}/{{ postData.collection.total }}</span>
</div>
@@ -72,7 +72,7 @@
class="tp-post-reason"
title="推荐理由"
>
<v-icon size="12">mdi-lightbulb-on</v-icon>
<v-icon size="10">mdi-lightbulb-on</v-icon>
<span>{{ tag.text }}</span>
</div>
<div
@@ -81,7 +81,7 @@
class="tp-post-topic"
@click="toTopic(topic)"
>
<v-icon size="12">mdi-tag</v-icon>
<v-icon size="10">mdi-tag</v-icon>
<span>{{ topic.name }}</span>
</div>
</div>
@@ -354,7 +354,9 @@ function handleUser(user: TGApp.BBS.Post.User): void {
showUser.value = true;
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.tp-post-body {
width: 800px;
margin: 0 auto;
@@ -490,50 +492,48 @@ function handleUser(user: TGApp.BBS.Post.User): void {
flex-wrap: wrap;
align-items: center;
justify-content: start;
gap: 4px 8px;
column-gap: 4px;
row-gap: 8px;
}
/* collection */
.tp-post-collection {
.tp-post-collection,
.tp-post-topic,
.tp-post-reason {
height: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1px solid var(--common-shadow-2);
border-radius: 4px;
color: var(--box-text-3);
column-gap: 4px;
cursor: pointer;
column-gap: 2px;
font-family: var(--font-title);
font-size: 12px;
}
/* collection */
.tp-post-collection {
@include github-tag-dark-gen(#3572a5);
cursor: pointer;
&:hover {
color: var(--tgc-od-green);
@include github-tag-dark-gen(#98c379);
}
}
/* topic */
.tp-post-topic {
display: flex;
align-items: center;
justify-content: center;
color: var(--box-text-5);
@include github-tag-dark-gen(#e06c63);
cursor: pointer;
font-family: var(--font-title);
font-size: 12px;
&:hover {
color: var(--box-text-3);
@include github-tag-dark-gen(#00aeec);
}
}
/* reason */
.tp-post-reason {
display: flex;
align-items: center;
justify-content: center;
color: var(--tgc-od-orange);
font-family: var(--font-title);
font-size: 12px;
@include github-tag-dark-gen(#d19a66);
}
</style>

3
tsconfig.json
View File

@@ -23,7 +23,8 @@
"@Hutao/*": ["src/plugins/Hutao/*"],
"@Mys/*": ["src/plugins/Mys/*"],
"@Sqlite/*": ["src/plugins/Sqlite/*"],
"@Bili/*": ["src/plugins/Bili/*"]
"@Bili/*": ["src/plugins/Bili/*"],
"@styles/*": ["src/assets/styles/*"]
}
},
"include": [

1
vite.config.ts
View File

@@ -24,6 +24,7 @@ export default defineConfig({
"@Mys/": "/src/plugins/Mys/",
"@Sqlite/": "/src/plugins/Sqlite/",
"@Bili/": "/src/plugins/Bili/",
"@styles/": "/src/assets/styles/",
},
},
server: {