@import (reference) '~reactui-mobile-mobile-styles/lib/base/index.less';

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.layerWrap {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 750 * @rpx;
  height: 400 * @rpx;
  flex-direction: column;
  align-items: flex-start;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 750 * @rpx;
  height: 400 * @rpx;
}

.group {
  position: absolute;
  top: 61 * @rpx;
  left: 0;
  display: flex;
  width: 750 * @rpx;
  height: 48 * @rpx;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 38 * @rpx;
  padding-left: 30 * @rpx;
}

.container {
  display: flex;
  height: 48 * @rpx;
  flex-direction: row;
  align-items: center;
}

.icon {
  width: 19 * @rpx;
  height: 33 * @rpx;
}

.return {
  margin-left: 7 * @rpx;
  color: #fff;
  font-size: 32 * @rpx;
  font-weight: 400;
  line-height: 45 * @rpx;
  white-space: nowrap;
}

.title {
  margin-left: 143 * @rpx;
  color: #fff;
  font-size: 32 * @rpx;
  font-weight: 500;
  line-height: 45 * @rpx;
  white-space: nowrap;
}

.rules {
  width: 64 * @rpx;
  height: 45 * @rpx;
  color: #fff;
  font-size: 32 * @rpx;
  font-weight: 500;
  line-height: 45 * @rpx;
  white-space: nowrap;
}

.xingzhuang {
  position: absolute;
  top: 153 * @rpx;
  left: 227 * @rpx;
  width: 15 * @rpx;
  height: 15 * @rpx;
}

.block_3 {
  position: absolute;
  top: 154 * @rpx;
  left: 0;
  display: flex;
  width: 749 * @rpx;
  height: 37 * @rpx;
  flex-direction: row;
  justify-content: center;
}

.iconduty {
  width: 39 * @rpx;
  height: 30 * @rpx;
  margin-top: 7 * @rpx;
}

.block_2 {
  display: flex;
  height: 37 * @rpx;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 6 * @rpx;
}

.outer {
  display: flex;
  height: 25 * @rpx;
  flex-direction: row;
  align-items: center;
}

.QQkongjian {
  width: 20 * @rpx;
  height: 21 * @rpx;
}

.meiyijia {
  width: 21 * @rpx;
  height: 21 * @rpx;
  margin-left: 3 * @rpx;
}

.info {
  width: 21 * @rpx;
  height: 20 * @rpx;
  margin-left: 2 * @rpx;
}

.wodeCRM {
  width: 21 * @rpx;
  height: 20 * @rpx;
  margin-left: 2 * @rpx;
}

.iconJianpan {
  width: 20 * @rpx;
  height: 21 * @rpx;
  margin-left: 2 * @rpx;
}

.guanbiWrap {
  position: relative;
  width: 15 * @rpx;
  height: 16 * @rpx;
  margin-top: 9 * @rpx;
  margin-left: 18 * @rpx;
}

.yishuxiuxi {
  position: absolute;
  top: 0;
  left: 0;
  width: 15 * @rpx;
  height: 16 * @rpx;
}

.guanbi {
  position: absolute;
  top: 0;
  left: 0;
  width: 15 * @rpx;
  height: 16 * @rpx;
}

.block {
  display: flex;
  flex-direction: row;
}

.img {
  width: 7 * @rpx;
  height: 7 * @rpx;
  margin-left: 1 * @rpx;
}

.dot {
  width: 5 * @rpx;
  height: 7 * @rpx;
  margin-left: 4 * @rpx;
}

.verticalLine {
  width: 1 * @rpx;
  height: 7 * @rpx;
  margin-left: 3 * @rpx;
}

.dot_2 {
  width: 5 * @rpx;
  height: 7 * @rpx;
  margin-left: 5 * @rpx;
}

.img_2 {
  width: 7 * @rpx;
  height: 7 * @rpx;
  margin-left: 4 * @rpx;
}

.image {
  width: 6 * @rpx;
  height: 7 * @rpx;
  margin-left: 3 * @rpx;
}

.dot_3 {
  width: 5 * @rpx;
  height: 8 * @rpx;
  margin-left: 9 * @rpx;
}

.dot_4 {
  width: 5 * @rpx;
  height: 7 * @rpx;
  margin-left: 4 * @rpx;
}

.dot_5 {
  width: 5 * @rpx;
  height: 8 * @rpx;
  margin-left: 4 * @rpx;
}

.image_2 {
  width: 6 * @rpx;
  height: 7 * @rpx;
  margin-left: 5 * @rpx;
}

.dot_6 {
  width: 5 * @rpx;
  height: 7 * @rpx;
  margin-left: 3 * @rpx;
}

.dot_7 {
  width: 5 * @rpx;
  height: 8 * @rpx;
  margin-left: 4 * @rpx;
}

