Commit 94d283ac authored by 陶晶晶's avatar 陶晶晶
parents ce0251ff 603f97a2
Pipeline #96043 waiting for manual action with stages
This diff was suppressed by a .gitattributes entry.
......@@ -42,6 +42,9 @@ const Demonstration = props => {
const progressRef2 = useRef(0);
const timer2 = useRef(null);
const timer3 = useRef(null);
const scollTimer = useRef(null);
const loadPageRef = useRef(null);
const loadPageImgRef = useRef(null);
const [progressValue2, setProgressValue2] = useState(0);
const [loading, setLoading] = useState(true);
const [projectConfig, setProjectConfig] = useState({}); // 项目案例是否可免密跳转
......@@ -96,10 +99,41 @@ const Demonstration = props => {
}
}, 100);
};
const onEndScoll = () => {
if (scollTimer.current) {
clearInterval(scollTimer.current);
scollTimer.current = null;
}
};
const startScoll = time => {
if (scollTimer.current) {
clearInterval(scollTimer.current);
scollTimer.current = null;
}
scollTimer.current = setInterval(() => {
const pageHeight = loadPageRef.current?.clientHeight;
const imgHeight = loadPageImgRef.current?.clientHeight;
if (pageHeight && imgHeight && imgHeight > pageHeight) {
const height = imgHeight - pageHeight;
const { scrollTop } = loadPageRef.current;
const offset = Math.ceil(height / time / 20);
if (scrollTop >= height) {
onEndScoll();
}
loadPageRef.current.scrollTop = scrollTop + offset;
}
}, 50);
};
const startLoading = name => {
console.log('🚀 ~ name:', name, pageData[name]);
if (pageData?.[name]) {
setTransitionImg(pageData[name]);
const time = pageData[`${name}time`];
if (time) {
setTimeout(() => {
startScoll(time);
}, 500);
}
} else {
setJumpLoading(true);
jumpProgressStart();
......@@ -363,6 +397,7 @@ const Demonstration = props => {
appService.getAccountPageList(params).then(res => {
const dataStr1 = res?.data?.jsonData || '';
const data1 = dataStr1 ? JSON.parse(dataStr1) : [];
console.log('🚀 ~ data1:', data1);
const obj = {};
const reqArr = [];
data1.forEach(d => {
......@@ -373,6 +408,7 @@ const Demonstration = props => {
imgLoad({
name: key,
url,
time: d['时间'] * 1 || 0,
}),
);
}
......@@ -382,6 +418,7 @@ const Demonstration = props => {
result.forEach(r => {
if (r) {
obj[r.name] = r.url;
obj[`${r.name}time`] = r.time;
}
});
setPageData(obj);
......@@ -459,6 +496,7 @@ const Demonstration = props => {
};
const onEndPage = () => {
setTransitionImg('');
onEndScoll();
};
const onendLoading = () => {
jumpProgressEnd();
......@@ -534,6 +572,7 @@ const Demonstration = props => {
window.removeEventListener('resize', onResize);
timer2.current && clearInterval(timer2.current);
timer2.current = null;
onEndScoll();
};
}, []);
useEffect(() => {
......@@ -558,10 +597,16 @@ const Demonstration = props => {
</div>
) : null} */}
{transitionImg ? (
<div className={styles.demonstrationLoadPage} key="jumpLoading">
<div className={styles.demonstrationLoadPageImg}>
<div
ref={loadPageRef}
className={classNames(styles.demonstrationLoadPage, 'wkt-scroll-light', 'demonstrationLoadPage')}
key="jumpLoading"
>
<div ref={loadPageImgRef} className={classNames(styles.demonstrationLoadPageImg, 'demonstrationLoadPageImg')}>
<img src={transitionImg} alt="" />
<div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage} />
<div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage}>
点击体验系统
</div>
</div>
</div>
) : null}
......
......@@ -91,6 +91,7 @@
left: 0;
z-index: 1090;
overflow-y: auto;
background-color: #fff;
}
.demonstrationLoadPageImg {
......@@ -113,10 +114,16 @@
z-index: 1095;
cursor: pointer;
transition: all 0.2s;
-webkit-animation: heartbeat 1.5s linear 0.5s infinite both;
animation: heartbeat 1.5s linear 0.5s infinite both;
line-height: 70px;
padding-left: 70px;
font-size: 22px;
letter-spacing: 5px;
}
.demonstrationLoadPageBtn:hover {
transform: scale(1.1);
animation-duration: 0;
}
}
......@@ -454,3 +461,104 @@
animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
&:global {
.wkt-scroll-light::-webkit-scrollbar,
.wkt-scroll-light *::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.wkt-scroll-light::-webkit-scrollbar-track,
.wkt-scroll-light *::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 8px rgba(193, 193, 193, 0.45);
box-shadow: inset 0 0 8px rgba(193, 193, 193, 0.45);
border-radius: 10px;
}
.wkt-scroll-light::-webkit-scrollbar-thumb,
.wkt-scroll-light *::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 0 8px rgba(177, 177, 177, 0.5);
box-shadow: inset 0 0 8px rgba(177, 177, 177, 0.5);
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment