CaveOps | Snippets: 微信钱包

CSS Before Head

HTML Head

:root {
            --var-pad-page: 0.5rem;
            --var-pad-panel: 1rem;
            --color-wechat: #2fab67;
            --color-title: #1d1d1d;
            --color-title-alt: #727272;
            --color-text: #1d1d1d;
            --color-text-alt: #727272;
            --color-page-bg: #ececec;
            --color-panel-bg: #ffffff;
            --color-wallet-text: #ffffff;
            --color-wallet-text-alt: rgba(255, 255, 255, 0.65);
        }

        @media screen and (prefers-color-scheme: dark) {
            :root {
                --color-title: #cfcfcf;
                --color-title-alt: #8c8c8c;
                --color-text: #ffffff;
                --color-text-alt: #ffffff;
                --color-page-bg: #191919;
                --color-panel-bg: #111111;
            }
        }
        
        @font-face {
            font-family: 'PingFangMedium';
            src: url('PingFangMedium.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        *, *::before, *::after {
            outline: none;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            position: relative;
        }
        
        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            width: 100vw;
            height: 100vh;
            font-size: 16px;
        }

        body {
            font-family: "PingFangMedium", Helvetica, Arial, Alibaba PuHuiTi, Microsoft YaHei, sans-serif;
            background-color: var(--color-page-bg);
            color: var(--color-text);
            text-decoration: none;
            width: 100%;
        }

        *,
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        
        *::-webkit-scrollbar,
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .bar {
            width: 100%;
            padding: var(--var-pad-panel);
            font-size: 1rem;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(125, 125, 125, 0.1);
        }

        .bar .icon {
            width: 1rem;
            height: 1rem;
            display: block;
            color: var(--color-title);
        }

        .bar .icon svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .content {
            padding: var(--var-pad-page);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: var(--var-pad-page);
            color: var(--color-text);
        }

        .panel {
            width: 100%;
            border-radius: 0.6rem;
            padding: var(--var-pad-panel);
            background: var(--color-panel-bg);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: var(--var-pad-panel);
            font-size: 0.85rem;
        }

        .panel:first-child {
            background: var(--color-wechat);
            font-size: 1rem;
        }

        .panel .panel-title {
            color: var(--color-title-alt);
        }

        .panel .panel-items {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--var-pad-page);
        }
        
        .panel .panel-items .panel-item {
            padding: var(--var-pad-panel) 0;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: var(--var-pad-page);
            width: calc((100% - var(--var-pad-page) * 3) * 0.25);
        }
        
        .panel:first-child .panel-items .panel-item {
            flex-wrap: nowrap;
            width: calc((100% - var(--var-pad-page)) * 0.5);
            height: 100%;
            color: var(--color-wallet-text);
        }

        .panel .panel-items .panel-item svg {
            width: 2rem;
            height: 2rem;
            aspect-ratio: 1/1;
            margin-bottom: var(--var-pad-page);
        }

        .panel .panel-items .panel-item .panel-item-title,
        .panel .panel-items .panel-item .panel-item-subtitle {
            word-break: break-all;
            white-space: wrap;
            text-align: center;
        }

        .panel .panel-items .panel-item .panel-item-subtitle {
            color: var(--color-wallet-text-alt);
        }

        .fullscreen-button {
            font-size: 0.8rem;
            color: var(--color-text-alt);
            border: none;
            padding: var(--var-pad-page);
            border-radius: 0.5rem;
            background: none;
            margin-bottom: 1rem;
        }

CSS After Head

JS Before HTML Body

