|
|
|
@ -1,12 +1,262 @@ |
|
|
|
import React, { useEffect } from 'react'; |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Coming } from '$components' |
|
|
|
import '../style.less' |
|
|
|
|
|
|
|
const Mirroring = (props) => { |
|
|
|
|
|
|
|
const detailList = useRef([ |
|
|
|
{ |
|
|
|
title: '科技蓝', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
}, { |
|
|
|
title: '白', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
}, { |
|
|
|
title: '黑色（深灰）', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
}, { |
|
|
|
title: '灰色', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
}, |
|
|
|
]); |
|
|
|
const myCustomList = useRef([ |
|
|
|
{ |
|
|
|
title: '智慧小蓝视频融合中心实例实例实例实例', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue', |
|
|
|
lastEditTime:'2022-12-22 16:00:57', |
|
|
|
lastReleaseTime:'2022-12-22 19:20:57', |
|
|
|
typeId:'1511444S4545' |
|
|
|
}, { |
|
|
|
title: '智慧小蓝视频融合', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue', |
|
|
|
lastEditTime:'2022-12-22 16:00:57', |
|
|
|
lastReleaseTime:'2022-12-22 19:20:57', |
|
|
|
typeId:'1511444S4545' |
|
|
|
}, { |
|
|
|
title: '智慧小蓝视频融合小蓝视频融合', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue', |
|
|
|
lastEditTime:'2022-12-22 16:00:57', |
|
|
|
lastReleaseTime:'2022-12-22 19:20:57', |
|
|
|
typeId:'1511444S4545' |
|
|
|
}, { |
|
|
|
title: '智慧小蓝视频融合小蓝视频融合是的阿三打阿三打', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue', |
|
|
|
lastEditTime:'2022-12-22 16:00:57', |
|
|
|
lastReleaseTime:'2022-12-22 19:20:57', |
|
|
|
typeId:'1511444S4545' |
|
|
|
}, |
|
|
|
]); |
|
|
|
const [maskNum, setMaskNum] = useState(100); |
|
|
|
function mouseOver (index) { |
|
|
|
setMaskNum(index) |
|
|
|
} |
|
|
|
function mouseOut () { |
|
|
|
setMaskNum(100) |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ height: 171, background: '#FFFFFF' }}> |
|
|
|
<div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>创建步骤</div> |
|
|
|
<div style={{ marginTop: 2, display: 'flex', width: "100%", alignItems: 'center' }}> |
|
|
|
<div style={{ width: '4.513%', marginLeft: '5.549%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/stepone.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> |
|
|
|
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div> |
|
|
|
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>选择样式模板</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '6.281%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nextStep.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: '4.513%', marginLeft: '4.086%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/steptwo.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> |
|
|
|
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div> |
|
|
|
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>创建节点及设备树</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '6.281%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nextStep.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: '4.513%', marginLeft: '5.183%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/stepthree.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}> |
|
|
|
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div> |
|
|
|
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>发布成功后，获取镜像服务ID</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '6.281%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nextStep.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: '4.513%', marginLeft: '5.549%' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/stepfour.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: '0.854%', marginTop: 16 }}> |
|
|
|
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</div> |
|
|
|
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>通过服务ID调用镜像服务</div> |
|
|
|
<div style={{ marginTop: 3, fontSize: 12, color: '#1859C1', display: 'flex', alignItems: 'center' }}>API调用镜像服务方法 |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/question.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 11, height: 11, marginLeft: 3 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: '#FFFFFF', marginTop: 20 }}> |
|
|
|
<div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>应用详情</div> |
|
|
|
<div style={{ display: 'flex', padding: '34px 64px 18px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}> |
|
|
|
{detailList.current.map((item, index) => { |
|
|
|
return ( |
|
|
|
<Coming /> |
|
|
|
<div key={index}> |
|
|
|
<div style={{ position: 'relative', width: '306px', height: 142, boxShadow: '0px 2px 4px 0px rgba(231,231,231,0.5)', }} onMouseOver={() => mouseOver(index)}> |
|
|
|
<img |
|
|
|
src={item.img} |
|
|
|
alt="设置" |
|
|
|
style={{ width: '306px', height: 142 }} |
|
|
|
/> |
|
|
|
{maskNum == index ? (<div onMouseOut={() => mouseOut()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> |
|
|
|
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
|
|
|
使用该模版 |
|
|
|
</div> |
|
|
|
</div>) : ''} |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 11, display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ marginRight: 4 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/detail_icon.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 26, height: 26 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 16 }}> |
|
|
|
{item.title} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: '#FFFFFF', marginTop: 27 }}> |
|
|
|
<div style={{ padding: '18px 0px 0px 20px', display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ color: '#34383E', fontSize: 20, fontWeight: 600 }}>我的自定义镜像服务</div> |
|
|
|
<div style={{ height: 20, border: '1px solid #1859C1', padding: '0px 12px', fontSize: 14, color: '#1859C1', marginLeft: 4, borderRadius: 2, display: 'flex', alignItems: 'center' }}> |
|
|
|
共9份 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}> |
|
|
|
{myCustomList.current.map((item,index)=>{ |
|
|
|
return( |
|
|
|
|
|
|
|
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }}> |
|
|
|
<img |
|
|
|
src={item.img} |
|
|
|
alt="设置" |
|
|
|
style={{ width: 330, height: 153 }} |
|
|
|
/> |
|
|
|
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}> |
|
|
|
{item.title} |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/release.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 16, height: 16 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}> |
|
|
|
发布 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/copy.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 16, height: 16 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}> |
|
|
|
复制 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/del.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 16, height: 16 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}> |
|
|
|
删除 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}> |
|
|
|
最后编辑于：{item.lastEditTime} |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}> |
|
|
|
最后发布于：{item.lastReleaseTime} |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/idCopy.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 20, height: 20 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{marginLeft:4,background:'#1859C1',padding:'2px 8px',color:'#FFFFFF',fontSize:12,borderRadius:2}}> |
|
|
|
ID:{item.typeId} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
|
deartibers
3 years ago
