.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: 20px;
  color: #ffffff;
}

.temOne view {
  padding: 10rpx 0;
  font-weight: bold;
}

.temOne .qrcode {
  width: 250rpx;
  height: 250rpx;
  left: 35%;
}

.temOne .avatarUrl {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  bottom: 50px;
  left: 44%;
  border: 3px solid #fff;
  border-radius: 15rpx;
}

/* 模板二 */
.temTwo {
  float: left;
  width: 41%;
  height: 380rpx;
  text-align: center;
  position: absolute;
  left: 28%;
  bottom: 30px;
  background-color: #ffffff;
  border-radius: 20rpx;
}

.temTwo .qrcode {
  width: 280rpx;
  height: 250rpx;
  margin: 15rpx 0 0 0;
}

.temTwo .avatarUrl {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  left: 36%;
  top: 45px;
  border: 3px solid #ffffff;
  border-radius: 10rpx;
}

.temTwo view {
  font-weight: bold;
  padding: 0 0 5rpx 0;
}


/* 模板三 */
.temThr {
  position: absolute;
  bottom: 5rpx;
  width: 100%;
  text-align: center;
}

.temThr .qrcode {
  width: 240rpx;
  height: 240rpx;
}

.temThr .avatarUrl {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  left: 44%;
  top: 40px;
  border: 3px solid #ffffff;
  border-radius: 10rpx;
}


.temThr view text {
  font-size: 30rpx;
  font-weight: bold;
  padding: 0 10rpx;
  color: #003875;
}

/* 模板四 */
.temFour {
  width: 40%;
  position: absolute;
  bottom: 10rpx;
  right: 30rpx;
}

.temFour .temFourImg {
  float: right;
  height: 250rpx;
  width: 80%;
  border: 3px solid #032eae;
}

.temFour .qrcode {
  width: 100%;
  height: 250rpx;
}

.temFour .avatarUrl {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  left: 43%;
  top: 44px;
  border: 3px solid #ffffff;
  border-radius: 10rpx;
}

.temFour .temFourInfo {
  float: left;
  width: 100%;
  text-align: center;
}

.temFour .temFourInfo text {
  font-size: 30rpx;
  padding: 0 0 0 50rpx;
  font-weight: bold;
  color: #032eae;
}

/* 模板五 */
.temFive {
  float: left;
  width: 100%;
  position: absolute;
  top: 30%;
  text-align: center;
}

.temFive .qrcode {
  width: 220rpx;
  height: 220rpx;
}

.temFive .avatarUrl {
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  left: 45%;
  top: 35px;
  border: 3px solid #ffffff;
  border-radius: 10rpx;
}

.temFive view {
  margin: -12rpx 0 0 0;
}

.temFive view text {
  font-weight: bold;
  font-size: 25rpx;
  padding: 0 10rpx;
}