按钮增加点击动画

common/styles/global/components.scss

@@ -48,6 +48,19 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
+// active
+// 按钮缩小动画
+.ezy-btn-active{transition: 0.3s;}
+.ezy-btn-active:active{transform:scale(0.92);}
+
+// 列表item 元素向下
+.ezy-list-item-active{transition: 0.3s;}
+.ezy-list-item-active:active {transform: translateY(12rpx);opacity: 0.8;}
+
+// tab页 点击放大
+.ezy-tab-item-active{transition: 0.3s;}
+.ezy-tab-item-active:active {transform: scale(1.08);}
+
 /***** 富文本处理  *****/
 @mixin ezy-rich-text() {
 	div,p,span{margin: 0;padding: 0;}

common/styles/global/pages.scss

@@ -2116,10 +2116,6 @@
 				.dy-name{font-size: 34rpx;margin-bottom: 6rpx;}
 			}
 		}
-		.item-dy-box:active{
-			// transform: translateY(12rpx);
-			transform:scale(0.98);
-		}
 		/* .item-fixed{
 			width: 100%;padding: 24rpx 0;
 			position:sticky;position:-webkit-sticky;

components/ezyActive/ezyActive.vue

@@ -0,0 +1,29 @@
+<template>
+	<view @click="handleClick">
+		<slot />
+	</view>
+</template>
+<!--  父组件传值使用 :delay="500" -->
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+// 定义延迟时间的prop，默认值300ms
+const props = defineProps({
+	delay: {
+		type: Number,
+		default: 300
+	}
+})
+
+const emits = defineEmits(['aclick'])
+
+function handleClick() {
+	setTimeout(() => {
+		emits('aclick')
+	}, props.delay); // 使用props.delay作为延迟时间
+}
+</script>
+
+<style>
+
+</style>

pages/chanpinXuanze/banben.vue

@@ -7,7 +7,7 @@
 
 		<view class="xbb-list-box">
 			<template v-if="data.banbenList.length">
-				<view class="xbb-item-box" v-for="item in data.banbenList" :key="item.id"  @click="handleSelect(item)">
+				<ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"  @aclick="handleSelect(item)">
 					<!-- 封面 -->
 					<image class="item-img-box" :src="item.cover" mode=""></image>
 					<view class="item-content-box">
@@ -17,7 +17,7 @@
 						<view class="item-bb">{{item.name}}</view>
 					</view>
 					<view class="item-play-btn"></view>
-				</view>
+				</ezyActiveVue>
 			</template>
 			<template v-else>
 				<view class="shiti-frame-box">
@@ -38,6 +38,7 @@
 	import * as shuxueHttp from "@/api/chanpinShuxue.js"
   // import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";
 	import cacheManager from "@/utils/cacheManager.js";
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	const data = reactive({
 		dengjiId: null,
 		banbenList: []

pages/chanpinXuanze/components/shuxueList.vue

@@ -16,7 +16,7 @@
 			<view class="card-body-box">
 				<view class="body-title">请选择学习等级</view>
 				<view class="dj-item-row">
-					<view class="dj-item" v-for="cItem in item.levelList" @click="handleSelect(cItem)" :class="{active: item.active}">{{cItem.levelName}}</view>
+					<ezyActiveVue v-for="cItem in item.levelList" class="ezy-btn-active dj-item" @aclick="handleSelect(cItem)" :class="{active: item.active}">{{cItem.levelName}}</ezyActiveVue>
 				</view>
 			</view>
 		</view>
@@ -28,7 +28,8 @@
 </template>
 
 <script setup>
-	
+import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
+
 	const props = defineProps({
 		list: {
 			type: Array
@@ -37,7 +38,6 @@
 	
 	// 选择产品等级
 	function handleSelect(item) {	
-		console.log('item', item)
 		uni.navigateTo({
 			url: `/pages/chanpinXuanze/banben?dengjiId=${item.dengjiId}`
 		})

pages/chanpinXuanze/index.vue

@@ -6,10 +6,12 @@
 		</view>
 		<view class="ezy-page-body">
 			<!-- 头部区域 -->
+			
 			<view class="xuanke-tab-box">
-				<view v-for="item in data.list" :key="item.value" class="tab-item"
-					:class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin(item)">
-					{{item.name}}</view>
+				<!-- 动画按钮 -->
+				<ezyActiveVue class="ezy-btn-active tab-item" v-for="item in data.list" :key="item.value" 
+					:class="{active: item.value == data.chanpinActiveSelect}" @aclick="handleSelectChanpin(item)">
+					{{item.name}}</ezyActiveVue>
 			</view>
 			<!-- 英语列表 -->
 			<template v-if="data.chanpinActiveSelect == 1">
@@ -43,7 +45,8 @@
 	} from "@dcloudio/uni-app"
 	import * as shuxueHttp from "@/api/chanpinShuxue.js"
 	import CustomTabBar from "@/components/custom-tabbar/index.vue";
-
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
+	
 	let currentTabIndex = ref(0)
 	const data = reactive({
 		list: [{

pages/chanpinneirong/index.vue

@@ -23,7 +23,7 @@
 							<progress :percent="curProcess" class="xx-progress" stroke-width="20"
 								backgroundColor="#3c7dfd" activeColor="#ffd11c" />
 						</view>
-						<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')"></view>
+						<ezyActiveVue class="ezy-btn-active jxxx-btn" @aclick="handlePlay(banbenInfo,'jixu')"></ezyActiveVue>
 					</view>
 				</view>
 				</view>
@@ -31,7 +31,7 @@
 						<view class="xx-item-title">— 以下为当前等级课程目录 —</view>
 						<view v-for="(danyuanItem,index) in danyuanList" :key="danyuanItem.danyuanId">
 							<!-- 第一单元 v-if="index ==0"-->
-								<view class="item-dy-box" @click="handleClickDanyuan" :id="`unit-title-${danyuanItem.danyuanId}`">
+								<ezyActiveVue class="ezy-list-item-active item-dy-box" @aclick="handleClickDanyuan" :id="`unit-title-${danyuanItem.danyuanId}`">
 									<view class="dy-left-box">L{{banbenInfo.dengjiId}}</view>
 									<view class="dy-right-box">
 										<view class="right-content">
@@ -39,15 +39,15 @@
 											<view>{{danyuanItem.danyuanIntro}}</view>
 										</view>
 									</view>
-								</view>
+								</ezyActiveVue>
 							<!-- 其他单元 -->
 							<!-- <view v-if="index !=0" class="xx-item-title" :id="`unit-title-${danyuanItem.danyuanId}`">— {{danyuanItem.danyuanName}}
 								{{danyuanItem.danyuanIntro}} —
 							</view> -->
 						
 
-							<view class="xx-item-box" v-for="jieItem in danyuanItem.jieList" :key="jieItem.jieId"
-								@click="handlePlay(jieItem,'play')">
+							<ezyActiveVue class="ezy-list-item-active xx-item-box" v-for="jieItem in danyuanItem.jieList" :key="jieItem.jieId"
+								@aclick="handlePlay(jieItem,'play')">
 								<view class="xx-item-status"
 									:class="jieItem.wanchengFlag == 1 ? 'completed-status' : 'uncompleted-status'">
 								</view>
@@ -57,7 +57,7 @@
 									<view>{{ jieItem.jieIntro }}</view>
 								</view>
 								<view class="xx-item-btn"></view>
-							</view>
+							</ezyActiveVue>
 
 
 						</view>
@@ -78,6 +78,7 @@
 </template>
 
 <script>
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	import CustomTabBar from '@/components/custom-tabbar/index.vue';
 	import cacheManager from "@/utils/cacheManager.js";
 	import {
@@ -123,7 +124,8 @@
 		},
 		components: {
 			CustomTabBar,
-			danyuanInfoVue
+			danyuanInfoVue,
+			ezyActiveVue
 		},
 		onShow() {
 			this.currentTabIndex = 1

pages/login/index.vue

@@ -20,7 +20,7 @@
 						@click="agreeBtn('ystk')" class="agreement-text">《隐私政策》</view>
 				</view>
 			</view>
-			<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus">发送验证码</view>
+			<ezyActiveVue class="ezy-btn-active login-btn" @aclick="getYzmBtn" :class="indexData.telStatus">发送验证码</ezyActiveVue>
 			<view class="bottom-btn-box">
 				<view class="bottom-tip">选择第三方登录</view>
 				<view class="btn-box">
@@ -76,7 +76,7 @@
 	import {
 		error
 	} from "uview-plus";
-	
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	
 	let indexData = reactive({
 		phoneNumber: null,

pages/login/login.vue

@@ -11,7 +11,7 @@
 						maxlength="4" @input="clearYzmInput" />
 					<view class="close-btn" v-if="loginData.clearYzmIcon" @click="clearYzm"></view>
 				</view>
-				<view class="login-btn yzm-btn" @click="loginBtn" :class="loginData.yzmStatus">登录</view>
+				<ezyActiveVue class="ezy-btn-active login-btn yzm-btn" @aclick="loginBtn" :class="loginData.yzmStatus">登录</ezyActiveVue>
 				<text class="cxfs-btn" @click="startCountdown"
 					:class="{ 'cxfs-btn-disabled': loginData.isDisabled}">{{loginData.buttonText}}</text>
 				<text class="login-text" @click="goIndex">无法收到验证码</text>
@@ -39,6 +39,7 @@
 		toast,
 		getUserIdentity
 	} from "@/utils/common";
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	export default {
 		data() {
 			return {
@@ -65,7 +66,7 @@
 			}
 		},
 		components: {
-			captcha
+			captcha,ezyActiveVue
 		},
 		onLoad(options) {
 			this.loginInit(options);

pages/xinshuxue/lookShipin.vue

@@ -6,8 +6,8 @@
 		</view>
 		<view class="ezy-page-body">
 			<view class="ksp-tab-box">
-				<view class="tab-item" :class="{active: this.showA}" @click="handleSelectHexinti">核心基础题</view>
-				<view class="tab-item" :class="{active: this.showB}" @click="handleSelectNengliTishengti">能力提升题</view>
+				<ezyActiveVue class="ezy-tab-item-active tab-item" :class="{active: this.showA}" @click="handleSelectHexinti">核心基础题</ezyActiveVue>
+				<ezyActiveVue class="ezy-tab-item-active tab-item" :class="{active: this.showB}" @click="handleSelectNengliTishengti">能力提升题</ezyActiveVue>
 			</view>
 			<view class="ksp-scroll-view">
 				<!-- 核心基础题 -->
@@ -17,7 +17,7 @@
 				<view class="ksp-item-list" v-for="(item,index) in jieInfo.jiedianList1" :key="index" v-show="showA">
 					<view class="list-head">
 						<view class="list-title">{{item.name}}</view>
-						<view class="list-btn" @click="markersClick(item)"></view>
+						<ezyActiveVue class="ezy-btn-active list-btn" @click="markersClick(item)"></ezyActiveVue>
 					</view>
 					<view class="list-body">
 						<!-- <view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view> -->
@@ -32,7 +32,7 @@
 					<view class="ksp-item-list" v-for="(item,index) in jieInfo.jiedianList2" :key="index" v-show="showB">
 						<view class="list-head">
 							<view class="list-title">{{item.name}}</view>
-							<view class="list-btn" @click="markersClick2(item)"></view>
+							<ezyActiveVue class="ezy-btn-active list-btn" @click="markersClick2(item)"></ezyActiveVue>
 						</view>
 						<view class="list-body" >
 							<!-- <view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view> -->
@@ -75,7 +75,7 @@
 	import tishiDlVue from './components/tishiDl.vue';
 	import videoPlayVue from './components/videoPlay.vue';
 	import videoPlayVue2 from './components/videoPlay2.vue';
-
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	export default {
 		data() {
 			return {
@@ -116,7 +116,8 @@
 		components: {
 			tishiDlVue,
 			videoPlayVue,
-			videoPlayVue2
+			videoPlayVue2,
+			ezyActiveVue
 		},
 		onLoad(options) {
 			this.init(options)