<template>
    <div class="container">
        <Breadcrumb :items="['下载专区', '客户端下载']" />

        <a-card title="客户端下载">
            <div class="cardcontainer">
                <a-card class="downcard" title="RunForge 自助乐跑平台客户端" hoverable>
                    <div class="content">
                        <div>
                            <span class="key">版本</span>
                            <span class="value">1.0.0</span>
                        </div>
                        <div>
                            <span class="key">适用平台</span>
                            <span class="value">Windows x86 64位</span>
                        </div>
                        <div>
                            <span class="key">下载链接</span>
                            <span class="value">
                                <a href="https://wwfe.lanzoue.com/b011lilaba"
                                    target="_blank">https://wwfe.lanzoue.com/b011lilaba</a>
                            </span>
                        </div>
                        <div>
                            <span class="key">提取码</span>
                            <span class="value">a1x2</span>
                        </div>
                        <div>
                            <span class="key">简介</span>
                            <span class="value">RunForge官方客户端，功能全面，涵盖RunForge平台所有功能。内置乐跑登录器，可进行乐跑账号的登录与更新。</span>
                        </div>
                    </div>
                </a-card>
                <a-card class="downcard two" title="RunForge乐跑登录器" hoverable>
                    <div class="content">
                        <div>
                            <span class="key">版本</span>
                            <span class="value">1.0.0</span>
                        </div>
                        <div>
                            <span class="key">适用平台</span>
                            <span class="value">Windows x86 64位</span>
                        </div>
                        <div>
                            <span class="key">下载链接</span>
                            <span class="value">
                                <a href="https://wwfe.lanzoue.com/b011layape"
                                    target="_blank">https://wwfe.lanzoue.com/b011layape</a>
                            </span>
                        </div>
                        <div>
                            <span class="key">提取码</span>
                            <span class="value">g20x</span>
                        </div>
                        <div>
                            <span class="key">简介</span>
                            <span class="value">体积小巧、开箱即用的免安装乐跑账号登录器，仅支持登录与更新乐跑账号，其他操作依赖RunForge官网及客户端完成。适用于代购人员提供给客户使用。</span>
                        </div>
                    </div>
                </a-card>
            </div>
            <a-divider />
            <div class="html" v-html="html" style="margin-left: 15px;"></div>
        </a-card>
    </div>
</template>

