更新

ghsApp/src/admin/home/me.vue

@@ -753,7 +753,7 @@ export default {
             font-size: 22upx;
             line-height: 1;
             margin-left: 6upx;
-            transform: translateY(5upx);
+            transform: translateY(1upx);
           }
         }
         & > image {

ghsApp/src/admin/shop/renew.vue

@@ -14,13 +14,27 @@
                     <text class="info-value">{{ currentDeadline || '—' }}</text>
                 </view>
                 <view class="info-row">
-                    <text class="info-label">续期一年后到期时间</text>
-                    <text class="info-value highlight">{{ newDeadline || '—' }}</text>
+                    <text class="info-label">续费以后到期时间</text>
+                    <text class="info-value highlight">{{ renewAfterDeadlineDisplay }}</text>
                 </view>
             </view>
 
             <text class="section-title">选择套餐</text>
 
+            <view v-if="isLifetimeSelected" class="benefit-lifetime-banner">
+                <view class="benefit-lifetime-banner-head">
+                    <view class="benefit-lifetime-badge-wrap">
+                        <text class="benefit-lifetime-badge-text">尊享福利</text>
+                    </view>
+                    <view class="benefit-title-row benefit-title-row--banner">
+                        <text class="benefit-title-flank benefit-title-flank--banner">✦</text>
+                        <text class="benefit-title-text benefit-title-text--banner">终身版福利</text>
+                        <text class="benefit-title-flank benefit-title-flank--banner">✦</text>
+                    </view>
+                </view>
+                <text class="benefit-desc benefit-desc--banner">赠送价值 880元/年 的零售店商城会员系统（终身免费）</text>
+            </view>
+
             <view class="pkg-list">
                 <view
                     class="pkg-full pkg-lifetime"
@@ -87,15 +101,6 @@
                 </view>
             </view>
 
-            <view v-if="isLifetimeSelected" class="benefit-box benefit-box--lifetime">
-                <view class="benefit-title-row">
-                    <text class="benefit-title-flank">✦</text>
-                    <text class="benefit-title-text">终身版福利</text>
-                    <text class="benefit-title-flank">✦</text>
-                </view>
-                <text class="benefit-desc">赠送 价值880元/年的 零售店商城会员系统（终身免费）</text>
-            </view>
-
             <view class="pkg-year-section">
                 <text class="pkg-year-section-title">按年续费</text>
                 <view class="pkg-row-double">
@@ -123,7 +128,7 @@
             </view>
 
             <view v-if="isYearSelected" class="benefit-box benefit-box--year">
-                <text class="benefit-year-line">没有赠送 价值880元/年 的零售店商城会员系统</text>
+                <text class="benefit-year-line">没有赠送价值 880元/年 的零售店商城会员系统</text>
                 <text class="benefit-year-line benefit-year-line-second">每年需要另外付费购买</text>
             </view>
 
@@ -143,6 +148,7 @@ export default {
         return {
             currentDeadline:'',
             newDeadline:'',
+            newDeadline5:'',
             hasRenew:0,
             renewType:0,
             remark:'',
@@ -179,6 +185,15 @@ export default {
             }
             const p = m[this.selectedKey]
             return p && p.category === 'year'
+        },
+        renewAfterDeadlineDisplay() {
+            if (this.isLifetimeSelected) {
+                return '永久有效'
+            }
+            if (this.selectedKey === 'y5') {
+                return this.newDeadline5 || '—'
+            }
+            return this.newDeadline || '—'
         }
     },
     components: {
@@ -190,6 +205,7 @@ export default {
                 that.hasRenew = res.data.hasRenew ? res.data.hasRenew : 0
                 that.currentDeadline = res.data.currentDeadline
                 that.newDeadline = res.data.newDeadline
+                that.newDeadline5 = res.data.newDeadline5
             }
         })
     },
