From 9053349e7c41800800b6484fce25b146ea2eac93 Mon Sep 17 00:00:00 2001
From: Ethereal <3432649580@qq.com>
Date: Tue, 22 Jul 2025 13:49:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A5=96=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/choujiang/lottery/PrizePanel.vue | 171 +++++++++++++++--------------
 1 file changed, 88 insertions(+), 83 deletions(-)

diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue
index e0df76c..ccc7052 100644
--- a/src/views/choujiang/lottery/PrizePanel.vue
+++ b/src/views/choujiang/lottery/PrizePanel.vue
@@ -36,9 +36,6 @@
                   <span class="progress-bar-text">
                     {{ getLeftCount(prize) }}/{{ prize.count }}
                   </span>
-
-
-                  
                 </div>
               </div>
             </div>
@@ -55,16 +52,16 @@
         <div></div>
         <div></div>
         <div></div>
-        <div class="prize-panel-footer">
-          <div class="arrow-up" @click="openWinnerList"></div>
-          <button
-            ref="winnerBtnRef"
-            class="winner-btn"
-            @click="toggleWinnerList"
-          >
-            获奖名单
-          </button>
-              </div>
+      </div>
+      <div class="prize-panel-footer">
+        <div class="arrow-up" @click="openWinnerList"></div>
+        <button
+          ref="winnerBtnRef"
+          class="winner-btn"
+          @click="toggleWinnerList"
+        >
+          获奖名单
+        </button>
       </div>
     </div>
   </div>
@@ -111,62 +108,61 @@
                       prizes[lastRevealedIdx].count
                     }}
                   </span>
-                </div>  <div class="prize-panel-footer">
-          <div class="arrow-down" @click="toggleWinnerList"></div>
-                <div
-            v-if="showWinnerList"
-            class="winner-modal-mask"
-            @click="closeWinnerList"
-          >
-            <div
-              class="winner-modal"
-              :style="{
-                position: 'absolute',
-                left: modalLeft + 'px',
-                top: modalTop + 'px',
-              }"
-              @click.stop
-            >
-              <div class="winner-modal-title">
-                <span>Homily ID</span><span>奖项</span>
-              </div>
-              <div
-                style="
-                  background: linear-gradient(
-                    to left,
-                    rgb(232 76 10),
-                    rgb(195 6 6),
-                    rgb(240 90 9)
-                  );
-                  height: 1px;
-                "
-              ></div>
-              <ul class="winner-list">
-                <li
-                  v-for="(user, idx) in fakeWinners"
-                  :key="idx"
-                  style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                  "
-                >
-                  <!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
-                  <span>{{ user.jwcode }}</span>
-                  <span>{{ user.prizeName }}</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+                </div>
+                <div class="prize-panel-footer">
+                  <div class="arrow-down" @click="toggleWinnerList"></div>
+                  <div
+                    v-if="showWinnerList"
+                    class="winner-modal-mask"
+                    @click="closeWinnerList"
+                  >
+                    <div
+                      class="winner-modal"
+                      :style="{
+                        position: 'absolute',
+                        left: modalLeft + 'px',
+                        top: modalTop + 'px',
+                      }"
+                      @click.stop
+                    >
+                      <div class="winner-modal-title">
+                        <span>Homily ID</span><span>奖项</span>
+                      </div>
+                      <div
+                        style="
+                          background: linear-gradient(
+                            to left,
+                            rgb(232 76 10),
+                            rgb(195 6 6),
+                            rgb(240 90 9)
+                          );
+                          height: 1px;
+                        "
+                      ></div>
+                      <ul class="winner-list">
+                        <li
+                          v-for="(user, idx) in fakeWinners"
+                          :key="idx"
+                          style="
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                          "
+                        >
+                          <!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
+                          <span>{{ user.jwcode }}</span>
+                          <span>{{ user.prizeName }}</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
-  
   </div>
 </template>
 
@@ -175,7 +171,6 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
 import { useLotteryStore } from "../../../store/lottery";
 import { useDataManager } from "../lottery/dataManager";
 
-
 const props = defineProps({
   prizes: Array,
 });
@@ -242,7 +237,10 @@ function canRevealPrize(idx) {
 // 卡片点击事件
 function handleReveal(idx) {
   // 检查是否可以揭秘这个奖品
-  if (idx !== nextRevealIdx.value ) {alert("请按顺序揭秘奖品!"); return;}
+  if (idx !== nextRevealIdx.value) {
+    alert("请按顺序揭秘奖品!");
+    return;
+  }
   if (idx === nextRevealIdx.value && canRevealPrize(idx)) {
     revealedCount.value++;
     lastRevealedIdx.value = idx; // 记录最新揭秘的索引
@@ -279,7 +277,9 @@ console.log("fakeWinners", fakeWinners.value);
 import { getGetPrizeUserListApi } from "../../../api/API";
 const updateWinners = async () => {
   try {
-    const response = await getGetPrizeUserListApi({})
+    const response = await getGetPrizeUserListApi({
+      
+    });
     console.log("updatePrizeList response", response);
     fakeWinners.value = response.data.list;
     console.log("updateWinners fakeWinners", fakeWinners.value);
@@ -288,7 +288,6 @@ const updateWinners = async () => {
   }
 };
 async function openWinnerList() {
-
   // showWinnerList.value = true;
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
@@ -361,39 +360,35 @@ function getProgressPercent(prize) {
 // onMounted(() => {
 //   updateWinners();
 // });
-
 </script>
 
 <style scoped>
 .prize-panel-list {
-  position: absolute;
-  top: 20px;
-  left: 20px;
+  position: relative;
   background: none;
   z-index: 10;
-  min-width: 320px;
+  min-width: 300px;
   max-width: 342px;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 18px;
-  height: 400px;
-   overflow-x: hidden !important;
+  height: 700px;
+  overflow-x: hidden !important;
   overflow-y: auto;
   padding-right: 10px;
   scrollbar-width: thin;
   scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */
 }
 .prize-panel-list1 {
-  position: absolute;
-  top: 20px;
-  left: 20px;
+  position: relative;
   background: none;
   z-index: 10;
   min-width: 320px;
   max-width: 342px;
   text-align: left;
-    display: flex;}
+  display: flex;
+}
 
 .prize-panel-list::-webkit-scrollbar {
   width: 6px;
@@ -503,10 +498,20 @@ function getProgressPercent(prize) {
   font-size: 20px;
   font-weight: bold;
 }
+.prize-panel-root {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: none;
+  z-index: 10;
+  min-width: 320px;
+  max-width: 342px;
+  display: flex;
+  flex-direction: column;
+}
+
 .prize-panel-footer {
-  position: fixed;
-     right: 750px;
-    bottom: 435px;
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -514,6 +519,7 @@ function getProgressPercent(prize) {
   z-index: 20;
   padding: 10px 0;
   border-radius: 0 0 6px 6px;
+  margin-top: 10px;
 }
 .arrow-up {
   position: relative;
@@ -537,7 +543,6 @@ function getProgressPercent(prize) {
   background-image: url("../../../assets/展开.png");
   background-size: cover;
   background-position: center;
-  
 }
 .winner-btn {
   background: rgba(255, 210, 131, 0.8);
@@ -553,7 +558,7 @@ function getProgressPercent(prize) {
 .winner-modal-mask {
   position: fixed;
   top: 142px;
-  left:-4px;
+  left: -4px;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.01);