master_basic
parent
4a1745a29c
commit
f500a93d79
@ -0,0 +1,51 @@
|
||||
.entrance {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background: #E8F7FF;
|
||||
|
||||
.text_warp {
|
||||
width: 80vw;
|
||||
margin: 0 auto;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
padding-top: 20vh;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 45px;
|
||||
font-weight: 600;
|
||||
margin: 10vh 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
right: 3vw;
|
||||
font-size: 18px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.login_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imges {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
margin-right: 20px;
|
||||
background-color: saddlebrown;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { history, useLocation } from "umi";
|
||||
import styles from './index.less';
|
||||
|
||||
interface PageProps {}
|
||||
|
||||
const InitialSystem: FC<PageProps> = ({}) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
初装系统
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InitialSystem
|
||||
@ -0,0 +1,49 @@
|
||||
.exeInstall {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #E8F7FF;
|
||||
|
||||
.title_con {
|
||||
width: 100%;
|
||||
padding: 2.2% 0;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: rgba(15, 61, 123, 0.8);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 80%;
|
||||
height: 4.4vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EAEAEA;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 3vh;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
border-color: #41B0E2;
|
||||
color: #41B0E2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active_box {
|
||||
background-color: #41B0E2;
|
||||
color: #fff;
|
||||
border-color: #41B0E2;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: #41B0E2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { history, useLocation } from "umi";
|
||||
import styles from './index.less';
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
interface PageProps { }
|
||||
|
||||
const InstallExe: FC<PageProps> = ({ }) => {
|
||||
const [listData, setListData] = useState<any>([
|
||||
// 依赖程序
|
||||
{ name: 'GBase', select: false },
|
||||
{ name: 'GBase升级程序', select: false },
|
||||
{ name: 'FlashPlayer9', select: false },
|
||||
{ name: 'xxxx1', select: false },
|
||||
{ name: 'xxxx2', select: false },
|
||||
{ name: 'xxxx3', select: false },
|
||||
{ name: 'xxxx4', select: false },
|
||||
{ name: 'xxxx5', select: false },
|
||||
{ name: 'xxxx6', select: false },
|
||||
// 专用核心密码管理分系统
|
||||
{ name: '核心区安装程序', select: false },
|
||||
{ name: '执勤区安装程序', select: false },
|
||||
{ name: '密钥格式管理安装程序', select: false },
|
||||
{ name: '密码资源输入输出设备驱动', select: false },
|
||||
// 一体化密码机
|
||||
{ name: '一体化密码机管理软件', select: false },
|
||||
{ name: '一体化密码机驱动安装程序', select: false },
|
||||
// JJP903C密码钥匙
|
||||
{ name: '认证服务器Install', select: false },
|
||||
{ name: '用户登录组件', select: false },
|
||||
])
|
||||
|
||||
let sty = { width: '28.5%', padding: '7vh 3vh 3vh 3vh' };
|
||||
|
||||
const itemDom = (item: any, index: number) => {
|
||||
return (
|
||||
<div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
|
||||
onClick={() => {
|
||||
listData.forEach((data: any) => {
|
||||
if (data.name == item.name) {
|
||||
data.select = !data.select
|
||||
}
|
||||
})
|
||||
// listData.filter((k: any, i: any, self: any) => {
|
||||
// return i === self.findIndex((t: any) => (
|
||||
// t.id === k.id && t.name === k.name
|
||||
// ));
|
||||
// });
|
||||
setListData([...listData])
|
||||
}}>
|
||||
{item.name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.exeInstall}>
|
||||
<div className={styles.title_con}>一体化对称密码管理系统</div>
|
||||
<div className='flex_acB_jE'>
|
||||
{/* 左 */}
|
||||
<ContentWarp style={sty} text={'依赖程序'}>
|
||||
{ listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
|
||||
</ContentWarp>
|
||||
|
||||
{/* 中 */}
|
||||
<ContentWarp style={sty} text={'专用核心密码管理分系统'}>
|
||||
{
|
||||
listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
|
||||
</ContentWarp>
|
||||
|
||||
{/* 右 */}
|
||||
<div style={{ width: '28.5%' }}>
|
||||
<ContentWarp style={{ marginBottom: '8%', padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }} text={'一体化密码机'}>
|
||||
{
|
||||
listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
|
||||
</ContentWarp>
|
||||
|
||||
<ContentWarp text={'JJP903C密码钥匙'} style={{ padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }}>
|
||||
{
|
||||
listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
|
||||
</ContentWarp>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex_jE' style={{ marginTop: '3vh', paddingRight: '4.5vh' }}>
|
||||
<ButtonComp text={'退出'} onClick={() => history.push('/index')} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstallExe
|
||||
@ -0,0 +1,33 @@
|
||||
.index_con {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item_warp {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-color: saddlebrown;
|
||||
}
|
||||
@ -1,5 +1,34 @@
|
||||
export default function HomePage() {
|
||||
import styles from './index.less';
|
||||
import {history} from 'umi'
|
||||
|
||||
export default function IndexPage() {
|
||||
const list = [
|
||||
{ name: '01MMD049安装.exe', img: '', url: '/installExe' },
|
||||
{ name: '初装系统', img: '', url: '/initialSystem' },
|
||||
{ name: '核心管理系统', img: '', url: '/coreSystemEntrance' },
|
||||
{ name: '需要导出的文件', img: '', url: null },
|
||||
{ name: '生成导出的文件', img: '', url: null },
|
||||
]
|
||||
return (
|
||||
<div></div>
|
||||
<div className={styles.index_con}>
|
||||
{
|
||||
list.map((item, index) => {
|
||||
return (
|
||||
<div className={styles.item_warp} key={index} onClick={()=> {
|
||||
if (item.url) {
|
||||
history.push(item.url)
|
||||
}else if (item.name == '需要导出的文件') {
|
||||
|
||||
} else if (item.name == '生成导出的文件'){
|
||||
|
||||
}
|
||||
}}>
|
||||
<div className={styles.img}></div>
|
||||
<div>{item.name}</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue