.container{ margin-bottom: 120rpx; } .card{ width: 100%; height: 0; position: relative; padding-bottom: 56%; background-color: #fff; } .photo{ position: absolute; left: 20rpx; top: 0; bottom: 0; } .photo image{ height: 100%; } .name{ position: absolute; top: 40rpx; left: 340rpx; font-size: 36rpx; font-weight: bold; } .desc{ position: absolute; left: 340rpx; top: 125rpx; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 30rpx; } .phone{ position: absolute; left: 340rpx; bottom: 60rpx; font-size: 28rpx; line-height: 30rpx; color: #a8a8a8; } .phone image{ width: 30rpx; height: 30rpx; vertical-align: middle; margin-top: -8rpx; } .position{ bottom: 20rpx; } .qr-code{ position: absolute; bottom: 30rpx; right: 24rpx; width: 60rpx; height: 60rpx; } .qr-code image{ width: 100%; height: 100%; } .edite-card{ margin-top: 20rpx; background-color: #fff; padding: 20rpx; } .title{ font-size: 32rpx; margin-bottom: 15rpx; } .card-row{ display: flex; justify-content: space-between; border-top: 1px solid #DDD; padding: 15rpx 0; } .row-name{ font-size: 32rpx; width: 30%; } .row-content{ width: 70%; text-align: right; } .row-content input{ font-size: 32rpx; width: 100%; } .add-photo{ width: 100rpx; height: 100rpx; font-size: 60rpx; border: 1px solid #a1a1a1; border-radius: 10rpx; font-weight: normal; text-align: center; line-height: 100rpx; display: inline-block; } .create-card{ position: fixed; left: 0; right: 0; bottom: 0; padding: 20rpx; background-color: #fff; } .create-btn{ line-height: 60rpx; text-align: center; font-size: 32rpx; background-color: #FF4949; color: #fff; border-radius: 40rpx; } .photo-img, .qrCode-img{ width: 200rpx; }