页面index

<template>
	<view class="page">
		<view class="hearder">
			<text>摇骰子</text>
		</view>
		<!-- 路线区域 -->
		<view class="path">

		</view>
		<!-- 骰子 -->
		<view class="play">	
		<view class="img1">
				<image :src=imgSrc></image>
		</view>
				<image @touchstart="playGame()" @touchend="move()" id="img" class="img2"  src="../../static/＜编组＞.png"></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc:"../../static/运行 拷贝 2.png",
				timer:0, //长按标识
				isMove: false

			}
		},	
		methods: {
			// 1s 2-4变成黄色
			// 2-4s 5-7变成黄色
			// 5-6s 7-9变成黄色
			// 7-9  9-12
			// 10-12 2-4 循环
			move(){
				this.isMove = true;
			},
			playGame() {
				let num = 0;
				let timer;
				this.isMove = false;
				if(!this.isMove){
					timer = setInterval(() => {
						if(!this.isMove)
						{ 
							num+=1;
							console.log(num)
							switch(num) {
								case 1:
								this.imgSrc = "../../static/运行 拷贝.png"
								break
								case 2:
								this.imgSrc = "../../static/运行.png"
								break
								case 5:
								this.imgSrc = "../../static/运行 拷贝 3.png"
								break
								case 7:
								this.imgSrc = "../../static/运行 拷贝 4.png"
								break
								case 9:
								num = 0
								break											
							}					
						}
						
						else
						{
							clearInterval(timer)
						}
					}, 1000)
				}
			}
			},
			}
</script>

<style>
	.page {
		padding: 0;
		margin: 0;
		display: block;
		width: 805rpx;
		height: 1335rpx;
		background-image: url(https://img0.baidu.com/it/u=3494859686,2348700425&fm=26&fmt=auto&gp=0.jpg);
	}
	.hearder {
		display: flex;
		height: 10%;
		justify-content: center;
		align-items: center;
		background-color: #7CB1FF;
	}

	.path {
		height: 50%;
	}
	.play {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		text-align: center;
	}
	.play .img1 {
		position: absolute;
		width: 450rpx;
		height:450rpx;
	}
	.play .img1 image {
		width: 100%;
		height: 100%;
	}
	.play .img2 {
		position: absolute;
		width: 200rpx;
		height:200rpx;
		z-index: 10;
		transition: all 0.6s;
	}
	.play .img2:hover {
		transform: scale(1.2);
	}

	
</style>

uni长按实现骰子数字切换