<template>
    <!-- 期货交易 -->
    <div class="trade">
        <div class="left">
            <a-row>
                <a-col class="label">合约：</a-col>
                <a-col>
                    <a-select class="inlineFormSelect" default-value="1" style="width: 207px">
                        <a-select-option value="1">一口价</a-select-option>
                        <a-select-option value="2">一口价2</a-select-option>
                    </a-select>
                </a-col>
            </a-row>
            <a-row>
                <a-col class="label">代码：</a-col>
                <a-col>CU2012</a-col>
            </a-row>
            <a-row>
                <a-col class="label">价格：</a-col>
                <a-col>
                    <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
                        <div slot="addonBefore">
                            <a-icon type="minus" />
                        </div>
                        <div slot="addonAfter">
                            <a-icon type="plus" />
                        </div>
                    </a-input>
                    <a-select
                        class="shortSelect"
                        default-value="1"
                        style="width: 60px; margin-left: 7px;"
                    >
                        <a-select-option value="1">最新</a-select-option>
                    </a-select>
                </a-col>
            </a-row>
            <a-row>
                <a-col class="label">数量：</a-col>
                <a-col>
                    <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
                        <div slot="addonBefore">
                            <a-icon type="minus" />
                        </div>
                        <div slot="addonAfter">
                            <a-icon type="plus" />
                        </div>
                    </a-input>
                    <a-button class="resetBtn">复位</a-button>
                </a-col>
            </a-row>
            <a-row class="btnBlock">
                <a-col :span="24">
                    <a-button class="numAndOperBtn red">
                        <p>54353</p>
                        <p>买入</p>
                    </a-button>
                    <a-button class="numAndOperBtn green">
                        <p>54353</p>
                        <p>卖出</p>
                    </a-button>
                    <a-button class="numAndOperBtn yellow">
                        <p>先开先平</p>
                        <p>平仓</p>
                    </a-button>
                </a-col>
            </a-row>
            <a-row class="btns">
                <a-col :span="24">
                    <div class="avaliable">
                        <div>
                            <span>可买&lt;=</span>
                            <span class="white">0</span>
                        </div>
                        <div>
                            <span>可买&lt;=</span>
                            <span class="white">0</span>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="right">
            <div class="rightBar">
                <div class="topFive">
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">5</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">32.3K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">4</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">24.5K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">3</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">40.2K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">2</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">23.3K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">1</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">54.0K</a-col>
                    </a-row>
                </div>
                <div class="bottomFive">
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">1</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">32.3K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">2</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">24.5K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">3</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">40.2K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">4</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">23.3K</a-col>
                    </a-row>
                    <a-row class="line">
                        <a-col class="firstCol">
                            <div class="no">5</div>
                            <div class="num">355.000</div>
                        </a-col>
                        <a-col class="lastCol">54.0K</a-col>
                    </a-row>
                </div>
                <div class="newLine">
                    <div class="lineBlock">
                        <div>最新</div>
                        <div class="red">546546</div>
                    </div>
                </div>
                <div class="newLine">
                    <div class="lineBlock">
                        <div>涨幅</div>
                        <div class="red">0.76%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'warehouse-trade-fixed-price',
    components: {},
    setup() {
        const form = {
            type: '1',
        };
        const price = '';
        return {
            form,
            price,
        };
    },
});
</script>

<style lang="less" scoped>
.trade {
    width: 100%;
    height: 100%;
    background: @m-black22;
    .inlineflex;
    overflow: hidden;
    .left {
        flex: 1;
        height: 100%;
        padding-left: 18px;
        padding-right: 9px;
        .inlineFormSelect.ant-select-single {
            margin-right: 0;
        }
        .ant-row {
            margin-bottom: 10px;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            color: @m-grey1;
            .ant-col.label {
                width: 42px;
            }
            .ant-col:last-child {
                color: @m-white1;
            }
        }
        .ant-row:first-child {
            margin-top: 21px;
        }
        .ant-row.btnBlock {
            height: 64px;
            margin-top: 22px;
        }
        .btns {
            margin-top: -5px;
            .avaliable {
                .inlineflex;
                color: @m-grey1;
                div + div {
                    margin-left: 33px;
                }
            }
        }
        .ant-btn.numAndOperBtn {
            width: 80px;
            height: 64px;
            border-radius: 5px;
            text-align: center;
            padding: 0;
            p {
                width: 100%;
                height: 32px;
                line-height: 30px;
                text-align: center;
                font-size: 16px;
                margin-bottom: 0;
            }
            p:last-child {
                font-size: 20px;
                font-weight: bold;
                line-height: 28px;
            }
        }
        .numAndOperBtn + .numAndOperBtn {
            margin-left: 5px;
        }
        .red {
            color: @m-red3;
            background: @m-red4;
            border: 1px solid @m-red1;
            p:first-child {
                border-bottom: 1px dashed @m-red5;
            }
            p:last-child {
                color: @m-red3;
            }
        }
        .green {
            background: @m-black23;
            border: 1px solid @m-green4;
            p:first-child {
                border-bottom: 1px dashed @m-green4;
                color: @m-green4;
            }
            p:last-child {
                color: @m-green4;
            }
        }
        .yellow {
            background: @m-red6;
            border: 1px solid @m-yellow2;
            p:first-child {
                border-bottom: 1px dashed @m-yellow3;
                color: @m-yellow2;
            }
            p:last-child {
                color: @m-yellow2;
            }
        }
        .ant-btn.resetBtn {
            margin-left: 6px;
            width: 60px;
            height: 30px;
            line-height: 28px;
            padding: 0;
            color: @m-blue10;
            font-size: 14px;
            text-align: center;
            background: @m-blue22;
            border: 1px solid @m-blue10;
            border-radius: 3px;
        }
    }
    .right {
        width: 150px;
        height: 100%;
        padding-top: 6px;
        margin-right: 12px;
        .flex;
        flex-direction: column;
        .rightBar {
            height: 292px;
            background: @m-grey21;
            border: 2px solid @m-grey21;
            .rounded-corners(5px);
        }
    }
}
.ant-row.line {
    width: 100%;
    height: 14px;
    margin-bottom: 8px;
    .inlineflex;
    .ant-col.firstCol {
        width: 70%;
        .inlineflex;
        .no {
            width: 14px;
            height: 14px;
            line-height: 14px;
            background: @m-yellow2;
            .rounded-corners(2px);
            text-align: center;
            font-size: 12px;
            color: @m-white0;
            align-self: center;
            align-items: center;
        }
        .num {
            margin-left: 9px;
            font-size: 12px;
            color: @m-red7;
            align-self: center;
            align-items: center;
        }
    }
    .ant-col.lastCol {
        flex: 1;
        max-width: 30%;
        text-align: right;
        align-self: center;
        align-items: center;
        color: @m-white1;
        font-size: 12px;
    }
}
.topFive {
    width: 100%;
    height: 124px;
    padding: 4px 6px;
    background: @m-red6;
    .rounded-corners(5px, 5px, 0, 0);
}
.bottomFive:extend(.topFive) {
    background: @m-blue22;
    .rounded-corners(0);
}
.newLine {
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    .lineBlock {
        width: 100%;
        height: 100%;
        .inlineflex;
        justify-content: space-between;
        div {
            color: @m-white0;
            font-size: 12px;
        }
        .red {
            color: @m-red8;
        }
    }
}
</style>;