哪吒面板添加其它信息代码

哪吒面板添加其它信息代码，两种方式中的小鸡多少都可以自由增减，要举一反三。
样式一：

<script>
window.onload = function() {
    const affLinks = {
        1: { price: '⏰2024.10.16；💰9.5$/年'},
        2: { price: '⏰2024.1.29；💰7￥/年'},
        3: { price: '⏰2025.6.5；💰8.8$/年'},
        4: { price: '⏰2024.1.8；💰7￥/年'},
        5: { price: '⏰2025.8.19；💰4.99￥/月'}

    };

    const createPriceTag = (price) => {
        if (!price) return null; 
        const $priceTag = document.createElement('span');
        $priceTag.setAttribute('style', 'background-color: rgba(30, 144, 255, 0.8); color: white; padding: 3px 6px; border-radius: 5px; margin-left: 5px;');
        $priceTag.textContent = price;
        return $priceTag;
    };

    const uiCards = document.querySelectorAll('.ui.card');
    uiCards.forEach((card) => {
        let cardId = card.id;

        if (cardId && affLinks[cardId]) {
            let $aLinkBox = document.createElement('div');
            $aLinkBox.setAttribute('style', 'position: absolute; bottom: 8px; right: 10px; display: flex; align-items: center;');

            let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
            if ($priceTag) {
                $aLinkBox.appendChild($priceTag);
            }
            
            card.appendChild($aLinkBox);
        }
    });
};
</script>

样式二

<script>
window.onload = function(){

    const extraData = {
        1: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        2: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        3: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        4: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        5: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'} 
    }
    const cats = document.querySelectorAll('.ui.accordion');
    cats.forEach((e, i)=>{
        let $catsTitle = e.querySelector('.title');
        let ct = $catsTitle.innerText;
        ct = ct.trim(); 

        let $itemCard = e.querySelectorAll('.ui.card');
        let uiCardCount = $itemCard.length;
        $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct+ ' ('+ uiCardCount +')');
        $itemCard.forEach((ee, ii)=>{
            let $content = ee.querySelector('.content');
            let $descriptionGrid = ee.querySelector('.description .ui.grid');
            let $itemTitle = $content.querySelector('.header');
            let id = ee.getAttribute('id');
            if(extraData[id]){
                let pid = extraData[id].pid;
                pid = parseInt(pid);
                let shop = extraData[id].shop;
                let price = extraData[id].price;
                let start = extraData[id].start;
                let expire = extraData[id].expire;
                let expire1 = extraData[id].expire1;
                let cycle = extraData[id].cycle;

                if(price){
                    let $priceL = document.createElement('div');
                    $priceL.setAttribute('class', 'three wide column');
                    $priceL.innerHTML = '其它';
                    $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3]);
                    let $priceR = document.createElement('div');
                    $priceR.setAttribute('class', 'thirteen wide column');
                    $priceR.innerHTML = '<div class="ui blue label">'+cycle+ expire1 +price +'</a></div>';
                    $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3])
                }

            }
        });
    });
}
</script>

式样三【在用完整，加入续期和其它】：

