.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; } .task-board { padding: 30rpx; background: transparent; width: 700rpx;height:952rpx; background: url('../../static/island/huatian/bg_huatian.png'); background-size: 700rpx 952rpx; position: relative; .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: 20rpx; .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; } } .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:0rpx; } .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:30rpx; } .npc { width:174rpx;height:308rpx; position: absolute;bottom:220rpx;right:0rpx;z-index: 200; } }