uos专区首页优化 fix #123152
This commit is contained in:
parent
8c1c9c3adb
commit
6a3333510d
|
|
@ -141,7 +141,7 @@ function HeaderPageJCC(props){
|
|||
</div>
|
||||
{
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage} alt="" width="600px" height="361px"/>
|
||||
<img src={data.introductionImage.split(",")[0]} alt="" width="600px" height="361px"/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ function HeaderPage(props){
|
|||
<p className="z_desc task-hide-2" style={{WebkitLineClamp:data.introductionTitle?"4":"7"}} dangerouslySetInnerHTML={{ __html: data.introductionContent }} ></p>
|
||||
</div>
|
||||
{
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage} alt="" width="300px"/>
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage.split(",")[0]} alt="" width="300px"/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@ function HeaderPageCCF(props) {
|
|||
</div>
|
||||
{
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage} alt="" width="300px" />
|
||||
<img src={data.introductionImage.split(",")[0]} alt="" width="300px" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React , { useEffect, useState } from 'react';
|
||||
import { getZoneStatistics } from '../../../api';
|
||||
import '../index.scss';
|
||||
import { Carousel } from 'antd';
|
||||
|
||||
// 专区简介，文字在左，图在右
|
||||
// statistics: 是否展示统计区域
|
||||
|
|
@ -28,9 +29,13 @@ function Introduction({data, statistics=true}) {
|
|||
{firstTitle}
|
||||
<span className='firstTitle_back font-34'>ABOUT US</span>
|
||||
</div>
|
||||
<div>
|
||||
{introductionImage && <img src={introductionImage} alt="" width="526px" align="right" hspace="35" vspace="10"/>}
|
||||
{introductionContent && <span dangerouslySetInnerHTML={{ __html: introductionContent }} className='font-16' style={{lineHeight: '40px'}}></span>}
|
||||
<div className='clearfix'>
|
||||
{introductionImage && <Carousel className='intro_1_carousel zone_1_carousel' autoplay={true}>
|
||||
{introductionImage.split(",").map((item, index) => {
|
||||
return <img key={index} src={item} alt="" className='intro_image'/>;
|
||||
})}
|
||||
</Carousel>}
|
||||
{introductionContent && <span dangerouslySetInnerHTML={{ __html: introductionContent }} className='font-16 intro_1_I' style={{lineHeight: '40px'}}></span>}
|
||||
</div>
|
||||
{statistics && <div className='df wrap pt50 between width1200'>
|
||||
{Object.keys(label).map(item=>{
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ function News({data, subTitle, firstDirIntro, secondDirIntro}) {
|
|||
{/* 第一个顺序栏目 */}
|
||||
{firstDir && <div className='firstDir clearfix'>
|
||||
<p className='font-16 task-hide'>
|
||||
{firstDir.name}
|
||||
<Link style={{color: 'white'}} to={`/zone/uos/news/${firstDir.id}`} onClick={()=>{window.scrollTo(0,450)}}>{firstDir.name}</Link>
|
||||
<Link style={{color: 'white'}} className='fr font-15' to={`/zone/uos/news/${firstDir.id}`} onClick={()=>{window.scrollTo(0,450)}}>更多<Icon type="arrow-right" className="ml5"/></Link>
|
||||
</p>
|
||||
<div style={{fontFamily:"FangSong", height: 200}} className='font-24 ml85 mr80 flexCenter font-bd'>{firstDirIntro}</div>
|
||||
|
|
@ -147,7 +147,9 @@ function News({data, subTitle, firstDirIntro, secondDirIntro}) {
|
|||
<img src={dirpng}/>
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-17 font-bd task-hide'>{secondDir.name}</p>
|
||||
<p className='font-17 font-bd task-hide'>
|
||||
<Link to={`/zone/uos/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}}>{secondDir.name}</Link>
|
||||
</p>
|
||||
<p className='color627'>{secondDirIntro}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,7 +166,7 @@ function News({data, subTitle, firstDirIntro, secondDirIntro}) {
|
|||
</Row>
|
||||
</div>}
|
||||
</div>
|
||||
{dirs && !!dirs.length && <div className='df wrap backWhite pt15 pb15 pl10 pr10'>
|
||||
{dirs && !!dirs.length && <div className='df wrap backWhite pt30 pb15 pl10 pr10'>
|
||||
{renderItems()}
|
||||
</div>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,43 @@ import '../index.scss';
|
|||
import { getProjectListByScore, getProjectsTypeLists } from '../../../api';
|
||||
import { Carousel, Divider, Spin } from 'antd';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import Slider from 'react-slick';
|
||||
|
||||
export function TypeCarousel({pageSize=4, list=[], typeId, onClick}) {
|
||||
const setting = {
|
||||
prevArrow: <img src={require('../image/left.png')} alt=''/>,
|
||||
nextArrow: <img src={require('../image/right.png')} alt=''/>,
|
||||
afterChange: (currentSlide)=>{onClick(list[currentSlide*pageSize].id)}
|
||||
}
|
||||
const pages = []
|
||||
for (let i = 0; i < Math.ceil(list.length / pageSize); i++) {
|
||||
const start = i * pageSize;
|
||||
const end = start + pageSize;
|
||||
pages.push(list.slice(start, end));
|
||||
}
|
||||
return <Slider {...setting} className='mb60'>
|
||||
{pages.map((page, index)=>{
|
||||
return <div key={index}>
|
||||
<div className='flexCenter align'>
|
||||
{page.map((item, i) => {
|
||||
const order = index*pageSize+i
|
||||
return <div key={i} className={`proTypeBox flexCenter ml15 mr15 pl10 pr10 pointer ${typeId === item.id && "active"}`} onClick={() => { onClick(item.id) }}>
|
||||
{/* 项目 */}
|
||||
<span className={`p_1_icon icon${i} mr5`}></span>
|
||||
{/* 专项项目 */}
|
||||
<span className={`s_p_order font-25 mr10 color-blue`}>
|
||||
<span className='s_p_order_1'>{order < 9 ? `0${order+1}` : order+1}</span>
|
||||
<span className={`s_p_order_icon s_p_order_icon${i}`}></span>
|
||||
<img src={require('../image/s_project3.png')} width="18"/>
|
||||
</span>
|
||||
<span className='font-17 font-bd task-hide' title={item.name}>{item.name}</span>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</Slider>
|
||||
}
|
||||
|
||||
function Project({ data, subTitle }) {
|
||||
const { id, homepageProjectTitle } = data || {};
|
||||
|
|
@ -15,7 +52,10 @@ function Project({ data, subTitle }) {
|
|||
const pages = [];
|
||||
|
||||
useEffect(() => {
|
||||
id && getProjectsTypeLists(id).then(result => {
|
||||
id && getProjectsTypeLists(id, {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
}).then(result => {
|
||||
if (result) {
|
||||
const rows = result.data.rows;
|
||||
rows[0] && setTypeId(rows[0].id)
|
||||
|
|
@ -52,19 +92,12 @@ function Project({ data, subTitle }) {
|
|||
<div className='project_1 width1200 pt50 pb60'>
|
||||
<p className='font-bd font-30 mb15 align task-hide'>{homepageProjectTitle}</p>
|
||||
<p className='font-16 align color212 mb30'>{subTitle}</p>
|
||||
<div className='flexCenter align'>
|
||||
{typeList.slice(0, 3).map((item, index) => {
|
||||
return <div className={`proTypeBox flexCenter font-17 mr30 pointer ${typeId === item.id && "active"}`} onClick={() => { setTypeId(item.id); setPage(1) }}>
|
||||
<span className={`icon${index} mr5`}></span>
|
||||
{item.name}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<TypeCarousel pageSize={5} list={typeList} typeId={typeId} onClick={(id)=>{setTypeId(id); setPage(1)}}/>
|
||||
<Spin spinning={loading}>
|
||||
<Carousel className='zone_1_carousel' afterChange={(current)=>{setLoading(true);setPage(current+1)}}>
|
||||
{pages.map((page1, index) => (
|
||||
<div key={index}>
|
||||
<div className='df wrap between mt60 pl10 pr10 mb25'>
|
||||
<div className='df wrap between pl10 pr10 mb25'>
|
||||
{lists.map((i, index) => {
|
||||
const { extra: { commitCount, contributorsCount, lastWeekScore, scoreChange } } = i || {}
|
||||
const order = page >= 2 ? (page-1)*6+index+1 : index+1;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { getSpecialProjectDetail, getSpecialProjectList, getSpecialProjectTypeLi
|
|||
import { Col, Divider, Row, Tag } from 'antd';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import '../index.scss';
|
||||
import { TypeCarousel } from './project';
|
||||
|
||||
function SpecialProjects({data, subTitle}) {
|
||||
const {key, homepageSpecialProjectTitle, id} = data || {};
|
||||
|
|
@ -15,7 +16,7 @@ function SpecialProjects({data, subTitle}) {
|
|||
useEffect(()=>{
|
||||
id && getSpecialProjectTypeList(id, {
|
||||
pageNum: 1,
|
||||
pageSize: 4,
|
||||
pageSize: 100,
|
||||
}).then(res=>{
|
||||
if(res){
|
||||
const rows = res.data.rows;
|
||||
|
|
@ -120,13 +121,13 @@ function SpecialProjects({data, subTitle}) {
|
|||
currentRow.push(
|
||||
<div
|
||||
key={item.id}
|
||||
className={`s_p_detail ${selectedItem === item.id ? 'active' : ''}`}
|
||||
className={`s_p_detail df between ${selectedItem === item.id ? 'active' : ''}`}
|
||||
onClick={() => handleItemClick(item.id)}
|
||||
>
|
||||
<span className={`font-bd font-22 s_p_d_order align s_p_d_order${index+1}`}>{index+1}</span>
|
||||
<div className='font-bd font-17 task-hide-2 mb5'>{item.name}</div>
|
||||
<div className='task-hide-2 color6B7' style={{minHeight: '56px'}}>摘要：{item.description}</div>
|
||||
<p style={{color: '#75798A'}} className='mt3'><i className='iconfont icon-chengyuan2 font-15 mr5'></i>{item.projectLeader}</p>
|
||||
<div className='task-hide-2 color6B7'>摘要：{item.description}</div>
|
||||
<p style={{color: '#75798A'}} className='mt6'><i className='iconfont icon-chengyuan2 font-15 mr5'></i>{item.projectLeader}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -171,18 +172,7 @@ function SpecialProjects({data, subTitle}) {
|
|||
<div className='specialProjects_1 width1200 pt50 pb60'>
|
||||
<p className='font-bd font-30 mb15 align task-hide'>{homepageSpecialProjectTitle}</p>
|
||||
<p className='font-16 align color212 mb50'>{subTitle}</p>
|
||||
<div className='flexCenter align mb50'>
|
||||
{typeList.map((item, index)=>{
|
||||
return <div className={`proTypeBox flexCenter mr30 color212 pointer pl5 pr5 ${typeId === item.id && "active"}`} onClick={()=>{setTypeId(item.id)}}>
|
||||
<span className={`s_p_order font-25 mr10 color-blue`}>
|
||||
<span className='s_p_order_1'>{index < 9 ? `0${index+1}` : index+1}</span>
|
||||
<span className={`s_p_order_icon s_p_order_icon${index}`}></span>
|
||||
<img src={require('../image/s_project3.png')} width="18"/>
|
||||
</span>
|
||||
<span className='font-17 font-bd task-hide'>{item.name}</span>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<TypeCarousel pageSize={3} list={typeList} typeId={typeId} onClick={(id)=>{setTypeId(id);}}/>
|
||||
<div className='df wrap between'>
|
||||
{renderItems()}
|
||||
<div style={{margin: '0 auto'}}>{!projectList.length && <Nodata _html="暂无数据"/>}</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 922 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -65,6 +65,20 @@
|
|||
color: #D9D9D9;
|
||||
}
|
||||
}
|
||||
.intro_1_carousel{
|
||||
width: 526px;
|
||||
float: right;
|
||||
margin-left: 35px;
|
||||
.slick-dots li button:before{
|
||||
font-size: 10px;
|
||||
top: -12px;
|
||||
}
|
||||
}
|
||||
.intro_image{
|
||||
width: 526px;
|
||||
height: 272px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
}
|
||||
.news_1_bg{
|
||||
background-image: url('./image/new1.png');
|
||||
|
|
@ -186,7 +200,7 @@
|
|||
}
|
||||
}
|
||||
.project_1_bg .proTypeBox, .specialProjects_1_bg .proTypeBox{
|
||||
width: 280px;
|
||||
min-width: 275px;
|
||||
height: 63px;
|
||||
background: #F5F6F7;
|
||||
border-radius: 8px;
|
||||
|
|
@ -207,6 +221,12 @@
|
|||
.icon2{
|
||||
background-image: url('./image/proType3_active.png');
|
||||
}
|
||||
.icon3{
|
||||
background-image: url('./image/proType4_active.png');
|
||||
}
|
||||
.icon4{
|
||||
background-image: url('./image/proType5_active.png');
|
||||
}
|
||||
.s_p_order_1, .s_p_order>img{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -225,7 +245,7 @@
|
|||
background-image: url('./image/s_project7.png');
|
||||
}
|
||||
}
|
||||
.icon1, .s_p_order_icon, .icon0, .icon2{
|
||||
.s_p_order_icon, .p_1_icon{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -239,12 +259,30 @@
|
|||
background-image: url('./image/proType2.png');
|
||||
}
|
||||
.icon2{
|
||||
width: 25px;
|
||||
height: 19px;
|
||||
height: 18px;
|
||||
background-image: url('./image/proType3.png');
|
||||
}
|
||||
.icon3{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url('./image/proType4.png');
|
||||
}
|
||||
.icon4{
|
||||
background-image: url('./image/proType5.png');
|
||||
}
|
||||
|
||||
}
|
||||
.project_1_bg .proTypeBox{
|
||||
min-width:200px;
|
||||
.s_p_order{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.specialProjects_1_bg .proTypeBox{
|
||||
.p_1_icon{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.source_1_bg{
|
||||
background-color: white;
|
||||
background-image: url('./image/source1.png');
|
||||
|
|
@ -350,6 +388,7 @@
|
|||
margin: 0 0 35px 0 !important;
|
||||
}
|
||||
.s_p_detail{
|
||||
flex-direction: column;
|
||||
flex: 0 0 calc(33.333% - 20px);
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 10px 1px rgba(28,48,175,0.08);
|
||||
|
|
|
|||
Loading…
Reference in New Issue