diff --git a/share_project/src/main/resources/static/browse.html b/share_project/src/main/resources/static/browse.html
index 5354f5b67786ed533b15a0a21601ac100eb5f135..1941e4fbdd528f76c6a0b0fc50750171c29f1c36 100644
--- a/share_project/src/main/resources/static/browse.html
+++ b/share_project/src/main/resources/static/browse.html
@@ -23,7 +23,7 @@
             </div>
 
             <div class="choice">
-                <a href="/share/browse.html?type=search&key=">
+                <a href="/browse.html?type=search&key=">
                     <div class="browse current">浏览项目</div>
                 </a>
                 <!-- 记得将share加回去 -->
diff --git a/share_project/src/main/resources/static/css/project-details.css b/share_project/src/main/resources/static/css/project-details.css
new file mode 100644
index 0000000000000000000000000000000000000000..d611424529c71d97ae8586a95300d7051f86cd7a
--- /dev/null
+++ b/share_project/src/main/resources/static/css/project-details.css
@@ -0,0 +1,518 @@
+body {
+    background-color: #FEFDFA;
+}
+
+.large {
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 48px;
+    background: #FFFFFF;
+    box-shadow: 0px 7px 6px 1px rgba(60, 60, 60, 0.05);
+    z-index: 999;
+}
+
+.logo {
+    position: absolute;
+    top: 11px;
+    left: 54px;
+    width: 75px;
+    height: 30px;
+}
+
+.logo img {
+    width: 100%;
+    height: auto;
+}
+
+.browse,
+.publish {
+    position: absolute;
+    top: 0px;
+    left: 263px;
+    width: 120px;
+    height: 48px;
+    font-size: 15px;
+    font-weight: 300;
+    font-family: SourceHanSansCN-Light;
+    color: #3C3C3C;
+    text-align: center;
+    line-height: 48px;
+}
+
+.choice .publish {
+    left: 383px;
+}
+
+.current {
+    background: #FDFAEB;
+    font-family: SourceHanSansCN-Bold;
+    font-size: 15px;
+    font-weight: bold;
+    color: #FADA3C;
+    line-height: 48px;
+    height: 48px;
+}
+
+.current::after {
+    content: "";
+    display: block;
+    width: 31px;
+    height: 4px;
+    background: #FADA3C;
+    border-radius: 2px;
+    margin: -3px auto;
+}
+
+
+/* 登录注册按钮代码 */
+
+.register,
+.login {
+    position: absolute;
+    top: 12px;
+    right: 125px;
+    width: 48px;
+    height: 24px;
+    background: #FFFDF4;
+    border: 1px solid #F0CA10;
+    border-radius: 12px;
+    font-family: SourceHanSansCN-Light;
+    font-size: 12px;
+    font-weight: 300;
+    color: #F0CA10;
+    line-height: 24px;
+    text-align: center;
+}
+
+#nav .login {
+    right: 53px;
+}
+
+.register:hover,
+.login:hover {
+    background-color: #FADA3C;
+    color: #fff;
+}
+
+
+/* 头像 */
+
+.message {
+    position: absolute;
+    top: 13px;
+    right: 147px;
+    width: 19px;
+    height: 21px;
+}
+
+.message img:nth-child(1) {
+    width: 100%;
+    height: auto;
+}
+
+.message img:nth-child(2) {
+    position: absolute;
+    top: 0;
+    right: -3px;
+    width: 13px;
+    height: 13px;
+}
+
+.message span {
+    display: block;
+    position: absolute;
+    top: -6px;
+    right: -5px;
+    width: 17px;
+    height: 17px;
+    background-color: red;
+    border-radius: 50%;
+    font-size: 10px;
+    color: #fff;
+    line-height: 17px;
+    text-align: center;
+}
+
+.pic {
+    position: absolute;
+    top: 12px;
+    right: 80px;
+    width: 27px;
+    height: 27px;
+}
+
+.pic img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+
+/* 头像下的列表 */
+
+.pic ul {
+    margin-left: -10.5px;
+    width: 48px;
+    height: 52px;
+    background: #FFFFFF;
+    border: 1px solid #EEEEEE;
+    border-radius: 0px 0px 3px 3px;
+    display: none;
+}
+
+.pic li {
+    width: 48px;
+    height: 26px;
+    font-size: 6px;
+    font-family: SourceHanSansCN-Light;
+    font-weight: 300;
+    color: #666666;
+    transform: scale(0.85);
+    line-height: 28px;
+}
+
+.pic ul li:hover {
+    color: #EEC708;
+}
+
+.msg span {
+    display: block;
+    font-size: 16px;
+    font-family: SourceHanSansCN-Regular;
+    font-weight: 400;
+    color: #3C3C3C;
+    margin-left: 506px;
+    margin-top: 76px;
+}
+
+.box {
+    float: left;
+    margin: 50px 0 0 100px;
+}
+
+
+/* 雇佣者的那个框 左上角 */
+
+.employer {
+    position: relative;
+    width: 700px;
+    height: 120px;
+    /* border: 1px solid red; */
+}
+
+.head-photo {
+    position: absolute;
+    top: 35px;
+    left: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    box-shadow: 0px 7px 6px 3px rgba(60, 60, 60, 0.05);
+}
+
+.head-photo img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.nickname {
+    position: absolute;
+    font-family: SourceHanSansCN-Regular;
+    top: 45px;
+    left: 108px;
+}
+
+.publish-time {
+    position: absolute;
+    top: 70px;
+    left: 108px;
+    font-family: SourceHanSansCN-Normal;
+    font-size: 12px;
+    color: #aaa;
+}
+
+
+/* 眼睛小图片 */
+
+.scan-num {
+    position: absolute;
+    top: 60px;
+    left: 456px;
+    width: 25px;
+    height: 20px;
+}
+
+.scan-num span {
+    position: absolute;
+    left: 30px;
+    font-size: 14px;
+}
+
+.scan-num img {
+    width: 20px;
+    height: 20px;
+}
+
+
+/* 对所有文本框进行限制 */
+
+.textarea {
+    resize: none;
+    height: 90px;
+    width: 500px;
+    border: 2px solid #BFBFBF;
+    background-color: #FEFDFA;
+    padding: 7px;
+    overflow-y: auto;
+    font-family: SourceHanSansCN-Normal;
+    color: #666;
+}
+
+
+/* 每一个tr */
+
+tr {
+    height: 35px;
+}
+
+
+/* 每一个格子 */
+
+td {
+    width: 100px;
+    vertical-align: top;
+    text-align: right;
+    /* border: 1px solid #ccc; */
+    font-size: 14px;
+    font-family: SourceHanSansCN-Normal;
+    font-weight: 300;
+    color: #666;
+}
+
+.proj-name {
+    height: 55px;
+}
+
+.proj-name-content {
+    font-weight: bold!important;
+    padding-bottom: 4px;
+    font-size: 24px;
+    margin-left: 14px;
+    padding-bottom: 10px;
+    color: #3C3C3C;
+}
+
+tr td:last-child {
+    width: 300px;
+    text-align: left;
+    padding-left: 15px;
+    font-weight: normal;
+}
+
+
+/* 备注那一栏 */
+
+.note {
+    height: 20px;
+    overflow: hidden;
+}
+
+.submit {
+    border: 2px solid #F0CA10;
+    padding: 8px 18px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all .3s;
+    background-color: #FADA3C;
+    color: #fff;
+    line-height: 30px;
+    font-size: 18px;
+    letter-spacing: 1.5px;
+    margin: 40px 0 15px 520px;
+    outline: none;
+}
+
+.submit:hover {
+    transform: scale(1.1);
+}
+
+.line1 {
+    width: 330px;
+    height: 0;
+    border-top: 2px solid #ccc;
+    margin: 90px 0 25px;
+}
+
+.status {
+    display: block;
+    font-family: SourceHanSansCN-Normal;
+    font-size: 20px;
+    color: #333;
+}
+
+
+/* 关于竞选成功和参与竞选的人 */
+
+.success,
+.campaign {
+    float: left;
+    width: 300px;
+    padding-left: 31px;
+    padding-top: 16px;
+}
+
+.success div,
+.campaign div {
+    font-size: 14px;
+    font-family: SourceHanSansCN-Normal;
+    font-weight: 700;
+    color: #666;
+    margin-bottom: 15px;
+}
+
+.success ul li,
+.campaign ul li {
+    float: left;
+    list-style: none;
+    margin-right: 10px;
+}
+
+.success-pic,
+.campaign-pic {
+    width: 40px;
+    height: 40px;
+}
+
+.success-pic img,
+.campaign-pic img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+
+/* 右边那一栏 */
+
+.right {
+    margin-top: 100px;
+    float: left;
+}
+
+.type {
+    display: block;
+    float: left;
+    background: #FEFDFA;
+    border: 1px solid #CEAC23;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 300;
+    color: #CEAC23;
+    font-family: SourceHanSansCN-Light;
+    padding: 1.5px 10px;
+    margin-right: 13px;
+    margin-top: -1px;
+}
+
+
+/* 中线分隔 */
+
+.line2 {
+    float: left;
+    width: 2px;
+    height: 613px;
+    background-color: #ccc;
+    margin-top: 100px;
+}
+
+.right {
+    width: 300px;
+    height: 300px;
+    padding: 30px;
+    /* border: 1px solid red; */
+}
+
+.about-author {
+    display: block;
+    font-family: SourceHanSansCN-Normal;
+    font-size: 20px;
+    color: #333;
+}
+
+.big-shortcut {
+    position: relative;
+    width: 250px;
+    height: 150px;
+    /* border: 1px solid blue; */
+}
+
+.big-head-pic {
+    position: absolute;
+    top: 25px;
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+}
+
+.big-head-pic img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.big-shortcut span,
+.email {
+    position: absolute;
+    top: 44px;
+    left: 120px;
+    font-size: 18px;
+    font-family: SourceHanSansCN-Regular;
+    color: #333;
+}
+
+.email {
+    font-size: 14px;
+    top: 74px;
+    color: #aaa;
+}
+
+.chat-to-author,
+.author-home {
+    float: left;
+    margin-left: 10px;
+    margin-top: 5px;
+    position: relative;
+    width: 110px;
+    height: 30px;
+    border: 2px solid #F0CA10;
+    padding: 8px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all .3s;
+}
+
+.author-home {
+    margin-left: 15px;
+}
+
+.chat-to-author:hover,
+.author-home:hover {
+    transform: scale(1.1);
+}
+
+.chat-to-author img,
+.author-home img {
+    width: 33px;
+    height: 30px;
+}
+
+.chat-to-author span,
+.author-home span {
+    position: absolute;
+    top: 10px;
+    left: 46px;
+    font-family: SourceHanSansCN-Regular;
+    color: #CEAC23;
+}
\ No newline at end of file
diff --git a/share_project/src/main/resources/static/images/bigchat.png b/share_project/src/main/resources/static/images/bigchat.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c0e22548d437bc953d4f398b37bf3ce83395dc9
Binary files /dev/null and b/share_project/src/main/resources/static/images/bigchat.png differ
diff --git a/share_project/src/main/resources/static/images/eye.png b/share_project/src/main/resources/static/images/eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb3bea7b54792a395f1a2eb6680e88723264c3e0
Binary files /dev/null and b/share_project/src/main/resources/static/images/eye.png differ
diff --git a/share_project/src/main/resources/static/images/home.png b/share_project/src/main/resources/static/images/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..409f20bf9ab8ba80de21a8039d91382ae313476e
Binary files /dev/null and b/share_project/src/main/resources/static/images/home.png differ
diff --git a/share_project/src/main/resources/static/js/page/browse.js b/share_project/src/main/resources/static/js/page/browse.js
index 1c63d82a24c5c284861d52c866e0a2573e6fe43f..47fd6d7d08f88e38d1b600e81bb935c8a52acc6b 100644
--- a/share_project/src/main/resources/static/js/page/browse.js
+++ b/share_project/src/main/resources/static/js/page/browse.js
@@ -95,7 +95,7 @@ const box2 = new Vue({
                     function(res) {
                         if (res.data.status = 200 && res.data.status < 300) {
                             console.log(res.data.message)
-                            //接下来跳到个人中心，个人中心待写
+                                //接下来跳到个人中心，个人中心待写 
                         } else {
                             alert(res.data.message)
                         }
diff --git a/share_project/src/main/resources/static/project-details.html b/share_project/src/main/resources/static/project-details.html
new file mode 100644
index 0000000000000000000000000000000000000000..8a2f097db7abd058252558dad01fa82f04f0f4c7
--- /dev/null
+++ b/share_project/src/main/resources/static/project-details.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>项目详情</title>
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/font.css">
+    <link rel="stylesheet" href="css/project-details.css">
+</head>
+
+<body>
+    <!-- 顶部 -->
+    <div class="large">
+        <header id="nav">
+            <div class="logo">
+                <img src="images/logo.png" alt="">
+            </div>
+
+            <div class="choice">
+                <a href="/browse.html?type=search&key=">
+                    <div class="browse current">浏览项目</div>
+                </a>
+                <!-- 记得将share加回去 -->
+                <a href="/browse.html?type=publish&key=">
+                    <div class="publish">发布项目</div>
+                </a>
+            </div>
+
+            <!-- 没有登录显示登录注册按钮 -->
+            <span v-show="!isLogin">
+            <a href="/share/choice-register.html" class="register">注册</a>
+            <a href="/share/login.html" class="login">登录</a>
+        </span>
+
+            <!-- 登录之后显示个人中心 -->
+            <div v-show="isLogin">
+                <div class="message">
+                    <a href="/share/chats.html">
+                        <img src="images/msg_1.png" alt="">
+                        <span v-if="unread">{{unread}}</span>
+                    </a>
+                </div>
+
+                <div class="pic" @mouseenter='showMenu' @mouseleave='hiddenMenu'>
+                    <img :src="userPicture" alt="">
+                    <ul :style='{display: isShow}'>
+                        <a href="#">
+                            <li>
+                                <span>个人中心</span>
+                            </li>
+                        </a>
+                        <a>
+                            <li @click='logout'>
+                                <span>退出</span>
+                            </li>
+                        </a>
+                    </ul>
+                </div>
+
+            </div>
+
+        </header>
+    </div>
+
+    <div class="box">
+        <!-- 招聘人简介 -->
+        <div class="employer">
+            <div class="head-photo">
+                <img src="images/picture/picture1.jpg" alt="">
+            </div>
+            <div class="shortcut">
+                <span class="nickname">nickName</span>
+                <span class="publish-time">发布于：2020-10-10 10:00</span>
+            </div>
+            <div class="scan-num">
+                <img src="images/eye.png" alt="">
+                <span>5</span>
+            </div>
+
+        </div>
+        <!-- 具体项目详情 -->
+        <table>
+            <tr class="proj-name">
+                <td colspan="2"><span class="proj-name-content">帮忙拿东西去戏班</span></td>
+            </tr>
+
+            <tr>
+                <td><span>项目价格：</span></td>
+                <td><span>￥5</span></td>
+            </tr>
+            <tr>
+                <td><span>截止日期：</span></td>
+                <td><span>2021-4-6 12:00</span></td>
+            </tr>
+            <tr>
+                <td><span>技能需求：</span></td>
+                <td>
+                    <span>无</span>
+                </td>
+            </tr>
+            <tr>
+                <td><span>工作地点：</span></td>
+                <td>
+                    <span>融创空间</span>
+                </td>
+            </tr>
+            <tr>
+                <td><span>项目状态：</span></td>
+                <td><span>
+                    正在招募.....
+                </span></td>
+            </tr>
+            <tr>
+                <td><span>项目分类：</span></td>
+                <td>
+                    <span class="type">前端</span>
+                    <span class="type">后端</span>
+                    <span class="type">设计</span>
+                </td>
+            </tr>
+            <tr>
+                <td><span>项目描述：</span></td>
+                <td>
+                    <div class="textarea" name="" id="" cols="30" rows="10" readonly>
+                        需要将一份资料拿到1215中。文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办 文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办 文字太长怎么办文字太长怎么办文字太长怎么办 文字太长怎么办文字太长怎么办 文字太长怎么办文字太长怎么办文字太长怎么办文字太长怎么办 文字太长怎么办文字太长怎么办文字太长怎么办
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 10px;"></tr>
+            <tr>
+                <td><span>特别备注：</span></td>
+                <td>
+                    <span>
+                        一定要准时！
+                        一定要准时！一定要准时！一定要准时！一定要准时！一定要准时！
+                    </span>
+                </td>
+            </tr>
+        </table>
+
+        <button class="submit">参与竞选</button>
+
+    </div>
+
+    <div class="line2"></div>
+
+    <div class="right">
+        <span class="about-author">关于作者</span>
+        <div class="big-shortcut">
+            <div class="big-head-pic">
+                <img src="images/picture/pic.jpg" alt="">
+            </div>
+            <span>nickname</span>
+            <div class="email">xiaolan@126.com</div>
+        </div>
+
+        <div class="chat-to-author">
+            <img src="images/bigchat.png" alt="">
+            <span>和TA联系</span>
+        </div>
+        <div class="author-home">
+            <img src="images/home.png" alt="">
+            <span>TA的主页</span>
+        </div>
+
+        <div class="line1"></div>
+        <!-- 招募情况 -->
+        <div class="status">竞选状态</div>
+        <div class="success">
+            <div>竞选成功：</div>
+            <ul>
+                <li>
+                    <div class="success-pic">
+                        <img src="images/pic.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="success-pic">
+                        <img src="images/pic.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="success-pic">
+                        <img src="images/pic.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="success-pic">
+                        <img src="images/pic.jpg" alt="">
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="campaign">
+            <div>正在竞选：</div>
+            <ul>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+                <li>
+                    <div class="campaign-pic">
+                        <img src="images/pic_2.jpg" alt="">
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+
+
+    <script src="js/vue.min.js"></script>
+    <script src="js/axios.js"></script>
+    <script src="js/jquery.min.js"></script>
+    <script src="js/page/nav.js"></script>
+    <script src="js/page/isLogin.js"></script>
+</body>
+
+</html>
\ No newline at end of file