<div class="status-bar" id="statusBar">
        <svg width="100%" height="100%" viewBox="0 0 1170 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(1,0,0,1,-7.6602,-4.07201)">
                <g>
                    <g transform="matrix(1.00466,0,0,1,-5.1626,0)">
                        <path d="M1108.23,64.578L1108.23,83.566C1108.23,88.807 1103.99,93.061 1098.78,93.061L1049.99,93.061C1044.77,93.061 1040.54,88.807 1040.54,83.566L1040.54,64.578C1040.54,59.337 1044.77,55.083 1049.99,55.083L1098.78,55.083C1103.99,55.083 1108.23,59.337 1108.23,64.578ZM1110.95,68.341C1113.39,69.09 1115.17,71.374 1115.17,74.072C1115.17,76.77 1113.39,79.054 1110.95,79.803L1110.95,68.341Z" style="fill:rgb(166,166,166);"/>
                    </g>
                    <g transform="matrix(1.00466,0,0,1,-5.1626,0)">
                        <path d="M1091.17,93.061L1049.99,93.061C1044.77,93.061 1040.54,88.807 1040.54,83.566L1040.54,64.578C1040.54,59.337 1044.77,55.083 1049.99,55.083L1091.17,55.083L1091.17,93.061Z" style="fill:rgb(52,200,90);"/>
                    </g>
                    <g transform="matrix(-0.766044,-0.642788,0.642788,-0.766044,1868.19,813.752)">
                        <path d="M1073.98,62.841L1073.98,78.702C1073.93,79.08 1073.75,79.556 1073.17,79.692C1072.42,79.868 1072.03,79.138 1071.89,78.803L1069.14,70.691L1069.14,70.697L1069.12,70.664L1064.34,74.68C1064.05,74.867 1063.62,75.047 1063.22,74.81C1062.75,74.528 1062.63,73.927 1062.61,73.562L1062.61,57.7C1062.66,57.323 1062.84,56.847 1063.42,56.71C1064.17,56.534 1064.56,57.265 1064.7,57.6L1067.45,65.711L1067.45,65.705L1067.46,65.739L1072.25,61.722C1072.54,61.535 1072.97,61.355 1073.37,61.593C1073.84,61.874 1073.95,62.475 1073.98,62.841Z" style="fill:white;"/>
                    </g>
                    <g transform="matrix(0.867701,0,0,0.867701,140.822,9.65496)">
                        <path d="M1048.97,85.976L1053.46,85.976L1063.7,65.589L1063.7,62.02L1047.03,62.02L1047.03,65.523L1059.48,65.523L1059.48,65.606L1048.97,85.976Z" style="fill:white;fill-rule:nonzero;"/>
                        <path d="M1075.67,86.458C1080.98,86.458 1084.67,83.038 1084.67,78.074C1084.67,73.508 1081.38,70.188 1076.81,70.188C1074.41,70.188 1072.43,71.134 1071.39,72.745L1071.3,72.745L1071.97,65.523L1083.26,65.523L1083.26,62.02L1068.55,62.02L1067.4,75.949L1071.14,75.949C1072.05,74.322 1073.66,73.409 1075.72,73.409C1078.54,73.409 1080.53,75.384 1080.53,78.19C1080.53,81.012 1078.56,82.988 1075.7,82.988C1073.18,82.988 1071.25,81.477 1070.99,79.236L1066.97,79.236C1067.15,83.486 1070.74,86.458 1075.67,86.458Z" style="fill:white;fill-rule:nonzero;"/>
                    </g>
                </g>
                <g transform="matrix(1,0,0,1,-4,0)" fill="currentColor">
                    <path d="M95.301,84.499L95.301,90.361L73.177,90.361C73.417,88.145 74.135,86.045 75.333,84.061C76.531,82.077 78.897,79.445 82.431,76.166C85.276,73.515 87.02,71.719 87.664,70.775C88.533,69.473 88.967,68.185 88.967,66.912C88.967,65.504 88.589,64.423 87.833,63.666C87.077,62.91 86.032,62.532 84.7,62.532C83.382,62.532 82.334,62.929 81.555,63.723C80.776,64.516 80.327,65.834 80.207,67.676L73.918,67.047C74.293,63.573 75.468,61.08 77.445,59.567C79.421,58.055 81.892,57.299 84.857,57.299C88.106,57.299 90.659,58.175 92.516,59.927C94.373,61.679 95.301,63.857 95.301,66.463C95.301,67.945 95.035,69.356 94.504,70.697C93.972,72.037 93.13,73.441 91.977,74.908C91.213,75.881 89.836,77.281 87.844,79.108C85.853,80.935 84.591,82.148 84.059,82.747C83.528,83.346 83.097,83.93 82.768,84.499L95.301,84.499Z" style="fill-rule:nonzero;"/>
                    <path d="M110.238,57.299C113.427,57.299 115.92,58.437 117.717,60.713C119.858,63.408 120.929,67.878 120.929,74.122C120.929,80.351 119.851,84.828 117.695,87.554C115.913,89.8 113.427,90.923 110.238,90.923C107.033,90.923 104.45,89.691 102.489,87.228C100.527,84.765 99.546,80.374 99.546,74.055C99.546,67.855 100.624,63.393 102.781,60.668C104.562,58.422 107.048,57.299 110.238,57.299ZM110.238,62.532C109.474,62.532 108.793,62.775 108.194,63.262C107.595,63.749 107.13,64.621 106.801,65.879C106.367,67.511 106.15,70.259 106.15,74.122C106.15,77.985 106.344,80.639 106.734,82.084C107.123,83.529 107.613,84.491 108.205,84.971C108.796,85.45 109.474,85.689 110.238,85.689C111.001,85.689 111.683,85.446 112.282,84.959C112.88,84.473 113.345,83.6 113.674,82.343C114.108,80.725 114.325,77.985 114.325,74.122C114.325,70.259 114.131,67.605 113.741,66.16C113.352,64.715 112.862,63.749 112.27,63.262C111.679,62.775 111.001,62.532 110.238,62.532Z" style="fill-rule:nonzero;"/>
                    <path d="M127.712,72.819L127.712,66.508L134.024,66.508L134.024,72.819L127.712,72.819ZM127.712,90.361L127.712,84.05L134.024,84.05L134.024,90.361L127.712,90.361Z" style="fill-rule:nonzero;"/>
                    <path d="M156.619,90.361L150.308,90.361L150.308,66.575C148.002,68.731 145.284,70.326 142.155,71.359L142.155,65.632C143.802,65.093 145.591,64.071 147.523,62.566C149.454,61.061 150.78,59.305 151.498,57.299L156.619,57.299L156.619,90.361Z" style="fill-rule:nonzero;"/>
                    <path d="M178.429,90.361L178.429,83.735L164.952,83.735L164.952,78.21L179.238,57.299L184.538,57.299L184.538,78.187L188.626,78.187L188.626,83.735L184.538,83.735L184.538,90.361L178.429,90.361ZM178.429,78.187L178.429,66.934L170.86,78.187L178.429,78.187Z" style="fill-rule:nonzero;"/>
                </g>
                <path d="M978.736,70.897L973.459,65.62C987.509,51.571 1010.32,51.571 1024.37,65.62L1019.09,70.897C1007.96,59.76 989.873,59.76 978.736,70.897ZM982.601,74.761C991.605,65.757 1006.23,65.757 1015.23,74.761L1009.95,80.038C1003.86,73.946 993.969,73.946 987.877,80.038L982.601,74.761ZM991.445,83.605C995.568,79.482 1002.26,79.482 1006.39,83.605L998.915,91.076L991.445,83.605Z" fill="currentColor"/>
                <path d="M958.1,58.326L958.1,75.793C958.1,77.034 957.091,78.043 955.85,78.043L951.35,78.043C950.108,78.043 949.1,77.034 949.1,75.793L949.1,58.326C949.1,57.084 950.108,56.076 951.35,56.076L955.85,56.076C957.091,56.076 958.1,57.084 958.1,58.326ZM958.1,85.326L958.1,90.811C958.1,92.053 957.091,93.061 955.85,93.061L951.35,93.061C950.108,93.061 949.1,92.053 949.1,90.811L949.1,85.326C949.1,84.084 950.108,83.076 951.35,83.076L955.85,83.076C957.091,83.076 958.1,84.084 958.1,85.326ZM944.1,62.32L944.1,75.793C944.1,77.034 943.091,78.043 941.85,78.043L937.35,78.043C936.108,78.043 935.1,77.034 935.1,75.793L935.1,62.32C935.1,61.078 936.108,60.07 937.35,60.07L941.85,60.07C943.091,60.07 944.1,61.078 944.1,62.32ZM944.1,85.326L944.1,90.811C944.1,92.053 943.091,93.061 941.85,93.061L937.35,93.061C936.108,93.061 935.1,92.053 935.1,90.811L935.1,85.326C935.1,84.084 936.108,83.076 937.35,83.076L941.85,83.076C943.091,83.076 944.1,84.084 944.1,85.326ZM930.1,66.312L930.1,75.793C930.1,77.034 929.091,78.043 927.85,78.043L923.35,78.043C922.108,78.043 921.1,77.034 921.1,75.793L921.1,66.312C921.1,65.07 922.108,64.062 923.35,64.062L927.85,64.062C929.091,64.062 930.1,65.07 930.1,66.312ZM930.1,85.326L930.1,90.811C930.1,92.053 929.091,93.061 927.85,93.061L923.35,93.061C922.108,93.061 921.1,92.053 921.1,90.811L921.1,85.326C921.1,84.084 922.108,83.076 923.35,83.076L927.85,83.076C929.091,83.076 930.1,84.084 930.1,85.326ZM916.1,69.278L916.1,75.793C916.1,77.034 915.091,78.043 913.85,78.043L909.35,78.043C908.108,78.043 907.1,77.034 907.1,75.793L907.1,69.278C907.1,68.036 908.108,67.028 909.35,67.028L913.85,67.028C915.091,67.028 916.1,68.036 916.1,69.278ZM916.1,85.326L916.1,90.811C916.1,92.053 915.091,93.061 913.85,93.061L909.35,93.061C908.108,93.061 907.1,92.053 907.1,90.811L907.1,85.326C907.1,84.084 908.108,83.076 909.35,83.076L913.85,83.076C915.091,83.076 916.1,84.084 916.1,85.326Z" fill="currentColor"/>
            </g>
        </svg>
    </div>
    <div class="bar" id="navBar">
        <a href="#" class="icon">
            <svg width="100%" height="100%" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="currentColor">
                <g transform="matrix(0.391406,0,0,0.39375,2.73933,0.8)">
                    <path d="M94.476,116.785L40.811,64L94.476,11.215L86.184,3.048L24.381,64.03L86.184,124.952L94.476,116.785Z"/>
                </g>
            </svg>
            
        </a>
        <span class="bar-title">服务</span>
        <a href="#" class="icon">
            <svg width="100%" height="100%" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="currentColor">
                <g transform="matrix(1.03559,0,0,1.03559,-1098.83,-188.002)">
                    <path d="M1085.87,201.766C1088.53,201.766 1090.7,203.929 1090.7,206.594C1090.7,209.258 1088.53,211.422 1085.87,211.422C1083.2,211.422 1081.04,209.258 1081.04,206.594C1081.04,203.929 1083.2,201.766 1085.87,201.766ZM1106.45,201.766C1109.12,201.766 1111.28,203.929 1111.28,206.594C1111.28,209.258 1109.12,211.422 1106.45,211.422C1103.79,211.422 1101.62,209.258 1101.62,206.594C1101.62,203.929 1103.79,201.766 1106.45,201.766ZM1065.89,201.872C1068.56,201.872 1070.72,204.036 1070.72,206.7C1070.72,209.365 1068.56,211.529 1065.89,211.529C1063.23,211.529 1061.07,209.365 1061.07,206.7C1061.07,204.036 1063.23,201.872 1065.89,201.872Z"/>
                </g>
            </svg>
        </a>
    </div>
    <div class="content">
        <div class="panel">
            <div class="panel-items">
                <div class="panel-item payment-qrcode">
                    <svg width="100%" height="100%" viewBox="0 0 100 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="currentColor">
                        <g transform="matrix(1,0,0,1,-785.943,-400.83)">
                            <path d="M791.932,425.962L785.943,425.962L785.943,405.63C785.943,402.981 788.094,400.83 790.744,400.83L810.865,400.83L810.865,406.834L791.932,406.834L791.932,425.962ZM879.932,425.962L879.932,406.834L861,406.834L861,400.83L881.121,400.83C883.771,400.83 885.922,402.981 885.922,405.63L885.922,425.962L879.932,425.962ZM879.932,455.706L885.922,455.706L885.922,476.039C885.922,478.688 883.771,480.839 881.121,480.839L861,480.839L861,474.834L879.932,474.834L879.932,455.706ZM791.932,455.706L791.932,474.834L810.865,474.834L810.865,480.839L790.744,480.839C788.094,480.839 785.943,478.688 785.943,476.039L785.943,455.706L791.932,455.706ZM858.658,424.533C858.658,424.533 858.836,424.289 859.329,424.263C859.804,424.237 860.073,424.534 860.073,424.534L863.723,428.185C864.009,428.471 864.095,428.901 863.94,429.274C863.887,429.402 863.81,429.515 863.715,429.608L862.898,430.424L834.236,459.086C832.136,461.186 828.727,461.186 826.627,459.086L811.841,444.299C811.841,444.299 811.496,444.079 811.546,443.537C811.595,443.016 811.942,442.783 811.942,442.783C812.532,442.193 815.481,439.244 815.481,439.244C815.669,439.057 815.923,438.952 816.188,438.952C816.454,438.952 816.708,439.057 816.895,439.244L830.421,452.77L858.658,424.533Z"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">收付款</span>
                    <span class="panel-item-subtitle">&nbsp;</span>
                </div>
                <div class="panel-item wallet" id="wallet">
                    <svg width="100%" height="100%" viewBox="0 0 100 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="currentColor">
                        <g transform="matrix(1,0,0,1,-785.943,-400.83)">
                            <path d="M885.922,405.63L885.922,476.039C885.922,478.688 883.771,480.839 881.121,480.839L790.744,480.839C788.094,480.839 785.943,478.688 785.943,476.039L785.943,405.63C785.943,402.981 788.094,400.83 790.744,400.83L881.121,400.83C883.771,400.83 885.922,402.981 885.922,405.63ZM879.932,424.834L879.932,406.834L791.932,406.834L791.932,474.834L879.932,474.834L879.932,456.834L850.963,456.834C842.132,456.834 834.963,449.665 834.963,440.834C834.963,432.004 842.132,424.834 850.963,424.834L879.932,424.834ZM879.932,450.265L879.932,431.403L850.963,431.403C845.758,431.403 841.532,435.629 841.532,440.834C841.532,446.04 845.758,450.265 850.963,450.265L879.932,450.265ZM851.513,435.834C854.273,435.834 856.513,438.075 856.513,440.834C856.513,443.594 854.273,445.834 851.513,445.834C848.754,445.834 846.513,443.594 846.513,440.834C846.513,438.075 848.754,435.834 851.513,435.834Z"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">钱包</span>
                    <span class="panel-item-subtitle" id="balance">￥358740573254329562734650357980245794830564903876984036738957489375485436436543532543523458564783568342765435435674328579345643756493756493856347895683974659378465478936579843658973658973465896359873659876345987634975643756729856492865978465275862835483547365704365027657024365087436075634965043560346578436578234564703657043650834.99</span>
                </div>
            </div>
        </div>
        <div class="panel">
            <span class="panel-title">金融理财</span>
            <div class="panel-items">
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,0.95458,-405.596,-907.632)">
                            <path d="M479.082,976.185L479.082,1023.92L406.111,1023.92L406.111,976.185L479.082,976.185ZM473.043,982.512L412.15,982.512C412.15,982.512 412.15,1017.6 412.15,1017.6L473.043,1017.6L473.043,982.512ZM441.056,1005.27L433.297,1005.27L433.297,1001.8L441.056,1001.8L441.056,998.767L433.297,998.767L433.297,995.26L439.992,995.26L432.73,985.674L436.361,985.674L442.56,994.453L442.817,994.453L448.979,985.674L452.463,985.674L445.201,995.26L451.932,995.26L451.932,998.767L444.137,998.767L444.137,1001.8L451.932,1001.8L451.932,1005.27L444.137,1005.27L444.137,1012.34L441.056,1012.34L441.056,1005.27ZM416.111,974.744L416.111,965.71L489.082,965.71L489.082,1013.45L481.378,1013.45L481.378,1007.12L483.043,1007.12L483.043,972.037L422.15,972.037L422.15,974.744L416.111,974.744Z" style="fill:rgb(250,158,59);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">微粒贷借钱</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1.02146,0,0,1.02146,-698.349,-973.982)">
                            <path d="M763.913,1019.39C763.913,1019.39 757.887,1016.58 755.197,1010.91C749.198,1022.99 736.733,1031.3 722.341,1031.3C702.108,1031.3 685.682,1014.87 685.682,994.641C685.682,989.175 686.881,983.987 689.03,979.326C689.027,979.31 689.038,979.284 689.066,979.248C689.523,978.263 690.022,977.302 690.561,976.366C692.226,971.916 692.612,965.738 692.612,965.738C706.583,969.038 709.333,957.982 709.333,957.982C710.721,967.791 707.577,972.453 699.024,980.84C698.292,981.557 697.605,982.321 696.966,983.127C696.552,983.571 696.218,984.027 695.958,984.492C693.222,988.48 691.617,993.33 691.617,998.559C691.617,1012.14 702.443,1023.16 715.778,1023.16C727.879,1023.16 737.914,1014.08 739.668,1002.26C736.695,1004.99 733.376,1004.43 733.376,1004.43C742,995.456 735.029,983.698 735.029,983.698C733.953,982.256 732.725,980.939 731.369,979.771C729.262,977.956 722.613,972.888 721.825,967.59C720.972,961.854 725.146,958.751 727.797,958.422C745.709,956.199 759,974.409 759,994.641C759,995.101 758.992,995.558 758.975,996.013C758.929,1000.8 759.144,1016.64 763.913,1019.39ZM716.951,990.886L723.688,997.624C724.216,998.151 724.216,999.008 723.688,999.536L716.951,1006.27C716.423,1006.8 715.566,1006.8 715.039,1006.27L708.301,999.536C707.773,999.008 707.773,998.151 708.301,997.624L715.039,990.886C715.566,990.359 716.423,990.359 716.951,990.886Z" style="fill:rgb(15,174,255);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">理财通</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(0.986248,0.165269,-0.103709,0.618883,-815.319,-720.323)">
                            <path d="M951.913,971.49L935.734,963.686L946.012,957.853C947.914,941.663 956.198,929.215 966.398,927.067L966.398,916.924C953.641,919.037 943.101,933.872 940.122,953.583C940.122,953.583 940.131,958.689 936.636,958.488C933.763,958.324 933.959,953.425 933.959,953.425C937.424,926.031 952.972,905.909 971.045,907.09C988.497,908.23 1002.58,928.858 1005.37,955.263C1005.37,955.263 1005.66,959.918 1002.46,960.331C999.128,960.76 999.209,955.105 999.209,955.105C996.524,934.464 985.518,918.439 971.84,916.803L971.84,983.959C992.129,972.301 979.354,941.883 979.354,941.883C978.54,941.002 977.677,940.227 976.772,939.572L976.772,928.503C986.834,933.561 993.947,948.881 993.495,966.48L992.476,1006.08C993.51,1013.9 996.392,1020.45 1000.32,1024.89C995.339,1029.9 989.123,1033.85 982.181,1036.07C981.534,1036.27 980.88,1036.46 980.22,1036.64L946.346,1045.69C946.324,1040.08 947.62,1034.77 949.845,1030.6C950.023,1030.27 950.207,1029.94 950.397,1029.62C946.56,1022.54 944.339,1013.21 944.598,1003.13L945.11,983.207C945.11,983.207 945.433,978.104 949.247,979.245C951.993,980.066 951.548,985.691 951.548,985.691L951.088,1003.55C950.694,1018.9 958.191,1031.87 967.82,1032.5C977.448,1033.12 985.586,1021.18 985.981,1005.83L986.351,991.428C981.719,995.216 976.342,996.278 971.84,996.305L971.84,1006.63C971.84,1009.02 970.621,1010.97 969.119,1010.97C967.617,1010.97 966.398,1009.02 966.398,1006.63L966.398,995.859C963.849,995.432 962.223,994.852 962.223,994.852C962.223,994.852 959.405,994.38 959.42,990.832C959.433,987.725 963.027,987.261 963.027,987.261C964.215,986.996 965.337,986.69 966.398,986.345L966.398,937.545C958.55,939.838 952.452,950.544 952.111,963.777L951.913,971.49ZM958.581,958.945C960.564,958.415 962.444,960.551 962.776,963.711C963.108,966.871 961.768,969.867 959.785,970.397C957.802,970.926 955.922,968.79 955.59,965.63C955.258,962.47 956.598,959.475 958.581,958.945Z" style="fill:rgb(250,158,59);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">保险服务</span>
                </div>
            </div>
        </div>
        <div class="panel">
            <span class="panel-title">生活服务</span>
            <div class="panel-items">
                <div class="panel-item" id="qrcode-toggle">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">状态栏显示</span>
                </div>
                <div class="panel-item" id="navbar-toggle">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">导航栏显示</span>
                </div>
            </div>
        </div>
        <!--
        <div class="panel">
            <span class="panel-title">交通出行</span>
            <div class="panel-items">
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
            </div>
        </div>
        <div class="panel">
            <span class="panel-title">购物消费</span>
            <div class="panel-items">
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
                <div class="panel-item">
                    <svg width="100%" height="100%" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                        <g transform="matrix(1,0,0,1,-129.167,-952.668)">
                            <path d="M209.832,1021.91C209.671,1024.16 208.433,1023.92 208.433,1023.92L136.801,1023.92C134.383,1023.92 132.42,1021.95 132.42,1019.54L132.42,969.792C132.42,967.375 134.383,965.412 136.801,965.412L205.533,965.412C207.95,965.412 209.913,967.375 209.913,969.792L209.913,1013.93L203.498,1010.06L203.498,1004.16L203.498,999.544L203.498,971.827L138.835,971.827L138.835,1017.5L188.615,1017.5L188.615,1007.66L208.681,1019.78C208.681,1019.78 209.94,1020.4 209.832,1021.91ZM198.751,980.808L198.751,988.506L143.839,988.506L143.839,980.808L198.751,980.808Z" style="fill:rgb(7,193,97);"/>
                        </g>
                    </svg>
                    <span class="panel-item-title">信用卡还款</span>
                </div>
            </div>
        </div>
        -->
        <button class="fullscreen-button" id="fullscreenButton">腾讯公司 版权所有<br/>Copyright © 2011-2024 Tencent. All Rights Reserved.</button>
    </div>

