page { background: #f4f5f9; padding: 30rpx; box-sizing: border-box; } .title { display: flex; margin-bottom: 30rpx; line-height: 54rpx; } .title-name { flex: 1; font-weight: 600; } .title-name text { color: #9d9d9d; font-weight: normal; } .title-add { background-color: #e2ecff; display: inline-block; font-size: 28rpx; line-height: 54rpx; padding: 0 15rpx; border-radius: 50rpx; } .title-add image { width: 34rpx; height: 34rpx; vertical-align: middle; margin-right: 6rpx; } .item { background-image: linear-gradient(to top left, #3b61ce, #3f8ad4); border-radius: 30rpx; margin-bottom: 30rpx; position: relative; padding: 30rpx; box-sizing: border-box; } .item:nth-child(even) { background-image: linear-gradient(to top left, #e7796e, #e35d65); } .item-logo { width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; background-color: #ffffff; padding: 20rpx; box-sizing: border-box; } .item-logo image { width: 100%; height: 100%; } .item-text { position: absolute; left: 0; top: 0; width: 100%; padding: 30rpx 30rpx 30rpx 160rpx; box-sizing: border-box; } .item-top { display: flex; color: #ffffff; font-size: 34rpx; line-height: 50rpx; } .item-title { flex: 1; margin-bottom: 5rpx; } .item-name { font-size: 32rpx; } .item-number { color: #e9f3ff; } .item-tool { display: flex; margin-top: 40rpx; } .item-left { flex: 1; } .item-btn { text-align: right; } .item-tool-btn { margin-left: 30rpx; } .item-tool-btn { background-color: rgba(255, 255, 255, .4); color: #ffffff; border-radius: 6rpx; height: 48rpx; display: inline-block; line-height: 48rpx; font-size: 26rpx; padding: 0 20rpx; } .item-tool-btn image { width: 26rpx; height: 26rpx; vertical-align: -2rpx; margin-right: 5rpx; }