<template>
    <view class="content">
        <image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
        <view class="sign">
            <!-- <view class="signTitle">
                记得每日要签到哦
            </view> -->
            <view class="signAdd">
                <view class="label">
                    <image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
                    <view class="day">
                        <view class="number">
                            <text>10</text>天
                        </view>
                        本月签到
                    </view>
                </view>
                <view class="label">
                    <image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
                    <view class="day">
                        <view class="number">
                            <text>1</text>天
                        </view>
                        本月漏签
                    </view>
                </view>
            </view>
            <view class="signDate">
                <view class="date">
                    2020-01-07
                </view>
                <view class="list">
                    <view class="day">
                        1
                    </view>
                    <view class="day">
                        2
                    </view>
                    <view class="day">
                        3
                    </view>
                    <view class="day">
                        4
                    </view>
                    <view class="day">
                        5
                    </view>
                    <view class="day">
                        6
                    </view>
                    <view class="day">
                        7
                    </view>
                    <view class="day">
                        8
                    </view>
                </view>
                <view class="signBtn">
                    <view class="btn">
                        立即签到
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { date } from '@/apis/interfaces/sign'
    export default {
    	data() {
    		return {
    		}
    	},
        mounted() {
            this.dateList();
        },
    	methods: {
            // 用户登录
            dateList() {
            	date().then(res => {
            		console.log(res)
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
    	}
    }
</script>

<style lang="scss" scoped>
    page {
        background: $window-color;
        height: 100vh;
    }
    .setting {
        width: 100%;
    }
    .sign {
        z-index: 9;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 $padding + 20;
        margin-top: -$margin * 2.5;
        position: relative;
        box-sizing: border-box;
        .signTitle {
            padding: $padding * 3;
            font-size: $title-size + 20;
            color: #48988d;
            font-weight: 600;
            text-align: center;
        }
        .signAdd {
            padding: $padding $padding * 2.5;
            box-sizing: border-box;
            border-radius: $radius-m;
            background-color: white;
            margin-bottom: $margin;
            display: flex;
            .label {
                display: flex;
                font-size: $title-size-sm;
                &:first-child {
                    flex: 1;
                    .day {
                        text {
                            color: $main-color;
                        }
                    }
                }
                .picture {
                    width: 74rpx;
                    height: 74rpx;
                    margin-right: $margin - 10;
                }
                .day {
                    color: $text-gray;
                    text {
                        font-size: $title-size-lg;
                        color: $text-color;
                        font-weight: 600;
                        padding-right: $padding - 20;
                    }
                }
            }
        }
        .signDate {
            padding: $padding;
            border-radius: $radius-m;
            background-color: white;
            .date {
                text-align: center;
                font-size: $title-size + 6;
                margin-bottom: $margin;
                font-weight: 600;
            }
            .list {
                flex-wrap: wrap;
                display: flex;
                .day {
                    width: 14.28%;
                    text-align: center;
                    line-height: 80rpx;
                    color: $text-color;
                }
            }
            
            .signBtn {
                padding: $padding * 2 $padding * 2 0;
                .btn {
                    color: white;
                    background-color: $text-price;
                    text-align: center;
                    border-radius: $radius-m;
                    line-height: 90rpx;
                }
            }
        }
    }
</style>
