MoeNovaClient/pages/isLand/HuaTian.scss

.page {
	width:750rpx;height:100vh;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;left:0;top:0;
	display: flex;flex-direction: column;justify-content: center;align-items: center;
	z-index: 100;
}
.bgAlpha {
	width:750rpx;height:100vh;
	background-color: rgba(0, 0, 0, 0.01);
	position: fixed;left:0;top:0;
	
}
.task-board {
  padding: 30rpx;
  background: transparent;
  width: 700rpx;height:952rpx;
  background: url('../../static/island/huatian/bg_huatian.png');
  background-size: 700rpx 952rpx;
  position: relative;
  .task_day {
	  display: flex;flex-direction: column;justify-content: center;align-items: center;
	  width:120rpx;position: absolute;left:30rpx;top:30rpx;
	  image {
		  width:96rpx;height:76rpx;
	  }
  }
  
  .board-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    height:70rpx;
  }

	.bodyContent {
		width:640rpx;height:780rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10rpx;padding-top: 40rpx;
		
		.item {
			width:150rpx;height:120rpx;padding:10rpx;
			display: flex;flex-direction: row;justify-content: center;align-items: center;
			position: relative;
			.tian {
				width:126rpx;height:70rpx;
				position: absolute;z-index: 2;top:40rpx;
			}
			.suo {
				width:32rpx;height:32rpx;
				position: absolute;z-index: 99;
			}
			.flower {
				width:100rpx;height:100rpx;
				position: absolute;z-index: 99;top:0rpx;
			}
			.souhuo {
				width:66rpx;height:72rpx;
				position: absolute;z-index: 99;top:-20rpx;
			}
			.zacao {
				width:100rpx;height:100rpx;
				position: absolute;z-index: 99;top:0rpx;
			}
			.timer {
				width: 102rpx;
				height: 28rpx;
				background: rgba(0,0,0,0.3);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				position: absolute;z-index: 99;top:0rpx;
				display: flex;flex-direction: row;justify-content: center;align-items: center;
				.icon {
					width:20rpx;height:20rpx;margin-right: 4rpx;
				}
				text {
					font-size: 22rpx;
					color: #FFEFE1;
					line-height: 26rpx;padding-right: 4rpx;
				}
			}
		}
		.blank {
			width:70rpx;height:30rpx;
		}
		
	}
} 
.close {
	width:68rpx;height:68rpx;
	position: absolute;right:-10rpx;top:-10rpx;
}
.guild {
	position: absolute;bottom:20rpx;
	width:750rpx;
	.content {
		width: 710rpx;
		height: 192rpx;
		background: rgba(255,241,228,0.95);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 4rpx solid #E3985A;
		padding:30rpx;
		
		font-weight: 700;
		font-size: 28rpx;
		color: #A95F3C;
		line-height: 40rpx;
		text-align: justify;
		font-style: normal;
		text-transform: none;
		position:absolute;z-index: 210;bottom:0rpx;right:20rpx;
	}
	.title {
		width: 156rpx;
		height: 48rpx;
		background: #FDDEC1;
		border-radius: 236rpx 236rpx 236rpx 236rpx;
		border: 2rpx solid #E3985A;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
		font-weight: 700;
		font-size: 24rpx;
		color: #987453;
		line-height: 28rpx;
		position:absolute;z-index: 220;bottom:166rpx;right:60rpx;
	}
	.npc {
		width:174rpx;height:308rpx;
		position: absolute;bottom:120rpx;right:40rpx;z-index: 200;
		image {
			width:174rpx;height:308rpx;
		}
	}
}
.btn_task {
	width:156rpx;height:156rpx;
	background: url('../../static/island/huatian/btn_task.png');
	background-size: 156rpx 156rpx;
	font-weight: 700;
	font-size: 16rpx;
	color: #683830;
	text-align: center;padding-top: 114rpx;
	position: fixed;top:120rpx;left:20rpx;
}
.btn_list {
	position: absolute;bottom:-170rpx;left:0rpx;z-index: 999;
	width:700rpx;height:156rpx;
	display: flex;flex-direction: row;justify-content: space-between;align-items: center;
	.item {
		width:156rpx;height:156rpx;
		font-weight: 700;
		font-size: 16rpx;
		color: #683830;
		text-align: center;padding-top: 116rpx;
	}
	.item1 {
		background: url('../../static/island/huatian/btn_jiesuo.png');
		background-size: 156rpx 156rpx;
	}
	.item2 {
		background: url('../../static/island/huatian/btn_cucao.png');
		background-size: 156rpx 156rpx;
	}
	.item3 {
		background: url('../../static/island/huatian/btn_bozong.png');
		background-size: 156rpx 156rpx;
	}
	.item4 {
		background: url('../../static/island/huatian/btn_souhuo.png');
		background-size: 156rpx 156rpx;
	}
}
.select_zz {
	position: absolute;bottom:-10rpx;left:27rpx;z-index: 990;
	width: 656rpx;
	height: 150rpx;
	background: #FDDEC1;
	border: 2rpx solid #DEB691;border-radius: 20rpx;padding:20rpx;
	display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
	.item {
		width: 104rpx;
		height: 104rpx;margin-right: 20rpx;
		background: #FBD6A9;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #DEB691;
		display: flex;flex-direction: column;justify-content: center;align-items: center;
		.img {
			width:104rpx;height:70rpx;
			display: flex;flex-direction: column;justify-content: center;align-items: center;
			image {
				width:48rpx;height:48rpx;
			}
		}
		.foot {
			width: 100rpx;height: 34rpx;
			background: #FFE7CA;
			border-radius: 0rpx 0rpx 14rpx 14rpx;
			font-weight: 700;
			font-size: 16rpx;
			color: #987453;
			display: flex;flex-direction: column;justify-content: center;align-items: center;
		}
	}
	.jiantou {
		position: absolute;z-index: 999;
		width:32rpx;height:18rpx;bottom:-8rpx;right:114rpx;
		image {
			width:32rpx;height:18rpx;
		}
	}
}
	.confirm-dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		.dialog-content {
			width: 500rpx;
			background: #FDDEC1;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			border: 2rpx solid #d06262;

			.dialog-title {
				text-align: center;
				color: #683830;
				font-size: 34rpx;
				font-weight: bold;
				padding: 20rpx 0;
				border-bottom: 0rpx solid #d06262;
				position: relative;

			}

			.dialog-text {
				padding: 40rpx 30rpx;
				text-align: center;
				font-size: 30rpx;
				color: #987453;
				border-radius: 0 0 12rpx 12rpx;
				position: relative;

			}

			.dialog-buttons {
				display: flex;
				justify-content: space-around;
				padding: 30rpx;

				.btn-cancel,
				.btn-confirm {
					width: 180rpx;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					width:184rpx;height:80rpx;
					background: url('../../static/island/huatian/zx_btn_queren.png');
					background-size: 184rpx 80rpx;
				}

				.btn-cancel {
					color: white;
					position: relative;
					width:184rpx;height:80rpx;
					background: url('../../static/island/huatian/zx_btn_quxiao.png');
					background-size: 184rpx 80rpx;

				}

				.btn-confirm {
					color: white;
					position: relative;

				}
			}
		}
	}

