@jx3box/jx3box-vue3-ui 1.1.13 → 1.1.15

package/.eslintrc

@@ -12,7 +12,8 @@
                 "ignores": ["Item"]
             }
         ],
-        "no-useless-escape": "off"
+        "no-useless-escape": "off",
+        "no-unused-vars": "off"
     },
     "globals": {
         "defineOptions": "writable",

package/assets/img/header/check.svg

@@ -0,0 +1 @@
+<svg t="1726565101981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" width="200" height="200"><path d="M544.234145 146.178267c-202.342428 0-366.335433 163.993005-366.335433 366.335433 0 202.343451 163.993005 366.332363 366.335433 366.332363 202.366987 0 366.331339-163.988912 366.331339-366.332363C910.565485 310.171272 746.577596 146.178267 544.234145 146.178267L544.234145 146.178267zM475.964272 690.441065 312.25984 526.736633l37.042661-37.042661L475.964272 616.355743l263.221983-263.225053 37.042661 37.042661L475.964272 690.441065 475.964272 690.441065zM475.964272 690.441065" fill="#67C23A" p-id="10380"></path></svg>

package/assets/js/voice.js

@@ -0,0 +1,238 @@
+import $ from "jquery";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+
+/**
+ * 渲染音频组件
+ * 将 e-audio 转换为实际的音频播放器
+ * @param {string} selector - 选择器，默认为 ".w-audio, .e-audio"
+ */
+function renderVoice(selector = ".w-audio, .e-audio") {
+    try {
+        $(selector).each(function (i, ele) {
+            const $audio = $(this);
+            const content = $audio.text().trim();
+
+            // 解析内容：name:xxx;author:xxx;user_id:xxx;src:xxx
+            const params = {};
+            content.split(";").forEach((item) => {
+                const [key, value] = item.split("|");
+                if (key && value !== undefined) {
+                    params[key.trim()] = value.trim();
+                }
+            });
+
+            // 提取参数
+            const { name = "未命名音频", author = "未知", user_id = "", src = "" } = params;
+
+            if (!src) {
+                console.warn("音频源地址为空", content);
+                return;
+            }
+
+            // 生成唯一ID
+            const playerId = `audio-player-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+            // 获取用户头像，如果没有则使用默认图片
+            const avatar = showAvatar(params.avatar, 240);
+
+            // 渲染音频播放器 - 使用项目中定义的样式结构
+            const html = `
+                <div class="w-audio-player" id="${playerId}" data-user-id="${user_id}">
+                    <div class="m-item">
+                        <div class="u-title">
+                            <div class="clip">
+                                <div class="marquee-wrapper">
+                                    <span class="marquee-text">${name}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="u-author">
+                            练习生：<a href="https://www.jx3box.com/author/${user_id}" target="_blank">${author}</a>
+                        </div>
+                        
+                        <div class="m-record">
+                            <img class="u-needle" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/needle.svg" />
+                            <a href="https://www.jx3box.com/author/${user_id}" target="_blank" class="u-record">
+                                <img class="u-avatar" src="${avatar}" />
+                            </a>
+                        </div>
+
+                        <div class="m-progress">
+                            <div class="u-progress-bar">
+                                <div class="u-progress-fill"></div>
+                                <div class="u-progress-handle"></div>
+                            </div>
+                        </div>
+
+                        <div class="m-play">
+                            <div class="u-play-button">
+                                <img class="u-icon" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/left.svg" />
+                                <img class="u-icon u-play" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/play.svg" data-play-icon="https://cdn.jx3box.com/design/event/jx3cxk/web/item/play.svg" data-stop-icon="https://cdn.jx3box.com/design/event/jx3cxk/web/item/stop.svg" />
+                                <img class="u-icon" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/right.svg" />
+                            </div>
+                        </div>
+                    </div>
+                    <audio preload="metadata" src="${src}"></audio>
+                </div>
+            `;
+
+            $audio.replaceWith(html);
+
+            // 初始化播放器功能
+            initAudioPlayer(playerId);
+        });
+    } catch (e) {
+        console.error("音频渲染错误:", e);
+    }
+}
+
+/**
+ * 初始化音频播放器功能
+ * @param {string} playerId - 播放器ID
+ */
+function initAudioPlayer(playerId) {
+    const $player = $(`#${playerId}`);
+    const audio = $player.find("audio")[0];
+    const $playBtn = $player.find(".u-play");
+    const $needle = $player.find(".u-needle");
+    const $avatar = $player.find(".u-avatar");
+    const $progressBar = $player.find(".u-progress-bar");
+    const $progressFill = $player.find(".u-progress-fill");
+    const $progressHandle = $player.find(".u-progress-handle");
+
+    if (!audio) {
+        console.warn("音频元素未找到", playerId);
+        return;
+    }
+
+    let isPlaying = false;
+    let isDragging = false;
+
+    // 播放/暂停切换
+    $playBtn.on("click", function () {
+        const playIcon = $(this).data("play-icon");
+        const stopIcon = $(this).data("stop-icon");
+
+        if (isPlaying) {
+            audio.pause();
+            $(this).attr("src", playIcon);
+            $needle.removeClass("isPlaying");
+            $avatar.addClass("isPaused");
+            $player.removeClass("play");
+        } else {
+            audio.play();
+            $(this).attr("src", stopIcon);
+            $needle.addClass("isPlaying");
+            $avatar.removeClass("isPaused").addClass("isRotate");
+            $player.addClass("play");
+        }
+        isPlaying = !isPlaying;
+    });
+
+    // 音频播放状态改变
+    audio.addEventListener("play", function () {
+        isPlaying = true;
+        $playBtn.attr("src", $playBtn.data("stop-icon"));
+        $needle.addClass("isPlaying");
+        $avatar.removeClass("isPaused").addClass("isRotate");
+        $player.addClass("play");
+    });
+
+    audio.addEventListener("pause", function () {
+        isPlaying = false;
+        $playBtn.attr("src", $playBtn.data("play-icon"));
+        $needle.removeClass("isPlaying");
+        $avatar.addClass("isPaused");
+        $player.removeClass("play");
+    });
+
+    // 更新进度条
+    audio.addEventListener("timeupdate", function () {
+        if (!isDragging && audio.duration) {
+            const progress = (audio.currentTime / audio.duration) * 100;
+            $progressFill.css("width", progress + "%");
+            $progressHandle.css("left", progress + "%");
+        }
+    });
+
+    // 进度条拖拽和点击
+    function updateProgress(e) {
+        const rect = $progressBar[0].getBoundingClientRect();
+        const offsetX = e.clientX - rect.left;
+        const progress = Math.max(0, Math.min(1, offsetX / rect.width));
+        const newTime = progress * audio.duration;
+
+        $progressFill.css("width", progress * 100 + "%");
+        $progressHandle.css("left", progress * 100 + "%");
+
+        if (isDragging || e.type === "click") {
+            audio.currentTime = newTime;
+        }
+    }
+
+    $progressBar.on("mousedown", function (e) {
+        isDragging = true;
+        updateProgress(e);
+    });
+
+    $(document).on("mousemove", function (e) {
+        if (isDragging) {
+            updateProgress(e);
+        }
+    });
+
+    $(document).on("mouseup", function (e) {
+        if (isDragging) {
+            updateProgress(e);
+            isDragging = false;
+        }
+    });
+
+    $progressBar.on("click", function (e) {
+        updateProgress(e);
+    });
+
+    // 音频结束
+    audio.addEventListener("ended", function () {
+        isPlaying = false;
+        audio.currentTime = 0;
+        $playBtn.attr("src", $playBtn.data("play-icon"));
+        $needle.removeClass("isPlaying");
+        $avatar.removeClass("isRotate isPaused");
+        $player.removeClass("play");
+        $progressFill.css("width", "0%");
+        $progressHandle.css("left", "0%");
+    });
+
+    // 检查标题是否需要滚动
+    checkTextWidth($player);
+}
+
+/**
+ * 检查文本宽度，决定是否需要滚动动画
+ * @param {jQuery} $player - 播放器元素
+ */
+function checkTextWidth($player) {
+    const $wrapper = $player.find(".marquee-wrapper");
+    const $text = $player.find(".marquee-text");
+
+    if (!$text.length || !$wrapper.length) return;
+
+    const textWidth = $text[0].offsetWidth;
+    const containerWidth = $wrapper.parent()[0].clientWidth;
+
+    if (textWidth > containerWidth) {
+        $wrapper.addClass("marquee-active");
+        // 添加复制的文本用于无缝滚动
+        const copyText = $text.clone().addClass("copy");
+        $wrapper.append(copyText);
+
+        // 计算动画时长
+        const totalWidth = textWidth * 2 + 180; // 180px 是间距
+        const duration = totalWidth / 30; // 30px/s
+        $wrapper.css("animation-duration", `${duration}s`);
+        $wrapper.addClass("marquee-animate");
+    }
+}
+
+export default renderVoice;

package/assets/js/xss.js

@@ -0,0 +1,130 @@
+import sanitizeHtml from "sanitize-html";
+import * as cheerio from "cheerio";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
+
+const FORBID = new Set(["script", "object", "embed", "applet", "base", "meta", "link"]);
+
+const EXTRA_TAGS = [
+    "img",
+    "h1", "h2", "h3", "h4", "h5", "h6",
+    "table", "thead", "tbody", "tr", "th", "td",
+    "blockquote", "pre", "code", "hr",
+    "video", "source",
+    "iframe", "style",
+    "colgroup", "col",
+];
+
+// 必须顶层的 at-rule（你说不需要动画，但 keyframes 也可能被编辑器/作者写进来，留着更稳）
+const TOP_LEVEL_AT = new Set(["keyframes", "-webkit-keyframes", "font-face"]);
+
+function stripDangerousCss(css) {
+    if (!css) return css;
+    return css
+        .replace(/@import\s+[^;]+;?/gi, "")
+        .replace(/url\s*\(\s*[^)]+\s*\)/gi, "")
+        .replace(/expression\s*\([^)]*\)/gi, "");
+}
+
+// 暴力把 style 内容 nest 到 .c-article
+function nestCssBrutally(cssText, scope = ".c-article") {
+    let css = stripDangerousCss(cssText || "");
+    if (!css.trim()) return css;
+
+    const root = postcss.parse(css, { parser: safeParser });
+
+    const top = [];
+    const rest = [];
+
+    (root.nodes || []).forEach((node) => {
+        if (node.type === "atrule" && TOP_LEVEL_AT.has(String(node.name).toLowerCase())) {
+            top.push(node.toString());
+        } else {
+            rest.push(node.toString());
+        }
+    });
+
+    const restCss = rest.join("\n").trim();
+    if (!restCss) return top.join("\n").trim();
+
+    return `${top.join("\n")}\n${scope}{\n${restCss}\n}`.trim();
+}
+
+function nestAllStyleTags(html, scope = ".c-article") {
+    const $ = cheerio.load(html, { decodeEntities: false });
+
+    $("style").each((_, el) => {
+        const oldCss = $(el).html() || "";
+        const newCss = nestCssBrutally(oldCss, scope);
+        $(el).text(newCss);
+    });
+
+    return $.html();
+}
+
+export default function sanitizeRichText(html) {
+    if (!html) return html;
+
+    // 先把 <style> 内容暴力 nest 到 .c-article
+    html = nestAllStyleTags(html, ".c-article");
+
+    const allowedTags = sanitizeHtml.defaults.allowedTags
+        .concat(EXTRA_TAGS)
+        .filter((t, i, arr) => arr.indexOf(t) === i)
+        .filter((t) => !FORBID.has(t));
+
+    return sanitizeHtml(html, {
+        disallowedTagsMode: "discard",
+        allowedTags,
+
+        allowedAttributes: {
+            "*": ["class", "style", "title", "id", "data-*"],
+            a: ["href", "target", "rel", "title", "class", "style"],
+            img: ["src", "alt", "title", "width", "height", "class", "style", "loading", "decoding"],
+            video: ["controls", "width", "height", "class", "style"],
+            source: ["src", "type"],
+            iframe: ["src", "width", "height", "frameborder", "scrolling", "allowfullscreen", "sandbox", "referrerpolicy", "class", "style"],
+            td: ["colspan", "rowspan", "align", "valign", "class", "style"],
+            th: ["colspan", "rowspan", "align", "valign", "class", "style"],
+            col: ["span", "width", "class", "style"],
+            style: ["type", "media"],
+        },
+
+        allowedSchemes: ["http", "https", "mailto", "tel"],
+        allowProtocolRelative: true,
+        allowedSchemesByTag: { img: ["http", "https", "data"], iframe: ["http", "https"] },
+
+        transformTags: {
+            "*": (tagName, attribs) => {
+                const out = { ...attribs };
+
+                // 移除 on*
+                for (const k of Object.keys(out)) if (/^on/i.test(k)) delete out[k];
+
+                // style 属性：禁 @import / url(
+                if (typeof out.style === "string" && out.style) {
+                    let s = out.style;
+                    s = s.replace(/@import\s+[^;]+;?/gi, "");
+                    s = s.replace(/url\s*\(\s*[^)]+\s*\)/gi, "");
+                    s = s.replace(/;;+/g, ";").trim();
+                    if (!s) delete out.style;
+                    else out.style = s;
+                }
+
+                // 兜底禁 javascript:
+                for (const key of ["href", "src"]) {
+                    if (out[key] && /^\s*javascript:/i.test(out[key])) out[key] = "";
+                }
+
+                // 仅允许 data:image/*
+                if (tagName === "img" && typeof out.src === "string" && out.src.startsWith("data:")) {
+                    if (!/^data:image\/(png|jpe?g|gif|webp|avif|bmp|svg\+xml);/i.test(out.src)) {
+                        out.src = "";
+                    }
+                }
+
+                return { tagName, attribs: out };
+            },
+        },
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-vue3-ui",
-    "version": "1.1.13",
+    "version": "1.1.15",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -26,11 +26,11 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
-        "@jx3box/jx3box-common": "^8.7.4",
-        "@jx3box/jx3box-data": "^3.8.9",
+        "@jx3box/jx3box-common": "^8.7.5",
+        "@jx3box/jx3box-data": "^3.9.2",
         "@jx3box/jx3box-emotion": "^1.2.14",
         "@jx3box/jx3box-macro": "^1.0.1",
-        "@jx3box/jx3box-talent": "^1.3.10",
+        "@jx3box/jx3box-talent": "^1.3.11",
         "@jx3box/reporter": "^0.0.4",
         "@tinymce/tinymce-vue": "^5.1.1",
         "@vueuse/core": "^9.13.0",

package/src/Header.vue

@@ -36,7 +36,7 @@ import search from "./header/Search.vue";
 import nav from "./header/Nav.vue";
 import user from "./header/User.vue";
 import Box from "../src/Box.vue";
-import { isMiniProgram, miniprogramHack } from "@jx3box/jx3box-common/js/utils";
+import { isMiniProgram, isApp as checkIsApp, miniprogramHack } from "@jx3box/jx3box-common/js/utils";
 import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
 import User from "@jx3box/jx3box-common/js/user";
 import { getGlobalConfig } from "../service/header.js";
@@ -66,7 +66,7 @@ export default {
             const urlParams = new URLSearchParams(window.location.search);
             const from = urlParams.get("from");
             from && sessionStorage.setItem("from", from);
-            if (isMiniProgram()) {
+            if (isMiniProgram() || checkIsApp()) {
                 const appid = urlParams.get("appid");
                 const item = miniprogram?.find((item) => item.appid === appid);
                 const from = urlParams.get("_from");

package/src/header/UserInfo.vue

@@ -68,7 +68,7 @@
 
                     <el-button-group class="u-actions">
                         <a class="el-button el-button--default is-plain" href="/dashboard">个人中心</a>
-                        <a class="el-button el-button--default is-plain" :href="url.profile">资料设置</a>
+                        <a class="el-button el-button--default is-plain" @click="changeAlternate">切换马甲</a>
                         <a class="el-button el-button--default is-plain" href="/dashboard/frame">主题风格</a>
                     </el-button-group>
 
@@ -97,6 +97,7 @@
                 </div>
             </template>
         </div>
+        <alternate></alternate>
     </div>
 </template>
 
@@ -109,10 +110,15 @@ import { getMyInfo } from "../../service/author";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { copyText } from "../../utils";
 import { getMenu } from "../../service/header";
+import Bus from "../../utils/bus";
+import alternate from "./alternate.vue";
 export default {
     name: "HeaderUserInfo",
     props: ["asset"],
     emits: ["logout", "update"],
+    components: {
+        alternate,
+    },
     data() {
         return {
             isPhone: window.innerWidth < 768,
@@ -221,6 +227,9 @@ export default {
                 console.log("loadPanel error", e);
             }
         },
+        changeAlternate: function() {
+            Bus.emit("showAlternate");
+        }
     },
 };
 </script>

package/src/header/alternate.vue

@@ -0,0 +1,285 @@
+<template>
+    <el-dialog append-to-body v-model="visible" custom-class="c-alternate" width="320px" title="切换马甲">
+        <div class="c-alternate__content">
+            <div
+                class="c-alternate-item"
+                :class="{ 'is-active': profile.uid == item.uid, 'is-expired': isExpired(item.created_at) }"
+                v-for="item in alternate"
+                :key="item.uid"
+                @click="onSelectAlternate(item)"
+            >
+                <div class="m-avatar">
+                    <img
+                        class="u-active"
+                        v-if="profile.uid == item.uid"
+                        src="../../assets/img/header/check.svg"
+                        alt=""
+                    />
+                    <img class="u-avatar" :src="showAvatar(item.avatar)" alt="" />
+                </div>
+                <div class="m-misc">
+                    <span class="u-name"><span class="u-label">用户昵称：</span>{{ item.name }}</span>
+                    <span class="u-time">
+                        <span class="u-label">上次登录：</span>{{ getFormatTime(item.created_at) }}
+                        <span class="u-extra" v-if="isExpired(item.created_at)">(已过期)</span>
+                    </span>
+                </div>
+
+                <div class="u-remove" @click.stop="onRemoveAlternate(item)" v-if="profile.uid != item.uid">
+                    <i class="el-icon-close"></i>
+                </div>
+            </div>
+            <div class="c-alternate-btn" :class="{ 'is-disabled': overLength }" @click="onAddAlternate">+</div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import dayjs from "dayjs";
+import User from "@jx3box/jx3box-common/js/user";
+import { __Links } from "@jx3box/jx3box-common/data/jx3box.json";
+import { refreshAuth } from "../../service/cms"
+export default {
+    name: "AlternateComponent",
+    data() {
+        return {
+            visible: false,
+
+            alternate: [
+                // {
+                //     uid: 100,
+                //     name: "马甲1",
+                //     avatar: "https://avatar.jx3box.com/avatar/1",
+                //     created_at: 1620000000000,
+                // },
+            ],
+        };
+    },
+    computed: {
+        profile() {
+            return User.getInfo();
+        },
+        overLength() {
+            return this.alternate.length > 5;
+        },
+    },
+    mounted() {
+        Bus.on("showAlternate", () => {
+            this.visible = true;
+        });
+        this.init();
+    },
+    methods: {
+        init() {
+            // 获取localStorage中以jx3box-alternate-开头的数据
+            try {
+                let keys = Object.keys(localStorage);
+                let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
+
+                alternate.forEach((key) => {
+                    const item = JSON.parse(localStorage.getItem(key));
+                    if (this.isExpired(item.created_at)) {
+                        localStorage.removeItem(key);
+                    }
+
+                    if (!this.alternate.find((alt) => alt.uid == item.uid)) {
+                        this.alternate.push(item);
+                    }
+                });
+
+                // 如果当前没有马甲，添加当前登录用户
+                if (!this.alternate?.length) {
+                    const data = {
+                        uid: this.profile.uid,
+                        name: this.profile.name,
+                        avatar: localStorage.getItem("avatar"),
+                        created_at: Number(localStorage.getItem("created_at")),
+                        group: ~~this.profile.group,
+                        bind_wx: ~~this.profile.bind_wx,
+                        token: localStorage.getItem("token"),
+                        status: ~~this.profile.status,
+                    };
+                    this.alternate.unshift(data);
+
+                    localStorage.setItem("jx3box-alternate-" + this.profile.uid, JSON.stringify(data));
+                }
+
+                // 当前激活的排在第一
+                this.alternate.sort((a, _) => {
+                    return a.uid == this.profile.uid ? -1 : 1;
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        showAvatar(url) {
+            return showAvatar(url, "m");
+        },
+        getFormatTime(time) {
+            return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+        },
+        // 判断是否已过期
+        isExpired(time) {
+            return dayjs().diff(time, "day") > 30;
+        },
+        // 选择马甲
+        onSelectAlternate(item) {
+            if (this.isExpired(item.created_at)) {
+                this.$message.error("该马甲已过期，请重新登录");
+                return;
+            }
+            if (this.profile.uid == item.uid) {
+                return;
+            }
+            this.$confirm("确定要切换到该马甲吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    User.update(item).then(async () => {
+                        localStorage.setItem(
+                            "jx3box-alternate-" + item.uid,
+                            JSON.stringify({
+                                ...item,
+                                created_at: Number(localStorage.getItem("created_at")),
+                            })
+                        );
+                        await refreshAuth();
+                        location.reload();
+                        this.visible = false;
+                    });
+                })
+                .catch(() => {});
+        },
+        // 删除马甲
+        onRemoveAlternate(item) {
+            this.$confirm("确定要删除该马甲吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    localStorage.removeItem("jx3box-alternate-" + item.uid);
+
+                    this.alternate = this.alternate.filter((alt) => alt.uid != item.uid);
+                })
+                .catch(() => {});
+        },
+        // 新增马甲
+        onAddAlternate() {
+            if (this.overLength) {
+                this.$message.error("最多只能添加5个马甲");
+                return;
+            }
+            // 跳转至登录页
+            location.href = __Links.account.login + "?alternate=1";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-alternate {
+    .el-dialog__title {
+        .fz(12px);
+    }
+    .el-dialog__body {
+        padding: 0;
+    }
+    .el-dialog__header {
+        // padding: 10px;
+        border-bottom: #dcdfe6 1px solid;
+    }
+    .c-alternate__content {
+        max-height: 600px;
+        overflow-y: auto;
+    }
+    .c-alternate-item {
+        .flex;
+        gap: 10px;
+        .pointer;
+        padding: 10px;
+        .pr;
+        border-bottom: 1px solid #eee;
+        .fz(13px);
+
+        &:hover {
+            background-color: @bg-light;
+
+            .u-remove {
+                display: block;
+            }
+        }
+    }
+
+    .u-remove {
+        .pa;
+        right: 10px;
+        top: 5px;
+        color: #999;
+        .pointer;
+        font-size: 16px;
+
+        &:hover {
+            color: #333;
+        }
+        .none;
+    }
+
+    .m-avatar {
+        .pr;
+    }
+    .u-avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
+    .u-active {
+        .pa;
+        right: -2px;
+        top: -6px;
+        width: 20px;
+        height: 20px;
+        fill: #fff;
+    }
+
+    .m-misc {
+        .flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .u-label {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .u-extra {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .is-expired {
+        .u-time {
+            color: #c00;
+        }
+    }
+
+    .c-alternate-btn {
+        // padding: 10px;
+        text-align: center;
+        .pointer;
+        // width: 100%;
+        // border-radius: 0;
+        .size(100%,74px);
+        .fz(40px,74px);
+        color: #999;
+        &:hover {
+            background-color: @bg-light;
+            color: #888;
+        }
+    }
+}
+</style>