ProAdvanced/components/my-control-buttons/my-control-buttons.vue

<template>
	<!-- 按钮控制 -->
	<view class="flex justify-center" style="margin-top: 16px;">
		<view v-if="showLeftRight" class="my-control-button" style=" width: 90rpx;" @tap="_controlButtonTap(false)">
			<image class="data-png-26" src="/static/e-left.png"></image>
		</view>
		<view class="my-control-button " :class="bPlanFinish?'my-custom-breathing-lamp':''" style=" width:256rpx;" @tap="_controlPlayTap()">
			<image :class="bControlRun?'data-png-26':'my-control-play'" :src="bControlRun?'/static/e-pause.png':'/static/play.png' "></image>
		</view>
		<view v-if="showLeftRight" class="my-control-button" style=" width: 90rpx;" @tap="_controlButtonTap(true)">
			<image class="data-png-26" src="/static/e-right.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['bPlanFinish'
		]),
		props:{
			showLeftRight: {
				type: [Boolean, String],
				default: true
			},
		},
		data() {
			return {
				// 默认不运行
				bControlRun: false,
			}
		},
		methods:{
			_controlButtonTap(bRight){
				console.log("right==",bRight);
				this.$emit('onControlButtonTap',{bRight:bRight});
			},
			_controlPlayTap(){
				console.log("onControlPlayTap");
				this.$emit('onControlPlayTap',{bControlRun:this.bControlRun});
			},
			onPlay(bPlaying){
				if(bPlaying){
					this.bControlRun = bPlaying;
				}else{
					this.bControlRun = !this.bControlRun;
				}
			}
		}
	}
</script>

<style>
	
	.my-control-button {
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 45px;
		margin: 5px 12px;
		box-shadow: 1px 1px 3px #888888;
		display: flex;
		justify-content: center;
		height: 26px;
	}
	
	/* 图标大小 */
	.my-control-play {
		width: 16px;
		height: 16px;
		margin-top: 10rpx;
	}
	
	
	/* 呼吸灯 */
	.my-custom-breathing-lamp {
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: inherit;
		animation-iteration-count: infinite;
		animation-name: my-custom-run-lamp;
		animation-play-state: running;
	}
	
	@keyframes my-custom-run-lamp {
	
		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}
	
		50% {
			opacity: 0.6;
			transform: scale(0.9);
		}
	
	}
</style>