From fecad43dec2130aa8b5c346a6a5b26cb7004dc8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Mon, 10 Mar 2025 17:11:51 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=E6=8A=95=E7=A5=A8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9B=B8=E5=AF=B9=E8=BF=9B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewPost/tp-vote.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/viewPost/tp-vote.vue b/src/components/viewPost/tp-vote.vue
index acd6501e..6eea5a3f 100644
--- a/src/components/viewPost/tp-vote.vue
+++ b/src/components/viewPost/tp-vote.vue
@@ -21,7 +21,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, shallowRef } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 import ApiHubReq from "@/web/request/apiHubReq.js";
 
@@ -32,6 +32,7 @@ type TpVoteInfo = { title: string; count: number; is_over: boolean; data: Array<
 
 const props = defineProps<TpVoteProps>();
 const votes = shallowRef<TpVoteInfo>();
+const maxCnt = ref<number>(0);
 
 onMounted(async () => {
   const vote = props.data.insert.vote;
@@ -47,10 +48,12 @@ onMounted(async () => {
       percent: ((voteResult.option_stats[index] ?? 0) / voteResult.user_cnt) * 100,
     })),
   };
+  maxCnt.value = Math.max(...votes.value.data.map((item) => item.count));
 });
 
 function getWidth(item: TpVoteData): string {
-  return `width: ${item.percent}%;`;
+  if (maxCnt.value === 0) return "width: 0%;";
+  return `width: ${(item.count / maxCnt.value) * 100}%;`;
 }
 </script>
 <style lang="css" scoped>
@@ -123,6 +126,6 @@ function getWidth(item: TpVoteData): string {
 .tp-vote-val {
   height: 100%;
   border-radius: 5px;
-  background: linear-gradient(to right, #6cf, #f09199);
+  background: linear-gradient(to right, #6cf 0, #f09199 360px);
 }
 </style>