init
This commit is contained in:
黄心宇
parent
05d6ff8278
commit
328a648004
|
|
@ -1,20 +1,9 @@
|
||||||
# ---> Actionscript
|
/node_modules
|
||||||
# Build and Release Folders
|
/.env.local
|
||||||
bin-debug/
|
/.umirc.local.ts
|
||||||
bin-release/
|
/config/config.local.ts
|
||||||
[Oo]bj/
|
/src/.umi
|
||||||
[Bb]in/
|
/src/.umi-production
|
||||||
|
/src/.umi-test
|
||||||
# Other files and folders
|
/dist
|
||||||
.settings/
|
.swc
|
||||||
|
|
||||||
# Executables
|
|
||||||
*.swf
|
|
||||||
*.air
|
|
||||||
*.ipa
|
|
||||||
*.apk
|
|
||||||
|
|
||||||
# Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
|
|
||||||
# should NOT be excluded as they contain compiler settings and other important
|
|
||||||
# information for Eclipse / Flash Builder.
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { defineConfig } from "umi";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
routes: [
|
||||||
|
{ path: '/', component: 'homePage' },
|
||||||
|
{ path: "/organization", component: "organization" },
|
||||||
|
{ path: "/information", component: "information" },
|
||||||
|
{ path: "/information/detail/:id", component: "information/detail" },
|
||||||
|
{ path: "/contact", component: "information/detail" },
|
||||||
|
{ path: "/register", component: "information/detail" },
|
||||||
|
{ path: "/docs", component: "docs" },
|
||||||
|
],
|
||||||
|
npmClient: 'pnpm',
|
||||||
|
alias: {
|
||||||
|
img: '/public/image'
|
||||||
|
},
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
'target': 'https://testgetway.trustie.net/',
|
||||||
|
'changeOrigin': true,
|
||||||
|
// 'pathRewrite': { '^/api' : '' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"author": "黄心宇 <xyhuang29@outlook.com>",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "umi dev",
|
||||||
|
"build": "umi build",
|
||||||
|
"postinstall": "umi setup",
|
||||||
|
"setup": "umi setup",
|
||||||
|
"start": "npm run dev"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"antd": "^5.6.2",
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"code-prettify": "^0.1.0",
|
||||||
|
"dompurify": "^3.0.3",
|
||||||
|
"github-markdown-css": "^5.2.0",
|
||||||
|
"js-base64": "^3.7.5",
|
||||||
|
"katex": "^0.16.8",
|
||||||
|
"marked": "1.2.9",
|
||||||
|
"swiper": "^9.4.1",
|
||||||
|
"umi": "^4.0.71"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.13",
|
||||||
|
"@types/react-dom": "^18.2.6",
|
||||||
|
"typescript": "^5.1.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,4 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Alimama ShuHeiTi;
|
||||||
|
src: url(../font/AlimamaShuHeiTi-Bold.ttf);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
@import url(./reset.css);
|
||||||
|
@import url(./font.css);
|
||||||
|
|
||||||
|
.task-hide {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-hide-2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
.ant-spin-spinning {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.markdown-body {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*清除浮动*/
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after{
|
||||||
|
content:"";
|
||||||
|
display:block;
|
||||||
|
visibility:hidden;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*容器*/
|
||||||
|
.container {
|
||||||
|
margin: 10px auto 0px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
Binary file not shown.
|
After Width: | Height: | Size: 895 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
function MemberItem(props) {
|
||||||
|
const { className, data } = props
|
||||||
|
|
||||||
|
return <div className={ `${ className } member-item` }>
|
||||||
|
{
|
||||||
|
data.name && <>
|
||||||
|
<img src={ data.imageUrl } alt="" className="head-img"/>
|
||||||
|
<span className="task-hide">{ data.name }</span>
|
||||||
|
<p className="task-hide-2">{ data.introduction }</p>
|
||||||
|
<div className="line"></div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MemberItem
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
.member-item {
|
||||||
|
width: 200px;
|
||||||
|
height: 315px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1.5px solid linear-gradient(90deg,#08428e 0%,#019765 100%);;
|
||||||
|
.head-img {
|
||||||
|
width: 200px;
|
||||||
|
height: 250px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 66px;
|
||||||
|
left: 2px;
|
||||||
|
width: 196px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 40px;
|
||||||
|
background-image:linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.47) 100%);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #252b3a;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.5px;
|
||||||
|
background-image: linear-gradient(90deg,#08428e 0%,#019765 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import { useEffect, useRef, useMemo } from 'react'
|
||||||
|
import 'katex/dist/katex.min.css';
|
||||||
|
import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from '../../utils/marked';
|
||||||
|
import 'code-prettify';
|
||||||
|
import dompurify from 'dompurify';
|
||||||
|
import { getEmoji } from '../../constants/emoji/index'
|
||||||
|
|
||||||
|
import katex from 'katex'
|
||||||
|
import { convertToObject } from 'typescript';
|
||||||
|
|
||||||
|
const preRegex = /<pre[^>]*>/g;
|
||||||
|
const strRegexSub = /:([a-zA-Z_]+):/g;
|
||||||
|
|
||||||
|
function _unescape(str) {
|
||||||
|
let div = document.createElement('div')
|
||||||
|
div.innerHTML = str
|
||||||
|
return div.childNodes.length === 0 ? "" : div.childNodes[0].nodeValue
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default ({
|
||||||
|
value = '',
|
||||||
|
className,
|
||||||
|
style = {},
|
||||||
|
url,
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
let str = String(value);
|
||||||
|
const html = useMemo(() => {
|
||||||
|
let rs = marked(str);
|
||||||
|
const math_expressions = getMathExpressions();
|
||||||
|
if (str.match(/\[TOC\]/)) {
|
||||||
|
rs = rs.replace("<p>[TOC]</p>", getTocContent())
|
||||||
|
cleanToc()
|
||||||
|
}
|
||||||
|
// 循环匹配所有emoji
|
||||||
|
let matchStr = str.match(strRegexSub);
|
||||||
|
if(matchStr && matchStr.length>0){
|
||||||
|
for(var i=0;i < matchStr.length;i++){
|
||||||
|
rs = rs.replace(matchStr[i],getEmoji(matchStr[i]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rs = rs.replace(/(__special_katext_id_\d+__)/g, (_match, capture) => {
|
||||||
|
const { type, expression } = math_expressions[capture];
|
||||||
|
return katex.renderToString(_unescape(expression) || '', { displayMode: type === 'block', throwOnError: false, output: 'html' })
|
||||||
|
})
|
||||||
|
rs = rs.replace(/▁/g, "▁▁▁")
|
||||||
|
resetMathExpressions()
|
||||||
|
return dompurify.sanitize(rs)
|
||||||
|
}, [str]);
|
||||||
|
|
||||||
|
// 锚点跳转，链接地址里含#对应的id
|
||||||
|
useEffect(()=>{
|
||||||
|
if(url && url.hash && html){
|
||||||
|
let u = url.hash;
|
||||||
|
if(u){
|
||||||
|
let id = decodeURIComponent(u.split("#")[1]);
|
||||||
|
let ele = document.getElementById(id);
|
||||||
|
if(ele){
|
||||||
|
window.scrollTo(0, ele.offsetTop);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},[url,html])
|
||||||
|
|
||||||
|
const el = useRef();
|
||||||
|
|
||||||
|
function onAncherHandler(e) {
|
||||||
|
let target = e.target;
|
||||||
|
if (target.tagName.toUpperCase() === 'A') {
|
||||||
|
let ancher = target.getAttribute('href');
|
||||||
|
if (ancher && ancher.startsWith('#')) {
|
||||||
|
e.preventDefault()
|
||||||
|
let viewEl = document.getElementById(ancher.replace('#', ''))
|
||||||
|
if (viewEl) {
|
||||||
|
viewEl.scrollIntoView(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (el.current && html) {
|
||||||
|
if (html.match(preRegex)) {
|
||||||
|
window.PR.prettyPrint()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (el.current) {
|
||||||
|
let elCurrent = el.current
|
||||||
|
el.current.addEventListener('click', onAncherHandler)
|
||||||
|
return () => {
|
||||||
|
elCurrent.removeEventListener('click', onAncherHandler)
|
||||||
|
resetMathExpressions()
|
||||||
|
cleanToc()
|
||||||
|
elCurrent = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [html, el.current, onAncherHandler])
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={el}
|
||||||
|
style={style}
|
||||||
|
className={`${className ? className : ''} markdown-body`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: html }}
|
||||||
|
></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,462 @@
|
||||||
|
const emoji = [
|
||||||
|
{
|
||||||
|
"emoji": "🎨",
|
||||||
|
"entity": "🎨",
|
||||||
|
"code": ":art:",
|
||||||
|
"description": "Improve structure / format of the code.",
|
||||||
|
"name": "art"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "⚡️",
|
||||||
|
"entity": "⚡",
|
||||||
|
"code": ":zap:",
|
||||||
|
"description": "Improve performance.",
|
||||||
|
"name": "zap"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔥",
|
||||||
|
"entity": "🔥",
|
||||||
|
"code": ":fire:",
|
||||||
|
"description": "Remove code or files.",
|
||||||
|
"name": "fire"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🐛",
|
||||||
|
"entity": "🐛",
|
||||||
|
"code": ":bug:",
|
||||||
|
"description": "Fix a bug.",
|
||||||
|
"name": "bug"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚑",
|
||||||
|
"entity": "🚑",
|
||||||
|
"code": ":ambulance:",
|
||||||
|
"description": "Critical hotfix.",
|
||||||
|
"name": "ambulance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "✨",
|
||||||
|
"entity": "✨",
|
||||||
|
"code": ":sparkles:",
|
||||||
|
"description": "Introduce new features.",
|
||||||
|
"name": "sparkles"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📝",
|
||||||
|
"entity": "📝",
|
||||||
|
"code": ":memo:",
|
||||||
|
"description": "Add or update documentation.",
|
||||||
|
"name": "memo"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚀",
|
||||||
|
"entity": "🚀",
|
||||||
|
"code": ":rocket:",
|
||||||
|
"description": "Deploy stuff.",
|
||||||
|
"name": "rocket"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💄",
|
||||||
|
"entity": "&#ff99cc;",
|
||||||
|
"code": ":lipstick:",
|
||||||
|
"description": "Add or update the UI and style files.",
|
||||||
|
"name": "lipstick"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🎉",
|
||||||
|
"entity": "🎉",
|
||||||
|
"code": ":tada:",
|
||||||
|
"description": "Begin a project.",
|
||||||
|
"name": "tada"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "✅",
|
||||||
|
"entity": "✅",
|
||||||
|
"code": ":white_check_mark:",
|
||||||
|
"description": "Add or update tests.",
|
||||||
|
"name": "white-check-mark"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji":"🍎",
|
||||||
|
"entity": "",
|
||||||
|
"code": ":apple:",
|
||||||
|
"description": "apple",
|
||||||
|
"name": "apple"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji":"🐳",
|
||||||
|
"entity": "",
|
||||||
|
"code": ":whale:",
|
||||||
|
"description": "whale",
|
||||||
|
"name": "whale"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔒",
|
||||||
|
"entity": "🔒",
|
||||||
|
"code": ":lock:",
|
||||||
|
"description": "Fix security issues.",
|
||||||
|
"name": "lock"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔖",
|
||||||
|
"entity": "🔖",
|
||||||
|
"code": ":bookmark:",
|
||||||
|
"description": "Release / Version tags.",
|
||||||
|
"name": "bookmark"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚨",
|
||||||
|
"entity": "🚨",
|
||||||
|
"code": ":rotating_light:",
|
||||||
|
"description": "Fix compiler / linter warnings.",
|
||||||
|
"name": "rotating-light"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚧",
|
||||||
|
"entity": "🚧",
|
||||||
|
"code": ":construction:",
|
||||||
|
"description": "Work in progress.",
|
||||||
|
"name": "construction"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💚",
|
||||||
|
"entity": "💚",
|
||||||
|
"code": ":green_heart:",
|
||||||
|
"description": "Fix CI Build.",
|
||||||
|
"name": "green-heart"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "⬇️",
|
||||||
|
"entity": "⬇️",
|
||||||
|
"code": ":arrow_down:",
|
||||||
|
"description": "Downgrade dependencies.",
|
||||||
|
"name": "arrow-down"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "⬆️",
|
||||||
|
"entity": "⬆️",
|
||||||
|
"code": ":arrow_up:",
|
||||||
|
"description": "Upgrade dependencies.",
|
||||||
|
"name": "arrow-up"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📌",
|
||||||
|
"entity": "📌",
|
||||||
|
"code": ":pushpin:",
|
||||||
|
"description": "Pin dependencies to specific versions.",
|
||||||
|
"name": "pushpin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "👷",
|
||||||
|
"entity": "👷",
|
||||||
|
"code": ":construction_worker:",
|
||||||
|
"description": "Add or update CI build system.",
|
||||||
|
"name": "construction-worker"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📈",
|
||||||
|
"entity": "📈",
|
||||||
|
"code": ":chart_with_upwards_trend:",
|
||||||
|
"description": "Add or update analytics or track code.",
|
||||||
|
"name": "chart-with-upwards-trend"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "♻️",
|
||||||
|
"entity": "♲",
|
||||||
|
"code": ":recycle:",
|
||||||
|
"description": "Refactor code.",
|
||||||
|
"name": "recycle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "➕",
|
||||||
|
"entity": "➕",
|
||||||
|
"code": ":heavy_plus_sign:",
|
||||||
|
"description": "Add a dependency.",
|
||||||
|
"name": "heavy-plus-sign"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "➖",
|
||||||
|
"entity": "➖",
|
||||||
|
"code": ":heavy_minus_sign:",
|
||||||
|
"description": "Remove a dependency.",
|
||||||
|
"name": "heavy-minus-sign"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔧",
|
||||||
|
"entity": "🔧",
|
||||||
|
"code": ":wrench:",
|
||||||
|
"description": "Add or update configuration files.",
|
||||||
|
"name": "wrench"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔨",
|
||||||
|
"entity": "🔨",
|
||||||
|
"code": ":hammer:",
|
||||||
|
"description": "Add or update development scripts.",
|
||||||
|
"name": "hammer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🌐",
|
||||||
|
"entity": "🌐",
|
||||||
|
"code": ":globe_with_meridians:",
|
||||||
|
"description": "Internationalization and localization.",
|
||||||
|
"name": "globe-with-meridians"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "✏️",
|
||||||
|
"entity": "",
|
||||||
|
"code": ":pencil2:",
|
||||||
|
"description": "Fix typos.",
|
||||||
|
"name": "pencil2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📝",
|
||||||
|
"entity": "📝",
|
||||||
|
"code": ":pencil:",
|
||||||
|
"description": "Add or update documentation.",
|
||||||
|
"name": "pencil"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💩",
|
||||||
|
"entity": "",
|
||||||
|
"code": ":poop:",
|
||||||
|
"description": "Write bad code that needs to be improved.",
|
||||||
|
"name": "poop"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "⏪",
|
||||||
|
"entity": "⏪",
|
||||||
|
"code": ":rewind:",
|
||||||
|
"description": "Revert changes.",
|
||||||
|
"name": "rewind"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔀",
|
||||||
|
"entity": "🔀",
|
||||||
|
"code": ":twisted_rightwards_arrows:",
|
||||||
|
"description": "Merge branches.",
|
||||||
|
"name": "twisted-rightwards-arrows"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📦",
|
||||||
|
"entity": "F4E6;",
|
||||||
|
"code": ":package:",
|
||||||
|
"description": "Add or update compiled files or packages.",
|
||||||
|
"name": "package"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "👽",
|
||||||
|
"entity": "F47D;",
|
||||||
|
"code": ":alien:",
|
||||||
|
"description": "Update code due to external API changes.",
|
||||||
|
"name": "alien"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚚",
|
||||||
|
"entity": "F69A;",
|
||||||
|
"code": ":truck:",
|
||||||
|
"description": "Move or rename resources (e.g.: files, paths, routes).",
|
||||||
|
"name": "truck"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📄",
|
||||||
|
"entity": "F4C4;",
|
||||||
|
"code": ":page_facing_up:",
|
||||||
|
"description": "Add or update license.",
|
||||||
|
"name": "page-facing-up"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💥",
|
||||||
|
"entity": "💥",
|
||||||
|
"code": ":boom:",
|
||||||
|
"description": "Introduce breaking changes.",
|
||||||
|
"name": "boom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🍱",
|
||||||
|
"entity": "F371",
|
||||||
|
"code": ":bento:",
|
||||||
|
"description": "Add or update assets.",
|
||||||
|
"name": "bento"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "♿️",
|
||||||
|
"entity": "♿",
|
||||||
|
"code": ":wheelchair:",
|
||||||
|
"description": "Improve accessibility.",
|
||||||
|
"name": "wheelchair"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💡",
|
||||||
|
"entity": "💡",
|
||||||
|
"code": ":bulb:",
|
||||||
|
"description": "Add or update comments in source code.",
|
||||||
|
"name": "bulb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🍻",
|
||||||
|
"entity": "🍻",
|
||||||
|
"code": ":beers:",
|
||||||
|
"description": "Write code drunkenly.",
|
||||||
|
"name": "beers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💬",
|
||||||
|
"entity": "💬",
|
||||||
|
"code": ":speech_balloon:",
|
||||||
|
"description": "Add or update text and literals.",
|
||||||
|
"name": "speech-balloon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🗃",
|
||||||
|
"entity": "🗃",
|
||||||
|
"code": ":card_file_box:",
|
||||||
|
"description": "Perform database related changes.",
|
||||||
|
"name": "card-file-box"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔊",
|
||||||
|
"entity": "🔊",
|
||||||
|
"code": ":loud_sound:",
|
||||||
|
"description": "Add or update logs.",
|
||||||
|
"name": "loud-sound"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔇",
|
||||||
|
"entity": "🔇",
|
||||||
|
"code": ":mute:",
|
||||||
|
"description": "Remove logs.",
|
||||||
|
"name": "mute"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "👥",
|
||||||
|
"entity": "👥",
|
||||||
|
"code": ":busts_in_silhouette:",
|
||||||
|
"description": "Add or update contributor(s).",
|
||||||
|
"name": "busts-in-silhouette"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚸",
|
||||||
|
"entity": "🚸",
|
||||||
|
"code": ":children_crossing:",
|
||||||
|
"description": "Improve user experience / usability.",
|
||||||
|
"name": "children-crossing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🏗",
|
||||||
|
"entity": "f3d7;",
|
||||||
|
"code": ":building_construction:",
|
||||||
|
"description": "Make architectural changes.",
|
||||||
|
"name": "building-construction"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📱",
|
||||||
|
"entity": "📱",
|
||||||
|
"code": ":iphone:",
|
||||||
|
"description": "Work on responsive design.",
|
||||||
|
"name": "iphone"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🤡",
|
||||||
|
"entity": "🤡",
|
||||||
|
"code": ":clown_face:",
|
||||||
|
"description": "Mock things.",
|
||||||
|
"name": "clown-face"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🥚",
|
||||||
|
"entity": "🥚",
|
||||||
|
"code": ":egg:",
|
||||||
|
"description": "Add or update an easter egg.",
|
||||||
|
"name": "egg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🙈",
|
||||||
|
"entity": "bdfe7;",
|
||||||
|
"code": ":see_no_evil:",
|
||||||
|
"description": "Add or update a .gitignore file.",
|
||||||
|
"name": "see-no-evil"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "📸",
|
||||||
|
"entity": "📸",
|
||||||
|
"code": ":camera_flash:",
|
||||||
|
"description": "Add or update snapshots.",
|
||||||
|
"name": "camera-flash"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "⚗",
|
||||||
|
"entity": "📸",
|
||||||
|
"code": ":alembic:",
|
||||||
|
"description": "Perform experiments.",
|
||||||
|
"name": "alembic"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🔍",
|
||||||
|
"entity": "🔍",
|
||||||
|
"code": ":mag:",
|
||||||
|
"description": "Improve SEO.",
|
||||||
|
"name": "mag"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🏷️",
|
||||||
|
"entity": "🏷",
|
||||||
|
"code": ":label:",
|
||||||
|
"description": "Add or update types.",
|
||||||
|
"name": "label"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🌱",
|
||||||
|
"entity": "🌱",
|
||||||
|
"code": ":seedling:",
|
||||||
|
"description": "Add or update seed files.",
|
||||||
|
"name": "seedling"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🚩",
|
||||||
|
"entity": "🚩",
|
||||||
|
"code": ":triangular_flag_on_post:",
|
||||||
|
"description": "Add, update, or remove feature flags.",
|
||||||
|
"name": "triangular-flag-on-post"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🥅",
|
||||||
|
"entity": "🥅",
|
||||||
|
"code": ":goal_net:",
|
||||||
|
"description": "Catch errors.",
|
||||||
|
"name": "goal-net"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "💫",
|
||||||
|
"entity": "💫",
|
||||||
|
"code": ":dizzy:",
|
||||||
|
"description": "Add or update animations and transitions.",
|
||||||
|
"name": "animation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🗑",
|
||||||
|
"entity": "🗑",
|
||||||
|
"code": ":wastebasket:",
|
||||||
|
"description": "Deprecate code that needs to be cleaned up.",
|
||||||
|
"name": "wastebasket"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🛂",
|
||||||
|
"entity": "🛂",
|
||||||
|
"code": ":passport_control:",
|
||||||
|
"description": "Work on code related to authorization, roles and permissions.",
|
||||||
|
"name": "passport-control"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"emoji": "🩹",
|
||||||
|
"entity": "🩹",
|
||||||
|
"code": ":adhesive_bandage:",
|
||||||
|
"description": "Simple fix for a non-critical issue.",
|
||||||
|
"name": "adhesive-bandage"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function getEmoji(code){
|
||||||
|
let filter = emoji.filter(i=>i.code === code);
|
||||||
|
return filter.length>0?filter[0].emoji:code;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
|
||||||
|
export const menu = [
|
||||||
|
{
|
||||||
|
name: '首页',
|
||||||
|
link: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '组织机构',
|
||||||
|
link: 'organization'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '大会资讯',
|
||||||
|
link: 'information'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '参会注册',
|
||||||
|
link: 'register'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '往届回顾',
|
||||||
|
link: '/',
|
||||||
|
showSubMenu: true,
|
||||||
|
history: [{ year: 2022, link: 'http://chinaosc.ccf.org.cn/'}, { year: 2021, link: 'http://chinaosc.ccf.org.cn/'}, { year: 2020, link: 'http://chinaosc.ccf.org.cn/'}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '联系我们',
|
||||||
|
link: 'contact'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const defaultPage = {
|
||||||
|
'/register': 171,
|
||||||
|
'/contact': 173
|
||||||
|
}
|
||||||
|
|
||||||
|
export const information = {
|
||||||
|
title: '大会资讯',
|
||||||
|
desc: '方便您第一时间收集各会议论坛信息，解读大会通知资讯',
|
||||||
|
category: [
|
||||||
|
{
|
||||||
|
title: '大会论坛',
|
||||||
|
eng: 'Conference Forum',
|
||||||
|
anchor: 'forum',
|
||||||
|
id: 164
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '会议指南',
|
||||||
|
eng: 'Conference Guide',
|
||||||
|
anchor: 'guide',
|
||||||
|
id: 170
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '会议通知',
|
||||||
|
eng: 'Meeting Notice',
|
||||||
|
anchor: 'notice',
|
||||||
|
id: 562
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const homePage = [
|
||||||
|
{
|
||||||
|
title: '会议议程',
|
||||||
|
id: 'meeting-agenda'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '会议指南',
|
||||||
|
id: 'guide'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '与会嘉宾',
|
||||||
|
id: 'member'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '合作伙伴',
|
||||||
|
id: 'partner'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const meetingAgenda = {
|
||||||
|
dateList: ['10月21日', '10月22日']
|
||||||
|
}
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
zoneKey: 'uos',
|
||||||
|
zoneId: 102,
|
||||||
|
agendaIds: {
|
||||||
|
[meetingAgenda.dateList[0]]: [170, 170],
|
||||||
|
[meetingAgenda.dateList[1]]: [170, 170]
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
|
|
@ -0,0 +1,35 @@
|
||||||
|
import style from './index.module.less'
|
||||||
|
|
||||||
|
function Footer(){
|
||||||
|
return <div className={ style.footer }>
|
||||||
|
<div className={ style.footerContent }>
|
||||||
|
<div className={ style.qrCode }>
|
||||||
|
<div>
|
||||||
|
<img src="http://fpoimg.com/200x200" alt="" />
|
||||||
|
</div>
|
||||||
|
<span>CCF官方公众号</span>
|
||||||
|
</div>
|
||||||
|
<div className={ style.qrCode }>
|
||||||
|
<div>
|
||||||
|
<img src="http://fpoimg.com/200x200" alt="" />
|
||||||
|
</div>
|
||||||
|
<span>CCF官方公众号</span>
|
||||||
|
</div>
|
||||||
|
<div className={ style.host }>
|
||||||
|
<span>主办单位：</span>
|
||||||
|
<span>中国计算机学会</span>
|
||||||
|
<span>开放原子开源基金会</span>
|
||||||
|
</div>
|
||||||
|
<div className={ style.host }>
|
||||||
|
<span>承办单位：</span>
|
||||||
|
<span>CCF开源发展委员会</span>
|
||||||
|
<span>国防科技大学</span>
|
||||||
|
<span>湖南先进技术研究院</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={ style.copyright }>
|
||||||
|
Powered by Trustie 湘ICP备17009477号
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
export default Footer
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { useEffect , useState } from 'react';
|
||||||
|
import { Link, useLocation } from 'umi';
|
||||||
|
import { menu } from '../constants/info'
|
||||||
|
import style from './index.module.less'
|
||||||
|
import icon from '../favicon.png'
|
||||||
|
|
||||||
|
function Header(){
|
||||||
|
const location = useLocation();
|
||||||
|
const [showSubMenu, setShowSubMenu] = useState(false)
|
||||||
|
|
||||||
|
const matchItem = (item) => {
|
||||||
|
return item === location.pathname.split('/')[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className={ style.header }>
|
||||||
|
<div className={ style.headerInfo }>
|
||||||
|
<img src={ icon } alt="" />
|
||||||
|
<span>开源大会</span>
|
||||||
|
</div>
|
||||||
|
<ul className={ style.menu }>
|
||||||
|
{
|
||||||
|
menu && menu.length && menu.length > 0 && menu.map((item, key) => {
|
||||||
|
return (
|
||||||
|
<li key={key}
|
||||||
|
className={`${matchItem(item.link) ? `${style.menuItem} ${style.menuItemActive}` : style.menuItem}`}
|
||||||
|
onMouseOver={ () => { item.showSubMenu && setShowSubMenu( true ) } }
|
||||||
|
onMouseOut={ () => { item.showSubMenu && setShowSubMenu( false ) } }
|
||||||
|
>
|
||||||
|
<Link to={`/${item.link}`}>{ item.name }</Link>
|
||||||
|
{
|
||||||
|
item.history && <ul className={ `${ style.dropDown } ${ showSubMenu ? style.dropDownShow : '' }` } style={{ height : showSubMenu ? `${ item.history.length * 46}px` : 0 }}>
|
||||||
|
{
|
||||||
|
item.history.map((e => {
|
||||||
|
return <li className={ style.dropDownItem } key={ e.year }><a href={ e.link } target="_blank">{e.year}</a></li>
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Header;
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import '../../public/css/index.css'
|
||||||
|
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||||
|
import style from './index.module.less'
|
||||||
|
import "github-markdown-css"
|
||||||
|
const { Content } = Layout;
|
||||||
|
import Header from './header'
|
||||||
|
import Footer from './footer'
|
||||||
|
import { Outlet } from 'umi'
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
document.title = '开源大会'
|
||||||
|
return (
|
||||||
|
<Layout className={ style.layout }>
|
||||||
|
<Header
|
||||||
|
>
|
||||||
|
</Header>
|
||||||
|
<Content>
|
||||||
|
<div className={ style.siteLayoutContent }>
|
||||||
|
<Outlet/>
|
||||||
|
</div>
|
||||||
|
</Content>
|
||||||
|
<Footer></Footer>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
html body {
|
||||||
|
margin: 0;
|
||||||
|
font-family:PingFang SC;
|
||||||
|
}
|
||||||
|
.layout {
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
height:68px;
|
||||||
|
width: 100vw;
|
||||||
|
align-items: center;
|
||||||
|
background-color:#1f2534;
|
||||||
|
box-shadow:0px 3px 6px rgba(56, 70, 87, 0.16);
|
||||||
|
padding-left: 360px;
|
||||||
|
color:#ffffff;
|
||||||
|
font-size:15px;
|
||||||
|
.headerInfo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 60px;
|
||||||
|
img {
|
||||||
|
width:58px;
|
||||||
|
height:41px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-family: Alimama ShuHeiTi;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
.menuItem {
|
||||||
|
padding: 0 15px;
|
||||||
|
margin: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
// &:hover {
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.menuItemActive {
|
||||||
|
font-weight:900;
|
||||||
|
border-bottom: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
.dropDown {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 68px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
transition: height 0.2s ease-in-out;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow:0px 0px 6px rgba(6, 44, 107, 0.15);
|
||||||
|
.dropDownItem {
|
||||||
|
height: 46px !important;
|
||||||
|
line-height: 46px !important;
|
||||||
|
padding-right:unset;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
a {
|
||||||
|
color: #252b3a;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 160px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-image: linear-gradient(93.96deg,#355ccd 0%,#093ebb 100%);
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// &:not(:last-child) {
|
||||||
|
// border-bottom: solid 1px #cccccc42;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siteLayoutContent {
|
||||||
|
margin-top: 68px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
padding: 0;
|
||||||
|
height: 383px;
|
||||||
|
width: 100%;
|
||||||
|
background: #1f2534 url('img/footer-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.footerContent {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 50px;
|
||||||
|
.qrCode {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 40px;
|
||||||
|
align-items: center;
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 70px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: url('img/qr-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-self: center;
|
||||||
|
img {
|
||||||
|
margin: auto;
|
||||||
|
width: 176px;
|
||||||
|
height: 176px;
|
||||||
|
background-image: linear-gradient(180deg,#bfd0ec 0%,#ffffff 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.host {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 165px;
|
||||||
|
span {
|
||||||
|
opacity: 77%;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
span:first-child {
|
||||||
|
opacity: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.copyright {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
border-top: 1px solid #ffffff17;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
opacity: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
const DocsPage = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>This is umi docs.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DocsPage;
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import './index.less'
|
||||||
|
import guide from 'img/homePage/guide.png'
|
||||||
|
import right from 'img/homePage/right-arraw.png'
|
||||||
|
import titleIcon from 'img/homePage/title-icon.png'
|
||||||
|
|
||||||
|
import { gethomePageDocList } from '../../utils/request/api'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
function ConferenceGuide() {
|
||||||
|
|
||||||
|
const [newsList, setNewsList] = useState([])
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getNewsList()
|
||||||
|
},[])
|
||||||
|
|
||||||
|
const getNewsList = () => {
|
||||||
|
gethomePageDocList().then(res => {
|
||||||
|
setNewsList(res.rows)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="guide" id="guide">
|
||||||
|
<div className="back-img-3"></div>
|
||||||
|
<div className="wrapper">
|
||||||
|
<div className="module-header">
|
||||||
|
<img src={ titleIcon } alt="" />
|
||||||
|
<div className="title">
|
||||||
|
<span>会议指南</span>
|
||||||
|
<span>CONFERENCE GUIDE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="guide-content">
|
||||||
|
<img src={ guide } alt="" className="left-img" />
|
||||||
|
{
|
||||||
|
newsList && newsList.length > 0 &&
|
||||||
|
<>
|
||||||
|
<div className="guide-list">
|
||||||
|
{ newsList.map((i, k) => {
|
||||||
|
return <div className="guide-item" key={ k } >
|
||||||
|
<p className="task-hide-2">{ i.name }</p>
|
||||||
|
<p className="item-time">{ i.publishTime }</p>
|
||||||
|
<img src={ right } alt="" />
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
<a href="">查看更多资讯<img src={ right } alt="" /></a>
|
||||||
|
</div>
|
||||||
|
<img src={ newsList[0].headImg } alt="" className="right-img"/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConferenceGuide
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
import './index.less'
|
||||||
|
import { Link, useLocation } from 'umi';
|
||||||
|
import MeetingAgenda from './meetingAgenda';
|
||||||
|
import ConferenceGuide from './conferenceGuide';
|
||||||
|
import Member from './member';
|
||||||
|
import greenRight from 'img/homePage/green-right.png'
|
||||||
|
import titleIcon from 'img/homePage/title-icon.png'
|
||||||
|
import { homePage } from '../../constants/info'
|
||||||
|
import { getBaseInfo, getPartnerList } from '../../utils/request/api'
|
||||||
|
import { useRef, useState, useEffect } from 'react';
|
||||||
|
import { throttle } from '../../utils/util'
|
||||||
|
|
||||||
|
|
||||||
|
function HomePage(){
|
||||||
|
|
||||||
|
const [ active, setActive ] = useState(0)
|
||||||
|
const [ fixedMenuOpacity, setFixedMenuOpacity ] = useState(0)
|
||||||
|
const [ mainInfo, setMainInfo ] = useState({})
|
||||||
|
const [ partner, setPartner ] = useState([])
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getMainInfo();
|
||||||
|
getPartner();
|
||||||
|
window.addEventListener('scroll', throttleHandleScroll);
|
||||||
|
return ComponentWillUnmount;
|
||||||
|
},[])
|
||||||
|
|
||||||
|
function ComponentWillUnmount() {
|
||||||
|
window.removeEventListener("scroll", throttleHandleScroll);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleScroll() {
|
||||||
|
let clientHeight = document.documentElement.clientHeight; //可视区域高度
|
||||||
|
let scrollTop = document.documentElement.scrollTop; //滚动条滚动高度
|
||||||
|
|
||||||
|
setFixedMenuOpacity((scrollTop - 650) / 100)
|
||||||
|
|
||||||
|
homePage.map((e, index) => {
|
||||||
|
let f = checkPosi(e.id ,clientHeight,scrollTop);
|
||||||
|
if(f){
|
||||||
|
setActive( index );
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const throttleHandleScroll = throttle(handleScroll, 100)
|
||||||
|
|
||||||
|
function checkPosi(ele,clientHeight,scrollTop) {
|
||||||
|
if(document.getElementById(ele)){
|
||||||
|
var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
|
||||||
|
var b = document.getElementById(ele).clientHeight + (clientHeight/4);
|
||||||
|
if(a>0 || a<-b){
|
||||||
|
return false;
|
||||||
|
}else{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollToAnchor = (anchorName) => {
|
||||||
|
if (anchorName) {
|
||||||
|
let anchorElement = document.getElementById(anchorName);
|
||||||
|
if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMainInfo = () => {
|
||||||
|
getBaseInfo().then(result => {
|
||||||
|
setMainInfo(result.data);
|
||||||
|
}).catch(console.error())
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPartner = () => {
|
||||||
|
getPartnerList().then(res => {
|
||||||
|
setPartner(res.rows);
|
||||||
|
}).catch(console.error())
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const matchItem = (item) => {
|
||||||
|
return item === active;
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className="page">
|
||||||
|
|
||||||
|
<div className="back-img-1"></div>
|
||||||
|
<div className="back-img-2"></div>
|
||||||
|
|
||||||
|
<div className="banner" style={{ backgroundImage: `url('http://fpoimg.com/1920x440')` }}></div>
|
||||||
|
|
||||||
|
<div className="fixed-menu" style={{ opacity: fixedMenuOpacity }}>
|
||||||
|
<div className="guide-line" style={{ marginTop: `${ active * 38 + 27}px` }}><div></div><div></div></div>
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
|
||||||
|
return (
|
||||||
|
<div key={key}
|
||||||
|
className={`${matchItem( key ) ? 'menu-item menu-item-active' : 'menu-item'}`}
|
||||||
|
>
|
||||||
|
<a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="introduction">
|
||||||
|
<div className="module-header">
|
||||||
|
<img src={ titleIcon } alt="" />
|
||||||
|
<div className="title">
|
||||||
|
<span>大会介绍</span>
|
||||||
|
<span>INTRODUCTION TO THE CONFERENCE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="intro-content">
|
||||||
|
{ mainInfo.introductionContent }
|
||||||
|
</div>
|
||||||
|
<ul className="menu">
|
||||||
|
{
|
||||||
|
homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
|
||||||
|
return (
|
||||||
|
<li key={key}
|
||||||
|
className={`${matchItem(item.id) ? 'menu-item menu-item-active' : 'menu-item'}`}
|
||||||
|
// onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
|
||||||
|
// onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
|
||||||
|
>
|
||||||
|
<a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<MeetingAgenda></MeetingAgenda>
|
||||||
|
<ConferenceGuide></ConferenceGuide>
|
||||||
|
<div className="back-img-4"></div>
|
||||||
|
<Member></Member>
|
||||||
|
<div className="partner wrapper" id="partner">
|
||||||
|
<div className="module-header">
|
||||||
|
<img src={ titleIcon } alt="" />
|
||||||
|
<div className="title">
|
||||||
|
<span>合作伙伴</span>
|
||||||
|
<span>PARTNERS</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
partner && partner.length && partner.length > 0 &&
|
||||||
|
<div className="partner-content">
|
||||||
|
{
|
||||||
|
partner.map((e, k) => {
|
||||||
|
return (
|
||||||
|
e.zonePartnersList.length > 0 ?
|
||||||
|
<div className="partner-type" key={ k }>
|
||||||
|
<div className="type-title">
|
||||||
|
<img src={ greenRight } alt="" className="title-icon"/>
|
||||||
|
<span>{ e.typeName }</span>
|
||||||
|
<div className="device"></div>
|
||||||
|
</div>
|
||||||
|
<div className="type-content">
|
||||||
|
{
|
||||||
|
e.zonePartnersList.map((i, subK) => {
|
||||||
|
return <a key={ subK } href={ i.link } target="_blank">
|
||||||
|
<img src={ i.logo } alt=""/>
|
||||||
|
</a>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:''
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{/* <div className="partner-type">
|
||||||
|
<div className="type-title">
|
||||||
|
<img src={ greenRight } alt="" className="title-icon"/>
|
||||||
|
<span>主办单位</span>
|
||||||
|
<div className="device"></div>
|
||||||
|
</div>
|
||||||
|
<div className="type-content">
|
||||||
|
{
|
||||||
|
[1,2,3].map((i, k) => {
|
||||||
|
return <img src="http://fpoimg.com/160x40" alt="" key={ k }/>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default HomePage;
|
||||||
|
|
@ -0,0 +1,466 @@
|
||||||
|
.page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.back-img-1 {
|
||||||
|
background: url('img/homePage/back-img-1.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 933px;
|
||||||
|
right: 0;
|
||||||
|
// opacity: 45%;
|
||||||
|
width: 455px;
|
||||||
|
height: 1026px;
|
||||||
|
}
|
||||||
|
.back-img-2 {
|
||||||
|
background: url('img/homePage/back-img-2.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 1390px;
|
||||||
|
left: 0;
|
||||||
|
// opacity: 45%;
|
||||||
|
width: 670px;
|
||||||
|
height: 377px;
|
||||||
|
}
|
||||||
|
.back-img-3 {
|
||||||
|
background: url('img/homePage/back-img-3.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
// opacity: 45%;
|
||||||
|
width: 100vw;
|
||||||
|
height: 590px;
|
||||||
|
}
|
||||||
|
.back-img-4 {
|
||||||
|
background: url('img/homePage/back-img-4.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 1295px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -60px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.module-header {
|
||||||
|
display: flex;
|
||||||
|
height: 79px;
|
||||||
|
img {
|
||||||
|
margin-right: 7px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
span:first-child {
|
||||||
|
font-family:Alimama ShuHeiTi;
|
||||||
|
color:#0e1015;
|
||||||
|
font-size:34px;
|
||||||
|
}
|
||||||
|
span:last-child {
|
||||||
|
font-family:PingFang SC;
|
||||||
|
color:#8e93a1;
|
||||||
|
font-size:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height:440px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
.fixed-menu {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 500px;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
.guide-line {
|
||||||
|
display: flex;
|
||||||
|
height: 4px;
|
||||||
|
margin-top: 25px;
|
||||||
|
transition: 0.3s margin;
|
||||||
|
div {
|
||||||
|
width: 38px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #4a5b74;
|
||||||
|
}
|
||||||
|
div:last-child {
|
||||||
|
margin-left: 7px;
|
||||||
|
width: 10px;
|
||||||
|
height: 4px;
|
||||||
|
background-image: linear-gradient(134.06deg,#0d41c5 0%,#4d7df6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item {
|
||||||
|
height: 21px;
|
||||||
|
line-height: 21px;
|
||||||
|
margin: 17.5px 16px;
|
||||||
|
}
|
||||||
|
.menu-item-active {
|
||||||
|
color: #0d41c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.introduction {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width:1200px;
|
||||||
|
height:399px;
|
||||||
|
background-color:#ffffff;
|
||||||
|
border-radius:8px;
|
||||||
|
box-shadow:0px 3px 8px rgba(13, 65, 197, 0.04);
|
||||||
|
margin-top: -60px;
|
||||||
|
background: #FFFFFF url('img/homePage/introduction-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 48px 38px 0 38px;
|
||||||
|
.intro-content {
|
||||||
|
width:1125px;
|
||||||
|
height:179px;
|
||||||
|
margin-top: 22px;
|
||||||
|
background-color:#f7f9fd;
|
||||||
|
border-radius:14px;
|
||||||
|
font-family:PingFang SC;
|
||||||
|
color:#0e1015;
|
||||||
|
padding: 20px 30px;
|
||||||
|
line-height:32px;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
height: 76px;
|
||||||
|
align-self: center;
|
||||||
|
.menu-item {
|
||||||
|
padding: 0 15px;
|
||||||
|
margin: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight:700;
|
||||||
|
color:#252b3a;
|
||||||
|
font-size:16px;
|
||||||
|
&:hover {
|
||||||
|
color:#0d41c5 !important;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item-active {
|
||||||
|
font-weight:900;
|
||||||
|
color:#0d41c5;
|
||||||
|
border-bottom: 2px solid #0d41c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agenda {
|
||||||
|
.date {
|
||||||
|
display: flex;
|
||||||
|
height: 46px;
|
||||||
|
color:#252b3a;
|
||||||
|
font-size:16px;
|
||||||
|
border-bottom:1px solid rgba(9, 37, 77, 0.03);
|
||||||
|
margin-top: 30px;
|
||||||
|
.date-item {
|
||||||
|
padding: 12px 38px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.date-item-active {
|
||||||
|
border-bottom: 2px solid #315ccd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
// position: relative;
|
||||||
|
margin-top: 36px;
|
||||||
|
display: flex;
|
||||||
|
.content-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
width: 100%;
|
||||||
|
.meeting {
|
||||||
|
background-image:linear-gradient(93.96deg,#355ccd 0%,#2c5cce 100%);
|
||||||
|
height:41px;
|
||||||
|
line-height: 21px;
|
||||||
|
width:509px;
|
||||||
|
color:#ffffff;
|
||||||
|
padding: 10px 24px;
|
||||||
|
margin-left: 104px;
|
||||||
|
span, a:not(:last-child) {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agenda-detail {
|
||||||
|
border-top: 1px solid #aebee5;
|
||||||
|
position: relative;
|
||||||
|
.dashed-line {
|
||||||
|
width: 85px;
|
||||||
|
border-bottom: 1px dashed #0d41c5;
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
left: -8px;
|
||||||
|
transform: rotate(34deg);
|
||||||
|
}
|
||||||
|
.agenda-list {
|
||||||
|
margin-left: 71px;
|
||||||
|
padding-left: 33px;
|
||||||
|
margin-top: 46px;
|
||||||
|
border-left: 1px dashed #0d41c5;
|
||||||
|
.agenda-item {
|
||||||
|
position: relative;
|
||||||
|
height: 43px;
|
||||||
|
border-bottom: 1px solid #aaafbe3a;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
line-height: 18px;
|
||||||
|
span:not(:last-child) {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
left: -43px;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 18.4px;
|
||||||
|
height: 18.4px;
|
||||||
|
background: url('img/homePage/item-dot.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agenda-list2 {
|
||||||
|
margin-left: 71px;
|
||||||
|
margin-top: 46px;
|
||||||
|
border-left: 1px dashed #0d41c5;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.agenda-item2 {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
padding: 26px 14px;
|
||||||
|
background: url('img/homePage/item-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-left: 18px;
|
||||||
|
margin-top: 26px;
|
||||||
|
p {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color:#4c5876;
|
||||||
|
font-size:14px;
|
||||||
|
line-height:24px;
|
||||||
|
a {
|
||||||
|
margin-right: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
width: 300px;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
color:#1f2329;
|
||||||
|
font-size:16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(3n + 1)::before {
|
||||||
|
left: -27px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
content: '';
|
||||||
|
width: 18.4px;
|
||||||
|
height: 18.4px;
|
||||||
|
background: url('img/homePage/item-dot.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.meeting-card {
|
||||||
|
background: unset;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-agenda {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.guide {
|
||||||
|
z-index: 1;
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
.wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.guide-content {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
.left-img {
|
||||||
|
width: 314px;
|
||||||
|
height: 374px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.right-img {
|
||||||
|
width: 544px;
|
||||||
|
height: 359px;
|
||||||
|
}
|
||||||
|
.guide-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 330px;
|
||||||
|
height: 359px;
|
||||||
|
overflow: visible;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #ffffff;
|
||||||
|
.guide-item {
|
||||||
|
width: 330px;
|
||||||
|
height: 103px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1px solid #e2e8f5;
|
||||||
|
padding: 13px 15px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
transition: 0.3s all;
|
||||||
|
cursor: pointer;
|
||||||
|
& p:first-child {
|
||||||
|
width: 300px;
|
||||||
|
font-weight:700;
|
||||||
|
color:#0e1015;
|
||||||
|
font-size:15px;
|
||||||
|
}
|
||||||
|
.item-time {
|
||||||
|
color:#a1a5aa;
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: 0.5s all;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
width: 398px;
|
||||||
|
box-shadow:0px 0px 12px rgba(91, 106, 101, 0.2);
|
||||||
|
img {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
.item-time {
|
||||||
|
color:#0d41c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
margin: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #0d41c5;
|
||||||
|
img {
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
transition: 0.3s all;
|
||||||
|
margin-left: 5px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: #0d41c5;
|
||||||
|
img {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.member {
|
||||||
|
z-index: 1;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
.member-list {
|
||||||
|
margin-top: 42px;
|
||||||
|
.member-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.home-page-item {
|
||||||
|
margin-right: 50px;
|
||||||
|
&:nth-child(5n) {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.partner {
|
||||||
|
z-index: 1;
|
||||||
|
.partner-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.partner-type {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 30px;
|
||||||
|
width:fit-content;
|
||||||
|
height: 80px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0px 0px 6px rgba(28, 48, 175, 0.03);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 21px;
|
||||||
|
.type-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #0e1015;
|
||||||
|
font-size: 20px;
|
||||||
|
span {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 17px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
.device {
|
||||||
|
width: 0.87px;
|
||||||
|
height: 40.39px;
|
||||||
|
background-image: linear-gradient(180deg,rgba(1, 151, 101, 0) 0%,#019765 48.53%,rgba(1, 151, 101, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type-content {
|
||||||
|
img {
|
||||||
|
margin-left: 10px;
|
||||||
|
max-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
width: 1200px;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-carousel .slick-dots li.slick-active {
|
||||||
|
width: 59px;
|
||||||
|
button {
|
||||||
|
background-image:linear-gradient(93.96deg,#078b6c 0%,#043ec7 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-carousel .slick-dots li {
|
||||||
|
width: 59px;
|
||||||
|
button {
|
||||||
|
background-color:#adb0b8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-carousel .slick-dots-bottom {
|
||||||
|
bottom: -46px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
import './index.less'
|
||||||
|
import subdot from 'img/homePage/item-dot-2.png'
|
||||||
|
import main from 'img/homePage/main-icon.png'
|
||||||
|
import sub from 'img/homePage/sub-icon.png'
|
||||||
|
import titleIcon from 'img/homePage/title-icon.png'
|
||||||
|
|
||||||
|
import RenderHtml from '../../components/renderHtml'
|
||||||
|
import { useLocation } from 'umi';
|
||||||
|
import { Spin } from 'antd'
|
||||||
|
import { Base64 } from 'js-base64';
|
||||||
|
import { getDocList, getSubAgenda } from '../../utils/request/api'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { config, meetingAgenda } from '../../constants/info'
|
||||||
|
|
||||||
|
|
||||||
|
function MeetingAgenda(){
|
||||||
|
|
||||||
|
const location = useLocation();
|
||||||
|
const [activeTab, setActiveTab] = useState(meetingAgenda.dateList[0])
|
||||||
|
const [ mainList, setMainList ] = useState([])
|
||||||
|
const [ subList, setSubList ] = useState([])
|
||||||
|
const [ isSpin , setIsSpin ] = useState(false);
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getMeetingAgendas();
|
||||||
|
},[activeTab])
|
||||||
|
|
||||||
|
const getMeetingAgendas = () => {
|
||||||
|
getDocList(config.agendaIds[activeTab][0], ).then(res => {
|
||||||
|
setMainList(res.rows)
|
||||||
|
})
|
||||||
|
setIsSpin(true)
|
||||||
|
getSubAgenda(config.agendaIds[activeTab][1], ).then(res => {
|
||||||
|
let list = []
|
||||||
|
res.rows.map(e => {
|
||||||
|
e.content = Base64.decode(e.content)
|
||||||
|
list.push(e)
|
||||||
|
})
|
||||||
|
setSubList(list)
|
||||||
|
setIsSpin(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="agenda wrapper" id="meeting-agenda">
|
||||||
|
<div className="module-header">
|
||||||
|
<img src={ titleIcon } alt="" />
|
||||||
|
<div className="title">
|
||||||
|
<span>会议议程</span>
|
||||||
|
<span>MEETING AGENDA</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="date">
|
||||||
|
{
|
||||||
|
meetingAgenda.dateList.map((i ,k) => {
|
||||||
|
return <div
|
||||||
|
className={ `date-item ${ activeTab === i ? 'date-item-active' : '' }` }
|
||||||
|
onClick={() => { setActiveTab(i) }}
|
||||||
|
key={ k }
|
||||||
|
>
|
||||||
|
{ i }
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<img src={ main } alt="" className="content-icon"/>
|
||||||
|
<div className="content-right">
|
||||||
|
<div className="meeting">
|
||||||
|
<span>腾讯会议号：360451552</span>
|
||||||
|
<a>进入B站直播间</a>
|
||||||
|
<a>进入直播间</a>
|
||||||
|
</div>
|
||||||
|
<div className="agenda-detail">
|
||||||
|
<div className="top-dot"></div>
|
||||||
|
<div className="bottom-dot"></div>
|
||||||
|
<div className="dashed-line"></div>
|
||||||
|
<div className="agenda-list">
|
||||||
|
{
|
||||||
|
mainList && mainList.length > 0 && mainList.map((i,k) => {
|
||||||
|
return <p className="agenda-item" key={ k }>
|
||||||
|
<span>{ i.name }</span>
|
||||||
|
</p>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<img src={ sub } alt="" className="content-icon"/>
|
||||||
|
<div className="content-right">
|
||||||
|
<div className="agenda-detail sub-agenda">
|
||||||
|
<div className="top-dot"></div>
|
||||||
|
<div className="bottom-dot"></div>
|
||||||
|
<div className="dashed-line"></div>
|
||||||
|
<Spin spinning={isSpin}>
|
||||||
|
<div className="agenda-list2">
|
||||||
|
{
|
||||||
|
subList && subList.length > 0 && subList.map((i,k) => {
|
||||||
|
return <div className="agenda-item2" key={ k }>
|
||||||
|
<p className="item-title">
|
||||||
|
<img src={ subdot } alt="" />
|
||||||
|
<span className="task-hide">{ i.name }</span>
|
||||||
|
</p>
|
||||||
|
<RenderHtml className="meeting-card" value={ i.content } url={ location } />
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
export default MeetingAgenda
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import './index.less'
|
||||||
|
import MemberItem from '../../components/memberitem'
|
||||||
|
import { Carousel } from 'antd'
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import titleIcon from 'img/homePage/title-icon.png'
|
||||||
|
import { getMemberList } from '../../utils/request/api'
|
||||||
|
|
||||||
|
|
||||||
|
function Member(props) {
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getList()
|
||||||
|
},[])
|
||||||
|
|
||||||
|
const [ topics ,setTopics ] = useState([]);
|
||||||
|
|
||||||
|
const getList = () => {
|
||||||
|
getMemberList().then(res => {
|
||||||
|
getUnit(res.rows)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getUnit(array){
|
||||||
|
const newArray = [];
|
||||||
|
for(let i = 0; i< array.length;) {
|
||||||
|
newArray.push(array.slice(i, i += 10));
|
||||||
|
}
|
||||||
|
setTopics(newArray)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="member wrapper" id="member">
|
||||||
|
<div className="module-header">
|
||||||
|
<img src={ titleIcon } alt="" />
|
||||||
|
<div className="title">
|
||||||
|
<span>与会嘉宾</span>
|
||||||
|
<span>ATTENDING GUESTS</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
topics.length > 0 &&
|
||||||
|
<Carousel className="member-list">
|
||||||
|
{
|
||||||
|
topics.map((e, k) => {
|
||||||
|
return <div key={ k }>
|
||||||
|
<div className="member-wrapper">
|
||||||
|
{
|
||||||
|
e.map((i, subK) => {
|
||||||
|
return <MemberItem key={ subK } className="home-page-item" data={ i }></MemberItem>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Carousel>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Member
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import yayJpg from '../assets/yay.jpg';
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Yay! Welcome to umi!</h2>
|
||||||
|
<p>
|
||||||
|
<img src={yayJpg} width="388" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To get started, edit <code>pages/index.tsx</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import './index.less'
|
||||||
|
import RenderHtml from '../../components/renderHtml'
|
||||||
|
import { useLocation, useParams } from 'umi';
|
||||||
|
import { Base64 } from 'js-base64';
|
||||||
|
import { Breadcrumb , Divider } from 'antd';
|
||||||
|
import views from 'img/views.png'
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { getDocDetail } from '../../utils/request/api'
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { defaultPage } from '../../constants/info'
|
||||||
|
|
||||||
|
|
||||||
|
function Detail() {
|
||||||
|
const location = useLocation();
|
||||||
|
const { id } = location.pathname.includes('information') ? useParams() : { id: defaultPage[location.pathname] };
|
||||||
|
const [ detail, setDetail ] = useState({});
|
||||||
|
const [ cmsDir , setCmsDir ] = useState(undefined);
|
||||||
|
const [ content , setContent]=useState(undefined);
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getDetail();
|
||||||
|
},[id])
|
||||||
|
|
||||||
|
const getDetail = () => {
|
||||||
|
getDocDetail(id).then(res => {
|
||||||
|
setDetail(res.data);
|
||||||
|
setCmsDir(res.data.cmsDir);
|
||||||
|
setContent(Base64.decode(res.data.content));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return <div className="detail">
|
||||||
|
{
|
||||||
|
detail &&
|
||||||
|
<div className="detail-content">
|
||||||
|
<Breadcrumb separator=">">
|
||||||
|
{ cmsDir && <Breadcrumb.Item href="information">{ cmsDir.name }</Breadcrumb.Item> }
|
||||||
|
<Breadcrumb.Item>正文</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<div className="detail-info">
|
||||||
|
<div className="info-text-main">
|
||||||
|
<p className="info-name">{ detail.name }</p>
|
||||||
|
<ul className="info-ul-value">
|
||||||
|
{ cmsDir && <li>发布于{ cmsDir.createdAt }</li> }
|
||||||
|
{ detail.visits && <li><img src={ views } alt="" className="mr5" />{ detail.visits }</li> }
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Divider dashed={true} />
|
||||||
|
{
|
||||||
|
content ?
|
||||||
|
<RenderHtml className="informations_detail imageLayerParent" value={ content } url={ location } />
|
||||||
|
:
|
||||||
|
<span>暂无详情~</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
export default Detail
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import './index.less'
|
||||||
|
import { Spin, Divider } from 'antd';
|
||||||
|
import { useState , useEffect } from 'react';
|
||||||
|
import { information } from '../../constants/info';
|
||||||
|
import { getDocList } from '../../utils/request/api'
|
||||||
|
|
||||||
|
function Information() {
|
||||||
|
const [ isSpin , setIsSpin ] = useState(false);
|
||||||
|
const [ informationList , setInformationList ] = useState([]);
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getAllLists();
|
||||||
|
},[])
|
||||||
|
|
||||||
|
const getAllLists = () => {
|
||||||
|
setIsSpin(true);
|
||||||
|
const requestList = [];
|
||||||
|
information.category.map(e => {
|
||||||
|
requestList.push(getList(e.id, e.anchor))
|
||||||
|
})
|
||||||
|
Promise.all(requestList).then(res => {
|
||||||
|
let totalList = {}
|
||||||
|
res.map(e => {
|
||||||
|
totalList[e.name] = e.list
|
||||||
|
})
|
||||||
|
setInformationList(totalList)
|
||||||
|
setIsSpin(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getList = (id, name) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
getDocList(id).then(res => {
|
||||||
|
const list = res.rows
|
||||||
|
list.forEach(e => {
|
||||||
|
if (e.publishTime) {
|
||||||
|
let time = e.publishTime.split('/');
|
||||||
|
e.date1 = `${time[0]}年${time[1]}月`;
|
||||||
|
e.date2 = `${time[2]}日`;
|
||||||
|
} else {
|
||||||
|
e.date1 = e.date2 = '-'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
resolve({ name, list: list });
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollToAnchor = (anchorName) => {
|
||||||
|
if (anchorName) {
|
||||||
|
let anchorElement = document.getElementById(anchorName);
|
||||||
|
if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="information">
|
||||||
|
<div className="header">
|
||||||
|
<p className="title">{ information.title }</p>
|
||||||
|
<p className="desc">{ information.desc }</p>
|
||||||
|
{
|
||||||
|
information.category &&
|
||||||
|
<div className="tab">
|
||||||
|
{
|
||||||
|
information.category.map((e, k) => {
|
||||||
|
return <div key={ k } onClick={() => { scrollToAnchor(e.anchor) }} className="tab-item">{ e.title }</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<Spin spinning={isSpin}>
|
||||||
|
{
|
||||||
|
information.category.map((e) => {
|
||||||
|
return <div className="content" id={ e.anchor } key={ e.anchor }>
|
||||||
|
<div className="content-title">
|
||||||
|
<p>{ e.title }</p>
|
||||||
|
<p>{ e.eng }</p>
|
||||||
|
</div>
|
||||||
|
<div className="content-wrapper">
|
||||||
|
{
|
||||||
|
informationList[e.anchor] && informationList[e.anchor].map(( e, k ) => {
|
||||||
|
return <div className="content-item" key={ k }>
|
||||||
|
<div className="item-left">{ e.date2 }</div>
|
||||||
|
<div className="item-right">
|
||||||
|
<p className="time">{ e.date1 }</p>
|
||||||
|
<Divider style={{ color: 'rgba(9, 37, 77, 0.1)', margin: '0px' }}/>
|
||||||
|
<p className="item-title task-hide">{ e.name }</p>
|
||||||
|
<p className="item-desc task-hide-2">{ e.summary }</p>
|
||||||
|
<a href={ `information/detail/${ e.id }` } className="read-more">阅读全文 →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Information
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
.information {
|
||||||
|
.ant-spin-container {
|
||||||
|
background: url('img/information-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100vw;
|
||||||
|
height: 220px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-top: 30px;
|
||||||
|
background: url('img/information-header.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
font-size: 15px;
|
||||||
|
.title {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
margin-top: 19px;
|
||||||
|
opacity: 80%;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height:62px;
|
||||||
|
background-color:rgba(255, 255, 255, 0.03);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.tab-item {
|
||||||
|
margin: 0 69px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color:#bfd1ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
.content-title {
|
||||||
|
width: 531px;
|
||||||
|
height: 157px;
|
||||||
|
background: url('img/info-title-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
p:first-child {
|
||||||
|
font-family: Alimama ShuHeiTi;
|
||||||
|
color: #0e1015;
|
||||||
|
font-size: 40px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
p:last-child {
|
||||||
|
font-family:PingFang SC;
|
||||||
|
color: #0d41c5;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-wrapper {
|
||||||
|
.content-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.item-left {
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0d41c5;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-right: 30px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.item-right {
|
||||||
|
flex: 1;
|
||||||
|
.time {
|
||||||
|
color: #a1a6ab;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #252b3a;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.item-desc {
|
||||||
|
color: #68757f;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.read-more {
|
||||||
|
float: right;
|
||||||
|
color: #0d41c5;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
|
&:hover {
|
||||||
|
color:#001b60;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail{
|
||||||
|
background: url('img/information-detail-bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
.detail-content {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0px auto;
|
||||||
|
padding: 30px 0px;
|
||||||
|
}
|
||||||
|
.ant-breadcrumb {
|
||||||
|
a {
|
||||||
|
color: #0d41c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail-info{
|
||||||
|
background-color:#fefefe;
|
||||||
|
border-radius:4px;
|
||||||
|
box-shadow:0px 0px 15px rgba(30, 47, 162, 0.06);
|
||||||
|
padding:30px 35px 50px;
|
||||||
|
margin-top: 28px;
|
||||||
|
.info-text-main{
|
||||||
|
.info-name{
|
||||||
|
color:#1f2329;
|
||||||
|
font-size:22px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-bottom: 14px!important;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.info-ul-value{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
li{
|
||||||
|
color:#4c5876;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 25px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
import './index.less'
|
||||||
|
import { Spin } from 'antd';
|
||||||
|
import { useState , useEffect } from 'react';
|
||||||
|
import MemberItem from '../../components/memberitem'
|
||||||
|
import arraw from 'img/arraw.png'
|
||||||
|
import { getOrganization } from '../../utils/request/api'
|
||||||
|
|
||||||
|
function Organization() {
|
||||||
|
const [ isSpin , setIsSpin ] = useState(false);
|
||||||
|
const [ organization, setOrganization ] = useState([])
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
getList();
|
||||||
|
},[])
|
||||||
|
|
||||||
|
const getList = () => {
|
||||||
|
setIsSpin(true);
|
||||||
|
getOrganization().then(res => {
|
||||||
|
setOrganization(res.rows);
|
||||||
|
setIsSpin(false);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return <div className="organization">
|
||||||
|
<div className="back-img"></div>
|
||||||
|
<Spin spinning={isSpin}>
|
||||||
|
{
|
||||||
|
organization && organization.length > 0 && organization.map((i, k) => {
|
||||||
|
return <div className="module" key={ k }>
|
||||||
|
<div className="module-title">
|
||||||
|
<img src={ arraw } alt="" />
|
||||||
|
<span>{ i.typeName }</span>
|
||||||
|
<img src={ arraw } alt="" />
|
||||||
|
</div>
|
||||||
|
<p className="module-desc">{ i.typeIntroduction }</p>
|
||||||
|
{
|
||||||
|
i.zoneMemberList && i.zoneMemberList.length > 0 && <div className="module-content">
|
||||||
|
{
|
||||||
|
i.zoneMemberList.map(( e, subK ) => {
|
||||||
|
return <MemberItem key={ subK } className="module-item" data={ e }></MemberItem>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Organization
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
.organization {
|
||||||
|
width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
.back-img {
|
||||||
|
background-image: url('img/organization-bg.png');
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
position: absolute;
|
||||||
|
height: calc(100% + 60px);
|
||||||
|
width: 100vw;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.module {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
.module-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family:Alimama ShuHeiTi;
|
||||||
|
color:#0e1015;
|
||||||
|
font-size:34px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
span {
|
||||||
|
margin: 0 30px;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
left: -10px;
|
||||||
|
opacity: 9%;
|
||||||
|
width: 154px;
|
||||||
|
height: 11px;
|
||||||
|
background-color: #0d41c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 48px;
|
||||||
|
height: 21px;
|
||||||
|
&:last-child {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.module-desc {
|
||||||
|
color: #252b3a;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 37px;
|
||||||
|
}
|
||||||
|
.module-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.module-item {
|
||||||
|
margin-right: 50px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
&:nth-child(5n) {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
import marked from 'marked'
|
||||||
|
import { escape } from 'marked/src/helpers'
|
||||||
|
|
||||||
|
function indentCodeCompensation(raw, text) {
|
||||||
|
const matchIndentToCode = raw.match(/^(\s+)(?:```)/);
|
||||||
|
if (matchIndentToCode === null) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
const indentToCode = matchIndentToCode[1];
|
||||||
|
return text
|
||||||
|
.split('\n')
|
||||||
|
.map(node => {
|
||||||
|
const matchIndentInNode = node.match(/^\s+/);
|
||||||
|
if (matchIndentInNode === null) {
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
const [indentInNode] = matchIndentInNode;
|
||||||
|
if (indentInNode.length >= indentToCode.length) {
|
||||||
|
return node.slice(indentToCode.length);
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
})
|
||||||
|
.join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//兼容之前的 ##标题式写法
|
||||||
|
let toc = []
|
||||||
|
let ctx = ["<ul>"]
|
||||||
|
const renderer = new marked.Renderer()
|
||||||
|
const headingRegex = /^ *(#{1,6}) *([^\n]+?) *(?:#+ *)?(?:\n+|$)/
|
||||||
|
|
||||||
|
export function cleanToc() {
|
||||||
|
toc = []
|
||||||
|
ctx = ["<ul>"]
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildToc(coll, k, level, ctx) {
|
||||||
|
if (k >= coll.length || coll[k].level <= level) { return k }
|
||||||
|
var node = coll[k]
|
||||||
|
ctx.push("<li><a href='#" + node.anchor + "'>" + node.text + "</a>")
|
||||||
|
k++
|
||||||
|
var childCtx = []
|
||||||
|
k = buildToc(coll, k, node.level, childCtx)
|
||||||
|
if (childCtx.length > 0) {
|
||||||
|
ctx.push("<ul>")
|
||||||
|
childCtx.forEach(function (idm) {
|
||||||
|
ctx.push(idm)
|
||||||
|
});
|
||||||
|
ctx.push("</ul>")
|
||||||
|
}
|
||||||
|
ctx.push("</li>");
|
||||||
|
k = buildToc(coll, k, level, ctx)
|
||||||
|
return k
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getTocContent() {
|
||||||
|
buildToc(toc, 0, 0, ctx);
|
||||||
|
ctx.push("</ul>");
|
||||||
|
return ctx.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenizer = {
|
||||||
|
heading(src) {
|
||||||
|
const cap = headingRegex.exec(src)
|
||||||
|
if (cap) {
|
||||||
|
return {
|
||||||
|
type: 'heading',
|
||||||
|
raw: cap[0],
|
||||||
|
depth: cap[1].length,
|
||||||
|
text: cap[2]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fences(src) {
|
||||||
|
const cap = this.rules.block.fences.exec(src)
|
||||||
|
if (cap) {
|
||||||
|
const raw = cap[0]
|
||||||
|
let text = indentCodeCompensation(raw, cap[3] || '')
|
||||||
|
const lang = cap[2] ? cap[2].trim() : cap[2]
|
||||||
|
if (['latex', 'katex', 'math'].indexOf(lang) >= 0) {
|
||||||
|
const id = next_id()
|
||||||
|
const expression = text
|
||||||
|
text = id
|
||||||
|
math_expressions[id] = { type: 'block', expression }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
type: 'code',
|
||||||
|
raw,
|
||||||
|
lang,
|
||||||
|
text
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const latexRegex = /(?:\${2})([^\n`]+?)(?:\${2})/gi
|
||||||
|
let katex_count = 0
|
||||||
|
const next_id = () => `__special_katext_id_${katex_count++}__`
|
||||||
|
let math_expressions = {}
|
||||||
|
|
||||||
|
export function getMathExpressions() {
|
||||||
|
return math_expressions
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resetMathExpressions() {
|
||||||
|
katex_count = 0
|
||||||
|
math_expressions = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function replace_math_with_ids(text) {
|
||||||
|
let rs = text.replace(latexRegex, (_match, expression) => {
|
||||||
|
const id = next_id()
|
||||||
|
math_expressions[id] = { type: 'inline', expression }
|
||||||
|
return id
|
||||||
|
})
|
||||||
|
|
||||||
|
return rs
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const original_listitem = renderer.listitem
|
||||||
|
renderer.listitem = function (text, task, checked) {
|
||||||
|
return original_listitem(replace_math_with_ids(text), task, checked)
|
||||||
|
}
|
||||||
|
|
||||||
|
const original_paragraph = renderer.paragraph
|
||||||
|
renderer.paragraph = function (text) {
|
||||||
|
return original_paragraph(replace_math_with_ids(text))
|
||||||
|
}
|
||||||
|
|
||||||
|
const original_tablecell = renderer.tablecell
|
||||||
|
renderer.tablecell = function (content, flags) {
|
||||||
|
return original_tablecell(replace_math_with_ids(content), flags)
|
||||||
|
}
|
||||||
|
|
||||||
|
renderer.code = function (code, infostring, escaped) {
|
||||||
|
const lang = (infostring || '').match(/\S*/)[0];
|
||||||
|
if (!lang) {
|
||||||
|
return '<pre class="prettyprint linenums"><code>'
|
||||||
|
+ (escaped ? code : escape(code, true))
|
||||||
|
+ '</code></pre>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (['latex', 'katex', 'math'].indexOf(lang) >= 0) {
|
||||||
|
return `<p class='editormd-tex'>${code}</p>`
|
||||||
|
} else {
|
||||||
|
return `<pre class="prettyprint linenums"><code class="language-${infostring}">${escaped ? code : escape(code, true)}</code></pre>\n`
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
renderer.heading = function (text, level, raw) {
|
||||||
|
let anchor = this.options.headerPrefix + raw.toLowerCase().replace(/[^\w\\u4e00-\\u9fa5]]+/g, '-');
|
||||||
|
toc.push({
|
||||||
|
anchor: anchor,
|
||||||
|
level: level,
|
||||||
|
text: text
|
||||||
|
})
|
||||||
|
let id = anchor.replace(/[.,/#!$%^&*;:{}=\-_`~()：，。¥；「」｜？》《～·【】‘、！]/g,"");
|
||||||
|
return '<h' + level + ' id="' + id + '" class="markdown_anchors"><a name="#'+id+'" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>' + text + '</h' + level + '>'
|
||||||
|
}
|
||||||
|
marked.setOptions({
|
||||||
|
silent: true,
|
||||||
|
smartypants: true,
|
||||||
|
gfm: true,
|
||||||
|
pedantic: false
|
||||||
|
})
|
||||||
|
|
||||||
|
marked.use({ tokenizer, renderer });
|
||||||
|
|
||||||
|
export default marked
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
|
||||||
|
import http from './index'
|
||||||
|
|
||||||
|
import { config } from '../../constants/info';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取基础信息
|
||||||
|
* @param {*} params
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getBaseInfo(params) {
|
||||||
|
return http({
|
||||||
|
url: `/api/zone/open/zoneKey/${config.zoneKey}`,
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取会议议程主会场（指定新闻列表）
|
||||||
|
* @param {*} cateId 指定专栏id
|
||||||
|
* @param {*} params
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getDocList(cateId, params) {
|
||||||
|
return http({
|
||||||
|
url: `/api/cms/doc/open/dir/${cateId}/docList`,
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取会议议程分会场（指定新闻列表内容）
|
||||||
|
* @param {*} cateId 指定专栏id
|
||||||
|
* @param {*} params
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getSubAgenda(cateId, params) {
|
||||||
|
return http({
|
||||||
|
url: `/api/cms/doc/open/dir/${cateId}/docContentList`,
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取会议指南（专区首页文章列表
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function gethomePageDocList() {
|
||||||
|
return http({
|
||||||
|
url: `/api/cms/doc/open/zone/${config.zoneId}/homePageDocList`,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取与会嘉宾
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getMemberList() {
|
||||||
|
return http({
|
||||||
|
url: `/api/zone/open/${config.zoneId}/member/homePageList`,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 合作伙伴
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getPartnerList() {
|
||||||
|
return http({
|
||||||
|
url: `/api/zone/open/${config.zoneId}/partners/list`,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取组织机构
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getOrganization(){
|
||||||
|
return http({
|
||||||
|
url:`/api/zone/open/${config.zoneId}/member/overviewList`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文章详情
|
||||||
|
* @param {*} id 文章id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getDocDetail(id){
|
||||||
|
return http({
|
||||||
|
url:`/api/cms/doc/open/${id}`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import axios from 'axios';
|
||||||
|
import { message , notification } from 'antd';
|
||||||
|
|
||||||
|
function beforeFetch(){
|
||||||
|
if (window.location.href.indexOf('localhost') < 0) {
|
||||||
|
axios.defaults.withCredentials = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const service = axios.create({
|
||||||
|
// baseURL: ,
|
||||||
|
timeout: 1800000, // 请求超时时间
|
||||||
|
});
|
||||||
|
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
const res = response||{};
|
||||||
|
if(res && res.data && res.data.code === 404){
|
||||||
|
message.error("错误链接！");
|
||||||
|
window.location.href = '/nopage';
|
||||||
|
return Promise.reject('error');
|
||||||
|
}else if(res && res.data && res.data.code === 500){
|
||||||
|
message.error(res.data.msg);
|
||||||
|
return Promise.reject('error');
|
||||||
|
}else{
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log(error);
|
||||||
|
// notification.open({
|
||||||
|
// message: "提示",
|
||||||
|
// description: error.message,
|
||||||
|
// });
|
||||||
|
// return Promise.reject(error);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return service;
|
||||||
|
}
|
||||||
|
|
||||||
|
const service = beforeFetch();
|
||||||
|
export default service;
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
export function throttle(fn, delay){
|
||||||
|
let timer = null; // 使用定时器实现
|
||||||
|
return function (){
|
||||||
|
let _this = this; // 当前 this 保存，以免后续处理中 this 丢失
|
||||||
|
if(!timer){
|
||||||
|
fn.apply(_this, arguments);
|
||||||
|
timer = setTimeout(function (){
|
||||||
|
timer = null;
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "./src/.umi/tsconfig.json"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
import 'umi/typings';
|
||||||
Loading…
Reference in New Issue