liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6.27 修改

Browse Source
This commit is contained in:
jl-zhoujl2
2022-06-27 15:22:15 +08:00
parent f17ebf9c5d
commit 39fc4276ec
9 changed files with 118 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/topic/topic_activity_default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 KiB

BIN
src/assets/topic/topic_activity_default2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/topic/topic_banner_default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

18
src/pages/PartyMemberTopic/ActivityStyle/index.tsx
View File

@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react';
import '../Style/ld_style.less';
import { Input, List, Pagination } from 'antd';
import list_pic from '@/assets/topic/listNewsPic01.jpg'
import topic_activity_default2 from '@/assets/topic/topic_activity_default2.jpg'
import time_icon from '@/assets/topic/timeIcon.png'
import { getGracefulList } from './service';
import { getImageUrl } from '../utils';
import { formatTime, getImageUrl } from '../utils';
import { history } from 'umi';
const { Search } = Input;
@ -41,7 +41,7 @@ const PersonInfor: React.FC<{}> = () => {
const getGracefulData = () => {
getGracefulList().then(async res => {
if (res?.code == 200) {
const data = await getImageUrl(res?.data, 'image');
const data = await getImageUrl(res?.data, 'image', topic_activity_default2);
setGracefulList(data);
}
})
@ -75,7 +75,7 @@ const PersonInfor: React.FC<{}> = () => {
<span className="text"><span>活动风采</span></span>
<div className="search-box">
<Search
placeholder="输入姓名/邮箱/电话"
placeholder="输入标题"
allowClear
enterButton="搜索"
style={{ width: 322 }}
@ -86,10 +86,9 @@ const PersonInfor: React.FC<{}> = () => {
<List
itemLayout="horizontal"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 2,
size: 'small',
showTotal: (total) => `共 ${total} 条`,
pageSize: 10,
}}
dataSource={gracefulList}
renderItem={item => (
@ -98,13 +97,12 @@ const PersonInfor: React.FC<{}> = () => {
<img src={item.imageUrl} />
<p className="tit" onClick={() => clickTitle(item)}>{item.title}</p>
<p className="detail">{item.content}</p>
<span className="time"><img src={time_icon} />{item.sendTime}</span>
<span className="time"><img src={time_icon} />{item.createTime}</span>
</div>
</List.Item>
)}
/>
</div>
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
</div>
)
}

54
src/pages/PartyMemberTopic/Home/index.less
View File

@ -35,11 +35,11 @@
align-items: flex-end;
.carousel-textbg {
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
width: 100%;
padding: 12px 0px 32px;
padding: 50px 0;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), no-repeat center;
.carousel-text {
color: #fff;
@ -48,12 +48,18 @@
.carousel-text-content {
font-weight: bold;
font-size: 32px;
line-height: 36px;
line-height: 40px;
}
.carousel-text-click {
font-size: 14px;
margin-left: 10px;
cursor: pointer;
}
.carousel-text-click:hover {
color: #fff;
text-decoration: underline;
}
}
}
@ -66,6 +72,7 @@
.left-activity {
height: 103px;
width: 1139px;
background-image: url("~@/assets/topic/topic_activity_gradient.jpg");
display: flex;
justify-content: left;
@ -127,7 +134,7 @@
}
.left-card-other:hover {
color: #369;
color: #a81c0c;
text-decoration: underline;
}
@ -155,6 +162,7 @@
justify-content: center;
align-items: flex-end;
padding-bottom: 10px;
cursor: pointer;
.left-graceful-textbg {
height: 36px;
@ -171,6 +179,11 @@
}
}
}
.left-graceful-bg:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
}
.left-project {
@ -195,7 +208,7 @@
}
.left-project-content-item-title:hover {
color: #369;
color: #a81c0c;
text-decoration: underline;
}
@ -266,7 +279,7 @@
letter-spacing: 1px;
.right-display-content-percentage {
margin-left: 18px;
margin-left: 12px;
.right-display-content-percentage-increase {
color: #28e099;
@ -367,7 +380,7 @@
}
.left-card-other:hover {
color: #369;
color: #a81c0c;
text-decoration: underline;
}
@ -399,11 +412,24 @@
.bottom-card-title {
font-size: 21px;
font-weight: bold;
.bottom-card-title-type {
color: #df3b37;
}
width: 189px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bottom-card-title .bottom-card-title-type {
color: #df3b37;
}
}
.bottom-card-flex img {
cursor: pointer;
}
.bottom-card-flex img:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
.bottom-card-content {
@ -429,6 +455,12 @@
font-family: '黑体';
font-size: 18px;
color: #a2a2a2;
cursor: pointer;
}
.bottom-other-text:hover {
color: #a81c0c;
text-decoration: underline;
}
.bottom-other-icon {

65
src/pages/PartyMemberTopic/Home/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin } from 'antd';
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin, Tooltip } from 'antd';
import * as echarts from 'echarts';
import Marquee from 'react-fast-marquee';
import topic_header from '@/assets/topic/topic_header.jpg'
@ -17,6 +17,8 @@ import topic_totalnumber from '@/assets/topic/topic_totalnumber.png'
import topic_commodity from '@/assets/topic/topic_commodity.png'
import topic_protocol from '@/assets/topic/topic_protocol.png'
import topic_header_img from '@/assets/topic/topic_header_img.png'
import topic_banner_default from '@/assets/topic/topic_banner_default.jpg'
import topic_activity_default from '@/assets/topic/topic_activity_default.jpg'
import { getHomeActivity, getHomeBanner, getHomeContact, getHomeGraceful, getHomeProject, getHomeRight, submitAdvice } from './service';
import { formatTime, getImageUrl } from '../utils';
@ -28,10 +30,10 @@ const LeftCardTop = (props: any) => {
<span className='left-card-title'>{props.title}</span>
<img src={topic_red_flag} className='left-card-flag' />
</div>
<div onClick={() => window.open(props.url)}>
{props.url && <div onClick={() => window.open(props.url)}>
<span className='left-card-other'>更多</span>
<img src={topic_other} className='left-card-otherimg' />
</div>
</div>}
</div>
<Divider className='left-card-divider' />
</>
@ -92,7 +94,7 @@ const RightGraphContent = (props: any) => {
data: props.data,
label: {
formatter: props.type != null ? `{b}\n\n{c}${props.type} {d}%` : '{b}',
fontSize: 12,
fontSize: 14,
color: '#fff',
position: 'inner',
},
@ -120,8 +122,11 @@ const BottomCardContent = (props: any) => {
<div className='bottom-card'>
<div className='bottom-card-flex'>
<div className='bottom-card-title'>
<span>{props.data.contactName}</span>
<span className='bottom-card-title-type'>({props.data.contactName})</span>
<Tooltip placement="topLeft" title={`${props.data.remark} ${props.data.contactName}`}>
<span>{props.data.contactName}</span>
<span className='bottom-card-title-type'>({props.data.remark})</span>
</Tooltip>
</div>
<img src={topic_bottom_button} onClick={() => props.onClick()} />
</div>
@ -208,9 +213,11 @@ const CommentModal = (props: any) => {
</Radio.Group>
</div>
<TextArea
rows={9}
rows={6}
className='bottom-modal-textarea'
maxLength={200}
maxLength={50}
allowClear
showCount
defaultValue={''}
onChange={onTextChange}
placeholder="在这里输入我要提出的意见"
@ -240,8 +247,10 @@ const Home: React.FC<{}> = () => {
const [rightList, setRightList] = useState<any[]>([]);
//right data
const [rightGraphList, setRightGraphList] = useState<any[]>([]);
//right data
const [contactData, setContactData] = useState<Object>({});
//right local data
const [contactData, setContactData] = useState<any[]>([]);
//right total data
const totalContactData = useRef<any>(null);
//bottom advice modalvisible
const [adviceVisible, setAdviceVisible] = useState<boolean>(false);
//bottom advice modal data
@ -261,7 +270,7 @@ const Home: React.FC<{}> = () => {
const getBannerList = () => {
getHomeBanner().then(async res => {
if (res?.code == 200) {
const data = await getImageUrl(res?.data, 'titleImage');
const data = await getImageUrl(res?.data, 'titleImage', topic_banner_default);
setBannerList(data);
}
})
@ -282,9 +291,9 @@ const Home: React.FC<{}> = () => {
if (res?.code == 200) {
let data: any[] = [];
if (res?.data.length > 6) {
data = await getImageUrl(res?.data.slice(0, 6), 'image');
data = await getImageUrl(res?.data.slice(0, 6), 'image', topic_activity_default);
} else {
data = await getImageUrl(res?.data, 'image');
data = await getImageUrl(res?.data, 'image', topic_activity_default);
}
setGracefulList(data);
}
@ -322,7 +331,13 @@ const Home: React.FC<{}> = () => {
const getContactList = () => {
getHomeContact().then(res => {
if (res?.code == 200) {
setContactData(res?.data);
const data = Object.entries(res?.data);
if (data.length > 3) {
setContactData(data.slice(0, 6));
totalContactData.current = data;
} else {
setContactData(data);
}
}
})
}
@ -381,10 +396,10 @@ const Home: React.FC<{}> = () => {
<span className='left-activity-scroll-name'>{item.name}：</span>
<span>{item.text}</span>
</div>
{index != activityList.length && (
{(index != activityList.length - 1) && (
<div className='left-activity-scroll-end'>
<span className='left-activity-scroll-name'>{activityList[index + 1].name}：</span>
<span>{activityList[index + 1].text}</span>
<span className='left-activity-scroll-name'>{activityList[index + 1]?.name}：</span>
<span>{activityList[index + 1]?.text}</span>
</div>
)}
</div>
@ -468,8 +483,8 @@ const Home: React.FC<{}> = () => {
</div>
</div>
<div className='bottom-global'>
<LeftCardTop title="活动联系人" url="" />
{Object.entries(contactData).map(([name, value], index) => (
<LeftCardTop title="活动联系人" />
{contactData.length > 0 && contactData.map(([name, value], index) => (
<div key={index}>
<div className='bottom-title'>{name}</div>
<div className='bottom-content'>
@ -481,12 +496,14 @@ const Home: React.FC<{}> = () => {
</div>
</div>
))}
<div className='bottom-other'>
<div>
<span className='bottom-other-text'>更多</span>
<img src={topic_other} className='bottom-other-icon' />
{totalContactData.current != null && (
<div className='bottom-other'>
<div>
<span className='bottom-other-text'>更多</span>
<img src={topic_other} className='bottom-other-icon' />
</div>
</div>
</div>
)}
</div>
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
</div>

10
src/pages/PartyMemberTopic/OverDifficult/index.tsx
View File

@ -88,7 +88,7 @@ const PersonInfor: React.FC<{}> = () => {
<span className="text"><span>攻坚克难项目</span></span>
<div className="search-box">
<Search
placeholder="输入姓名/邮箱/电话"
placeholder="输入标题"
allowClear
enterButton="搜索"
style={{ width: 322 }}
@ -99,10 +99,9 @@ const PersonInfor: React.FC<{}> = () => {
<List
itemLayout="horizontal"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 2,
size: 'small',
showTotal: (total) => `共 ${total} 条`,
pageSize: 10,
}}
dataSource={projectList}
renderItem={item => (
@ -115,7 +114,6 @@ const PersonInfor: React.FC<{}> = () => {
)}
/>
</div>
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
</div>
)
}

15
src/pages/PartyMemberTopic/Style/ld_style.less
View File

@ -223,7 +223,7 @@
}
p:hover {
color: #369;
color: #a81c0c;
text-decoration: underline;
}
}
@ -252,6 +252,12 @@
font-size: 18px;
color: #333;
font-weight: 600;
cursor: pointer;
}
.tit:hover {
color: #a81c0c;
text-decoration: underline;
}
.detail {
@ -266,11 +272,12 @@
bottom: 0;
color: #666;
font-size: 16px;
line-height: 20px;
img {
position: absolute;
bottom: 3px;
right: 80px;
// position: absolute;
// bottom: 3px;
// right: 80px;
width: 20px;
height: 20px;
margin-right: 8px;

18
src/pages/PartyMemberTopic/utils.ts
View File

@ -7,14 +7,18 @@ import moment from "moment";
* @param paramName 字段名
* @returns
*/
export const getImageUrl = async (data: any[], paramName: string) => {
export const getImageUrl = async (data: any[], paramName: string, defaultImg: React.ImgHTMLAttributes<HTMLImageElement>) => {
for (const ite of data) {
await getFilelist([ite[paramName]]).then(response => {//获取主图
if (response?.success && response?.data?.length > 0) {
const returnUrl = window.location.origin + pictureDisplayPath + '?filePath=' + response?.data[0].filePath;
ite["imageUrl"] = returnUrl;
}
})
await getFilelist([ite[paramName]])
.then(response => {//获取主图
if (response?.success && response?.data?.length > 0) {
const returnUrl = window.location.origin + pictureDisplayPath + '?filePath=' + response?.data[0].filePath;
ite["imageUrl"] = returnUrl;
}
})
.catch(error => {
ite["imageUrl"] = defaultImg;
})
}
return data;
}