<template>
    <view class="use-detail">
        <view class="ud-box">
            <view class="ub-stadium">
                <image class="us-logo"></image>
                <view class="us-name">欧轩智能羽毛球馆(永泰店)</view>
            </view>
            <view class="ub-lines">
                <kv-line label="创建时间：">
                    <template slot="default">2019-05-17 11:12:58</template>
                    <template slot="right">
                        <view class="ul-status">已完成</view>
                    </template>
                </kv-line>
                <kv-line label="手机号码：">18656456895</kv-line>
                <kv-line label="用户昵称：">yiming</kv-line>
                <kv-line label="结束计时方式：">小程序(欧轩智能场馆)</kv-line>
            </view>
        </view>
        <view class="ud-box">
            <kv-line label="计时信息"></kv-line>
            <view class="ub-lines">
                <kv-line label="设备名称：">1号水阀</kv-line>
                <kv-line label="开始时间：">2020-01-10 15:02:24</kv-line>
                <kv-line label="结束时间：">2020-01-10 17:20:24</kv-line>
                <kv-line label="时长合计：">35分9秒(免费时长:15分00秒)</kv-line>
                <kv-line label="免费时长：">15分00秒</kv-line>
            </view>
            <view class="ui-deduction">
                <text class="ud-txt">扣减时长：</text>20分钟00秒
            </view>
            <view class="ui-btn">结束计时</view>
        </view>
    </view>
</template>

<script>
import kv_line from "@/components/kv_line.vue";
export default {
    components: {
        'kv-line': kv_line,
    },
}
</script>

<style lang="scss">
    .use-detail{
        padding: 24upx;
        @include isPd(24upx);
        .ud-box{
            padding: 30upx;
            background: #fff;
            border-radius: 10upx;
            &+.ud-box{
                margin-top: 24upx;
            }
        }
        .ub-stadium{
            @include ctf;
            padding-bottom: 26upx;
            border-bottom: 1px solid #D8D8D8;
            .us-logo{
                margin-right: 14upx;
                flex-shrink: 0;
                width: 40upx;
                height: 40upx;
            }
            .us-name{
                margin-left: 20upx;
                font-size: 28upx;
                color: #333333;
                @include tHide;
                @include flcw(28upx, 40upx, #333333, 500);
            }
        }
        .ub-lines{
            padding-top: 24upx;
            .ul-status{
                text-align: right;
                @include flcw(28upx, 40upx, #9C9C9F);
            }
        }

        .ui-deduction{
            margin-top: 30upx;
            padding-top: 24upx;
            text-align: right;
            border-top: 1upx solid #D8D8D8;
            @include flcw(28upx, 40upx, $mColor);
            @include tHide;
            .ud-txt{
                color: #9C9C9F;
            }
        }

        .ui-btn{
            margin: 10upx 0upx 0upx auto;
            width: 192upx;
            height: 80upx;
            text-align: center;
            border-radius: 10upx;
            background: $mColor;
            @include flcw(32upx, 80upx, #fff);
        }
    }
</style>