51 lines
860 B
Plaintext
51 lines
860 B
Plaintext
<template>
|
|
<view class="volume">
|
|
<text class="text">音量</text>
|
|
<view class="process-bar">
|
|
<view
|
|
class="active-process"
|
|
:style="{flex: precent}"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Volume',
|
|
props: {
|
|
currentValue: {
|
|
type: Number | String
|
|
},
|
|
totalValue: {
|
|
type: Number | String
|
|
}
|
|
},
|
|
computed: {
|
|
precent () {
|
|
return this.currentValue / this.totalValue;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.volume
|
|
flex-direction row
|
|
align-items center
|
|
justify-content center
|
|
padding 10rpx
|
|
background rgba(20, 20, 20, 0.8)
|
|
border-radius 2rpx
|
|
.text
|
|
color #FFFFFF
|
|
.process-bar
|
|
margin-left 20rpx
|
|
width 260rpx
|
|
height: 8rpx
|
|
flex-direction row
|
|
background-color rgba(153, 153, 153, 0.4)
|
|
.active-process
|
|
background-color #FF920A
|
|
</style>
|