.aDet { width: 100%; min-height: 100vh; background-color: #FBEBC8; } .aDet .headImg { width: 750rpx; height: 510rpx; } .aDet .body { display: flex; flex-direction: column; align-items: center; padding-bottom: 150rpx; } .aDet .body .template { position: relative; width: 100%; height: 780rpx; background: url(http://reader-wx.ai160.com/images/reader/card/template.png) no-repeat; background-size: 100% 100%; } .aDet .body .template .content { position: absolute; top: 106rpx; left: 0px; right: 0px; margin: auto; width: 650rpx; height: 520rpx; background-color: #D8D8D8; border-radius: 20rpx; } .aDet .body .template .btns { position: absolute; bottom: 52rpx; width: 100%; display: flex; align-items: center; justify-content: space-between; } .aDet .body .template .btns .changeBtn { margin-left: 60rpx; width: 226rpx; height: 82rpx; } .aDet .body .template .btns .recording { margin-right: 60rpx; width: 298rpx; height: 82rpx; } .aDet .footerBox { position: fixed; bottom: 0px; left: 0px; display: flex; align-items: center; justify-content: center; width: 100%; height: 130rpx; background-color: white; box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.5); font-size: 0rpx; } .aDet .footerBox .goGreeting { width: 313rpx; height: 88rpx; }