按钮增加动画效果

common/styles/global/pages.scss

@@ -642,7 +642,7 @@
 			}
 		}
 		.xbb-item-box:active{
-			background-color: #97dbfe;color: #fff;
+			background-color: #97dbfe;
 			.arrow-icon{background-color: #43bffd;}
 		}
 	}
@@ -945,7 +945,7 @@
 			}
 			.completed-status{background-image: url("@/static/images/common/xuexi/xw-status.png");}
 			.xx-text-box{flex: 1;}
-			.three-text-box{@include multi-line-ellipsis(3);}
+			.three-text-box{@include multi-line-ellipsis(3);line-height: 1.4;}
 			.xx-item-btn,.xx-item-lock-btn{width: 77rpx;height: 77rpx;@include ezy-no-repeat-cover;}
 			.xx-item-btn{background-image: url("@/static/images/common/xuexi/xx-ml-play-icon.png");}
 			.xx-item-lock-btn{background-image: url("@/static/images/common/xuexi/xx-ml-lock-icon.png");}

pages/chanpinXuanze/cp3/banben.vue

@@ -6,8 +6,8 @@
     </view>
 	<view class="ezy-page-body">
 		<view class="ezy-text-tab-box">
-		  <view class="text-item" @click="handleSelectShangce" :class="{active: data.isShangce}">上册</view>
-		  <view class="text-item" @click="handleSelectXiace" :class="{active: !data.isShangce}">下册</view>
+		  <ezyActiveVue class="text-item" @click="handleSelectShangce" :class="{active: data.isShangce}">上册</ezyActiveVue>
+		  <ezyActiveVue class="text-item" @click="handleSelectXiace" :class="{active: !data.isShangce}">下册</ezyActiveVue>
 		</view>
 		<template v-if="data.isShangce" >
 		  <template v-if="data.banbenList.length">

pages/chaojidanci/newEnglish/components/beiPage.vue

@@ -95,8 +95,8 @@
 				</view>
 				<view class="bei-confirm-btn-box">
 					<!-- active -->
-					<view class="big-btn" :class="{active: isDaxie}" @click="handleChangeDaxie">大写</view>
-					<view class="bei-confirm-btn" @click="checkIsRight">确定</view>
+					<ezyActiveVue class="ezy-btn-active big-btn" :class="{active: isDaxie}" @click="handleChangeDaxie">大写</ezyActiveVue>
+					<ezyActiveVue class="ezy-btn-active bei-confirm-btn" @click="checkIsRight">确定</ezyActiveVue>
 				</view>
 
 			</view>
@@ -119,6 +119,7 @@
 	import {
 		resultAudioPlayer
 	} from "./useAudioRightWrong"
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 
 	const resultAudioPlayerD = new resultAudioPlayer();
 

pages/chaojidanci/newEnglish/components/btnTxt.vue

@@ -1,13 +1,14 @@
 <template>
-	<text class="keyboard-button" 
+	<ezyActiveVue class="ezy-btn-active keyboard-button" 
 		:class="{active: btnStatus}" 
 		@touchstart="handleTouchStart"
 		@touchend="handleTouchEnd">
 		<slot></slot>
-	</text>
+	</ezyActiveVue>
 </template>
 
 <script setup>
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	import {
 		ref
 	} from "vue"

pages/chaojidanci/newEnglish/components/pinPage.vue

@@ -14,7 +14,7 @@
 			</view>
 			<view class="pin-body-box">
 				<!-- 清空按钮 -->
-				<view class="clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></view>
+				<ezyActiveVue class="ezy-btn-active clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></ezyActiveVue>
 				<!-- 提示 -->
 				<view class="pin-tip" v-else>提示：请点击页面下方字母，选择正确答案。</view>
 				<!-- 解释区-->
@@ -25,8 +25,8 @@
 			</view>
 			<!-- 选择区 -->
 			<view class="pin-words-box pin-words-change-box" :class="{'pin-small-words-box': wordLength>6}">
-				<view class="words-item words-change-item" v-for="(item,index) in data.randomList" :key="index"
-					:class="{disabled:  isSelect(item,index)}" @click="handleSelect(item,index)">{{item}}</view>
+				<ezyActiveVue class="ezy-btn-active words-item words-change-item" v-for="(item,index) in data.randomList" :key="index"
+					:class="{disabled:  isSelect(item,index)}" @click="handleSelect(item,index)">{{item}}</ezyActiveVue>
 			</view>
 		</view>
 	</view>
@@ -44,6 +44,7 @@
 	} from "@dcloudio/uni-app"
 	import * as httpApi from "@/api/chaojidanci.js"
   import {resultAudioPlayer} from "./useAudioRightWrong"
+  import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 
   const resultAudioPlayerD = new resultAudioPlayer();
 

pages/chaojidanci/newEnglish/components/selectPage.vue

@@ -19,18 +19,18 @@
 			</view>
 			<!-- 选择区 -->
 			<view class="select-change-box">
-				<view class="select-item"
+				<ezyActiveVue class="ezy-list-item-active select-item"
 					:class="{active: data.answer == 'A', 'select-error': data.answer =='A' && !data.result, 'select-right':data.answer =='A' && data.result}"
-					@click="handleSelect('A')"><text>{{data.opa}}</text></view>
-				<view class="select-item"
+					@click="handleSelect('A')"><text>{{data.opa}}</text></ezyActiveVue>
+				<ezyActiveVue class="ezy-list-item-active select-item"
 					:class="{active: data.answer == 'B', 'select-error':  data.answer =='B' && !data.result, 'select-right':data.answer =='B' && data.result}"
