diff --git a/pc4mobx/organization/components/resource/FormItem.js b/pc4mobx/organization/components/resource/FormItem.js
new file mode 100644
index 0000000..571b717
--- /dev/null
+++ b/pc4mobx/organization/components/resource/FormItem.js
@@ -0,0 +1,59 @@
+import {
+    WeaFormItem,
+} from 'ecCom'
+
+import {
+    Spin,
+    Button,
+} from 'antd'
+
+import {
+    i18n
+} from '../../public/i18n';
+
+import '../../style/common.less';
+import Group from '../group/Group';
+import { chunk } from 'lodash';
+
+export default class FormItem extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        }
+    }
+
+    render() {
+        const {
+            groupInfo
+        } = this.props, {
+        } = this.state;
+        const newData = chunk(groupInfo.items, 3);
+
+        return (
+            <div className='form-item' id={groupInfo.id}>
+                <div className='title'>
+                    <div></div>
+                    <p>{groupInfo.title}</p>
+                </div>
+                <div className='content'>
+                    {newData.map((item, index) => {
+                        return (
+                            <div key={index} className='item'>
+                                {item.map((subItem) => {
+                                    return (
+                                        <div>
+                                            <span>{subItem.fieldId}</span>
+                                            <span>{subItem.fieldValue}</span>
+                                        </div>
+                                       
+                                    );
+                                })}
+                            </div>
+                        );
+                    })}
+                </div>
+
+            </div>
+        )
+    }
+}
diff --git a/pc4mobx/organization/components/resource/IframeItem.js b/pc4mobx/organization/components/resource/IframeItem.js
new file mode 100644
index 0000000..1f17337
--- /dev/null
+++ b/pc4mobx/organization/components/resource/IframeItem.js
@@ -0,0 +1,44 @@
+import {
+    WeaFormItem,
+} from 'ecCom'
+
+import {
+    Spin,
+    Button,
+} from 'antd'
+
+import {
+    i18n
+} from '../../public/i18n';
+
+import '../../style/common.less';
+import Group from '../group/Group';
+import { chunk } from 'lodash';
+
+export default class IframeItem extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        }
+    }
+
+    render() {
+        const {
+            iframeInfo
+        } = this.props, {
+        } = this.state;
+
+        return (
+            <div className='iframe-item' id={iframeInfo.id}>
+                <div className='title'>
+                    <div></div>
+                    <p>{iframeInfo.title}</p>
+                </div>
+                <div className='content'>
+                  <iframe src={iframeInfo.url} width="100%" frameBorder="0"/>                 
+                </div>
+
+            </div>
+        )
+    }
+}
diff --git a/pc4mobx/organization/components/resource/ResourceCard.js b/pc4mobx/organization/components/resource/ResourceCard.js
index 752dd06..244aa1f 100644
--- a/pc4mobx/organization/components/resource/ResourceCard.js
+++ b/pc4mobx/organization/components/resource/ResourceCard.js
@@ -9,7 +9,8 @@ import {
     WeaTab,
     WeaFormItem,
     WeaRightMenu,
-    WeaAlertPage
+    WeaAlertPage,
+    WeaNewScrollPagination
 } from 'ecCom'
 import {
     Row,
@@ -18,7 +19,8 @@ import {
     Modal,
     Button,
     message,
-    Switch
+    Switch,
+    Menu, Dropdown,Icon
 } from 'antd'
 import {
     WeaSwitch,
@@ -28,12 +30,11 @@ import {
     i18n
 } from '../../public/i18n';
 
-import '../../style/common.less';
-
+import '../../style/card.less';
+import FormItem from './FormItem';
+import IframeItem from './IframeItem';
 import { renderNoright } from '../../util'; // 从util文件引入公共的方法
 
-
-
 const toJS = mobx.toJS;
 const confirm = Modal.confirm;
 
@@ -65,12 +66,173 @@ export default class ResourceCard extends React.Component {
         const {
             resourceCard
         } = this.props;
+        resourceCard.init();
     }
 
-    render(){
-        return(
-            <div>111</div>
+    onScrollEnd = () => {
+        const {
+            resourceCard
+        } = this.props;
+        resourceCard.scrollLoading = true;
+        resourceCard.iframeList.push({
+            id:"job",
+            title:"岗位管理",
+            url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
+        })
+        setTimeout(() => {
+            resourceCard.scrollLoading = false;
+        }, 2000);
+    };
+
+    scrollToAnchor = (anchorName) => {
+        if (anchorName) {
+            // 找到锚点
+            let anchorElement = document.getElementById(anchorName);
+            // 如果对应id的锚点存在，就跳转到锚点
+            if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
+        }
+    }
+
+    handleMenuClick = (e) => {
+        console.log('click', e);
+    }
+
+    render() {
+        const {
+            resourceCard
+        } = this.props, {
+            height,
+            scrollLoading,
+            offset,
+            overtime,
+            intervalTime,
+            data,
+            iframeList
+        } = resourceCard;
+
+        const menu = (
+            <Menu onClick={this.handleMenuClick}>
+                <Menu.Item key="1">第一个菜单项</Menu.Item>
+                <Menu.Item key="2">第二个菜单项</Menu.Item>
+                <Menu.Item key="3">第三个菜单项</Menu.Item>
+            </Menu>
+        );
+
+        return (
+            <WeaNewScrollPagination
+                height='100%'
+                onScrollEnd={this.onScrollEnd}
+                // onScroll={(e)=> {
+                //     console.log(e)
+                // }}
+            >
+            <div className="gutter-resource-card">
+                <div className="gutter-row">
+                    <div className='top'>
+                        <img src={require('../../images/resource.png')} />
+                        <div className='user'>
+                            <div className='name'>{data.user.name}
+                                <span>{data.user.sex == 0 ? <i className="icon-coms-men" /> : <i className="icon-coms-women" />}</span>
+                            </div>
+                            <div className='icon-info'>
+                                <i className="icon-coms-Send-message" />
+                                <i className="icon-coms-message-o" />
+                                <i className="icon-coms-Send-emails" />
+                                <i className="icon-coms-New-schedule-o" />
+                            </div>
+                            <div className='content'>
+                                <div>
+                                    <span className='label'><i className="icon-portal-email-o" /></span>
+                                    <span className='value'>{data.user.email}</span>
+                                    <span className='label'><i className="icon-coms-contact" /></span>
+                                    <span className='value'>{data.user.phone}</span>
+                                </div>
+                                <div style={{ marginTop: '10px' }}>
+                                    <span className='label'>账号类型:</span>
+                                    <span className='value'>{data.user.belongTo}</span>
+                                    <span className='label'>状态:</span>
+                                    <span className='value'>{data.user.status}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='right-button'>
+                            <Button className='item'>编辑人员</Button>
+                            <Button className='item'>调动</Button>
+                            <Button className='item'>离职</Button>
+                            <Dropdown overlay={menu}>
+                                <Button  style={{ marginLeft: 8 }}  className='item'>
+                                    更多操作 <Icon type="down" />
+                                </Button>
+                            </Dropdown>
+                        </div>
+
+                    </div>
+                    <div className='data'>
+                        <Row type="flex" justify="space-between" style={{height:'100%'}}>
+                            <Col className='ant-col' span={4}>
+                                <img src="/hrm/hrm_e9/image/workflow.png" alt="" />
+                                <div>
+                                    <p>流程总数</p>
+                                    <p>{data.statistical.workflowCount}</p>
+                                </div>
+                            </Col>
+                            <Col className='ant-col' span={4}>
+                                <img src="/hrm/hrm_e9/image/doc.png" alt="" />
+                                <div>
+                                    <p>文档总数</p>
+                                    <p>{data.statistical.docCount}</p>
+                                </div>
+                            </Col>
+                            <Col className='ant-col' span={4}>
+                                <img src="/hrm/hrm_e9/image/custom.png" alt="" />
+                                <div>
+                                    <p>我的客户</p>
+                                    <p>{data.statistical.cusCount}</p>
+                                </div>
+                            </Col>
+                            <Col className='ant-col' span={4}>
+                                <img src="/hrm/hrm_e9/image/cowork.png" alt="" />
+                                <div>
+                                    <p>我的协作</p>
+                                    <p>{data.statistical.collaborationCount}</p>
+                                </div>
+                            </Col>
+                            <Col className='ant-col' span={4}>
+                                <img src="/hrm/hrm_e9/image/weibo.png" alt="" />
+                                <div>
+                                    <p>微博总数</p>
+                                    <p>{data.statistical.weiboCount}</p>
+                                </div>
+                            </Col>
+                        </Row>
+                    </div>
+                    {
+                        data.formItems.map((item,index)=>{
+                            return(
+                                <FormItem groupInfo={item}/>
+                            )
+                        })
+                    }
+                    {
+                        iframeList.map((item,index) => {
+                            return(
+                                <IframeItem iframeInfo={item}/>
+                            )
+                        })
+                    }
+                </div>
+                <div className="gutter-row">
+                    <div className='right'>
+                        {/* <a onClick={() => this.scrollToAnchor("activity1")}>测试</a>   */}
+                    </div>
+                </div>
+            </div>
+            <Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />
+
+                
+        </WeaNewScrollPagination>
+
         )
     }
-    
+
 }
\ No newline at end of file
diff --git a/pc4mobx/organization/images/resource.png b/pc4mobx/organization/images/resource.png
new file mode 100644
index 0000000..ba06404
Binary files /dev/null and b/pc4mobx/organization/images/resource.png differ
diff --git a/pc4mobx/organization/stores/resourceCard.js b/pc4mobx/organization/stores/resourceCard.js
index baa4ecd..84e96a2 100644
--- a/pc4mobx/organization/stores/resourceCard.js
+++ b/pc4mobx/organization/stores/resourceCard.js
@@ -7,5 +7,120 @@ import * as Api from '../apis/resourceCard'; // 引入API接口文件
 
 
 export class ResourceCardStore {
- 
+    @observable height = 2000;
+    @observable scrollLoading = true;
+    @observable offset = 20;
+    @observable overtime = 1000;
+    @observable intervalTime = 500;
+
+
+    @action("初始化") init = () => {
+
+    }
+
+
+    /************** json数据*****************/
+    @observable data = {
+        user: {
+            image: "",
+            name: "萧言",
+            sex:"0",
+            email: "1546584672@qq.com",
+            phone: "18822349878",
+            belongTo: "主账号",
+            status: "正式"
+        },
+        statistical: {
+            workflowCount:190,
+            docCount:134,
+            cusCount:28,
+            collaborationCount:28,
+            weiboCount:166
+        },
+        formItems:[
+            {
+                id:'userInfo',
+                title:'员工信息',
+                items:[
+                    {
+                        fieldId:'姓名',
+                        fieldValue:'萧言'
+                    },{
+                        fieldId:'性别',
+                        fieldValue:'男'
+                    },{
+                        fieldId:'出生日期',
+                        fieldValue:'1987年9月1日'
+                    },{
+                        fieldId:'个人邮箱',
+                        fieldValue:'1546875925@qq.com'
+                    },{
+                        fieldId:'电话号码',
+                        fieldValue:'18925689752'
+                    },{
+                        fieldId:'岗位级别',
+                        fieldValue:'-'
+                    },{
+                        fieldId:'职务信息',
+                        fieldValue:'产品运营'
+                    }
+                ]
+            },
+            {
+                id:'workInfo',
+                title:'工作信息',
+                items:[
+                    {
+                        fieldId:'姓名',
+                        fieldValue:'萧言'
+                    },{
+                        fieldId:'性别',
+                        fieldValue:'男'
+                    },{
+                        fieldId:'出生日期',
+                        fieldValue:'1987年9月1日'
+                    },{
+                        fieldId:'个人邮箱',
+                        fieldValue:'1546875925@qq.com'
+                    }
+                ]
+            },
+            {
+                id:'educationInfo',
+                title:'教育经历',
+                items:[
+                    {
+                        fieldId:'本科',
+                        fieldValue:'南京大学'
+                    },{
+                        fieldId:'研究生',
+                        fieldValue:'北京大学'
+                    },{
+                        fieldId:'毕业时间',
+                        fieldValue:'1987-09-21'
+                    },{
+                        fieldId:'获得奖项',
+                        fieldValue:'优秀毕业生'
+                    },{
+                        fieldId:'备注',
+                        fieldValue:'无'
+                    }
+                ]
+            }
+        ],
+       
+    }
+
+    @observable iframeList = [
+        {
+            id:"comp",
+            title:"分部管理",
+            url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
+        },
+        {
+            id:"dept",
+            title:"部门管理",
+            url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
+        },
+    ]
 }
diff --git a/pc4mobx/organization/style/card.less b/pc4mobx/organization/style/card.less
new file mode 100644
index 0000000..19c5943
--- /dev/null
+++ b/pc4mobx/organization/style/card.less
@@ -0,0 +1,192 @@
+
+// #container {
+//     background-color: #e5eaf2;
+// }
+//我的卡片样式
+.gutter-resource-card {
+    display: flex;
+    background-color: #e5eaf2;
+    padding-bottom: 15px;
+    .gutter-row:first-child{
+      width: 89%;
+      .top {
+        width: 100%;
+        height: 150px;
+        background-color: #ffffff;
+        padding: 12px;
+        img{
+          float: left;
+          width: 102px;
+          height: 100%;
+        }
+        .user{
+          float: left;
+          margin-left: 20px;
+          .name {
+            font-size: 15px;
+            font-weight: bold;
+            margin-top: 10px;
+            span {
+              margin-left: 15px;
+              .icon-coms-men {
+                color: #6d9fff;
+              }
+              .icon-coms-women {
+                color: #ff6dfa;
+              }
+            }
+          }
+          .icon-info {
+            margin-top: 10px;
+            i {
+              cursor: pointer;
+              color: #6d9fff;
+              margin-left: 15px;
+            }
+            .icon-coms-Send-message{
+              margin-left: 0;
+            }
+          }
+          .content{
+            margin-top: 10px;
+            .label{
+              color: #999999;
+            }
+            .value {
+              margin-left: 5px;
+            }
+          }
+          .content > div span:nth-child(3){
+            margin-left: 30px;
+          }
+        }
+        .right-button{
+          float: right;
+          line-height: 75px;
+          .item {
+            background-color: #2b68f0;
+            color: #ffffff;
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .data {
+        width: 100%;
+        height: 135px;
+        background-color: #ffffff;
+        padding: 12px 25px;
+        margin-top: 20px;
+        .ant-col {
+          -webkit-box-shadow: #eeeeee  0px 0px 10px;
+          -moz-box-shadow: #eeeeee  0px 0px 10px;
+          box-shadow: #eeeeee 0px 0px 10px;
+          padding: 0 10px;
+          img{
+            margin-top: 20px
+          }
+          div{
+            width: 100%;
+            :first-child{
+              float: left;
+              color: #999999;
+              line-height: 35px;
+            }
+            :last-child{
+              float: right;
+              font-weight: 800;
+              font-size: 16px;
+            }
+          }
+          
+        }
+        
+      }
+
+      .form-item {
+        margin-top: 20px;
+        width: 100%;
+        background-color: #ffffff;
+        .title {
+          width: 100%;
+          height: 30px;
+          div {
+            height: 20px;
+            border: 2px solid #2b68f0;
+            margin-left: 5px;
+            margin-top: 5px;
+            float: left;
+          }
+          p{
+            margin-left: 15px;
+            font-size: 13px;
+            font-weight: 900;
+            line-height: 30px;
+          }
+        }
+        .content {
+          width: 100%;
+          padding: 15px;
+          .item{
+            display: flex;
+            div{
+              width: 33.3%;
+              display: inline-block;
+              height: 40px;
+              span:first-child{
+                color: #999999;
+                width: 60px;
+                display: inline-block;
+                text-align: right;
+              }
+              span:last-child{
+                margin-left: 20px;
+              }
+            }
+          }
+        }
+      }
+
+      .iframe-item {
+        margin-top: 20px;
+        width: 100%;
+        background-color: #ffffff;
+        .title {
+          width: 100%;
+          height: 30px;
+          div {
+            height: 20px;
+            border: 2px solid #2b68f0;
+            margin-left: 5px;
+            margin-top: 5px;
+            float: left;
+          }
+          p{
+            margin-left: 15px;
+            font-size: 13px;
+            font-weight: 900;
+            line-height: 30px;
+          }
+        }
+        .content {
+          width: 100%;
+          padding: 15px; 
+        }
+      }
+  
+    
+    } 
+    .gutter-row:last-child{
+      width: 10%;
+      background-color: #ffffff;
+      margin-left: 20px;
+    }
+  }
+
+  .scroll-spin {
+    margin-left: 50%;
+  }
+  
+  
+  
+  
\ No newline at end of file
diff --git a/pc4mobx/organization/style/common.less b/pc4mobx/organization/style/common.less
index 024cb19..b5002b0 100644
--- a/pc4mobx/organization/style/common.less
+++ b/pc4mobx/organization/style/common.less
@@ -88,5 +88,3 @@
   }
 }
 
-//我的卡片样式
-