数据获取修改,样式问题修复
This commit is contained in:
parent
46250694c0
commit
a2d93ddee9
|
|
@ -16,6 +16,10 @@
|
|||
font-family: "alibabaReg";
|
||||
src: url("../fonts/ALIBABA-PUHUITI-REGULAR.TTF");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "alibabaBold";
|
||||
src: url("../fonts/ALIBABA-PUHUITI-BOLD.TTF");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ziyouwenyihei";
|
||||
src: url("../fonts/ziyouwenyihei.ttf");
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -2,4 +2,6 @@ export const factoryZoneId = 2
|
|||
export const dirId = 9
|
||||
export const versionId = '工厂版本'
|
||||
export const lessonId = '学习资源'
|
||||
export const toolId = '开发工具'
|
||||
export const toolId = '开发工具'
|
||||
export const standardId = '标准规范'
|
||||
export const manualId = '用户手册'
|
||||
|
|
@ -22,6 +22,8 @@
|
|||
|
||||
&:hover {
|
||||
animation: border-glint 2s linear;
|
||||
border: 2px solid transparent !important;
|
||||
background-image: linear-gradient(to bottom right, #0b0333, #091221), linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, .6) 50%, hsla(0, 0%, 100%, 0) 53%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import './index.scss';
|
||||
import featureLeft1 from '../../../images/factory/feature-left-1.webp';
|
||||
import featureright1 from '../../../images/factory/feature-right-1.webp';
|
||||
import featureright1 from '../../../images/factory/feature-right-1.png';
|
||||
import featureBottom1 from '../../../images/factory/feature-bottom-1.webp';
|
||||
import gif1 from '../../../images/factory/feature-gif-1.webp'
|
||||
import gif2 from '../../../images/factory/feature-gif-2.gif'
|
||||
|
|
@ -51,7 +51,7 @@ function Feature(props) {
|
|||
<div className="content-top-right">
|
||||
<h3>数字化纳管,掌控研发全链路</h3>
|
||||
<p>研发活动及制品全流程数字化纳管,支持精准决策和持续优化</p>
|
||||
{/* <img className="content-top-right-gif" src={gif2} alt="" /> */}
|
||||
<img className="content-top-right-gif" src={gif2} alt="" />
|
||||
<img src={featureright1} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
.factory-feature {
|
||||
margin: auto;
|
||||
margin-top: 67px;
|
||||
padding-top: 67px;
|
||||
background-image: url('../../../images/factory/feature-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: center -0px;
|
||||
h1 {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
width: 1600px;
|
||||
|
|
@ -15,6 +22,8 @@
|
|||
box-shadow: 0px 0px 18px rgba(0, 74, 168, 0.05);
|
||||
border-color: rgba(22, 76, 228, 0.2);
|
||||
display: flex;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
h3 {
|
||||
line-height: 35px;
|
||||
|
|
@ -65,6 +74,7 @@
|
|||
height: 506px;
|
||||
margin-right: 25px;
|
||||
position: relative;
|
||||
background-image: url('../../../images/factory/feature-left-bg.webp');
|
||||
|
||||
img {
|
||||
width: 614px;
|
||||
|
|
@ -72,11 +82,11 @@
|
|||
}
|
||||
|
||||
&-gif {
|
||||
width: 108px !important;
|
||||
height: 111px !important;
|
||||
width: 128px !important;
|
||||
height: 128px !important;
|
||||
position: absolute;
|
||||
left: 270px;
|
||||
top: 260px
|
||||
left: 265px;
|
||||
top: 250px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,6 +94,7 @@
|
|||
width: 787.5px;
|
||||
height: 502px;
|
||||
position: relative;
|
||||
background-image: url('../../../images/factory/feature-right-bg.webp');
|
||||
|
||||
img {
|
||||
width: 770px;
|
||||
|
|
@ -91,11 +102,11 @@
|
|||
margin-top: 35px;
|
||||
}
|
||||
&-gif {
|
||||
width: 160px !important;
|
||||
height: 120px !important;
|
||||
width: 72px !important;
|
||||
height: 54px !important;
|
||||
position: absolute;
|
||||
left: 180px;
|
||||
top: 120px
|
||||
left: 178px;
|
||||
top: 263px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,6 +117,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-image: url('../../../images/factory/feature-bottom-bg.webp');
|
||||
|
||||
h3 {
|
||||
margin-left: 50px;
|
||||
|
|
@ -121,11 +133,11 @@
|
|||
height: 315px;
|
||||
}
|
||||
&-gif {
|
||||
width: 72px !important;
|
||||
height: 57px !important;
|
||||
width: 93px !important;
|
||||
height: 70px !important;
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 130px
|
||||
left: 608px;
|
||||
top: 125px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
border-radius: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(9, 18, 33, 0.12);
|
||||
background: rgba(9, 18, 33, 0.42);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,11 +144,16 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
// width: 400px;
|
||||
line-height: 40px;
|
||||
font-family: alibaba;
|
||||
font-weight: 500;
|
||||
color: #091221;
|
||||
font-size: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
|
|||
import { getProjectsLists, getSourceList, httpUrl } from '../../api';
|
||||
import { factoryZoneId, lessonId , versionId, toolId } from '../../../constants/factory'
|
||||
import { downloadFunc } from '../../../forge/Utils/utils'
|
||||
import '../../common.scss'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
|
|
@ -211,8 +212,8 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
<div className="item-name">{item.name}</div>
|
||||
<div className="item-desc">{item.summary}</div>
|
||||
<div className="item-btn">
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button>查看</button></Link>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
.resource-1 {
|
||||
top: 0;
|
||||
height: 663px;
|
||||
background: #f3f9fc;
|
||||
background: #d3ecfc;
|
||||
z-index: 1;
|
||||
|
||||
.panel-content .content-right {
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
.resource-2 {
|
||||
top: 742px;
|
||||
height: 350px;
|
||||
background: #f1f4ff;
|
||||
background: #e6ecff;
|
||||
z-index: 2;
|
||||
|
||||
.panel-content .content-right {
|
||||
|
|
@ -167,6 +167,12 @@
|
|||
margin-top: 21px;
|
||||
line-height: 26px;
|
||||
}
|
||||
button {
|
||||
&:hover {
|
||||
border-color: #164ce4;
|
||||
color: #164ce4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -174,7 +180,7 @@
|
|||
.resource-3 {
|
||||
top: 1170px;
|
||||
height: 622px;
|
||||
background: #ecf6ff;
|
||||
background: #d5dfff;
|
||||
z-index: 3;
|
||||
.content-item3 {
|
||||
width: 385px;
|
||||
|
|
@ -193,9 +199,18 @@
|
|||
margin-top: auto;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
background-color: #ffffff;
|
||||
color: #091221;
|
||||
&:nth-child(1) {
|
||||
background: #091221;
|
||||
background-color: #091221;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&:hover {
|
||||
border-color: #164ce4;
|
||||
color: #164ce4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -249,6 +264,9 @@
|
|||
color: #164ce4;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,15 @@ import KFIcon from '../../../components/KFIcon';
|
|||
import back1 from '../../../images/factory/back1.png'
|
||||
import back2 from '../../../images/factory/back2.png'
|
||||
import tagIcon from '../../../images/factory/lessons-tag-icon.webp'
|
||||
import '../../common.scss'
|
||||
import { getSourceList } from '../../api'
|
||||
import { factoryZoneId, manualId, standardId } from '../../../constants/factory'
|
||||
import { downloadFunc } from '../../../forge/Utils/utils'
|
||||
|
||||
const Resource2 = forwardRef(({ zoneId }, ref) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [standard, setStandard] = useState({});
|
||||
const [manualList, setManualList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
|
|
@ -17,6 +23,9 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
observer.disconnect();
|
||||
}
|
||||
}, { threshold: 0.1 });
|
||||
getStandard()
|
||||
getManualList()
|
||||
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
|
|
@ -24,6 +33,34 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const getStandard = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: standardId }).then(res => {
|
||||
const rows = []
|
||||
res.data.rows.forEach(e => {
|
||||
let extendData = {}
|
||||
if (e.extendData) {
|
||||
extendData = JSON.parse(e.extendData)
|
||||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setStandard(rows[0]);
|
||||
});
|
||||
}
|
||||
|
||||
const getManualList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: manualId }).then(res => {
|
||||
const rows = []
|
||||
res.data.rows.forEach(e => {
|
||||
let extendData = {}
|
||||
if (e.extendData) {
|
||||
extendData = JSON.parse(e.extendData)
|
||||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setManualList(rows.slice(0, 2));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`factory-resource2 factory-module ${isVisible ? 'animate-active' : ''}`}
|
||||
|
|
@ -40,7 +77,7 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
<div className="item-info">
|
||||
<h4>Numpy科学计算</h4>
|
||||
<p>本AI核心通识课课程是一门全面且深入的入门课程,旨在为学生提供一个从基础到高级的全方位...</p>
|
||||
<button>查看详情</button>
|
||||
<button className="shiny-button">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="left-item">
|
||||
|
|
@ -48,7 +85,7 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
<div className="item-info">
|
||||
<h4>探索数据类型</h4>
|
||||
<p>本AI核心通识课课程是一门全面且深入的入门课程,旨在为学生提供一个从基础到高级的全方位...</p>
|
||||
<button>查看详情</button>
|
||||
<button className="shiny-button">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,31 +95,34 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
<div className="standard">
|
||||
<div className="standard-info">
|
||||
<div className="standard-tags">
|
||||
<span><img src={ tagIcon } alt="" />最新规范</span>
|
||||
<span><img src={tagIcon} alt="" />最新规范</span>
|
||||
<span>自动合规</span>
|
||||
<span>行业对齐</span>
|
||||
</div>
|
||||
<h3>标准规范</h3>
|
||||
<p>我是文案我是文案占2行我是文案我是文案占2行我是文案我是文案占2行我是文案占2行</p>
|
||||
<button>立即下载</button>
|
||||
{
|
||||
standard.name && <>
|
||||
<h3>{standard.name}</h3>
|
||||
<p>{standard.summary}</p>
|
||||
<button className="shiny-button" onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>立即下载</button>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
<img className="standard-img" src={lessonsRight1} alt="" />
|
||||
</div>
|
||||
<div className="manual">
|
||||
<div className="manual-tags">
|
||||
<span><img src={ tagIcon } alt="" />用户手册</span>
|
||||
<span><img src={tagIcon} alt="" />用户手册</span>
|
||||
</div>
|
||||
<h3>软件工厂用户手册</h3>
|
||||
<div className="manual-content">
|
||||
<div>
|
||||
<Link to="/softwareFactory/lessons" ><h4>软件工厂白皮书</h4> <KFIcon type="icon-icon_blackarrow_hover" font={40} /></Link>
|
||||
<p>一站式操作指南,覆盖项目管理、三库管理、流水线配置等全环节</p>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/softwareFactory/lessons" ><h4>软件工厂用户手册</h4> <KFIcon type="icon-icon_blackarrow_hover" font={40} /></Link>
|
||||
<p>涵盖软件工厂需求、设计、开发、测试、运维全生命周期,助力构</p>
|
||||
|
||||
</div>
|
||||
{
|
||||
manualList.map((item, index) => {
|
||||
return <div key={ index }>
|
||||
<Link to="/softwareFactory/lessons" ><h4>{ item.name }</h4> <KFIcon type="icon-icon_blackarrow_hover" font={40} /></Link>
|
||||
<p>{ item.summary }</p>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,6 +99,12 @@
|
|||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
// background: #ffffff !important;
|
||||
background-image: linear-gradient(#ffffff, #ffffff) ;
|
||||
&:hover {
|
||||
background-color: #091221 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -194,6 +200,12 @@
|
|||
font-weight: 500;
|
||||
color: #091221;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
&:hover {
|
||||
background-color: #091221 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
|
|
@ -232,14 +244,6 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: auto;
|
||||
height: 25px;
|
||||
|
|
@ -273,6 +277,14 @@
|
|||
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
h4 {
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
--wave-height: 150px;
|
||||
--wave-height-sm: 50px;
|
||||
--wave-gradient: linear-gradient(360deg,
|
||||
rgba(67, 97, 238, 0.2) 0%,
|
||||
rgba(114, 9, 183, 0.3) 100%);
|
||||
--wave-color: rgba(67, 97, 238, 0.25);
|
||||
rgba(67, 97, 238, 0.3) 0%,
|
||||
rgba(113, 9, 183, 0.6) 100%);
|
||||
--wave-color: rgba(67, 98, 238, 0.534);
|
||||
}
|
||||
|
||||
/* 基础波浪样式 */
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
|
|||
import './index.scss';
|
||||
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
|
||||
import KFIcon from '../../components/KFIcon/index';
|
||||
import { factoryZoneId, lessonId } from '../../constants/factory'
|
||||
import { factoryZoneId, lessonId, manualId, standardId } from '../../constants/factory'
|
||||
import { Carousel } from 'antd';
|
||||
import back1 from '../../images/factory/back1.png'
|
||||
import back2 from '../../images/factory/back2.png'
|
||||
|
|
@ -13,9 +13,11 @@ import '../common.scss'
|
|||
import { Link } from "react-router-dom";
|
||||
import Waves from '../components/Waves/index'
|
||||
import moment from 'moment';
|
||||
import { getSourceList } from '../api'
|
||||
import { downloadFunc } from '../../forge/Utils/utils'
|
||||
import chapterBg from '../../images/factory/lessons/chapter-bg.webp'
|
||||
|
||||
const backList = [back1, back2, back3]
|
||||
import { getSourceList } from '../api'
|
||||
|
||||
function Index(props) {
|
||||
const [nowTop, setNowTop] = useState({})
|
||||
|
|
@ -23,9 +25,13 @@ function Index(props) {
|
|||
const carouselEL = useRef(null);
|
||||
|
||||
const [chapterList, setChapterList] = useState([]);
|
||||
const [standardList, setStandardList] = useState([]);
|
||||
const [manualList, setManualList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
getFullList();
|
||||
getStandardList();
|
||||
getManualList();
|
||||
}, []);
|
||||
|
||||
const getFullList = () => {
|
||||
|
|
@ -36,15 +42,44 @@ function Index(props) {
|
|||
let extendData = {}
|
||||
if (e.extendData) {
|
||||
extendData = JSON.parse(e.extendData)
|
||||
}
|
||||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setChapterList(rows);
|
||||
});
|
||||
};
|
||||
|
||||
const getStandardList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: standardId }).then(res => {
|
||||
const rows = []
|
||||
res.data.rows.forEach(e => {
|
||||
let extendData = {}
|
||||
if (e.extendData) {
|
||||
extendData = JSON.parse(e.extendData)
|
||||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setStandardList(rows);
|
||||
});
|
||||
}
|
||||
|
||||
const getManualList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: manualId }).then(res => {
|
||||
const rows = []
|
||||
res.data.rows.forEach(e => {
|
||||
let extendData = {}
|
||||
if (e.extendData) {
|
||||
extendData = JSON.parse(e.extendData)
|
||||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setManualList(rows);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`lessons ${isVisible ? 'animate-active' : ''}`}>
|
||||
<img src={ chapterBg } className="lessons-bg" alt="" />
|
||||
<div className="lessons-header">
|
||||
<h2><span>学习专区,</span>多样资源服务工厂应用</h2>
|
||||
<p >我是学习专区文案我是学习专区文案我是学习专区文案我是学习专区文案我是学习专区文案我是学习专区文案XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
|
||||
|
|
@ -156,7 +191,7 @@ function Index(props) {
|
|||
<span>{item.domainName}</span>
|
||||
</div>
|
||||
<div className="button-wrapper">
|
||||
<button onClick={() => {window.open(item.extendDataUrl)}}>查看详情</button>
|
||||
<button onClick={() => { window.open(item.extendDataUrl) }}>查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -168,7 +203,7 @@ function Index(props) {
|
|||
chapterList.slice(3).map((item, index) => {
|
||||
return <div className="chapter-chapter2-item" key={item.id}>
|
||||
<div className="chapter-head">
|
||||
<h4 onClick={() => {window.open(item.extendDataUrl)}}>{item.name}</h4>
|
||||
<h4 onClick={() => { window.open(item.extendDataUrl) }}>{item.name}</h4>
|
||||
<div className="line-1"></div>
|
||||
<div className="line-2"></div>
|
||||
<div className="line-3"></div>
|
||||
|
|
@ -186,17 +221,16 @@ function Index(props) {
|
|||
<h2>标准规范</h2>
|
||||
<div className="standard-content">
|
||||
{
|
||||
[1, 2, 3].map((item, index) => {
|
||||
standardList.slice(0, 3).map((item, index) => {
|
||||
return <div className="standard-item" key={index}>
|
||||
<div className="standard-item-head">
|
||||
<h4>XXXXXXX标准规范</h4>
|
||||
<button>下载</button>
|
||||
<h4>{item.name}</h4>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }} >下载</button>
|
||||
</div>
|
||||
<p>我是标准规范的副文案占一行我是标准规范的副文案占一行</p>
|
||||
<p>{item.summary}</p>
|
||||
<div className="standard-item-img">
|
||||
<img src={backList[index % backList.length]} alt="" />
|
||||
<img src={item.extendDataHeadImg || backList[index % backList.length]} alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
})
|
||||
}
|
||||
|
|
@ -212,18 +246,17 @@ function Index(props) {
|
|||
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
|
||||
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
|
||||
</div>
|
||||
<div className="manual-1">
|
||||
<img src={manual1} alt="" />
|
||||
<div>软件工厂用户手册</div>
|
||||
<p>一站式操作指南,覆盖项目管理、三库管理、流水线配置等全环节,辅以图文,助力用户快速上手。</p>
|
||||
<button>下载</button>
|
||||
</div>
|
||||
<div className="manual-2">
|
||||
<img src={manual2} alt="" />
|
||||
<div><span>软件工厂</span><div></div>白皮书</div>
|
||||
<p>一站式操作指南,覆盖项目管理、三库管理、流水线配置等全环节,辅以图文,助力用户快速上手。</p>
|
||||
<button>下载</button>
|
||||
</div>
|
||||
{
|
||||
manualList.slice(0, 3).map((item, index) => {
|
||||
const nameList = item.name.split('软件工厂')
|
||||
return <div className={ `manual-${ index + 1 }` }>
|
||||
<img src={ index === 0 ? manual1 : manual2} alt="" />
|
||||
{ index === 0 ? <div>{item.name}</div> : <div><span>软件工厂</span><div></div>{ nameList[1] }</div> }
|
||||
<p>{ item.summary }</p>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }} >下载</button>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-family: alibabareg;
|
||||
|
|
@ -28,6 +29,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 880px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -39,6 +47,11 @@
|
|||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 35px;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
.ant-breadcrumb {
|
||||
line-height: 20px;
|
||||
font-family: alibaba;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: #1b58df;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import back1 from '../../images/factory/back1.png'
|
|||
import back2 from '../../images/factory/back2.png'
|
||||
import back3 from '../../images/factory/back3.png'
|
||||
import headerBottom from '../../images/factory/news/header-bottom.png'
|
||||
import bodyBg from '../../images/factory/news/news-bg.webp'
|
||||
import '../common.scss'
|
||||
import { Link } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
|
|
@ -137,6 +138,7 @@ function Index(props) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="news-body" ref={containerRef}>
|
||||
<img className="news-body-bg" src={bodyBg}></img>
|
||||
<h2>XXXXX全部新闻的标题</h2>
|
||||
<div className="news-body-top">
|
||||
<div className="news-body-top-left">
|
||||
|
|
|
|||
|
|
@ -152,13 +152,20 @@
|
|||
transform: scale(0.9);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #e7f0ff 0%, #ffffff 19.24%, #ffffff 46.02%, #ffffff 100%);
|
||||
background-color: linear-gradient(180deg, #e7f0ff 0%, #ffffff 19.24%, #ffffff 46.02%, #ffffff 100%);
|
||||
border-radius: 80px 80px 0px 0px;
|
||||
padding-top: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 350px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -338,15 +345,21 @@
|
|||
|
||||
.line-1 {
|
||||
height: 8px;
|
||||
animation: wave1 1.2s ease-in-out infinite;
|
||||
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
height: 12px;
|
||||
animation: wave2 1.2s ease-in-out infinite 0.1s;
|
||||
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
animation: wave3 1.2s ease-in-out infinite 0.2s;
|
||||
|
||||
}
|
||||
|
||||
@keyframes wave1 {
|
||||
|
|
@ -400,20 +413,6 @@
|
|||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.line-1 {
|
||||
animation: wave1 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
animation: wave2 1.2s ease-in-out infinite 0.1s;
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
animation: wave3 1.2s ease-in-out infinite 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
|
||||
import { styles } from './index.scss';
|
||||
import { getSourceList, getProjectsLists } from '../../../api'
|
||||
import { factoryZoneId } from '../../../../constants/factory'
|
||||
import { factoryZoneId, toolId, versionId } from '../../../../constants/factory'
|
||||
import ActionItem from '../ActionItem';
|
||||
import emptyImg from '../../../../images/factory/resource/empty.webp'
|
||||
|
||||
function Index(props) {
|
||||
const searchValue = props.searchValue
|
||||
const searchType = props.searchType
|
||||
function Index({searchValue, searchType},ref) {
|
||||
const [versionList, setVersionList] = useState([]);
|
||||
const [versionTotal, setVersionTotal] = useState(0);
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
|
|
@ -18,17 +16,37 @@ function Index(props) {
|
|||
const pageSize = 20
|
||||
const totalSize = 6 // 聚合查询只查六个
|
||||
|
||||
useEffect(() => {
|
||||
if (searchValue) {
|
||||
getProjectsList(1)
|
||||
useImperativeHandle(ref, () => ({
|
||||
search: () => {
|
||||
search()
|
||||
}
|
||||
// getFullList();
|
||||
}, [searchValue]);
|
||||
}))
|
||||
|
||||
const getFullList = () => {
|
||||
const search = () => {
|
||||
getVersionList(1)
|
||||
getProjectsList(1)
|
||||
getToolsList(1)
|
||||
}
|
||||
|
||||
getSourceList({ id: factoryZoneId }).then(res => {
|
||||
const getVersionList = () => {
|
||||
getSourceList({
|
||||
pageNum: page,
|
||||
pageSize: searchType ? pageSize : totalSize,
|
||||
id: factoryZoneId, name: searchValue, keywords: versionId
|
||||
}).then(res => {
|
||||
setVersionList(res.data.rows.slice(0, 4));
|
||||
setVersionTotal(res.data.total)
|
||||
});
|
||||
};
|
||||
|
||||
const getToolsList = () => {
|
||||
getSourceList({
|
||||
pageNum: page,
|
||||
pageSize: searchType ? pageSize : totalSize,
|
||||
id: factoryZoneId, name: searchValue, keywords: toolId
|
||||
}).then(res => {
|
||||
setToolList(res.data.rows.slice(0, 4));
|
||||
setToolTotal(res.data.total)
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -102,7 +120,7 @@ function Index(props) {
|
|||
toolList.length > 0 && <div className="search-tool">
|
||||
<div className="search-header">
|
||||
<h3>开发工具</h3>
|
||||
<div><span>#</span>工具 <span>{projectTotal}个</span></div>
|
||||
<div><span>#</span>工具 <span>{toolTotal}个</span></div>
|
||||
</div>
|
||||
<div className="search-content">
|
||||
{
|
||||
|
|
@ -138,7 +156,7 @@ function Index(props) {
|
|||
versionList.length > 0 && <div className="search-version">
|
||||
<div className="search-header">
|
||||
<h3>工厂版本</h3>
|
||||
<div><span>#</span>版本 <span>{projectTotal}个</span></div>
|
||||
<div><span>#</span>版本 <span>{versionTotal}个</span></div>
|
||||
</div>
|
||||
<div className="search-content">
|
||||
{
|
||||
|
|
@ -164,4 +182,5 @@ function Index(props) {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
export default Index
|
||||
|
||||
export default forwardRef(Index)
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@
|
|||
align-self: flex-start;
|
||||
margin-top: 30px;
|
||||
margin-left: calc((100vw - 1600px) / 2);
|
||||
a {
|
||||
color: #1b58df;
|
||||
}
|
||||
span {
|
||||
color: #091221;
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ function Index(props) {
|
|||
</div>
|
||||
<div className="two-btn">
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}} className="shiny-button">下载</button>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
|
||||
</div>
|
||||
</ActionItem>
|
||||
})
|
||||
|
|
@ -202,7 +202,7 @@ function Index(props) {
|
|||
<div className="content-bottom-btn">
|
||||
<div className="two-btn">
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}} className="shiny-button">下载</button>
|
||||
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}}>下载</button>
|
||||
</div>
|
||||
</div>
|
||||
</ActionItem>
|
||||
|
|
|
|||
|
|
@ -218,7 +218,6 @@
|
|||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
border-radius: 9px;
|
||||
line-height: 20px;
|
||||
font-family: alibaba;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
|
|
@ -233,6 +232,10 @@
|
|||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border: 1px solid #091221;
|
||||
&:hover {
|
||||
border-color: #164ce4;
|
||||
color: #164ce4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -404,7 +407,9 @@
|
|||
|
||||
.content-bottom-wrapper {
|
||||
margin-bottom: 26px;
|
||||
margin-right: 16px;
|
||||
&:not(:nth-child(4n)) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-bottom-item {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ function Index(props) {
|
|||
|
||||
const [selectedType, setSelectedType] = useState()
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const searchRef = useRef(null)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -61,6 +62,9 @@ function Index(props) {
|
|||
|
||||
const search = () => {
|
||||
setSelectedType(null)
|
||||
setTimeout(() => {
|
||||
searchRef.current && searchRef.current.search()
|
||||
}, 0);
|
||||
}
|
||||
|
||||
const cleanSearch = (e) => {
|
||||
|
|
@ -72,6 +76,12 @@ function Index(props) {
|
|||
}
|
||||
}
|
||||
|
||||
const kewDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
search()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="resource">
|
||||
|
|
@ -84,7 +94,7 @@ function Index(props) {
|
|||
</div>
|
||||
<h2><span>资源中枢,</span>共享复用释放生态力量</h2>
|
||||
<div className="search-box">
|
||||
<Input className="search-input" value={searchValue} placeholder="搜索资源" allowClear onChange={cleanSearch}></Input>
|
||||
<Input className="search-input" value={searchValue} placeholder="搜索资源" onKeyDown={kewDown} allowClear onChange={cleanSearch}></Input>
|
||||
{/* <input className="search-input" type="text" placeholder="搜索资源" /> */}
|
||||
<div className="search-icon" onClick={search}>
|
||||
<KFIcon type="icon-sousuo" font={22} />
|
||||
|
|
@ -121,7 +131,7 @@ function Index(props) {
|
|||
)} />
|
||||
</Switch>
|
||||
{
|
||||
!selectedType && <Search searchValue={ searchValue }/>
|
||||
!selectedType && <Search ref={searchRef} searchValue={ searchValue }/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
border: 2px solid #ffffff52;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
margin-right: 10px;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.57);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -204,6 +205,7 @@
|
|||
p {
|
||||
position: relative;
|
||||
padding-left: 33px;
|
||||
font-size: 16px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
|
@ -235,6 +237,11 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
div:nth-child(1) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item-bg {
|
||||
position: absolute;
|
||||
|
|
@ -293,10 +300,12 @@
|
|||
width: 1600px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-bottom-wrapper {
|
||||
margin-bottom: 26px;
|
||||
&:not(:nth-child(4n)) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-bottom-item {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
.ant-breadcrumb {
|
||||
line-height: 20px;
|
||||
font-family: alibaba;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: #1b58df;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Loading…
Reference in New Issue