|
@@ -1,12 +1,14 @@
|
|
|
<template>
|
|
|
- <span style="display: inline-flex; align-items: center;">
|
|
|
- <span v-show="shouldShowAudio" @click="play">
|
|
|
+ <span class="a-container" style="display: inline-flex; align-items: center;">
|
|
|
+ <span v-show="shouldShowAudio" @click.stop="play">
|
|
|
<Button
|
|
|
v-if="!playing"
|
|
|
type="primary"
|
|
|
shape="circle"
|
|
|
icon="ios-play"
|
|
|
:disabled="playCount === 0"
|
|
|
+ size="small"
|
|
|
+ class="play"
|
|
|
></Button>
|
|
|
<Button
|
|
|
v-else
|
|
@@ -14,9 +16,11 @@
|
|
|
shape="circle"
|
|
|
icon="md-pause"
|
|
|
style="cursor: not-allowed;"
|
|
|
+ size="small"
|
|
|
+ class="pause"
|
|
|
></Button>
|
|
|
</span>
|
|
|
-
|
|
|
+ <span style="padding-left: 2px;"> </span>
|
|
|
<span v-show="shouldShowAudio">
|
|
|
{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
|
|
|
</span>
|
|
@@ -155,3 +159,19 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.a-container >>> .ivu-btn-small {
|
|
|
+ width: 18px !important;
|
|
|
+ height: 18px !important;
|
|
|
+ font-size: 11px !important;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+.a-container >>> .ivu-btn-small.play {
|
|
|
+ padding-left: 2px !important;
|
|
|
+}
|
|
|
+.a-container >>> .ivu-btn-small.pause {
|
|
|
+ padding-left: 0px !important;
|
|
|
+ padding-top: 1px !important;
|
|
|
+}
|
|
|
+</style>
|