samehome/pages/markets/kLine.vue

<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ 'BTC/USDT' }}</navigation>
        <!-- 价格百分比 -->
        <view class="header">
            <view class="top">
                <!-- 实时价格 -->
                <text class="price">34985.93</text>
                <!-- 百分比,根据数据正负判断颜色 -->
                <text class="percent" :class="{ rise: false }">-15.30%</text>
            </view>
            <view class="bottom">
                <view class="left">
                    <view class="title">{{ i18n.Highest }}</view>
                    <view class="value">45930.24</view>
                </view>
                <view class="center">
                    <view class="title">{{ i18n.Lowest }}</view>
                    <view class="value">45930.24</view>
                </view>
                <view class="right">
                    <view class="title">{{ i18n.Amount }}</view>
                    <view class="value">28394893.30943094</view>
                </view>
            </view>
        </view>
        <!-- K线图 -->
        <view class="kline">
        </view>
        <!-- 买卖挂牌表 -->
        <view class="MarketTrades">
            <view class="headTitle">Market trades</view>
            <view class="table">
                <view class="box">
                    <view class="title">
                        <view class="quantity">{{ i18n.Quantity }}</view>
                        <view class="price">{{ i18n.BuyingPrice }}</view>
                    </view>
                    <view class="list">
                        <view class="item" v-for="(item, index) in buyList" :key="index">
                            <text class="price">0.87897874</text>
                            <text class="num buy">{{ item }}</text>
                            <view class="buybg" :style="`width: ${20 * index}%;`"></view>
                        </view>
                    </view>
                </view>
                <view class="box">
                    <view class="title">
                        <view class="quantity">{{ i18n.Quantity }}</view>
                        <view class="price">{{ i18n.SellPrice20 }}</view>
                    </view>
                    <view class="list">
                        <view class="item" v-for="(item, index) in sellList" :key="index">
                            <text class="price">0.87897874</text>
                            <text class="num sell">{{ item }}</text>
                            <view class="sellbg" :style="`width: ${20 * index}%;`"></view>
                        </view>
                    </view>

                </view>
            </view>
        </view>

        <view class="btn">
            <!-- open按钮 -->
            <u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
                {{ i18n.open }}
            </u-button>
            <!-- close按钮 -->
            <u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
                {{ i18n.close }}
            </u-button>
        </view>

    </view>
</template>

<script>
export default {
    name: "trade",
    data() {
        return {
            buyList: 7,
            sellList: 9,

        };
    },
    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 {

    .header {
        background: #000000;
        margin-top: 200rpx;
        padding: 0 32rpx;


        .top {
            height: 80rpx;
            border-bottom: 2rpx solid #A1A0A8;

            .price {
                line-height: 80rpx;
                font-size: 40rpx;
            }

            .percent {
                vertical-align: text-top;
                margin-left: 20rpx;
                padding: 8rpx 20rpx;
                border-radius: 8rpx;
                font-size: 24rpx;
                background-color: rgba($color: #F26666, $alpha: 0.2);
                color: #F26666;

                &.rise {
                    color: #00E8A2;
                    background-color: rgba($color: #00E8A2, $alpha: 0.2);
                }
            }
        }

        .bottom {
            display: flex;
            font-size: 24rpx;

            .title {
                margin-top: 24rpx;
                line-height: 32rpx;
            }

            .value {
                margin: 24rpx 0;
                color: #A1A0A8;
            }

            .left {
                flex: 1;
                text-align: left;
            }

            .center {
                flex: 1;
                text-align: center;
            }

            .right {
                flex: 1;
                text-align: right;
            }

        }
    }

    .MarketTrades {
        .headTitle {
            padding-left: 32rpx;
            font-size: 34rpx;
            height: 80rpx;
            line-height: 80rpx;
        }

        .table {
            display: flex;
            font-size: 24rpx;

            .box {
                flex: 1;
                overflow: hidden;
                height: 450rpx;

                .title {
                    display: flex;
                    margin-bottom: 16rpx;
                    color: #A1A0A8;

                    .quantity {
                        flex: 1;
                    }

                    .price {
                        flex: 1;
                        text-align: center;
                    }
                }

                .list {
                    overflow: hidden;

                    .item {
                        position: relative;
                        width: 100%;
                        height: 50rpx;
                        line-height: 50rpx;
                        display: flex;

                        .price {
                            display: block;
                            width: 50%;
                            text-align: left;
                            z-index: 1;

                        }

                        .num {
                            display: block;
                            width: 50%;
                            text-align: right;
                            padding-right: 32rpx;
                            z-index: 1;

                            &.buy {
                                color: #00E8A2;
                            }

                            &.sell {
                                color: #F4506A;
                            }
                        }

                        .buybg {
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 0;
                            background: rgba($color: #00E8A2, $alpha: 0.1)
                        }

                        .sellbg {
                            height: 100%;
                            position: absolute;
                            top: 0;
                            right: 0;
                            z-index: 0;
                            background: rgba($color: #F4506A, $alpha: 0.1)
                        }

                    }
                }
            }




        }
    }

    .btn {
        display: flex;
        margin: 96rpx 32rpx;

        .button {
            flex: 1;
            box-sizing: border-box;
            height: 96rpx;
            border-radius: 16rpx;
            font-weight: 700;
            font-size: 28rpx;
            color: #15141F !important;

            &:nth-child(2) {
                margin-left: 14rpx;
            }
        }
    }

}
</style>