-					@click="handleSelect('B')"><text>{{data.opb}}</text></view>
-				<view class="select-item"
+					@click="handleSelect('B')"><text>{{data.opb}}</text></ezyActiveVue>
+				<ezyActiveVue class="ezy-list-item-active select-item"
 					:class="{active: data.answer == 'C', 'select-error':  data.answer =='C' && !data.result, 'select-right':data.answer =='C' && data.result}"
-					@click="handleSelect('C')"><text>{{data.opc}}</text></view>
-				<view class="select-item"
+					@click="handleSelect('C')"><text>{{data.opc}}</text></ezyActiveVue>
+				<ezyActiveVue class="ezy-list-item-active select-item"
 					:class="{active: data.answer == 'D', 'select-error':  data.answer =='D' && !data.result, 'select-right':data.answer =='D' && data.result}"
-					@click="handleSelect('D')"><text>{{data.opd}}</text></view>
+					@click="handleSelect('D')"><text>{{data.opd}}</text></ezyActiveVue>
 			</view>
 		</view>
 	</view>
@@ -49,6 +49,7 @@
 		reactive,
 	} from 'vue';
   import {resultAudioPlayer} from "./useAudioRightWrong"
+  import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 
   const resultAudioPlayerD = new resultAudioPlayer();
 

pages/chaojidanci/newEnglish/components/selectTypes.vue

@@ -1,18 +1,19 @@
 <template>
 	<view class="select-types-box">
-		<view class="types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</view>
+		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</ezyActiveVue>
 		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</view>
+		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</ezyActiveVue>
 		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</view>
+		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</ezyActiveVue>
 		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</view>
+		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</ezyActiveVue>
 		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</view>
+		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</ezyActiveVue>
 	</view>
 </template>
 
 <script setup>
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	defineProps({
 		activeSelect: {
 			type: [String,Number],

pages/chaojidanci/newEnglish/components/xuePage.vue

@@ -25,7 +25,7 @@
 						<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
 					</view>
 					<!-- 详解触发 -->
-					<view @click="goXiangjie" class="details-btn">详解 ></view>
+					<ezyActiveVue @click="goXiangjie" class="ezy-btn-active details-btn">详解 ></ezyActiveVue>
 					<!-- 音标拆分区 -->
 					<view v-show="data.isPindu" class="word-block-box yb-block-box">
 						<!-- pindu -->
@@ -40,10 +40,10 @@
 
 					<!-- 音标按钮 -->
 					<view class="xue-change-btn-box">
-						<view class="change-btn" :class="{active: data.isPindu}" @click="handlePindu"><text>自然拼读</text>
-						</view>
-						<view class="change-btn" :class="{active: !data.isPindu}" @click="handleYinjie"><text>音节拆分</text>
-						</view>
+						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: data.isPindu}" @click="handlePindu"><text>自然拼读</text>
+						</ezyActiveVue>
+						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: !data.isPindu}" @click="handleYinjie"><text>音节拆分</text>
+						</ezyActiveVue>
 					</view>
 					<!-- 词根+实用口语 -->
 					<view v-if="activeWord.cigenzhuji.length" class="details-content-box xue-details-content-box">
@@ -85,6 +85,7 @@
 	import audioThreeVue from './audioThree.vue';
 	import audioFourVue from './audioFour.vue';
 	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
+	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 	import {
 		reactive,
 		computed,

pages/chaojidanci/newEnglish/index.vue

@@ -14,10 +14,10 @@
     </view>
     <view class="word-view-bottom">
       <view class="bottom-btn-box">
-        <view class="word-view-btn" @click="prevWord" v-if="!isFirst&&isLearnRecord!=0">上一词</view>
+        <ezyActiveVue class="ezy-btn-active word-view-btn" @click="prevWord" v-if="!isFirst&&isLearnRecord!=0">上一词</ezyActiveVue>
 		<view v-else></view>
-        <view class="word-view-btn" @click="nextWord" v-if="!isLast&&isLearnRecord!=0">下一词</view>
-        <view class="word-view-btn" v-if="isLast&&isLearnRecord!=0" @click="handleComplete">完成</view>
+        <ezyActiveVue class="ezy-btn-active word-view-btn" @click="nextWord" v-if="!isLast&&isLearnRecord!=0">下一词</ezyActiveVue>
+        <ezyActiveVue class="ezy-btn-active word-view-btn" v-if="isLast&&isLearnRecord!=0" @click="handleComplete">完成</ezyActiveVue>
       </view>
     </view>
   </view>
@@ -41,6 +41,7 @@ import {
   audioPlayer
 } from "./components/useAudio.js"
 import cacheManager from "@/utils/cacheManager";
+import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 
 const {
   cacheAudio,

pages/chaojidanci/wordList/wordList.vue

@@ -70,8 +70,8 @@
             </view>
 
             <!-- 单词 -->
-            <view
-                class="word-list-item"
+            <ezyActiveVue
+                class="ezy-list-item-active word-list-item"
                 v-for="(item, index) in citem.wordList"
                 :key="index"
                 @click="toWord(item)"
@@ -106,7 +106,7 @@
               <view class="item-arrow">
                 <icon></icon>
               </view>
-            </view>
+            </ezyActiveVue>
           </view>
           <!-- 没有单词 -->
           <view class="no-word-box" v-else> 暂无单词</view>