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:
BTMuli
2025-11-27 11:38:42 +08:00
parent 50a528d25b
commit 72b7dc5405
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/viewPost/tp-vote.vue
View File

@@ -1,3 +1,4 @@
<!-- 投票组件 -->
<template> <template>
<div class="tp-vote-box"> <div class="tp-vote-box">
<div class="tp-vote-info"> <div class="tp-vote-info">
@@ -22,6 +23,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ApiHubReq from "@req/apiHubReq.js"; import ApiHubReq from "@req/apiHubReq.js";
import useAppStore from "@store/app.js";
import { storeToRefs } from "pinia";
import { onMounted, ref, shallowRef } from "vue"; import { onMounted, ref, shallowRef } from "vue";
type TpVote = { insert: { vote: { id: string; uid: string } } }; type TpVote = { insert: { vote: { id: string; uid: string } } };
@@ -33,6 +36,8 @@ const props = defineProps<TpVoteProps>();
const votes = shallowRef<TpVoteInfo>(); const votes = shallowRef<TpVoteInfo>();
const maxCnt = ref<number>(0); const maxCnt = ref<number>(0);
const { postViewWide } = storeToRefs(useAppStore());
onMounted(async () => { onMounted(async () => {
const vote = props.data.insert.vote; const vote = props.data.insert.vote;
const voteInfo = await ApiHubReq.vote.info(vote.id, vote.uid); const voteInfo = await ApiHubReq.vote.info(vote.id, vote.uid);
@@ -69,6 +74,7 @@ function getWidth(item: TpVoteData): string {
.tp-vote-info { .tp-vote-info {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@@ -81,12 +87,13 @@ function getWidth(item: TpVoteData): string {
.tp-vote-list { .tp-vote-list {
display: grid; display: grid;
gap: 12px 16px; gap: 12px 16px;
grid-template-columns: repeat(2, 1fr); grid-template-columns: v-bind("postViewWide ? '1fr 1fr' : '1fr'");
} }
.tp-vote-item { .tp-vote-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end;
gap: 4px; gap: 4px;
} }
@@ -94,6 +101,7 @@ function getWidth(item: TpVoteData): string {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
column-gap: 4px;
.title { .title {
font-size: 16px; font-size: 16px;