You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.7 KiB
74 lines
1.7 KiB
<template>
|
|
<view class="yingbing-reader-header">
|
|
<view class="yingbing-reader-header-left">
|
|
<view class="yingbing-reader-header-back" :style="{'border-top-color': color, 'border-left-color': color}" v-if="backShow"
|
|
@touchstart.stop.prevent @touchmove.stop.prevent @touchend.stop.prevent="handleBack"
|
|
@mousedown.stop.prevent @mousemove.stop.prevent @mouseup.stop.prevent="handleBack"></view>
|
|
<text class="yingbing-reader-header-text" :style="{color: color}">{{title}}</text>
|
|
</view>
|
|
<text class="yingbing-reader-header-text" :style="{color: color}" v-if="progress">{{progress.toFixed(2)}}%</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Battery from '../battery/battery.vue'
|
|
export default {
|
|
inject: ['getColor', 'getBackShow'],
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
progress: {
|
|
type: [Number, String],
|
|
default: 0
|
|
}
|
|
},
|
|
computed: {
|
|
color () {
|
|
return this.getColor()
|
|
},
|
|
backShow () {
|
|
return this.getBackShow()
|
|
}
|
|
},
|
|
methods: {
|
|
handleBack (e) {
|
|
e.preventDefault && e.preventDefault()
|
|
e.stopPropagation && e.stopPropagation()
|
|
uni.$emit('yingbing-reader-back')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.yingbing-reader-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
height: 20px;
|
|
}
|
|
.yingbing-reader-header-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.yingbing-reader-header-text {
|
|
font-size: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
.yingbing-reader-header-back {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top-width: 1px;
|
|
border-left-width: 1px;
|
|
border-top-style: solid;
|
|
border-left-style: solid;
|
|
transform: rotateZ(-45deg);
|
|
margin-right: 5px;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|