新增背景等

This commit is contained in:
何童崇 2022-03-30 10:13:11 +08:00
parent d7b3303bcb
commit 05e5d4eb6c
12 changed files with 75 additions and 62 deletions

View File

@ -148,7 +148,7 @@ const Qz2022 = (props) => {
{/* 大赛介绍 */} {/* 大赛介绍 */}
<Route path="/competition/qz2022/introduce" <Route path="/competition/qz2022/introduce"
render={ render={
() => (<Introduce {...props} />) () => (<Introduce {...props} qzDetail={qzDetail||{}} />)
} }
></Route> ></Route>
{/* 大赛指南 */} {/* 大赛指南 */}
@ -190,7 +190,7 @@ const Qz2022 = (props) => {
{/* 联系我们 */} {/* 联系我们 */}
<Route path="/competition/qz2022/contact" <Route path="/competition/qz2022/contact"
render={ render={
() => (<Contact {...props} />) () => (<Contact {...props} aboutUs={qzDetail&&qzDetail.about_us}/>)
} }
></Route> ></Route>
{/* 数据统计 */} {/* 数据统计 */}

View File

@ -8,6 +8,7 @@ function Chat({ form, showNotification, match, history }) {
return ( return (
<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={chatSvg} ></img>
<div className="chat-words"> <div className="chat-words">
@ -28,6 +29,7 @@ function Chat({ form, showNotification, match, history }) {
</div> </div>
</div> </div>
</div>
) )
} }
export default Chat; export default Chat;

View File

@ -1,7 +1,13 @@
.chat-bg{
padding:9rem 0 5rem 0;
background-image: url('../image/chat-bg.png');
background-size: 100% 100%;
}
.chat { .chat {
margin: 9rem auto; margin: 0 auto;
padding: 0 1.5rem; padding: 0 1.5rem;
background: #fff; background: #fff;
.chat-left { .chat-left {
float: left; float: left;
position: relative; position: relative;

View File

@ -1,30 +1,33 @@
import React from "react"; import React from "react";
import contactPng from "../image/contact.png"; import contactPng from "../image/contact.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';
function Contact({ form, showNotification, match, history }) { function Contact({ aboutUs }) {
return ( return (
<div className="contact-bg">
<div className="contact qz_main clearfix"> <div className="contact qz_main clearfix">
<div className="contact-top"> <div className="contact-top">
<img className="contact-png" src={contactPng} ></img> <img className="contact-png" src={contactPng} ></img>
<div className="contact-tit">联系我们</div> <div className="contact-tit">联系我们</div>
</div> </div>
<div className="contact-words"> <div className="contact-words">
<div className="contact-content"> <div className="contact-content" dangerouslySetInnerHTML={{ __html: aboutUs }}>
<p>主办方JWJWJW联合参谋部科学技术委员会</p>
<p>协办方军事科学院航天科技集团</p>
</div> </div>
<div className="contact-content"> {/* <p>JWJWJW</p>
<p>协办方军事科学院航天科技集团</p> */}
{/* <div className="contact-content">
<p>地址北京市海淀区西三环北路72号</p> <p>地址北京市海淀区西三环北路72号</p>
<p>Emailosredm@163.com</p> <p>Emailosredm@163.com</p>
<p>电话+86-010-66357650</p> <p>电话+86-010-66357650</p>
</div> */}
</div> </div>
</div> </div>
</div> </div>
) )
} }
export default Contact; export default Contact;

View File

@ -1,5 +1,10 @@
.contact-bg{
padding:3rem 0;
background-image: url('../image/chat-bg.png');
background-size:100% 100%;
}
.contact { .contact {
margin: 3rem auto; margin: 0 auto;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: #fff; background: #fff;
.contact-top{ .contact-top{

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 572 KiB

After

Width:  |  Height:  |  Size: 592 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@ -1,38 +1,19 @@
import React, { useState, useCallback, useMemo, useEffect } from "react"; import React, { useEffect, useState } from "react";
import { Input, Select, Button, Form, DatePicker, Table, Pagination, Upload, Modal } from 'antd';
import { Link } from "react-router-dom";
import { formatDuring } from 'educoder';
import './index.scss'; import './index.scss';
import '../../index.scss'; import '../../index.scss';
const Option = Select.Option;
function Introduce({ form, showNotification, match, history }) { function Introduce({ qzDetail }) {
useEffect(() => {
}, []); let { content, video_url } = 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="http://111.8.36.180:8000/preview/93579e3f4bc0ba33075a905c08c79322_1648197024501.mp4" 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">
<h3 className="info-tit">启智2022作战概念·事需求创新大赛</h3> <div className="info-content" dangerouslySetInnerHTML={{ __html:content}}>
{/* <div className="info-content"> */} </div>
<p className="content-item">创客以用户创新为核心理念是面向知识社会
的创新2.0模式在设计与制造领域的典型体现
客运动最重要的标志是掌握了自生产工具
他们是一群新人类</p>
<p className="content-item">在中文里的含义是
开始做创造首创开创创立它体现了一种
积极向上的生活态度</p>
<p className="content-item">
同时有一种通过行动和实践去发现问题和需求
并努力找到解决方案的含义...</p>
{/* </div> */}
</div> </div>
</div> </div>

View File

@ -1,6 +1,7 @@
.introduce { .introduce {
width: 100%; width: 100%;
height: 36.3vw; height: 36.3vw;
background: #f1f7fc;
background-image: url("../image/introduce.png"); background-image: url("../image/introduce.png");
background-size: 100% 100.5%; background-size: 100% 100.5%;
@ -14,8 +15,10 @@
.introduce-video { .introduce-video {
height: 80%; height: 80%;
margin-right: 2.2%; margin-right: 2.2%;
min-width: 30%;
float: left; float: left;
video { video {
width: 100%;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }

View File

@ -80,7 +80,9 @@ function Statistics({ showNotification, qzDetail }) {
return ( return (
<div className="statistics-bg">
<div className="statistics qz_main "> <div className="statistics qz_main ">
<div className="statistics-words"> <div className="statistics-words">
<div className="num-item sum"> <div className="num-item sum">
<img src={statisticsSum} ></img> <img src={statisticsSum} ></img>
@ -120,6 +122,8 @@ function Statistics({ showNotification, qzDetail }) {
yData={barYData} yData={barYData}
/> />
</div>} </div>}
</div>
</div> </div>
) )
} }

View File

@ -1,6 +1,12 @@
.statistics-bg{
background-image: url('../image/statistics.png');
background-size: 100% 100%;
padding:3rem 0;
}
.statistics { .statistics {
display: flex; display: flex;
margin: 3rem auto; margin: 0 auto;
.statistics-words { .statistics-words {
width: 30%; width: 30%;
@ -14,10 +20,13 @@
height: 12.25rem; height: 12.25rem;
background-color: #ffffff; background-color: #ffffff;
&.sum { &:first-child{
margin-bottom: 1rem;
}
&:hover {
border: 2px solid #2e5bfe; border: 2px solid #2e5bfe;
box-shadow: 0px 3px 12px #ecf0ff; box-shadow: 0px 3px 12px #ecf0ff;
margin-bottom: 1rem;
.num-data { .num-data {
color: #2e5bfe; color: #2e5bfe;