6.27 修改
This commit is contained in:
jl-zhoujl2
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user