@@ -358,9 +374,9 @@ export default {
 
 .pkg-full {
     position: relative;
-    min-height: 112upx;
+    min-height: 160upx;
     border-radius: 20upx;
-    padding: 28upx 24upx 24upx;
+    padding: 36upx 26upx 32upx;
     box-sizing: border-box;
     overflow: hidden;
 }
@@ -384,15 +400,15 @@ export default {
 }
 
 .pkg-lifetime-ribbon {
-    margin-bottom: 8upx;
+    margin-bottom: 12upx;
 }
 
 .pkg-lifetime-ribbon-text {
     display: inline-block;
-    font-size: 20upx;
+    font-size: 22upx;
     color: #8a6d1b;
     letter-spacing: 4upx;
-    padding: 4upx 16upx;
+    padding: 6upx 18upx;
     border-radius: 999upx;
     background: linear-gradient(90deg, rgba(212, 175, 55, 0.35) 0%, rgba(255, 248, 220, 0.9) 100%);
     border: 1upx solid rgba(201, 162, 39, 0.55);
@@ -412,20 +428,21 @@ export default {
 }
 
 .pkg-full-title {
-    font-size: 32upx;
-    font-weight: 700;
+    font-size: 38upx;
+    font-weight: 800;
     color: #166534;
+    line-height: 52upx;
 }
 
 .pkg-full-corner {
     position: absolute;
-    right: 16upx;
-    bottom: 14upx;
-    font-size: 28upx;
+    right: 18upx;
+    bottom: 18upx;
+    font-size: 32upx;
     font-weight: 800;
     color: #14532d;
     letter-spacing: 1upx;
-    padding: 8upx 18upx;
+    padding: 10upx 20upx;
     border-radius: 12upx;
     background: rgba(20, 83, 45, 0.1);
     border-width: 2upx;
@@ -531,6 +548,67 @@ export default {
     color: #ffffff;
 }
 
+.benefit-lifetime-banner {
+    margin-top: 10upx;
+    margin-bottom: 28upx;
+    padding: 26upx 24upx 30upx;
+    border-radius: 20upx;
+    background: linear-gradient(155deg, #dceaff 0%, #f6faff 35%, #fff9ee 100%);
+    border-width: 3upx;
+    border-style: solid;
+    border-color: #3385ff;
+    box-shadow: 0 14upx 40upx rgba(51, 133, 255, 0.28);
+    box-sizing: border-box;
+}
+
+.benefit-lifetime-banner-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.benefit-lifetime-badge-wrap {
+    margin-bottom: 18upx;
+    padding: 8upx 32upx;
+    border-radius: 999upx;
+    background: linear-gradient(90deg, #b8860b 0%, #daa520 45%, #c9a227 100%);
+    border-width: 2upx;
+    border-style: solid;
+    border-color: rgba(90, 70, 20, 0.35);
+}
+
+.benefit-lifetime-badge-text {
+    font-size: 24upx;
+    font-weight: 800;
+    color: #ffffff;
+    letter-spacing: 6upx;
+}
+
+.benefit-title-row--banner {
+    margin-bottom: 18upx;
+}
+
+.benefit-title-flank--banner {
+    font-size: 26upx;
+    color: #1d4ed8;
+}
+
+.benefit-title-text--banner {
+    font-size: 40upx;
+    font-weight: 800;
+    color: #1e3a8a;
+    letter-spacing: 2upx;
+}
+
+.benefit-desc--banner {
+    display: block;
+    font-size: 32upx;
+    font-weight: 700;
+    line-height: 46upx;
+    color: #1e40af;
+    text-align: center;
+}
+
 .benefit-box {
     margin-top: 28upx;
     padding: 28upx 24upx;
@@ -538,13 +616,6 @@ export default {
     box-sizing: border-box;
 }
 
-.benefit-box--lifetime {
-    background: linear-gradient(180deg, rgba(51, 133, 255, 0.08) 0%, rgba(51, 133, 255, 0.02) 100%);
-    border-width: 2upx;
-    border-style: dashed;
-    border-color: #93c5fd;
-}
-
 .benefit-title-row {
     display: flex;
     flex-direction: row;
@@ -576,7 +647,7 @@ export default {
 
 .benefit-desc {
     display: block;
-    font-size: 26upx;
+    font-size: 32upx;
     font-weight:bold;
     line-height: 42upx;
     color: #2563eb;
@@ -592,7 +663,7 @@ export default {
 
 .benefit-year-line {
     display: block;
-    font-size: 26upx;
+    font-size: 30upx;
     line-height: 40upx;
     color: red;
     font-weight:bold;