samehome/pages/markets/trade.vue

<template>
    <view class="main">
        <!-- nav -->
        <navigation :showBack="false">
            <view class="leftMenuBtn" @click="popupShow = true">{{ 'BTC/USDT' }}</view>
            <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="orderList">
            <entrustOrderList></entrustOrderList>
        </view>

        <u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true"
            bgColor="#15141F">
            <view class="popupContent">
                <!-- nav -->
                <view class="head">
                    <text class="item">{{ i18n.TrandingPair }}</text>
                    <text class="center">{{ i18n.LatestPrice }}</text>
                    <text class="item">{{ i18n.RiseAndfall }}</text>
                </view>
                <!-- 列表 -->
                <view class="coinList">
                    <scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true"
                        @touchmove.stop.prevent="">
                        <view class="coin" v-for="(item, index) in 20" :key="index" @click="switchTo(item)">
                            <view class="name">BTC/USDT</view>
                            <view class="price">{{ 5145 * index * index * index }}</view>
                            <view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view>
                        </view>
                    </scroll-view>

                </view>
            </view>
        </u-popup>
        <!-- tabBar -->
        <tab-bar :selectActive="2" :isTarde="true"></tab-bar>
    </view>
</template>

<script>
export default {
    name: "trade",
    data() {
        return {
            popupShow: false,
        };
    },
    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,
            });
        },
        /**
         * 切换当前交易货币对
         */
        switchTo(item) {
            this.popupShow = false;
        }

    },
}
</script>

<style lang="scss" scoped>
.main {
    padding-bottom: 198rpx; // 避免底部TabBar盖住内容

    .leftMenuBtn {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        left: 32rpx;
        font-size: 24rpx;
        background-image: url(../../static/maskets/menu.png);
        background-repeat: no-repeat;
        background-size: 48rpx;
        padding-left: 54rpx;
        font-size: 34rpx;
        font-weight: normal;
    }

    .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;
        }


    }

    .orderList {}

    .popup {
        .popupContent {
            width: 586rpx;
            font-size: 24rpx;

            .head {
                margin-top: 108rpx;
                color: #818197;
                margin-left: 16rpx;
                display: flex;

                .center {
                    width: 190rpx;
                    padding-left: 30rpx;
                    font-size: 24rpx;
                }

                .item {
                    font-size: 24rpx;
                }
            }

            .coinList {
                margin: 0rpx 32rpx 0;
                overflow: hidden;

                .coin {
                    overflow: hidden;
                    position: relative;
                    height: 64rpx;
                    padding: 12rpx 0;
                    font-size: 24rpx;

                    .name {
                        display: inline-block;
                        width: 180rpx;
                        height: 100%;
                        line-height: 64rpx;
                        font-size: 24rpx;
                    }

                    .price {
                        display: inline-block;
                        width: 180rpx;
                        height: 100%;
                        line-height: 64rpx;
                        font-size: 24rpx;
                        // text-align: center;
                    }

                    .priceChange {
                        position: absolute;
                        right: 0;
                        display: inline-block;
                        width: 164rpx;
                        height: 64rpx;
                        border-radius: 20rpx;
                        line-height: 64rpx;
                        background-color: $mainColor;
                        font-size: 24rpx;
                        text-align: right;
                        padding-right: 16rpx;
                        box-sizing: border-box;


                        &::before {
                            display: block;
                            position: absolute;
                            content: '';
                            background-image: url(../../static/maskets/ic_arrow_up.png);
                            background-repeat: no-repeat;
                            background-size: contain;
                            width: 28rpx;
                            height: 28rpx;
                            top: 18rpx;
                            left: 16rpx;
                        }


                        &.down {
                            background-color: $assistRed;

                            &::before {
                                background-image: url(../../static/maskets/ic_arrow_down.png);
                            }
                        }
                    }
                }
            }
        }



    }




}
</style>