diff --git a/css/search.css b/css/search.css
index 6e2f0a3..093c8a8 100644
--- a/css/search.css
+++ b/css/search.css
@@ -40,19 +40,236 @@
   font-size: 14px;
   color: #000000;
 }
+.boxbox .body .left {
+  padding: 30px 24px 58px;
+  border-right: 1px dotted #ebebeb;
+}
 .boxbox .body .left .input-box {
   width: 750px;
   height: 48px;
   background-color: #f2f2f2;
   border-radius: 183px;
+  padding: 0 20px;
+  margin-bottom: 30px;
 }
 .boxbox .body .left .input-box input {
   border: none;
   outline: none;
   height: 100%;
   background-color: transparent;
+  font-size: 14px;
 }
 .boxbox .body .left .input-box .search-icon {
   width: 18px;
   height: 18px;
+  cursor: pointer;
+}
+.boxbox .body .left .total {
+  font-size: 14px;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  color: #555555;
+  margin-bottom: 20px;
+}
+.boxbox .body .left .total .sum {
+  font-weight: 650;
+  color: #000000;
+  margin: 0 5px;
+}
+.boxbox .body .left .empty-box {
+  width: 750px;
+  height: 540px;
+  background-color: #ffffff;
+  border: 1px solid #f2f2f2;
+  border-radius: 12px;
+}
+.boxbox .body .left .empty-box .icon {
+  margin-bottom: 12px;
+}
+.boxbox .body .left .list .item {
+  width: 750px;
+  background-color: #ffffff;
+  border: 1px solid #f2f2f2;
+  border-radius: 12px;
+  padding: 21px 15px;
+  margin-bottom: 20px;
+  position: relative;
+}
+.boxbox .body .left .list .item .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 12px;
+}
+.boxbox .body .left .list .item .english {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #555555;
+  margin-bottom: 12px;
+}
+.boxbox .body .left .list .item .introduce {
+  color: #555555;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+.boxbox .body .left .list .item .introduce .quantity {
+  font-family: "Arial-Black", "Arial Black", sans-serif;
+  font-weight: 900;
+  color: #000000;
+  margin-left: 8px;
+}
+.boxbox .body .left .list .item .introduce .line {
+  color: #d7d7d7;
+  margin: 0 10px;
+}
+.boxbox .body .left .list .item .word {
+  background-color: #f9f8f8;
+  border-radius: 3px;
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #7f7f7f;
+  margin-bottom: 12px;
+}
+.boxbox .body .left .list .item .operate {
+  position: absolute;
+  top: 18px;
+  right: 24px;
+}
+.boxbox .body .left .list .item .operate .circle {
+  position: relative;
+  z-index: 3;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background-color: #dbe3fd;
+  border: 1px solid #afb5ca;
+  border-radius: 20px;
+}
+.boxbox .body .left .list .item .operate .circle .img-add {
+  width: 12px;
+  height: 12px;
+}
+.boxbox .body .left .list .item .operate .circle .img-dot {
+  width: 18px;
+  height: 8px;
+}
+.boxbox .body .left .list .item .operate .select-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
+.boxbox .body .left .list .item .operate .select {
+  position: absolute;
+  top: -18px;
+  right: -24px;
+  background-color: #fbfbfb;
+  border-radius: 8px;
+  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
+  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
+  flex-direction: column;
+  transition: all 0.3s;
+  overflow: hidden;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  align-items: center;
+  padding-top: 68px;
+  z-index: 2;
+}
+.boxbox .body .left .list .item .operate .select.show {
+  width: 285px;
+  height: 171px;
+  opacity: 1;
+}
+.boxbox .body .left .list .item .operate .select .title {
+  font-size: 14px;
+  color: #7f7f7f;
+  margin-bottom: 19px;
+}
+.boxbox .body .left .list .item .operate .select .title .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid #cab157;
+  background-color: #fddf6d;
+  margin-right: 5px;
+}
+.boxbox .body .left .list .item .operate .select .btn {
+  cursor: pointer;
+  width: 144px;
+  height: 36px;
+  background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
+  background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
+  background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
+  border-radius: 158px;
+  font-size: 14px;
+  color: #333333;
+}
+.boxbox .body .left .list .item .operate .select .btn .img {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+.boxbox .body .left .list .item .operate .already {
+  font-size: 14px;
+  color: #7f7f7f;
+}
+.boxbox .body .left .list .item .operate .already .tick-box {
+  width: 20px;
+  height: 20px;
+  background-color: #f6f6f6;
+  border: 1px solid #d7d7d7;
+  border-radius: 20px;
+  margin-right: 5px;
+}
+.boxbox .body .left .list .item .operate .already .tick-box .img-tick {
+  width: 10px;
+  height: 8px;
+}
+.boxbox .body .right {
+  width: 400px;
+}
+.boxbox .body .right .title {
+  font-weight: 650;
+  font-style: normal;
+  font-size: 14px;
+  color: #000000;
+  margin-left: 24px;
+  margin-bottom: 20px;
+  margin-top: 30px;
+}
+.boxbox .body .right .title .dot {
+  width: 6px;
+  height: 16px;
+  background-color: #fddf6d;
+  border: 1px solid #cab157;
+  border-radius: 5px;
+  margin-right: 15px;
+}
+.boxbox .body .right .list {
+  font-size: 14px;
+  color: #333333;
+  flex-wrap: wrap;
+  margin-left: 45px;
+}
+.boxbox .body .right .list .item {
+  width: fit-content;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid #ebebeb;
+  border-radius: 12px;
+  padding: 0 16px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
 }
diff --git a/css/search.less b/css/search.less
index 0f01784..8f5f260 100644
--- a/css/search.less
+++ b/css/search.less
@@ -44,21 +44,255 @@
 
     .body {
         .left {
+            padding: 30px 24px 58px;
+            border-right: 1px dotted rgb(235, 235, 235);
             .input-box {
                 width: 750px;
                 height: 48px;
                 background-color: rgba(242, 242, 242, 1);
                 border-radius: 183px;
+                padding: 0 20px;
+                margin-bottom: 30px;
                 input {
                     border: none;
                     outline: none;
                     height: 100%;
                     background-color: transparent;
+                    font-size: 14px;
                 }
 
                 .search-icon {
                     width: 18px;
                     height: 18px;
+                    cursor: pointer;
+                }
+            }
+
+            .total {
+                font-size: 14px;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                color: #555555;
+                margin-bottom: 20px;
+                .sum {
+                    font-weight: 650;
+                    color: #000000;
+                    margin: 0 5px;
+                }
+            }
+
+            .empty-box {
+                width: 750px;
+                height: 540px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(242, 242, 242, 1);
+                border-radius: 12px;
+
+                .icon {
+                    margin-bottom: 12px;
+                }
+            }
+
+            .list {
+                .item {
+                    width: 750px;
+                    background-color: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(242, 242, 242, 1);
+                    border-radius: 12px;
+                    padding: 21px 15px;
+                    margin-bottom: 20px;
+                    position: relative;
+                    .name {
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 16px;
+                        color: #000000;
+                        margin-bottom: 12px;
+                    }
+
+                    .english {
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        font-size: 14px;
+                        color: #555555;
+                        margin-bottom: 12px;
+                    }
+                    .introduce {
+                        color: #555555;
+                        font-size: 14px;
+                        margin-bottom: 12px;
+                        .quantity {
+                            font-family: "Arial-Black", "Arial Black", sans-serif;
+                            font-weight: 900;
+                            color: #000000;
+                            margin-left: 8px;
+                        }
+                        .line {
+                            color: #d7d7d7;
+                            margin: 0 10px;
+                        }
+                    }
+                    .word {
+                        background-color: rgba(249, 248, 248, 1);
+                        border-radius: 3px;
+                        padding: 10px 15px;
+                        font-size: 14px;
+                        color: #7f7f7f;
+                        margin-bottom: 12px;
+                    }
+
+                    .operate {
+                        position: absolute;
+                        top: 18px;
+                        right: 24px;
+                        .circle {
+                            position: relative;
+                            z-index: 3;
+                            cursor: pointer;
+                            width: 28px;
+                            height: 28px;
+                            background-color: rgba(219, 227, 253, 1);
+                            border: 1px solid rgba(175, 181, 202, 1);
+                            border-radius: 20px;
+                            .img-add {
+                                width: 12px;
+                                height: 12px;
+                            }
+                            .img-dot {
+                                width: 18px;
+                                height: 8px;
+                            }
+                        }
+                        .select-mask {
+                            position: fixed;
+                            width: 100%;
+                            height: 100%;
+                            z-index: 2;
+                            top: 0;
+                            left: 0;
+                        }
+                        .select {
+                            position: absolute;
+                            top: -18px;
+                            right: -24px;
+                            background-color: rgba(251, 251, 251, 1);
+                            border-radius: 8px;
+                            -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
+                            -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
+                            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
+                            flex-direction: column;
+                            transition: all 0.3s;
+                            overflow: hidden;
+                            opacity: 0;
+                            width: 0;
+                            height: 0;
+                            align-items: center;
+                            padding-top: 68px;
+                            z-index: 2;
+                            &.show {
+                                width: 285px;
+                                height: 171px;
+                                opacity: 1;
+                            }
+                            // .top {
+                            // flex-direction: column;
+                            .title {
+                                .dot {
+                                    width: 8px;
+                                    height: 8px;
+                                    border-radius: 50%;
+                                    border: 1px solid rgb(202, 177, 87);
+                                    background-color: rgb(253, 223, 109);
+                                    margin-right: 5px;
+                                }
+
+                                font-size: 14px;
+                                color: #7f7f7f;
+                                margin-bottom: 19px;
+                            }
+
+                            .btn {
+                                cursor: pointer;
+                                width: 144px;
+                                height: 36px;
+                                background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
+                                background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
+                                background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
+                                border-radius: 158px;
+
+                                font-size: 14px;
+                                color: #333333;
+
+                                .img {
+                                    width: 16px;
+                                    height: 16px;
+                                    margin-right: 8px;
+                                }
+                            }
+                        }
+                        .already {
+                            font-size: 14px;
+                            color: #7f7f7f;
+                            .tick-box {
+                                width: 20px;
+                                height: 20px;
+                                background-color: rgba(246, 246, 246, 1);
+                                border: 1px solid rgba(215, 215, 215, 1);
+                                border-radius: 20px;
+                                margin-right: 5px;
+
+                                .img-tick {
+                                    width: 10px;
+                                    height: 8px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .right {
+            width: 400px;
+
+            .title {
+                .dot {
+                    width: 6px;
+                    height: 16px;
+                    background-color: rgba(253, 223, 109, 1);
+                    border: 1px solid rgba(202, 177, 87, 1);
+                    border-radius: 5px;
+                    margin-right: 15px;
+                }
+                font-weight: 650;
+                font-style: normal;
+                font-size: 14px;
+                color: #000000;
+                margin-left: 24px;
+                margin-bottom: 20px;
+                margin-top: 30px;
+            }
+
+            .list {
+                font-size: 14px;
+                color: #333333;
+                flex-wrap: wrap;
+                margin-left: 45px;
+
+                .item {
+                    width: fit-content;
+                    height: 36px;
+                    line-height: 36px;
+                    text-align: center;
+                    background-color: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(235, 235, 235, 1);
+                    border-radius: 12px;
+                    padding: 0 16px;
+                    margin-right: 10px;
+                    margin-bottom: 10px;
+                    cursor: pointer;
                 }
             }
         }
diff --git a/html/search.html b/html/search.html
index b9c2729..2b33b66 100644
--- a/html/search.html
+++ b/html/search.html
@@ -10,7 +10,6 @@
         <script src="/js/vue.global.js"></script>
         <script src="/js/common.js"></script>
         <script src="/js/base.js"></script>
-        <script src="/js/masonry.pkgd.min.js"></script>
         <style>
             [v-cloak] {
                 display: none;
@@ -23,18 +22,92 @@
             <img class="index-icon" src="/img/index-icon.png" />
             <div class="boxbox">
                 <div class="tab flexacenter">
-                    首页
+                    <a href="/" target="_blank">首页</a>
                     <img class="img" src="/img/arrows.svg" />
                     <div class="current">项目搜索</div>
                 </div>
-                <div class="body">
+                <div class="body flexflex">
                     <div class="left">
                         <div class="input-box flexacenter">
-                            <input class="flex1" placeholder="请输入" />
+                            <input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
                             <img class="search-icon" src="/img/search-black-icon.svg" />
                         </div>
+                        <div class="total flexacenter">
+                            共
+                            <div class="sum">{{ count }}</div>
+                            个搜索结果
+                        </div>
+                        <div v-if="count == 0 && showList.length == 0" class="empty-box flexcenter">
+                            <img class="icon" src="/img/empty-icon.png" />
+                            <span class="text">暂无搜索结果，换个关键词试试吧！</span>
+                        </div>
+                        <div class="list" v-if="showList.length != 0">
+                            <div class="item" v-for="(item ,index) in showList">
+                                <div class="operate flexcenter">
+                                    <div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
+                                        <div class="tick-box flexcenter">
+                                            <img class="img-tick" src="/img/tick-icon.svg" />
+                                        </div>
+                                        已加入
+                                    </div>
+                                    <div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" @click="openMoreSelect(index)" class="circle flexcenter">
+                                        <img class="img-dot" src="/img/dot-dot-dot.png" />
+                                    </div>
+                                    <div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick('list',item,index)">
+                                        <img class="img-add" src="/img/add-thick.svg" />
+                                    </div>
+                                    <div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll()"></div>
+                                    <div class="select flexflex" :class="{'show': item.moreState}">
+                                        <div class="title flexacenter">
+                                            <div class="dot"></div>
+                                            {{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
+                                        </div>
+                                        <div class="btn flexcenter" @click="handleClick('list',item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
+                                    </div>
+                                </div>
+                                <div class="name flexflex">{{ item.name_zh }}</div>
+                                <div class="english">{{ item.name_en }}</div>
+                                <div class="introduce flexacenter">
+                                    {{ item.department }}
+                                    <div class="flexacenter" v-if="item.rank">
+                                        <div class="line">|</div>
+                                        专业排名
+                                        <div class="quantity">{{ item.rank }}</div>
+                                    </div>
+                                    <div class="flexacenter" v-if="item.tuition_fee_text">
+                                        <div class="line">|</div>
+                                        学费HK$
+                                        <div class="quantity">{{ item.tuition_fee_text }}</div>
+                                    </div>
+                                </div>
+                                <div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
+                                <div class="tag flexflex">
+                                    <div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
+                                    <div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
+                                    <div class="tag-item" v-for="item in item.tags">{{ item }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <template v-if="historyList.length != 0">
+                            <div class="title flexacenter">
+                                <div class="dot"></div>
+                                历史搜索
+                            </div>
+                            <div class="list flexflex">
+                                <div class="item flexcenter" v-for="item in historyList" @click="selectKW(item)">{{ item }}</div>
+                            </div>
+                        </template>
+
+                        <div class="title flexacenter">
+                            <div class="dot"></div>
+                            标签搜索
+                        </div>
+                        <div class="list flexflex">
+                            <div class="item flexcenter" v-for="item in 9">搜索</div>
+                        </div>
                     </div>
-                    <div class="right"></div>
                 </div>
             </div>
             <!-- 底部 -->
@@ -45,11 +118,138 @@
             const projectIndex = createApp({
                 setup() {
                     onMounted(() => {
-                        // window.addEventListener("scroll", handleScroll)
-                        // init()
+                        // kw.value = "术"
+                        // getList()
+                        let history = localStorage.getItem("historyProject")
+                        if (history) {
+                            history = JSON.parse(history)
+                            historyList.value = history
+                        }
                     })
 
-                    return {}
+                    let historyList = ref([])
+
+                    let kw = ref("")
+                    let count = ref(0)
+                    let listAll = []
+                    const getList = () => {
+                        console.log("kw", kw.value)
+                        $ajaxget("/api/project.lists", {
+                            limit: 2000,
+                            page: 1,
+                            keyword: kw.value,
+                        }).then(res => {
+                            if (res.code != 200) return
+                            const data = res.data
+
+                            let list = data.data || []
+                            const date = new Date()
+                            const month = date.getMonth() + 1
+                            const year = date.getFullYear()
+
+                            list.forEach(element => {
+                                const semester = element.semester || {}
+
+                                if (month > semester.month && year + 1 <= semester.year) element["semesterState"] = true
+
+                                element["tuition_fee_text"] = formatNumberWithSpaces(element.tuition_fee)
+                                element["random"] = randomString(6)
+                            })
+
+                            listAll = list
+                            count.value = data.count
+                            calculateShowList()
+                        })
+                    }
+
+                    let showList = ref([])
+                    let page = ref(1)
+
+                    // 在 listAll 数据截取要显示的数据
+                    const calculateShowList = () => {
+                        const limit = 20
+                        if (page.value == 0) return
+                        const startIndex = (page.value - 1) * limit
+                        const endIndex = startIndex + limit
+                        let list = listAll.slice(startIndex, endIndex)
+                        showList.value = showList.value.concat(list)
+
+                        console.log("showList", showList)
+
+                        page.value = endIndex >= listAll.length ? 0 : page.value + 1
+                    }
+
+                    let pl = ref("")
+
+                    const submit = () => {
+                        kw.value = kw.value.trim()
+
+                        if (kw.value == "") kw.value = pl.value
+                        if (kw.value == "") return
+                        if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
+
+                        localStorage.setItem("historyProject", JSON.stringify(historyList.value))
+
+                        showList.value = []
+                        page.value = 1
+                        count.value = 0
+                        getList()
+                    }
+
+                    const selectKW = name => {
+                        kw.value = name
+                        if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
+
+                        localStorage.setItem("historyProject", JSON.stringify(historyList.value))
+
+                        showList.value = []
+                        page.value = 1
+                        count.value = 0
+                        getList()
+                    }
+
+                    // 点击事件
+                    const handleClick = (item, index, i) => {
+                        const random = item.random
+
+                        if (item.status == 1) return
+                        $ajax("/api/project.contrast/add", {
+                            projectid: item.id,
+                        }).then(res => {
+                            // console.log(baseRef.value)
+                            // baseRef.value.calculate(random, res.data.count)
+                            const uniqid = item["uniqid"]
+                            listAll.forEach(element => {
+                                if (element.uniqid == uniqid) {
+                                    element["contraststatus"] = {
+                                        status: 1,
+                                        ismanage: 1,
+                                    }
+                                }
+                            })
+
+                            showList.value[index]["contraststatus"] = {
+                                status: 1,
+                                ismanage: 1,
+                            }
+
+                            showList.value[index]["moreState"] = false
+                        })
+                    }
+
+                    const openMoreSelect = index => {
+                        closeMoreSelectAll()
+                        showList.value[index]["moreState"] = true
+                    }
+
+                    // 关闭所有 状态 选择 弹出框
+                    const closeMoreSelectAll = type => {
+                        showList.value.forEach(element => {
+                            element["moreState"] = false
+                        })
+                    }
+
+                    return { showList, count, kw, submit, pl, historyList, selectKW, handleClick, openMoreSelect, closeMoreSelectAll }
                 },
             })