haowanShow/miniprogram/pages/business-card/scan/scan.wxss

.scan {
  width: 100%;
  height: 100vh;
}
camera {
  width: 100%;
  height: 100vh;
}
.take-range {
  width: 530rpx;
  height: 800rpx;
  position: absolute;
  top: 186rpx;
  background: url(https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/domain/4dshow/img_scanbox%402x.png) no-repeat center center;
  background-size: cover;
  left: 50%;
  margin-left: -265rpx;
  z-index: 111;
}
.take-btn {
  width: 150rpx;
  height: 150rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  bottom: 150rpx;
  left: 50%;
  margin-left: -75rpx;
  z-index: 111;
}
.take-btn::after {
  content: '';
  width: 114rpx;
  height: 114rpx;
  background: #17D2D2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -57rpx 0 0 -57rpx;
  
}

.photo {
  position: absolute;
  bottom: 150rpx;
  right: 104rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
}

.photo image {
  width: 56rpx;
  margin-bottom: 12rpx;
}

.submit-btn, .retake-btn {
  width: 114rpx;
  height: 114rpx;
  background: #17D2D2;
  border-radius: 50%;
  position: absolute;
  bottom: 150rpx;
  left: 50%;
  margin-left: -57rpx;
  z-index: 111;
}
.retake-btn {
  left: 104rpx;
  margin-left: 0;
  background:rgba(255,255,255,0.3);
}
.submit-btn image, .retake-btn image {
  width: 54rpx;
  position: absolute;
  left: 30rpx;
  top: 38rpx;
  z-index: 1;
}
.retake-btn image {
  top: 32rpx;
}
.submit-btn .text, .retake-btn .text {
  position: absolute;
  bottom: -58rpx;
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  color: #fff;
}
.confirm-image {
  width: 100%;
  height: 100%;
}