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

💄 优化抽奖页详情页面样式

Browse Source
This commit is contained in:
BTMuli
2023-05-26 15:38:20 +08:00
parent 4769731d52
commit b8a1f996f0
1 changed files with 80 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/views/t-lottery.vue
View File

@@ -1,82 +1,73 @@
<template> <template>
<TSwitchTheme /> <TSwitchTheme />
<TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" /> <TOLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
<div v-else> <div v-if="!loading" class="lottery-box">
<div class="lottery-div"> <div class="lottery-title">
<div class="lottery-title"> 抽奖详情
抽奖详情 <span style="color:#E06C63">{{ timeStatus === "已开奖" ? timeStatus : `待开奖 ${timeStatus}` }}</span>
<span style="color:#E06C63">{{ timeStatus === "已开奖" ? timeStatus : `待开奖 ${timeStatus}` }}</span> </div>
</div> <div class="lottery-list">
<div class="lottery-list"> <v-list-item>
<v-list-item>
<template #prepend>
<v-avatar>
<v-img :src="lotteryCard.creator.avatar_url" />
</v-avatar>
</template>
{{ lotteryCard.creator.nickname }}
<v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
</v-list-item>
<div class="reward-title">
参与方式：{{ participationMethod }}
</div>
<div class="reward-title">
抽奖 ID：{{ lotteryCard.id }}
</div>
<div class="reward-title">
奖品详情
<div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="reward-subtitle">
{{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}份
</div>
</div>
</div>
<v-btn class="lottery-back" @click="backPost()">
<img src="../assets/icons/circle-cancel.svg" alt="back">
<span>返回</span>
</v-btn>
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="showJson = true">
<template #prepend> <template #prepend>
<img src="../assets/icons/arrow-right.svg" alt="right"> <v-avatar>
<v-img :src="lotteryCard.creator.avatar_url" />
</v-avatar>
</template> </template>
JSON <template #append>
</v-btn> <v-btn variant="outlined" @click="backPost()">
</div> 返回
<div v-show="showJson" class="lottery-json"> </v-btn>
<JsonViewer :value="jsonData" copyable boxed /> </template>
</div> {{ lotteryCard.creator.nickname }}
<div v-if="timeStatus === '已开奖'" class="lottery-div"> <v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
<div class="lottery-title"> </v-list-item>
中奖详情 <div class="reward-title">
参与方式：{{ participationMethod }}
</div> </div>
<div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="lottery-list"> <div class="reward-title">
<div class="reward-title"> 抽奖 ID：{{ lotteryCard.id }}
{{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}/{{ reward.winnerNumber }} </div>
<div class="reward-title">
奖品详情
<div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="reward-subtitle">
{{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}份
</div> </div>
<div class="lottery-grid"> </div>
<div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list"> </div>
<div class="lottery-user-avatar"> </div>
<img :src="user.avatar_url" alt="avatar"> <div v-if="timeStatus === '已开奖'" class="lottery-box">
</div> <div class="lottery-title">
<div class="lottery-user-nickname"> 中奖详情
{{ user.nickname }} </div>
</div> <div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="lottery-list">
<div class="reward-title">
{{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}/{{ reward.winnerNumber }}
</div>
<div class="lottery-grid">
<div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
<div class="lottery-user-avatar">
<img :src="user.avatar_url" alt="avatar">
</div>
<div class="lottery-user-nickname">
{{ user.nickname }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="lottery-json">
<JsonViewer :value="jsonData" copyable boxed />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { ref, onMounted, reactive, onUpdated } from "vue"; import { onMounted, onUpdated, reactive, ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import JsonViewer from "vue-json-viewer"; import JsonViewer from "vue-json-viewer";
import TLoading from "../components/main/t-loading.vue"; import TOLoading from "../components/overlay/to-loading.vue";
import TSwitchTheme from "../components/main/t-switchTheme.vue"; import TSwitchTheme from "../components/main/t-switchTheme.vue";
// tauri // tauri
import { appWindow } from "@tauri-apps/api/window"; import { appWindow } from "@tauri-apps/api/window";
// store
import { useAppStore } from "../store/modules/app";
// plugins // plugins
import MysOper from "../plugins/Mys"; import MysOper from "../plugins/Mys";
// interface // interface
@@ -87,9 +78,6 @@ const loading = ref(true as boolean);
const loadingTitle = ref("正在加载"); const loadingTitle = ref("正在加载");
const loadingEmpty = ref(false as boolean); const loadingEmpty = ref(false as boolean);
// store
const appStore = useAppStore();
// 定时器 // 定时器
const lotteryTimer = ref(null as any); const lotteryTimer = ref(null as any);
// 参与方式 // 参与方式
@@ -113,7 +101,6 @@ function flushTimeStatus () {
// 数据 // 数据
const lotteryId = useRoute().params.lottery_id as string; const lotteryId = useRoute().params.lottery_id as string;
const lotteryCard = ref({} as LotteryCard); const lotteryCard = ref({} as LotteryCard);
const showJson = ref(false as boolean);
let jsonData = reactive({} as LotteryData); let jsonData = reactive({} as LotteryData);
const timeStatus = ref("未知" as string); const timeStatus = ref("未知" as string);
@@ -172,64 +159,42 @@ onUpdated(() => {
</script> </script>
<style lang="css"> <style lang="css">
.lottery-div { .lottery-box {
background: var(--content-bg-2);
border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
background: rgb(255 255 255 / 10%);
box-shadow: 0 0 10px rgb(0 0 0 / 40%);
border-radius: 25px 5px 5px;
} }
.lottery-title { .lottery-title {
font-family: Genshin, serif; font-family: Genshin, serif;
font-size: 20px; font-size: 20px;
height: 40px;
color: var(--content-text-3); color: var(--content-text-3);
margin-left: 40px; margin-left: 40px;
} }
.reward-title { .lottery-list {
font-family: Genshin-Light, serif; background: rgb(0 0 0 / 40%);
font-size: 16px; box-shadow: 0 0 10px rgb(255 255 255 / 10%);
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
color: #faf7e8; color: #faf7e8;
font-family: Genshin-Light, serif;
}
.reward-title {
font-size: 16px;
margin: 10px; margin: 10px;
} }
.reward-subtitle { .reward-subtitle {
font-family: Genshin-Light, serif;
font-size: 16px; font-size: 16px;
color: #faf7e8;
opacity: 0.5; opacity: 0.5;
} }
.lottery-list {
background: var(--content-bg-1);
border-radius: 10px;
margin: 10px;
padding: 10px;
color: #faf7e8;
font-family: Genshin-Light, serif;
}
.lottery-back {
margin: 5px;
height: 30px;
border-radius: 40px;
font-family: Genshin, serif;
background: #4A5366;
}
.lottery-back img {
position: absolute;
left: 5px;
width: 25px;
height: 25px;
}
.lottery-back span {
color: #faf7e8;
font-size: 16px;
margin-left: 10px;
}
.lottery-grid { .lottery-grid {
border-radius: 10px; border-radius: 10px;
display: grid; display: grid;
@@ -270,12 +235,22 @@ onUpdated(() => {
} }
.lottery-json { .lottery-json {
padding: 20px; margin-bottom: 10px;
border-radius: 20px; background: rgb(255 255 255 / 10%);
box-shadow: 0 0 10px rgb(0 0 0 / 40%);
border-radius: 25px 5px;
font-family: Consolas, serif; font-family: Consolas, serif;
color: #faf7e8;
} }
.jv-container { .jv-container {
background: var(--content-bg-2) !important; background: rgb(0 0 0 / 60%) !important;
border-radius: 25px 5px !important;
box-shadow: 0 0 10px rgb(0 0 0 / 40%) !important;
}
.jv-key,
.jv-array {
color: #f0c674 !important;
} }
</style> </style>