.main { float: left; width: 100%; height: 100%; /* background-image: linear-gradient(#ff0000, #ffffff); */ background-color: #f9fafc; } .main .one { position: fixed; z-index: 9999; width: 95%; height: 80rpx; line-height: 80rpx; background-color: #409eff; padding: 0 20rpx; } .main .one .left { float: left; width: 30%; color: #ffffff; } .main .one .right { float: right; width: 70%; } .main .one .right { text-align: right; color: #fff; } .main .one .right .van-icon { top: 6rpx; color: #666; } .main .two { position: relative; top: 80rpx; width: 100%; height: 93vh; overflow: hidden; } .main .two .image { float: left; width: 100%; height: 100%; } .main .two .userInfo { float: left; width: 100%; height: 100%; position: absolute; } /* 模板一 */ .temOne { float: left; width: 100%; text-align: center; position: absolute; bottom: 5px; color: #ffffff; } .temOne .avatarUrl { width: 100rpx; height: 100rpx; border-radius: 90rpx; } .temOne view { padding: 5rpx 0; } .temOne .qrcode { width: 200rpx; height: 200rpx; } /* 模板二 */ .temTwo { float: left; width: 100%; text-align: center; position: absolute; bottom: 5px; color: #ffffff; } .temTwo .avatarUrl { width: 100rpx; height: 100rpx; border-radius: 90rpx; } .temTwo view { padding: 5rpx 0; } .temTwo .qrcode { width: 200rpx; height: 200rpx; } /* 模板三 */ .temThr { float: left; width: 100%; } .temThr .temThrOne { float: right; width: 60%; padding: 20rpx 0 0 0; } .temThr .temThrOne .avatarUrl { float: left; width: 100rpx; height: 100rpx; border-radius: 90rpx; } .temThr .temThrOne view { float: left; width: 68%; padding: 0 20rpx; } .temThr .temThrOne view text { float: left; width: 100%; text-align: left; font-size: 30rpx; padding: 10rpx 0 0 0; font-weight: bold; } .temThr .temThrTwo { float: left; width: 100%; text-align: center; position: absolute; bottom: 5px; } .temThr .temThrTwo .qrcode { width: 200rpx; height: 200rpx; } /* 模板四 */ .temFour { float: left; width: 100%; } .temFour .temThrOne { float: right; width: 60%; padding: 20rpx 0 0 0; } .temFour .temThrOne .avatarUrl { float: left; width: 100rpx; height: 100rpx; border-radius: 90rpx; } .temFour .temThrOne view { float: left; width: 68%; padding: 0 20rpx; } .temFour .temThrOne view text { float: left; width: 100%; text-align: left; font-size: 30rpx; padding: 10rpx 0 0 0; font-weight: bold; } .temFour .temThrTwo { float: left; width: 100%; text-align: right; position: absolute; bottom: 5px; right: 40rpx; } .temFour .temThrTwo .qrcode { width: 200rpx; height: 200rpx; } .temFive view:nth-child(1) { position: absolute; width: 11%; top: 25%; text-align: center; } .temFive view:nth-child(1) text { writing-mode: tb-rl; color: #ffffff; font-weight: bold; letter-spacing: 10rpx; font-weight: bold; } .temFive view:nth-child(2) { position: absolute; width: 68%; top: 32%; left: 16%; text-align: center; } .temFive view:nth-child(2) image { margin: 0 10rpx; } .temFive view:nth-child(2) .avatarUrl { width: 200rpx; height: 200rpx; border-radius: 90rpx; } .temFive view:nth-child(2) .qrcode { width: 200rpx; height: 200rpx; } .temFive view:nth-child(3) { position: absolute; right: 0; top: 25%; width: 11%; text-align: center; } /* .temFive { float: left; width: 100%; } .temFive view { float: left; } .temFive view:nth-child(1) { width: 11%; text-align: center; padding: 300rpx 0 0 0; } .temFive view:nth-child(1) text { writing-mode: tb-rl; color: #ffffff; font-weight: bold; letter-spacing: 10rpx; margin: 60rpx 0 0 0; font-weight: bold; } .temFive view:nth-child(2) { width: 78%; text-align: center; height: 250rpx; position: absolute; top: 31%; } .temFive view:nth-child(2) .avatarUrl { width: 100rpx; height: 100rpx; border-radius: 90rpx; } .temFive view:nth-child(2) .qrcode { width: 200rpx; height: 200rpx; } .temFive view:nth-child(3) { width: 11%; text-align: center; padding: 45% 0 0 0; } */ .temFive view:nth-child(3) text { writing-mode: tb-rl; text-orientation: upright; color: #fff; font-weight: bold; letter-spacing: 10rpx; }