From c367a236c1cad8d8f06e5d6045871a95f1c86408 Mon Sep 17 00:00:00 2001
From: linxi <957440651@qq.com>
Date: Fri, 8 May 2026 20:08:19 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A5221=20=E3=80=90=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=91=E6=8A=BD=E5=A5=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=961?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg-video/views/county-winners.vue | 118 ++++++++++++++++++++++++-----
 1 file changed, 100 insertions(+), 18 deletions(-)

diff --git a/pkg-video/views/county-winners.vue b/pkg-video/views/county-winners.vue
index 68f7316..028bb85 100644
--- a/pkg-video/views/county-winners.vue
+++ b/pkg-video/views/county-winners.vue
@@ -10,6 +10,10 @@
     </view> -->
 
     <view class="content-wrap" v-if="loaded">
+      <view class="badge-side-wrap">
+        <view class="badge-side left-side" style="top: 0rpx"></view>
+        <view class="badge-side right-side" style="top: 0rpx"></view>
+      </view>
       <view v-if="!useHistoryHeader" class="draw-info-wrap" :style="{ backgroundImage: `url(${webUrl}/zhongjiang5.png)` }">
         <view class="period-side left">
           <text class="side-text v12-font-36">第</text>
@@ -31,26 +35,35 @@
           <view class="draw-time">开奖时间：{{ drawTime }}</view>
         </view>
       </view>
-      <view v-else class="draw-info-wrap" style="padding: 0" :style="{ backgroundImage: `url(${webUrl}/zhongjiang01.png)` }">
-          <view
-            class="history-nav-btn left"
-            :class="{ disabled: !canSwitchPrev }"
-            @click="handleSwitchHistory('prev')"
-          >
-          </view>
-          <view
-            class="history-nav-btn right"
-            :class="{ disabled: !canSwitchNext }"
-            @click="handleSwitchHistory('next')"
-          >
-          </view>
-          <view class="top-wrap">
-            <view class="v12-font-bold v12-font-40">
-            第{{ periodLabel }}期
+      <view v-else class="draw-info-wrap history-header" style="padding: 0">
+        
+        <view class="history-btn-wrap">
+          <view class="history-btn-wrap__inner">
+            
+            <view
+              class="history-nav-btn left"
+              :class="{ disabled: !canSwitchPrev }"
+              @click="handleSwitchHistory('prev')"
+            >
+              {{ '<' }}
             </view>
+            
+            <view style="margin: 0 10px;">
+              <view class="v12-font-bold v12-font-40">
+              第{{ periodLabel }}期
+              </view>
+            </view>
+            <view
+              class="history-nav-btn right"
+              :class="{ disabled: !canSwitchNext }"
+              @click="handleSwitchHistory('next')"
+            >
+              {{ '>' }}
+            </view>
+          </view>
         </view>
         <view class="draw-main" style="padding: 0" >
-          <view class="draw-time" style="margin-top: 60rpx">开奖时间：{{ drawTime }}</view>
+          <view class="draw-time" style="margin-top: 40rpx">开奖时间：{{ drawTime }}</view>
         </view>
       </view>
       <view class="win-banner" v-if="hasWon === 1 && userWinList.length > 0">
@@ -975,7 +988,6 @@ export default {
 .history-nav-btn {
   width: 52rpx;
   height: 52rpx;
-  position: absolute;
   top: 16rpx;
   border-radius: 50%;
   color: #333;
@@ -996,4 +1008,74 @@ export default {
     opacity: 0.4;
   }
 }
+.history-header{
+  position: relative;
+  z-index: 5;
+  min-height: 120rpx !important;
+  border: 4rpx solid #333;
+  border-radius: 30rpx;
+  background: #fff;
+  box-shadow: inset 0 -12rpx 0 #FAF8E9, inset 0 12rpx 0 #FAF8E9, inset -12rpx 0rpx 0rpx #FAF8E9, inset 12rpx 0rpx 0 #FAF8E9;
+}
+.history-btn-wrap{
+  position: absolute;
+  width: fit-content;
+  height: 60rpx;
+  border-radius: 1000rpx;
+  border: 4rpx solid #333;
+  line-height: 60rpx;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  background: #FCF9E8;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: -34rpx;
+  z-index: 10;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -16rpx;
+    left: 50%;
+    transform: translateX(-50%) rotate(-45deg);
+    width: 30rpx;
+    height: 30rpx;
+    border: 6rpx solid #333;
+    background: #FCF9E8;
+    /* 为了不让这个三角形的边框跑到上方的背景前，可以设置层级或者利用边框隐藏等，目前看原来的效果是直接叠加在底下的。
+        由于要模拟原本的 .triangle 元素层级，我们用 z-index: -1 把它垫在 pill 下面即可 */
+  }
+}
+.history-btn-wrap__inner {
+  display: flex;
+  z-index: 1;
+  background: #FAF8E9;
+  border-radius: 1000rpx;
+  align-items: center;
+  position: relative;
+  
+  .badge-side {
+    position: absolute;
+    top: 8rpx; /* 调整此值以对齐中奖名单背景的垂直中线 */
+    width: 40rpx;
+    height: 38rpx;
+    background-color: #fdb400;
+    border: 4rpx solid #111;
+    z-index: -1;
+  }
+
+  .left-side {
+    left: calc(50% - 160rpx); /* 根据主图 280rpx 宽算，一半140rpx，加上突出的 20rpx */
+    border-radius: 40rpx 0 0 40rpx;
+    border-right: none;
+  }
+
+  .right-side {
+    right: calc(50% - 160rpx);
+    border-radius: 0 40rpx 40rpx 0;
+    border-left: none;
+  }
+}
 </style>