.already { position: absolute; width: 100%; height: 100%; z-index: 999; background-color: #fff; } .already-top { width: 100%; height: 230rpx; margin-top: 104rpx; background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/xx/xz/bgt1.png); background-size: cover; } .already-bom { position: absolute; bottom: 0; width: 100%; height: 230rpx; background-image: url(https://wk921-1316969570.cos.ap-nanjing.myqcloud.com/bottom.png?q-sign-algorithm=sha1&q-ak=AKIDfvpcLTNuapJJHUt0Z2rbBMp4k2pff5pWzlB5o9--17jbvIhKwVSQfyquVN8nNxo8&q-sign-time=1686534496;1686538096&q-key-time=1686534496;1686538096&q-header-list=host&q-url-param-list=ci-process&q-signature=0b0d7bf20a2353114083673bdd497b5fd18d0a9f&x-cos-security-token=A0Hm0aVxi1d56hf0mChBZ7Edq8QG89uac5b83c45bef2b85a205521b986a97c6cQJmRBPRfeIpaoWvsyFmIxmdsaVt0UDGCkVi9Ydxb2ErOZqsBa_JJDPzxfBOZdg6Yj8M8FOqnsqp1Uy1UOt2o02Z6sW2LqFMMV4DxsAYO5xqjoTZ530uZhKuZ9jYMk_fc_VF9viosxMHtAR9nAFDUR0XfaNxiQABXw3xTSFDbF8K0BT9RI3X-Weotpg7BsqSnAlr5a5NuSk0Xi68873kz7A&ci-process=originImage); background-size: cover; } .already-img { margin: 0 auto; width: 660rpx; height: 522rpx; background-size: contain; background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/xx/xzt.png); } .already-text { width: 100%; margin-top: 80rpx; } .already-text0 { width: 100%; padding-left: 178rpx; box-sizing: border-box; color: rgba(108, 108, 108, 1); font-size: 18px; margin-bottom: 30rpx; } .already-text1 { width: 100%; display: flex; justify-content: center; color: rgba(108, 108, 108, 1); font-size: 18px; margin-bottom: 10rpx; } .already-btn { width: 100%; margin-top: 96rpx; display: flex; justify-content: center; } .already-btn .btn { width: 210rpx; height: 70rpx; box-sizing: border-box; border-radius: 20rpx; background: linear-gradient(222.54deg, rgba(248,99,42,1) 14.03%,rgba(249,135,89,1) 85.21%); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4); border: 3px solid rgba(255, 255, 255, 1); display: flex; justify-content: center; align-items: center; color: #fff; } .body { position: absolute; top: 0; width: 100%; height: 100%; padding-top: 114rpx; box-sizing: border-box; } .xinfo{ background-color: #FFFCF3; margin: 0 auto; width: 616rpx; height: 1300rpx; padding-top: 50rpx; border-radius: 20rpx; box-sizing: border-box; box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4); } .xinfo-title { margin-left: 60rpx; color: rgba(108, 108, 108, 1); font-size: 32rpx; text-align: left; font-weight: 700; } .xinfo-main { color: rgba(108, 108, 108, 1); font-size: 14px; margin: 32rpx 50rpx; } .xinfo-voice { width: 384rpx; height: 84rpx; display: flex; align-items: center; margin:0 0 48rpx 50rpx; padding-left: 48rpx; box-sizing: border-box; background-size: cover; background-image: url(https://wk921-1316969570.cos.ap-nanjing.myqcloud.com/ltqp.png); } .xinfo-icon { width: 60rpx; height: 60rpx; background-size: cover; margin-right: 20rpx; background-image: url(https://wk921-1316969570.cos.ap-nanjing.myqcloud.com/%E8%AF%AD%E9%9F%B3.png); } .xinfo-img { width: 100%; height: 448rpx; margin-bottom: 44rpx; display: flex; align-items: center; justify-content: center; } .xinfo-img image { height: 100%; width: 480rpx; } .xinfo-sign { color: rgba(108, 108, 108, 1); font-size: 32rpx; font-weight: 700; text-align: right; margin-right: 60rpx; } .xinfo-time { color: rgba(108, 108, 108, 1); font-size: 14px; text-align: right; margin-right: 60rpx; margin-top: 16rpx; } .body-btm-img { position: absolute; top: 790rpx; width: 100%; height: 900rpx; background-size: cover; background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/xx/xz/bgt2.png); } .btm-img-icon { position: absolute; top: 508rpx; left: 308rpx; width: 146rpx; height: 146rpx; background-image: url(https://wk921-1316969570.cos.ap-nanjing.myqcloud.com/%E5%8D%B0%E7%AB%A0.png); background-size: cover; } .btm-img-goback { position: absolute; top: 648rpx; left: 32rpx; width: 110rpx; height: 110rpx; border-radius: 50%; background: linear-gradient(222.54deg, rgba(248,99,42,1) 14.03%,rgba(249,135,89,1) 85.21%); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4); border: 3px solid rgba(255, 255, 255, 1); display: flex; justify-content: center; align-items: center; z-index: 1; } .btm-img-goback image { width: 60rpx; height: 60rpx; } .btm-img-more { position: absolute; top: 648rpx; right: 32rpx; width: 110rpx; height: 110rpx; border-radius: 50%; background: linear-gradient(222.54deg, rgba(248,99,42,1) 14.03%,rgba(249,135,89,1) 85.21%); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4); border: 3px solid rgba(255, 255, 255, 1); display: flex; justify-content: center; align-items: center; z-index: 1; } .btm-img-more image { width: 80rpx; height: 80rpx; z-index: 2; } .modify { position: absolute; top: 500rpx; right: 32rpx; color: #fff; } .del { position: absolute; top: 350rpx; right: 32rpx; color: #fff; } .delete { position: absolute; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 99; background-color: rgba(255, 255, 255, 0.9); } .delete-box { width: 586rpx; height: 434rpx; border-radius: 30rpx; padding-top: 104rpx; box-sizing: border-box; background-color: rgba(255, 255, 255, 1); color: rgba(16, 16, 16, 1); box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4); } .box-text { width: 100%; text-align: center; color: rgba(108, 108, 108, 1); font-size: 36rpx; margin-bottom: 10rpx; } .box-btn { width: 100%; margin-top: 100rpx; display: flex; justify-content: space-evenly; } .box-btn .btn { width: 210rpx; height: 70rpx; border-radius: 20rpx; box-sizing: border-box; background: linear-gradient(233.49deg, rgba(248,99,42,1) 10.48%,rgba(249,135,89,1) 89.2%); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4); border: 3px solid rgba(255, 255, 255, 1); color: #fff; display: flex; justify-content: center; align-items: center; }