@jx3box/jx3box-ui 2.3.8 → 2.3.10

package/docs/agents/global-config-cdn.md

@@ -0,0 +1,30 @@
+# 全局配置 CDN 读取约定
+
+## 背景
+
+`/api/cms/config` 中有一批低频更新的全局配置，后端会构建到 CDN JSON：
+
+```txt
+https://cdn.jx3box.com/config/global.json
+```
+
+这类配置在公共组件库和其它魔盒前端项目中应优先读取 CDN 静态 JSON，减少页面内多组件重复请求 config 接口。
+
+## 实现原则
+
+- 在项目服务层封装统一 helper，不要让具体组件直接请求 CDN。
+- helper 优先读取内存缓存，再读 `sessionStorage`，没有缓存时请求 `global.json`。
+- 同一页面生命周期内要复用 pending promise，避免多个组件并发触发多次请求。
+- 对旧调用保持返回结构兼容，比如继续返回 `{ key, val }` 或数组，减少组件改动面。
+- CDN 请求失败、缺少目标 key、或查询不适合静态 JSON 时，fallback 到旧 `/api/cms/config`。
+- 公共头可以预热全局配置，但其它组件不能隐式依赖公共头加载顺序。
+
+## 本仓落点
+
+- `service/header.js`：`getGlobalConfig()` 负责读取 CDN JSON，并做内存缓存、`sessionStorage` 缓存、TTL 和 pending promise 复用。
+- `service/cms.js`：`getConfig()` 优先从 `getGlobalConfig()` 合成旧接口兼容结构，失败时回退旧接口。
+- `service/thx.js`：`getBoxcoinStatus()` 走统一 `getConfig({ key: "boxcoin" })`。
+
+## 适用范围
+
+后续其它魔盒项目如果提到“全局配置读取换 CDN”或“config 改成读 `global.json`”，默认按本约定处理：优先服务层兼容改造，组件侧尽量少动，迁移期保留旧接口 fallback。

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.8",
+    "version": "2.3.10",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/cms.js

@@ -1,6 +1,10 @@
 import { $cms } from "@jx3box/jx3box-common/js/api";
 import axios from "axios";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getGlobalConfig } from "./header";
+
+const APP_CONFIG_KEYS = ["android_apk", "android_versions", "app_logo", "app_version_desc", "apple_url", "harmony_url"];
+
 function getPostAuthors(post_id) {
     return $cms({ mute: true }).get(`/api/cms/post/${post_id}/authors`);
 }
@@ -80,8 +84,7 @@ function getTopicBucket(params) {
     return $cms().get(`/api/cms/topic/bucket`, { params });
 }
 
