examcloud-weixin-upload-audio/pages/index/component/PicturePanel/index.wxss

/* pages/main/component/PicturePanel/index.wxss */
.picture-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.picture-container .picture-bottom {
  width:100%;
  height:134px;
  background:rgba(249,249,251,1);
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}

.picture-bottom .btn-container {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.picture-bottom .btn-container .btn {
  width:64px;
  height:64px;
  background:rgba(255,255,255,1);
  border-radius: 50%;
  border:2px solid #F98183;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-label {
  height:20px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(44,58,81,1);
  line-height:20px;
  margin-top: 10px;
}

.grid-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.grid-loading {
  height: 120px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:rgba(122,124,145,1);
}

.grid-container .submit {
  width:215px;
  height:48px;
  background:linear-gradient(180deg,rgba(125,218,153,1) 0%,rgba(71,179,96,1) 100%);
  border-radius:24px;
  font-size:18px;
  font-family:PingFangSC-Semibold;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:48px;
  text-align: center;
  margin-top: 20px;
}

.disable {
  background:linear-gradient(180deg,rgba(125,218,153,0.4) 0%,rgba(71,179,96,0.4) 100%);
}

.grid-container .label {
  width: 100%;
  height:17px;
  font-size:12px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(122,124,145,1);
  line-height:17px;
  margin-bottom: 10px;
}

.grid-container .grid {
  display: grid;
  background:rgba(249,249,251,1);
  border-radius:10px;
  padding: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.grid .image-container {
  border-radius: 10px;
  position: relative;
}

.grid .image-container image {
  border-radius: 10px;
}

.grid .image-container .del {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}

.grid .image-container .err {
  position: absolute;
  width: 100%;
  height: 36px;
  text-align: center;
  bottom: 2px;
  z-index: 99;
  font-size: 12px;
  background: crimson;
  line-height: 18px;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.grid .image-container .success {
  position: absolute;
  width: 100%;
  height: 20px;
  text-align: center;
  bottom: 2px;
  z-index: 99;
  font-size: 12px;
  background: green;
  line-height: 20px;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.grid .add {
  background:rgba(249,249,251,1);
  border-radius:10px;
  border:1px dashed rgba(202,202,204,1);
  display: flex;
  align-items: center;
  justify-content: center;
}