diff --git a/addons/shopro/service/partner/IdentityService.php b/addons/shopro/service/partner/IdentityService.php
index 4deabd9..4a550a4 100644
--- a/addons/shopro/service/partner/IdentityService.php
+++ b/addons/shopro/service/partner/IdentityService.php
@@ -111,6 +111,35 @@ class IdentityService
         }
         $available = max(0, (float) $released - (float) $used);
 
+        $windowDays = PartnerConfig::activeDays();
+        $isActive = (new ActiveService())->isActive($agent);
+        $now = time();
+        $lastTime = $last ? intval($last) : 0;
+
+        $expireTime = 0;
+        $remainingSeconds = 0;
+        $daysRemaining = 0;
+        $activeStatus = 'inactive';
+
+        if ($isActive) {
+            if ($lastTime > 0) {
+                $orderDay = strtotime(date('Y-m-d 00:00:00', $lastTime));
+                $expireTime = $orderDay + $windowDays * 86400;
+                $remainingSeconds = max(0, $expireTime - $now);
+                $daysRemaining = intval(ceil($remainingSeconds / 86400));
+                $activeStatus = ($daysRemaining <= 5) ? 'expiring' : 'active';
+            } else {
+                $activeStatus = 'active';
+                $daysRemaining = $windowDays;
+                $expireTime = $now + $windowDays * 86400;
+                $remainingSeconds = $windowDays * 86400;
+            }
+        } else {
+            $activeStatus = 'inactive';
+            $daysRemaining = 0;
+            $remainingSeconds = 0;
+        }
+
         $data = is_object($agent) ? $agent->toArray() : $agent;
         return array_merge($data, $identity, [
             'is_venue' => intval($data['is_venue'] ?? 0),
@@ -124,8 +153,12 @@ class IdentityService
             'voucher_released' => self::formatMoney($released),
             'voucher_used' => self::formatMoney($used),
             'voucher_available' => self::formatMoney($available),
-            'active_30d' => (new ActiveService())->isActive($agent),
-            'last_self_order_time' => $last ? intval($last) : 0,
+            'active_30d' => $isActive,
+            'active_status' => $activeStatus,
+            'days_remaining' => $daysRemaining,
+            'expire_time' => $expireTime,
+            'expire_seconds' => $remainingSeconds,
+            'last_self_order_time' => $lastTime,
         ]);
     }
 
@@ -147,6 +180,11 @@ class IdentityService
                 'madow_value' => '0.00',
                 'voucher_available' => '0.00',
                 'active_30d' => true,
+                'active_status' => 'inactive',
+                'days_remaining' => 0,
+                'expire_time' => 0,
+                'expire_seconds' => 0,
+                'last_self_order_time' => 0,
                 'agent_form' => self::agentFormEnabled(),
                 'partner_mode' => PartnerConfig::isPartnerMode(),
             ];
@@ -166,6 +204,11 @@ class IdentityService
             'madow_value' => $full['madow_value'],
             'voucher_available' => $full['voucher_available'],
             'active_30d' => $full['active_30d'],
+            'active_status' => $full['active_status'] ?? 'inactive',
+            'days_remaining' => $full['days_remaining'] ?? 0,
+            'expire_time' => $full['expire_time'] ?? 0,
+            'expire_seconds' => $full['expire_seconds'] ?? 0,
+            'last_self_order_time' => $full['last_self_order_time'] ?? 0,
             'agent_form' => self::agentFormEnabled(),
             'partner_mode' => PartnerConfig::isPartnerMode(),
         ];
