pet_uni/pages/UserDetail/components/index.scss

.app-wallpaper{
    .detail-container{
		position: relative;
		box-sizing: border-box;
      .detail-background-container{
		box-sizing: border-box;
        padding:0 10rpx;
		position: absolute;
		top:0rpx;
		left:0;
		width:100%;
		height:100%;
        .detail-background{
			position: relative;
			// top:10rpx;
			left:0;
			width:100%;
			height:100%;
			z-index: 1;
			background-color: #fff;
          border: 2rpx solid #262626;
          box-shadow: 1rpx 4rpx 6rpx 0rpx rgba(103,131,131,0.3);
          border-radius: 50rpx;
        }
      }
	  .detail-content-container{
		  position: relative;
		  z-index: 2;
		  padding:15rpx 0;
		  .detail-content{
			  border: 2rpx solid #262626;
			  border-radius: 50rpx;
			  background-color:#fff;
			  padding:0 40rpx;
			  .detail-content-item{
				  &:nth-child(1),&:nth-child(6){
					  padding:35rpx 0;
				  }
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  border-bottom:1rpx solid #BBBBBB;
				  padding:45rpx 0;
				  .detail-item-title{
					  font-size: 28rpx;
					  font-weight: 500;
					  color: #131313;
				  }
				  .detail-item-content{
					  position: relative;
					  box-sizing:border-box;
					  display: flex;
					  .u-icon{
						  margin-left:15rpx;
					  }
					  .detail-item-background{
						  box-sizing:border-box;
						  position: absolute;
						  top:0rpx;
						  left:0;
						  z-index: 1;
						  width:100%;
						  height:100%;
						  background: #FFFFFF;
						  border: 3rpx solid #262626;
						  border-radius: 10rpx;
					  }
					  .img{
						  border-radius: 10rpx;
						  overflow: hidden;
						  position: relative;
						  z-index: 2;
						  border: 3rpx solid #262626;
					  }
				  }
				  &:nth-child(1){
					  .detail-item-content{
						  .detail-item-background{
							  border-radius:50%;
						  }
						  .img{
							  border-radius:50%;
							  width:75rpx;
							  height:75rpx;
						  }
					  }
				  }
				  &:nth-child(6){
					  .detail-item-content{
						  .img{
							  width:140rpx;
							  height:85rpx;
						  }
					  }
				  }
			  }
		  }
		  .detail-logout-button{
			  margin:93rpx auto 77rpx;
			  box-sizing: border-box;
			  width:400rpx;
			  padding:25rpx 0;
			  text-align: center;
			  background: #EBF2F3;
			  border: 3rpx solid #262626;
			  border-radius: 45rpx;
			  line-height:1;
			  font-size: 30rpx;
			  font-weight: 400;
			  color: #202020;
		  }
	  }
    }
}

.avatarBtn{
	background-color:transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
}
.avatarBtn::after{
	border:none;
}