183 lines
5.4 KiB
Vue
183 lines
5.4 KiB
Vue
<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>
|