动效+选中

src/page-gym/custom-plugins/guide-page/steps/steps.module.less

@@ -124,9 +124,14 @@
 }
 
 .box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: fixed;
   box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
-  transition: all .25s;
-  transform: scale(1.3);
   border-radius: 8px;
+  animation-duration: 1.5s;
+  animation-name: changsize;
+  animation-iteration-count:infinite;
+  background: var(--van-primary-color);
 }

src/page-gym/custom-plugins/guide-page/steps/zero-step.tsx

@@ -55,20 +55,25 @@ export default defineComponent({
 		setStepContent(step: number) {
 			this.audio.src = mp3s[`../mp3/${IDSteps[step]}.mp3`].default;
 			this.audio.play();
-			console.log("🚀 ~ this.audio:", this.audio, this.audio.currentTime)
 			const originElement = document.getElementById("tips-step-" + IDSteps[step]);
+			const boxRef = document.getElementById('boxRef')
 			if (originElement?.style.display === 'none'){
 				this.$nextTick(() => {
 					this.next()
 				})
 				return
 			}
+			if (originElement && boxRef){
+				boxRef.innerHTML = ''
+				boxRef.appendChild(originElement.cloneNode(true))
+			}
 			const box: any = originElement?.getBoundingClientRect() || {};
+			const _fix = 6
 			this.box = {
-				left: box.x + "px",
-				top: box.y + "px",
-				width: box.width + "px",
-				height: box.height + "px",
+				left: box.x - _fix + "px",
+				top: box.y - _fix + "px",
+				width: box.width + _fix * 2 + "px",
+				height: box.height + _fix * 2 + "px",
 			};
 		},
 		next() {
@@ -83,7 +88,7 @@ export default defineComponent({
 	render() {
 		return (
 			<div>
-				<div style={this.box} class={styles.box}></div>
+				<div id="boxRef" style={this.box} class={styles.box}></div>
 				<div class={styles.messagebox}>
 					{/* @ts-ignore */}
 					<span>{setpText[IDSteps[this.step]].desc}</span>

src/page-gym/header-top/index.module.less

@@ -1,4 +1,4 @@
-.headerTop{
+.headerTop {
     display: flex;
     align-items: center;
     width: 100%;
@@ -6,67 +6,77 @@
     flex-shrink: 0;
     padding: 8px 10px;
 }
-.back{
+
+.back {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 11px 0 6px;
-    img{
+
+    img {
         display: block;
         width: 24px;
         height: 24px;
     }
 }
-.headRight{
+
+.headRight {
     display: flex;
     align-items: center;
     margin-left: auto;
-    .btn{
+
+}
+
+.btn {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 400;
+    padding: 0 6px;
+
+    .iconBtn {
+        display: block;
+        width: 25px;
+        height: 25px;
+    }
+
+    span {
+        white-space: nowrap;
+    }
+
+    .btnWrap {
         position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        font-size: 11px;
-        line-height: 16px;
-        font-weight: 400;
-        padding: 0 6px;
-        .iconBtn{
-            display: block;
-            width: 25px;
-            height: 25px;
-        }
-        span{
-            white-space: nowrap;
-        }
-        .btnWrap{
-            position: relative;
-            width: 25px;
-            height: 25px;
-        }
-        .progress{
-            position: absolute;
-            left: 50%;
-            top: 47%;
-            transform: translate(-50%, -50%);
-            width: 20px;
-            height: 20px;
-        }
+        width: 25px;
+        height: 25px;
+    }
+
+    .progress {
+        position: absolute;
+        left: 50%;
+        top: 47%;
+        transform: translate(-50%, -50%);
+        width: 20px;
+        height: 20px;
     }
-    .badge{
-        :global{
-            .van-badge{
-                border: none;
-                color: #005e58;
-                background-color: #d7fffc;
-                font-weight: 400;
-            }
+}
+
+.badge {
+    :global {
+        .van-badge {
+            border: none;
+            color: #005e58;
+            background-color: #d7fffc;
+            font-weight: 400;
         }
     }
 }
 
-.disabled{
+.disabled {
     pointer-events: none !important;
     opacity: .6;
 }

src/page-gym/helper-model/index.tsx

@@ -14,8 +14,8 @@ export default defineComponent({
 		});
 		return () => (
 			<>
-				<div class={styles.helperModel} onClick={() => (helperData.show = true)}>
-					<img id="tips-step-0" src={iconRight} />
+				<div id="tips-step-0" class={styles.helperModel} onClick={() => (helperData.show = true)}>
+					<img class={styles.iconRight} src={iconRight} />
 				</div>
 				<Popup
 					class={["popup-custom", styles.screen]}

src/style.css

@@ -36,18 +36,21 @@
 }
 
 /* vant 弹窗优化 */
-:root{
+:root {
   --van-duration-base: .25s;
 }
-.van-overlay{
+
+.van-overlay {
   transition: all 0.25s;
 }
-.popup-custom{
+
+.popup-custom {
   transition: all 0.25s;
   background: transparent;
-  overflow: initial;
+  overflow  : initial;
 }
-.popup-custom.van-scale{
+
+.popup-custom.van-scale {
   transform-origin: center -25%;
 }
 
@@ -64,13 +67,13 @@
 }
 
 .custom-close-btn .van-popup__close-icon {
-  top: 0;
-  right: -30px;
+  top             : 0;
+  right           : -30px;
   background-color: #fff;
-  border-radius: 50%;
-  padding: 4px;
-  font-size: 16px;
-  color: var(--van-primary-color);
+  border-radius   : 50%;
+  padding         : 4px;
+  font-size       : 16px;
+  color           : var(--van-primary-color);
 }
 
 /* 动画右滑进入 */
@@ -94,3 +97,24 @@
 .v-slide-up-leave-active {
   transition: all 0.3s;
 }
+
+/* 引导动画 */
+@keyframes guideKeyframes {
+  0% {
+    transform: scale(.9);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(.9);
+  }
+}
+
+.guideAnimate {
+  animation-duration       : 1.5s;
+  animation-name           : guideKeyframes;
+  animation-iteration-count: infinite;
+}