Null369
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

看板

This commit is contained in:
qiukai 2025-03-06 17:24:11 +08:00
parent 669f9247be
commit 39cbe4d3c2
18 changed files with 841 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/forge/SoftwareFactory/components/FactoryHead.jsx Normal file
View File

@ -0,0 +1,25 @@
import React, { useEffect, useState } from "react";
import centerBg from "../../img/center_title_bg.png";
function FactoryHead(props) {
const {} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
return (
<div className="project-wrap">
<div className="project-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
situation
</div>
</div>
<div className="soft-title">软件工厂工作态势</div>
</div>
</div>
);
}
export default FactoryHead;

271
src/forge/SoftwareFactory/components/Home.jsx
View File

@ -1,271 +0,0 @@
import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import bj1 from "../img/bj1.png";
import newsLine from "../img/news_line.png";
import next from "../img/next.png";
import right from "../img/right.png";
import centerBg from "../img/center_title_bg.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { div } from "echarts-gl";
let focuseWorkList = [
{
name: "page1",
list: [
{ num: 1, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 2, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 3, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 4, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 5, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
{
name: "page2",
list: [
{ num: 6, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 7, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 8, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 9, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 10, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
{
name: "page3",
list: [
{ num: 11, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 12, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 13, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 14, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 15, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
];
const firstPanelList = [
{ title: "用户需求待评审数", num: 50, isNUm: true, unit: "个" },
{ title: "产品需求待评审数", num: 10, isNUm: true, unit: "个" },
{ title: "最近里程碑倒数天数", num: 5, isNUm: true, unit: "个" },
{ title: "需求纳入计划数", num: 8, isNUm: true, unit: "个" },
];
const secondPanelList = [
{ title: "待完成任务数", num: 50, isNUm: true, unit: "个" },
{ title: "待测试数", num: 10, isNUm: true, unit: "个" },
{ title: "Bug待处理数", num: 5, isNUm: true, unit: "个" },
{ title: "待完成迭代数", num: 8, isNUm: true, unit: "个" },
];
const thirdPanelList = [
{ title: "昨日完结任务数", num: 50, isNUm: true, unit: "个" },
{ title: "昨日关闭缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "昨日需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "昨日工作之星", num: 8, isNUm: true, unit: "个" },
];
const forthPanelList = [
{ title: "昨日新增任务数", num: 50, isNUm: true, unit: "个" },
{ title: "昨日新增缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "昨日新增需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "昨日新增缺陷数", num: 8, isNUm: true, unit: "个" },
];
const setting = {
dots: false,
infinite: true,
speed: 2000,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover: true,
autoplaySpeed: 5000,
pauseOnFocus: true,
autoplay: true,
arrows: true,
prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
// afterChange: (index) => setTag(index),
};
function Home(props) {
const {} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
// const [focuseWorkList, setFocuseWorkList] = useState([]);
// useEffect(() => {
// getWorkList();
// }, []);
// function getWorkList() {
// let workList = [];
// }
// function getDay(){
// let day = '2025年2月'
// return day
// }
return (
<div className="home-wrap">
<div className="home-left">
<div className="news-wrap">
<div class="left-title">要闻概览:</div>
<div class="left-subTitle">Overview of important news</div>
<div class="news-month">{currentMonth}</div>
<div class="news-content-title">
IDRL团队/IDRLnet《基于内嵌物理知经.》
</div>
<img class="news-line" src={newsLine} alt="" srcset="" />
<div class="news-pic-wrap">
<img class="news-pic" src={bj1} alt="" srcset="" />
</div>
<div className="news-content">
为解决飞行器设计优化过程中物理场快速仿真问题和运行监测阶段物理场精确反演问题，国防科技创新研究院无人系统技术研究中心智能设计与究中心智能设计与
</div>
<div className="point-work">
<div className="left-title">重点工作:</div>
<div className="left-subTitle">Focus on work</div>
<div className="point-work-wrap">
<Slider {...setting}>
{focuseWorkList && focuseWorkList.length > 0
? focuseWorkList.map((page, idx) => {
return (
<div className="point-work-page" key={idx}>
{page.list.map((item, index) => {
return (
<div className="point-work-item" key={item.num}>
<div className="point-work-item-num">
{item.num}
</div>
<div className="point-work-item-content">
{item.content}
</div>
</div>
);
})}
</div>
);
})
: ""}
</Slider>
</div>
</div>
</div>
</div>
<div className="home-right">
<div className="right-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
situation
</div>
</div>
<div className="soft-title">软件工厂工作态势</div>
</div>
<div className="right-content">
<div className="top-section">
<div className="first-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{firstPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
<div className="second-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{secondPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
<div className="bottom-section">
<div className="third-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{thirdPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
<div className="forth-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{forthPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
<div className="center-panel"></div>
</div>
</div>
</div>
);
}
export default Home;

46
src/forge/SoftwareFactory/components/Home/centerPanel.jsx Normal file
View File

@ -0,0 +1,46 @@
import React, { useEffect, useState } from "react";
import duoyun from "../../img/duoyun.png";
import fengsu from "../../img/fengsu.png";
import shidu from "../../img/shidu.png";
import ziwaixian from "../../img/ziwaixian.png";
function CenterPanel(props) {
return (
<div className="center-panel">
<div className="first-section">
<div className="content">
<img src={duoyun} alt="" srcset="" />
<div>多云</div>
</div>
</div>
<div className="second-section">
<div className="content">
<img src={shidu} alt="" srcset="" />
<div>52℃</div>
</div>
</div>
<div className="third-section">
<div className="content">
<img src={fengsu} alt="" srcset="" />
<div>西南风</div>
</div>
</div>
<div className="forth-section">
<div className="content">
<img src={ziwaixian} alt="" srcset="" />
<div>280nm</div>
</div>
</div>
<div className="center-section">
<div>星期四</div>
<div>
<span className="month">03/</span>
<span className="date">06</span>
</div>
<div>二月初七</div>
</div>
</div>
);
}
export default CenterPanel;

41
src/forge/SoftwareFactory/components/Home/firstPanel.jsx Normal file
View File

@ -0,0 +1,41 @@
import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
const firstPanelList = [
{ title: "用户需求待评审数", num: 50, isNUm: true, unit: "个" },
{ title: "产品需求待评审数", num: 10, isNUm: true, unit: "个" },
{ title: "最近里程碑倒数天数", num: 5, isNUm: true, unit: "个" },
{ title: "需求纳入计划数", num: 8, isNUm: true, unit: "个" },
];
function FirstPanel (props) {
return (
<div className="first-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{firstPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
<div className="panel-title">今日产品状态</div>
</div>
)
}
export default FirstPanel

41
src/forge/SoftwareFactory/components/Home/forthPanel.jsx Normal file
View File

@ -0,0 +1,41 @@
import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
const forthPanelList = [
{ title: "昨日新增任务数", num: 50, isNUm: true, unit: "个" },
{ title: "昨日新增缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "昨日新增需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "昨日新增缺陷数", num: 8, isNUm: true, unit: "个" },
];
function ForthPanel(props) {
return (
<div className="forth-panel">
<div className="panel-title">昨日新增工作</div>
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{forthPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
);
}
export default ForthPanel;

155
src/forge/SoftwareFactory/components/Home/index.jsx Normal file
View File

@ -0,0 +1,155 @@
import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import bj1 from "../../img/bj1.png";
import newsLine from "../../img/news_line.png";
import next from "../../img/next.png";
import right from "../../img/right.png";
import centerBg from "../../img/center_title_bg.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import FirstPanel from "./firstPanel";
import SecondPanel from "./secondPanel";
import ThirdPanel from "./thirdPanel";
import ForthPanel from "./forthPanel";
import CenterPanel from "./centerPanel";
let focuseWorkList = [
{
name: "page1",
list: [
{ num: 1, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 2, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 3, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 4, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 5, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
{
name: "page2",
list: [
{ num: 6, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 7, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 8, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 9, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 10, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
{
name: "page3",
list: [
{ num: 11, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 12, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 13, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 14, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
{ num: 15, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
],
},
];
const setting = {
dots: false,
infinite: true,
speed: 2000,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover: true,
autoplaySpeed: 5000,
pauseOnFocus: true,
autoplay: true,
arrows: true,
prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
// afterChange: (index) => setTag(index),
};
function Home(props) {
const {} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
// const [focuseWorkList, setFocuseWorkList] = useState([]);
// useEffect(() => {
// getWorkList();
// }, []);
// function getWorkList() {
// let workList = [];
// }
// function getDay(){
// let day = '2025年2月'
// return day
// }
return (
<div className="home-wrap">
<div className="home-left">
<div className="news-wrap">
<div class="left-title">要闻概览:</div>
<div class="left-subTitle">Overview of important news</div>
<div class="news-month">{currentMonth}</div>
<div class="news-content-title">
IDRL团队/IDRLnet《基于内嵌物理知经.》
</div>
<img class="news-line" src={newsLine} alt="" srcset="" />
<div class="news-pic-wrap">
<img class="news-pic" src={bj1} alt="" srcset="" />
</div>
<div className="news-content">
为解决飞行器设计优化过程中物理场快速仿真问题和运行监测阶段物理场精确反演问题，国防科技创新研究院无人系统技术研究中心智能设计与究中心智能设计与
</div>
<div className="point-work">
<div className="left-title">重点工作:</div>
<div className="left-subTitle">Focus on work</div>
<div className="point-work-wrap">
<Slider {...setting}>
{focuseWorkList && focuseWorkList.length > 0
? focuseWorkList.map((page, idx) => {
return (
<div className="point-work-page" key={idx}>
{page.list.map((item, index) => {
return (
<div className="point-work-item" key={item.num}>
<div className="point-work-item-num">
{item.num}
</div>
<div className="point-work-item-content">
{item.content}
</div>
</div>
);
})}
</div>
);
})
: ""}
</Slider>
</div>
</div>
</div>
</div>
<div className="home-right">
<div className="right-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
situation
</div>
</div>
<div className="soft-title">软件工厂工作态势</div>
</div>
<div className="right-content">
<div className="top-section">
<FirstPanel />
<SecondPanel />
</div>
<div className="bottom-section">
<ThirdPanel />
<ForthPanel />
</div>
<CenterPanel/>
</div>
</div>
</div>
);
}
export default Home;

42
src/forge/SoftwareFactory/components/Home/secondPanel.jsx Normal file
View File

@ -0,0 +1,42 @@
import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
const secondPanelList = [
{ title: "待完成任务数", num: 50, isNUm: true, unit: "个" },
{ title: "待测试数", num: 10, isNUm: true, unit: "个" },
{ title: "Bug待处理数", num: 5, isNUm: true, unit: "个" },
{ title: "待完成迭代数", num: 8, isNUm: true, unit: "个" },
];
function SecondPanel(props) {
return (
<div className="second-panel">
<div className="panel-title">今日项目状态</div>
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{secondPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
</div>
);
}
export default SecondPanel;

41
src/forge/SoftwareFactory/components/Home/thirdPanel.jsx Normal file
View File

@ -0,0 +1,41 @@
import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
const thirdPanelList = [
{ title: "昨日完结任务数", num: 50, isNUm: true, unit: "个" },
{ title: "昨日关闭缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "昨日需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "昨日工作之星", num: 8, isNUm: true, unit: "个" },
];
function ThirdPanel(props) {
return (
<div className="third-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{thirdPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
<div className="panel-title">昨日完结工作</div>
</div>
);
}
export default ThirdPanel;

54
src/forge/SoftwareFactory/components/ProjectStatus/ProjectCard.jsx Normal file
View File

@ -0,0 +1,54 @@
import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
function ProjectCard(props) {
const {mgRight} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
return (
<div className="project-card-wrap" style={{marginRight:mgRight?'20px':0}}>
<div className="pro-title">项目名称</div>
<div className="pro-group">
<div style={{opacity:1}}>{'开源项目组'}</div>
<div style={{marginLeft:26}}>项目经理：{'蒋宇航'}</div>
</div>
<div class="pro-center">
<div className="pro-center-item">
<div className="pro-center-name">项目需求数</div>
<div className="pro-center-num">200</div>
<div className="pro-center-name" style={{marginTop:6}}>项目完成数</div>
<div className="pro-center-num">150</div>
</div>
<div className="pro-center-item" style={{marginLeft:6}}>
<div className="pro-center-name">项目任务数</div>
<div className="pro-center-num">200</div>
<div className="pro-center-name" style={{marginTop:6}}>任务完成数</div>
<div className="pro-center-num">150</div>
</div>
<div className="pro-center-item" style={{marginLeft:6}}>
<div className="pro-center-name">项目迭代数</div>
<div className="pro-center-num">200</div>
<div className="pro-center-name" style={{marginTop:6}}>已完成迭代数</div>
<div className="pro-center-num">150</div>
</div>
</div>
<div className="pro-bottom">
<div className="pro-bottom-item">
<div className="pro-bt-name">测试用例数</div>
<div className="pro-bt-num">927</div>
</div>
<div className="pro-bottom-item">
<div className="pro-bt-name">测试缺陷数</div>
<div className="pro-bt-num">58</div>
</div>
<div className="pro-bottom-item">
<div className="pro-bt-name">待测试数</div>
<div className="pro-bt-num">623</div>
</div>
</div>
{props.shadow && <div className={`card-shadow ${props.shadow}`} ></div>}
</div>
);
}
export default ProjectCard;

47
src/forge/SoftwareFactory/components/ProjectStatus/index.jsx Normal file
View File

@ -0,0 +1,47 @@
import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import centerBg from "../../img/center_title_bg.png";
import './index.scss';
import ProjectCard from './ProjectCard'
function ProjectStatus(props) {
const {} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
return (
<div className="project-wrap">
<div className="project-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
situation
</div>
</div>
<div className="soft-title">软件工厂工作态势</div>
</div>
<div className="project-sub-t-wrap">
<div className="project-sub-t">
<div className="project-sub-inner">项目研发状态</div>
</div>
</div>
<div class="project-bottom-wrap">
<div className="project-list-wrap">
<ProjectCard mgRight={true} />
<ProjectCard mgRight={true} />
<ProjectCard mgRight={true} />
<ProjectCard mgRight={true} />
<ProjectCard mgRight={false} />
<ProjectCard mgRight={true} shadow="shadow-left"/>
<ProjectCard mgRight={true} shadow="shadow-center"/>
<ProjectCard mgRight={true} shadow="shadow-center"/>
<ProjectCard mgRight={true} shadow="shadow-center"/>
<ProjectCard mgRight={false} shadow="shadow-right"/>
</div>
</div>
</div>
);
}
export default ProjectStatus;

210
src/forge/SoftwareFactory/components/ProjectStatus/index.scss Normal file
View File

@ -0,0 +1,210 @@
.project-wrap {
width: 100vw;
height: 100vh;
background-image: url(../../img/bj2.png);
background-size: 100% 100%;
display: flex;
flex-direction: column;
.project-head {
display: flex;
padding-top: 50px;
padding-left: 36px;
.center-title-wrap {
position: relative;
img {
width: 308px;
}
.center-title {
position: absolute;
color: #fff;
font-family: "shuheiTi";
font-size: 28px;
line-height: 46px;
top: 0;
left: 28px;
letter-spacing: 3px;
}
.center-sub-title {
position: absolute;
font-family: FangSong;
color: #2648df;
font-size: 20px;
bottom: 0;
left: 60px;
width: 740px;
line-height: 20px;
}
}
.soft-title {
color: rgba(38, 72, 223, 1);
font-family: "shuheiTi";
font-size: 52px;
align-items: flex-start;
line-height: 52px;
padding-left: 24px;
}
}
.project-sub-t-wrap {
padding-top: 20px;
display: flex;
justify-content: center;
.project-sub-t {
width: 350px;
height: 54px;
background-color: rgba(39, 133, 214, 0.17);
border-radius: 2px 24px 2px 24px;
.project-sub-inner {
width: 350px;
height: 48px;
line-height: 48px;
background: #2648df;
border-radius: 2px 24px 2px 24px;
text-align: center;
font-size: 27px;
font-family: "alibaba";
color: #fff;
}
}
}
.project-bottom-wrap {
flex: 1;
padding-top: 11px;
background-image: url("../../img/bootm_bg.png");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom;
.project-list-wrap {
display: flex;
flex-wrap: wrap;
padding: 0 35px;
.project-card-wrap {
.card-shadow {
position: absolute;
left: 0;
bottom: -62px;
height: 62px;
width: 354px;
// border-radius: 4px 4px 25px 4px;
}
.shadow-left{
// width:calc( 354px - 180px);
// left: 180px;
bottom: -30px;
height: 30px;
opacity: 46%;
border-bottom-right-radius: 6px;
background: linear-gradient(
-90deg,
rgba(38, 72, 223, 0.19) 0%,
rgba(255, 255, 255, 0) 52%
);
}
.shadow-center{
background: linear-gradient(
180deg,
rgba(38, 72, 223, 0.19) 0%,
rgba(255, 255, 255, 0) 52%
);
}
.shadow-right{
bottom: -30px;
height: 30px;
border-bottom-left-radius: 6px;
opacity: 46%;
background: linear-gradient(
90deg,
rgba(38, 72, 223, 0.19) 0%,
rgba(255, 255, 255, 0) 52%
);
}
position: relative;
width: 354px;
height: 353px;
background: linear-gradient(90.26deg, #2785d6 0.21%, #2648df 98.9%);
border-radius: 4px 25px 4px 4px;
margin-top: 20px;
padding: 0 15px;
.pro-title {
font-family: "alibaba";
color: #f6d8b0;
font-size: 27px;
line-height: 27px;
text-align: center;
padding-top: 20px;
}
.pro-group {
display: flex;
width: 324px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-family: "alibabaReg";
border-radius: 6px;
background: linear-gradient(
91.3deg,
rgba(184, 198, 255, 0.22) 0%,
rgba(255, 255, 255, 0.22) 54.4%,
rgba(126, 149, 255, 0) 100%,
rgba(108, 135, 255, 0.31) 100%
);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
margin-top: 15px;
}
.pro-center {
padding-top: 12px;
display: flex;
.pro-center-item {
width: 104px;
height: 155px;
background: linear-gradient(90.98deg, #ffffff 2.78%, #d4ebff 98.6%);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 0;
.pro-center-name {
font-family: "alibabaReg";
color: #27254c;
font-size: 15px;
line-height: 21px;
height: 21px;
}
.pro-center-num {
font-family: "yousheTi";
color: #2648df;
font-size: 32px;
line-height: 42px;
height: 42px;
}
}
}
.pro-bottom {
display: flex;
justify-content: space-between;
padding: 14px 9px 0;
.pro-bottom-item {
color: rgba(255, 255, 255, 0.8);
font-family: "alibabaReg";
display: flex;
flex-direction: column;
align-items: center;
font-size: 15px;
.pro-bt-name {
line-height: 21px;
height: 21px;
}
.pro-bt-num {
font-family: "pangmen";
font-size: 26px;
color: #fff;
line-height: 26px;
padding-top: 5px;
}
}
}
}
}
}
}

BIN
src/forge/SoftwareFactory/img/bootm_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

BIN
src/forge/SoftwareFactory/img/duoyun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/forge/SoftwareFactory/img/fengsu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/forge/SoftwareFactory/img/shidu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/forge/SoftwareFactory/img/ziwaixian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

27
src/forge/SoftwareFactory/index.jsx
View File

@ -4,12 +4,35 @@ import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC"
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
import { withRouter } from "react-router";
import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
import Home from './components/Home'
import Home from './components/Home/index'
import ProjectStatus from './components/ProjectStatus/index'
import next from "./img/next.png";
import Slider from "react-slick";
import './index.scss';
const setting = {
dots: false,
infinite: true,
speed: 2000,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover: true,
autoplaySpeed: 2000,
pauseOnFocus: false,
autoplay: false,
arrows: false,
// prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
// nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
// afterChange: (index) => setTag(index),
};
function Index(props){
return (<div className="softFc-wrap">
<Home/>
<Slider {...setting} >
<ProjectStatus/>
<Home/>
</Slider>
</div>)
}

129
src/forge/SoftwareFactory/index.scss
View File

@ -18,8 +18,8 @@ $blue-color-light: rgba(39, 118, 217, 1);
height: 100vh;
width: 100vw;
.home-wrap {
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
background-image: url(./img/bj1.png);
background-size: 100% 100%;
display: flex;
@ -33,18 +33,18 @@ $blue-color-light: rgba(39, 118, 217, 1);
padding-top: 54px;
.slick-prev {
width: 74px;
height: 40px;
height: 54px;
left: 0;
bottom: -50px !important;
bottom: -58px !important;
top: auto;
transform: rotate(180deg);
}
.slick-next {
width: 74px;
height: 40px;
height: 54px;
right: 0;
top: auto;
bottom: -74px !important;
bottom: -86px !important;
// transform: rotate(180deg);
}
.left-title,
@ -210,6 +210,15 @@ $blue-color-light: rgba(39, 118, 217, 1);
.right-content {
padding-top: 86px;
position: relative;
.panel-title {
width: 27px;
// height: 187px;
font-family: "shuheiTi";
font-weight: 700;
color: #f6d8b0;
font-size: 27px;
line-height: 33px;
}
.top-section,
.bottom-section {
display: flex;
@ -226,12 +235,20 @@ $blue-color-light: rgba(39, 118, 217, 1);
.top-section {
.first-panel {
background-image: url(./img/first_panel.png);
display: flex;
justify-content: flex-start;
.panel-title {
margin-left: 41px;
}
}
.second-panel {
background-image: url(./img/second_panel.png);
margin-left: 55px;
display: flex;
justify-content: flex-end;
.panel-title {
margin-right: 41px;
}
.white-panel-out {
display: flex;
justify-content: flex-end;
@ -246,12 +263,22 @@ $blue-color-light: rgba(39, 118, 217, 1);
padding-top: 53px;
.third-panel {
background-image: url(./img/third_panel.png);
display: flex;
justify-content: flex-start;
align-items: flex-end;
.panel-title {
margin-left: 41px;
}
}
.forth-panel {
background-image: url(./img/forth_panel.png);
margin-left: 55px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
.panel-title {
margin-right: 41px;
}
.white-panel-out {
display: flex;
justify-content: flex-end;
@ -283,7 +310,7 @@ $blue-color-light: rgba(39, 118, 217, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding:14px 0 6px;
padding: 14px 0 6px;
.panel-item-content-left {
display: flex;
align-items: center;
@ -298,28 +325,31 @@ $blue-color-light: rgba(39, 118, 217, 1);
margin-right: 16px;
}
}
.panel-item-content-right{
color:#2648df;
.panel-item-content-right {
color: #2648df;
display: flex;
align-items: flex-end;
.panel-num{
.panel-num {
font-family: "yousheTi";
font-size: 36px;
line-height: 36px;
}
.panel-unit{
font-family: 'alibaba';
.panel-unit {
font-family: "alibaba";
font-size: 13px;
line-height: 28px;
margin-left: 4px;
}
}
}
.panel-item-line{
.panel-item-line {
height: 1px;
width: 100%;
background:linear-gradient(90.21deg,#2648df 2.02%,#f6d8b0 98.88%);
background: linear-gradient(
90.21deg,
#2648df 2.02%,
#f6d8b0 98.88%
);
}
}
}
@ -336,6 +366,75 @@ $blue-color-light: rgba(39, 118, 217, 1);
transform: translate(-50%, -50%);
margin-top: 43px;
margin-left: -68px;
display: flex;
flex-wrap: wrap;
.first-section,
.second-section,
.third-section,
.forth-section {
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 16px;
font-family: "alibabaReg";
.content {
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 32px;
}
}
.first-section {
.content {
margin-left: 26px;
margin-top: 26px;
}
}
.second-section {
.content {
margin-right: 26px;
margin-top: 26px;
}
}
.third-section {
.content {
margin-left: 26px;
margin-bottom: 26px;
}
}
.forth-section {
.content {
margin-right: 26px;
margin-bottom: 26px;
}
}
.center-section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 13px;
font-family: "alibabaReg";
.month {
font-family: "shuheiTi";
font-size: 32px;
line-height: 32px;
}
.date {
font-size: 19px;
line-height: 32px;
}
}
}
}
}