diff --git a/tests/verify_active_countdown_spec.js b/tests/verify_active_countdown_spec.js
new file mode 100644
index 0000000..595bb0a
--- /dev/null
+++ b/tests/verify_active_countdown_spec.js
@@ -0,0 +1,210 @@
+/**
+ * 30天收益保活倒计时看板与状态机综合测试用例
+ * 覆盖：
+ * 1. 后端 IdentityService 保活到期时间与状态判定（正常活跃、临期预警、奖励暂停）
+ * 2. 前端 30 天秒级倒计时时分秒换算逻辑
+ * 3. 前端 index.vue 模板节点及样式定义完整性
+ * 4. mp-weixin 编译产物 index.wxml / index.wxss / index.js 完整性
+ */
+
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+
+let passCount = 0;
+let failCount = 0;
+
+function it(desc, fn) {
+  try {
+    fn();
+    console.log(` [PASS] ${desc}`);
+    passCount++;
+  } catch (err) {
+    console.error(` [FAIL] ${desc}`);
+    console.error(`        Error: ${err.message}`);
+    failCount++;
+  }
+}
+
+console.log('========================================================');
+console.log('  30天收益保活倒计时看板与状态机覆盖性测试');
+console.log('========================================================\n');
+
+// 1. 测试 IdentityService.php
+const identityServicePath = path.resolve(__dirname, '../addons/shopro/service/partner/IdentityService.php');
+const identityContent = fs.readFileSync(identityServicePath, 'utf8');
+
+it('IdentityService.php 存在并包含 active_status 字段逻辑', () => {
+  assert(fs.existsSync(identityServicePath), 'IdentityService.php 不存在');
+  assert(identityContent.includes("'active_status'"), "未在 attachAgent 中计算 'active_status'");
+});
+
+it('IdentityService.php 正确区分 active / expiring / inactive 三种状态', () => {
+  assert(identityContent.includes("'inactive'"), "缺少 inactive 状态判定");
+  assert(identityContent.includes("'expiring'"), "缺少 expiring 状态判定");
+  assert(identityContent.includes("'active'"), "缺少 active 状态判定");
+});
+
+it('IdentityService.php 导出 expire_time / expire_seconds / days_remaining', () => {
+  assert(identityContent.includes("'expire_time'"), "缺少 expire_time");
+  assert(identityContent.includes("'expire_seconds'"), "缺少 expire_seconds");
+  assert(identityContent.includes("'days_remaining'"), "缺少 days_remaining");
+});
+
+// 2. 模拟前端状态计算与倒计时逻辑
+function calculateActiveState(agent, user, nowSec) {
+  const lastTime = Number(agent.last_self_order_time || user.last_self_order_time || 0);
+  const isExplicitInactive = agent.active_30d === false || user.active_30d === false || agent.is_active_30d === false || user.is_active_30d === false;
+
+  if (isExplicitInactive || (lastTime <= 0 && (agent.active_30d === false || user.active_30d === false))) {
+    return {
+      status: 'inactive',
+      title: '收益奖励已暂停',
+      badge: '暂缓计奖',
+      btnText: '去选购恢复'
+    };
+  }
+
+  let expireTime = Number(agent.expire_time || 0);
+  if (!expireTime) {
+    expireTime = lastTime > 0 ? (lastTime + 30 * 86400) : (nowSec + 30 * 86400);
+  }
+
+  const remainingSeconds = Math.max(0, expireTime - nowSec);
+  const remainingDays = Math.ceil(remainingSeconds / 86400);
+
+  if (remainingSeconds <= 0) {
+    return {
+      status: 'inactive',
+      title: '收益奖励已暂停',
+      badge: '暂缓计奖',
+      btnText: '去选购恢复'
+    };
+  }
+
+  if (remainingDays <= 5) {
+    return {
+      status: 'expiring',
+      title: '30天保活临期预警',
+      badge: `仅剩 ${remainingDays} 天`,
+      btnText: '立即自购保活'
+    };
+  }
+
+  return {
+    status: 'active',
+    title: '30天收益资格生效中',
+    badge: '正常活跃',
+    btnText: '去自购续期'
+  };
+}
+
+function calculateCountdown(expireTime, nowSec) {
+  const remaining = Math.max(0, expireTime - nowSec);
+  const d = Math.floor(remaining / 86400);
+  const h = Math.floor((remaining % 86400) / 3600);
+  const m = Math.floor((remaining % 3600) / 60);
+  const s = remaining % 60;
+  return {
+    days: d < 10 ? '0' + d : String(d),
+    hours: h < 10 ? '0' + h : String(h),
+    minutes: m < 10 ? '0' + m : String(m),
+    seconds: s < 10 ? '0' + s : String(s),
+    totalSeconds: remaining
+  };
+}
+
+// 3. 正常场景：自购在第 2 天（剩余 28 天） -> 正常活跃
+it('正常场景：剩余28天 -> 状态为 active 且倒计时天数格式为 28', () => {
+  const now = 1700000000;
+  const expire = now + 28 * 86400 + 3600 * 5 + 60 * 12 + 30; // 28天5小时12分30秒
+  const state = calculateActiveState({ expire_time: expire, last_self_order_time: now - 2 * 86400 }, {}, now);
+  const cd = calculateCountdown(expire, now);
+
+  assert.strictEqual(state.status, 'active');
+  assert.strictEqual(state.badge, '正常活跃');
+  assert.strictEqual(cd.days, '28');
+  assert.strictEqual(cd.hours, '05');
+  assert.strictEqual(cd.minutes, '12');
+  assert.strictEqual(cd.seconds, '30');
+});
+
+// 4. 临期场景：剩余 3 天（<= 5 天） -> 临期预警
+it('临期预警场景：剩余3天 -> 状态为 expiring，提示立即自购保活', () => {
+  const now = 1700000000;
+  const expire = now + 3 * 86400 + 3600 * 2 + 60 * 1 + 5;
+  const state = calculateActiveState({ expire_time: expire, last_self_order_time: now - 27 * 86400 }, {}, now);
+  const cd = calculateCountdown(expire, now);
+
+  assert.strictEqual(state.status, 'expiring');
+  assert.strictEqual(state.badge, '仅剩 4 天'); // ceil
+  assert.strictEqual(state.btnText, '立即自购保活');
+  assert.strictEqual(cd.days, '03');
+  assert.strictEqual(cd.hours, '02');
+  assert.strictEqual(cd.minutes, '01');
+  assert.strictEqual(cd.seconds, '05');
+});
+
+// 5. 业务失败/过期场景：超过30天未自购 -> 奖励暂停
+it('过期场景：剩余时间为0 -> 状态为 inactive，按钮为去选购恢复', () => {
+  const now = 1700000000;
+  const expire = now - 100;
+  const state = calculateActiveState({ expire_time: expire, last_self_order_time: now - 31 * 86400 }, {}, now);
+  const cd = calculateCountdown(expire, now);
+
+  assert.strictEqual(state.status, 'inactive');
+  assert.strictEqual(state.title, '收益奖励已暂停');
+  assert.strictEqual(state.btnText, '去选购恢复');
+  assert.strictEqual(cd.totalSeconds, 0);
+  assert.strictEqual(cd.days, '00');
+});
+
+// 6. 前端源码 index.vue 结构检查
+const indexVuePath = path.resolve(__dirname, '../uniapp/pages/commission/index.vue');
+const indexVueContent = fs.readFileSync(indexVuePath, 'utf8');
+
+it('uniapp/pages/commission/index.vue 包含 active-countdown-card 卡片', () => {
+  assert(indexVueContent.includes('active-countdown-card'), '未找到 active-countdown-card 类');
+  assert(indexVueContent.includes('countdown.days'), '未找到倒计时天数绑定');
+  assert(indexVueContent.includes('countdown.hours'), '未找到倒计时小时绑定');
+  assert(indexVueContent.includes('countdown.minutes'), '未找到倒计时分钟绑定');
+  assert(indexVueContent.includes('countdown.seconds'), '未找到倒计时秒数绑定');
+});
+
+it('uniapp/pages/commission/index.vue 包含定时器生命周期管理', () => {
+  assert(indexVueContent.includes('setInterval(updateCountdown, 1000)'), '缺少 1 秒定时器');
+  assert(indexVueContent.includes('clearInterval(timer)'), '缺少定时器清理');
+  assert(indexVueContent.includes('onShow'), '缺少 onShow 挂载');
+  assert(indexVueContent.includes('onHide'), '缺少 onHide 清理');
+  assert(indexVueContent.includes('onUnload'), '缺少 onUnload 清理');
+});
+
+// 7. 微信小程序已编译产物检查
+const wxmlPath = path.resolve(__dirname, '../uniapp/unpackage/dist/dev/mp-weixin/pages/commission/index.wxml');
+const wxssPath = path.resolve(__dirname, '../uniapp/unpackage/dist/dev/mp-weixin/pages/commission/index.wxss');
+const jsPath = path.resolve(__dirname, '../uniapp/unpackage/dist/dev/mp-weixin/pages/commission/index.js');
+
+it('mp-weixin 产物完整且包含 active-countdown-card 节点与样式', () => {
+  const wxml = fs.readFileSync(wxmlPath, 'utf8');
+  const wxss = fs.readFileSync(wxssPath, 'utf8');
+  const js = fs.readFileSync(jsPath, 'utf8');
+
+  assert(wxml.includes('active-countdown-card'), 'index.wxml 缺少 active-countdown-card');
+  assert(wxml.includes('timer-digits'), 'index.wxml 缺少 timer-digits 倒计时节点');
+  assert(wxss.includes('.active-countdown-card'), 'index.wxss 缺少 .active-countdown-card');
+  assert(wxss.includes('.status-active'), 'index.wxss 缺少 .status-active');
+  assert(wxss.includes('.status-expiring'), 'index.wxss 缺少 .status-expiring');
+  assert(wxss.includes('.status-inactive'), 'index.wxss 缺少 .status-inactive');
+  assert(js.includes('countdown'), 'index.js 缺少 countdown 响应式对象');
+  assert(js.includes('activeState'), 'index.js 缺少 activeState 响应式计算属性');
+});
+
+console.log(`\n--------------------------------------------------------`);
+console.log(`测试结果统计: 通过 ${passCount} 项, 失败 ${failCount} 项`);
+console.log(`========================================================\n`);
+
+if (failCount > 0) {
+  process.exit(1);
+} else {
+  process.exit(0);
+}
diff --git a/uniapp/pages/commission/index.vue b/uniapp/pages/commission/index.vue
index fe74363..1c9e107 100644
--- a/uniapp/pages/commission/index.vue
+++ b/uniapp/pages/commission/index.vue
@@ -3,13 +3,60 @@
   <s-layout navbar="inner" class="index-wrap" title="收益中心" :bgStyle="bgStyle" onShareAppMessage>
     <!-- 分销商信息 -->
     <commission-info />
