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

/* pages/main/component/AudioPanel/index.wxss */
.audio-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 134px;
}

.audio-container .second {
  font-size:48px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(44,58,81,1);
  line-height:68px;
}

.audio-container .tips {
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(122,124,145,1);
  line-height:20px;
}

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

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

.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 .record-normal {
  width:20px;
  height:20px;
  background:linear-gradient(180deg,rgba(249,129,131,1) 0%,rgba(241,74,76,1) 100%);
  border-radius:10px;
}

.btn .record-ing {
  width:20px;
  height:20px;
  background:linear-gradient(180deg,rgba(249,129,131,1) 0%,rgba(241,74,76,1) 100%);
  border-radius:4px;
}

.audio-bottom .actions-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.actions-container .upload-container {
  width:64px;
  height:64px;
  background:linear-gradient(180deg,rgba(125,218,153,1) 0%,rgba(71,179,96,1) 100%);
  border-radius:32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: 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;
}

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

.player-container Player {
  margin-bottom: 20px;
}

.upload-btn {
  width:90px;
  height:32px;
  background:rgba(255,255,255,1);
  border-radius:10px;
  border:1px solid rgba(80,182,104,0.85);
  font-size:14px;
  font-family:PingFangSC-Medium;
  font-weight:500;
  color:rgba(71,179,96,1);
  line-height:32px;
  text-align: center;
}