[完成] 签到页面UI

pages.json

@@ -51,6 +51,12 @@
 			"style": {
 				"navigationBarTitleText": "相亲交友"
 			}
+		},
+		{
+			"path": "pages/signIn/signIn",
+			"style": {
+				"navigationBarTitleText": "签到"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -6,7 +6,7 @@
 				<u-icon name="search" class="lf-font-30 lf-m-l-20"></u-icon>
 				<view class="lf-m-l-10 lf-font-24">搜索</view>
 			</view>
-			<view class="botton">签到</view>
+			<view class="botton" @click="$url('/pages/signIn/signIn')">签到</view>
 		</view>
 		<!-- 上墙部分 -->
 		<view class="up-the-wall">

pages/signIn/signIn.vue

@@ -0,0 +1,135 @@
+<template>
+	<view>
+		<view class="head">
+			<view class="left">
+				<view>
+					<text class="lf-color-222">已连续签到</text>
+					<text class="lf-color-primary lf-p-l-10">{{ day }} 天</text>
+				</view>
+				<view>连续签到7天以上多获赠5桃花</view>
+			</view>
+			<view class="right">签到</view>
+		</view>
+		
+		<view class="content">
+			<view class="hua-item" :class="{'active-bg': item < day}" v-for="item in monthDate" :key="item">
+				<text class="lf-iconfont icon-hua lf-font-38" style="color: #FD898E;"></text>
+				<text>+5桃花</text>
+			</view>
+		</view>
+		
+		<view class="explain">
+			<view class="lf-font-32 lf-color-222 lf-font-bold">签到说明</view>
+			<view class="lf-m-t-20 lf-font-24 lf-color-777">
+				<view>1、每日签到：会员每天可签到一次，签到后获赠桃花。</view>
+				<view class="lf-m-t-10">2、连续签到：连续签到7天以上，以后继续签到将每天额外获赠5桃花。</view>
+				<view class="lf-m-t-10">
+					<text>3、关于桃花：桃花用于发布动态、评论等，也可在</text>
+					<text class="eye-catching">福利中心</text>
+					<text>兑换红线。</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				day: new Date().getDate()
+			}
+		},
+		computed: {
+			// 获取当前月份天数
+			monthDate(){
+				var date = new Date();
+				var year = date.getFullYear();
+				var month = date.getMonth()+1;
+				var d = new Date(year, month, 0);
+				return d.getDate();
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.active-bg{
+		background-color: #ffdaf1 !important;
+	}
+	.head{
+		width: 750rpx;
+		height: max-content;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 40rpx 32rpx;
+		box-sizing: border-box;
+		.left view:nth-child(1){
+			font-size: 36rpx;
+			font-weight: bold;
+		}
+		.left view:nth-child(2){
+			font-size: 28rpx;
+			color: #555555;
+			margin-top: 20rpx;
+		}
+		.right{
+			width: 182rpx;
+			height: 82rpx;
+			background-color: #E21196;
+			border-radius: 10rpx;
+			color: #FFFFFF;
+			font-size: 36rpx;
+			line-height: 82rpx;
+			text-align: center;
+		}
+	}
+	
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 20rpx 32rpx 50rpx;
+		display: flex;
+		flex-wrap: wrap;
+		.hua-item{
+			width: 90rpx;
+			height: 90rpx;
+			background-color: #F5F5F5;
+			border-radius: 5rpx;
+			font-size: 18rpx;
+			color: #555555;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-around;
+			margin-right: 9rpx;
+			margin-bottom: 10rpx;
+			&:nth-child(7n){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	
+	.explain{
+		width: 686rpx;
+		height: max-content;
+		background-color: #F5F5F5;
+		border-radius: 10rpx;
+		margin: 0 auto;
+		box-sizing: border-box;
+		padding: 30rpx;
+		.eye-catching{
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #E21196;
+			padding: 0 4rpx;
+		}
+	}
+</style>

pages/userList/userList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="head">
-			<button class="sign-in-btn">签到</button>
+			<button class="sign-in-btn" @click="$url('/pages/signIn/signIn')">签到</button>
 			<view class="filter-item" @click="show_filter = true">
 				<text>女生</text>
 				<text class="lf-iconfont icon-iconfront-"></text>