style: 延迟检测样式修改

src/pages/detail/CheckDelayPopup/index.module.less

@@ -9,8 +9,10 @@
     background-repeat: no-repeat;
     // perspective: 500px;
     .delayBg {
-        width: 100%;
+        position: relative;
+        width: 110%;
         height: 100%;
+        left: -5%;
     }
     .delayAdorn {
         position: absolute;

src/pages/detail/CheckDelayPopup/index.tsx

@@ -1,16 +1,6 @@
 import { PropType, defineComponent, onMounted, watch } from "vue";
 import { Vue3Lottie } from 'vue3-lottie'
 import styles from "./index.module.less";
-import icon_backBtn from "./image/icon_backBtn.png";
-import icon_content from "./image/icon_content.png";
-import icon_content1 from "./image/icon_content1.png";
-import icon_duihua1 from "./image/icon_duihua1.png";
-import icon_duihua2 from "./image/icon_duihua2.png";
-import icon_duihua3 from "./image/icon_duihua3.png";
-import icon_dianchi from "./image/icon_dianchi.png";
-import icon_dianchiActive from "./image/icon_dianzhiActive.png";
-import icon_startBtn from "./image/icon_startBtn.png";
-import { getDelayImage } from "./image";
 import delay_bg from "./image/bg.json"
 import left_adorn from "./image/left_ adorn.json"
 import right_adorn from "./image/right_ adorn.json"
@@ -53,40 +43,13 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 		return () => (
 			<div class={styles.delayContainer}>
 				<Vue3Lottie class={styles.delayBg} animationData={delay_bg}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={left_adorn}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={right_adorn}></Vue3Lottie>
-				{/* <div class={styles.animationContainer}>
-					{list.map((item) => {
-						return <img class={[styles.delayImage, styles[`icon${item}`]]} src={getDelayImage(item)} />;
-					})}
-				</div> */}
 				{/*返回按钮*/}
 				{/* <img class={styles.delayBackBtn} src={icon_backBtn} onClick={() => emit("close")} /> */}
-
-				{/* <div class={styles.delayContent}>
-					{props.delayData.checkStatus !== "error" ? (
-						<img class={styles.iconContent} src={icon_content} />
-					) : (
-						<img class={styles.iconContent} src={icon_content1} />
-					)}
-
-					<img style={{ display: props.delayData.checkStatus === "init" ? '' : 'none' }} class={[styles.iconDuihua, styles.iconDuihua1, styles.iconDuihua_delay]} src={icon_duihua1} />
-					<img style={{ display: props.delayData.checkStatus === "ing" ? '' : 'none' }} class={[styles.iconDuihua, styles.iconDuihua2]} src={icon_duihua2} />
-					<img style={{ display: props.delayData.checkStatus === "error" ? '' : 'none' }} class={[styles.iconDuihua, styles.iconDuihua3]} src={icon_duihua3} />
-					<img class={styles.iconDianchi} src={icon_dianchi} />
-					<img
-						style={{ clipPath: `inset(0 ${((2 - props.delayData.count) / 2) * 100}% 0 0 round 4px)` }}
-						class={styles.iconDianchiActive}
-						src={icon_dianchiActive}
-					/>
-					<img style={{ display: props.delayData.checkStatus === "ing" ? 'none' : '' }} class={[styles.iconDianchiActive, styles['heartbeat']]} src={icon_startBtn} onClick={() => emit("startCheckDelay")} />
-				</div>
-				<div class={styles.delayBtns}></div> */}
-
 				<Vue3Lottie class={styles.delayAdorn} animationData={step1} style={{ display: props.delayData.step <= 2 ? '' : 'none' }}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={step2} style={{ display: props.delayData.step === 3 ? '' : 'none' }}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={step3} style={{ display: props.delayData.step === 4 ? '' : 'none' }}></Vue3Lottie>