.group_2 {
  position: relative;
  display: flex;
  width: 127 * @rpx;
  height: 35 * @rpx;
  flex-direction: row;
  align-items: center;
  margin-left: 18 * @rpx;
}

.yingyong {
  position: absolute;
  top: 5 * @rpx;
  right: 1 * @rpx;
  width: 23 * @rpx;
  height: 7 * @rpx;
}

.erchuangkou {
  position: absolute;
  top: 13 * @rpx;
  right: 0 * @rpx;
  width: 24 * @rpx;
  height: 17 * @rpx;
}

.qukuaiPeixun {
  position: absolute;
  top: 7 * @rpx;
  right: 25 * @rpx;
  width: 27 * @rpx;
  height: 24 * @rpx;
}

.shengjiCopy {
  position: absolute;
  top: 5 * @rpx;
  left: 48 * @rpx;
  width: 10 * @rpx;
  height: 25 * @rpx;
}

.logo {
  position: absolute;
  top: 0 * @rpx;
  left: 0 * @rpx;
  overflow: hidden;
  width: 127 * @rpx;
  height: 35 * @rpx;
}

.kehuguanli {
  position: relative;
  width: 29 * @rpx;
  height: 35 * @rpx;
}

.gen {
  position: absolute;
  top: 0 * @rpx;
  left: 12 * @rpx;
  width: 29 * @rpx;
  height: 35 * @rpx;
}

.mobileFill {
  position: relative;
  width: 14 * @rpx;
  height: 24 * @rpx;
  margin-left: 30 * @rpx;
}

.bd {
  position: relative;
  display: flex;
  width: 682 * @rpx;
  height: 560 * @rpx;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 225 * @rpx;
  background-color: #fff;
  border-radius: 10 * @rpx;
  box-shadow: 0 * @rpx 11 * @rpx 36 * @rpx rgba(167, 161, 190, 0.24);
}

.titleWrap {
  display: flex;
  width: 681 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 83 * @rpx;
}