-    <!-- 30 日活跃警示 -->
-    <view v-if="userInfo?.active_30d === false || agentInfo?.active_30d === false" class="active-warn">
-      <view class="warn-text">近 30 日暂无本人订单，业务奖励已暂停。</view>
-      <button class="ss-reset-button warn-btn" @tap="sheep.$router.go('/pages/index/index')">
-        去首页
-      </button>
+    <!-- 30 天收益保活与预警倒计时看板 -->
+    <view class="active-countdown-card" :class="'status-' + activeState.status">
+      <!-- 头部状态栏 -->
+      <view class="card-header ss-flex ss-row-between ss-col-center">
+        <view class="header-left ss-flex ss-col-center">
+          <view class="status-icon-box ss-flex ss-row-center ss-col-center">
+            <text v-if="activeState.status === 'active'" class="cicon-check icon-symbol text-green"></text>
+            <text v-else-if="activeState.status === 'expiring'" class="cicon-notice icon-symbol text-amber"></text>
+            <text v-else class="cicon-close icon-symbol text-red"></text>
+          </view>
+          <view class="header-title-box ss-m-l-12 ss-flex ss-col-center">
+            <text class="status-title-text">{{ activeState.title }}</text>
+            <text class="status-pill ss-m-l-10" :class="'pill-' + activeState.status">{{ activeState.badge }}</text>
+          </view>
+        </view>
+        <button class="ss-reset-button action-btn" :class="'btn-' + activeState.status" @tap="onActionTap">
+          {{ activeState.btnText }}
+        </button>
+      </view>
+
+      <!-- 倒计时与状态内容 -->
+      <view class="card-body ss-m-t-14">
+        <!-- 正常活跃 / 临期预警：展示秒级动态跳动倒计时 -->
+        <view v-if="activeState.status !== 'inactive'" class="countdown-row ss-flex ss-col-center ss-row-between">
+          <view class="countdown-label ss-flex ss-col-center">
+            <text class="label-prefix">保活剩余：</text>
+            <text class="label-days-highlight">{{ countdown.days }}</text>
+            <text class="label-days-text">天</text>
+          </view>
+          <view class="timer-digits ss-flex ss-col-center">
+            <view class="digit-box"><text class="num">{{ countdown.hours }}</text><text class="unit">时</text></view>
+            <text class="colon">:</text>
+            <view class="digit-box"><text class="num">{{ countdown.minutes }}</text><text class="unit">分</text></view>
+            <text class="colon">:</text>
+            <view class="digit-box sec-box"><text class="num">{{ countdown.seconds }}</text><text class="unit">秒</text></view>
+          </view>
+        </view>
+
+        <!-- 已暂停状态说明 -->
+        <view v-else class="inactive-row ss-flex ss-col-center">
+          <text class="inactive-desc">近 30 日内暂无本人自购订单，所有收益分成已暂缓沉淀。</text>
+        </view>
+
+        <!-- 规则小贴士与上次自购时间 -->
+        <view class="rule-footer ss-flex ss-row-between ss-col-center ss-m-t-10">
+          <view class="footer-left ss-flex ss-col-center ss-line-1 ss-flex-1">
+            <text class="footer-dot">●</text>
+            <text class="footer-tip-text ss-line-1">{{ activeState.tip }}</text>
+          </view>
+          <text v-if="activeState.lastOrderText" class="footer-right-time ss-m-l-10">{{ activeState.lastOrderText }}</text>
+        </view>
+      </view>
     </view>
