Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

修改样式等

This commit is contained in:
何童崇 2022-03-30 16:07:28 +08:00
parent 4047f08663
commit 7ca0af877e
9 changed files with 146 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/military/qz2022.js
View File

@ -101,8 +101,6 @@ const Qz2022 = (props) => {
referStatus = !applyStatus && Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date));
}
console.log(qzDetail);
return (
<React.Fragment>
{/* banner图+选项 */}

5
src/military/qz2022/chat/index.jsx
View File

@ -1,5 +1,6 @@
import React from "react";
import chatSvg from "../image/chat.svg";
// import chatSvg from "../image/chat.svg";
import chatBanner from '../image/chat_banner.png';
import btn from "../image/btn-right.png";
import './index.scss';
import '../../index.scss';
@ -10,7 +11,7 @@ function Chat({ form, showNotification, match, history }) {
return (
<div className="chat-bg">
<div className="chat qz_main clearfix">
<img className="chat-left" src={chatSvg} ></img>
<img className="chat-left" src={chatBanner} ></img>
<div className="chat-words">
<div className="chat-tit">交流互动</div>
<div className="chat-content">

16
src/military/qz2022/contact/index.jsx
View File

@ -9,21 +9,13 @@ function Contact({ aboutUs }) {
return (
<div className="contact-bg">
<div className="contact qz_main clearfix">
<div className="contact-top">
<img className="contact-png" src={contactPng} ></img>
<div className="contact-tit">联系我们</div>
</div>
<div className="contact qz_main">
<div className="contact-words">
<div className="contact-content" dangerouslySetInnerHTML={{ __html: aboutUs }}>
</div>
{/* <p>主办方：JWJWJW联合参谋部、科学技术委员会</p>
<p>协办方：军事科学院、航天科技集团</p> */}
{/* <div className="contact-content">
<p>地址：北京市海淀区西三环北路72号</p>
<p>Email：osredm@163.com</p>
<p>电话：+86-010-66357650</p>
</div> */}
</div>
<div className="contact-png">
<img src={contactPng} ></img>
</div>
</div>
</div>

17
src/military/qz2022/contact/index.scss
View File

@ -5,13 +5,18 @@
}
.contact {
margin: 0 auto;
padding: 1rem 1.5rem;
padding: 3rem;
background: #fff;
.contact-top{
position: relative;
}
display: flex;
justify-content: space-between;
.contact-png{
width: 100%;
width: 55%;
margin-left:1rem;
img{
width: 100%;
}
}
.contact-tit{
@ -24,7 +29,7 @@
font-weight: 700;
}
.contact-words {
padding: 1.5rem;
max-width: 45%;
}
.contact-content {

BIN
src/military/qz2022/image/chat_banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

BIN
src/military/qz2022/image/contact.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 688 KiB

After

Width:  |  Height:  |  Size: 281 KiB

5
src/military/qz2022/introduce/index.jsx
View File

@ -8,14 +8,17 @@ function Introduce({ qzDetail }) {
let content= qzDetail&&qzDetail.content;
let video_url= qzDetail&&qzDetail.video_url;
console.log(qzDetail);
return (
<div className="introduce">
<div className="introduce-content clearfix">
<div className="introduce-video"><video src={video_url} autoPlay controls muted></video></div>
<div className="introduce-info">
<<<<<<< HEAD
<<<<<<< HEAD
<div className="info-tit">“启智”2022作战概念·JSJSJS需求创新大赛</div>
=======
<div className="info-tit">“启智-2022”作战概念·JSJSJS需求创新大赛</div>
>>>>>>> 2805cd0d (修改样式等)
<div className="info-content" dangerouslySetInnerHTML={{ __html:content}}>
</div>
=======

327
src/military/qz2022/statistics/EchartBar/index.jsx
View File

@ -14,8 +14,8 @@ if (clientWidth < 1000) {
}
let fontSizeTitle = 1.25 * fontSizeText;
const colorArr0 = ['rgba(226, 217, 255, 1)', 'rgba(251, 201, 0, 0.36)', 'rgba(145, 193, 255, 0.61)'];
const colorArr1 = ['rgba(155, 128, 245, 1)', 'rgba(254, 140, 0, 1)', 'rgba(37, 109, 255, 1)'];
const colorArr0 = ['rgba(226, 217, 255, 1)', 'rgba(254, 230, 147, 1)', 'rgba(187, 217, 255, 1)'];
const colorArr1 = ['rgba(189, 170, 255, 1)', 'rgba(251, 184, 103, 1)', 'rgba(112, 159, 255, 1)'];
export default ({ id, className, title, legendArr, xData, yData }) => {
@ -24,181 +24,62 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
let textColor = "#7988a5";
let normalColor = "#e8e8ed";
// var colors = [
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#218bd1'
// }, {
// offset: 0.5,
// color: '#7EC3F0'
// }, {
// offset: 0.5,
// color: '#1985cd'
// }, {
// offset: 1,
// color: '#1985cd'
// }]
// },
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#6DD4E5'
// }, {
// offset: 0.5,
// color: '#6DD4E5'
// }, {
// offset: 0.5,
// color: '#0EADC9'
// }, {
// offset: 1,
// color: '#218bd1'
// }]
// },
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#acace6'
// }, {
// offset: 0.5,
// color: '#acace6'
// }, {
// offset: 0.5,
// color: '#6161bd'
// }, {
// offset: 1,
// color: '#6161bd'
// }]
// }
let colors = [
{
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{
offset: 0,
color: colorArr0[0]//'#218bd1'
}, {
offset: 0.5,
color: colorArr0[0]//'#7EC3F0'
}, {
offset: 0.5,
color: colorArr1[0]// '#1985cd'
}, {
offset: 1,
color: colorArr0[0]//'#1985cd'
}]
},
{
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{
offset: 0,
color: colorArr0[1]//'#6DD4E5'
}, {
offset: 0.5,
color: colorArr0[1]//'#6DD4E5'
}, {
offset: 0.5,
color: colorArr1[1]//'#0EADC9'
}, {
offset: 1,
color: colorArr0[1]//'#218bd1'
}]
},
{
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{
offset: 0,
color: colorArr0[2]//'#acace6'
}, {
offset: 0.5,
color: colorArr0[2]//'#acace6'
}, {
offset: 0.5,
color: colorArr1[2]//'#6161bd'
}, {
offset: 1,
color: colorArr0[2]//'#6161bd'
}]
}
];
// ];
// var barWidth = 35;
// let option = {
// title: {
// text: 'Awesome Chart'
// },
// xAxis: {
// data: ['Sun', 'Mon', 'Tue']
// },
// legend: {
// data: ['高一', '高二', '高三'],
// textStyle: {
// color: 'white', //坐标的字体颜色
// },
// },
// tooltip: {
// trigger: 'axis',
// formatter: function (params) {
// // let paramsData=params.filter(i=>{return i.seriesType==='bar'})
// // console.log(paramsData);
// // // return (
// // // )
// return params.filter(i => { return i.seriesType === 'bar' });
// }
// },
// yAxis: {},
// series: [
// {
// z: 1,
// name: '高一',
// type: 'bar',
// barWidth: barWidth,
// data: [320, 200, 260],
// itemStyle: {
// normal: {
// color: colors[0]
// }
// },
// }
// ,
// {
// z: 3,
// name: '左上部1',
// type: 'pictorialBar',
// symbolPosition: 'end',
// data: [320, 200, 260],
// symbol: 'diamond',
// symbolOffset: ['-150%', '-50%'],
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
// itemStyle: {
// normal: {
// borderColor: '#218bd1',
// borderWidth: 2,
// color: '#218bd1'
// }
// },
// },
// {
// z: 1,
// name: '高二',
// type: 'bar',
// barWidth: barWidth,
// data: [170, 182, 191],
// itemStyle: {
// normal: {
// color: colors[1]
// }
// },
// }
// ,
// {
// z: 3,
// name: '中上部1',
// type: 'pictorialBar',
// symbolPosition: 'end',
// data: [170, 182, 191],
// symbol: 'diamond',
// symbolOffset: ['0%', '-50%'],
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
// itemStyle: {
// normal: {
// borderColor: '#2edaf8',
// borderWidth: 2,
// color: '#2edaf8'
// }
// },
// },
// {
// z: 1,
// type: 'bar',
// name: '高三',
// barWidth: barWidth,
// data: [220, 182, 191],
// itemStyle: {
// normal: {
// color: colors[2]
// }
// },
// },
// {
// z: 3,
// name: '右上部1',
// type: 'pictorialBar',
// symbolPosition: 'end',
// data: [220, 182, 191],
// symbol: 'diamond',
// symbolOffset: ['145%', '-50%'],
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
// itemStyle: {
// normal: {
// borderColor: '#7b7be1',
// borderWidth: 2,
// color: '#7b7be1'
// }
// },
// },
// ]
// };
let barWidth = 25;
let option = {
grid: {
@ -231,6 +112,28 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
backgroundColor: 'rgba(255,255,255,0.8)',
textStyle: {
color: "#333"
},
formatter: function (params) {
let paramsData = params.filter(i => { return i.seriesType === 'bar' });
// console.log(params);
return (
paramsData[0].name +
'<br/>' +
paramsData[0].marker +
paramsData[0].seriesName +
'：' +
paramsData[0].value +
'<br/>' +
paramsData[1].marker +
paramsData[1].seriesName +
'：' +
paramsData[1].value +
'<br/>' +
paramsData[2].marker +
paramsData[2].seriesName +
'：' +
paramsData[2].value
)
}
},
legend: {
@ -290,6 +193,7 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
show: false
},
splitLine: {
// show: false,
lineStyle: {
color: normalColor,
type: 'dotted',
@ -300,47 +204,56 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
};
yData.forEach((data, i) => {
option.series.push({
z: 1,
name: legendArr[i],
type: "bar",
data: data,
barWidth: "20%",
// itemStyle: {
// normal: {
// color: colors[i]
// }
// },
index: i,
data,
barWidth: barWidth,
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr0[i],
},
{
offset: 1,
color: colorArr1[i]
}
],
globalCoord: false
}
color: colors[i]
}
},
label: {
show: true,
position: "top",
color: '#fff',
fontSize: fontSizeText,
formatter: function (params) {
return params.value || ''
},
});
// option.series.push({
// z: 2,
// name: legendArr[i] + '下',
// type: 'pictorialBar',
// data,
// symbol: 'diamond',
// symbolOffset: [(i - 1) * 150 + '%', '50%'],
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
// itemStyle: {
// normal: {
// borderWidth: 0,
// color: colorArr1[i]
// }
// },
// });
option.series.push({
z: 100,
name: legendArr[i] + '上',
type: 'pictorialBar',
symbolPosition: 'end',
data,
symbol: 'diamond',
symbolOffset: [(i - 1) * 130 + '%', '-50%'],
symbolSize: [barWidth, 10 * (barWidth - 3) / barWidth],
itemStyle: {
normal: {
borderWidth: 0,
color: colorArr0[i]
}
}
});
});
console.log(option.series);
newEchartBar && newEchartBar.setOption(option);
}, [id, title, xData, yData])

7
src/military/qz2022/statistics/index.jsx
View File

@ -22,7 +22,6 @@ const initPieArr = [
},
];
const initLegendArr = ["战略方向", "前沿技术", "作战领域"];
const initBarYData = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
@ -31,7 +30,7 @@ function Statistics({ showNotification, qzDetail }) {
const [pieArr, setPieArr] = useState(initPieArr);
const [barXData, setBarXData] = useState(['LJLJLJ', 'HJHJHJ', 'KJKJKJ', 'HJJHJJHJJ', 'ZLZYBD', '联勤保障', 'WJWJWJ']);
const [legendArr, setLegendArr] = useState(initLegendArr);
const [legendArr, setLegendArr] = useState([]);
const [barYData, setBarYData] = useState(initBarYData);
const [uploadCount, setUploadCount] = useState(0);
const [enrollCount, setEnrollCount] = useState(0);
@ -112,7 +111,9 @@ function Statistics({ showNotification, qzDetail }) {
</div>}
{/* 内网 */}
{is_local && <div className="right-echart">
{
is_local &&
<div className="right-echart">
<EchartBar
id="newAddedProjects"
className="echart-box"