MoeNovaClient/components/checkIn-popUp-window/checkIn-popUp-window.vue

<template>
	<uv-popup ref="popup" mode="bottom" bgColor="none">
		<view class="content-box">
			<view class="bottomCompatibility">
				<view class="left-title">
					<image src="@/static/me/job/rw_wenzi_03.png"></image>
					<view class="checkInDays">
						<view>已签到 1 天 <view class="line"></view> 签到提醒</view>
					</view>
				</view>
				<view class="checkInContent">
					<view class="horizontal-box">
						<view class="item-box item-box1 item-box-one" :class="true ? 'active' : ''"></view>
						<view class="item-box item-box2 item-box-one" :class="true ? 'active' : ''"></view>
						<view class="item-box item-box3 item-box-two" :class="true ? 'active' : ''"></view>
					</view>
					<view class="horizontal-box">
						<view class="item-box item-box4 item-box-two" :class="true ? 'active' : ''"></view>
						<view class="item-box item-box5 item-box-one" :class="true ? 'active' : ''"></view>
						<view class="item-box item-box6 item-box-one" :class="true ? 'active' : ''"></view>
					</view>
					<view class="item-box item-box7" :class="true ? 'active' : ''"></view>
				</view>
				<view class="receiveBtn">
					立即签到
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
import uvPopup from '@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue'

export default {
	name: 'NicknamePopup',
	components: {
		uvPopup
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		subtitle: {
			type: String,
			default: ''
		}
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		}
	}
}
</script>

<style scoped lang="scss">
/* 添加样式 */
.bottomCompatibility {
	height: --window-bottom;
}

.content-box {
	min-height: 982rpx;
	background: url('@/static/me/job/rw_bg_tanchuang.png') top center / 100% auto no-repeat, linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #F1FFE5 50%, #F1FFE5 100%);
	box-sizing: border-box;
	padding: 30rpx;
	padding-top: 136rpx;

	.left-title {
		width: 360rpx;
		height: 142rpx;
		padding-bottom: 32rpx;

		image {
			width: 376rpx;
			height: 58rpx;
		}

		.checkInDays {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333333;

			>view {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #8F9C78;
				font-family: PingFang SC-Medium;

				.line {
					width: 2rpx;
					height: 30rpx;
					background: #D9D9D9;
					display: inline-block;
					margin: 0 12rpx;
				}
			}
		}
	}

	.checkInContent {
		width: 100%;
		height: 560rpx;

		.horizontal-box {
			width: 100%;
			height: 192rpx;
			display: flex;
			align-items: start;
			justify-content: space-between;

			.item-box {
				display: inline-block;
				background: #000;
			}

			.item-box-one {
				width: 226rpx;
				height: 172rpx;
			}

			.item-box-two {
				width: 212rpx;
				height: 188rpx;
			}

			.item-box1 {
				background: url('@/static/me/job/rw_bg_jiangli01_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli01_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}

			.item-box2 {
				background: url('@/static/me/job/rw_bg_jiangli02_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli02_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}

			.item-box3 {
				background: url('@/static/me/job/rw_bg_jiangli03_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli03_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}

			.item-box4 {
				background: url('@/static/me/job/rw_bg_jiangli04_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli04_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}

			.item-box5 {
				background: url('@/static/me/job/rw_bg_jiangli05_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli05_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}

			.item-box6 {
				background: url('@/static/me/job/rw_bg_jiangli06_moren.png') center / 100% no-repeat;

				&.active {
					background: url('@/static/me/job/rw_bg_jiangli06_dianji.png') center / 100% no-repeat;
					transform: scale(1.07);
				}
			}
		}

		.item-box7 {
			width: 100%;
			height: 172rpx;
			background: url('@/static/me/job/rw_bg_jiangli07_moren.png') center / 100% no-repeat;

			&.active {
				background: url('@/static/me/job/rw_bg_jiangli07_moren.png') center / 100% no-repeat;
				transform: scale(1.01);
			}
		}
	}

	.receiveBtn {
		background: #ACF934;
		border-radius: 126rpx;
		padding: 18rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 30rpx;
	}
}
</style>