| @ -0,0 +1,217 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <navbar title="每日签到" leftClick @leftClick="$utils.navigateBack" color="#fff" /> | |||||
| <view class="content"> | |||||
| <view class="flex info"> | |||||
| <view class="flex flex-column info-item"> | |||||
| <view class="info-value">5</view> | |||||
| <view class="info-label">连续签到/天</view> | |||||
| </view> | |||||
| <view class="flex flex-column info-item"> | |||||
| <view class="info-value">20</view> | |||||
| <view class="info-label">累计签到/天</view> | |||||
| </view> | |||||
| <view class="flex flex-column info-item"> | |||||
| <view class="info-value">50</view> | |||||
| <view class="info-label">获得积分</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="calendars"> | |||||
| <uv-calendars | |||||
| insert | |||||
| :showMonth="false" | |||||
| :selected="selected" | |||||
| /> | |||||
| <view class="flex tips"> | |||||
| <image class="tips-icon" src="../static/signIn/icon-tips.png" mode="widthFix"></image> | |||||
| <text>签到一次得 5 积分</text> | |||||
| </view> | |||||
| </view> | |||||
| <view style="text-align: right;"> | |||||
| <button class="flex btn btn-record"> | |||||
| <text>积分明细</text> | |||||
| <image class="btn-record-icon" src="../static/signIn/icon-arrow.png" mode="widthFix"></image> | |||||
| </button> | |||||
| </view> | |||||
| <view class="tools"> | |||||
| <button class="flex btn btn-sign" @click="onSignIn">我要签到</button> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| const SELECTED_DATE_ARR = ['2025-03-04', '2025-03-05', '2025-03-06', '2025-03-07'] | |||||
| return { | |||||
| // todo: fetch | |||||
| selected: SELECTED_DATE_ARR.map(date => { | |||||
| return { | |||||
| date, | |||||
| info: date[date.length - 1], | |||||
| infoColor: '#FFFFFF', | |||||
| badge: true, | |||||
| } | |||||
| }), | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onSignIn() { | |||||
| // todo | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| background-color: $uni-bg-color; | |||||
| position: relative; | |||||
| /deep/ .nav-bar__view { | |||||
| padding-bottom: 409rpx; | |||||
| background-image: linear-gradient(#84A73F, #D8FF8F); | |||||
| } | |||||
| /deep/ .uv-calendar { | |||||
| width: calc(100vw - 14rpx*2); | |||||
| } | |||||
| /deep/ .uv-calendar__header { | |||||
| border: none; | |||||
| } | |||||
| /deep/ .uv-calendar__header-btn { | |||||
| border-color: $uni-color-light; | |||||
| } | |||||
| /deep/ .uv-calendar__backtoday, | |||||
| /deep/ .uv-calendar-item--isDay-text.uv-calendar-item__weeks-lunar-text { | |||||
| display: none; | |||||
| } | |||||
| /deep/ .uv-calendar__weeks-day { | |||||
| border-color: #E6E6E6; | |||||
| } | |||||
| /deep/ .uv-calendar-item__weeks-box-item { | |||||
| height: 72rpx; | |||||
| } | |||||
| /deep/ .uv-calendar-item--isDay { | |||||
| color: #333 !important; | |||||
| background-color: transparent !important; | |||||
| } | |||||
| /deep/ .uv-calendar-item__weeks-box-circle { | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| width: 53rpx; | |||||
| height: 53rpx; | |||||
| transform: translate(-50%, -50%); | |||||
| border-radius: 50%; | |||||
| background-color: $uni-color-light; | |||||
| } | |||||
| /deep/ .uv-calendar-item__weeks-lunar-text { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| font-size: 28rpx; | |||||
| line-height: 1; | |||||
| } | |||||
| } | |||||
| .content { | |||||
| position: absolute; | |||||
| top: 243rpx; | |||||
| z-index: 999; | |||||
| } | |||||
| .info { | |||||
| width: 100vw; | |||||
| box-sizing: border-box; | |||||
| padding: 0 48rpx; | |||||
| font-size: 0; | |||||
| justify-content: space-between; | |||||
| &-item { | |||||
| color: $uni-text-color-inverse; | |||||
| } | |||||
| &-value { | |||||
| font-size: 46rpx; | |||||
| } | |||||
| &-label { | |||||
| font-size: 26rpx; | |||||
| margin-top: 19rpx; | |||||
| } | |||||
| } | |||||
| .calendars { | |||||
| background-color: $uni-fg-color; | |||||
| margin: 56rpx 14rpx 0 14rpx; | |||||
| border-radius: 45rpx; | |||||
| overflow: hidden; | |||||
| .tips { | |||||
| padding: 30rpx 30rpx 38rpx 30rpx; | |||||
| color: $uni-color-light; | |||||
| justify-content: flex-start; | |||||
| &-icon { | |||||
| width: 36rpx; | |||||
| height: auto; | |||||
| margin-right: 11rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .tools { | |||||
| margin-top: 146rpx; | |||||
| width: 100%; | |||||
| padding: 0 82rpx; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .btn { | |||||
| border: none; | |||||
| &-record { | |||||
| margin-top: 19rpx; | |||||
| margin-right: 28rpx; | |||||
| display: inline-flex; | |||||
| color: #999999; | |||||
| &-icon { | |||||
| width: 21rpx; | |||||
| height: auto; | |||||
| margin-left: 18rpx; | |||||
| } | |||||
| } | |||||
| &-sign { | |||||
| width: 100%; | |||||
| padding: 29rpx 0; | |||||
| color: $uni-text-color-inverse; | |||||
| font-size: 28rpx; | |||||
| line-height: 40rpx; | |||||
| border-radius: 44rpx; | |||||
| background-image: linear-gradient(to right, #84A73F, #D8FF8F); | |||||
| } | |||||
| } | |||||
| </style> | |||||