|
|
@@ -1,64 +1,77 @@
|
|
|
-import React, { useEffect, useState } from 'react';
|
|
|
+import React from 'react';
|
|
|
// import { Flex } from 'antd';
|
|
|
import '../asstes/css/ProcessFlow.css'
|
|
|
-import img1 from '../asstes/img/cocopi1.png'
|
|
|
+// import img1 from '../asstes/img/cocopi1.png'
|
|
|
import img2 from '../asstes/img/cocopi2.png'
|
|
|
import img3 from '../asstes/img/cocopi3.png'
|
|
|
import img4 from '../asstes/img/cocopi4.png'
|
|
|
|
|
|
|
|
|
function ProcessFlow() {
|
|
|
- const [scrollValue, setscrollValue] = useState(0)
|
|
|
- const handleScroll = e => {
|
|
|
- let val = parseInt(e.target.scrollTop/700)
|
|
|
- setscrollValue(val)
|
|
|
- }
|
|
|
- useEffect(() => {
|
|
|
- document.getElementById("anchor_right").addEventListener('scroll', handleScroll);
|
|
|
-
|
|
|
- return () => {
|
|
|
- document.getElementById("anchor_right").removeEventListener('scroll', handleScroll);
|
|
|
- };
|
|
|
- }, []);
|
|
|
-
|
|
|
- const ScrollVal = (val)=>{
|
|
|
- setscrollValue(val)
|
|
|
- document.getElementById("anchor_right").scrollTop = val*700
|
|
|
- }
|
|
|
return (
|
|
|
<div className='ProcessFlow'>
|
|
|
- <h1>產品特點</h1>
|
|
|
+ <h1>产品特点</h1>
|
|
|
<div className='anchor'>
|
|
|
<div className='anchor_flex'>
|
|
|
- <div className='anchor_left'>
|
|
|
- {/* <div onClick={()=>ScrollVal(0)} className={scrollValue === 0 && "anchor_left_div"}>
|
|
|
- <span>高性價比</span><br />
|
|
|
- <span>Economical Choice</span>
|
|
|
- </div> */}
|
|
|
+ {/* <div className='anchor_left'>
|
|
|
<div onClick={()=>ScrollVal(0)} className={scrollValue === 0 && "anchor_left_div"}>
|
|
|
- <span>高集成度</span><br />
|
|
|
- <span>Highly Integrated</span>
|
|
|
- </div>
|
|
|
- <div onClick={()=>ScrollVal(1)} className={scrollValue === 1 && "anchor_left_div"}>
|
|
|
- <span>易用性</span><br />
|
|
|
- <span>Usability</span>
|
|
|
- </div>
|
|
|
- <div onClick={()=>ScrollVal(2)} className={scrollValue === 2 && "anchor_left_div"}>
|
|
|
- <span>開放性</span><br />
|
|
|
- <span>Openness</span>
|
|
|
+ <span>高性价比</span><br />
|
|
|
+ <span>Economical Choice</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> */}
|
|
|
<div className='anchor_right' id='anchor_right'>
|
|
|
{/* <div id='aaa' style={{ width: "100%" }}>
|
|
|
<img src={img1} alt='' />
|
|
|
</div> */}
|
|
|
<div id='bbb' style={{ width: "100%" }}>
|
|
|
+ <div className='anchor_left'>
|
|
|
+ <div className="anchor_left_div">
|
|
|
+ <span>高集成度</span><br />
|
|
|
+ <span>Highly Integrated</span>
|
|
|
+ </div>
|
|
|
+ {/* <div onClick={() => ScrollVal(1)}>
|
|
|
+ <span>易用性</span><br />
|
|
|
+ <span>Usability</span>
|
|
|
+ </div>
|
|
|
+ <div onClick={() => ScrollVal(2)}>
|
|
|
+ <span>开放性</span><br />
|
|
|
+ <span>Openness</span>
|
|
|
+ </div> */}
|
|
|
+ </div>
|
|
|
<img src={img2} alt='' />
|
|
|
</div>
|
|
|
<div id='ccc' style={{ width: "100%" }}>
|
|
|
+ <div className='anchor_left'>
|
|
|
+ {/* <div onClick={() => ScrollVal(0)}>
|
|
|
+ <span>高集成度</span><br />
|
|
|
+ <span>Highly Integrated</span>
|
|
|
+ </div> */}
|
|
|
+ <div className="anchor_left_div">
|
|
|
+ <span>易用性</span><br />
|
|
|
+ <span>Usability</span>
|
|
|
+ </div>
|
|
|
+ {/* <div onClick={() => ScrollVal(2)}>
|
|
|
+ <span>开放性</span><br />
|
|
|
+ <span>Openness</span>
|
|
|
+ </div> */}
|
|
|
+ </div>
|
|
|
<img src={img3} alt='' />
|
|
|
</div>
|
|
|
<div id='ddd' style={{ width: "100%" }}>
|
|
|
+ <div className='anchor_left'>
|
|
|
+ {/* <div onClick={() => ScrollVal(0)}>
|
|
|
+ <span>高集成度</span><br />
|
|
|
+ <span>Highly Integrated</span>
|
|
|
+ </div>
|
|
|
+ <div onClick={() => ScrollVal(1)}>
|
|
|
+ <span>易用性</span><br />
|
|
|
+ <span>Usability</span>
|
|
|
+ </div> */}
|
|
|
+ <div className="anchor_left_div">
|
|
|
+ <span>開放性</span><br />
|
|
|
+ <span>Openness</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<img src={img4} alt='' />
|
|
|
</div>
|
|
|
|
