31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
|
import { Image } from "antd"
|
||
|
|
import zd from '../../../../assets/img/u0.png'
|
||
|
|
import qys1 from '../../../../assets/img/qys1.png'
|
||
|
|
import qys2 from '../../../../assets/img/qys2.jpg'
|
||
|
|
import qys3 from '../../../../assets/img/qys3.jpg'
|
||
|
|
import qys4 from '../../../../assets/img/qys4.png'
|
||
|
|
import './index.less'
|
||
|
|
import { useState } from "react"
|
||
|
|
const list=[
|
||
|
|
{name:'水库地理位置图',key:1,img:qys1},
|
||
|
|
{name:'水库平面布置图',key:2,img:qys2},
|
||
|
|
{name:'主坝平面布置图',key:3,img:qys3},
|
||
|
|
{name:'副坝平面布置图',key:4,img:qys4},
|
||
|
|
]
|
||
|
|
const Page = () => {
|
||
|
|
const [url,setUrl] = useState(qys1)
|
||
|
|
const tabClick =(item)=>{
|
||
|
|
setUrl(item.img)
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div style={{ backgroundColor: '#fff', height: '100%' }}>
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
|
||
|
|
{list.map(item=><div className={url==item.img?"active":"tabCheck"} onClick={()=>tabClick(item)}>{item.name}</div>)}
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',overflow:'auto',height:'calc(100% - 100px)' }}>
|
||
|
|
<Image src={url} width='80%' preview={false} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default Page
|