+
     <!-- 账户信息 -->
     <account-info />
     <!-- 团队作战快捷看板 -->
@@ -21,7 +68,8 @@
         <view class="team-quick-info ss-m-l-16">
           <view class="team-title ss-flex ss-col-center">
             <text class="title-bold">团队作战中心</text>
-            <text class="active-badge ss-m-l-10" v-if="userInfo?.active_30d !== false && agentInfo?.active_30d !== false">正常活跃</text>
+            <text class="active-badge ss-m-l-10" v-if="activeState.status === 'active'">正常活跃 (剩{{ countdown.days }}天)</text>
+            <text class="amber-badge ss-m-l-10" v-else-if="activeState.status === 'expiring'">临期预警 (仅剩{{ countdown.days }}天)</text>
             <text class="warn-badge ss-m-l-10" v-else>奖励暂停</text>
           </view>
           <view class="team-sub ss-m-t-6">
@@ -48,8 +96,9 @@
 
 <script setup>
   import sheep from '@/sheep';
-  import { onShow } from '@dcloudio/uni-app';
+  import { onShow, onHide, onUnload } from '@dcloudio/uni-app';
   import { computed, reactive } from 'vue';
+  import dayjs from 'dayjs';
   import commissionInfo from './components/commission-info.vue';
   import accountInfo from './components/account-info.vue';
   import commissionLog from './components/commission-log.vue';