<script setup>
const html = decodeURI(atob('JTNDaDIlM0UlRTYlQjUlOEYlRTglQTclODglRTUlOTklQTglRTYlOEIlQTYlRTYlODglQUElRTUlQUUlQTIlRTYlODglQjclRTclQUIlQUYlRTQlQjglOEIlRTglQkQlQkQlRTglQTclQTMlRTUlODYlQjMlRTUlOEElOUUlRTYlQjMlOTUlRUYlQkMlOUElM0MvaDIlM0UlM0NwJTNFUnVuRm9yZ2UlRTUlOUMlQTglRTYlOUIlQjQlRTYlOTYlQjAlRTQlQjklOTAlRTglQjclOTElRTglQjQlQTYlRTUlOEYlQjclRTYlOTclQjYlRTQlQkMlOUElRTQlQkYlQUUlRTYlOTQlQjklRTclQjMlQkIlRTclQkIlOUYlRTQlQkIlQTMlRTclOTAlODYlRTglQUUlQkUlRTclQkQlQUUlRUYlQkMlOEMlRTUlQjklQjYlRTQlQjglOTQlRTYlOUMlQUElRTUlQUYlQjklRTclQTglOEIlRTUlQkElOEYlRTglQkYlOUIlRTglQTElOEMlRTclQUQlQkUlRTUlOTAlOEQlRTclQUQlODklRTYlOTMlOEQlRTQlQkQlOUMlRUYlQkMlOEMlRTUlOUIlQTAlRTYlQUQlQTQlRTQlQjglOEQlRTUlOEYlOTclRTUlODglQjAlRTYlQjUlOEYlRTglQTclODglRTUlOTklQTglRTUlOEYlOEElRTklODMlQTglRTUlODglODYlRTUlQUUlODklRTUlODUlQTglRTglQkQlQUYlRTQlQkIlQjYlRTclOUElODQlRTQlQkYlQTElRTQlQkIlQkIlRTMlODAlODIlM0MvcCUzRSUzQ3AlM0UlRTQlQkIlQTUlM0NzcGFuJTIwc3R5bGU9JTIyZm9udC1zaXplOiUyMDE0cHg7JTIyJTNFTWljcm9zb2Z0JTIwRWRnZSVFNiVCNSU4RiVFOCVBNyU4OCVFNSU5OSVBOCVFNCVCOCVCQSVFNCVCRSU4QiVFRiVCQyU5QSVFNyU4MiVCOSVFNSU4NyVCQiVFNSU4RiVCMyVFNCVCRSVBNyVFMiU4MCU5RCVFNiU5QiVCNCVFNSVBNCU5QSVFMiU4MCU5QyVFNiU4QyU4OSVFOSU5MiVBRSUzQy9zcGFuJTNFJTNDL3AlM0UlM0NwJTNFJTNDaW1nJTIwc3JjPSUyMmh0dHA6Ly9sZXBhby1jbG91ZC54eG9vMzY1LnRvcC92aWV3LnBocC82ZTQyZmYwMjQ5M2I5ZGRjNjFlNmIxNjUwYjZhNTM0MS5wbmclMjIlMjBhbHQ9JTIyUGl4UGluXzIwMjUtMDgtMTNfMTYtMzktMTYucG5nJTIyJTIwZGF0YS1ocmVmPSUyMmh0dHA6Ly9sZXBhby1jbG91ZC54eG9vMzY1LnRvcC92aWV3LnBocC82ZTQyZmYwMjQ5M2I5ZGRjNjFlNmIxNjUwYjZhNTM0MS5wbmclMjIlMjBzdHlsZT0lMjJ3aWR0aDolMjA0NjMuMDBweDtoZWlnaHQ6JTIwMTU3LjQ3cHg7JTIyLyUzRSUzQy9wJTNFJTNDcCUzRSVFOSU4MCU4OSVFNiU4QiVBOSVFNCVCRiU5RCVFNyU5NSU5OSVFNiU5NiU4NyVFNCVCQiVCNiUzQy9wJTNFJTNDcCUzRSUzQ2ltZyUyMHNyYz0lMjJodHRwOi8vbGVwYW8tY2xvdWQueHhvbzM2NS50b3Avdmlldy5waHAvYjA4N2JmOGFjODNhNmQ2NGE2ZTMyYzNmNWRmZTNkNTkucG5nJTIyJTIwYWx0PSUyMlBpeFBpbl8yMDI1LTA4LTEzXzE2LTM5LTM1LnBuZyUyMiUyMGRhdGEtaHJlZj0lMjJodHRwOi8vbGVwYW8tY2xvdWQueHhvbzM2NS50b3Avdmlldy5waHAvYjA4N2JmOGFjODNhNmQ2NGE2ZTMyYzNmNWRmZTNkNTkucG5nJTIyJTIwc3R5bGU9JTIyd2lkdGg6JTIwNDE4LjAwcHg7aGVpZ2h0OiUyMDI4OS42NXB4OyUyMi8lM0UlM0MvcCUzRSUzQ3AlM0UlRTclODIlQjklRTUlODclQkIlRTIlODAlOUQlRTYlOTglQkUlRTclQTQlQkElRTglQUYlQTYlRTclQkIlODYlRTQlQkYlQTElRTYlODElQUYlRTIlODAlOUMlRUYlQkMlOEMlRTklOUElOEYlRTUlOTAlOEUlRTclODIlQjklRTUlODclQkIlRTIlODAlOUQlRTQlQkIlOEQlRTclODQlQjYlRTQlQkYlOUQlRTclOTUlOTklRTIlODAlOUMlRTMlODAlODIlM0MvcCUzRSUzQ3AlM0UlM0NpbWclMjBzcmM9JTIyaHR0cDovL2xlcGFvLWNsb3VkLnh4b28zNjUudG9wL3ZpZXcucGhwLzJhZmE2NjIwMWI2OGYwNzU5MTEyNzVlNzY2MWUzNmY2LnBuZyUyMiUyMGFsdD0lMjJQaXhQaW5fMjAyNS0wOC0xM18xNi00MC0yNi5wbmclMjIlMjBkYXRhLWhyZWY9JTIyaHR0cDovL2xlcGFvLWNsb3VkLnh4b28zNjUudG9wL3ZpZXcucGhwLzJhZmE2NjIwMWI2OGYwNzU5MTEyNzVlNzY2MWUzNmY2LnBuZyUyMiUyMHN0eWxlPSUyMndpZHRoOiUyMDMyNi4wMHB4O2hlaWdodDolMjA0MTguMTlweDslMjIvJTNFJTNDL3AlM0UlM0NwJTNFJUU4JThCJUE1JUU4JUEyJUFCMzYwJUUzJTgwJTgxV2luZG93cyVFNSVBRSU4OSVFNSU4NSVBOCVFNCVCOCVBRCVFNSVCRiU4MyVFNyVBRCU4OSVFNSVBRSU4OSVFNSU4NSVBOCVFNSVCQSU5NCVFNyU5NCVBOCVFOSU5QSU5NCVFNyVBNiVCQiVFMyU4MCU4MSVFOSU5OCVCQiVFNiVBRCVBMiVFNiU5MyU4RCVFNCVCRCU5QyVFRiVCQyU4QyVFOSU5QyU4MCVFNiU4OSVCRSVFNSU5QiU5RSVFMyU4MCU4MSVFNiU4MSVBMiVFNSVBNCU4RCVFOCVBMiVBQiVFOSU5QSU5NCVFNyVBNiVCQiVFNiU5NiU4NyVFNCVCQiVCNiVFRiVCQyU4QyVFNSU4NSU4MSVFOCVBRSVCOFJ1bkZvcmdlJUU3JUE4JThCJUU1JUJBJThGJUU3JTlBJTg0JUU2JTkzJThEJUU0JUJEJTlDJUVGJUJDJThDJUU4JThCJUE1UnVuRm9yZ2UlRTclQTglOEIlRTUlQkElOEYlRTglQkYlOTAlRTglQTElOEMlRTUlQkMlODIlRTUlQjglQjglRUYlQkMlOEMlRTklOUMlODAlRTklODclOEQlRTUlOTAlQUYlRTclQTglOEIlRTUlQkElOEYlRTMlODAlODIlM0NpbWclMjBzcmM9JTIyaHR0cDovL2xlcGFvLWNsb3VkLnh4b28zNjUudG9wL3ZpZXcucGhwLzZkZDQwZDI4YTZhZTM2MzNlMWY2MDBmNjg0YzlhMjMwLnBuZyUyMiUyMGFsdD0lMjJQaXhQaW5fMjAyNS0wOC0xMl8xNS0xOS01OS5wbmclMjIlMjBkYXRhLWhyZWY9JTIyaHR0cDovL2xlcGFvLWNsb3VkLnh4b28zNjUudG9wL3ZpZXcucGhwLzZkZDQwZDI4YTZhZTM2MzNlMWY2MDBmNjg0YzlhMjMwLnBuZyUyMiUyMHN0eWxlPSUyMndpZHRoOiUyMDQ0NC4wMHB4O2hlaWdodDolMjAyNzEuMjRweDslMjIvJTNFJTNDL3AlM0U='))
</script>

<style lang="less" scoped>
.container {
    padding: 0 20px 20px 20px;

    .cardcontainer {
        display: flex;
        gap: 20px;
        padding: 20px;

        .downcard {
            width: 50%;
            min-height: 300px;

            .content {
                display: flex;
                flex-direction: column;
                font-size: 1.1em;
                gap: 10px;

                .key {
                    display: block;
                    font-weight: bold;
                    min-width: 100px;
                }
            }
        }

        .two-demo {
            margin-left: 24px;
            transition-property: all;
        }

        .downcard:hover {
            transform: translateY(-1px);
        }
    }
}
</style>