.content{ text-align: center; background: #fff; width: 650rpx; height: 415rpx; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; padding: 20rpx 0; font-size: 32rpx; } .content .status_pic{ width: 300rpx; height: 215rpx; overflow: hidden; } .content .status_pic .bgColor{ width: 300rpx; height: 300rpx; border-radius: 50%; position: relative; } .content .status_pic .bgColor .bgcolor_inset{ width: 180rpx; height: 180rpx; border-radius: 50%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } .content .status_pic image{ width: 180rpx; position: absolute; top: -55rpx; bottom: 0; right: 5rpx; left: 0; margin: auto; } .content .status_art{ margin: 20rpx 0; } .content .btn{ width: 300rpx; } .content .btn button{ border-radius: 50rpx; font-size: 32rpx; line-height: 2.1; } .content .btn view{ margin-top: 15rpx; } /* --- 主题 --- */ /* 红色 */ .redContent .btn button{background-image: linear-gradient(to right, #ee3a43, #ff8483);} .redContent .status_pic .bgColor{background: rgba(254, 104, 105, .1);} .redContent .status_pic .bgColor .bgcolor_inset{background: rgba(254, 104, 105, .2);} /* 蓝色 */ .blueContent .btn button{background-image: linear-gradient(to right, #4998d2, #cde6e9);} .blueContent .status_pic .bgColor{background: rgba(73, 152, 210, .1);} .blueContent .status_pic .bgColor .bgcolor_inset{background: rgba(73, 152, 210, .2);} /* 绿色 */ .greenContent .btn button{background-image: linear-gradient(to right, #658832, #96b26d);} .greenContent .status_pic .bgColor{background: rgba(101, 136, 50, .1);} .greenContent .status_pic .bgColor .bgcolor_inset{background: rgba(101, 136, 50, 0.2);}