.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: 50; } .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; } } } }