page {
  --line-space: 20rpx;
  --border-radius: 10rpx;
  --size: 220rpx;
}

.wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.grid-wrap {
  width: 100%;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, var(--size));
  row-gap: var(--line-space);
  column-gap: var(--line-space);
}

.item-wrap {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: var(--size);
  height: var(--size);
}

.item-wrap.add2 {
  background-color: #F4F4F4;
}

.item-wrap.add2::after {
  position: absolute;
  content: attr(data-label);
  width: 100%;
  height: 42rpx;
  left: 0;
  top: calc(50% + 12rpx);
  display: inline-block;
  color: #B4B4B4;
  font-size: 30rpx;
  z-index: 9;
  text-align: center;
}


.item-wrap.add-tx {
  background-color: #F0FFF5;
  border: dashed 1px #80CF99;
  border-radius: 20rpx;
}

.item-wrap.add-tx::after {
  content: '';
}

/* .tx .thumbnail.add2 {
  top: calc(50% - 25rpx);
} */

.thumbnail.add-tx {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: calc(50% - 20rpx);
  top: calc(50% - 20rpx);
}



.thumbnail {
  width: 100%;
  height: 100%;
}

.thumbnail.add2 {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: calc(50% - 20rpx);
  top: calc(50% - 45rpx);
}

.item-tip {
  position: absolute;
  z-index: 9;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #ffffff;
}

.item-name {
  position: absolute;
  left: 0;
  bottom: 20rpx;
  width: 100%;
  max-height: 74rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  color: #ffffff;
  font-size: 26rpx;
  line-height: 37rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}

.item-queue {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 6;
}

.item-queue::after {
  display: inline-block;
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 14rpx);
  text-align: center;
  content: '';
  font-size: 28rpx;
  color: #FFFFFF;
  z-index: 6;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.error {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 6;
}

.error::before {
  position: absolute;
  content: '';
  left: calc(50% - 26rpx);
  top: calc(50% - 46rpx);
  width: 100%;
  height: 100%;
  z-index: 7;
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-error-0604.png');
  background-repeat: no-repeat;
  background-size: 52rpx 52rpx;
}

.error::after {
  position: absolute;
  content: attr(data-label);
  font-size: 28rpx;
  line-height: 40rpx;
  color: #ffffff;
  text-align: center;
  width: 100%;
  left: 0;
  top: calc(50% + 20rpx);
  z-index: 7;
}

.delete {
  position: absolute;
  right: 0;
  top: 0;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
  border-radius: 50%;
}

.delete::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 10rpx;
  width: 10rpx;
  height: 10rpx;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.delete::after {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 26rpx;
  width: 10rpx;
  height: 10rpx;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  transform: rotate(45deg);
}

.btn-wrap {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.btn-fixed {
  width: 223rpx;
  height: 160rpx;
  position: relative;
  box-sizing: border-box;
  border-radius: 20rpx;
  overflow: hidden;
  background-size: 50rpx 50rpx;
  background-repeat: no-repeat;
  background-position: 86rpx 27rpx;
  background-color: #EDF7FF;
  /* border: solid 2px #ffffff; */
}

.btn-fixed::after {
  content: '';
  position: absolute;
  left: 0;
  top: 92rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #323232;
  width: 100%;
  text-align: center;
}

.tx>.btn-fixed {
  background-color: #F5FCF8;
}

.tx>.border {
  border-color: #DBEEE1;
}

.btn-fixed.album {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-album-0701.png');
}

.tx>.btn-fixed.album {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-album-tx-0701.png');
}

.btn-fixed.album::after {
  content: attr(data-label);
}

.btn-fixed.camera {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-camera-0701.png');
}

.tx>.btn-fixed.camera {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-camera-tx-0701.png');
}

.btn-fixed.camera::after {
  content: attr(data-label);
}

.btn-fixed.file {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-file-0701.png');
}

.tx>.btn-fixed.file {
  background-image: url('https://imgs.hh-medic.com/icon/wmp/icon-file-tx-0701.png');
}

.btn-fixed.file::after {
  content: attr(data-label);
}

.border {
  border: solid 1px #CADFEF;
}