<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Liteyuki Stats Message</title>
    <link rel="stylesheet" href="./css/card.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <link rel="stylesheet" href="./css/stat_rank.css">
    <style>
        .row {
            height: 100px;
            display: flex;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 100px;
            margin-bottom: 10px;
            padding-right: 10px;
        }
        
        .row-name {
            font-size: 40px;
            align-content: center;
            width: 100px;
            text-align: left;
        }
        
        .row-icon {
            border-radius: 50%;
            margin-right: auto;
        }
        
        .row-count {
            align-content: center;
            font-size: 40px;
            /*    靠右*/
            margin-left: auto;
        }
    </style>
</head>

<body>

<template id="row-template">
    <div class="row">
        <img src="./img/arrow-up.svg" alt="up" class="row-icon">
        <div class="row-name"></div>
        <div class="row-count"></div>
    </div>
</template>

<div class="data-storage" id="data">{{ data | tojson }}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script src="./js/stat_rank.js"></script>
<script src="./js/card.js"></script>
</body>