From a39ad6a2492e9092bfeb5a9809b3190eadcfc00f Mon Sep 17 00:00:00 2001
From: xtaodada <xtao@xtaolink.cn>
Date: Wed, 15 Nov 2023 23:43:58 +0800
Subject: [PATCH] :sparkles: Support starrail activity - FoxStory

---
 plugins/starrail/activity.py                  | 350 ++++++-
 .../css/c_hsr_act_FoxStory_4d8c2f06.css       | 982 ++++++++++++++++++
 resources/starrail/activity/fox_story.html    | 218 ++++
 3 files changed, 1549 insertions(+), 1 deletion(-)
 create mode 100644 resources/starrail/activity/css/c_hsr_act_FoxStory_4d8c2f06.css
 create mode 100644 resources/starrail/activity/fox_story.html

diff --git a/plugins/starrail/activity.py b/plugins/starrail/activity.py
index a41e3c2..040a36a 100644
--- a/plugins/starrail/activity.py
+++ b/plugins/starrail/activity.py
@@ -1,9 +1,11 @@
 import asyncio
-from typing import Optional, List, Dict, TYPE_CHECKING, Any, Coroutine
+import math
+from typing import Optional, List, Dict, TYPE_CHECKING, Any, Coroutine, Tuple
 
 from simnet.models.starrail.chronicle.activity import (
     StarRailFantasticStory,
     StarRailTreasureDungeonRecord,
+    StarRailFoxStoryTeam,
 )
 from telegram import Update, Message
 from telegram.constants import ChatAction
@@ -228,6 +230,352 @@ class PlayerActivityPlugins(Plugin):
             query_selector="#endless_side",
         )
 
