<template>
    <!-- 交易状态 -->
    <div class="confirm_order">
        <div class="confirm_order_top">
            <img :src="require('@assets/icon_jiaoyizhong.png')" alt="" class="confirm_order_top_img">
            <div>{{transactionStatus}}</div>
        </div>
        <div class="order_information">
            <img :src="require('@assets/data_display.png')" alt="" class="order_information_img">
            <div class="order_information_title">
                <div class="order_information_title_one">陶瓷艺术大师艺术大师 易查理陶瓷艺术大师艺术大师 易查理陶瓷艺术大师艺术大师 易查理</div>
                <div class="order_information_title_two">收藏品</div>
                <div class="order_information_title_number">x1</div>
            </div>
        </div>
        <div class="fee_details">
            <div class="fee_details_con">
                <div>商品费用</div>
                <div class="fee_details_actual_payment">¥320</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>GAS费用</div>
                <div class="fee_details_actual_payment">¥1</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>实际支付</div>
                <div class="fee_details_price">¥321</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>支付方式</div>
                <div class="fee_details_actual_payment">支付宝支付</div>
            </div>
        </div>
        <div class="fee_details">
            <div class="fee_details_con">
                <div class="order_details">订单编号</div>
                <div class="order_details_con">2019052035464</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">创建时间</div>
                <div class="order_details_con">2021-05-20 07:52:36</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">付款时间</div>
                <div class="order_details_con">2021-05-20 07:52:36</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">成交时间</div>
                <div class="order_details_con">2021-05-20 07:52:36</div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
    const checked = ref('1');
        return { checked };
    },
    data(){
        return{
            transaction: false,
            transactionStatus: "交易中"
        }
    }
};
</script>

<style lang="less" scoped>
    .navBar{
        width: 100%;
        height: 44px;
    }
    .confirm_order{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0F0F27;
        margin-top: 44px;
        padding: 10px 16px;
        box-sizing: border-box;
        .confirm_order_top{
            width: 100%;
            height: 44px;
            background: #29293F;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28B6FF;
            display: flex;
            margin-bottom: 10px;
            .confirm_order_top_img{
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }
        }
        .order_information{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            margin-bottom: 10px;
            .order_information_img{
                width: 80px;
                height: 80px;
                margin-right: 12px;
            }
            .order_information_title_one{
                width: 215px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                margin-bottom: 6px;
            }
            .order_information_title_two{
                width: 56px;
                height: 22px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #28B6FF;
                line-height: 22px;
                text-align: center;
                margin-bottom: 16px;
            }
            .order_information_title_number{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C8C9CC;
            }
        }
        .fee_details{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 12px 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
            .fee_details_con{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                display: flex;
                justify-content: space-between;
                .fee_details_price{
                    font-weight: 500;
                    color: #28B6FF;
                }
                .order_details{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                }
                .order_details_con{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
        }
        .fee_details_divider{
                margin: 10px 0;
            }
        .payment_method{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 12px 10px;
            box-sizing: border-box;
            .payment_method_con{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .payment_method_con_left{
                    display: flex;
                    .payment_method_title{
                        margin-top: 2px;
                    }
                }
                .payment_method_img{
                    width: 24px;
                    height: 24px;
                    margin-right: 6px;
                }
            }
        }
        .fee_details_actual_payment{
            color: #FFFFFF;
        }
    }
    .immediate_payment{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 56px;
        background: #15152D;
        padding: 8px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .immediate_payment_total{
            margin-top: 16px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            margin-right: 4px;
        }
        .immediate_payment_price_symbol{
            margin-top: 16px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #28B6FF;
        }
        .immediate_payment_price{
            margin-top: 10px;
            font-size: 26px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28B6FF;
        }
        .immediate_payment_con{
            width: 160px;
            height: 40px;
            background: #28B6FF;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 40px;
            text-align: center;
        }
    }
</style>