HTML Body

HTML Foot

function isInWeChat() {
            const ua = navigator.userAgent.toLowerCase();
            return /micromessenger/.test(ua);
        }
        if (isInWeChat()) {
            const barElements = document.querySelectorAll('.bar');
            barElements.forEach((bar) => {
                bar.style.display = 'none';
            });
            const statusBarElements = document.querySelectorAll('.status-bar');
            statusBarElements.forEach((sbar) => {
                sbar.style.display = 'none';
            });
        }

function generateNumberString(length) {
    if (length <= 0) {
        return '';
    }
    let result = '';
    // 第一位数字不为 0
    result += Math.floor(Math.random() * 9) + 1; 
    for (let i = 1; i < length; i++) {
        result += Math.floor(Math.random() * 10);
    }
    return result;
}
        function updateBalance(length) {
            const balanceSpan = document.getElementById('balance');
            balanceSpan.innerHTML = "￥" + generateNumberString(length) + ".54";
        }

        updateBalance(500);

        const balanceSpan = document.getElementById('balance');
        balanceSpan.innerHTML = "￥" + generateNumberString(500) + ".54";

        document.getElementById('wallet').addEventListener('click', function(event) {
            event.preventDefault(); // 阻止 a 标签的默认行为
            let userInput = prompt("钱包余额长度：");
            if (userInput !== null) {
                var number = parseInt(userInput); 
                if (!number) {
                    number = 500;
                }
                updateBalance(number);
            }
        });

        let isFullscreen = false;

        function requestFullScreen(element) {
            const el = element || document.documentElement;
            const requestMethod = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
            if (requestMethod) {
                requestMethod.call(el);
            } else {
                console.log("NOT SUPPORTED");
            }
        }

        function exitFullScreen() {
            const doc = document;
            if (doc.exitFullscreen) {
                doc.exitFullscreen();
            } else if (doc.mozCancelFullScreen) {
                doc.mozCancelFullScreen();
            } else if (doc.webkitExitFullscreen) {
                doc.webkitExitFullscreen();
            } else if (doc.msExitFullscreen) {
                doc.msExitFullscreen();
            }
        }
        
        function toggleFullscreen() {
            if (isFullscreen) {
                exitFullScreen();
                isFullscreen = false;
            } else {
                requestFullScreen();
                isFullscreen = true;
            }
        }
        
        const fullscreenButton = document.getElementById('fullscreenButton');
        fullscreenButton.addEventListener('click', toggleFullscreen);
        document.addEventListener('fullscreenchange', () => {
            isFullscreen = document.fullscreenElement!== null;
        });

        function toggleDisplay(element, odisplay) {
            let current = element.style.display;
            if (current == "none") {
                element.style.display = odisplay;
            } else {
                element.style.display = 'none';
            }
        }
        const qrcodeToggler = document.getElementById('qrcode-toggle');
        qrcodeToggler.addEventListener('click', function() {
            toggleDisplay(document.getElementById('statusBar'), "block")
        });
        const navbarToggler = document.getElementById('navbar-toggle');
        navbarToggler.addEventListener('click', function() {
            toggleDisplay(document.getElementById('navBar'), "flex")
        });

JS After HTML Body