+    @handler.command("fox_story", block=False)
+    @handler.message(filters.Regex("^狐斋志异信息查询(.*)"), block=False)
+    async def fox_story_command_start(self, update: Update, context: CallbackContext) -> Optional[int]:
+        user = update.effective_user
+        message = update.effective_message
+        logger.info("用户 %s[%s] 查询狐斋志异信息命令请求", user.full_name, user.id)
+        try:
+            uid = await self.get_uid(user.id, context.args, message.reply_to_message)
+            async with self.helper.genshin_or_public(user.id, uid=uid) as client:
+                render_result = await self.fox_story_render(client, uid)
+        except AttributeError as exc:
+            logger.error(ACTIVITY_DATA_ERROR)
+            logger.exception(exc)
+            await message.reply_text(ACTIVITY_ATTR_ERROR)
+            return
+        except NotHaveData as e:
+            reply_message = await message.reply_text(e.MSG)
+            if filters.ChatType.GROUPS.filter(reply_message):
+                self.add_delete_message_job(message)
+                self.add_delete_message_job(reply_message)
+            return
+        await message.reply_chat_action(ChatAction.UPLOAD_PHOTO)
+        await render_result.reply_photo(message, filename=f"{user.id}.png", allow_sending_without_reply=True)
+
+    @staticmethod
+    def line_percent(team: StarRailFoxStoryTeam) -> Tuple[float, float]:
+        if team.index_arrived == 0:
+            return 0, 0
+        x, i = 0.0, team.index_arrived
+        if i > 0:
+            a = i - 1
+            n = team.fans_range[i - 1]
+            r = (team.fans - n) / (team.fans_range[i] - n)
+            l = a + 0.5
+            x = max(0.0, min(1.0, (r + l) * (2 / (2 * len(team.fans_range) - 1))))
+        d = [
+            2.5,
+            3,
+            4,
+            4.5,
+            5,
+            5.5,
+            6,
+            7,
+            7,
+            8,
+            8.5,
+            9,
+            9.5,
+            10,
+            11,
+            11.5,
+            12,
+            13,
+            13,
+            14,
+            14.5,
+            15,
+            16,
+            16.5,
+            17,
+            18,
+            19,
+            20,
+            20.5,
+            21,
+            21.5,
+            22,
+            22.5,
+            22.5,
+            22.5,
+            23.5,
+            24.5,
+            25,
+            26.5,
+            27.5,
+            28.5,
+            29,
+            30,
+            31,
+            31.5,
+            32,
+            32.5,
+            32.5,
+            32.5,
+            33.5,
+            33.5,
+            33.5,
+            33.5,
+            33.5,
+            33.5,
+            33.5,
+            34,
+            35,
+            35.5,
+            36,
+            37,
+            37.5,
+            38,
+            38.5,
+            38.5,
+            38.5,
+            38.5,
+            37.5,
+            37.5,
+            37.5,
+            36.5,
+            37,
+            37,
+            38,
+            39,
+            39,
+            40,
+            40.5,
+            41,
+            42,
+            42.5,
+            43,
+            43.5,
+            43.5,
+            44.5,
+            44.5,
+            44.5,
+            45,
+            45.5,
+            45.5,
+            46,
+            47,
+            47,
+            48,
+            48.5,
+            49,
+            50,
+            50.5,
+            51,
+            52,
+            52.5,
+            53,
+            53.5,
+            53.5,
+            53.5,
+            53.5,
+            54,
+            54.5,
+            55.5,
+            56.5,
+            58,
+            59.5,
+            60.5,
+            61.5,
+            62,
+            63,
+            63.5,
+            64,
+            65,
+            65.5,
+            66,
+            66.5,
+            66.5,
+            66.5,
+            66.5,
+            66.5,
+            66.5,
+            67,
+            67,
+            68,
+            69,
+            70,
+            70,
+            70.5,
+            71.5,
+            71.5,
+            71.5,
+            71.5,
+            71.5,
+            71.5,
+            71.5,
+            72.5,
+            72.5,
+            72.5,
+            73,
+            73.5,
+            73.5,
+            74,
+            74.5,
+            75,
+            76,
+            77,
+            77.5,
+            78.5,
+            79,
+            80,
+            80.5,
+            81,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81.5,
+            81,
+            80.5,
+            80.5,
+            81,
+            81.5,
+            82,
+            83,
+            83.5,
+            84,
+            84.5,
+            85,
+            86,
+            86.5,
+            87.5,
+            88.5,
+            89.5,
+            90.5,
+            92,
+            93,
+            94.5,
+            95.5,
+            96.5,
+            97.5,
+            98.5,
+            99.5,
+            100.5,
+            101.5,
+            102.5,
+            103.5,
+            104.5,
+            105.5,
+            106.5,
+            108,
+            109,
+            110.5,
+            111.5,
+            112.5,
+            113.5,
+            114.5,
+            115.5,
+            116.5,
+            117,
+            118,
+            118.5,
+            118.5,
+            119,
+            119.5,
+            120,
+            120.5,
+            121.5,
+            122.5,
+            123.5,
+            124.5,
+            126,
+            127,
+            128,
+            129.5,
+            130.5,
+            131.5,
+            132.5,
+            133.5,
+            134.5,
+            135.5,
+            136,
+            137,
+            138,
+            138,
+            139,
+            139.5,
+            139.5,
+            140.5,
+            140.5,
+            141,
+            141.5,
+            142,
+            143,
+            143.5,
+            143.5,
+            144.5,
+            144.5,
+            145,
+            145.5,
+            145.5,
+            146,
+            146.5,
+            147,
+            147.5,
+            148,
+            148.5,
+            149,
+            149.5,
+            150,
+            150.5,
+            151,
+            152,
+            153,
+            153.5,
+            154.5,
+            155.5,
+            156.5,
+            158,
+            158.5,
+        ]
+
+        def v(t):
+            e = max(0, int(t))
+            if e == len(d):
+                return 0
+            i = min(int(math.ceil(t)), len(d) - 1)
+            s = d[e]
+            return (s + (d[i] - s) * (t - e)) / 162
+
+        return x * 100, v(x * len(d)) * 100
+
+    async def fox_story_render(self, client: "StarRailClient", uid: Optional[int] = None) -> RenderResult:
+        if uid is None:
+            uid = client.player_id
+
+        act_data = await client.get_starrail_activity(uid)
+        try:
+            fox_story_data = act_data.fox_story
+            if not fox_story_data.exists_data:
+                raise NotHaveData
+            fox_story_data = fox_story_data.info
+            if not fox_story_data.exists_data:
+                raise NotHaveData
+        except ValueError:
+            raise NotHaveData
+        data = {
+            "uid": mask_number(uid),
+            "data": fox_story_data,
+            "line": self.line_percent(fox_story_data.team),
+        }
+
+        return await self.template_service.render(
+            "starrail/activity/fox_story.html",
+            data,
+            {"width": 1920, "height": 1000},
+            full_page=True,
+            query_selector="#fox_story",
+        )
+
     @handler.command("treasure_dungeon", block=False)
     @handler.message(filters.Regex("^地城探宝信息查询(.*)"), block=False)
     async def treasure_dungeon_command_start(self, update: Update, context: CallbackContext) -> Optional[int]:
