给我设置一下uniapp的audio的样式，让他和酷狗的播放一样，有进度条的代码

好的，可以参考以下代码：

<template>
  <view>
    <audio :src="audioSrc" ref="audio" class="audio"></audio>
    <view class="audio-controls">
      <view class="audio-progress" :style="{ width: progressWidth }"></view>
      <view class="audio-play-btn" @tap="togglePlay">
        <image :src="isPlaying ? pauseIcon : playIcon" class="icon"></image>
      </view>
      <view class="audio-time">{{ currentTime }} / {{ duration }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'https://example.com/audio.mp3',
      isPlaying: false,
      progressWidth: '0%',
      duration: '00:00',
      currentTime: '00:00',
      playIcon: 'path/to/play.png',
      pauseIcon: 'path/to/pause.png'
    }
  },
  mounted() {
    this.$refs.audio.addEventListener('timeupdate', this.updateProgress)
    this.$refs.audio.addEventListener('loadedmetadata', this.setDuration)
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audio
      if (this.isPlaying) {
        audio.pause()
      } else {
        audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    setDuration() {
      const audio = this.$refs.audio
      const duration = Math.floor(audio.duration)
      this.duration = this.formatTime(duration)
    },
    updateProgress() {
      const audio = this.$refs.audio
      const currentTime = Math.floor(audio.currentTime)
      const duration = Math.floor(audio.duration)
      this.progressWidth = `${(currentTime / duration) * 100}%`
      this.currentTime = this.formatTime(currentTime)
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60)
      const seconds = time % 60
      return `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
    }
  },
  beforeDestroy() {
    this.$refs.audio.removeEventListener('timeupdate', this.updateProgress)
    this.$refs.audio.removeEventListener('loadedmetadata', this.setDuration)
  }
}
</script>

<style>
.audio {
  display: none;
}

.audio-controls {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #f2f2f2;
  padding: 0 10px;
  border-radius: 20px;
  overflow: hidden;
}

.audio-progress {
  height: 4px;
  background-color: #ff5000;
}

.audio-play-btn {
  width: 28px;
  height: 28px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.icon {
  width: 16px;
  height: 16px;
}

.audio-time {
  font-size: 12px;
}
</style>

你需要将 `audioSrc` 改为你自己的音频链接，`playIcon` 和 `pauseIcon` 为播放和暂停图标的路径。

这个组件会渲染一个 `audio` 标签和一个类似酷狗的进度条，以及播放/暂停按钮和时间显示。当你点击播放/暂停按钮时，它会切换音频的播放状态。进度条和时间显示会根据当前播放时间和音频时长来更新。