update

src/components/AddressList/index.jsx

+import React from 'react';
+import './index.less'
+
+
+const data = [{}, {}, {}, {}]
+const Index = () => {
+    return (
+        <div className="address-box">
+            {data.map((item, index) => (
+                <div className="address-item">
+                    cccc
+                    <img src="/img/rarrow.png" alt="" className='icon18'/>
+                </div>
+            ))}
+
+        </div>
+    );
+};
+
+export default Index;

src/components/AddressList/index.less

+.address-item{
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  margin-bottom: 1px;
+  background: #ffffff;
+}
+.address-box > .address-item:first-child{
+  border-radius: 6px 6px 0 0;
+}
+.address-box > .address-item:last-child{
+  border-radius: 0 0 6px 6px;
+}

src/components/TodoCard/index.jsx → src/components/LogCard/index.jsx

@@ -3,7 +3,7 @@ import './index.less'
 
 const Index = (props) => {
     return (
-        <div className="todo-card" onClick={props.onCLick}>
+        <div className="todo-card" onClick={props.onClick}>
             <div className="todo-title pos-aline">
                 <div className="pos-aline">
                     <div className="todo-tag pos-aline">

src/components/TodoCard/index.less → src/components/LogCard/index.less

+@import '../../variable.less';
+
 .todo-card{
 
 }
@@ -13,7 +15,7 @@
   height: 18px;
   font-size: 9px;
   padding: 0 5px;
-  background: #2087ED;
+  background: @primary;
   color: #ffffff;
   border-radius:3px;
 }
@@ -39,6 +41,7 @@
 .todo-footer{
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 15px 15px;
   background:rgba(255,255,255,1);
   border-radius: 0 0 6px 6px;

src/components/TopNotice/index.jsx → src/components/NoticeTab/index.jsx

@@ -7,7 +7,7 @@ const tabs = [
     { title: '未读', sub: '2' },
 ]
 
-const Index = () => {
+const Index = (props) => {
     return (
         <div className="pos-line">
             <div className="search-notice-box">

src/components/StepCard/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './index.less'
 
 const data = [{}, {}, {}, {s: '1'}, {s: '111', result: '11111'}]
-const Index = () => {
+const Index = (props) => {
     return (
         <div className="auto-step">
             <ul className="auto-step-card">

src/components/Steps/index.jsx

-import React from 'react';
-import {Steps, Icon} from 'antd-mobile'
-
-const Step = Steps.Step;
-// const data = [{}, {current: true}, {}]
-
-const Index = (props) => {
-    return (
-        <Steps direction={props.direction} current={3}>
-            <Step icon={<Icon type="check-circle" size="xxs"/>} />
-            <Step icon={<Icon type="check-circle" size="xxs"/>}/>
-            <Step status="error" icon={<Icon type="check-circle" size="xxs"/>}/>
-            {/*<Step icon={<div style={{width: 17, height: 17, borderRadius: '50%', background: 'gray'}}/>}/>*/}
-        </Steps>
-    );
-};
-
-export default Index;

src/components/Steps/index.less

-.step_success{
-  width: 16.7px;
-  height: 16.7px;
-  border-radius: 50%;
-}

src/components/TopSearch/index.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {Icon} from 'antd-mobile'
 import './index.less'
 
-class Index extends Component {
-    state={
-        status: false
-    };
-    topSearch = () => {
+
+const Index = (props) => {
+    const [status, setStatus] = useState(false);
+
+    const topSearch = () => {
         const input = document.getElementsByClassName("top-single-search");
-        this.props.onSearch(input[0].value);
-        let inputValue = input[0].value
-        this.setState({status: (inputValue != null && inputValue != undefined && inputValue != '')})
+        props.onSearch(input[0].value);
+        let inputValue = input[0].value;
+        setStatus(inputValue != null && inputValue != undefined && inputValue != '')
     };
-    clear = () => {
-        this.setState({status: false})
+    const clear = () => {
+        setStatus(false)
         const input = document.getElementsByClassName("top-single-search");
         input[0].value = null;
         input[0].focus();
     }
-    render() {
-        const {status} = this.state
     return (
         <div className="search-box">
             <Icon type="search" size="xs" className="search-svg"/>
-                <input onChange={this.topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
+            <input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
             {status && (
-                    <Icon type="cross-circle-o" color="rgba(35, 35, 35, 0.3)" size="xxs" className="clear-svg"  onClick={this.clear}/>
+                <Icon type="cross-circle-o" color="rgba(35, 35, 35, 0.3)" size="xxs" className="clear-svg"  onClick={clear}/>
             )}
 
         </div>
     );
-    }
-}
+};
 
 export default Index;

src/components/WorkCard/CardItem.jsx

-import React, {Component} from 'react';
+import React, {useState, useEffect} from 'react';
 import './index.less'
 
-class CardItem extends Component {
-    state = {
-        addStatus: false
-    }
-    componentWillReceiveProps(nextProps, nextContext) {
-        if (this.props.addStatus !== nextProps.addStatus) {
-            this.setState({ addStatus: nextProps.addStatus });
-        }
-    };
 
-    contentCLick = () => {
-        const {data, addCommon} = this.props;
-        const {addStatus} = this.state
-        !addStatus && !data.iconAdd && console.log(data.text);
+const CardItem = (props) => {
+    const {data, addStatus, type, addCommon, iconAction} = props;
+
+    const [status, setStatus] = useState(false);
+    useEffect(() => {
+        setStatus(addStatus)
+    }, [addStatus])
+
+    const contentCLick = () => {
+        !status && !data.iconAdd && console.log(data.text);
         data.iconAdd && addCommon()
     };
-    iconClick = () => {
-        const { iconAction} = this.props;
+    const iconClick = () => {
         iconAction()
-    }
-
-    render() {
-        const {data, type} = this.props;
-        const {addStatus} = this.state
+    };
     return (
-            <div className="card-content" onClick={this.contentCLick}>
+        <div className="card-content" onClick={contentCLick}>
             {data.text && (
                 <div className="card-content-box">
                     <div className="card-content-img">
                         {
-                                addStatus && !data.iconAdd && (
+                            status && !data.iconAdd && (
                                 <img
                                     src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
                                     className="card-content-img-icon"
                                     alt=""
-                                        onClick={this.iconClick}
+                                    onClick={iconClick}
                                 />
                             )
                         }
@@ -50,7 +42,6 @@ class CardItem extends Component {
             )}
         </div>
     );
-    }
-}
+};
 
 export default CardItem;

src/components/WorkCard/index.jsx

-import React, {Component} from 'react';
+import React from 'react';
 import './index.less'
 import CardItem from './CardItem'
 
-class Index extends Component {
-    render() {
-        const {title, type, addStatus, addCommon, data, iconAction} = this.props;
+const Index = (props) => {
+    const {title, type, addStatus, addCommon, data, iconAction} = props;
     const emptyIcon = type === 'edit' ? {
         text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
     } : {};
@@ -13,7 +12,6 @@ class Index extends Component {
     empty === 0 && data.push(emptyIcon, {}, {});
     empty === 1 && data.push(emptyIcon, {});
     empty === 2 && data.push(emptyIcon);
-
     return (
         <div>
             <div className="work-card-title">
@@ -34,9 +32,10 @@ class Index extends Component {
             </div>
         </div>
     );
-    }
-}
+};
 
 export default Index;
 
 
+
+

src/layout/CommonLayout.jsx

-import React, {  }  from 'react';
+import React, {Component} from 'react';
 import Footer from './Footer'
 import {withRouter} from 'react-router-dom'
 import './index.less'
 
-const CommonLayout = (props) => {
+
+class CommonLayout extends Component {
+    constructor(){
+        super();
+        this.resize = this.resize.bind(this)
+    }
+    resize = (defaultH) => {
+        const scrollHeight = document.body.scrollHeight;
+        const footer = document.getElementById("footer");
+        const content = document.getElementById("common-content")
+        if (footer) {
+            if (defaultH > scrollHeight) {
+                footer.classList.remove('footer');
+                footer.classList.add('footer-static')
+            }else {
+                footer.classList.add('footer')
+                footer.classList.remove('footer-static');
+
+            }
+        }
+        if (content) {
+            if (defaultH > scrollHeight) {
+                content.classList.remove('common-layout-content');
+                content.classList.add('common-layout-content-static');
+            }else {
+                content.classList.add('common-layout-content');
+                content.classList.remove('common-layout-content-static');
+            }
+        }
+
+        // alert(`defaultH: ${defaultH}   clientHeight: ${scrollHeight}`);
+    }
+    componentWillMount() {
+        const defaultH = document.body.scrollHeight;
+        window.addEventListener('resize', () => this.resize(defaultH))
+    }
+    componentWillUnmount() {
+        window.addEventListener('resize', this.resize)
+    }
+    render() {
         return (
             <div>
-            <div className="common-layout-content">
+                <div id="common-content" className="common-layout-content">
                     <div>
-                    {props.children}
+                        {this.props.children}
                     </div>
 
                 </div>
-            <Footer {...props}/>
+                <Footer {...this.props}/>
             </div>
         );
-};
+    }
+}
+
+
+
 
 export default withRouter(CommonLayout) ;

src/layout/Footer.jsx

@@ -25,13 +25,12 @@ class Footer extends Component {
         ];
 
         return (
-            <div className="footer">
+            <div id="footer" className="footer">
                 <TabBar
                     unselectedTintColor="#949494"
                     tintColor="#2E67EA"
                     barTintColor="white"
                 >
-
                     {tabItem.map(item => (
                         <TabBar.Item
                             key={item.key}

src/layout/index.less

@@ -4,6 +4,11 @@
   overflow: auto;
   padding-bottom: 10px
 }
+.common-layout-content-static{
+  position: fixed;
+  top: 0;left: 0;right: 0;bottom: 10px;
+  overflow: auto;
+}
 
 .footer-tab-icon{
   width: 18px;
@@ -15,7 +20,10 @@
   background: rgba(35,35,35, 0.5);
 }
 .footer{
-  width: 100%;
   position: fixed;
+  width: 100%;
   bottom: 0;
 }
+.footer-static{
+ display: none;
+}

src/pages/Backlog/Backlog.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {WhiteSpace, WingBlank, ActivityIndicator} from 'antd-mobile'
-import TodoCard from '../../components/TodoCard'
+import TodoCard from '../../components/LogCard'
 import TopSearch from '../../components/TopSearch'
 
+const Backlog = (props) => {
 
-class Index extends Component {
-    state={
-        loading: false
-    }
-    checkLog = () => {
-        this.props.history.push(`/blank/example/1`)
+    const [loading, setLoading] = useState(false)
+
+    const checkLog = () => {
+        props.history.push(`/blank/info/example/1`)
     }
-    render() {
-        const {loading} = this.state
     return (
         <WingBlank>
             <ActivityIndicator
@@ -26,7 +23,7 @@ class Index extends Component {
                 [{},{},{},{},{},{}].map((item, index) => (
                     <div key={index}>
                         <WhiteSpace/>
-                            <TodoCard data={item} onCLick={this.checkLog}/>
+                        <TodoCard data={item} onClick={checkLog}/>
                     </div>
 
                 ))
@@ -34,7 +31,6 @@ class Index extends Component {
 
         </WingBlank>
     );
-    }
-}
+};
 
-export default Index;
+export default Backlog;

src/pages/Communicate/Communicate.jsx

+import React, {Component} from 'react';
+import './index.less'
+
+class Communicate extends Component {
+
+    render() {
+        return (
+            <div>
+                <div className='breadBox'>
+                    <span className='currentLink'>科技创新委员会</span><span className='symbol'>&gt;</span><span>组织架构</span><span className='symbol'>&gt;</span><span>办公厅</span>
+                </div>
+                <div className='adMainBox'>
+                    <ul className='adListBox'>
+                            <li>
+                                <div className='itemBox'>
+                                    <h4 className='titleBar'>市委办公厅审核员</h4>
+                                    <div className='adContent'>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5'>
+                                                    <img src='/img/head.png' className='imgRes' />
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5 centerFont'>
+                                                   王
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div className='itemBox'>
+                                    <h4 className='titleBar'>市委办公厅审核员</h4>
+                                    <div className='adContent'>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5'>
+                                                    <img src='/img/head.png' className='imgRes' />
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                        <div className='peopleList'>
+                                            <p className='subItem'>
+                                                <span className='cicrleHead mr-5 centerFont'>
+                                                   王
+                                                </span>
+                                               王磊
+                                            </p>
+                                            <p className='subItem'>
+                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                         </li>
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Communicate;

src/pages/Communicate/index.less

+@import '../../variable.less';
+
+.breadBox{
+  padding:15px 20px;
+  font-size: 14px;
+  background-color: #fff;
+  line-height: 1.5;
+}
+.currentLink{
+  color:@primary;
+}
+.adMainBox{
+  padding:10px 18px;
+}
+.adListBox{
+  padding:15px;
+  background-color: #fff;
+  border:0px solid rgba(0, 0, 0, 0.1);
+  border-radius:5px;
+}
+.adListBox{
+  li{
+    margin-bottom:10px ;
+    border-bottom: 1px solid @grayLight;
+    &:last-child{
+      padding-top: 0;
+      border-bottom: none;
+    }
+  }
+  .titleBar{
+    font-size: 16px;
+    padding-top: 0;
+  }
+  .adContent{
+    padding:15px 0;
+  }
+}
+.peopleList{
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.5;
+  align-items:center;
+  padding:10px 0;
+}
+.peopleList .subItem{
+  flex:1;
+  font-size: 14px;
+}
+.peopleList > p:last-child{
+  text-align: right;
+}
+.partList{
+  li{
+    &:extend(.peopleList);
+    border-bottom: 1px solid @grayLight;
+    margin-bottom: 0;
+    line-height: 1.5;
+    padding:15px 5px !important;
+  }
+  p:nth-child(1){
+    font-size: 14px;
+  }
+  .icon18{
+    margin-bottom: -4px;
+  }
+}

src/pages/EventProcessing/Process.jsx

-import React, {Component} from 'react';
+import React, {useState, useEffect} from 'react';
 import {WingBlank, WhiteSpace, ActionSheet, ActivityIndicator} from 'antd-mobile'
 import './index.less'
-import TopTabs from '../../components/TopTabs'
+import TopTabs from '../../components/BlankTabs'
 import Basic from './Basic'
 import Adjunct from './Adjunct'
 import Flow from './Flow';
 import Option from './Option';
 
-//Ipone antd-mobile ActionSheet
-const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
-let wrapProps;
-if (isIPhone) {
-    wrapProps = {
-        onTouchStart: e => e.preventDefault(),
+const Pro = (props) => {
+    const [loading, setLoading] = useState(false);
+
+    //提交按钮状态
+    const [disabled, setDisabled] = useState(true)
+    //提交按钮文字
+    const [footButton, setFootButton] = useState('确认发送');
+    //聚焦
+    const optionBlur = () => {
+        setFootButton('确认发送');
+        setFootStatus(true)
     };
-}
+    useEffect(() => {
+        const option = document.getElementsByClassName("option-text")[0]
+        option.addEventListener('focus', optionBlur, true);
+        return () => option.removeEventListener('focus', optionBlur, true);
+    }, []);
 
-class Process extends Component {
-    constructor() {
-        super();
-        this.optionBlur = this.optionBlur.bind(this)
-        this.handleScroll = this.handleScroll.bind(this)
-        this.state = {
-            current: 'basic',
-            disabled: true,
-            footStatus: false,
-            footButton: '处理',
-            loading: false
-        }
+    const optionChange = val => {
+        setDisabled(!(val != null && val != undefined && val != ''))
     };
-    componentDidMount() {
-        document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
-        window.addEventListener('scroll', this.handleScroll, true);
-    }
-    optionBlur = () => {
-        this.setState({footButton: '确认发送', footStatus: true})
-    }
 
-    componentWillUnmount() {
-        document.getElementsByClassName("option-text")[0].removeEventListener('focus', this.optionBlur, true)
-        window.removeEventListener('scroll', this.handleScroll, true);
-    }
-    handleScroll() {
-        const adjunct = document.getElementById("event-adjunct").offsetTop;
-        const flow = document.getElementById("event-flow").offsetTop;
-        const option = document.getElementById("event-option").offsetTop;
-        const event = document.getElementById('event');
-        const top = event.scrollTop;
-        const scrollHeight = event.scrollHeight;
-        const clientHeight = event.clientHeight
-        if (top >= 0 && top < adjunct) {
-            this.setState({current: 'basic'})
-        }else if (top >= adjunct && top < flow) {
-            this.setState({current: 'adjunct'})
-        }else if (top >= flow && top < option) {
-            this.setState({current: 'flow'})
-        }else if (top >= option) {
-            this.setState({current: 'option'})
-        }
-        if (top + clientHeight === scrollHeight) {
-            this.setState({current: 'option'})
-        }
+    const [current, setCurrent] = useState('basic');
+
+    const [footStatus, setFootStatus] = useState(false);
+
+    //点击输入框， 聚焦移动
+    const textClick = () => {
+        const top = document.getElementById(`event-option`).offsetTop;
+        document.getElementById("event").scrollTo(0,top)
+        document.getElementsByClassName("option-text")[0].focus();
+        optionBlur()
     };
-    tabClick = (name) => {
-        this.setState({current: name})
+
+    //tab切换
+    const tabClick = (name) => {
+        setCurrent(name)
         name === 'option' && document.getElementsByClassName("option-text")[0].focus();
-        name === 'option' && this.optionBlur()
+        name === 'option' && optionBlur()
         const top = document.getElementById(`event-${name}`).offsetTop;
         document.getElementById("event").scrollTo(0,top);
     };
-    textClick = () => {
-        const top = document.getElementById(`event-option`).offsetTop;
-        document.getElementById("event").scrollTo(0,top)
-        document.getElementsByClassName("option-text")[0].focus();
-        this.optionBlur()
-    }
 
-    showActionSheet = () => {
+
+    //antd-mobile 提交选项
+    const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
+    let wrapProps;
+    if (isIPhone) {
+        wrapProps = {
+            onTouchStart: e => e.preventDefault(),
+        };
+    }
+    const showActionSheet = () => {
         const BUTTONS = ['送部门领导审核', '送办公室分管主任审批', '办结', '取消'];
         ActionSheet.showActionSheetWithOptions({
                 options: BUTTONS,
@@ -85,15 +68,36 @@ class Process extends Component {
                 wrapProps,
             },
             (buttonIndex) => {
+                props.history.push(`/blank/submit/1`)
                 // console.log(buttonIndex)
             });
     };
-    optionChange = val => {
-        this.setState({disabled: !(val != null && val != undefined && val != '')})
-    }
 
-    render() {
-        const {footButton, disabled, footStatus, current, loading} = this.state
+    const handleScroll = () => {
+        const adjunct = document.getElementById("event-adjunct").offsetTop;
+        const flow = document.getElementById("event-flow").offsetTop;
+        const option = document.getElementById("event-option").offsetTop;
+        const event = document.getElementById('event');
+        const top = event.scrollTop;
+        const scrollHeight = event.scrollHeight;
+        const clientHeight = event.clientHeight
+        if (top >= 0 && top < adjunct) {
+            setCurrent('basic')
+        }else if (top >= adjunct && top < flow) {
+            setCurrent('adjunct')
+        }else if (top >= flow && top < option) {
+            setCurrent('flow')
+        }else if (top >= option) {
+            setCurrent('option')
+        }
+        if (top + clientHeight === scrollHeight) {
+            setCurrent('option')
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll, true);
+        return () =>  window.removeEventListener('scroll', handleScroll, true);
+    }, [])
     return (
         <div>
             <ActivityIndicator
@@ -101,7 +105,7 @@ class Process extends Component {
                 text="加载中..."
                 animating={loading}
             />
-                <TopTabs page={current} onClick={this.tabClick}/>
+            <TopTabs page={current} onClick={tabClick}/>
             <div id="event">
                 <WingBlank>
                     <div id="event-basic"/>
@@ -115,11 +119,11 @@ class Process extends Component {
                     <Flow/>
                     <div id="event-option"/>
                     <WhiteSpace/>
-                        <Option onChange={this.optionChange}/>
+                    <Option onChange={optionChange}/>
                 </WingBlank>
             </div>
             <div className="event-footer">
-                    <div className={`event-footer-button ${(footStatus && disabled) ? 'button-disabled' : '' }`} onClick={footStatus && !disabled ? this.showActionSheet: this.textClick}>
+                <div className={`event-footer-button ${(footStatus && disabled) ? 'button-disabled' : '' }`} onClick={footStatus && !disabled ? showActionSheet: textClick}>
                     {!footStatus && (
                         <img alt="" src="/img/process-edit.png" className="process-edit"/>
                     )}
@@ -130,7 +134,6 @@ class Process extends Component {
 
         </div>
     );
-    }
-}
+};
 
-export default Process;
+export default Pro;

src/pages/EventProcessing/SubmitDetail.jsx

 import React, {Component} from 'react';
+import AddressList from '../../components/AddressList'
+import {WingBlank, WhiteSpace} from "antd-mobile";
 
 class SubmitDetail extends Component {
     render() {
         return (
             <div>
+                <WhiteSpace/>
+                <WingBlank>
+                    <AddressList/>
+                </WingBlank>
 
             </div>
         );

src/pages/Login/index.jsx

@@ -25,6 +25,7 @@ const Login = (props) => {
         method: 'post'
     });
     
+
     return (
         <div>
             <div className="common-layout-content">

src/pages/Notice/Notice.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {ActivityIndicator, WhiteSpace, WingBlank} from 'antd-mobile'
-import TodoCard from '../../components/TodoCard'
-import TopNotice from '../../components/TopNotice'
+import TodoCard from '../../components/LogCard'
+import TopNotice from '../../components/NoticeTab'
 
 
-
-class Notice extends Component {
-    state={
-        loading: false
-    };
-    render() {
-        const {loading} = this.state;
+const Notice = (props) => {
+    const [loading, setLoading] = useState(false)
     return (
         <WingBlank>
             <ActivityIndicator
@@ -24,7 +19,7 @@ class Notice extends Component {
             <TodoCard/>
         </WingBlank>
     );
-    }
-}
+};
 
 export default Notice;
+

src/router.js

@@ -6,8 +6,10 @@ import CommonLayout from './layout/CommonLayout';
 import Backlog from './pages/Backlog/Backlog'
 import Work from './pages/Work/Work'
 import Notice from './pages/Notice/Notice'
+import Communicate from './pages/Communicate/Communicate';
 import AddressList from './pages/AddressList/AddressList';
 import Process from './pages/EventProcessing/Process'
+import SubmitDetail from './pages/EventProcessing/SubmitDetail'
 
 import Login from './pages/Login'
 
@@ -25,13 +27,15 @@ const ReactRouter = () => {
                     <CommonLayout>
                         <Route path="/bord/backlog" component={Backlog} />
                         <Route path="/bord/work" component={Work}/>
+                        <Route path="/bord/communicate" component={Communicate}/>
                         <Route path="/bord/addressList" component={AddressList}/>
                         <Route path="/bord/notice" component={Notice}/>
                     </CommonLayout>
                 }/>
                 <Route path="/blank" component={() =>
                     <BlankLayout>
-                        <Route path="/blank/:name/:id" component={Process}/>
+                        <Route path="/blank/submit/:id" component={SubmitDetail}/>
+                        <Route path="/blank/info/:name/:id" component={Process}/>
                     </BlankLayout>
                 }/>
                 <Route component={NoFound}/>