<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ 'BTC/USDT' }}<view slot="right" class="right" @click="goto('kLine')"></view>
        </navigation>
        <view class="content">
            <view class="transactionSide">
                <transaction></transaction>
            </view>
            <view class="positionSide">
                <positionList v-on:depthChange="depthChange"></positionList>
            </view>
        </view>
        <view class="gap">
            <entrustOrderList></entrustOrderList>
        </view>
    </view>
</template>

<script>
export default {
    name: "trade",
    data() {
        return {

        };
    },
    computed: {
        i18n() {
            return this.$t("markets");
        },
    },
    onLoad() {

    },
    onShow() { },
    methods: {
        depthChange(e) {
            console.log(e);
        },
        goto(page) {
            let url = '';
            switch (page) {
                case 'kLine':
                    url = '/pages/markets/kLine'
                    break;
                default:
                    break;
            }
            uni.navigateTo({
                url,
            });
        }

    },
}
</script>

<style lang="scss" scoped>
.main {

    .right {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 32rpx;
        font-size: 24rpx;
        background-image: url(../../static/home/ic_increase.png);
        background-repeat: no-repeat;
        background-size: 48rpx;
        color: #FFBC1F;
    }


    .content {
        margin-top: 200rpx;
        padding-top: 20rpx;
        padding-bottom: 40rpx;
        margin-bottom: 32rpx;
        background: #211F32;
        display: flex;

        .transactionSide {
            width: 444rpx;
            margin-left: 28rpx;
        }

        .positionSide {
            width: 242rpx;
            margin-left: 36rpx;
        }


    }




}
</style>
