Fix：5221 【商城小程序】抽奖界面优化1

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 v-else class="draw-info-wrap history-header" style="padding: 0">
-          <view
+        
-            class="history-nav-btn left"
+        <view class="history-btn-wrap">
-            :class="{ disabled: !canSwitchPrev }"
+          <view class="history-btn-wrap__inner">
-            @click="handleSwitchHistory('prev')"
+            
-          >
+            <view
-          </view>
+              class="history-nav-btn left"
-          <view
+              :class="{ disabled: !canSwitchPrev }"
-            class="history-nav-btn right"
+              @click="handleSwitchHistory('prev')"
-            :class="{ disabled: !canSwitchNext }"
+            >
-            @click="handleSwitchHistory('next')"
+              {{ '<' }}
-          >
-          </view>
-          <view class="top-wrap">
-            <view class="v12-font-bold v12-font-40">
-            第{{ periodLabel }}期
             </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>