-// 获取config
-function getConfig(params) {
+function getLegacyConfig(params) {
     return $cms()
         .get(`/api/cms/config`, { params })
         .then((res) => {
@@ -89,6 +92,51 @@ function getConfig(params) {
         });
 }
 
+function normalizeConfigItem(key, value, subtype = "") {
+    return {
+        key,
+        val: value,
+        subtype,
+    };
+}
+
+function getConfigFromGlobal(params = {}) {
+    return getGlobalConfig().then((config) => {
+        if (!config || typeof config !== "object") return null;
+
+        if (params.key) {
+            const keys = String(params.key)
+                .split(",")
+                .map((key) => key.trim())
+                .filter(Boolean);
+
+            if (!keys.length) return null;
+            if (!keys.every((key) => Object.prototype.hasOwnProperty.call(config, key))) return null;
+
+            const items = keys.map((key) => normalizeConfigItem(key, config[key]));
+            return keys.length === 1 ? items[0] : items;
+        }
+
+        if (params.subtype === "app") {
+            if (!APP_CONFIG_KEYS.every((key) => Object.prototype.hasOwnProperty.call(config, key))) return null;
+            return APP_CONFIG_KEYS.map((key) => normalizeConfigItem(key, config[key], "app"));
+        }
+
+        return null;
+    });
+}
+
+// 获取config
+function getConfig(params = {}) {
+    return getConfigFromGlobal(params)
+        .then((data) => {
+            return data || getLegacyConfig(params);
+        })
+        .catch(() => {
+            return getLegacyConfig(params);
+        });
+}
+
 // 获取用户config
 function getUserConfig(params) {
     return $cms()

package/service/header.js

@@ -2,6 +2,47 @@ import axios from "axios";
 import { $cms, $next } from "@jx3box/jx3box-common/js/api";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
+const GLOBAL_CONFIG_STORAGE_KEY = "jx3box:global-config";
+const GLOBAL_CONFIG_TTL = 6 * 60 * 60 * 1000;
+let globalConfigCache = null;
+let globalConfigPending = null;
+
+function getGlobalConfigUrl() {
+    const root = JX3BOX.__ossRoot || "https://cdn.jx3box.com/";
+    return `${root.replace(/\/?$/, "/")}config/global.json`;
+}
+
+function getNow() {
+    return Date.now ? Date.now() : new Date().getTime();
+}
+
+function readGlobalConfigStorage() {
+    if (typeof sessionStorage === "undefined") return null;
+    try {
+        const raw = sessionStorage.getItem(GLOBAL_CONFIG_STORAGE_KEY);
+        if (!raw) return null;
+        const cache = JSON.parse(raw);
+        if (!cache?.data || !cache?.time) return null;
+        if (getNow() - cache.time > GLOBAL_CONFIG_TTL) return null;
+        return cache.data;
+    } catch (e) {
+        return null;
+    }
+}
+
+function writeGlobalConfigStorage(data) {
+    if (typeof sessionStorage === "undefined") return;
+    try {
+        sessionStorage.setItem(
+            GLOBAL_CONFIG_STORAGE_KEY,
+            JSON.stringify({
+                time: getNow(),
+                data,
+            })
+        );
+    } catch (e) {}
+}
+
 function getLetter() {
     return $next({ mute: true }).get("/api/letter/unread/count");
 }
@@ -34,9 +75,28 @@ function getGames() {
 
 // 获取全局配置
 function getGlobalConfig() {
-    return axios.get(`${JX3BOX.__ossRoot}config/global.json`).then((res) => {
-        return res.data;
-    });
+    if (globalConfigCache) return Promise.resolve(globalConfigCache);
+
+    const storageConfig = readGlobalConfigStorage();
+    if (storageConfig) {
+        globalConfigCache = storageConfig;
+        return Promise.resolve(globalConfigCache);
+    }
+
+    if (!globalConfigPending) {
+        globalConfigPending = axios
+            .get(getGlobalConfigUrl())
+            .then((res) => {
+                globalConfigCache = res.data || {};
+                writeGlobalConfigStorage(globalConfigCache);
+                return globalConfigCache;
+            })
+            .finally(() => {
+                globalConfigPending = null;
+            });
+    }
+
+    return globalConfigPending;
 }
 
 export { getLetter, getMsg, getNav, getPanel, getBox, getMenu, getGames, getGlobalConfig };

package/service/thx.js

@@ -1,4 +1,5 @@
-import { $pay, $cms } from "@jx3box/jx3box-common/js/api";
+import { $pay } from "@jx3box/jx3box-common/js/api";
+import { getConfig } from "./cms";
 
 function getPostBoxcoinRecords(postType, postId, params) {
     return $pay().get(`/api/inspire/article/${postType}/${postId}/history`, {
@@ -23,10 +24,12 @@ function getPostBoxcoinConfig(postType) {
 }
 
 function getBoxcoinStatus() {
-    return $cms().get(`/api/cms/config`, {
-        params: {
-            key: "boxcoin",
-        },
+    return getConfig({ key: "boxcoin" }).then((data) => {
+        return {
+            data: {
+                data,
+            },
+        };
     });
 }
 

package/src/CommonHeader.vue

@@ -18,7 +18,15 @@
             </div>
 
             <!-- user -->
-            <header-user ref="user" class="c-header__user" :client="client" :asset="asset" />
+            <header-user
+                ref="user"
+                class="c-header__user"
+                :client="client"
+                :asset="asset"
+                :header-config="headerConfig"
+                :header-config-loaded="headerConfigLoaded"
+                :header-config-managed="true"
+            />
         </div>
         <header-box v-if="isMobile" class="c-header__box c-header-jx3box" :overlayEnable="overlayEnable" />
         <header-box2 v-else class="c-header__box c-header__box--desktop" />
@@ -45,9 +53,12 @@ import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
 
 // 数据
 import { getGlobalConfig } from "../service/header";
+import { getConfig } from "../service/cms";
 import User from "@jx3box/jx3box-common/js/user.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
+const HEADER_CONFIG_KEYS = ["important_notice", "important_notice_url", "vip", "mall"];
+
 export default {
     name: "Header",
     components: {
@@ -67,6 +78,8 @@ export default {
             isMobile: window.innerWidth <= 768,
 
             asset: {},
+            headerConfig: {},
+            headerConfigLoaded: false,
         };
     },
     computed: {
@@ -133,6 +146,7 @@ export default {
         // 检查
         init: function () {
             this.checkIsWebView();
+            this.loadHeaderConfig();
 
             const token = this.getUrlParam("__token");
             const env = this.getUrlParam("__env");
@@ -199,6 +213,31 @@ export default {
                 }
             });
         },
+        loadHeaderConfig: function () {
+            getConfig({
+                key: HEADER_CONFIG_KEYS.join(","),
+            })
+                .then((data) => {
+                    this.headerConfig = this.normalizeHeaderConfig(data);
+                })
+                .catch(() => {
+                    this.headerConfig = {};
+                })
+                .finally(() => {
+                    this.headerConfigLoaded = true;
+                });
+        },
+        normalizeHeaderConfig: function (data) {
+            if (Array.isArray(data)) {
+                return data.reduce((result, item) => {
+                    if (item?.key) {
+                        result[item.key] = item;
+                    }
+                    return result;
+                }, {});
+            }
+            return data?.key ? { [data.key]: data } : {};
+        },
         updateScreen() {
             this.isMobile = window.innerWidth <= 768;
         },

package/src/header/manage.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="c-header-panel c-header-manage" id="c-header-manage">
         <span class="u-post u-manage">
-            <i class="u-pop" style="display: none" v-show="showPop || !isAuth"></i>
-            <!-- <manageIcon class="u-add" /> -->
-            <img
-                class="u-add"
-                svg-inline
-                src="../../assets/img/common/manage.svg"
-                :alt="$jx3boxT('jx3boxUi.commonHeader.manageCenter', '扩展中心')"
-            />
+            <i class="u-icon u-icon-msg">
+                <i class="u-pop" style="display: none" v-show="showPop || !isAuth"></i>
+                <!-- <manageIcon class="u-add" /> -->
+                <img
+                    class="u-add"
+                    svg-inline
+                    src="../../assets/img/common/manage.svg"
+                    :alt="$jx3boxT('jx3boxUi.commonHeader.manageCenter', '扩展中心')"
+                />
+            </i>
         </span>
         <ul class="u-menu u-pop-content">
             <template v-for="item in userPanel">
@@ -42,6 +44,7 @@ import i18nMixin from "../../i18n/mixin";
 import { getConfig } from "../../service/cms";
 // import manageIcon from "@/assets/img/components/common/header/manage.svg";
 const { __imgPath } = JX3BOX;
+const NOTICE_POP_KEY = "notice_pop";
 const defaultPanel = [
     {
         key: "manageCenter",
@@ -67,6 +70,22 @@ export default {
             type: Boolean,
             default: false,
         },
+        importantNotice: {
+            type: Object,
+            default: null,
+        },
+        importantNoticeUrl: {
+            type: Object,
+            default: null,
+        },
+        headerConfigLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        headerConfigManaged: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         userPanel: function () {
@@ -84,7 +103,16 @@ export default {
         },
     },
     mounted() {
-        this.loadPanel();
+        if (this.headerConfigLoaded) {
+            this.loadPanel();
+        }
+    },
+    watch: {
+        headerConfigLoaded: function (val) {
+            if (val) {
+                this.loadPanel();
+            }
+        },
     },
     methods: {
         getPanelLabel(item) {
@@ -94,19 +122,16 @@ export default {
         loadPanel: async function () {
             try {
                 const panel = JSON.parse(sessionStorage.getItem("panel"));
-                let config = await getConfig({ key: "important_notice_url" });
+                const noticeConfig = await this.getNoticeConfig("important_notice", this.importantNotice);
+                const noticeUrlConfig = await this.getNoticeConfig("important_notice_url", this.importantNoticeUrl);
                 if (panel) {
-                    this.panel = panel;
+                    this.panel = this.applyNoticeConfig(panel, noticeConfig, noticeUrlConfig);
                     const item = this.panel?.find((i) => i.meta);
                     this.initMeta(item);
+                    sessionStorage.setItem("panel", JSON.stringify(this.panel));
                 } else {
                     getMenu("panel").then((res) => {
-                        this.panel = res.data?.data?.val?.map(item => {
-                            return {
-                                ...item,
-                                link: item.remark == 'feature' ? config.val : item.link
-                            };
-                        });
+                        this.panel = this.applyNoticeConfig(res.data?.data?.val, noticeConfig, noticeUrlConfig);
                         const item = this.panel?.find((i) => i.meta);
                         this.initMeta(item);
                         sessionStorage.setItem("panel", JSON.stringify(this.panel));
@@ -117,22 +142,33 @@ export default {
                 console.log("loadPanel error", e);
             }
         },
+        getNoticeConfig: async function (key, config) {
+            if (config) return config;
+            if (this.headerConfigManaged) return null;
+            return await getConfig({ key }).catch(() => null);
+        },
+        applyNoticeConfig: function (panel = [], noticeConfig, noticeUrlConfig) {
+            const items = panel?.length ? panel : defaultPanel;
+            return items.map((item) => {
+                if (item.remark !== "feature") return item;
+                return {
+                    ...item,
+                    link: noticeUrlConfig?.val || item.link,
+                    meta: noticeConfig?.val || item.meta,
+                };
+            });
+        },
         resolveImg: function (img) {
             return img ? __imgPath + "image/header/panel/" + img : __imgPath + "image/header/panel/default.svg";
         },
         initMeta(item) {
-            const local = localStorage.getItem("jb_panel_meta");
-
-            if (local) {
-                this.showPop = item?.meta && item?.meta != local;
-            } else {
-                localStorage.setItem("jb_panel_meta", item?.meta);
-                this.showPop = true;
-            }
+            const meta = item?.meta;
+            const local = localStorage.getItem(NOTICE_POP_KEY);
+            this.showPop = !!meta && meta != local;
         },
         onClick(item) {
             if (item.meta) {
-                localStorage.setItem("jb_panel_meta", item.meta);
+                localStorage.setItem(NOTICE_POP_KEY, item.meta);
                 this.showPop = false;
             }
         },
@@ -180,6 +216,7 @@ export default {
 
     .u-icon-msg {
         .pr;
+        .size(18px);
     }
 
     .u-pop {
@@ -188,11 +225,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
-        right: 4px;
-        top: 18px;
+        right: -5px;
+        top: -4px;
         z-index: 1;
     }
 

package/src/header/message.vue

@@ -81,7 +81,7 @@ export default {
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -2px;
+        top: -4px;
         .z(1);
     }
 }

package/src/header/shop.vue

@@ -6,7 +6,7 @@
             placement="bottom"
             popper-class="c-header-tooltip"
         >
-            <a class="u-present" href="/vip/mall">
+            <a class="u-present" href="/vip/mall" @click="markPopRead">
                 <i class="u-icon u-icon-msg">
                     <i class="u-pop" style="display: none" v-show="pop"></i>
                     <!-- <shopIcon class="u-icon" /> -->
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import { getConfig, getUserMeta } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
 // import shopIcon from "@/assets/img/components/common/header/gift.svg";
@@ -36,52 +36,66 @@ export default {
     data: function () {
         return {
             pop: false,
+            initialized: false,
+            popValue: "",
         };
     },
+    props: {
+        config: {
+            type: Object,
+            default: null,
+        },
+        configLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        configManaged: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        configLoaded: function (val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
     mounted() {
-        this.init();
+        if (this.configLoaded) {
+            this.init();
+        }
     },
     methods: {
         async init() {
+            if (this.initialized) return;
             /**
-             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
-             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
-             *
-             * meta如果为null，说明用户未登录，不显示
-             * meta如果为0，说明用户已经看过，不显示，同时比较config的值，如果config的值大于local，更新local为config的值和meta为1
-             * meta如果为1，说明用户未看过，显示
+             * 只在点击入口后记录本地版本；仅看到气泡不算已处理。
              */
             let meta = null;
             if (User.isLogin()) {
                 meta = await getUserMeta({ key: "mall_pop" });
             }
-            let config = await getConfig({ key: "mall" });
-
-            if (meta == null) {
-                const val = ~~config.val;
-
-                if (val) {
-                    this.pop = true;
-                    localStorage.setItem("mall_pop", config.val);
-                    setUserMeta("mall_pop", { val: 1 });
-                }
-            } else {
-                if (meta == 1) {
-                    this.pop = true;
-
-                    localStorage.setItem("mall_pop", config.val);
-                } else {
-                    const local = localStorage.getItem("mall_pop");
+            let config = this.config || (this.configManaged ? null : await getConfig({ key: "mall" }));
+            if (!config) return;
+            this.initialized = true;
+            this.popValue = config.val;
 
-                    if (~~config.val > ~~local) {
-                        this.pop = true;
+            this.pop = this.shouldShowPop(meta, config.val);
+        },
+        shouldShowPop(meta, value) {
+            if (!~~value) return false;
 
-                        localStorage.setItem("mall_pop", config.val);
+            const local = localStorage.getItem("mall_pop");
+            if (String(local) === String(value)) return false;
 
-                        // setUserMeta("mall_pop", { val: 1 });
-                    }
-                }
-            }
+            if (meta == null || meta == 1) return true;
+            return ~~value > ~~local;
+        },
+        markPopRead() {
+            if (!this.pop || this.popValue == null) return;
+            localStorage.setItem("mall_pop", this.popValue);
+            this.pop = false;
         },
     },
 };
@@ -111,11 +125,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -6px;
+        top: -4px;
         z-index: 1;
     }
 }

package/src/header/user.vue

@@ -8,16 +8,22 @@
             <publish />
 
             <!-- vip -->
-            <vip />
+            <vip :config="headerConfig.vip" :config-loaded="headerConfigLoaded" :config-managed="headerConfigManaged" />
 
             <!-- 商城 -->
-            <shop />
+            <shop :config="headerConfig.mall" :config-loaded="headerConfigLoaded" :config-managed="headerConfigManaged" />
 
             <!-- 我的资产 -->
             <asset :asset="asset" />
 
             <!-- manage -->
-            <manage :isTeammate="isTeammate" />
+            <manage
+                :isTeammate="isTeammate"
+                :important-notice="headerConfig.important_notice"
+                :important-notice-url="headerConfig.important_notice_url"
+                :header-config-loaded="headerConfigLoaded"
+                :header-config-managed="headerConfigManaged"
+            />
 
             <!-- 语言切换 -->
             <lang />
@@ -77,6 +83,18 @@ export default {
                 };
             },
         },
+        headerConfig: {
+            type: Object,
+            default: () => ({}),
+        },
+        headerConfigLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        headerConfigManaged: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         message,

package/src/header/vip.vue

@@ -6,7 +6,7 @@
             placement="bottom"
             popper-class="c-header-tooltip"
         >
-            <a class="u-post u-vip" href="/vip/premium">
+            <a class="u-post u-vip" href="/vip/premium" @click="markPopRead">
                 <i class="u-icon u-icon-msg">
                     <i class="u-pop" style="display: none" v-show="pop"></i>
                     <!-- <vipIcon class="u-add" /> -->
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import { getConfig, getUserMeta } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
 // import vipIcon from "@/assets/img/components/common/header/vip.svg";
@@ -36,48 +36,66 @@ export default {
     data: function () {
         return {
             pop: false,
+            initialized: false,
+            popValue: "",
         };
     },
+    props: {
+        config: {
+            type: Object,
+            default: null,
+        },
+        configLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        configManaged: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        configLoaded: function (val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
     mounted() {
-        this.init();
+        if (this.configLoaded) {
+            this.init();
+        }
     },
     methods: {
         async init() {
+            if (this.initialized) return;
             /**
-             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
-             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
+             * 只在点击入口后记录本地版本；仅看到气泡不算已处理。
              */
             let meta = null;
             if (User.isLogin()) {
                 meta = await getUserMeta({ key: "vip_pop" });
             }
-            let config = await getConfig({ key: "vip" });
-
-            if (meta == null) {
-                const val = ~~config.val;
-
-                if (val) {
-                    this.pop = true;
-                    localStorage.setItem("vip_pop", config.val);
-                    setUserMeta("vip_pop", { val: 1 });
-                }
-            } else {
-                if (meta == 1) {
-                    this.pop = true;
-
-                    localStorage.setItem("vip_pop", config.val);
-                } else {
-                    const local = localStorage.getItem("vip_pop");
+            let config = this.config || (this.configManaged ? null : await getConfig({ key: "vip" }));
+            if (!config) return;
+            this.initialized = true;
+            this.popValue = config.val;
 
-                    if (~~config.val > ~~local) {
-                        this.pop = true;
+            this.pop = this.shouldShowPop(meta, config.val);
+        },
+        shouldShowPop(meta, value) {
+            if (!~~value) return false;
 
-                        localStorage.setItem("vip_pop", config.val);
+            const local = localStorage.getItem("vip_pop");
+            if (String(local) === String(value)) return false;
 
-                        // setUserMeta("vip_pop", { val: 1 });
-                    }
-                }
-            }
+            if (meta == null || meta == 1) return true;
+            return ~~value > ~~local;
+        },
+        markPopRead() {
+            if (!this.pop || this.popValue == null) return;
+            localStorage.setItem("vip_pop", this.popValue);
+            this.pop = false;
         },
     },
 };
@@ -99,11 +117,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -6px;
+        top: -4px;
         z-index: 1;
     }
     .u-vip {