diff --git a/public/user.svg b/public/user.svg
new file mode 100644
index 0000000..f914ae1
--- /dev/null
+++ b/public/user.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1590111514286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2873" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.984496 513.984496c141.383442 0 256-114.616558 256-256S655.367938 1.984496 513.984496 1.984496 257.984496 116.601054 257.984496 257.984496s114.616558 256 256 256z m0-59.534884c-108.50431 0-196.465116-87.960806-196.465116-196.465116s87.960806-196.465116 196.465116-196.465116 196.465116 87.960806 196.465116 196.465116-87.960806 196.465116-196.465116 196.465116z" p-id="2874"></path><path d="M1020.031008 992.248062c0-281.647628-227.423256-510.015504-508.031008-510.015504S3.968992 710.600434 3.968992 992.248062a29.767442 29.767442 0 1 0 59.534884 0c0-248.820093 200.827039-450.48062 448.496124-450.48062s448.496124 201.660527 448.496124 450.48062a29.767442 29.767442 0 1 0 59.534884 0z" p-id="2875"></path></svg>
\ No newline at end of file
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 4db7ebc..9503280 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -4,6 +4,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const linkElement = getByText(/用户账号/i);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/src/App.tsx b/src/App.tsx
index d9f2863..679cd9a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,16 +2,12 @@ import React from 'react';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Login} from './account/Login';
-import { instanceOf } from 'prop-types';
-import { withCookies, Cookies } from 'react-cookie';
+import { withCookies } from 'react-cookie';
 import {Main} from "./Main";
 import {Register} from "./account/Register";
 import {user_cookie} from "./account/PropCookie";
 
 class App extends React.Component<any, any> {
-  static propTypes = {
-    cookies: instanceOf(Cookies).isRequired
-  };
 
 
   constructor(props: Readonly<any>) {
@@ -65,7 +61,7 @@ class App extends React.Component<any, any> {
    */
   toLogin(){
     this.setState({
-      page:<Login cookies={this.props.cookies} toRegister={()=>this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/>
+      page:<Login toRegister={()=>this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/>
     })
   }
 
diff --git a/src/Main.tsx b/src/Main.tsx
index 87a8c9a..32aa4dc 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -102,7 +102,7 @@ export class Main extends React.Component<any, any>{
         switch (dialogType) {
             case DialogType.friend:
                 this.setState({
-                    my:{menuName:dialogType,content:<MyFriend/>,open:true}
+                    my:{menuName:dialogType,content:<MyFriend user={this.props.user}/>,open:true}
                 })
                 break;
             case DialogType.leaveWord:
diff --git a/src/account/LoginProps.ts b/src/account/LoginProps.ts
index 0dbf8c3..c6e1d15 100644
--- a/src/account/LoginProps.ts
+++ b/src/account/LoginProps.ts
@@ -1,10 +1,8 @@
 
-import {PropCookie} from "./PropCookie";
-
 /**
  * 登陆表单
  */
-export interface LoginProps extends PropCookie{
+export interface LoginProps{
     //跳转注册
     toRegister:Function;
     //登录
diff --git a/src/account/PropCookie.ts b/src/account/PropCookie.ts
index ff6eb06..36b9be8 100644
--- a/src/account/PropCookie.ts
+++ b/src/account/PropCookie.ts
@@ -1,10 +1,9 @@
-import {Cookies } from 'react-cookie';
 
 /**
  * cookie信息，组件间传递
  */
-export interface PropCookie {
-    cookies:Cookies;
-}
+// export interface PropCookie {
+//     cookies:Cookies;
+// }
 
 export const user_cookie="user_cookie"
diff --git a/src/entity.ts b/src/entity.ts
index 4f3a575..d448d51 100644
--- a/src/entity.ts
+++ b/src/entity.ts
@@ -108,9 +108,39 @@ export interface MyDialogProps {
     onClose:Function;
 }
 
+
 /**
  * 好友信息
  */
 export interface Friend {
+    //好友姓名
     name:string;
+    //好友状态
+    status?:boolean;
+}
+
+/**
+ * 用户信息
+ */
+export interface User {
+    //用户姓名
+    name:string;
+    //用户年龄
+    age:number;
+    //用户电话
+    mobile:string;
+}
+
+/**
+ * 聊天信息
+ */
+export interface Chat {
+    //发送人名称
+    name:string;
+    //发送人头像
+    headImg:string;
+    //发送内容
+    content:string;
+    //发送时间
+    time:number;
 }
diff --git a/src/index.css b/src/index.css
index ec2585e..f529b8d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,53 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+/*关闭图标尺寸*/
+.closeIcon40{
+  height: 40px;
+  width: 40px;
+}
+/*关闭图标尺寸*/
+.closeIcon20{
+  height: 20px;
+  width: 20px;
+}
+/*用户图标尺寸*/
+.userIcon{
+  height: 20px;
+  width: 20px;
+}
+/*活动背景图尺寸*/
+.activeImage{
+  height: 100px;
+  width: 100px;
+}
+
+/*好友列表*/
+.friend-list{
+  height: 300px;
+}
+
+/**
+聊天记录框
+ */
+.chat-history{
+  height: 400px;
+}
+
+/**
+聊天头像大小
+ */
+.chat-headImg{
+  width:100px;
+  height: 100px;
+}
+
+/**
+发送信息框
+ */
+.chat-send{
+  height: 200px;
+}
+/**
+发送信息内容框
+ */
+.chat-send-content{
+  height: 140px;
 }
diff --git a/src/index.tsx b/src/index.tsx
index f5185c1..1851916 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+
 import * as serviceWorker from './serviceWorker';
+import App from "./App";
+
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+       <App/>
   </React.StrictMode>,
   document.getElementById('root')
 );
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>
diff --git a/src/my/MyDialog.tsx b/src/my/MyDialog.tsx
index 28d8c25..860fe3a 100644
--- a/src/my/MyDialog.tsx
+++ b/src/my/MyDialog.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Draggable from "react-draggable";
-import {Paper} from "@material-ui/core";
+import {Paper, Tooltip} from "@material-ui/core";
 import {MyDialogProps} from "../entity";
 
 /**
@@ -26,11 +26,17 @@ export class MyDialog extends React.Component<MyDialogProps, any>{
             >
                 <div className="d-flex justify-content-between p-3" >
                     <span className="invisible"/>
-                    <h3 id="draggable-dialog-title" style={{cursor:"move"}}>{this.props.menuName}</h3>
-                    <img  src="close.svg" alt="关闭" style={{width:"40px"}} onClick={()=>this.props.onClose()}/>
+                    <Tooltip title="按下光标拖放弹窗到其他位置" placement="left">
+                        <h3 id="draggable-dialog-title" style={{cursor:"move"}}>{this.props.menuName}</h3>
+                    </Tooltip>
+                    <Tooltip title="关闭弹窗" placement="left">
+                        <img src="close.svg" alt="关闭弹窗" className="closeIcon40" onClick={()=>this.props.onClose()}/>
+                    </Tooltip>
                 </div>
 
-                {this.props.content}
+                <div className="p-3">
+                    {this.props.content}
+                </div>
 
                 {/*<DialogActions>*/}
                 {/*    <Button autoFocus  color="primary">*/}
diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx
index f78e69e..34f96d4 100644
--- a/src/my/MyFriend.tsx
+++ b/src/my/MyFriend.tsx
@@ -1,7 +1,59 @@
 import React from "react";
-import {Col, Container, ListGroup, Row} from "react-bootstrap";
-import {Friend} from "../entity";
+import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react-bootstrap";
+import {Chat, Friend, User} from "../entity";
+import {Tooltip} from "@material-ui/core";
+import moment from "moment";
 
+/**
+ * 聊天窗头像名字
+ * @param props
+ * @constructor
+ */
+function UserPart(props:Readonly<any>) {
+    return (
+        <Col xs={4}>
+            <Image roundedCircle={true} src={props.headImg} className="chat-headImg"/>
+            <span className="d-block text-center" style={{width:"100px"}}>{props.name}</span>
+        </Col>
+    )
+}
+
+/**
+ * 聊天窗内容
+ * @param props
+ * @constructor
+ */
+function ContentPart(props:Readonly<any>) {
+    return (
+        <Col xs={7}>
+            <h6 className="text-center">{moment(props.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
+            <p>{props.content}</p>
+        </Col>
+    )
+}
+
+/**
+ * 一组信息
+ * @param props
+ * @constructor
+ */
+function GroupPart(props:Readonly<any>) {
+    if(props.flag){
+        return (
+            <Row>
+                <UserPart name={props.name} headImg={props.headImg}/>
+                <ContentPart content={props.content}/>
+            </Row>)
+    }else{
+        return (
+            <Row>
+                <ContentPart content={props.content}/>
+                <UserPart name={props.name} headImg={props.headImg}/>
+            </Row>)
+    }
+}
+
+const maxLength=150
 /**
  * 我的好友
  */
@@ -12,35 +64,182 @@ export class MyFriend extends React.Component<any,any>{
         super(props);
 
         this.state={
-            friendList:[]
+            //好友列表
+            friendList:[],
+            //查找好友关键字
+            queryFriend:"",
+            //用户列表
+            userList:[],
+            //聊天记录
+            chatList:[],
+            //当前选中好友
+            friendIndex:-1,
+            //发送内容
+            sendContent:''
         }
     }
 
+    componentDidMount() {
+        this.loadMyFriend("")
+    }
 
-    //加载我的好友
-    loadMyFriend(){
+    /**
+     * 查找用户
+     * @param keyword
+     */
+    queryUser(keyword:string){
+        this.setState({
+            userList:[{
+                //用户姓名
+                name:"张三",
+                //用户年龄
+                age:Math.floor(Math.random()*100)+1,
+                //用户电话
+                mobile:15920722180,
+                //发送时间
+                time:new Date().getTime()
+            },
+            {
+                //用户姓名
+                name:"李四",
+                //用户年龄
+                age:Math.floor(Math.random()*100)+1,
+                //用户电话
+                mobile:15920722180,
+                //发送时间
+                time:new Date().getTime()
+            },
+            {
+                //用户姓名
+                name:"王五",
+                //用户年龄
+                age:Math.floor(Math.random()*100)+1,
+                //用户电话
+                mobile:15920722180,
+                //发送时间
+                time:new Date().getTime()
+            }]
+        })
+    }
+
+    //查找我的好友
+    loadMyFriend(keyword:string){
         this.setState({
             friendList:[{
-                name:"好友1"
+                name:"好友1",
+                status:true
+            },
+            {
+                name:"好友2",
+                status:false
+            },
+            {
+                name:"好友3",
+                status:false
+            }]
+        })
+    }
+
+    //加载聊天记录
+    loadMyChat(friend:Friend){
+        this.setState({
+            chatList:[{
+                //发送人名称
+                name:"张三",
+                //发送人头像
+                headImg:"logo512.png",
+                //发送内容
+                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
             },
-                {
-                    name:"好友2"
-                },
-                {
-                    name:"好友3"
-                }]
+            {
+                //发送人名称
+                name:"张三",
+                //发送人头像
+                headImg:"logo512.png",
+                //发送内容
+                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
+            },
+            {
+                //发送人名称
+                name:"abc",
+                //发送人头像
+                headImg:"logo512.png",
+                //发送内容
+                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
+            }]
         })
     }
 
     render() {
+
         return (
             <Container>
                 <Row>
-                    <Col xs={6}>
-                        <ListGroup>
-                            <ListGroup.Item>我的好友</ListGroup.Item>
-                            {this.state.friendList.map((friend:Friend)=><ListGroup.Item>{friend.name}</ListGroup.Item>)}
+                    <Col xs={4}>
+                        <ListGroup className="overflow-auto bg-light friend-list">
+                            <ListGroup.Item variant="primary">我的好友</ListGroup.Item>
+                            <ListGroup.Item>
+                                <FormControl placeholder="查找好友" onChange={(e)=>this.loadMyFriend(e.target.value)}/>
+                            </ListGroup.Item>
+                            {this.state.friendList.map((friend:Friend,index:number)=>
+                                <Tooltip  key={"tooltip"+index} title={"点击查看和"+friend.name+"的聊天记录"} placement={"right"}>
+                                    <ListGroup.Item onClick={()=>
+                                    {
+                                        this.setState({
+                                            friendIndex:index
+                                        })
+                                        this.loadMyChat(friend)
+                                    }} className={index===this.state.friendIndex?"text-success":"text-dark"}
+                                        style={{cursor:"pointer"}} variant={friend.status?"info":"secondary"}>{friend.name}
+                                    </ListGroup.Item>
+                                </Tooltip>)}
+                        </ListGroup>
+
+                        <ListGroup className="overflow-auto bg-light friend-list">
+                            <ListGroup.Item variant="primary">添加好友</ListGroup.Item>
+                            <ListGroup.Item>
+                                <FormControl placeholder="查找用户" onChange={(e)=>this.queryUser(e.target.value)}/>
+                            </ListGroup.Item>
+
+                            {this.state.userList.map((user:User,index:number)=>
+                                <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
+                                    <span>{user.name}</span>
+                                    <Tooltip title="查看用户信息" placement="right">
+                                        <img src="user.svg" alt="查看用户信息" className="userIcon"/>
+                                    </Tooltip>
+                                </ListGroup.Item>)}
                         </ListGroup>
+
+                    </Col>
+
+                    <Col xs={8}>
+                        <Container className="bg-light chat-history overflow-auto">
+                            {this.state.chatList.map((chat:Chat,index:number)=>
+                                <GroupPart key={"group"+index} name={chat.name} headImg={chat.headImg} content={chat.content} flag={this.props.user===chat.name}/>
+                            )}
+                        </Container>
+                        <Container className={"bg-white chat-send p-3 border-info border "+(this.state.friendIndex!==-1?"":"d-none")}>
+                            <Row>
+                                <Col xs={12} className="chat-send-content" contentEditable={true} onKeyPress={(e:any)=>{
+                                    if(e.target.innerText.length>=maxLength){
+                                        e.preventDefault()
+                                    }
+                                }} onKeyUp={(e:any)=>
+                                {
+                                    this.setState({sendContent:e.target.innerText})
+                                }}>
+
+                                </Col>
+                            </Row>
+                            <Row>
+                                <Col xs={8}>
+                                    <p className="text-info align-middle">{"您还可以输入"+(maxLength-this.state.sendContent.length)+"个字符"}</p>
+                                </Col>
+                                <Col className="text-right">
+                                    <Button variant={"info"}>发送</Button>
+                                </Col>
+                            </Row>
+                        </Container>
                     </Col>
                 </Row>
             </Container>
diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx
index 1347d66..a24c979 100644
--- a/src/sub/IndexMenu.tsx
+++ b/src/sub/IndexMenu.tsx
@@ -35,7 +35,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             },{
                 activeId: 123,
                 //活动标题
@@ -43,7 +43,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             },{
                 activeId: 123,
                 //活动标题
@@ -51,7 +51,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             }],[{
                 activeId: 123,
                 //活动标题
@@ -59,7 +59,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             },{
                 activeId: 123,
                 //活动标题
@@ -67,7 +67,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             },{
                 activeId: 123,
                 //活动标题
@@ -75,7 +75,7 @@ export class IndexMenu extends React.Component<any, any>{
                 //活动内容
                 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                 //活动图片
-                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+                activeImg: "/logo512.png"
             }]]
         })
     }
@@ -87,7 +87,7 @@ export class IndexMenu extends React.Component<any, any>{
                <Col className="col-4" key={"col"+subIndex}>
                    <Card>
                        <Card.Header>
-                        <img src={active.activeImg} alt="活动图片" style={{width:"100px",height:"100px"}}/>
+                        <img src={active.activeImg} alt="活动图片" className="activeImage"/>
                        </Card.Header>
                        <Card.Body>
                           <ListGroup>
diff --git a/src/sub/MyHelp.tsx b/src/sub/MyHelp.tsx
index 1a643ae..1edfbbe 100644
--- a/src/sub/MyHelp.tsx
+++ b/src/sub/MyHelp.tsx
@@ -203,7 +203,7 @@ export class MyHelp extends React.Component<any, MyHelpState>{
                                 </Tooltip>
                             }
                         >
-                    <img  src="close.svg" alt="取消推荐" style={{width:"20px"}} onClick={()=> {
+                    <img src="close.svg" alt="取消推荐" className="closeIcon20" onClick={()=> {
                         delete this.state.chooseFriendList[key]
                         this.setState({
                             chooseFriendList:this.state.chooseFriendList
diff --git a/yarn.lock b/yarn.lock
index b5cf580..8a68270 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1526,7 +1526,7 @@
 
 "@types/cookie@^0.3.3":
   version "0.3.3"
-  resolved "https://registry.npm.taobao.org/@types/cookie/download/@types/cookie-0.3.3.tgz?cache=0&sync_timestamp=1589385151733&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fcookie%2Fdownload%2F%40types%2Fcookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  resolved "https://registry.npm.taobao.org/@types/cookie/download/@types/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
   integrity sha1-hbx0ungvt6o6UU0RdngysOO8aAM=
 
 "@types/eslint-visitor-keys@^1.0.0":
@@ -1550,7 +1550,7 @@
 
 "@types/hoist-non-react-statics@^3.0.1":
   version "3.3.1"
-  resolved "https://registry.npm.taobao.org/@types/hoist-non-react-statics/download/@types/hoist-non-react-statics-3.3.1.tgz?cache=0&sync_timestamp=1588200643669&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fhoist-non-react-statics%2Fdownload%2F%40types%2Fhoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  resolved "https://registry.npm.taobao.org/@types/hoist-non-react-statics/download/@types/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha1-ESSq/lEYy1kZd66xzqrtEHDrA58=
   dependencies:
     "@types/react" "*"
@@ -3232,7 +3232,7 @@ cookie@0.4.0:
 
 cookie@^0.4.0:
   version "0.4.1"
-  resolved "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz?cache=0&sync_timestamp=1587525865178&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookie%2Fdownload%2Fcookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  resolved "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
   integrity sha1-r9cT/ibr0hupXOth+agRblClN9E=
 
 copy-concurrently@^1.0.0: