uni-app 开发套圈圈小游戏 vue js

效果如下：

video(19)

代码实现如下：

<template>
	<view class="taoquan">
		<view class="scroll-box">
			<view class="scroll-wrapper" :class="{'to-move':toMove}"
				:style="{'--offset': -((goodsWidth>130?129:goodsWidth)*2*(goods.length))+'rpx'}" id='boxWrapper'>
				<!-- 10 个  :style="{'--offset': -(130*20)+'rpx'}" 补前三个-->
				<!-- 9 个  :style="{'--offset': -(130*18)+'rpx'}" 补前三个-->
				<!-- 8 个  :style="{'--offset': -(130*16)+'rpx'}" 补前三个-->
<!-- 				<view class="scroll-wrapper" :class="{'to-move':toMove}"
					:style="{'--offset': -2580+'rpx'}" id='boxWrapper'> -->
				<view class="scroll-item" v-for="(item,index) in goods" :key="item.id">
					<image :src="item.img" alt="" />
					<view class="model">
						第{
   {
   index+1}}个
					</view>
				</view>
				<view class="scroll-item" v-for="(item,index) in goods.slice(0,3)" :key="item">
					<image :src="item.img" alt="" />
					<view class="model">
						第{
   {
   index+1}}个
					</view>
				</view>
			</view>
		</view>
		<view class="btn-satus">
			<!-- 圈圈 和 丢圈圈的人 -->
			<view class="quanquan-box">
				<view class="quanquan" :class="{'go-move':moveStyle}">
				</view>
				<view class="quanquan-people">
				</view>
			</view>
			<!-- 去订阅 -->
			<!--  #ifdef MP-WEIXIN  -->
			<view @click="toOrder" class="start-btn btn" v-if="status == 0">
				<view class="top">
					订阅开始提醒
				</view>
				<view class="bot">
					2023/4/12 0点开始
				</view>
			</view>
			<!-- #endif -->
			<!-- 去报名 -->
			<view @click="toSignUp" class="start-btn btn" v-if="status == 1">
				<view class="top to-sign-up">
					立即报名
				</view>
			</view>
			<!