<template>
    <view class="container">
        <view v-for="(items) in form" :key="items.key" class="order">
            <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
            <view class="order_detail">
                <view class="detail_img"><image v-bind:src="items.img"></image></view>
                <view class="detail_zi">
                    <view class="zi_name">{{items.name}}</view>
                    <view class="zi_standard">规格：{{items.standard}}</view>
                    <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
                </view>
            </view>
            <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
            <view class="clear"></view>
            <view class="button">
                <view class="button1">申请退款</view>
                <view class="button2">提醒发货</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            form:[
                {
                    key: 0,
                    name:'商品名称',
                    standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
                    img: '/static/img/detail/delivery.png',
                    preprice: 180,
                    number:1,
                    orderNum: 2034867958596334,
                    nowprice: 110,
                }
            ]

        }
    }
}
</script>

<style lang="scss">
.container{
    width: 100%;
    height: 100%;
    background: #F2F2F2;
    height: 700px;
    //要获取屏幕大小
}
.order{
    background: #FFFFFF;
    width: 90%;
    height: 450rpx;
    margin: 0 auto;
    padding: 40rpx;
    box-sizing: border-box;
    border-radius: 5px;
}
.order_number{
    color: #999999;
    font-size: 12px;
    font-family: "PingFangSC-Regular";
    span{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FF6B4A;
        letter-spacing: -0.26px;
        line-height: 18px;
        float: right;
    }
}
.order_detail{
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
}
.detail_img image{
    width: 188rpx;
    height:  188rpx;
}
.detail_zi{
    font-family: PingFangSC-Regular;
    width: 55%;
    height: 100%;
    view{
        margin-bottom: 20rpx;
    }
    .zi_name{
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
    }
    .zi_standard{
        font-size: 12px;
        color: #999999 ;
    }
    .zi_preprice{
        font-size: 14px;
        color: #FF6B4A;
        span{
            float: right;
            font-size: 12px;
            color: #999999;
        }
    }
}
.now_price{
    font-size: 14px;
    color: #333333;
    float: right;
    span{
        font-size: 14px;
        color: #FF6B4A ;
    }
}
.clear{
    clear: both;
}
.button{
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    view{
        width: 156rpx;
        height: 48rpx;
        border-radius: 12px;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
    }
    .button1{
        border: 1px solid #FF6B4A;
        font-family: PingFangSC-Regular;
        color: #FF6B4A;
        letter-spacing: -0.23px;
        margin-right: 30rpx;
    }
    .button2{
        border: 1px solid #FF6B4A;
        background: #FF6B4A;
        font-family: PingFangSC-Regular;
        color: #FFFFFF;
        letter-spacing: -0.23px;

    }
}
</style>