.title_2 {
  overflow: hidden;
  max-width: 669 * @rpx;
  color: #666;
  font-size: 30 * @rpx;
  font-weight: 400;
  line-height: 42 * @rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block_4 {
  display: flex;
  width: 681 * @rpx;
  height: 90 * @rpx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 13 * @rpx;
}

.count {
  width: 168 * @rpx;
  height: 90 * @rpx;
  color: #333;
  font-family: Helvetica;
  font-size: 86 * @rpx;
  font-weight: normal;
  line-height: 90 * @rpx;
  white-space: nowrap;
}

.yuan {
  width: 30 * @rpx;
  height: 42 * @rpx;
  margin-top: 40 * @rpx;
  margin-left: 3 * @rpx;
  color: #333;
  font-size: 30 * @rpx;
  font-weight: 400;
  line-height: 42 * @rpx;
  white-space: nowrap;
}

.group_3 {
  position: relative;
  display: flex;
  width: 681 * @rpx;
  height: 25 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 55 * @rpx;
}

.empty {
  width: 462 * @rpx;
  height: 25 * @rpx;
  border-top-width: 24 * @rpx;
  border-top-style: solid;
  border-top-color: rgba(236, 238, 246, 1);
}

.iconTest {
  position: absolute;
  top: 275 * @rpx;
  left: 277 * @rpx;
  width: 38 * @rpx;
  height: 38 * @rpx;
}

.block_5 {
  position: relative;
  display: flex;
  width: 556 * @rpx;
  height: 33 * @rpx;
  flex-direction: row;
  margin-top: 14 * @rpx;
  margin-left: 125 * @rpx;
}

.stepToday {
  position: relative;
  color: #999;
  font-size: 24 * @rpx;
  font-weight: 600;
  line-height: 33 * @rpx;
  white-space: pre;
}

.num {
  position: absolute;
  top: 0 * @rpx;
  left: 178 * @rpx;
  color: #999;
  font-size: 24 * @rpx;
  font-weight: 600;
  line-height: 33 * @rpx;
  white-space: nowrap;
}

.freeCollectionOuter {
  display: flex;
  width: 681 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 18 * @rpx;
}

.freeCollectionWrap {
  display: flex;
  width: 612 * @rpx;
  height: 84 * @rpx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #2188ff;
  border-radius: 42 * @rpx;
}

.freeCollection {
  overflow: hidden;
  max-width: 600 * @rpx;
  color: #f8f8f8;
  font-size: 36 * @rpx;
  font-weight: 500;
  line-height: 50 * @rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titleWrap_2 {
  display: flex;
  width: 681 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 26 * @rpx;
}

.title_3 {
  overflow: hidden;
  max-width: 669 * @rpx;
  color: #999;
  font-size: 26 * @rpx;
  font-weight: 400;
  line-height: 37 * @rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft {
  display: flex;
  width: 678 * @rpx;
  height: 519 * @rpx;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 30 * @rpx;
  background-color: #fff;
  border-radius: 10 * @rpx;
  box-shadow: 0 * @rpx 4 * @rpx 20 * @rpx rgba(197, 197, 197, 0.5);
}

.title_4 {
  overflow: hidden;
  max-width: 642 * @rpx;
  height: 42 * @rpx;
  margin-top: 32 * @rpx;
  margin-left: 36 * @rpx;
  color: #333;
  font-size: 30 * @rpx;
  font-weight: 500;
  line-height: 42 * @rpx;
  text-overflow: ellipsis;
  white-space: pre;
}

.title_5 {
  overflow: hidden;
  max-width: 642 * @rpx;
  height: 37 * @rpx;
  margin-top: 6 * @rpx;
  margin-left: 36 * @rpx;
  color: #999;
  font-size: 26 * @rpx;
  font-weight: 400;
  line-height: 37 * @rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group_4 {
  display: flex;
  width: 677 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 25 * @rpx;
}

.block_6 {
  display: flex;
  width: 606 * @rpx;
  height: 80 * @rpx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 202, 49, 0.2);
  border-radius: 40 * @rpx;
}

.color {
  display: flex;
  width: 10 * @rpx;
  height: 10 * @rpx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgba(196, 148, 12, 0.7);
  border-radius: 10 * @rpx;
}

.desc {
  overflow: hidden;
  max-width: 510 * @rpx;
  height: 33 * @rpx;
  margin-left: 12 * @rpx;
  color: #c4940c;
  font-size: 24 * @rpx;
  font-weight: 500;
  line-height: 33 * @rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v {
  width: 12 * @rpx;
  height: 23 * @rpx;
  margin-left: 103 * @rpx;
}

.block_7 {
  display: flex;
  width: 678 * @rpx;
  height: 80 * @rpx;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 35 * @rpx;
  padding-left: 36 * @rpx;
  margin-top: 31 * @rpx;
}

.titleWrap_3 {
  display: flex;
  height: 80 * @rpx;
  flex-direction: row;
  align-items: center;
}

.pic {
  overflow: hidden;
  width: 80 * @rpx;
  height: 80 * @rpx;
  border-radius: 80 * @rpx;
}

.title_6 {
  margin-left: 18 * @rpx;
  color: #333;
  font-size: 28 * @rpx;
  font-weight: 400;
  line-height: 32 * @rpx;
  white-space: nowrap;
}

.shoutCollarWrap {
  display: flex;
  height: 58 * @rpx;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  padding-right: 27 * @rpx;
  padding-left: 26 * @rpx;
  border-width: 3 * @rpx;
  border-style: solid;
  border-color: rgba(242, 242, 243, 1);
  background-color: #fff;
  border-radius: 29 * @rpx;
}

.shoutCollar {
  color: #2188ff;
  font-size: 30 * @rpx;
  font-weight: 500;
  line-height: 42 * @rpx;
  white-space: nowrap;
}

.group_5 {
  display: flex;
  width: 677 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 32 * @rpx;
}

.div {
  width: 607 * @rpx;
  height: 2 * @rpx;
  border-top-width: 1 * @rpx;
  border-top-style: solid;
  border-top-color: rgba(216, 216, 216, 1);
}

.block_8 {
  display: flex;
  width: 678 * @rpx;
  height: 80 * @rpx;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 35 * @rpx;
  padding-left: 36 * @rpx;
  margin-top: 30 * @rpx;
}

.titleWrap_4 {
  display: flex;
  height: 80 * @rpx;
  flex-direction: row;
  align-items: center;
}

.img_3 {
  overflow: hidden;
  width: 80 * @rpx;
  height: 80 * @rpx;
  border-radius: 80 * @rpx;
}

.title_7 {
  margin-left: 18 * @rpx;
  color: #333;
  font-size: 28 * @rpx;
  font-weight: 400;
  line-height: 32 * @rpx;
  white-space: nowrap;
}

.shoutCollarWrap_2 {
  display: flex;
  height: 58 * @rpx;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  padding-right: 27 * @rpx;
  padding-left: 26 * @rpx;
  border-width: 3 * @rpx;
  border-style: solid;
  border-color: rgba(242, 242, 243, 1);
  background-color: #fff;
  border-radius: 29 * @rpx;
}

.shoutCollar_2 {
  color: #2188ff;
  font-size: 30 * @rpx;
  font-weight: 500;
  line-height: 42 * @rpx;
  white-space: nowrap;
}

.group_6 {
  display: flex;
  width: 677 * @rpx;
  flex-direction: row;
  justify-content: center;
  margin-top: 32 * @rpx;
}

.empty_2 {
  width: 607 * @rpx;
  height: 2 * @rpx;
  border-top-width: 1 * @rpx;
  border-top-style: solid;
  border-top-color: rgba(216, 216, 216, 1);
}