.huatian-tips {
    position: absolute;
    top: 30rpx;
    right: 40rpx;
    width: 120rpx;
    z-index: 10;
    
    .tips-icon {
        width: 96rpx;
        height: 76rpx;
    }

}

.huatian-tips-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .tips-content {
        position: relative;
        width: 700rpx;
        height: 952rpx;
        background: url('../../static/island/UI/kuang.png');
        background-size: 100% 100%;
        padding: 32rpx 10rpx;
        
        .tips-title {
            text-align: center;
            font-size: 30rpx;
            font-weight: bold;
            color: #FFFFFF;
            width: 240rpx;
            height: 56rpx;
            background: url('../../static/island/UI/title_bg.png');
            background-size: 100% 100%;
            margin: 0 auto 0rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tips-close {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
            width: 68rpx;
            height: 68rpx;
            
            image {
                width: 100%;
                height: 100%;
            }
        }
        
        .tips-swiper {
            width: 95%;
            height: 780rpx;
            margin-top: 20rpx;
			margin-left : 10rpx;
        }
        
        .tips-items {
            height: 100%;
            padding: 0 20rpx;
            .tips-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 20rpx;
                padding: 20rpx;
                border-radius: 10rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .tips-img {
                    width: 328rpx;
                    height: 328rpx;
                    margin-right: 30rpx;
                    border-radius: 10rpx;
                }
                
                .tips-text {
                    flex: 1;
                    font-size: 24rpx;
                    color: #683830;
                    line-height: 1.6;
                    padding-top: 0;
                }
            }
        }
        
        .tips-dots {
            position: absolute;
            bottom: 40rpx;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .dot {
                width: 16rpx;
                height: 16rpx;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.5);
                margin: 0 10rpx;
                transition: all 0.3s;
                
                &.active {
                    width: 32rpx;
                    border-radius: 8rpx;
                    background: #FFFFFF;
                }
            }
        }
    }
}