<template>
    <view class="collection-detail">
        <view class="cd-address">当前所在门店：欧轩智能羽毛球场馆永泰店</view>
        <view class="cd-overview">
            <picker>
                <view class="co-time">
                    <text>8月5日</text>
                    <view></view>
                </view>
            </picker>
            <view class="co-total">
                <view>共139笔</view>
                <view>收入 ¥ 10899.34</view>
                <view>退款 ¥ 99.34</view>
            </view>
        </view>
        <view class="cd-tab">
            <view class="active">全部</view>
            <view>退款</view>
        </view>
        <view class="cd-list">
            <view class="cl-item" v-for="e in 10" :key="e">
                <image></image>
                <view class="ci-info">
                    <view>场馆订购</view>
                    <view>唐浩宗</view>
                    <view>20:05:41</view>
                </view>
                <view class="ci-price">
                    <view class="active">-20.00</view>
                    <view>退款成功</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import "../../../style/public.scss";
    page{
        background-color: #fff;
    }
    .collection-detail{
        .cd-address{
            height: 64upx;
            line-height: 64upx;
            padding: 0 24upx;
            font-size: 24upx;
            color: #1a1a1a;
        }
        .cd-overview{
            padding: 24upx 24upx 0;
            height: 144upx;
            background-color: #f2f2f7;
            .co-time{
                margin-bottom: 16upx;
                @include centerFlex(flex-start);
                >text{
                    font-size: 32upx;
                    line-height: 44upx;
                    color: #1a1a1a;
                }
                >view{
                    flex-shrink: 0;
                    margin-left: 10upx;
                    width: 0;
                    height: 0;
                    border-left: 10upx solid transparent;
                    border-right: 10upx solid transparent;
                    border-top: 10upx solid #1a1a1a;
                }
            }
            .co-total{
                @include centerFlex(center);
                >view{
                    flex-grow: 1;
                    font-size: 24upx;
                    color: #1a1a1a;
                    @include textHide(1);
                    &:first-child{
                        flex-shrink: 0;
                        flex-grow: 0;
                        width: 25%;
                    }
                }
            }
        }
        .cd-tab{
            height: 110upx;
            border-bottom: 2upx solid #D8D8D8;
            @include centerFlex(center);
            >view{
                margin: 0 92upx;
                height: 108upx;
                width: 120upx;
                line-height: 108upx;
                text-align: center;
                font-size: 32upx;
                color: #9C9C9F;
            }
            .active{
                position: relative;
                color: $themeColor;
                &::after{
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: -2upx;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 8upx;
                    border-radius: 4upx;
                    background-color: $themeColor;
                }
            }
        }
        .cd-list{
            padding: 0 30upx 20upx;
            .cl-item{
                padding: 30upx 0;
                border-bottom: 2upx solid #D8D8D8;
                display: flex;
                >image{
                    flex-shrink: 0;
                    margin-right: 30upx;
                    width: 64upx;
                    height: 64upx;
                    border-radius: 10upx;
                    background-color: #e8e9eb;
                }
                >view{
                    flex-grow: 1;
                    min-width: 30%;
                }
                .ci-info{
                    >view{
                        @include textHide(1);
                        &:first-child{
                            margin-bottom: 8upx;
                            line-height: 44upx;
                            font-size: 32upx;
                            color: #1a1a1a;
                        }
                        &+view{
                            margin-bottom: 6upx;
                            line-height: 34upx;
                            font-size: 24upx;
                            color: #9c9c9f;
                        }
                    }
                }
                .ci-price{
                    >view{
                        text-align: right;
                        @include textHide(1);
                        &:first-child{
                            margin-bottom: 8upx;
                            line-height: 44upx;
                            font-size: 32upx;
                            color: #1a1a1a;
                        }
                        &+view{
                            line-height: 34upx;
                            font-size: 24upx;
                            font-weight: 500;
                            color: #9c9c9f;
                        }
                    }
                    .active{
                        color: #F6843E !important;
                    }
                }
            }
        }
    }
</style>