<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监控</title>
    <!-- 引入layui框架 -->
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/index.css">
    <link rel="icon" type="image/x-icon" href="/lib/favicon.ico">
    <script src="/lib/layui/layui.js"></script>
</head>

<body>
<button class="layui-btn layui-btn-lg layui-btn-normal" id="addPanelBtn">
    <i class="layui-icon layui-icon-add-circle"></i>
    添加监控面板
</button>
<div class="layui-container">
    <div class="card-container template-panel" data-panel-id="panel-1">
        <!-- 卡片头部 -->
        <div class="layui-row layui-card-header">
            <div class="layui-col-xs3">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm calculate_folding toggle-btn"
                            data-target=".comparison-section">
                        <i class="layui-icon layui-icon-chart"></i>
                    </button>
                    <button class="layui-btn layui-btn-sm amount_folding toggle-btn" data-target=".market-data">
                        <i class="layui-icon layui-icon-rmb"></i>
                    </button>
                    <button class="layui-btn layui-btn-sm sound_switch">
                        <i class="layui-icon layui-icon-sound"></i>
                    </button>
                </div>
            </div>
            <div class="layui-col-xs8 text-center">
                <h6 class="card-title">
                    <span class="symbol0">黄金</span>
                    <span> VS </span>
                    <span class="symbol1">公斤条</span>
                </h6>
            </div>
            <div class="layui-col-xs1 text-right">
                <button class="layui-btn layui-btn-sm layui-btn-danger remove-panel-btn">
                    <i class="layui-icon layui-icon-delete"></i>
                </button>
            </div>
        </div>

        <!-- 卡片主体 -->
        <div class="layui-card-body">
            <!-- 交易区域 -->
            <div class="layui-row trade-section">
                <!-- 左侧交易内容 -->
                <div class="layui-col-md3 trade-content">
                    <div class="layui-col-space1">
                        <div>
                            <select class="layui-select correspondingState">
                                <option value="0">买-买</option>
                                <option value="1">买-卖</option>
                                <option value="2">卖-卖</option>
                                <option value="3">卖-买</option>
                                <option value="4">买/买</option>
                                <option value="5">买/卖</option>
                                <option value="6">卖/卖</option>
                                <option value="7">卖/买</option>
                            </select>
                        </div>
                        <div class="layui-col-xs6 text-center price-display">1.23</div>
                        <div>
                            <div class="layui-input-inline" style="width:45%;">
                                <input type="text" class="layui-input basis_low" placeholder="≤">
                            </div>
                            <div class="layui-input-inline" style="width:45%;">
                                <input type="text" class="layui-input basis_high" placeholder="≥">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-md-offset6 profit-display-section">
                    <div class="layui-col-space1">
                        <div class="profit-label">总盈利</div>
                        <div class="profit-value">0</div>
                    </div>
                </div>
            </div>

            <!-- 对比区域 -->
            <div class="comparison-section">
                <div class="layui-row layui-col-space1 comparison-item">
                    <div class="layui-col-xs4 symbol symbol0">黄金</div>
                    <div class="layui-col-xs1">
                        <select class="layui-select direction">
                            <option value="up">涨</option>
                            <option value="down">跌</option>
                        </select>
                    </div>
                    <div class="layui-col-xs2">
                        <input type="text" class="layui-input entryPrice" placeholder="0.00">
                    </div>
                    <div class="layui-col-xs1 text-center">数量</div>
                    <div class="layui-col-xs2">
                        <input type="text" class="layui-input quantity" placeholder="0">
                    </div>
                    <div class="layui-col-xs2 profit">+6666</div>
                </div>
                <div class="layui-row layui-col-space1 comparison-item">
                    <div class="layui-col-xs4 symbol symbol1">公斤条</div>
                    <div class="layui-col-xs1">
                        <select class="layui-select direction">
                            <option value="up">涨</option>
                            <option value="down">跌</option>
                        </select>
                    </div>
                    <div class="layui-col-xs2">
                        <input type="text" class="layui-input entryPrice" placeholder="0.00">
                    </div>
                    <div class="layui-col-xs1 text-center">数量</div>
                    <div class="layui-col-xs2">
                        <input type="text" class="layui-input quantity" placeholder="0">
                    </div>
                    <div class="layui-col-xs2 profit">+6666</div>
                </div>
            </div>

            <!-- 市场数据区域 -->
            <div class="market-data">
                <div class="layui-col-space1 data-item">
                    <div class="symbol0">黄金</div>
                    <div class="data-time">18:00:30</div>
                    <div class="data-value">
                        <span class="data-bid">760.32</span>
                        <span>/</span>
                        <span class="data-ask">760.52</span>
                        <span>/</span>
                        <span class="data-volume">0.20</span>
                    </div>
                </div>
                <div class="layui-col-space1 data-item">
                    <div class="symbol1">公斤条</div>
                    <div class="data-time">18:00:30</div>
                    <div class="data-value">
                        <span class="data-bid">760.32</span>
                        <span>/</span>
                        <span class="data-ask">760.52</span>
                        <span>/</span>
                        <span class="data-volume">0.20</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/lib/index.js"></script>
</body>

</html>