<style>
    :root {
        --popup-filter: blur(10px);
        --bb: blur(15px) brightness(110%);
        --lc-color-light: rgba(255, 255, 255, 0.7);
        --bc-color-light: rgba(255, 255, 255, 0.1);
        --the-color-light: rgba(255, 255, 255, 0.4);
        --he-color-light: rgba(255, 255, 255, 0.5);
        --message-color-light: rgb(22, 22, 22, 1); 
        --popup-color-light:rgba(235, 235, 235, 0.6);

        --bc-color-dark: rgba(0, 0, 0, 0.3);
        --lc-color-dark: rgba(55, 55, 55, 0.8);
        --the-color-dark: rgba(70, 70, 70, 0.1);
        --he-color-dark: rgba(35, 35, 35, 0.7);
        --message-color-dark: rgb(235, 235, 235, 0.8);
        --popup-color-dark:rgba(78, 78, 78, 0.6);
    }

    /* 背景图片 */
    body {
        content: " " !important;
        background: fixed !important;
        z-index: -1 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        background-position: top !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-image: url(https://121.freewebhostmost.com/) !important;
        font-family: Arial,Helvetica,sans-serif !important;
    }

    /* 大卡片 */
    #app .ui.fluid.accordion {
        background-color: #fbfbfb26 !important;
        border-radius: 0.4rem !important;
    }

    /* 小卡片 */
    .ui.four.cards>.card {
        border-radius: 0.6rem !important;
        background-color: #fafafaa3 !important;
    }

    /* 有点累状态进度条颜色 */
    .ui.progress.warning .bar {
        background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
    }

    /* 高负载状态进度条颜色 */
    .ui.progress.error .bar {
        background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
    }

    /* 高负载状态进度条颜色续费专用 */
    .ui.progress.error1 .bar {
        background-image: linear-gradient(to right, #00CD00 0%, #008B00 100%);important;
    }
</style>

<script>
window.onload = function() {
    const extraData = {
        1: {
            pid: 23,
            shop: 'CC',
            price: ' 💰9.5$ / 年；',
            cycle: '⏰续期:',
            cycle1: '⏰',
            cycle2: '月流量:',
            cycle3: '3T ',
            cycle4: '⌚',
            start: '12/13/2023',
            expire: '12/13/2024',
            expire1: '2024.12.13；'
        },
        2: {
            pid: 23,
            shop: 'CC',
            price: ' 💰9.5$ / 年；',
            cycle: '⏰续期:',
            cycle1: '⏰',
            cycle2: '月流量:',
            cycle3: '3T ',
            cycle4: '⌚',
            start: '12/13/2023',
            expire: '12/13/2024',
            expire1: '2024.12.13；'
        },
        3: {
            pid: 23,
            shop: 'CC',
            price: ' 💰9.5$ / 年；',
            cycle: '⏰续期:',
            cycle1: '⏰',
            cycle2: '月流量:',
            cycle3: '3T ',
            cycle4: '⌚',
            start: '12/13/2023',
            expire: '12/13/2024',
            expire1: '2024.12.13；'
        },

    }

    const cats = document.querySelectorAll('.ui.accordion');
    cats.forEach((e, i) => {
        let $catsTitle = e.querySelector('.title');
        let ct = $catsTitle.innerText;
        ct = ct.trim(); 

        let $itemCard = e.querySelectorAll('.ui.card');
        let uiCardCount = $itemCard.length;
        $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct + ' (' + uiCardCount + ')');
        
        $itemCard.forEach((ee, ii) => {
            let $content = ee.querySelector('.content');
            let $descriptionGrid = ee.querySelector('.description .ui.grid');
            let $itemTitle = $content.querySelector('.header');
            let id = ee.getAttribute('id');

            if (extraData[id]) {
                let pid = extraData[id].pid;
                let shop = extraData[id].shop;
                let price = extraData[id].price;
                let start = extraData[id].start;
                let expire = extraData[id].expire;
                let expire1 = extraData[id].expire1;
                let cycle = extraData[id].cycle;
                let cycle1 = extraData[id].cycle1;
                let cycle2 = extraData[id].cycle2;
                let cycle3 = extraData[id].cycle3;
                let cycle4 = extraData[id].cycle4;


                if (price) {
                    let $priceL = document.createElement('div');
                    $priceL.setAttribute('class', 'three wide column');
                    $priceL.innerHTML = '续期';
                    $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);

                    let remainingTime = '';
                    if (expire !== '∞') {
                        let endTime = new Date(expire).getTime();
                        let nowTime = new Date().getTime();
                        let timeDiff = endTime - nowTime;
                        let daysRemaining = Math.ceil(timeDiff / (1000 * 3600 * 24));
                        remainingTime = daysRemaining > 0 ? `<span style="color: red;"> 剩${daysRemaining}天</span>` : '<span style="color: red;">(已过期)</span>';
                    }

                    let $priceR = document.createElement('div');
                    $priceR.setAttribute('class', 'thirteen wide column');
                    $priceR.innerHTML = '<div class="ui blue label">' + cycle1 + expire1 + cycle4  + remainingTime + '</div>';
                    $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
                }



                if (price) {
                    let $priceL = document.createElement('div');
                    $priceL.setAttribute('class', 'three wide column');
                    $priceL.innerHTML = '其它';
                    $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);

                    let $priceR = document.createElement('div');
                    $priceR.setAttribute('class', 'thirteen wide column');
                    $priceR.innerHTML = '<div class="ui blue label">' + price + ' ' + cycle2 + ' ' + cycle3 + '</div>';
                    $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]);
                }
            }
        });
    });
}
</script>

<style>
        body {
            overflow-y: scroll;
        }
</style>
<!-- 返回顶部按钮 -->
<button id="topBtn" class="top-btn" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; background-color: #ffcc00; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer;">▲</button>

<script>
    // 获取返回顶部按钮
    const topBtn = document.getElementById('topBtn');

    // 当DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 监听滚动事件
        window.onscroll = function() {
            scrollFunction();
        };

        // 显示或隐藏返回顶部按钮
        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                topBtn.style.display = "block";
            } else {
                topBtn.style.display = "none";
            }
        }

        // 当点击按钮时滚动到顶部
        topBtn.addEventListener('click', function() {
            document.body.scrollTop = 0; // 对于 Safari
            document.documentElement.scrollTop = 0; // 对于 Chrome, Firefox, IE 和 Opera
        });
    });
</script>