/**index.wxss**/

.top {
  margin-top: 5vh;
  text-align: center;
  line-height: 15vh;
  color: #333;
}

.top-title {
  font-size: 6vw;
  letter-spacing: .5vw;
}

.top-time {
  font-size: 18vw;
}

.control {
  margin-top: 15vh;
  padding: 5vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.btn {
  background-color: #eee;
  color: #aaa;
  width: 18vw;
  height: 18vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
  font-family: Arial;
  transition: all .2s;
  opacity: .95;
}
.btn-hover {
  transform:scale(.9);
  opacity: 1;
}

.btn-rec {
  padding: 5vw;
  background-color:#ff1a2b;
  color: #eee;
}

.btn-play::before {
  font-family: 'iconfont';
  content: '\e74f';
  font-size: 8vw;
  text-indent: 1vw;
}

.btn-stop::before {
  font-family: 'iconfont';
  content: '\e6d8';
}

.btn-rec-normal::before {
  font-family: 'iconfont';
  content: '\e714';
  font-size: 14vw;
}

.btn-rec-pause::before {
  font-family: 'iconfont';
  content: '\e667';
  font-size: 12vw;
}

@font-face {
  font-family: 'iconfont';
  src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}