debug

src/Pages/Communicate/Communicate.jsx

@@ -5,6 +5,7 @@ import TopSearch from '../../components/TopSearch'
 const Item = List.Item;
 
 class Communicate extends Component {
+    
     render() {
         return (
             <div>

src/components/List/index.jsx

+import React from 'react';
+import './index.less'
+
+const Index = (props) => {
+    return (
+        <div className="auto-list-card">
+            {props.title && (
+                <div className="auto-list-item auto-list-item-title">{props.title}</div>
+            )}
+            {props.listData.map((item, index) => (
+                <div key={index} className={`auto-list-item ${item.line ? 'auto-list-item-line-feed' : 'auto-list-item-line'}`}>
+                    <div className="auto-list-title">
+                        {item.title}：
+                    </div>
+                    <div className="auto-list-content">
+                        {item.content}
+                    </div>
+                </div>
+            ))}
+
+        </div>
+    );
+};
+
+export default Index;

src/components/List/index.less

+.auto-list-card{
+  width: 100%;
+}
+.auto-list-item-line{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.auto-list-item-line-feed{
+  display: flex;
+  flex-direction: column;
+}
+.auto-list-item{
+  padding: 5px 15px;
+  min-height: 43px;
+  background: #ffffff;
+  margin-bottom: 1px;
+}
+.auto-list-card > .auto-list-item:first-child{
+  border-radius: 6px 6px 0 0;
+}
+.auto-list-card > .auto-list-item:last-child{
+  border-radius: 0 0 6px 6px;
+}
+.auto-list-item-title{
+  display: flex;
+  align-items: center;
+  font-size: 17px;
+  font-weight: bold;
+}
+.auto-list-title{
+  padding: 10px 0;
+  font-size: 14px;
+  min-width: 100px;
+}
+.auto-list-content{
+  padding: 10px 20px;
+  font-size: 14px;
+  line-height: 22px;
+}

src/components/StepCard/index.jsx

+import React from 'react';
+import './index.less'
+
+const Index = () => {
+    return (
+        <div>
+            <ul>
+                {
+                    [{}, {}, {}, {}].map(item => (
+                        <li>1111111</li>
+                    ))
+                }
+
+            </ul>
+        </div>
+    );
+};
+
+export default Index;

src/components/StepCard/index.less

+ul li{
+  width:100%;
+  &:after {
+    content: '';
+    display: block;
+    //clear: both;
+    width: 1px;
+    min-height: 115px;
+    background-color: #D8D8D8;
+    //margin: 8px auto;
+  }
+}

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/TodoCard/index.jsx

+import React from 'react';
+import './index.less'
+
+const Index = (props) => {
+    return (
+        <div className="todo-card" onClick={props.onCLick}>
+            <div className="todo-title pos-aline">
+                <div className="pos-aline">
+                    <div className="todo-tag pos-aline">
+                        <img
+                            alt=""
+                            className="todo-tag-png"
+                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"
+                        />
+                        收文管理
+                    </div>
+                    <p>《2020年上级党委文件7号》</p>
+                </div>
+                <span>
+                    <img
+                        alt=""
+                        className="todo-read-png"
+                        src={props.data && props.data.read ? '/img/read.png' : '/img/unread.png'}
+                    />
+                </span>
+            </div>
+            <div className="todo-content">
+                <p>当前状态：排版套头</p>
+                <p style={{marginTop: 15}}>发送人员：杜莹莹</p>
+            </div>
+            <div className="todo-footer">
+               <div>
+                   <p>更新时间：2020-05-26  17:51</p>
+                   <p style={{marginTop: 15}}>停滞时间：24h</p>
+               </div>
+                <img
+                    alt=""
+                    className="todo-footer-img"
+                    src={props.data && props.data.read ? '/img/serious.png' : '/img/urgency.png'}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Index;

src/components/TodoCard/index.less

+.todo-card{
+
+}
+.todo-title{
+  padding: 10px 15px;
+  background:rgba(255,255,255,1);
+  border-radius:6px 6px 0 0;
+  justify-content: space-between;
+  margin-bottom: 1px;
+}
+.todo-tag{
+  line-height: 18px;
+  //width: 60px;
+  font-size: 9px;
+  padding: 0 5px;
+  background: #2087ED;
+  color: #ffffff;
+  border-radius:3px;
+}
+.todo-tag-png{
+  width: 12px;
+  height: 12px;
+  margin-right: 3px;
+}
+.todo-read-png{
+  width: 18px;
+  height: 18px;
+}
+.pos-aline{
+  display: flex;
+  align-items: center;
+}
+
+.todo-content{
+  padding: 15px 15px;
+  background:rgba(255,255,255,1);
+  margin-bottom: 1px;
+}
+.todo-footer{
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 15px;
+  background:rgba(255,255,255,1);
+  border-radius: 0 0 6px 6px;
+}
+.todo-footer-img{
+  width: 40px;
+  height: 40px;
+}

src/components/TopNotice/index.jsx

+import React from 'react';
+import {Tabs, Icon} from 'antd-mobile'
+import './index.less'
+
+const tabs = [
+    { title: '已读', sub: '1' },
+    { title: '未读', sub: '2' },
+]
+
+const Index = () => {
+    return (
+        <div className="pos-line">
+            <div className="search-notice-box">
+                <Icon type="search" size="xs" className="search-svg"/>
+                <input className="top-search" placeholder="请输入关键字搜索" />
+            </div>
+            <div className="search-tab">
+                <Tabs
+                    tabs={tabs}
+                    initialPage={'1'}
+                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Index;

src/components/TopNotice/index.less

+.search-notice-box{
+  width: 100%;
+  height: 43.5px;
+  margin-bottom: 1px;
+  display: flex;
+  align-items: center;
+}
+.search-svg{
+  position: absolute;
+  padding-left: 10px;
+}
+.top-search{
+  width: 100%;
+  height: 100%;
+  border:0 solid rgba(38, 104, 255, 0.2);
+  border-radius: 6px 6px 0 0;
+  padding: 0 0 0 40px;
+}
+.am-tabs-default-bar-tab-active{
+  color: #0185FB;
+}
+.am-tabs-default-bar-underline{
+  border: 1px  #0185FB solid;
+}
+.search-tab{
+  width: 100%;
+}
+.pos-line{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.am-tabs-default-bar-top, .am-tabs-default-bar-bottom{
+  border-radius:0 0 6px 6px !important;
+}

src/components/TopSearch/index.jsx

+import React from 'react';
+import {Icon} from 'antd-mobile'
+import './index.less'
+
+
+const Index = (props) => {
+    const topSearch = () => {
+        const input = document.getElementsByClassName("top-single-search");
+        props.onSearch(input[0].value)
+    }
+    return (
+        <div className="search-box">
+            <Icon type="search" size="xs" className="search-svg"/>
+            <input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
+        </div>
+    );
+};
+
+export default Index;

src/components/TopSearch/index.less

+.search-box{
+  width: 100%;
+  height: 42px;
+  display: flex;
+  align-items: center;
+}
+.search-svg{
+  position: absolute;
+  padding-left: 10px;
+}
+.top-single-search{
+  width: 100%;
+  height: 100%;
+  border:0 solid rgba(38, 104, 255, 0.2);
+  border-radius:6px;
+  padding: 0 0 0 40px;
+}

src/components/TopTabs/index.jsx

+import React from 'react';
+import {Tabs} from 'antd-mobile'
+import './index.less'
+
+const tabs = [
+    { title: '基本信息', sub: 'basic' },
+    { title: '详情附件', sub: 'adjunct' },
+    { title: '流程信息', sub: 'flow' },
+    { title: '流转意见', sub: 'option' },
+]
+
+const Index = (props) => {
+    return (
+        <div>
+            <Tabs
+                tabs={tabs}
+                initialPage={"basic"}
+                onChange={(tab, index) => props.onClick(tab.sub)}
+            />
+        </div>
+    );
+};
+
+export default Index;

src/components/TopTabs/index.less

+
+.am-tabs-default-bar-tab-active{
+  color: #0185FB;
+}
+.am-tabs-default-bar-underline{
+  border: 1px  #0185FB solid;
+}
+
+.am-tabs-default-bar-top, .am-tabs-default-bar-bottom{
+  border-radius:0 0 6px 6px !important;
+}

src/components/WorkCard/CardItem.jsx

+import React, {Component} 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);
+        data.iconAdd && addCommon()
+    };
+    iconClick = () => {
+        const { iconAction} = this.props;
+        iconAction()
+    }
+
+    render() {
+        const {data, type} = this.props;
+        const {addStatus} = this.state
+        return (
+            <div className="card-content" onClick={this.contentCLick}>
+                {data.text && (
+                    <div className="card-content-box">
+                        <div className="card-content-img">
+                            {
+                                addStatus && !data.iconAdd && (
+                                    <img
+                                        src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
+                                        className="card-content-img-icon"
+                                        alt=""
+                                        onClick={this.iconClick}
+                                    />
+                                )
+                            }
+
+                            <img src={data.icon} className="card-content-img-svg" alt="" />
+                        </div>
+                        <div className="card-content-title">
+                            {data.text}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default CardItem;

src/components/WorkCard/index.jsx

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

src/components/WorkCard/index.less

+.work-card-body{
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  //justify-content: center;
+  align-items: center;
+  //background: #ffffff;
+}
+.work-card-title{
+  line-height: 43px;
+  border-radius: 6px 6px 0 0;
+  padding-left: 20px;
+  background: #ffffff;
+  margin-bottom: 1px;
+  color: rgba(50, 50, 50, 0.6);
+}
+
+.card-content{
+  width: 33.1%;
+  height: 115px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  margin-bottom: 1px;
+  //border: 1px solid rgba(38, 104, 255, 0.1);
+}
+.card-content-box{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.work-card-body > .card-content:nth-child(3n + 2){
+  margin-left: 1px;
+}
+.work-card-body > .card-content:nth-child(3n + 3){
+  margin-left: 1px;
+}
+.work-card-body > .card-content:last-child{
+  border-radius: 0 0 6px 0;
+}
+.work-card-body > .card-content:nth-last-child(3){
+  border-radius: 0 0 0 6px;
+}
+.card-content:active{
+  background: rgba(248, 248, 248, 1);
+}
+
+.card-content-img{
+  width: 35px;
+  height: 35px;
+  margin-bottom: 14px;
+}
+.card-content-img-svg{
+  width: 35px;
+  height: 35px;
+}
+.card-content-img-icon{
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  margin-top: -15px;
+  margin-left: 20px;
+}
+.card-content-title{
+  text-align: center;
+}