diff --git a/resources/starrail/activity/css/c_hsr_act_FoxStory_4d8c2f06.css b/resources/starrail/activity/css/c_hsr_act_FoxStory_4d8c2f06.css
new file mode 100644
index 0000000..4356cf1
--- /dev/null
+++ b/resources/starrail/activity/css/c_hsr_act_FoxStory_4d8c2f06.css
@@ -0,0 +1,982 @@
+/*! Copyright © 2011 - 2023 miHoYo. All Rights Reserved */
+.figure-line[data-v-1b240865] {
+    position: relative;
+    height: 100%;
+    width: 0
+}
+
+.figure-line .line[data-v-1b240865] {
+    width: 6px;
+    height: auto;
+    position: absolute;
+    bottom: -3px;
+    left: calc(50% - 3px)
+}
+
+.figure-line .line.size--l[data-v-1b240865] {
+    width: 10px;
+    bottom: -5px;
+    left: calc(50% - 5px)
+}
+
+.figure-line .label[data-v-1b240865] {
+    position: absolute;
+    top: calc(100% + 10px);
+    left: 0;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.figure-line .label .label__item[data-v-1b240865] {
+    color: #c8e2e8;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 14px;
+    white-space: nowrap;
+    font-family: RPG_CN_Condensed
+}
+
+.figure-line .label .label__item.size--l[data-v-1b240865] {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700
+}
+
+.figure-line .label .label__item[data-v-1b240865]:not(:first-child) {
+    margin-top: 4px;
+    color: #6fbed1;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 12px
+}
+
+.figure-line .label .label__item:not(:first-child).size--l[data-v-1b240865] {
+    font-size: 14px;
+    line-height: 20px
+}
+
+.fans-figure[data-v-7734411a] {
+    height: 100%;
+    padding: 20px 20px 0
+}
+
+.fans-figure .wrapper[data-v-7734411a] {
+    overflow: hidden;
+    margin-top: 36px;
+    height: calc(100% - 36px);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    padding-bottom: 63px
+}
+
+.fans-figure .main-wrapper[data-v-7734411a] {
+    height: auto;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: stretch;
+    -ms-flex-pack: stretch;
+    justify-content: stretch;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    align-items: flex-end;
+    position: relative;
+    width: 90%;
+    -ms-flex-item-align: start;
+    align-self: flex-start
+}
+
+.fans-figure .main[data-v-7734411a] {
+    position: relative;
+    bottom: -1px;
+    left: 0;
+    z-index: 3;
+    width: 100%
+}
+
+.fans-figure .main .figure[data-v-7734411a] {
+    position: relative;
+    z-index: 3;
+    width: 100%;
+    height: 0;
+    padding-bottom: 46.05%;
+    background: no-repeat bottom/100% 100%;
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/figure@pc.03d62328.png);
+    -webkit-clip-path: inset(0 100% 0 0);
+    clip-path: inset(0 100% 0 0)
+}
+
+.fans-figure .main .figure.visible[data-v-7734411a] {
+    -webkit-clip-path: inset(0 var(--clip-right) 0 0);
+    clip-path: inset(0 var(--clip-right) 0 0);
+    -webkit-transition: -webkit-clip-path .4s cubic-bezier(.68, .16, .43, .81);
+    transition: -webkit-clip-path .4s cubic-bezier(.68, .16, .43, .81);
+    -o-transition: clip-path .4s cubic-bezier(.68, .16, .43, .81);
+    transition: clip-path .4s cubic-bezier(.68, .16, .43, .81);
+    transition: clip-path .4s cubic-bezier(.68, .16, .43, .81), -webkit-clip-path .4s cubic-bezier(.68, .16, .43, .81)
+}
+
+.fans-figure .main .progress-cursor[data-v-7734411a] {
+    position: absolute;
+    bottom: 0
+}
+
+.fans-figure .main .progress-cursor[data-v-7734411a]:before {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #8eedf1;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    opacity: .3
+}
+
+.fans-figure .main .progress-cursor .cursor-label[data-v-7734411a] {
+    z-index: 10;
+    position: absolute;
+    bottom: calc(12px + 100%);
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    min-width: 58px;
+    height: 26px;
+    padding: 0 8px 4px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    color: var(--general-grey-black-1, #000);
+    font-family: RPG_CN_Condensed;
+    text-align: center;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/bubble.547e3518.png);
+    opacity: 0
+}
+
+.fans-figure .main .progress-cursor .cursor-label.visible[data-v-7734411a] {
+    opacity: 1;
+    -webkit-transition: opacity .4s .4s;
+    -o-transition: opacity .4s .4s;
+    transition: opacity .4s .4s
+}
+
+.fans-figure .main .progress-cursor .cursor-label .cursor-label-bg[data-v-7734411a] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 22px;
+    border-radius: 11px;
+    background: #ecf4f7
+}
+
+.fans-figure .main .progress-cursor .cursor-label .cursor-label-bg .cursor-label-arrow[data-v-7734411a] {
+    position: absolute;
+    width: 10px;
+    height: 7px;
+    top: calc(100% - 2px);
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%)
+}
+
+.fans-figure .main .progress-cursor .cursor-label .cursor-label-txt[data-v-7734411a] {
+    position: relative;
+    z-index: 1
+}
+
+.fans-figure .main .progress-cursor .cursor-dot[data-v-7734411a] {
+    z-index: 5;
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    -webkit-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2)
+}
+
+.fans-figure .main .progress-cursor .cursor-dot .cursor-dot-center[data-v-7734411a] {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #8dedf0;
+    background: #191f28
+}
+
+.fans-figure .main .progress-cursor .cursor-line[data-v-7734411a] {
+    z-index: 4;
+    position: absolute;
+    height: calc(100% - 8px);
+    top: 8px;
+    width: 0;
+    left: -1px;
+    border: 1px dashed #8dedf1;
+    border-top: none;
+    border-bottom: none;
+    opacity: 0
+}
+
+.fans-figure .main .progress-cursor .cursor-line.visible[data-v-7734411a] {
+    opacity: 1;
+    -webkit-transition: opacity .2s .4s;
+    -o-transition: opacity .2s .4s;
+    transition: opacity .2s .4s
+}
+
+.fans-figure .base-line[data-v-7734411a] {
+    height: 2px;
+    background: #4f5862
+}
+
+.fans-figure .line-marks[data-v-7734411a] {
+    height: 0
+}
+
+.fans-figure .line-marks[data-v-7734411a], .fans-figure .medal-container[data-v-7734411a] {
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: distribute;
+    justify-content: space-around
+}
+
+.fans-figure .medal-container[data-v-7734411a] {
+    z-index: 5;
+    position: relative
+}
+
+.fans-figure .medal-container .medal[data-v-7734411a] {
+    position: relative;
+    width: 0;
+    height: 0;
+    bottom: 11px;
+    -webkit-transform: scale(1.6667);
+    -ms-transform: scale(1.6667);
+    transform: scale(1.6667);
+    -webkit-transform-origin: bottom;
+    -ms-transform-origin: bottom;
+    transform-origin: bottom
+}
+
+.fans-figure .medal-container .medal[data-v-7734411a]:before {
+    content: "";
+    position: absolute;
+    width: 36px;
+    height: 36px;
+    left: -18px;
+    bottom: 0;
+    background: no-repeat 50%/contain
+}
+
+.fans-figure .medal-container .medal.medal--gold[data-v-7734411a]:before {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/medal-gold.a05b697c.png)
+}
+
+.fans-figure .medal-container .medal.medal--silver[data-v-7734411a]:before {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/medal-silver.8a363781.png)
+}
+
+.fans-figure .medal-container .medal.medal--got[data-v-7734411a]:after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    left: -5px;
+    bottom: 0;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/medal--got.e1ef0eba.png)
+}
+
+.ghost-hunting[data-v-e688361a] {
+    padding: 0 40px
+}
+
+.ghost-hunting .profile[data-v-e688361a] {
+    margin-top: 28px;
+    width: 100%;
+    height: 72px;
+    position: relative;
+    overflow: visible
+}
+
+.ghost-hunting .profile .profile-bg[data-v-e688361a] {
+    position: absolute;
+    left: 0;
+    top: -18px;
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/profile-bg@pc.e1dd7f28.png) no-repeat 0/100% 100%;
+    width: 883px;
+    height: 98px
+}
+
+.ghost-hunting .profile .profile-fg[data-v-e688361a] {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding: 12px 16px
+}
+
+.ghost-hunting .profile .profile-fg .avatar[data-v-e688361a] {
+    width: 48px;
+    height: 48px;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/avatar.02b1ef6d.png);
+    position: relative
+}
+
+.ghost-hunting .profile .profile-fg .avatar[data-v-e688361a]:after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 20px;
+    height: 20px;
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/avatar-icon-0.1011f1e2.png) no-repeat 50%/contain
+}
+
+.ghost-hunting .profile .profile-fg .avatar--stage-1[data-v-e688361a]:after {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/avatar-icon-1.04170de5.png)
+}
+
+.ghost-hunting .profile .profile-fg .avatar--stage-2[data-v-e688361a]:after {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/avatar-icon-2.323bef5b.png)
+}
+
+.ghost-hunting .profile .profile-fg .info[data-v-e688361a] {
+    margin-left: 16px;
+    max-width: 580px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.ghost-hunting .profile .profile-fg .info .nickname[data-v-e688361a] {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    white-space: nowrap;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    color: #c5e8ef;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px
+}
+
+.ghost-hunting .profile .profile-fg .info .info-divider[data-v-e688361a] {
+    margin: 0 24px;
+    width: 1px;
+    height: 12px;
+    background: rgba(180, 215, 223, .6)
+}
+
+.ghost-hunting .profile .profile-fg .info .fans[data-v-e688361a] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.ghost-hunting .profile .profile-fg .info .fans .fans-label[data-v-e688361a] {
+    color: #c5e8ef;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px
+}
+
+.ghost-hunting .profile .profile-fg .info .fans .fans-num[data-v-e688361a] {
+    margin-left: 8px;
+    color: #e4f8fc;
+    font-family: RPG_CN_Condensed;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px
+}
+
+.ghost-hunting .profile .profile-fg .subscription[data-v-e688361a] {
+    position: absolute;
+    right: 94px;
+    top: 22px;
+    height: 28px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border-radius: 2px;
+    border: 1px solid #125d6e;
+    background: #073c54;
+    padding: 0 8px;
+    color: #c5e8ef;
+    font-size: 14px;
+    line-height: 20px
+}
+
+.ghost-hunting .profile .profile-fg .fans-level[data-v-e688361a] {
+    font-family: RPG_CN_Condensed;
+    width: 28px;
+    position: absolute;
+    top: 31px;
+    right: 27px;
+    color: #e6f3f5;
+    overflow: visible;
+    white-space: nowrap;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px
+}
+
+.ghost-hunting .chart[data-v-e688361a] {
+    margin: 28px 0 40px;
+    width: 880px;
+    height: 586px;
+    border: 1px solid rgba(25, 153, 165, .39);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 25, 31, .81)), to(rgba(35, 48, 61, .81)));
+    background: -webkit-linear-gradient(top, rgba(22, 25, 31, .81), rgba(35, 48, 61, .81));
+    background: -o-linear-gradient(top, rgba(22, 25, 31, .81) 0, rgba(35, 48, 61, .81) 100%);
+    background: linear-gradient(180deg, rgba(22, 25, 31, .81), rgba(35, 48, 61, .81));
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    position: relative
+}
+
+.ghost-hunting .chart .popularity[data-v-e688361a] {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: #c8e2e8;
+    top: 20px;
+    left: 20px
+}
+
+.ghost-hunting .chart .popularity[data-v-e688361a]:before {
+    content: "";
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 4px;
+    height: 18px;
+    background: #61f0f3
+}
+
+.ghost-hunting .chart .popularity .popularity-label[data-v-e688361a] {
+    margin-left: 8px;
+    color: #c8e2e8;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px
+}
+
+.ghost-hunting .chart .popularity .popularity-num[data-v-e688361a] {
+    font-family: RPG_CN_Condensed;
+    margin-left: 8px;
+    color: #c8e2e8;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 14px
+}
+
+.ghost-hunting .footer[data-v-e688361a] {
+    margin-top: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+}
+
+.ghost-hunting .footer .strategy-button[data-v-e688361a] {
+    cursor: pointer;
+    width: 309px;
+    height: 30px;
+    padding: 0 16px;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/strategy-btn-bg.5af572e6.png);
+    color: hsla(0, 0%, 100%, .85);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 30px
+}
+
+.challenge[data-v-82c5a256] {
+    width: 880px;
+    padding: 12px 20px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    background: rgba(41, 92, 110, .41);
+    position: relative
+}
+
+.challenge .relative[data-v-82c5a256] {
+    position: relative
+}
+
+.challenge[data-v-82c5a256]:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-image-source: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/card-side@pc.1922918f.png);
+    border-image-slice: 15.5555555556% 1.5909090909% fill;
+    border-image-width: 14px;
+    border-width: 14px;
+    pointer-events: none
+}
+
+.challenge--empty[data-v-82c5a256] {
+    height: 102px
+}
+
+.challenge--sp[data-v-82c5a256]:before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    right: 4px;
+    bottom: 2px;
+    left: 4px;
+    background: no-repeat 50%/cover url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/card-bg-sp@pc.8dee89cc.png)
+}
+
+.challenge .challenge__header[data-v-82c5a256] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between
+}
+
+.challenge .challenge__header .challenge__title[data-v-82c5a256] {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    color: rgba(204, 255, 250, .9);
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px
+}
+
+.challenge .challenge__header .challenge__fire[data-v-82c5a256] {
+    margin-left: 16px;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.challenge .challenge__header .challenge__fire__icon[data-v-82c5a256] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/ghost-fire--stroke.ee492bf0.png)
+}
+
+.challenge .challenge__header .challenge__fire__icon--active[data-v-82c5a256] {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/ghost-fire--fill.90dae6c8.png)
+}
+
+.challenge .challenge__header .challenge__fire__icon[data-v-82c5a256]:not(:first-child) {
+    margin-left: 8px
+}
+
+.challenge .challenge__divider[data-v-82c5a256] {
+    width: 100%;
+    height: 10px;
+    background: no-repeat 50%/100% 100% url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/divider@pc.bb16995a.png);
+    margin: 8px 0
+}
+
+.challenge .challenge__stages[data-v-82c5a256] {
+    display: grid;
+    grid-template-columns:repeat(4, 1fr);
+    grid-template-rows:1;
+    gap: 12px;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between
+}
+
+.challenge .challenge__stages .challenge__stage[data-v-82c5a256] {
+    min-width: 0;
+    overflow: hidden;
+    padding: 8px 16px;
+    background: rgba(63, 109, 125, .2);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px)
+}
+
+.challenge .challenge__stages .challenge__stage__label[data-v-82c5a256] {
+    color: #aefcf4;
+    font-size: 12px;
+    line-height: 18px;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis
+}
+
+.challenge .challenge__stages .challenge__stage__stars[data-v-82c5a256] {
+    width: 52px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between
+}
+
+.challenge .challenge__stages .challenge__stage__star[data-v-82c5a256] {
+    width: 16px;
+    height: 16px;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/memory-star--stroke.e3e6133b.png)
+}
+
+.challenge .challenge__stages .challenge__stage__star--active[data-v-82c5a256] {
+    background-image: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/memory-star--fill.657727e8.png)
+}
+
+.challenge .challenge__stages .challenge__stage__empty[data-v-82c5a256] {
+    color: rgba(173, 252, 244, .5);
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis
+}
+
+.challenge .challenge__empty[data-v-82c5a256] {
+    color: rgba(173, 252, 244, .5);
+    font-size: 14px;
+    line-height: 20px
+}
+
+.subduing-collection[data-v-0aa49ec3] {
+    color: #88ffe5
+}
+
+.subduing-collection .collection-cnt[data-v-0aa49ec3] {
+    -webkit-box-shadow: 0 0 4px 0 #74c4a6;
+    box-shadow: 0 0 4px 0 #74c4a6;
+    background: rgba(15, 43, 56, .8);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    position: relative;
+    min-height: 40px;
+    width: 328px;
+    margin: 78px 72px;
+    padding: 12px 20px
+}
+
+.subduing-collection .collection-cnt[data-v-0aa49ec3]:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-image-source: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/cnt-bg.b6cf7d2e.png);
+    border-image-slice: 22.2222222222% 10.5960264901% fill;
+    border-image-width: 16px;
+    border-width: 16px
+}
+
+.subduing-collection .collection-cnt .cnt-label[data-v-0aa49ec3] {
+    position: relative;
+    color: #88ffe5;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 20px
+}
+
+.subduing-collection .collection-cnt .cnt-value[data-v-0aa49ec3] {
+    position: relative;
+    color: #88ffe5;
+    font-weight: 600;
+    font-family: RPG_CN_Condensed;
+    margin-top: 8px;
+    font-size: 20px;
+    line-height: 20px
+}
+
+.subduing-collection .challenges[data-v-0aa49ec3] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.subduing-collection .challenges .challenge-card[data-v-0aa49ec3] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto
+}
+
+.subduing-collection .challenges .challenge-card[data-v-0aa49ec3]:not(:first-child) {
+    margin-top: 16px
+}
+
+.fox-story[data-v-3d759804] {
+    position: relative;
+    border-radius: 0 32px 0 0;
+    padding: 40px 0 33px;
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/ghost-hunting-bg@pc.a0d95f61.png) no-repeat top/100% auto, url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/subduing-collection-bg@pc.b8815a7b.png) no-repeat bottom/100% auto, linear-gradient(180deg, #091523, #11323d)
+
+}
+
+.fox-story--subduing[data-v-3d759804] {
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/subduing-collection-bg@pc.b8815a7b.png) no-repeat top/100% auto, -webkit-gradient(linear, left top, left bottom, from(#091523), to(#11323d));
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/subduing-collection-bg@pc.b8815a7b.png) no-repeat top/100% auto, -webkit-linear-gradient(top, #091523, #11323d);
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/subduing-collection-bg@pc.b8815a7b.png) no-repeat top/100% auto, -o-linear-gradient(top, #091523 0, #11323d 100%);
+    background: url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/subduing-collection-bg@pc.b8815a7b.png) no-repeat top/100% auto, linear-gradient(180deg, #091523, #11323d)
+}
+
+.fox-story--empty[data-v-3d759804] {
+    padding-top: 0
+}
+
+.fox-story[data-v-3d759804]:before {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    border-radius: 0 32px 0 0;
+    border: 1px solid hsla(0, 0%, 100%, .2)
+}
+
+.fox-story .activity__body[data-v-3d759804] {
+    width: 960px;
+    overflow: hidden
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tabs__wrap {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    height: auto !important;
+    margin-left: 40px
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tabs__nav {
+    padding-bottom: 0 !important;
+    background: transparent
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tabs__line {
+    display: none !important
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tab {
+    margin-right: 32px;
+    padding: 0 !important;
+    -webkit-box-flex: 0 !important;
+    -ms-flex: 0 0 auto !important;
+    flex: 0 0 auto !important;
+    cursor: pointer;
+    color: rgba(168, 209, 210, .4);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    -webkit-transition: color .1s, opacity .1s;
+    -o-transition: color .1s, opacity .1s;
+    transition: color .1s, opacity .1s
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tab:not(.van-tab--active):hover {
+    color: rgba(196, 230, 255, .4)
+}
+
+.fox-story .activity__body .tabs[data-v-3d759804] .van-tab--active {
+    z-index: 2;
+    color: #7cd4d6
+}
+
+.fox-story .activity__empty[data-v-3d759804] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    height: 796px
+}
+
+.fox-story .activity__empty .no-content[data-v-3d759804] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    height: auto
+}
+
+.fox-story .activity__empty .no-content[data-v-3d759804] .icon {
+    width: 120px;
+    height: 120px
+}
+
+.fox-story .activity__empty .no-content[data-v-3d759804] .text {
+    color: hsla(0, 0%, 100%, .65) !important;
+    font-size: 12px !important;
+    line-height: 14px;
+    margin-top: 4px !important
+}
+
+.fox-story .activity__empty[data-v-3d759804]:after {
+    -webkit-box-flex: 2;
+    -ms-flex: 2;
+    flex: 2
+}
+
+.fox-story .activity__footer[data-v-3d759804] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    margin-top: 20px
+}
+
+.fox-story .activity__footer .activity__link[data-v-3d759804] {
+    cursor: pointer;
+    width: 309px;
+    height: 30px;
+    padding: 0 16px;
+    background: no-repeat 50%/contain url(https://act.hoyolab.com/app/community-game-records-sea/rpg/images/strategy-btn-bg.5af572e6.png);
+    color: hsla(0, 0%, 100%, .85);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 30px
+}
diff --git a/resources/starrail/activity/fox_story.html b/resources/starrail/activity/fox_story.html
new file mode 100644
index 0000000..9069929
--- /dev/null
+++ b/resources/starrail/activity/fox_story.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link href="css/pc_f95b4488.css" rel="stylesheet">
+    <link href="css/c_hsr_act_FoxStory_4d8c2f06.css" rel="stylesheet">
+</head>
+<body>
+<div style="width: 1920px;" id="fox_story">
+    <div style="display: flex; justify-content: space-between;">
+        <div data-v-3d759804="" data-v-3dedffc2="" class="fox-story">
+        <div data-v-3d759804="" class="activity__body">
+            <div data-v-3d759804="" class="tabs van-tabs van-tabs--line">
+                <div style="height: 30px"></div>
+                <div class="van-tabs__wrap">
+                    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+                        <div role="tab" class="van-tab van-tab--active" aria-selected="true">
+                            <span class="van-tab__text van-tab__text--ellipsis">
+                                狐斋志异  -  {{ uid }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                {% set team = data.team %}
+                <div class="van-tabs__content van-tabs__content--animated">
+                    <div class="van-tabs__track"
+                         style="transform: translate3d(0%, 0px, 0px); transition-duration: 0.3s;">
+                        <div data-v-3d759804="" role="tabpanel" class="van-tab__pane-wrapper">
+                            <div class="van-tab__pane">
+                                <div data-v-e688361a="" data-v-3d759804="" class="ghost-hunting">
+                                    <div data-v-e688361a="" class="profile">
+                                        <div data-v-e688361a="" class="profile-bg"></div>
+                                        <div data-v-e688361a="" class="profile-fg">
+                                            <div data-v-e688361a="" class="avatar avatar--stage-1"></div>
+                                            <div data-v-e688361a="" class="info">
+                                                <div data-v-e688361a="" class="nickname">小桂子Guinevere</div>
+                                                <div data-v-e688361a="" class="info-divider"></div>
+                                                <div data-v-e688361a="" class="fans">
+                                                    <div data-v-e688361a="" class="fans-label">粉丝</div>
+                                                    <div data-v-e688361a="" class="fans-num">{{ team.fans }}</div>
+                                                </div>
+                                            </div>
+                                            <div data-v-e688361a="" class="subscription">订阅等级</div>
+                                            <div data-v-e688361a="" class="fans-level">{{ team.level }}</div>
+                                        </div>
+                                    </div>
+                                    <div style="height: 50px"></div>
+                                    <div data-v-e688361a="" class="chart">
+                                        <div data-v-e688361a="" class="popularity">
+                                            <div data-v-e688361a="" class="popularity-label">人气阶段</div>
+                                            <div data-v-e688361a="" class="popularity-num">{{ team.index_arrived }}级</div>
+                                        </div>
+                                        <div data-v-7734411a="" data-v-e688361a="" class="fans-figure">
+                                            <div data-v-7734411a="" class="wrapper">
+                                                <div data-v-7734411a="" class="main-wrapper">
+                                                    <div data-v-7734411a="" class="main">
+                                                        <div data-v-7734411a="" class="figure visible"
+                                                             style="--clip-right: {{ 100 - line[0] }}%;"></div>
+                                                        {% if line[1] %}
+                                                        <div data-v-7734411a="" class="progress-cursor"
+                                                             style="left: {{ line[0] }}%; height: {{ line[1] }}%;">
+                                                            <div data-v-7734411a="" class="cursor-label visible">
+                                                                <div data-v-7734411a="" class="cursor-label-bg">
+                                                                    <svg data-v-7734411a="" viewBox="0 0 10 7"
+                                                                         fill="none" class="cursor-label-arrow">
+                                                                        <path data-v-7734411a=""
+                                                                              d="M4.18627 5.86077L0 0H10L5.81373 5.86077C5.41491 6.41912 4.58509 6.41912 4.18627 5.86077Z"
+                                                                              fill="#ECF4F7"></path>
+                                                                    </svg>
+                                                                </div>
+                                                                <div data-v-7734411a="" class="cursor-label-txt">
+                                                                    {{ team.fans_str }}
+                                                                </div>
+                                                            </div>
+                                                            <div data-v-7734411a="" class="cursor-dot">
+                                                                <div data-v-7734411a="" class="cursor-dot-center"></div>
+                                                            </div>
+                                                            <div data-v-7734411a="" class="cursor-line visible"></div>
+                                                        </div>
+                                                        {% endif %}
+                                                    </div>
+                                                </div>
+                                                <div data-v-7734411a="" class="base-line"></div>
+                                                <div data-v-7734411a="" class="line-marks">
+                                                    {% for l in team.fans_range %}
+                                                    <div data-v-1b240865="" data-v-7734411a=""
+                                                         class="figure-line size--l">
+                                                        <img data-v-1b240865="" src="https://act.hoyolab.com/app/community-game-records-sea/rpg/images/line.32deff82.png" class="line size--l">
+                                                        <div data-v-1b240865="" class="label size--l">
+                                                            <div data-v-1b240865="" class="label__item size--l">
+                                                                {{ loop.index }}级
+                                                            </div>
+                                                            <div data-v-1b240865="" class="label__item size--l">
+                                                                {% if l > 10000 %}
+                                                                {{ l // 10000 }}万
+                                                                {% else %}
+                                                                {{ l }}
+                                                                {% endif %}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {% endfor %}
+                                                </div>
+                                                <div data-v-7734411a="" class="medal-container">
+                                                    {% set first_get = "" %}
+                                                    {% set second_get = "" %}
+                                                    {% if team.real_index_arrived >= 2 %}
+                                                    {% set first_get = "medal--got" %}
+                                                    {% endif %}
+                                                    {% if team.real_index_arrived >= 4 %}
+                                                    {% set second_get = "medal--got" %}
+                                                    {% endif %}
+                                                    <div data-v-7734411a="" class="medal medal--"></div>
+                                                    <div data-v-7734411a="" class="medal medal--"></div>
+                                                    <div data-v-7734411a="" class="medal medal--silver {{ first_get }}"></div>
+                                                    <div data-v-7734411a="" class="medal medal--"></div>
+                                                    <div data-v-7734411a="" class="medal medal--gold {{ second_get }}"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div data-v-3d759804="" data-v-3dedffc2="" class="fox-story fox-story--subduing">
+        <div data-v-3d759804="" class="activity__body">
+            <div data-v-3d759804="" class="tabs van-tabs van-tabs--line">
+                <div class="van-tabs__wrap">
+                    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+                        <div role="tab" class="van-tab van-tab--active" aria-selected="true">
+                            <span class="van-tab__text van-tab__text--ellipsis">
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="van-tabs__content van-tabs__content--animated">
+                    <div class="van-tabs__track"
+                         style="transform: translate3d(0%, 0px, 0px); transition-duration: 0.3s;">
+                        <div data-v-3d759804="" role="tabpanel"
+                             class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive" aria-hidden="true">
+                            <div class="van-tab__pane">
+                                <div data-v-0aa49ec3="" data-v-3d759804="" class="subduing-collection">
+                                    <div data-v-0aa49ec3="" class="collection-cnt">
+                                        <div data-v-0aa49ec3="" class="cnt-label">驱邪术收集</div>
+                                        <div data-v-0aa49ec3="" class="cnt-value">
+                                            {{ data.subdue_collect_cur }}/{{ data.subdue_collect_max }}
+                                        </div>
+                                    </div>
+                                    <div data-v-0aa49ec3="" class="challenges">
+                                        {% for subdue in data.subdues %}
+                                        {% set sp = "" %}
+                                        {% if loop.index == 5 %}
+                                        {% set sp = "challenge--sp" %}
+                                        {% endif %}
+                                        <div data-v-82c5a256="" data-v-0aa49ec3="" class="challenge challenge-card {{ sp }}">
+                                            <div data-v-82c5a256="" class="challenge__header relative">
+                                                <div data-v-82c5a256="" class="challenge__name">{{ subdue.name_mi18n }}</div>
+                                                <div data-v-82c5a256="" class="challenge__fire">
+                                                    {% for n in range(4) %}
+                                                    {% set active = "" %}
+                                                    {% if n < subdue.fire_cnt %}
+                                                    {% set active = "challenge__fire__icon--active" %}
+                                                    {% endif %}
+                                                    <div data-v-82c5a256=""
+                                                         class="challenge__fire__icon {{ active }}"></div>
+                                                    {% endfor %}
+                                                </div>
+                                            </div>
+                                            <div data-v-82c5a256="" class="challenge__divider relative"></div>
+                                            <div data-v-82c5a256="" class="challenge__stages relative">
+                                                {% set n_index = loop.index %}
+                                                {% for difficulty in subdue.difficulties %}
+                                                <div data-v-82c5a256="" class="challenge__stage">
+                                                    <div data-v-82c5a256="" class="challenge__stage__label">难度 {{ loop.index }}</div>
+                                                    {% if difficulty.has_challenge %}
+                                                    <div data-v-82c5a256="" class="challenge__stage__stars">
+                                                        {% set stars = difficulty.stars %}
+                                                        {% if n_index == 5 %}
+                                                        {% set stars = difficulty.stars_sp %}
+                                                        {% endif %}
+                                                        {% for n in stars %}
+                                                        {% set active = "" %}
+                                                        {% if n %}
+                                                        {% set active = "challenge__stage__star--active" %}
+                                                        {% endif %}
+                                                        <div data-v-82c5a256=""
+                                                             class="challenge__stage__star {{ active }}"></div>
+                                                        {% endfor %}
+                                                    </div>
+                                                    {% else %}
+                                                    <div data-v-82c5a256="" class="challenge__stage__empty">
+                                                        暂无挑战数据
+                                                    </div>
+                                                    {% endif %}
+                                                </div>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>