<template>
    <view class="config-container fixed-bot-padding">
        <view class="cc-tit">快速配置</view>
        <view class="c-item">
            <view class="i-tit">选择日期范围</view>
            <view class="i-select">
                <picker class="s-picker">
                    <view class="p-view">
                        <input value="2020年5月16日" />
                        <image></image>
                    </view>
                </picker>
                <view>-</view>
                <picker class="s-picker">
                    <view class="p-view">
                        <input value="2020年5月16日" />
                        <image></image>
                    </view>
                </picker>
            </view>
        </view>

        <view class="c-item">
            <view class="i-tit">选择日期范围</view>
            <view class="i-select">
                <picker class="s-picker">
                    <view class="p-view">
                        <input value="2020年5月16日" />
                        <image></image>
                    </view>
                </picker>
                <view>-</view>
                <picker class="s-picker">
                    <view class="p-view">
                        <input value="2020年5月16日" />
                        <image></image>
                    </view>
                </picker>
            </view>
        </view>
        
        <view class="c-item">
            <view class="i-tit">状态</view>
            <view class="i-select">
                <picker class="s-picker">
                    <view class="p-view">
                        <input value="空闲" />
                        <image></image>
                    </view>
                </picker>
            </view>
        </view>

        <view class="c-remarks">
            <view class="r-tit">备注</view>
            <view class="r-frame"><textarea></textarea></view>
        </view>

        <view class="fixed-bot-btn"><view hover-class="hover-active">保存</view></view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import '~style/public.scss';
    page{
        background-color: #fff;
    }
    .cc-tit{
        padding: 24upx 0 44upx;
        text-align: center;
        font-size: 36upx;
        line-height: 50upx;
        color: #333;
    }
    .c-item{
        margin-bottom: 24upx;
        padding: 0 24upx;
        .i-tit{
            margin-bottom: 16upx;
            line-height: 40upx;
            font-size: 28upx;
            color: #333;
        }
        .i-select{
            @include centerFlex(space-between);
            .s-picker{
                border: 2upx solid #d8d8d8;
                border-radius: 6upx;
                .p-view{
                    padding: 0 16upx;
                    width: 316upx;
                    height: 60upx;
                    @include centerFlex(space-between);
                    input{
                        text-align: center;
                        flex-grow: 1;
                        font-weight: 500;
                        font-size: 28upx;
                        color: #333;
                    }
                    image{
                        flex-shrink: 0;
                        width: 16upx;
                        height: 16upx;
                        background-color: skyblue;
                    }
                }
            }
        }
    }
    .c-remarks{
        padding: 0 24upx;
        .r-tit{
            margin-bottom: 24upx;
            font-size: 28upx;
            line-height: 40upx;
            color: #333;

        }
        .r-frame{
            padding: 16upx;
            height: 242upx;
            border-radius: 6upx;
            border: 2upx solid #d8d8d8;
            >textarea{
                width: 100%;
                height: 100%;
                font-size: 28upx;
                line-height: 32upx;
                color: #333;

            }
        }
    }
</style>