debug

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

config-overrides.js

 const { injectBabelPlugin, getLoader } = require('react-app-rewired');
+const {override}  = require("customize-cra")
+const path = require("path")
+const rewirePostcss = require('react-app-rewire-postcss');
 const px2rem = require('postcss-px2rem')
 
+
 const fileLoaderMatcher = function (rule) {
   return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
 }
@@ -13,6 +17,15 @@ module.exports = function override(config, env) {
     style: true, // use less for customized theme
   }], config);
 
+    config = rewirePostcss(config,{
+        plugins: () => [
+            px2rem({
+                remUnit: 37.5,
+                exclude:/node-modules/
+            })
+        ],
+    });
+
   // customize theme
   config.module.rules[1].oneOf.unshift(
     {
@@ -28,10 +41,6 @@ module.exports = function override(config, env) {
             ident: 'postcss',
             plugins: () => [
               require('postcss-flexbugs-fixes'),
-              px2rem({
-                remUnit: 37.5,
-                exclude: /node-modules/
-              }),
               autoprefixer({
                 browsers: [
                   '>1%',

src/Components/TopNotice/index.less

 .search-notice-box{
   width: 100%;
   height: 43.5px;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
   display: flex;
   align-items: center;
 }

src/Components/TopSearch/index.jsx

@@ -3,12 +3,17 @@ import {SearchBar, Icon} from 'antd-mobile'
 import './index.less'
 
 
-const Index = () => {
+const Index = (props) => {
+    const topSearch = (val) => {
+        const input = document.getElementsByClassName("top-single-search").value;
+        console.log(val)
+        // props.onSearch(val)
+    }
     return (
         <div className="search-box">
             <Icon type="search" size="xs" className="search-svg"/>
             {/*<SearchBar/>*/}
-            <input className="top-single-search" placeholder="请输入关键字搜索" />
+            <input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
         </div>
     );
 };

src/Components/WorkCard/CardItem.jsx

-import React from 'react';
+import React, {Component} from 'react';
 import './index.less'
 
-const CardItem = (peops) => {
-    return (
-        <div className="card-item">
-            <div className="card-item-content">
-                <div className="card-item-content-img">
-                    <img src={peops.data.icon} style={{ width: 35, height: 35 }} alt="" />
-                </div>
-                <div className="card-item-content-title">
-                    {peops.data.text}
-                </div>
+class CardItem extends Component {
+    state = {
+        addStatus: false
+    }
+    componentWillReceiveProps(nextProps, nextContext) {
+        if (this.props.addStatus !== nextProps.addStatus) {
+            this.setState({ addStatus: this.props.addStatus });
+        }
+    }
 
+    render() {
+        const {data, addCommon} = this.props;
+        return (
+            <div className="card-content" onClick={() => data.iconAdd ? addCommon() : null }>
+                {data.text && (
+                    <div>
+                        <div className="card-content-img">
+                            <img src={data.icon} className="card-content-img-svg" alt="" />
+                        </div>
+                        <div className="card-content-title">
+                            {data.text}
+                        </div>
+                    </div>
+                )}
             </div>
-        </div>
-    );
-};
+        );
+    }
+}
 
 export default CardItem;

src/Components/WorkCard/index.jsx

-import React from 'react';
+import React, {Component} from 'react';
 import {Grid} from 'antd-mobile'
 import './index.less'
 import CardItem from './CardItem'
 
-const data = Array.from(new Array(7)).map((_val, i) => ({
-    icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-    text: `name${i}`,
-}));
-
-const Index = () => {
-    const empty = data.length % 3;
-    empty > 0 && data.push({}, {})
-    return (
-        <div>
-            <div className="work-card-title">
-                11111
-            </div>
-            <div className="work-card-body">
-                {data.map(item => (
-                    <CardItem data={item}/>
-                ))}
+class Index extends Component {
+    render() {
+        const {title, type, addStatus, addCommon} = this.props
+        const emptyIcon = type === 'edit' ? {
+            text: '添加常用', icon: '', iconAdd: true
+        } : {};
+
+
+        //测试数据
+        const data = Array.from(new Array(7)).map((_val, i) => ({
+            icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+            text: `name${i}`,
+        }));
+        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
+                            key={index}
+                            data={item}
+                            addStatus={addStatus}
+                            addCommon={addCommon}
+                        />
+                    ))}
+
+                </div>
             </div>
-            {/*<Grid*/}
-                {/*data={data}*/}
-                {/*columnNum={3}*/}
-                {/*renderItem={dataItem => (*/}
-                    {/*<div style={{ padding: '12.5px' }}>*/}
-                        {/*<img src={dataItem.icon} style={{ width: 35, height: 35 }} alt="" />*/}
-                        {/*<div style={{ color: '#323232', fontSize: 13, marginTop: 18 }}>*/}
-                            {/*收文管理*/}
-                        {/*</div>*/}
-                    {/*</div>*/}
-                {/*)}*/}
-            {/*/>*/}
-        </div>
-    );
-};
+        );
+    }
+}
 
 export default Index;
+
+

src/Components/WorkCard/index.less

@@ -2,25 +2,54 @@
   display:flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
+  //justify-content: center;
   align-items: center;
+  //background: #ffffff;
 }
-
-.card-item{
-  width: 33.33%;
-  position: relative;
+.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-item-content{
-  padding: 26px 0;
+
+.card-content{
+  width: 114px;
+  height: 114px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
-  border: 1px salmon solid;
+  background: #ffffff;
+  margin-bottom: 1px;
+  //border: 1px solid rgba(38, 104, 255, 0.1);
 }
-.card-item-content-img{
-  margin-bottom: 14px;
+.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: yellow;
 }
-.card-item-content-title{
 
+.card-content-img{
+  width: 35px;
+  height: 35px;
+  margin-bottom: 14px;
+}
+.card-content-img-svg{
+  width: 35px;
+  height: 35px;
+}
+.card-content-title{
 }

src/Pages/Work/Work.jsx

-import React from 'react';
+import React, {Component} from 'react';
 import {WhiteSpace} from "antd-mobile";
 
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
-const Work = () => {
-    return (
-        <div>
-            <WhiteSpace/>
-            <TopSearch/>
-            <WhiteSpace/>
-            <WorkCard/>
-        </div>
-    );
-};
+class Work extends Component {
+    state = {
+        addStatus: false
+    };
+    commonEdit = () => {
+        const {addStatus} = this.state;
+        this.setState({addStatus: !addStatus})
+    };
+    workSearch = (val) => {
+        console.log(val.target)
+    }
+    render() {
+        const {addStatus} = this.props
+        return (
+            <div>
+                <WhiteSpace/>
+                <TopSearch onSearch={this.workSearch}/>
+                <WhiteSpace/>
+                <WorkCard
+                    type="edit"
+                    title="常用板块"
+                    addCommon={this.commonEdit}
+                    addStatus={addStatus}
+                />
+                <WhiteSpace/>
+                <WorkCard
+                    title="事物管理"
+                    addCommon={this.commonEdit}
+                    addStatus={addStatus}
+                />
+            </div>
+        );
+    }
+}
 
 export default Work;
+