mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
💄 样式调整
This commit is contained in:
@@ -13,12 +13,12 @@ html.default {
|
||||
--app-side-content: #222222;
|
||||
|
||||
/* box container */
|
||||
--box-bg-1: #ebe7df;
|
||||
--box-bg-1: #f9f6f2;
|
||||
--box-bg-2: #f2f9f6;
|
||||
--box-bg-3: #dee4e9;
|
||||
--box-bg-4: #f5f5f5;
|
||||
|
||||
--box-bg-blue: var(--tgc-blue-2);
|
||||
--box-bg-blue: #249ffd;
|
||||
|
||||
/* box bg transparent */
|
||||
--box-bg-t-1: var(--tgc-dark-5);
|
||||
|
||||
@@ -4,10 +4,9 @@
|
||||
<template #title-append>
|
||||
<v-switch
|
||||
class="tc-switch"
|
||||
variant="outline"
|
||||
:label="switchType === 'avatar' ? '角色' : '武器'"
|
||||
@change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
|
||||
/>
|
||||
{{ switchType === "avatar" ? "角色" : "武器" }}
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="tc-top">
|
||||
@@ -170,7 +169,7 @@ function getContents(day: number): void {
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--box-text-1);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tc-btns {
|
||||
@@ -182,8 +181,8 @@ function getContents(day: number): void {
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
place-items: center flex-start;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
place-items: center flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface THomecardProps {
|
||||
interface THomeCardProps {
|
||||
append?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<THomecardProps>();
|
||||
const props = defineProps<THomeCardProps>();
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.thc-container {
|
||||
@@ -41,14 +41,17 @@ const props = defineProps<THomecardProps>();
|
||||
background: var(--box-bg-blue);
|
||||
box-shadow: 0 0 5px var(--common-shadow-2);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.thc-title {
|
||||
left: 10px;
|
||||
color: var(--tgc-white-4);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.thc-append {
|
||||
right: 10px;
|
||||
color: var(--tgc-white-1);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,12 +2,8 @@
|
||||
<THomecard :append="hasNew">
|
||||
<template #title>限时祈愿</template>
|
||||
<template #title-append>
|
||||
<v-switch
|
||||
class="pool-switch"
|
||||
variant="outline"
|
||||
:label="showNew ? '查看当前祈愿' : '查看后续祈愿'"
|
||||
@change="switchPool"
|
||||
/>
|
||||
<v-switch class="pool-switch" @change="switchPool" />
|
||||
{{ showNew ? "查看当前祈愿" : "查看后续祈愿" }}
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="pool-grid">
|
||||
@@ -240,18 +236,12 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.pool-title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.pool-switch {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.pool-grid {
|
||||
|
||||
@@ -3,12 +3,7 @@
|
||||
<template #title>近期活动</template>
|
||||
<template #default>
|
||||
<div class="position-grid">
|
||||
<v-card
|
||||
v-for="card in positionCards"
|
||||
:key="card.postId"
|
||||
class="position-card"
|
||||
variant="outlined"
|
||||
>
|
||||
<v-card v-for="card in positionCards" :key="card.postId" rounded class="position-card">
|
||||
<v-list class="position-list">
|
||||
<v-list-item :title="card.title" :subtitle="card.abstract">
|
||||
<template #prepend>
|
||||
@@ -114,8 +109,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.position-card {
|
||||
border: 1px solid var(--common-shadow-2);
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: var(--box-bg-1);
|
||||
}
|
||||
|
||||
|
||||
@@ -199,6 +199,7 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 36 / 13;
|
||||
background: var(--common-shadow-2);
|
||||
}
|
||||
|
||||
.tpc-cover img {
|
||||
|
||||
Reference in New Issue
Block a user