@@ -68,6 +117,130 @@
   const agentInfo = computed(() => sheep.$store('user').agentInfo);
   const userInfo = computed(() => sheep.$store('user').userInfo);
 
+  // 实时倒计时数据
+  const countdown = reactive({
+    days: '00',
+    hours: '00',
+    minutes: '00',
+    seconds: '00',
+    totalSeconds: 0,
+  });
+
+  let timer = null;
+
+  // 活跃状态与文案综合计算
+  const activeState = computed(() => {
+    const user = userInfo.value || {};
+    const agent = agentInfo.value || {};
+
+    const lastTime = Number(agent.last_self_order_time || user.last_self_order_time || 0);
+    const isExplicitInactive = user.active_30d === false || agent.active_30d === false;
+
+    // 1. 明确暂停或无自购
+    if (isExplicitInactive || (lastTime <= 0 && agent.active_30d === false)) {
+      return {
+        status: 'inactive',
+        title: '收益奖励已暂停',
+        badge: '暂缓计奖',
+        btnText: '去选购恢复',
+        tip: '次日完成任意一笔本人自购订单即可自动恢复保活',
+        lastOrderText: lastTime > 0 ? `上次自购: ${dayjs(lastTime * 1000).format('MM-DD HH:mm')}` : '暂无自购记录',
+      };
+    }
+
+    // 2. 计算到期时间戳
+    const nowSec = Math.floor(Date.now() / 1000);
+    let expireTime = Number(agent.expire_time || 0);
+    if (!expireTime) {
+      expireTime = lastTime > 0 ? (lastTime + 30 * 86400) : (nowSec + 30 * 86400);
+    }
+
+    const remainingSeconds = Math.max(0, expireTime - nowSec);
+    const remainingDays = Math.ceil(remainingSeconds / 86400);
+
+    if (remainingSeconds <= 0) {
+      return {
+        status: 'inactive',
+        title: '收益奖励已暂停',
+        badge: '暂缓计奖',
+        btnText: '去选购恢复',
+        tip: '近30日暂无本人自购，次日下单后即可自动激活',
+        lastOrderText: lastTime > 0 ? `上次自购: ${dayjs(lastTime * 1000).format('MM-DD HH:mm')}` : '',
+      };
+    }
+
+    if (remainingDays <= 5) {
+      return {
+        status: 'expiring',
+        title: '30天保活临期预警',
+        badge: `仅剩 ${remainingDays} 天`,
+        btnText: '立即自购保活',
+        tip: '即将暂停分润！请在倒计时结束前完成自购续期',
+        lastOrderText: lastTime > 0 ? `上次自购: ${dayjs(lastTime * 1000).format('MM-DD HH:mm')}` : '',
+      };
+    }
+
+    return {
+      status: 'active',
+      title: '30天收益资格生效中',
+      badge: '正常活跃',
+      btnText: '去自购续期',
+      tip: '已满足30日保活，享有全部团队分红与奖项',
+      lastOrderText: lastTime > 0 ? `上次自购: ${dayjs(lastTime * 1000).format('MM-DD HH:mm')}` : '',
+    };
+  });
+
+  function updateCountdown() {
+    const user = userInfo.value || {};
+    const agent = agentInfo.value || {};
+    const lastTime = Number(agent.last_self_order_time || user.last_self_order_time || 0);
+
+    if (user.active_30d === false || agent.active_30d === false) {
+      countdown.days = '00';
+      countdown.hours = '00';
+      countdown.minutes = '00';
+      countdown.seconds = '00';
+      countdown.totalSeconds = 0;
+      return;
+    }
+
+    const nowSec = Math.floor(Date.now() / 1000);
+    let expireTime = Number(agent.expire_time || 0);
+    if (!expireTime) {
+      expireTime = lastTime > 0 ? (lastTime + 30 * 86400) : (nowSec + 30 * 86400);
+    }
+
+    const remaining = Math.max(0, expireTime - nowSec);
+    countdown.totalSeconds = remaining;
+
+    const d = Math.floor(remaining / 86400);
+    const h = Math.floor((remaining % 86400) / 3600);
+    const m = Math.floor((remaining % 3600) / 60);
+    const s = remaining % 60;
+
+    countdown.days = d < 10 ? '0' + d : String(d);
+    countdown.hours = h < 10 ? '0' + h : String(h);
+    countdown.minutes = m < 10 ? '0' + m : String(m);
+    countdown.seconds = s < 10 ? '0' + s : String(s);
+  }
+
+  function startTimer() {
+    if (timer) clearInterval(timer);
+    updateCountdown();
+    timer = setInterval(updateCountdown, 1000);
+  }
+
+  function stopTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  function onActionTap() {
+    sheep.$router.go('/pages/index/index');
+  }
+
   async function getUserInfo() {
     await sheep.$store('user').getInfo();
   }
