englishread-front/uni_modules/yingbing-ReadPage/components/header/header.vue

<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>