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)); referStatus = !applyStatus && Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date));
} }
console.log(qzDetail);
return ( return (
<React.Fragment> <React.Fragment>
{/* banner图+选项 */} {/* banner图+选项 */}

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

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

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

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

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

@ -5,13 +5,18 @@
} }
.contact { .contact {
margin: 0 auto; margin: 0 auto;
padding: 1rem 1.5rem; padding: 3rem;
background: #fff; background: #fff;
.contact-top{ display: flex;
position: relative; justify-content: space-between;
}
.contact-png{ .contact-png{
width: 100%; width: 55%;
margin-left:1rem;
img{
width: 100%;
}
} }
.contact-tit{ .contact-tit{
@ -24,7 +29,7 @@
font-weight: 700; font-weight: 700;
} }
.contact-words { .contact-words {
padding: 1.5rem; max-width: 45%;
} }
.contact-content { .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 content= qzDetail&&qzDetail.content;
let video_url= qzDetail&&qzDetail.video_url; let video_url= qzDetail&&qzDetail.video_url;
console.log(qzDetail);
return ( return (
<div className="introduce"> <div className="introduce">
<div className="introduce-content clearfix"> <div className="introduce-content clearfix">
<div className="introduce-video"><video src={video_url} autoPlay controls muted></video></div> <div className="introduce-video"><video src={video_url} autoPlay controls muted></video></div>
<div className="introduce-info"> <div className="introduce-info">
<<<<<<< HEAD
<<<<<<< HEAD <<<<<<< HEAD
<div className="info-tit">“启智”2022作战概念·JSJSJS需求创新大赛</div> <div className="info-tit">“启智”2022作战概念·JSJSJS需求创新大赛</div>
=======
<div className="info-tit">“启智-2022”作战概念·JSJSJS需求创新大赛</div>
>>>>>>> 2805cd0d (修改样式等)
<div className="info-content" dangerouslySetInnerHTML={{ __html:content}}> <div className="info-content" dangerouslySetInnerHTML={{ __html:content}}>
</div> </div>
======= =======

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

@ -14,8 +14,8 @@ if (clientWidth < 1000) {
} }
let fontSizeTitle = 1.25 * fontSizeText; 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 colorArr0 = ['rgba(226, 217, 255, 1)', 'rgba(254, 230, 147, 1)', 'rgba(187, 217, 255, 1)'];
const colorArr1 = ['rgba(155, 128, 245, 1)', 'rgba(254, 140, 0, 1)', 'rgba(37, 109, 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 }) => { export default ({ id, className, title, legendArr, xData, yData }) => {
@ -24,181 +24,62 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
let textColor = "#7988a5"; let textColor = "#7988a5";
let normalColor = "#e8e8ed"; let normalColor = "#e8e8ed";
// var colors = [ let colors = [
// { {
// type: 'linear', type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0, x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{ colorStops: [{
// offset: 0, offset: 0,
// color: '#218bd1' color: colorArr0[0]//'#218bd1'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#7EC3F0' color: colorArr0[0]//'#7EC3F0'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#1985cd' color: colorArr1[0]// '#1985cd'
// }, { }, {
// offset: 1, offset: 1,
// color: '#1985cd' color: colorArr0[0]//'#1985cd'
// }] }]
// }, },
// { {
// type: 'linear', type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0, x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{ colorStops: [{
// offset: 0, offset: 0,
// color: '#6DD4E5' color: colorArr0[1]//'#6DD4E5'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#6DD4E5' color: colorArr0[1]//'#6DD4E5'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#0EADC9' color: colorArr1[1]//'#0EADC9'
// }, { }, {
// offset: 1, offset: 1,
// color: '#218bd1' color: colorArr0[1]//'#218bd1'
// }] }]
// }, },
// { {
// type: 'linear', type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0, x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{ colorStops: [{
// offset: 0, offset: 0,
// color: '#acace6' color: colorArr0[2]//'#acace6'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#acace6' color: colorArr0[2]//'#acace6'
// }, { }, {
// offset: 0.5, offset: 0.5,
// color: '#6161bd' color: colorArr1[2]//'#6161bd'
// }, { }, {
// offset: 1, offset: 1,
// color: '#6161bd' color: colorArr0[2]//'#6161bd'
// }] }]
// } }
];
// ];
// var barWidth = 35; let barWidth = 25;
// 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 option = { let option = {
grid: { grid: {
@ -231,6 +112,28 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
backgroundColor: 'rgba(255,255,255,0.8)', backgroundColor: 'rgba(255,255,255,0.8)',
textStyle: { textStyle: {
color: "#333" 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: { legend: {
@ -290,6 +193,7 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
show: false show: false
}, },
splitLine: { splitLine: {
// show: false,
lineStyle: { lineStyle: {
color: normalColor, color: normalColor,
type: 'dotted', type: 'dotted',
@ -300,47 +204,56 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
}; };
yData.forEach((data, i) => { yData.forEach((data, i) => {
option.series.push({ option.series.push({
z: 1,
name: legendArr[i], name: legendArr[i],
type: "bar", type: "bar",
data: data, index: i,
barWidth: "20%", data,
// itemStyle: { barWidth: barWidth,
// normal: {
// color: colors[i]
// }
// },
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: colors[i]
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr0[i],
},
{
offset: 1,
color: colorArr1[i]
}
],
globalCoord: false
}
} }
}, },
label: { });
show: true,
position: "top", // option.series.push({
color: '#fff', // z: 2,
fontSize: fontSizeText, // name: legendArr[i] + '下',
formatter: function (params) { // type: 'pictorialBar',
return params.value || '' // 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); newEchartBar && newEchartBar.setOption(option);
}, [id, title, xData, yData]) }, [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]]; 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 [pieArr, setPieArr] = useState(initPieArr);
const [barXData, setBarXData] = useState(['LJLJLJ', 'HJHJHJ', 'KJKJKJ', 'HJJHJJHJJ', 'ZLZYBD', '联勤保障', 'WJWJWJ']); 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 [barYData, setBarYData] = useState(initBarYData);
const [uploadCount, setUploadCount] = useState(0); const [uploadCount, setUploadCount] = useState(0);
const [enrollCount, setEnrollCount] = useState(0); const [enrollCount, setEnrollCount] = useState(0);
@ -112,7 +111,9 @@ function Statistics({ showNotification, qzDetail }) {
</div>} </div>}
{/* 内网 */} {/* 内网 */}
{is_local && <div className="right-echart"> {
is_local &&
<div className="right-echart">
<EchartBar <EchartBar
id="newAddedProjects" id="newAddedProjects"
className="echart-box" className="echart-box"