cont.
This commit is contained in:
黄心宇
parent
61ee8acb54
commit
d401cf4477
|
|
@ -3,10 +3,11 @@ export const factoryZoneId = 102
|
|||
export const dirId = 9
|
||||
export const versionId = '工厂版本'
|
||||
export const lessonId = '学习资源'
|
||||
// export const commontoolId = '社区软件'
|
||||
export const commontoolId = '开发工具'
|
||||
export const commontoolId = '社区软件'
|
||||
// export const commontoolId = '开发工具'
|
||||
export const toolId = '开发工具'
|
||||
export const standardId = '标准规范'
|
||||
export const docId = '文档资料'
|
||||
export const manualId = '用户手册'
|
||||
export const sceneId = '应用场景'
|
||||
export const factoryZoneName = 'tester'
|
||||
|
|
|
|||
|
|
@ -84,8 +84,8 @@ function News(props) {
|
|||
</div>
|
||||
|
||||
<div className="news-1-item-content">
|
||||
<Link to={`/softwareFactory/news/${item.id}`}><h3>{item.name}</h3></Link>
|
||||
<p>{item.summary}</p>
|
||||
<Link to={`/softwareFactory/news/${item.id}`}><h3 title={ item.name }>{item.name}</h3></Link>
|
||||
<p title={ item.summary }>{item.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
|
|
@ -97,10 +97,10 @@ function News(props) {
|
|||
<img src={news.headImg || getDefaultImage(news.id)} alt="" />
|
||||
</div>
|
||||
<div className="news-1-right-title">
|
||||
<Link to={`/softwareFactory/news/${news.id}`}><h5>{news.name}</h5>
|
||||
<Link to={`/softwareFactory/news/${news.id}`}><h5 title={ news.name }>{news.name}</h5>
|
||||
<KFIcon type="icon-icon_blackarrow_hover" font={46} /></Link>
|
||||
</div>
|
||||
<p>{news.summary}</p>
|
||||
<p title={ news.summary }>{news.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="news-2">
|
||||
|
|
@ -108,10 +108,10 @@ function News(props) {
|
|||
subList.slice(0, 4).map(item => {
|
||||
return <div className="news-2-item">
|
||||
<div className="news-2-item-title">
|
||||
<Link to={`/softwareFactory/news/${item.id}`}><h3>{item.name}</h3>
|
||||
<Link to={`/softwareFactory/news/${item.id}`}><h3 title={ item.name }>{item.name}</h3>
|
||||
<KFIcon type="icon-icon_blackarrow_hover" font={48} /></Link>
|
||||
</div>
|
||||
<p>{item.summary}</p>
|
||||
<p title={ item.summary }>{item.summary}</p>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|||
import KFIcon from '../../../components/KFIcon';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getProjectsLists, getSourceList, httpUrl } from '../../api';
|
||||
import { factoryZoneId, lessonId, versionId, toolId, commontoolId } from '../../../constants/factory'
|
||||
import { factoryZoneId, manualId, versionId, toolId, commontoolId } from '../../../constants/factory'
|
||||
import { downloadFunc } from '../../../forge/Utils/utils'
|
||||
import '../../common.scss'
|
||||
|
||||
|
|
@ -31,6 +31,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
const [resourceList2, setResourceList2] = useState([]);
|
||||
const [resourceList3, setResourceList3] = useState([]);
|
||||
const [resourceList4, setResourceList4] = useState([]);
|
||||
const [manualList, setManualList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!zoneId) return;
|
||||
|
|
@ -42,6 +43,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
setResourceList1(res.data.rows.slice(0, 6));
|
||||
}
|
||||
});
|
||||
getManualList()
|
||||
}, [zoneId]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -131,7 +133,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
|
||||
const getVersionList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: versionId }).then(res => {
|
||||
setResourceList2(res.data.rows.slice(0, 2));
|
||||
setResourceList2(res.data.rows.slice(0, 1));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -165,6 +167,20 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
});
|
||||
}
|
||||
|
||||
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-resource factory-module ${isVisible ? 'animate-active' : ''}`}
|
||||
|
|
@ -184,12 +200,26 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
{
|
||||
resourceList2.length > 0 && resourceList2.map((item, index) => {
|
||||
return <div className="content-item2" key={index}>
|
||||
<div className="item-name">{item.name}</div>
|
||||
<div className="item-desc">{item.summary}</div>
|
||||
<div className="item-name" title={ item.name }>{item.name}</div>
|
||||
<div className="item-desc" title={ item.summary }>{item.summary}</div>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>下载</button>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
{
|
||||
manualList.map((item, index) => {
|
||||
return <div className="content-item2" key={index}>
|
||||
<div className="item-name" title={ item.name }>{item.name}</div>
|
||||
<div className="item-desc" title={ item.summary }>{item.summary}</div>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>下载</button>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
<div className="content-item2">
|
||||
<div className="item-name">软件工厂源码</div>
|
||||
<div className="item-desc">软件工厂源码即将开放，敬请期待</div>
|
||||
<button >暂未开放</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,7 +252,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
}
|
||||
</div>
|
||||
}
|
||||
<div className="item-desc">{projectProperties.description}</div>
|
||||
<div className="item-desc" title={ projectProperties.description }>{projectProperties.description}</div>
|
||||
<div className="item-data">
|
||||
<span><i className="iconfont-factory icon-guanzhu mr5 font-12" />{projectProperties.forkedCount}</span>
|
||||
<span><i className="iconfont-factory icon-dianzan mr5 font-12" />{projectProperties.praisesCount}</span>
|
||||
|
|
@ -243,8 +273,8 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
{
|
||||
resourceList3.length > 0 && resourceList3.map((item, index) => {
|
||||
return <div className="content-item3" key={index}>
|
||||
<div className="item-name">{item.name}</div>
|
||||
<div className="item-desc">{item.summary}</div>
|
||||
<div className="item-name" title={ item.name }>{item.name}</div>
|
||||
<div className="item-desc" title={ item.summary }>{item.summary}</div>
|
||||
<div className="item-btn">
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>下载</button>
|
||||
|
|
@ -264,8 +294,8 @@ const Resource = forwardRef(({ zoneId }, ref) => {
|
|||
{
|
||||
resourceList4.length > 0 && resourceList4.map((item, index) => {
|
||||
return <div className="content-item3" key={index}>
|
||||
<div className="item-name">{item.name}</div>
|
||||
<div className="item-desc">{item.summary}</div>
|
||||
<div className="item-name" title={ item.name }>{item.name}</div>
|
||||
<div className="item-desc" title={ item.summary }>{item.summary}</div>
|
||||
<div className="item-btn">
|
||||
<Link to={`/softwareFactory/resource/developmentTools/${item.id}`}><button className="shiny-button">查看</button></Link>
|
||||
<button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>下载</button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import KFIcon from '../../../components/KFIcon';
|
|||
import back1 from '../../../images/factory/back1.png'
|
||||
import '../../common.scss'
|
||||
import { getSourceList, httpUrl } from '../../api';
|
||||
import { factoryZoneId, manualId, standardId, lessonId } from '../../../constants/factory'
|
||||
import { factoryZoneId, docId, standardId, lessonId, manualId } from '../../../constants/factory'
|
||||
import { downloadFunc } from '../../../forge/Utils/utils'
|
||||
import { Carousel } from 'antd';
|
||||
|
||||
|
|
@ -18,6 +18,7 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [standardList, setStandardList] = useState([]);
|
||||
const [manualList, setManualList] = useState([]);
|
||||
const [docList, setDocList] = useState([]);
|
||||
const [chapterList, setChapterList] = useState([]);
|
||||
const carouselEL = useRef(null);
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
|
@ -31,6 +32,7 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
}, { threshold: 0.1 });
|
||||
getStandard()
|
||||
getManualList()
|
||||
getDocList()
|
||||
getLessonList()
|
||||
|
||||
if (ref.current) {
|
||||
|
|
@ -63,7 +65,21 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
}
|
||||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||||
});
|
||||
setManualList(rows.slice(0, 2));
|
||||
setManualList(rows.slice(0, 3));
|
||||
});
|
||||
}
|
||||
|
||||
const getDocList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: docId }).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 })
|
||||
});
|
||||
setDocList(rows.slice(0, 2));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -112,8 +128,8 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
return <div className="left-item" key={index}>
|
||||
<img src={item.extendDataHeadImg || back1} alt="" />
|
||||
<div className="item-info">
|
||||
<h4>{item.name}</h4>
|
||||
<p>{item.summary}</p>
|
||||
<h4 title={ item.name }>{item.name}</h4>
|
||||
<p title={ item.summary }>{item.summary}</p>
|
||||
<button className="shiny-button" onClick={() => { window.open(item.extendDataUrl) }}>查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,8 +144,8 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
{manualList.map(item => {
|
||||
return <div className="standard-item">
|
||||
<div className="standard-info">
|
||||
<h3>{item.name}</h3>
|
||||
<p>{item.summary}</p>
|
||||
<h3 title={ item.name }>{item.name}</h3>
|
||||
<p title={ item.summary }>{item.summary}</p>
|
||||
<button className="shiny-button" onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>立即下载</button>
|
||||
</div>
|
||||
<img className="standard-img" src={item.extendDataHeadImg} alt="" />
|
||||
|
|
@ -142,14 +158,14 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
|
|||
<h3>文档资料</h3>
|
||||
<div className="manual-content">
|
||||
<ul>
|
||||
{manualList.map((item, index) => (
|
||||
{docList.map((item, index) => (
|
||||
<li key={index} className={`activity-item-v2 df activity-section-item ${current === index ? 'activity-section-item-active' : ''}`} onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>
|
||||
<span className="title-border-to-right-icon">{item.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Carousel autoplay ref={carouselEL} dots={false} afterChange={setCurrent}>
|
||||
{manualList.map(item => {
|
||||
{docList.map(item => {
|
||||
return <div className="manual-item">
|
||||
<img className="manual-img" src={item.extendDataHeadImg} alt="" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { getMainInfos } from './api'
|
|||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const info = {
|
||||
title: `软件工厂，助力菌用软件研发新时代`,
|
||||
title: `软件工厂，助力菌用软件敏捷迭代`,
|
||||
desc: '软件研发活动数字化转型，软件研发过程在线化协作，软件研发工具智能化升级',
|
||||
link: '/',
|
||||
forums: 'forums',
|
||||
|
|
|
|||
|
|
@ -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, manualId, standardId } from '../../constants/factory'
|
||||
import { factoryZoneId, lessonId, manualId, standardId, docId } from '../../constants/factory'
|
||||
import { Carousel } from 'antd';
|
||||
import back1 from '../../images/factory/back1.png'
|
||||
import back2 from '../../images/factory/back2.png'
|
||||
|
|
@ -36,6 +36,7 @@ function Index(props) {
|
|||
getLessonList();
|
||||
getStandardList();
|
||||
getManualList();
|
||||
getDocList();
|
||||
}, []);
|
||||
|
||||
const getLessonList = () => {
|
||||
|
|
@ -95,6 +96,20 @@ function Index(props) {
|
|||
});
|
||||
}
|
||||
|
||||
const getDocList = () => {
|
||||
getSourceList({ id: factoryZoneId, keywords: docId }).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 })
|
||||
});
|
||||
setDocList(rows.slice(0,6));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`lessons ${isVisible ? 'animate-active' : ''}`}>
|
||||
<img src={chapterBg} className="lessons-bg" alt="" />
|
||||
|
|
@ -264,14 +279,14 @@ function Index(props) {
|
|||
docList.map((item, index) => {
|
||||
return <div className="news-item" key={index}>
|
||||
<div className="news-item-img">
|
||||
<img src={item.headImg || getDefaultImage(item.id)} alt="" />
|
||||
<img src={item.extendDataHeadImg || backList[index % backList.length]} alt="" />
|
||||
</div>
|
||||
<div className="news-item-info">
|
||||
<Link to={`/softwareFactory/news/${item.id}`}><h3>{item.name}</h3></Link>
|
||||
<Link to={`/softwareFactory/lessons/${item.id}`}><h3>{item.name}</h3></Link>
|
||||
<p>{item.summary}</p>
|
||||
<div className="news-item-info-bottom">
|
||||
<span>{item.publishTime}</span>
|
||||
<Link to={`/softwareFactory/news/${item.id}`}>
|
||||
<span>{moment(item.createTime).format('YYYY/MM/DD')}</span>
|
||||
<Link to={`/softwareFactory/lessons/${item.id}`}>
|
||||
<span>查看详情</span>
|
||||
<KFIcon type="icon-icon_blackarrow_hover" font={40} />
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -652,10 +652,8 @@
|
|||
}
|
||||
|
||||
.manual {
|
||||
margin-top: -30px;
|
||||
width: 100%;
|
||||
height: 512px;
|
||||
background: linear-gradient(180.65deg, #ffffff -1.79%, #f1f6fd 98.12%);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -786,80 +784,137 @@
|
|||
}
|
||||
|
||||
.docs {
|
||||
.news-item {
|
||||
width: 48%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
h3 {
|
||||
color: #164ce4;
|
||||
}
|
||||
.docs-content {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 1600px;
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
left: 2px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 27px;
|
||||
.news-item {
|
||||
width: 787.5px;
|
||||
height: 260px;
|
||||
background: #f1f6fd;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 40px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
i {
|
||||
flex-shrink: 0;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&-img {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-radius: 14px;
|
||||
margin-right: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -21px;
|
||||
top: 4px;
|
||||
transition: top .2s ease-out, left .2s ease-out;
|
||||
img {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
transition: transform .4s cubic-bezier(.25, .46, .45, .94);
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h3 {
|
||||
line-height: 25px;
|
||||
font-family: alibaba;
|
||||
font-weight: 500;
|
||||
color: #091221;
|
||||
font-size: 22px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
p {
|
||||
margin-top: 15px;
|
||||
line-height: 30px;
|
||||
font-family: alibabareg;
|
||||
color: #091221;
|
||||
font-size: 15px;
|
||||
// 最多2行
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
a,
|
||||
span {
|
||||
transition: transform .4s cubic-bezier(.25, .46, .45, .94);
|
||||
}
|
||||
|
||||
a {
|
||||
span {
|
||||
margin-top: 14px;
|
||||
line-height: 25px;
|
||||
font-family: alibaba;
|
||||
font-weight: 500;
|
||||
color: #164ce4;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 4px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
line-height: 33px;
|
||||
font-family: alibaba;
|
||||
font-weight: 500;
|
||||
color: #091221;
|
||||
font-size: 22px;
|
||||
max-width: 670px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
h3 {
|
||||
color: #164ce4;
|
||||
}
|
||||
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.news-item-info-bottom {
|
||||
span {
|
||||
transform: translate(0, -30px);
|
||||
}
|
||||
|
||||
a {
|
||||
transform: translate(0, -30px);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 22px;
|
||||
line-height: 22px;
|
||||
font-family: alibabareg;
|
||||
color: #091221;
|
||||
font-size: 16px;
|
||||
max-width: 690px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 前两个
|
||||
&:nth-child(-n+2) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 45px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
// 最后两个
|
||||
&:nth-last-child(-n+2) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue