diff --git a/css/details.css b/css/details.css
index 2aea07c..f941b76 100644
--- a/css/details.css
+++ b/css/details.css
@@ -344,7 +344,7 @@
   position: relative;
 }
 .content .side .item.pitch {
-  width: calc(100% + 1px);
+  width: calc(100% + 2px);
   background-color: #fbfbfb;
   border-top: 1px solid #ebebeb;
   border-bottom: 1px solid #ebebeb;
diff --git a/css/details.less b/css/details.less
index 937d522..c0b8bed 100644
--- a/css/details.less
+++ b/css/details.less
@@ -398,7 +398,7 @@
                     border-radius: 12px 0 0 0;
                     overflow: hidden;
                 }
-                width: calc(100% + 1px);
+                width: calc(100% + 2px);
                 background-color: rgba(251, 251, 251, 1);
                 border-top: 1px solid rgba(235, 235, 235, 1);
                 border-bottom: 1px solid rgba(235, 235, 235, 1);
diff --git a/css/projectList.css b/css/projectList.css
new file mode 100644
index 0000000..5119420
--- /dev/null
+++ b/css/projectList.css
@@ -0,0 +1,169 @@
+.boxbox {
+  width: 1200px;
+  background-color: #fbfbfb;
+  border-radius: 12px;
+  position: relative;
+  margin-bottom: 20px;
+}
+.boxbox::after {
+  content: "";
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 100%;
+  height: 66px;
+  background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
+  border-radius: 18px;
+  z-index: -1;
+}
+.boxbox .tab {
+  height: 60px;
+  font-size: 14px;
+  color: #7f7f7f;
+  border-bottom: 1px dotted #ebebeb;
+  padding-left: 24px;
+}
+.boxbox .tab a {
+  color: #7f7f7f;
+}
+.boxbox .tab a:hover {
+  text-decoration: underline;
+  color: #000000;
+}
+.boxbox .tab .img {
+  width: 6px;
+  height: 10px;
+  margin: 0 10px;
+}
+.boxbox .tab .current {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 14px;
+  color: #000000;
+}
+.boxbox .details {
+  padding: 0 0 0 60px;
+}
+.boxbox .details .logo {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  z-index: 1;
+  margin-top: 36px;
+  margin-right: 39px;
+  margin-bottom: 36px;
+  display: inline-flex;
+}
+.boxbox .details .right {
+  padding-top: 31px;
+  padding-bottom: 47px;
+  padding-right: 5px;
+}
+.boxbox .details .right .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 28px;
+  color: #000000;
+  margin-bottom: 21px;
+  position: relative;
+  z-index: 1;
+}
+.boxbox .details .right .title {
+  font-size: 14px;
+  color: #333333;
+  margin-bottom: 20px;
+}
+.boxbox .details .right .list .item {
+  line-height: 22px;
+}
+.boxbox .details .right .list .item:not(:last-of-type) {
+  margin-bottom: 12px;
+}
+.boxbox .details .right .list .item .organ {
+  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 14px;
+  color: #FFFFFF;
+  background-color: #f7a602;
+  border-radius: 6px;
+  padding: 0 9.5px;
+  margin-right: 18px;
+}
+.boxbox .details .right .list .item .text {
+  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #555555;
+}
+.screen-box {
+  width: 1200px;
+  height: 90px;
+  background: inherit;
+  background-color: #fbfbfb;
+  border: none;
+  border-radius: 11px;
+  padding-left: 34px;
+}
+.screen-box .title {
+  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 16px;
+  color: #000000;
+  margin-right: 20px;
+}
+.screen-box .title .icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+.screen-box .item {
+  margin-top: 15px;
+  padding: 10px;
+  border-radius: 15px;
+}
+.screen-box .item.show {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.17254902);
+  background-color: #f2f2f2;
+  height: 526px;
+}
+.screen-box .item .input {
+  height: 40px;
+  background-color: #ffffff;
+  border: 1px solid #d7d7d7;
+  border-radius: 72px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #AAAAAA;
+  padding: 0 17px;
+}
+.screen-box .item .input .icon {
+  width: 10px;
+  height: 6px;
+}
+.screen-box .item.organ .input {
+  width: 240px;
+}
+.screen-box .item.major .input {
+  width: 355px;
+}
+.screen-box .item.year .input {
+  width: 240px;
+}
+.screen-box .btn {
+  width: 100px;
+  height: 40px;
+  background-color: #6fc16d;
+  border-radius: 20px;
+  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-top: 25px;
+  margin-left: 20px;
+  cursor: pointer;
+}
diff --git a/css/projectList.less b/css/projectList.less
new file mode 100644
index 0000000..c828b27
--- /dev/null
+++ b/css/projectList.less
@@ -0,0 +1,209 @@
+.boxbox {
+    width: 1200px;
+    background-color: rgba(251, 251, 251, 1);
+    border-radius: 12px;
+    position: relative;
+    margin-bottom: 20px;
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: -5px;
+        left: 0;
+        width: 100%;
+        height: 66px;
+        background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%);
+        border-radius: 18px;
+        z-index: -1;
+    }
+
+    .tab {
+        height: 60px;
+        font-size: 14px;
+        color: #7f7f7f;
+        border-bottom: 1px dotted rgb(235, 235, 235);
+        padding-left: 24px;
+
+        a {
+            color: #7f7f7f;
+
+            &:hover {
+                text-decoration: underline;
+                color: #000000;
+            }
+        }
+
+        .img {
+            width: 6px;
+            height: 10px;
+            margin: 0 10px;
+        }
+
+        .current {
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+            font-weight: 650;
+            font-style: normal;
+            font-size: 14px;
+            color: #000000;
+        }
+    }
+
+    .details {
+        padding: 0 0 0 60px;
+
+        .logo {
+            width: 120px;
+            height: 120px;
+            position: relative;
+            z-index: 1;
+            // padding-right: 10px;
+            // padding-bottom: 7px;
+            margin-top: 36px;
+            margin-right: 39px;
+            margin-bottom: 36px;
+            display: inline-flex;
+        }
+
+        .right {
+            padding-top: 31px;
+            padding-bottom: 47px;
+            padding-right: 5px;
+
+            .name {
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                font-weight: 650;
+                font-style: normal;
+                font-size: 28px;
+                color: #000000;
+                margin-bottom: 21px;
+                position: relative;
+                z-index: 1;
+            }
+
+            .title {
+                font-size: 14px;
+                color: #333333;
+                margin-bottom: 20px;
+            }
+
+            .list {
+                .item {
+                    line-height: 22px;
+
+                    &:not(:last-of-type) {
+                        margin-bottom: 12px;
+                    }
+
+                    .organ {
+                        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 14px;
+                        color: #FFFFFF;
+                        background-color: rgba(247, 166, 2, 1);
+                        border-radius: 6px;
+                        padding: 0 9.5px;
+                        margin-right: 18px;
+                    }
+
+                    .text {
+                        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        font-size: 14px;
+                        color: #555555;
+                    }
+                }
+            }
+
+        }
+
+
+    }
+
+}
+
+.screen-box {
+    width: 1200px;
+    height: 90px;
+    background: inherit;
+    background-color: rgba(251, 251, 251, 1);
+    border: none;
+    border-radius: 11px;
+    padding-left: 34px;
+
+    .title {
+        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+        font-weight: 650;
+        font-style: normal;
+        font-size: 16px;
+        color: #000000;
+        margin-right: 20px;
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+        }
+    }
+
+    .item {
+        margin-top: 15px;
+        padding: 10px;
+        border-radius: 15px;
+
+        &.show {
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.172549019607843);
+            background-color: rgba(242, 242, 242, 1);
+            height: 526px;
+        }
+
+        .input {
+            height: 40px;
+            background-color: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(215, 215, 215, 1);
+            border-radius: 72px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #AAAAAA;
+            padding: 0 17px;
+
+            .icon {
+                width: 10px;
+                height: 6px;
+            }
+        }
+
+        &.organ {
+            .input {
+                width: 240px;
+            }
+        }
+
+        &.major {
+            .input {
+                width: 355px;
+            }
+        }
+
+        &.year {
+            .input {
+                width: 240px;
+            }
+        }
+    }
+
+    .btn {
+        width: 100px;
+        height: 40px;
+        background-color: rgba(111, 193, 109, 1);
+        border-radius: 20px;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        margin-top: 25px;
+        margin-left: 20px;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/html/projectList.html b/html/projectList.html
new file mode 100644
index 0000000..05f6d9f
--- /dev/null
+++ b/html/projectList.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="/css/common.css" />
+    <link rel="stylesheet" href="/css/projectList.css" />
+    <script src="/js/axios.min.js"></script>
+    <script src="/js/vue.global.js"></script>
+    <script src="/js/common.js"></script>
+    <script src="/js/base.js"></script>
+
+</head>
+
+<body>
+    <div class="main" id="app">
+        <img class="index-icon" src="/img/index-icon.png" />
+
+        <div class="boxbox">
+            <div class="tab flexacenter">
+                首页
+                <img class="img" src="/img/arrows.svg" />
+                全部榜单
+                <img class="img" src="/img/arrows.svg" />
+                <div class="current">QS世界综合排名（2025）</div>
+            </div>
+            <div class="details flexflex">
+                <img class="logo" src="/img/world-icon.png" />
+                <div class="right flex1">
+                    <div class="name">世界排行榜</div>
+                    <div class="title">了解评榜机构：</div>
+                    <div class="list">
+                        <div class="item flexacenter">
+                            <div class="organ">QS</div>
+                            <div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="organ">QS</div>
+                            <div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="organ">QS</div>
+                            <div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="screen-box flexflex">
+            <div class="title flexacenter">
+                <img class="icon" src="/img/screen-icon.png">
+                筛选榜单
+            </div>
+
+            <div class="item organ">
+                <div class="input flexacenter">
+                    <div class="text flex1">请选择机构</div>
+                    <img class="icon" src="/img/arrows-black.svg">
+                </div>
+            </div>
+            <div class="item major">
+                <div class="input flexacenter">
+                    <div class="text flex1">请选择专业</div>
+                    <img class="icon" src="/img/arrows-black.svg">
+                </div>
+            </div>
+            <div class="item year">
+                <div class="input flexacenter">
+                    <div class="text flex1">请选择年份</div>
+                    <img class="icon" src="/img/arrows-black.svg">
+                </div>
+            </div>
+
+            <div class="btn flexcenter">查看 </div>
+        </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/img/arrows-black.svg b/img/arrows-black.svg
new file mode 100644
index 0000000..40f14e4
--- /dev/null
+++ b/img/arrows-black.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="6px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -729 -622 )">
+    <path d="M 9.8997995991984 0.618556701030928  C 9.96659986639947 0.687285223367696  10 0.766323024054982  10 0.855670103092784  C 10 0.945017182130583  9.96659986639947 1.02405498281787  9.8997995991984 1.09278350515464  L 5.23046092184369 5.89690721649484  C 5.16366065464262 5.96563573883161  5.08684034736139 6  5 6  C 4.91315965263861 6  4.83633934535738 5.96563573883161  4.76953907815631 5.89690721649484  L 0.100200400801603 1.09278350515464  C 0.0334001336005345 1.02405498281787  0 0.945017182130583  0 0.855670103092784  C 0 0.766323024054982  0.0334001336005345 0.687285223367696  0.100200400801603 0.618556701030928  L 0.601202404809619 0.103092783505155  C 0.668002672010688 0.0343642611683841  0.744822979291917 0  0.831663326653307 0  C 0.918503674014696 0  0.995323981295925 0.0343642611683841  1.06212424849699 0.103092783505155  L 5 4.15463917525773  L 8.93787575150301 0.103092783505155  C 9.00467601870407 0.0343642611683841  9.0814963259853 0  9.16833667334669 0  C 9.25517702070808 0  9.33199732798931 0.0343642611683841  9.39879759519038 0.103092783505155  L 9.8997995991984 0.618556701030928  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 729 622 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/screen-icon.png b/img/screen-icon.png
new file mode 100644
index 0000000..9d0df64
Binary files /dev/null and b/img/screen-icon.png differ
diff --git a/img/world-icon.png b/img/world-icon.png
new file mode 100644
index 0000000..b64e9f7
Binary files /dev/null and b/img/world-icon.png differ