修改奖品列表逻辑

src/views/choujiang/lottery/PrizePanel.vue

@@ -36,9 +36,6 @@
                   <span class="progress-bar-text">
                     {{ getLeftCount(prize) }}/{{ prize.count }}
                   </span>
-
-
-                  
                 </div>
               </div>
             </div>
@@ -55,6 +52,7 @@
         <div></div>
         <div></div>
         <div></div>
+      </div>
       <div class="prize-panel-footer">
         <div class="arrow-up" @click="openWinnerList"></div>
         <button
@@ -67,7 +65,6 @@
       </div>
     </div>
   </div>
-  </div>
 
   <div v-else>
     <div class="prize-panel-root">
@@ -111,7 +108,8 @@
                       prizes[lastRevealedIdx].count
                     }}
                   </span>
-                </div>  <div class="prize-panel-footer">
+                </div>
+                <div class="prize-panel-footer">
                   <div class="arrow-down" @click="toggleWinnerList"></div>
                   <div
                     v-if="showWinnerList"
@@ -163,10 +161,8 @@
             </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,23 +360,20 @@ 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;
+  height: 700px;
   overflow-x: hidden !important;
   overflow-y: auto;
   padding-right: 10px;
@@ -385,15 +381,14 @@ function getProgressPercent(prize) {
   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);