@@ -82,10 +255,21 @@
       state.error = res?.code || 0;
       state.errorData = res?.data || {};
     }
+    updateCountdown();
   }
+
   onShow(() => {
     getUserInfo();
     getAgentInfo();
+    startTimer();
+  });
+
+  onHide(() => {
+    stopTimer();
+  });
+
+  onUnload(() => {
+    stopTimer();
   });
 </script>
 
@@ -94,35 +278,231 @@
     background-size: 100% 100% !important;
   }
 
-  .active-warn {
+  .active-countdown-card {
     width: 694rpx;
-    margin: 0 auto 16rpx;
-    padding: 20rpx 24rpx;
+    margin: 16rpx auto 0;
+    padding: 24rpx 28rpx;
     box-sizing: border-box;
-    background: #fff4e5;
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    border-radius: 16rpx;
     position: relative;
     z-index: 3;
+    transition: all 0.3s ease;
 
-    .warn-text {
-      flex: 1;
-      font-size: 24rpx;
-      line-height: 34rpx;
-      color: #a17545;
-      padding-right: 16rpx;
+    // 正常活跃状态
+    &.status-active {
+      background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
+      border: 1rpx solid #bbf7d0;
+      box-shadow: 0 4rpx 16rpx rgba(187, 247, 208, 0.35);
+
+      .status-icon-box {
+        background: #dcfce7;
+      }
+      .status-title-text {
+        color: #166534;
+      }
+      .pill-active {
+        background: #dcfce7;
+        color: #15803d;
+      }
+      .btn-active {
+        background: #059669;
+        color: #ffffff;
+      }
+      .digit-box {
+        background: #ecfdf5;
+        border: 1rpx solid #a7f3d0;
+        .num {
+          color: #047857;
+        }
+        .unit {
+          color: #065f46;
+        }
+      }
+      .colon {
+        color: #059669;
+      }
     }
 
-    .warn-btn {
-      flex-shrink: 0;
-      height: 52rpx;
-      padding: 0 22rpx;
-      background: #ff6000;
-      border-radius: 26rpx;
-      font-size: 22rpx;
-      color: #ffffff;
+    // 临期预警状态
+    &.status-expiring {
+      background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
+      border: 1rpx solid #fed7aa;
+      box-shadow: 0 4rpx 18rpx rgba(253, 186, 116, 0.45);
+
+      .status-icon-box {
+        background: #ffedd5;
+      }
+      .status-title-text {
+        color: #9a3412;
+      }
+      .pill-expiring {
+        background: #ffedd5;
+        color: #c2410c;
+        font-weight: bold;
+      }
+      .btn-expiring {
+        background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(234, 88, 12, 0.3);
+      }
+      .digit-box {
+        background: #ffedd5;
+        border: 1rpx solid #fdba74;
+        .num {
+          color: #c2410c;
+        }
+        .unit {
+          color: #9a3412;
+        }
+      }
+      .colon {
+        color: #ea580c;
+      }
+    }
+
+    // 奖励暂停状态
+    &.status-inactive {
+      background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
+      border: 1rpx solid #fecaca;
+      box-shadow: 0 4rpx 16rpx rgba(254, 202, 202, 0.35);
+
+      .status-icon-box {
+        background: #fee2e2;
+      }
+      .status-title-text {
+        color: #991b1b;
+      }
+      .pill-inactive {
+        background: #fee2e2;
+        color: #b91c1c;
+      }
+      .btn-inactive {
+        background: #dc2626;
+        color: #ffffff;
+      }
+    }
+
+    .card-header {
+      .status-icon-box {
+        width: 48rpx;
+        height: 48rpx;
+        border-radius: 24rpx;
+        .icon-symbol {
+          font-size: 26rpx;
+          font-weight: bold;
+        }
+        .text-green { color: #059669; }
+        .text-amber { color: #d97706; }
+        .text-red { color: #dc2626; }
+      }
+
+      .status-title-text {
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+
+      .status-pill {
+        font-size: 20rpx;
+        padding: 4rpx 14rpx;
+        border-radius: 20rpx;
+        font-weight: 500;
+      }
+
+      .action-btn {
+        height: 52rpx;
+        padding: 0 24rpx;
+        border-radius: 26rpx;
+        font-size: 22rpx;
+        font-weight: 500;
+      }
+    }
+
+    .card-body {
+      .countdown-row {
+        background: rgba(255, 255, 255, 0.7);
+        padding: 12rpx 16rpx;
+        border-radius: 10rpx;
+
+        .countdown-label {
+          .label-prefix {
+            font-size: 24rpx;
+            color: #64748b;
+          }
+          .label-days-highlight {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #0f172a;
+            margin: 0 2rpx;
+            font-family: OPPOSANS;
+          }
+          .label-days-text {
+            font-size: 22rpx;
+            color: #475569;
+          }
+        }
+
+        .timer-digits {
+          .digit-box {
+            padding: 4rpx 8rpx;
+            border-radius: 6rpx;
+            display: flex;
+            align-items: baseline;
+            min-width: 52rpx;
+            justify-content: center;
+
+            .num {
+              font-family: OPPOSANS, DIN, monospace;
+              font-size: 24rpx;
+              font-weight: bold;
+            }
+            .unit {
+              font-size: 18rpx;
+              margin-left: 2rpx;
+            }
+          }
+
+          .colon {
+            font-weight: bold;
+            font-size: 24rpx;
+            margin: 0 4rpx;
+          }
+        }
+      }
+
+      .inactive-row {
+        background: rgba(254, 226, 226, 0.4);
+        padding: 14rpx 18rpx;
+        border-radius: 10rpx;
+
+        .inactive-desc {
+          font-size: 24rpx;
+          color: #991b1b;
+          line-height: 34rpx;
+        }
+      }
+
+      .rule-footer {
+        font-size: 20rpx;
+        color: #94a3b8;
+
+        .footer-dot {
+          font-size: 14rpx;
+          color: #cbd5e1;
+          margin-right: 6rpx;
+        }
+
+        .footer-tip-text {
+          font-size: 22rpx;
+          color: #64748b;
+        }
+
+        .footer-right-time {
+          font-size: 20rpx;
+          color: #94a3b8;
+          font-family: OPPOSANS;
+          flex-shrink: 0;
+        }
+      }
     }
   }
 
@@ -159,6 +539,14 @@
         color: #059669;
         font-weight: 500;
       }
+      .amber-badge {
+        font-size: 20rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 12rpx;
+        background: #ffedd5;
+        color: #c2410c;
+        font-weight: 500;
+      }
       .warn-badge {
         font-size: 20rpx;
         padding: 2rpx 10rpx;