<template>
    <div class="trade-software table_form-container">
        <el-card>
            <div class="left">
                <el-icon>
                    <Monitor />
                </el-icon>
                <span class="title">PC端</span>
                <el-icon class="download">
                    <Bottom />
                </el-icon>
            </div>
            <div class="right">
                <span class="text">系统要求:适用于windows 2008/7/8/10操作系统，网络速度为56kbps或更高</span>
            </div>
        </el-card>
        <el-card>
            <div class="left">
                <el-icon>
                    <svg t="1774244659320" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2548" width="200" height="200">
                        <path
                            d="M839.562 344.72c-30.082 0-54.476 24.771-54.476 55.326l0 216.209c0 30.558 24.393 55.328 54.476 55.328 30.087 0 54.476-24.771 54.476-55.328l0-216.209c0.001-30.555-24.387-55.326-54.476-55.326zM182.482 344.72c-30.085 0-54.476 24.771-54.476 55.326l0 216.209c0 30.558 24.391 55.328 54.476 55.328s54.476-24.771 54.476-55.328l0-216.209c0-30.555-24.391-55.326-54.476-55.326zM269.74 346.395l0 395.014c0 23.462 19.02 42.481 42.483 42.481l48.533 0 0 120.293c0 30.558 24.391 55.328 54.476 55.328 30.087 0 54.478-24.771 54.478-55.328l0-120.294 84.786 0 0 120.293c0 30.558 24.393 55.328 54.476 55.328 30.087 0 54.481-24.771 54.481-55.328l0-120.293 48.528 0c23.467 0 42.485-19.018 42.485-42.481l0-395.013-484.725 0zM625.92 141.706l44.777-64.999c2.657-3.861 1.997-8.932-1.478-11.326-3.475-2.392-8.447-1.204-11.104 2.659l-46.512 67.518c-30.65-12.075-64.707-18.805-100.581-18.805-35.874 0-69.929 6.729-100.579 18.805l-46.512-67.518c-2.659-3.863-7.631-5.05-11.106-2.659-3.475 2.395-4.134 7.466-1.476 11.326l44.777 64.999c-71.188 33.117-121.113 96.042-127.467 169.487l484.727 0c-6.355-73.445-56.28-136.37-127.466-169.487zM408.772 244.144c-14.811 0-26.819-12.005-26.819-26.819 0-14.811 12.007-26.819 26.819-26.819 14.813 0 26.819 12.007 26.819 26.819 0 14.813-12.005 26.819-26.819 26.819zM616.625 244.144c-14.811 0-26.816-12.005-26.816-26.819 0-14.811 12.004-26.819 26.816-26.819 14.816 0 26.821 12.007 26.821 26.819 0 14.813-12.004 26.819-26.821 26.819z"
                            fill="#272636" p-id="2549"></path>
                    </svg>
                </el-icon>
                <span class="title">Android APK</span>
                <el-icon class="download">
                    <Bottom />
                </el-icon>
            </div>
            <div class="right">
                <span class="text">下载说明:下载后可以通过手机安装APK</span>
            </div>
        </el-card>
        <el-card>
            <div class="left">
                <el-icon>
                    <svg t="1774244690948" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3750" width="200" height="200">
                        <path
                            d="M836.608 675.84q41.984 59.392 96.256 76.8-23.552 72.704-74.752 151.552-78.848 118.784-155.648 118.784-28.672 0-84.992-19.456-52.224-19.456-91.136-19.456t-86.016 20.48q-49.152 19.456-80.896 19.456-92.16 0-181.248-156.672-89.088-154.624-89.088-304.128 0-138.24 67.584-226.304 69.632-88.064 172.032-88.064 22.528 0 50.176 5.632t57.344 20.992q31.744 17.408 52.224 24.064t31.744 6.656q13.312 0 40.96-6.144t55.296-22.528q29.696-16.384 51.2-24.576t44.032-8.192q71.68 0 129.024 38.912 30.72 20.48 62.464 60.416-47.104 40.96-68.608 71.68-39.936 57.344-39.936 124.928 0 74.752 41.984 135.168z m-205.824-478.208q-35.84 33.792-65.536 44.032-10.24 3.072-26.112 5.632t-36.352 4.608q1.024-90.112 47.104-155.648T701.44 6.144q2.048 10.24 3.072 14.336v11.264q0 36.864-17.408 82.944-18.432 45.056-56.32 82.944z"
                            fill="#272636" p-id="3751"></path>
                    </svg>
                </el-icon>
                <span class="title">IOS</span>
                <el-icon class="download">
                    <Bottom />
                </el-icon>
            </div>
            <div class="right">
                <span class="text">下载说明:iPhone和iPad用户可以通过 Apple App Store搜索InTrade安装</span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'Exe'
})
import { Monitor, Bottom } from '@element-plus/icons-vue'
</script>

<style scoped lang="scss">
.trade-software {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .el-card {
        :deep(.el-card__body) {
            display: flex;
            justify-content: space-between;
        }

        .left {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;

            .title {
                font-weight: 500;
            }
        }

        .right {
            .text {
                font-size: 14px;
            }
        }

        .left,
        .right {
            .el-icon{
                font-size: 30px;
            }
            .download {
                font-size: 20px;
                cursor: pointer;

                &:before {
                    content: "";
                    display: block;
                    height: 2px;
                    width: 16px;
                    background: var(--el-text-color-primary);
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
}
</style>
