.cardCom { width: 690rpx; height: 428rpx; position: relative; .card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; image { width: 100%; height: 100%; display: block; } } .card-container { width: 100%; height: 100%; position: relative; z-index: 2; .card-header { padding: 0 48rpx; box-sizing: border-box; width: 100%; height: 120rpx; @include flex(space-between, null, null); position: absolute; top: 52rpx; left: 0; .header-left { .header-title { margin-bottom: 16rpx; @include flex(flex-start, null, 32rpx); text { color: #ffffff; &:nth-of-type(1) { font-size: 36rpx; font-weight: 500; } &:nth-of-type(2) { font-size: 24rpx; } } } .company { font-size: 24rpx; color: #ffffff; } } .header-right { position: relative; width: 128rpx; height: 128rpx; border-radius: 50%; overflow: hidden; .edit { position: absolute; left: 0; bottom: 0; z-index: 4; width: 120rpx; height: 36rpx; text-align: center; line-height: 36rpx; background: rgba(0, 0, 0, 0.4); font-size: 20rpx; color: #ffffff; } .img-box { width: 128rpx; height: 128rpx; position: absolute; top: 0; left: 0; z-index: 3; border-radius: 50%; background-color: #ffffff; @include flex(center,null,null); image { width: 120rpx; height: 120rpx; border-radius: 50%; } } } } .card-content { width: 100%; position: absolute; left: 0; top: 228rpx; padding: 0 48rpx; box-sizing: border-box; .content-item { @include flex(flex-start, null, 10rpx); margin-top: 16rpx; image { width: 24rpx; height: 24rpx; display: block; } text { font-size: 24rpx; color: #ffffff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } } }