diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/H5/h5.css b/H5/h5.css
index 6c92b51..6d957d0 100644
--- a/H5/h5.css
+++ b/H5/h5.css
@@ -1,16 +1,27 @@
 body {
   margin: 0;
   background-color: #f6f6f6;
+  overscroll-behavior: contain;
+  /* 防止滚动溢出时的回弹效果 */
+  -webkit-overflow-scrolling: touch;
+  /* 保持iOS上的平滑滚动 */
 }
 .admission-officer {
   min-height: 100vh;
   background-color: #f6f6f6;
 }
+.admission-officer .one-line-display {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .admission-officer * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
 }
 .admission-officer .flexflex {
   display: flex;
@@ -33,7 +44,703 @@ body {
 .admission-officer a {
   text-decoration: none;
 }
-.admission-officer .aaaa {
-  width: 10rem;
-  height: 6.25rem;
+.admission-officer .header-box {
+  width: 100vw;
+  height: 4.7rem;
+  position: relative;
+  z-index: 1;
+  margin-bottom: 1.16rem;
+}
+.admission-officer .header-box .header-bj {
+  width: 10rem;
+  height: 4.52rem;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+}
+.admission-officer .header-box .bj-green {
+  width: 10rem;
+  height: 4.62rem;
+  position: absolute;
+  top: 0.08rem;
+  left: 0;
+  z-index: 1;
+}
+.admission-officer .header-box .header-img {
+  height: 0.92rem;
+  position: absolute;
+  bottom: 0.98rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3;
+  width: 4.46rem;
+}
+.admission-officer .list .item {
+  width: 9rem;
+  position: relative;
+  margin: 0 auto;
+}
+.admission-officer .list .item:not(:last-of-type) {
+  margin: 0 auto 1.2rem;
+}
+.admission-officer .list .item .aa {
+  fill: #0170fe;
+}
+.admission-officer .list .item .header {
+  margin-bottom: 0.24rem;
+  position: relative;
+}
+.admission-officer .list .item .header .img {
+  width: 9rem;
+  border-radius: 0.2rem;
+  display: block;
+}
+.admission-officer .list .item .header .abbreviation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2rem;
+  height: 0.96rem;
+}
+.admission-officer .list .item .header .abbreviation .school-other {
+  position: absolute;
+  top: -0.0133rem;
+  left: -0.0133rem;
+  width: 2rem;
+  height: 0.96rem;
+  z-index: 1;
+}
+.admission-officer .list .item .header .abbreviation .text {
+  width: 1.56rem;
+  height: 0.52rem;
+  line-height: 0.52rem;
+  text-align: center;
+  background-color: #7d2882;
+  border-radius: 1.72rem;
+  font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  color: #ffffff;
+  font-size: 0.26rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+.admission-officer .list .item .header .header-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 1.28rem;
+  background-color: rgba(255, 255, 255, 0.92941176);
+  border-radius: 0.2rem;
+  width: max-content;
+  padding: 0.14rem 0.18rem;
+  max-width: 95%;
+  min-height: 0.78rem;
+}
+.admission-officer .list .item .header .header-content .school-img {
+  height: 0.78rem;
+  margin-right: 0.2rem;
+}
+.admission-officer .list .item .header .header-content .school-name {
+  font-size: 0.48rem;
+  margin-bottom: 0.08rem;
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 0.36rem;
+  color: #000000;
+}
+.admission-officer .list .item .header .header-content .school-name .arrow {
+  margin-left: 0.1333rem;
+  width: 0.24rem;
+  height: 0.24rem;
+}
+.admission-officer .list .item .header .header-content .school-english {
+  font-size: 0.26rem;
+  color: #555555;
+}
+.admission-officer .list .item .introduction {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.28rem;
+  color: #555555;
+  line-height: 0.48rem;
+  margin-bottom: 0.44rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.admission-officer .list .item .year {
+  background-color: #ebebeb;
+  border-radius: 0.16rem;
+  display: inline-flex;
+  margin-bottom: 0.4rem;
+}
+.admission-officer .list .item .year .year-item {
+  width: 1.8rem;
+  height: 0.56rem;
+  line-height: 0.56rem;
+  text-align: center;
+  font-size: 0.28rem;
+  color: #333333;
+  border-radius: 0.16rem;
+  position: relative;
+}
+.admission-officer .list .item .year .year-item.pitch {
+  background-color: #7d2882;
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  color: #ffffff;
+}
+.admission-officer .list .item .year .year-item .triangle {
+  margin-left: 0.19rem;
+  transition: all 0.3s;
+  width: 0;
+  height: 0;
+  border-left: 0.09rem solid transparent;
+  border-right: 0.09rem solid transparent;
+  border-top: 0.1rem solid #000;
+}
+.admission-officer .list .item .year .year-item.more.pitch .triangle {
+  border-top: 0.1rem solid #fff;
+}
+.admission-officer .list .item .year .year-item.more.unfold {
+  color: #fff;
+  background-color: #76c45e;
+  border-radius: 0.16rem 0.16rem 0 0;
+}
+.admission-officer .list .item .year .year-item.more.unfold .triangle {
+  border-top: 0.1rem solid #fff;
+  transform: translateY(-50%) rotate(180deg);
+}
+.admission-officer .list .item .year .year-item.more.unfold .more-mask,
+.admission-officer .list .item .year .year-item.more.unfold .more-box {
+  display: block;
+}
+.admission-officer .list .item .year .year-item .more-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  z-index: 102;
+}
+.admission-officer .list .item .year .year-item .more-box {
+  display: none;
+  background: #fff;
+  position: absolute;
+  top: 0.56rem;
+  left: 0;
+  width: 100%;
+  background-color: #76c45e;
+  border-radius: 0 0 0.2rem 0.2rem;
+  z-index: 102;
+}
+.admission-officer .list .item .year .year-item .more-box::after {
+  content: "";
+  width: 100%;
+  height: 0.1333rem;
+  display: block;
+  top: 0;
+  position: absolute;
+  transform: translateY(-100%);
+  z-index: -1;
+}
+.admission-officer .list .item .year .year-item .more-box .more-item {
+  height: 0.6667rem;
+  line-height: 0.6667rem;
+  font-size: 0.28rem;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+}
+.admission-officer .list .item .title-box {
+  margin-bottom: 0.36rem;
+}
+.admission-officer .list .item .title-box .title-item {
+  margin-bottom: 0.2rem;
+  background-color: #ffffff;
+  flex-direction: column;
+  width: 9rem;
+  border: 0.0133rem solid #f2f2f2;
+  border-radius: 0.2rem;
+  padding: 0.24rem 0.2rem;
+}
+.admission-officer .list .item .title-box .title-item .icon {
+  background-color: #f3f4f8;
+  border-radius: 50%;
+  width: 0.56rem;
+  height: 0.56rem;
+  margin-right: 0.2rem;
+}
+.admission-officer .list .item .title-box .title-item .icon .img {
+  width: 0.4rem;
+  height: 0.4rem;
+}
+.admission-officer .list .item .title-box .title-item .name {
+  width: 100%;
+  font-size: 0.32rem;
+  color: #333333;
+  margin-bottom: 0.2rem;
+}
+.admission-officer .list .item .title-box .title-item .name .text {
+  line-height: 0.56rem;
+  display: inline;
+}
+.admission-officer .list .item .title-box .title-item .name .label {
+  height: 0.52rem;
+  line-height: 0.52rem;
+  background-color: #3c7de9;
+  border-radius: 0.06rem;
+  position: relative;
+  color: #ffffff;
+  font-size: 0.26rem;
+  font-family: "ArialMT", "Arial", sans-serif;
+  padding: 0 0.12rem;
+  margin-left: 0.24rem;
+  display: inline-flex;
+}
+.admission-officer .list .item .title-box .title-item .name .label .arrows {
+  width: 0.18rem;
+  height: 0.32rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) rotate(180deg);
+  left: -0.08rem;
+}
+.admission-officer .list .item .title-box .title-item .bottom {
+  width: 100%;
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 0.28rem;
+  color: #000000;
+  justify-content: space-between;
+}
+.admission-officer .list .item .title-box .title-item .bottom .btn {
+  width: 1.4rem;
+  height: 0.64rem;
+  background-color: #7d2882;
+  font-size: 0.28rem;
+  border-radius: 1.72rem;
+  font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  color: #ffffff;
+}
+.admission-officer .list .item .title-box .title-item .bottom .btn .arrows {
+  width: 0.24rem;
+  height: 0.24rem;
+  margin-left: 0.1rem;
+}
+.admission-officer .end {
+  font-size: 0.26rem;
+  color: #d7d7d7;
+  text-align: center;
+  padding-top: 0.2667rem;
+  padding-bottom: 0.6667rem;
+}
+.admission-officer .interview-box {
+  width: 9rem;
+  height: 5.06rem;
+  position: relative;
+  margin: 0 auto 0.54rem;
+  z-index: 1;
+}
+.admission-officer .interview-box .head {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3.48rem;
+  height: 1.24rem;
+}
+.admission-officer .interview-box .head .icon {
+  width: 0.54rem;
+  height: 0.72rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+.admission-officer .interview-box .head .name {
+  width: 2.22rem;
+  height: 0.64rem;
+  position: absolute;
+  top: 0;
+  left: 0.6rem;
+  z-index: 2;
+}
+.admission-officer .interview-box .head .head-bj {
+  position: absolute;
+  top: -0.0133rem;
+  left: -0.0133rem;
+  width: 3.48rem;
+  height: 1.24rem;
+  z-index: 1;
+}
+.admission-officer .interview-box .ok {
+  position: absolute;
+  top: -1.96rem;
+  right: 0.38rem;
+  width: 1.58rem;
+  height: 2rem;
+  z-index: -1;
+}
+.admission-officer .interview-box .img {
+  width: 9rem;
+  height: 5.06rem;
+  border-radius: 0.2rem;
+}
+.admission-officer .interview-box .bottom {
+  position: absolute;
+  color: #ffffff;
+  left: 0;
+  bottom: 0;
+  width: 9rem;
+  height: 1.4rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
+  border-radius: 0 0 0.2rem 0.2rem;
+  padding: 0.24rem 0.44rem 0.22rem;
+}
+.admission-officer .interview-box .bottom .title {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 0.36rem;
+  margin-bottom: 0.04rem;
+}
+.admission-officer .interview-box .bottom .subtitle {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.28rem;
+}
+.admission-officer .interview-box .play {
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.admission-officer .interview-list {
+  width: 100vw;
+  box-sizing: border-box;
+  white-space: nowrap;
+  margin-bottom: 1.2rem;
+  overflow: auto;
+}
+.admission-officer .interview-list .item {
+  display: inline-flex;
+  flex-direction: column;
+  width: 3.92rem;
+  margin-right: 0.2rem;
+}
+.admission-officer .interview-list .item:first-of-type {
+  margin-left: 0.5rem;
+}
+.admission-officer .interview-list .item:last-of-type {
+  margin-right: 0.5rem;
+}
+.admission-officer .interview-list .item .img {
+  width: 3.92rem;
+  height: 2.2rem;
+  border-radius: 0.2rem;
+  margin-bottom: 0.2rem;
+}
+.admission-officer .interview-list .item .title {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 0.32rem;
+  margin-bottom: 0.1rem;
+}
+.admission-officer .interview-list .item .subtitle {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.26rem;
+  color: #7f7f7f;
+}
+.admission-officer .preach-box {
+  width: 9rem;
+  position: relative;
+  margin: 0 auto 0.54rem;
+  background: linear-gradient(123.15792388deg, #dfeaea 0%, #fbf9f5 100%);
+  border: 0.0133rem solid #e8efee;
+  border-radius: 0.4rem;
+  padding-top: 1.04rem;
+}
+.admission-officer .preach-box .head {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3.68rem;
+  height: 1.24rem;
+}
+.admission-officer .preach-box .head .icon {
+  width: 0.52rem;
+  height: 0.36rem;
+  position: absolute;
+  top: 0.16rem;
+  left: 0;
+  z-index: 2;
+}
+.admission-officer .preach-box .head .name {
+  width: 2.22rem;
+  height: 0.64rem;
+  position: absolute;
+  top: 0;
+  left: 0.68rem;
+  z-index: 2;
+}
+.admission-officer .preach-box .head .head-bj {
+  position: absolute;
+  top: -0.0133rem;
+  left: -0.0133rem;
+  width: 3.68rem;
+  height: 1.24rem;
+  z-index: 1;
+}
+.admission-officer .preach-box .swiper {
+  width: 9rem;
+  margin: 0 auto 0.2933rem;
+  display: flex;
+  white-space: nowrap;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.admission-officer .preach-box .swiper::-webkit-scrollbar {
+  display: none;
+}
+.admission-officer .preach-box .swiper .swiper-item {
+  display: flex;
+  flex-direction: column;
+  width: 9rem;
+}
+.admission-officer .preach-box .swiper .swiper-item .item {
+  height: 1.36rem;
+  padding-top: 0.3rem;
+  padding-left: 0.8rem;
+  padding-right: 0.6rem;
+  position: relative;
+}
+.admission-officer .preach-box .swiper .swiper-item .item:not(:last-of-type) {
+  border-bottom: 0.0133rem dotted #d7d7d7;
+}
+.admission-officer .preach-box .swiper .swiper-item .item .title {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.32rem;
+  color: #000000;
+  margin-bottom: 0.06rem;
+  position: relative;
+  width: 9rem;
+}
+.admission-officer .preach-box .swiper .swiper-item .item .title::after {
+  content: "";
+  width: 0.16rem;
+  height: 0.16rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: -0.44rem;
+  transform: translateY(-50%);
+  background-color: #76c45e;
+  border: 0.0133rem solid #406f30;
+}
+.admission-officer .preach-box .swiper .swiper-item .item .title .text {
+  max-width: 7.0133rem;
+}
+.admission-officer .preach-box .swiper .swiper-item .item .title .arrow {
+  width: 0.24rem;
+  height: 0.24rem;
+  margin-left: 0.2rem;
+}
+.admission-officer .preach-box .swiper .swiper-item .item .time {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #555555;
+  font-size: 0.26rem;
+}
+.admission-officer .preach-box .indicator {
+  margin: 0 auto 0.42rem;
+}
+.admission-officer .preach-box .indicator .item {
+  width: 0.2rem;
+  height: 0.08rem;
+  background-color: #d7d7d7;
+  border-radius: 0.4rem;
+}
+.admission-officer .preach-box .indicator .item.pitch {
+  background: #d35110;
+}
+.admission-officer .preach-box .indicator .item:not(:last-of-type) {
+  margin-right: 0.08rem;
+}
+.admission-officer .paly-box-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+.admission-officer .paly-box-mask .svg {
+  width: 1.3333rem;
+  height: 1.3333rem;
+  animation: rotate 1s linear infinite;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.admission-officer .paly-box-mask .paly-box .close {
+  position: absolute;
+  top: -0.8667rem;
+  right: 0;
+  width: 0.8667rem;
+  height: 0.8667rem;
+  cursor: pointer;
+}
+.admission-officer .paly-box-mask .paly-box .paly-video {
+  position: absolute;
+  top: -7rem;
+  left: 0;
+  width: 94vw;
+  height: 6.3333rem;
+  background-color: #000000;
+  border-radius: 0.1333rem;
+}
+.admission-officer .paly-box-mask .paly-box .paly-video .art-video-player,
+.admission-officer .paly-box-mask .paly-box .paly-video video {
+  border-radius: 0.1333rem;
+  overflow: hidden;
+}
+.page-header {
+  display: flex;
+  height: 60px;
+  padding: 0 0 0 15px;
+  align-items: center;
+  justify-content: space-between;
+  background: #3c7de9;
+  position: absolute;
+  z-index: 2;
+  width: 100vw;
+  box-sizing: border-box;
+}
+.page-header .logo {
+  display: inline-flex;
+  width: 116px;
+  height: 30px;
+  background-size: 100%;
+}
+.page-header .r {
+  display: inline-flex;
+  background: url(../img/menu.png) no-repeat center;
+  background-size: 19px 15px;
+  width: 49px;
+  height: 60px;
+}
+.nav-container {
+  position: fixed;
+  left: 0;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  display: none;
+}
+.nav-container .page-header {
+  position: relative;
+}
+.nav-container .r {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.nav-container .nav-list {
+  padding: 0 23px;
+  width: 100vw;
+  height: calc(100vh - 60px);
+  background: #fff;
+  position: relative;
+  left: 100vw;
+}
+.nav-container .nav-list .item {
+  border-bottom: 1px solid #ededed;
+  position: relative;
+  font-size: 16px;
+  color: #333;
+}
+.nav-container .nav-list .item a {
+  color: inherit;
+  height: 66px;
+  display: flex;
+  padding-left: 17px;
+  align-items: center;
+  justify-content: space-between;
+}
+.nav-container .nav-list .item .arrow {
+  display: inline-flex;
+  flex: 0 0 7px;
+  width: 7px;
+  height: 12px;
+  background: url(../img/arrow-grey.png) no-repeat;
+  background-size: 100%;
+}
+.nav-container .nav-list .item:last-child {
+  border-bottom: none;
+}
+.nav-container .nav-list .active {
+  color: #0170fe;
+  font-weight: bold;
+}
+.nav-container .nav-list .active .arrow {
+  background: #ffffff;
+}
+.nav-container .nav-list .active:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 25px;
+  width: 3px;
+  height: 16px;
+  background-color: #0170fe;
+}
+.nav-container .close {
+  position: fixed;
+  left: calc(50vw - 25px);
+  bottom: 50px;
+  width: 50px;
+  height: 50px;
+  background: url(../img/helloofficer-close.png) no-repeat center;
+  background-size: 30px 30px;
+}
+.active-nav {
+  display: block;
+}
+.active-nav .nav-list {
+  animation: toleft 0.3s forwards;
+}
+@keyframes toleft {
+  0% {
+    left: 100vw;
+  }
+  100% {
+    left: 0;
+  }
 }
diff --git a/H5/h5.html b/H5/h5.html
index 02818f2..6015e51 100644
--- a/H5/h5.html
+++ b/H5/h5.html
@@ -2,37 +2,472 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="divport" content="width=device-width, initial-scale=1.0" />
         <title>Document</title>
         <link rel="stylesheet" href="./h5.css" />
+
+        <style>
+            [v-cloak] {
+                display: none;
+            }
+        </style>
     </head>
     <body>
         <script>
-            (function (doc, win) {
-                var docEl = doc.documentElement,
-                    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
-                    recalc = function () {
-                        var clientWidth = docEl.clientWidth;
-                        if (!clientWidth) return;
-                        if (clientWidth >= 750) {
-                            docEl.style.fontSize = "100px";
+            (function (window, document) {
+                var sizeUI = 750; // 定义设计图尺寸
+                var remBase = 75; // 定义基准值
+                var docEl = document.documentElement;
+                var bodyEl = document.querySelector("body");
+
+                setRemUnit();
+
+                window.addEventListener("resize", setRemUnit);
+                window.addEventListener("pageshow", function (e) {
+                    if (e.persisted) setRemUnit();
+                });
+
+                function setRemUnit() {
+                    var docFontSize = (docEl.clientWidth / sizeUI) * remBase;
+                    docEl.style.fontSize = docFontSize + "px";
+                    bodyEl.style.fontSize = 16 / docFontSize + "rem";
+                    handleRemAdapt();
+                }
+
+                function handleRemAdapt() {
+                    var currentFontSize = parseInt(docEl.style.fontSize);
+                    var temp = currentFontSize;
+                    for (var i = 0; i < 100; i++) {
+                        var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize);
+                        var differ = realFontSize - currentFontSize;
+                        if (Math.abs(differ) >= 1) {
+                            if (differ > 0) temp--;
+                            else temp++;
+                            docEl.style.fontSize = temp + "px";
                         } else {
-                            docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
+                            break;
                         }
-                    };
-                if (!doc.addEventListener) return;
-                win.addEventListener(resizeEvt, recalc, false);
-                doc.addEventListener("DOMContentLoaded", recalc, false);
-            })(document, window);
+                    }
+                }
+            })(window, document);
         </script>
 
-        <div id="admission-officer" class="admission-officer" v-cloak>
+        <div id="admission-officer" class="admission-officer" v-cloak class="container">
+            <div class="header-box">
+                <img class="header-bj" src="https://app.gter.net/image/miniApp/offer/admission-bj-blue.svg" />
+                <img class="bj-green" src="https://app.gter.net/image/miniApp/offer/admission-bj-green.svg" />
+                <img class="header-img" src="https://app.gter.net/image/miniApp/offer/admission-text.png" />
+            </div>
 
-            <div class="aaaa"></div>
+            <div class="interview-box" v-if="interviewData" @click="getVideoUrl(interviewData.token)">
+                <div class="head">
+                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/interview-icon.png" />
+                    <img class="name" src="https://app.gter.net/image/miniApp/offer/interview-name.png" />
+                    <img class="head-bj" src="https://app.gter.net/image/miniApp/offer/interview-other.svg" />
+                </div>
+                <img class="ok" src="https://app.gter.net/image/miniApp/offer/duck-ok.png" />
+                <img class="img" :src="interviewData.video_cover" />
+                <img class="play" src="https://app.gter.net/image/miniApp/offer/play-btn.svg" />
+                <div class="bottom">
+                    <div class="title one-line-display">{{ interviewData.title }}</div>
+                    <div class="subtitle one-line-display">{{ interviewData.subtitle }}</div>
+                </div>
+            </div>
+
+            <div class="interview-list" scroll-x v-if="interviewList.length > 0">
+                <div class="item" v-for="(item,index) in interviewList" :key="index" @click="getVideoUrl(item.token)">
+                    <img class="img" :src="item.video_cover" />
+                    <div class="title one-line-display">{{ item.title }}</div>
+                    <div class="subtitle one-line-display">{{ item.subtitle }}</div>
+                </div>
+            </div>
+
+            <div class="preach-box" ref="swiperBox" v-if="preachList.length != 0" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+                <div class="head">
+                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/preach-icon.png" />
+                    <img class="name" src="https://app.gter.net/image/miniApp/offer/preach-name.png" />
+                    <img class="head-bj" src="https://app.gter.net/image/miniApp/offer/preach-other.svg" />
+                </div>
+                <div class="swiper flexflex" ref="swiperBoxSwiper" :style="{'height': preachList[0].length >= 3 ? '4.08rem' : preachList[0].length * 1.36 + 'rem'}">
+                    <div class="swiper-item" v-for="(item,index) in preachList" :key="index">
+                        <a class="item" v-for="(it,index) in item" :key="index" :href="it.link_url" target="_blank">
+                            <div class="title flexacenter">
+                                <div class="one-line-display text">{{ it.title }}</div>
+                                <img class="arrow" src="https://app.gter.net/image/miniApp/offer/arrow-return.svg" />
+                            </div>
+                            <div class="time one-line-display">{{ it.lecture_time || '长期答疑' }}</div>
+                        </a>
+                    </div>
+                </div>
+                <div class="indicator flexcenter" v-if="preachList.length > 1">
+                    <div class="item" :class="{'pitch': swiperCurrent == index}" v-for="(item,index) in preachList" :key="index"></div>
+                </div>
+            </div>
+
+            <div class="list" v-if="admissionList.length != 0">
+                <div class="item" v-for="(item,index) in admissionList" :key="item.id">
+                    <div class="header">
+                        <div class="abbreviation">
+                            <img class="school-other" src="https://app.gter.net/image/miniApp/offer/school-other.svg" />
+                            <div class="text" :style="{backgroundColor: item.color }">{{ item.abbreviation }}</div>
+                        </div>
+                        <img class="img" :src="item.banner" />
+                        <div class="header-content flexacenter">
+                            <img class="school-img" :src="item.logo" />
+                            <div class="flex1">
+                                <div class="school-name">
+                                    {{ item.name }}
+                                    <img class="arrow" src="https://app.gter.net/image/miniApp/offer/arrow-return.svg" />
+                                </div>
+                                <div class="school-english">{{ item.enname }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="introduction">{{ item.introduction }}</div>
+                    <div class="year flexacenter">
+                        <div class="year-item flexcenter" v-for="(it,i) in item.yList" :key="i" :class="{'pitch': item.pitch == it}" :style="{backgroundColor: item.pitch == it ? item.color : '' }" @click.stop="cutSchoolYear(index,it)">{{ it }}季</div>
+
+                        <div class="year-item more flexcenter" :class="[{'unfold': item.state,'pitch': item.isPitchMore}]" :style="{backgroundColor: item.state || item.isPitchMore ? item.color : '' }" @click="openSchoolYearState(index)" v-if="item.yListMore.length > 0">
+                            <text>{{ item.isPitchMore ? item.pitch + '季' : '更多' }}</text>
+                            <div class="triangle"></div>
+                            <div class="more-mask" @click.stop="closeSchoolYearState(index)"></div>
+                            <div class="more-box" :style="{backgroundColor: item.color }">
+                                <div class="more-item" v-for="(it,i) in item.yListMore" :key="i" @click.stop="selectSchoolYearState(index,it)">{{ it }}季</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="title-box">
+                        <div class="title-item flexcenter" v-for="(it,index) in item.list[item.pitch]" :key="index">
+                            <div class="name flexflex">
+                                <div class="icon flexcenter">
+                                    <img class="img" src="https://app.gter.net/image/miniApp/offer/course-icon.png" />
+                                </div>
+                                <div class="text flex1">
+                                    {{ it.title }}
+                                    <div class="label" v-if="it.tag">
+                                        <img class="arrows" src="https://app.gter.net/image/miniApp/offer/arrows-triangle-blue.svg" />
+                                        {{ it.tag }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="bottom flexacenter">
+                                <div class="time flexacenter">
+                                    <div class="icon flexcenter">
+                                        <img class="img" src="https://app.gter.net/image/miniApp/offer/time-icon.png" />
+                                    </div>
+                                    {{ it.date || '长期答疑' }}
+                                </div>
+                                <a class="btn flexcenter" :href="it.url" target="_blank" :style="{backgroundColor: item.color }">详情 <img class="arrows" src="https://app.gter.net/image/miniApp/offer/arrows-circle-white.svg" /></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="end">- End -</div>
+
+            <div class="paly-box-mask flexcenter" v-if="palyState">
+                <div class="paly-box" @click.stop="">
+                    <img class="close" src="../img/cross-white.svg" @click="closePalyState" />
+                    <div class="paly-video"></div>
+                </div>
+            </div>
         </div>
 
         <!-- 引入了 vue3 js 创建 vue3 实例 -->
         <script src="../js/vue.global.min.js"></script>
         <script src="../js/artplayer.js"></script>
+
+        <script>
+            // 创建Vue3实例
+            const { createApp, onMounted, ref, onUnmounted, reactive } = Vue;
+            const admissionApp = createApp({
+                setup() {
+                    onMounted(() => {
+                        init();
+                        getBannerList();
+                        getAdmissionLists();
+                    });
+
+                    let interviewData = ref({}); // 模式一 的第一个访谈
+
+                    let interviewList = ref({}); // 访谈 列表
+
+                    const init = () => {
+                        fetchData("/v1/admissionsOfficer/interview").then((res) => {
+                            if (res.code != 200) return;
+                            let data = res.data || [];
+                            for (let i = 0; i < 20; i++) {
+                                data.push({
+                                    title: "岭南大学保险",
+                                    subtitle: "香港商学院硕士都去卖保险了",
+                                    video_cover: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-Z0kdXrqqsgFptxhcq_cQnrlIKYkXFcXBq_D-81qNDQyOQ~~",
+                                    sid: 350 + i,
+                                    name: "岭南大学",
+                                    enname: "Lingnan University",
+                                    admission_officer_name: "施林佟",
+                                    admission_officer_rank: "副教授",
+                                    admission_officer_position: "数据科学学院助理院长",
+                                    focus_of_this_issue: "寄托建立了具有公信力的品牌评价系统\n致力打造一个华人区最专业的留学交流平台\n成为一个寄托或关于梦想的垂直门户网站",
+                                    istop: 1,
+                                    token: "D6zdTJ2cMaKd0g6nFqsa1JR5scupqIIg5Wuab33kATaY-myKGtBtHiygo4F5z8iY_Le6VEcmblBwOvlbiqvh1pyXKaET8hp8OsXbY1fFQwRKjq42OWQ3" + i,
+                                });
+                            }
+
+                            let target = null;
+                            const topItems = data.filter((item) => item.istop === 1);
+
+                            if (topItems.length > 0) target = topItems[Math.floor(Math.random() * topItems.length)];
+
+                            data = data.filter((item) => item.token !== target.token);
+
+                            interviewData.value = target;
+                            interviewList.value = data || [];
+                        });
+                    };
+
+                    let palyState = ref(false); // 播放弹窗状态
+
+                    let art = null; // 播放器实例
+
+                    const getVideoUrl = (token) => {
+                        fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
+                            palyState.value = true;
+                            setTimeout(() => {
+                                art = new Artplayer({
+                                    container: ".paly-box-mask .paly-box .paly-video",
+                                    url: res.data.url,
+                                    autoplay: true,
+                                    fullscreen: true,
+                                });
+                            }, 500);
+                        });
+                    };
+
+                    const closePalyState = () => {
+                        art?.pause();
+                        art?.destroy();
+                        palyState.value = false;
+                    };
+
+                    let admissionList = ref([]); // 学校 招生官 列表
+
+                    // 获取 院校 招生官 列表
+                    const getAdmissionLists = () => {
+                        fetchData(`/v1/admissionsOfficer/lists`).then((res) => {
+                            if (res.code != 200) return;
+                            const data = res.data;
+                            let target = data.data || [];
+
+                            target.forEach((item) => {
+                                let year = [];
+                                let obj = {};
+                                item.articles.forEach((e) => {
+                                    year.push(e.year);
+                                    obj[e.year] = e.data;
+                                });
+
+                                item["pitch"] = year[0];
+                                item["yList"] = year.slice(0, 4);
+                                item["yListMore"] = year.slice(4);
+                                item["list"] = obj;
+                            });
+
+                            admissionList.value = target;
+                        });
+                    };
+
+                    // 切换招生官 院校 的 年份
+                    const cutSchoolYear = (index, year) => {
+                        admissionList.value[index]["pitch"] = year;
+                    };
+
+                    // 点击 招生官 年份 更多弹窗
+                    const openSchoolYearState = (index) => (admissionList.value[index]["state"] = true);
+
+                    // 选择 招生官 年份 更多弹窗
+                    const selectSchoolYearState = (index, year) => {
+                        admissionList.value[index]["pitch"] = year;
+                        admissionList.value[index]["isPitchMore"] = true;
+                        admissionList.value[index]["state"] = false;
+                    };
+
+                    // 关闭 招生官 年份 更多弹窗
+                    const closeSchoolYearState = (index) => (admissionList.value[index]["state"] = false);
+
+                    let moreSchoolSid = ref(0); // 选中 学校 sid
+                    let moreSchoolData = ref({}); // 学校信息
+                    let moreSchoolList = ref([]); // 年份下 列表 数据
+                    let moreSchoolPitch = ref(0); // 选中年份
+                    let moreSchoolYList = ref([]); // 年份 列表
+                    let moreSchoolYMList = ref([]); // 年份 更多
+                    const openMoreSchool = (sid) => {
+                        fetchData(`/v1/admissionsOfficer/articles?sid=${sid}`).then((res) => {
+                            if (res.code != 200) return;
+                            const data = res.data || {};
+                            moreSchoolData.value = data.school;
+                            let target = data.data || [];
+                            console.log("target", target);
+                            let obj = {};
+                            let yearList = [];
+                            target.forEach((element) => {
+                                obj[element.year] = element.data;
+                                yearList.push(element.year);
+                            });
+
+                            moreSchoolYList.value = yearList.slice(0, 4);
+                            moreSchoolYMList.value = yearList.slice(4);
+                            moreSchoolPitch.value = yearList[0];
+                            moreSchoolList.value = obj;
+                            moreSchoolSid.value = sid;
+                            document.body.style.overflow = "hidden";
+                        });
+                    };
+
+                    let moreYearState = ref(false);
+
+                    const openMoreYearState = () => {
+                        moreYearState.value = true;
+                    };
+
+                    const closeMoreSchool = () => {
+                        moreSchoolSid.value = 0;
+                        document.body.style.overflow = "auto";
+                    };
+
+                    onUnmounted(() => {});
+
+                    let preachList = ref([]); // 宣讲会 列表
+                    let preachIndex = ref(0); // 宣讲会 下标
+                    let preachI = ref(0); // 宣讲会 下标
+                    let preachTimer = null;
+
+                    let preachInterval = 3; // 每页 4 条
+
+                    const getBannerList = () => {
+                        fetchData(`/v1/admissionsOfficer/banner`).then((res) => {
+                            if (res.code != 200) return;
+
+                            let data = res.data;
+
+                            for (let i = 0; i < 20; i++) {
+                                data.push({
+                                    id: i + 20,
+                                    title: "香港中文大学 | 美国西北大学双硕士学位课程",
+                                    lecture_time: "2025-07-12 00:00:00",
+                                    image_url: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-Z0rfHjqqsgFptxhT66SWgrlI64uMxcfWaHf9cJWpdxZDnzZ5RLrizQ0Mjk~",
+                                    image_id: 977797,
+                                    sort: 1,
+                                    link_url: "https://www.baidu.com",
+                                    status: 1,
+                                    created_at: "2025-07-11 16:59:10",
+                                    updated_at: "2025-07-11 17:09:33",
+                                });
+                            }
+
+                            // data.forEach((element, index) => (element["id"] = index + 1));
+                            data.forEach((element) => (element["lecture_time"] = timeformat(element["lecture_time"])));
+
+                            let target = [];
+                            for (let i = 0; i < data.length; i += preachInterval) {
+                                target.push(data.slice(i, i + preachInterval));
+                            }
+
+                            preachList.value = target;
+
+                            preachListTimeout();
+                        });
+                    };
+
+                    const timeformat = (time) => {
+                        time = time.replaceAll("-", "/"); // 修改格式
+                        let result = "";
+                        var datetime = new Date(time);
+                        var Nyear = datetime.getFullYear();
+                        var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
+                        var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
+                        var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
+                        var Nmin = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
+                        result = `${Nyear}年${Nmonth}月${Ndate}日 ${Nhour}:${Nmin}`;
+
+                        return result;
+                    };
+
+                    const swiperBox = ref(null);
+                    const swiperBoxSwiper = ref(null);
+                    let swiperCurrent = ref(0); // 宣讲会 下标
+                    let preachListTimer = null; // 宣讲会 定时器
+                    const preachListTimeout = () => {
+                        preachListTimer = setTimeout(() => {
+                            const width = swiperBox.value.scrollWidth;
+                            swiperCurrent.value++;
+
+                            if (swiperCurrent.value >= preachList.value.length) swiperCurrent.value = 0;
+
+                            swiperBoxSwiper.value.scrollTo({
+                                left: width * swiperCurrent.value,
+                                behavior: "smooth",
+                            });
+
+                            preachListTimeout();
+                        }, 3000);
+                    };
+
+                    // const touchStartX = ref(0);
+                    // const touchStartY = ref(0);
+
+                    const handleTouchStart = (e) => {
+                        clearTimeout(preachListTimer);
+                        // touchStartX.value = e.touches[0].clientX;
+                        // touchStartY.value = e.touches[0].clientY;
+                    };
+
+                    const handleTouchEnd = (e) => {
+                        preachListTimeout();
+
+                        // const touchEndX = e.changedTouches[0].clientX;
+                        // const touchEndY = e.changedTouches[0].clientY;
+                        // const diffX = touchEndX - touchStartX.value;
+                        // const diffY = touchEndY - touchStartY.value;
+                        // console.log(`Touch moved X: ${diffX}, Y: ${diffY}`);
+                    };
+
+                    const fetchData = (url, data) => {
+                        return new Promise((resolve, reject) => {
+                            const baseUrl = "https://api.gter.net";
+                            if (url.indexOf("http") == -1) url = baseUrl + url;
+                            // 构建查询字符串
+                            const queryString = Object.keys(data || {})
+                                .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+                                .join("&");
+
+                            // 将查询字符串添加到URL
+                            if (queryString) url += (url.indexOf("?") === -1 ? "?" : "&") + queryString;
+
+                            var xhr = new XMLHttpRequest();
+                            xhr.responseType = "json";
+                            xhr.withCredentials = true;
+
+                            xhr.open("POST", url, true);
+                            xhr.setRequestHeader("Content-Type", "application/json");
+
+                            xhr.onreadystatechange = function () {
+                                if (xhr.readyState === 4 && xhr.status === 200) {
+                                    let response = xhr.response;
+                                    resolve(response);
+                                }
+                            };
+
+                            xhr.send();
+                        });
+                    };
+
+                    return { swiperBoxSwiper, swiperBox, swiperCurrent, closePalyState, getVideoUrl, palyState, interviewList, closeSchoolYearState, selectSchoolYearState, openSchoolYearState, cutSchoolYear, admissionList, moreSchoolYMList, openMoreYearState, moreYearState, moreSchoolPitch, moreSchoolYList, moreSchoolList, moreSchoolData, moreSchoolSid, closeMoreSchool, openMoreSchool, interviewData, preachList, preachIndex, preachI, handleTouchStart, handleTouchEnd };
+                },
+            });
+            // 挂载到页面中的#app元素
+            admissionApp.mount("#admission-officer");
+        </script>
     </body>
 </html>
diff --git a/H5/h5.less b/H5/h5.less
index 034ed15..4e8f504 100644
--- a/H5/h5.less
+++ b/H5/h5.less
@@ -1,16 +1,26 @@
 body {
     margin: 0;
     background-color: rgba(246, 246, 246, 1);
+    overscroll-behavior: contain; /* 防止滚动溢出时的回弹效果 */
+    -webkit-overflow-scrolling: touch; /* 保持iOS上的平滑滚动 */
 }
 .admission-officer {
     min-height: 100vh;
     background-color: rgba(246, 246, 246, 1);
 
+    .one-line-display {
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
         scroll-behavior: smooth;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     }
 
     .flexflex {
@@ -40,8 +50,831 @@ body {
         text-decoration: none;
     }
 
-    .aaaa {
-        width: 10rem;
-        height: 6.25rem;
+    .header-box {
+        width: 100vw;
+        // height: 6.5333rem;
+        height: 4.7rem;
+        position: relative;
+        z-index: 1;
+        margin-bottom: 1.16rem;
+
+        .header-bj {
+            width: 10rem;
+            height: 4.52rem;
+            position: absolute;
+            top: 0;
+            z-index: 2;
+        }
+
+        .bj-green {
+            width: 10rem;
+            height: 4.62rem;
+            position: absolute;
+            top: 0.08rem;
+            left: 0;
+            z-index: 1;
+        }
+
+        .header-img {
+            // width: 3.56rem;
+            height: 0.92rem;
+            position: absolute;
+            bottom: 0.98rem;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 3;
+            width: 4.46rem;
+            // height: 1rem;
+        }
+    }
+
+    .list {
+        .item {
+            width: 9rem;
+            position: relative;
+            margin: 0 auto;
+
+            &:not(:last-of-type) {
+                margin: 0 auto 1.2rem;
+            }
+
+            .aa {
+                fill: #0170fe;
+            }
+
+            .header {
+                margin-bottom: 0.24rem;
+                position: relative;
+
+                .img {
+                    width: 9rem;
+                    // height: .8rem;
+                    border-radius: 0.2rem;
+                    display: block;
+                }
+
+                .abbreviation {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 2rem;
+                    height: 0.96rem;
+
+                    .school-other {
+                        position: absolute;
+                        top: -0.0133rem;
+                        left: -0.0133rem;
+                        width: 2rem;
+                        height: 0.96rem;
+                        z-index: 1;
+                    }
+
+                    .text {
+                        width: 1.56rem;
+                        height: 0.52rem;
+                        line-height: 0.52rem;
+                        text-align: center;
+                        background-color: rgba(125, 40, 130, 1);
+                        border-radius: 1.72rem;
+                        font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
+                        font-weight: 900;
+                        font-style: normal;
+                        color: #ffffff;
+                        font-size: 0.26rem;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        z-index: 2;
+                    }
+                }
+
+                .header-content {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    min-height: 1.28rem;
+                    background-color: rgba(255, 255, 255, 0.929411764705882);
+                    border-radius: 0.2rem;
+                    width: max-content;
+                    padding: 0.14rem 0.18rem;
+                    max-width: 95%;
+                    min-height: 0.78rem;
+
+                    .school-img {
+                        // width: 1rem;
+                        height: 0.78rem;
+                        margin-right: 0.2rem;
+                    }
+
+                    .school-name {
+                        font-weight: 650;
+                        font-size: 0.48rem;
+                        color: #000000;
+                        // line-height: 0.48rem;
+                        margin-bottom: 0.08rem;
+
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 0.36rem;
+                        color: #000000;
+
+                        .arrow {
+                            margin-left: 0.1333rem;
+                            width: 0.24rem;
+                            height: 0.24rem;
+                            // transform: rotate(180deg);
+                        }
+                    }
+
+                    .school-english {
+                        font-size: 0.26rem;
+                        color: #555555;
+                    }
+                }
+            }
+
+            .introduction {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                // font-size: .28rem;
+                font-size: 0.28rem;
+                color: #555555;
+                line-height: 0.48rem;
+                margin-bottom: 0.44rem;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .year {
+                background-color: rgba(235, 235, 235, 1);
+                border-radius: 0.16rem;
+                display: inline-flex;
+                margin-bottom: 0.4rem;
+
+                .year-item {
+                    width: 1.8rem;
+                    height: 0.56rem;
+                    line-height: 0.56rem;
+                    text-align: center;
+                    font-size: 0.28rem;
+                    color: #333333;
+                    border-radius: 0.16rem;
+                    position: relative;
+
+                    &.pitch {
+                        background-color: rgba(125, 40, 130, 1);
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        color: #ffffff;
+                    }
+
+                    .triangle {
+                        // width: .18rem;
+                        // height: .1rem;
+                        margin-left: 0.19rem;
+                        transition: all 0.3s;
+
+                        width: 0;
+                        height: 0;
+                        border-left: 0.09rem solid transparent;
+                        border-right: 0.09rem solid transparent;
+                        border-top: 0.1rem solid #000;
+                    }
+
+                    &.more {
+                        &.pitch {
+                            .triangle {
+                                border-top: 0.1rem solid #fff;
+                            }
+                        }
+                        &.unfold {
+                            color: #fff;
+                            background-color: #76c45e;
+                            border-radius: 0.16rem 0.16rem 0 0;
+
+                            .triangle {
+                                border-top: 0.1rem solid #fff;
+                                transform: translateY(-50%) rotate(180deg);
+                            }
+
+                            .more-mask,
+                            .more-box {
+                                display: block;
+                            }
+                        }
+                    }
+
+                    .more-mask {
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        display: none;
+                        // background-color: #0170fe;
+                        z-index: 102;
+                    }
+
+                    .more-box {
+                        display: none;
+                        background: #fff;
+                        position: absolute;
+                        top: 0.56rem;
+                        left: 0;
+                        width: 100%;
+                        background-color: rgba(118, 196, 94, 1);
+                        border-radius: 0 0 0.2rem 0.2rem;
+                        z-index: 102;
+
+                        &::after {
+                            content: "";
+                            width: 100%;
+                            height: 0.1333rem;
+                            display: block;
+                            top: 0;
+                            position: absolute;
+                            transform: translateY(-100%);
+                            z-index: -1;
+                        }
+
+                        .more-item {
+                            height: 0.6667rem;
+                            line-height: 0.6667rem;
+                            font-size: 0.28rem;
+                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        }
+                    }
+                }
+            }
+
+            .title-box {
+                margin-bottom: 0.36rem;
+
+                .title-item {
+                    margin-bottom: 0.2rem;
+                    background-color: #ffffff;
+                    flex-direction: column;
+                    width: 9rem;
+                    border: 0.0133rem solid rgba(242, 242, 242, 1);
+                    border-radius: 0.2rem;
+                    padding: 0.24rem 0.2rem;
+
+                    .icon {
+                        background-color: #f3f4f8;
+                        border-radius: 50%;
+                        width: 0.56rem;
+                        height: 0.56rem;
+                        margin-right: 0.2rem;
+
+                        .img {
+                            width: 0.4rem;
+                            height: 0.4rem;
+                        }
+                    }
+
+                    .name {
+                        width: 100%;
+                        font-size: 0.32rem;
+                        color: #333333;
+                        margin-bottom: 0.2rem;
+
+                        .text {
+                            line-height: 0.56rem;
+                            display: inline;
+                        }
+
+                        .label {
+                            height: 0.52rem;
+                            line-height: 0.52rem;
+                            background-color: #3c7de9;
+                            border-radius: 0.06rem;
+                            position: relative;
+                            color: #ffffff;
+                            font-size: 0.26rem;
+                            font-family: "ArialMT", "Arial", sans-serif;
+                            padding: 0 0.12rem;
+                            margin-left: 0.24rem;
+                            display: inline-flex;
+
+                            .arrows {
+                                width: 0.18rem;
+                                height: 0.32rem;
+                                position: absolute;
+                                top: 50%;
+                                transform: translateY(-50%) rotate(180deg);
+                                left: -0.08rem;
+                            }
+                        }
+                    }
+
+                    .bottom {
+                        width: 100%;
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 0.28rem;
+                        color: #000000;
+                        justify-content: space-between;
+
+                        .btn {
+                            width: 1.4rem;
+                            height: 0.64rem;
+                            background-color: rgba(125, 40, 130, 1);
+                            font-size: 0.28rem;
+                            color: #ffffff;
+                            border-radius: 1.72rem;
+                            font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
+                            font-weight: 900;
+                            font-style: normal;
+                            color: #ffffff;
+
+                            .arrows {
+                                width: 0.24rem;
+                                height: 0.24rem;
+                                margin-left: 0.1rem;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .end {
+        font-size: 0.26rem;
+        color: #d7d7d7;
+        text-align: center;
+        padding-top: 0.2667rem;
+        padding-bottom: 0.6667rem;
+    }
+
+    .interview-box {
+        width: 9rem;
+        height: 5.06rem;
+        position: relative;
+        margin: 0 auto 0.54rem;
+        z-index: 1;
+
+        .head {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3.48rem;
+            height: 1.24rem;
+
+            .icon {
+                width: 0.54rem;
+                height: 0.72rem;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+            }
+
+            .name {
+                width: 2.22rem;
+                height: 0.64rem;
+                position: absolute;
+                top: 0;
+                left: 0.6rem;
+                z-index: 2;
+            }
+
+            .head-bj {
+                position: absolute;
+                top: -0.0133rem;
+                left: -0.0133rem;
+                width: 3.48rem;
+                height: 1.24rem;
+                z-index: 1;
+            }
+        }
+
+        .ok {
+            position: absolute;
+            top: -1.96rem;
+            right: 0.38rem;
+            width: 1.58rem;
+            height: 2rem;
+            z-index: -1;
+        }
+
+        .img {
+            width: 9rem;
+            height: 5.06rem;
+            border-radius: 0.2rem;
+        }
+
+        .bottom {
+            position: absolute;
+            color: #ffffff;
+            left: 0;
+            bottom: 0;
+            width: 9rem;
+            height: 1.4rem;
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
+            border-radius: 0 0 0.2rem 0.2rem;
+            padding: 0.24rem 0.44rem 0.22rem;
+
+            .title {
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                font-weight: 650;
+                font-style: normal;
+                font-size: 0.36rem;
+                margin-bottom: 0.04rem;
+            }
+
+            .subtitle {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                font-size: 0.28rem;
+            }
+        }
+
+        .play {
+            width: 1rem;
+            height: 1rem;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .interview-list {
+        width: 100vw;
+        box-sizing: border-box;
+        white-space: nowrap;
+        margin-bottom: 1.2rem;
+        overflow: auto;
+
+        .item {
+            display: inline-flex;
+            flex-direction: column;
+            width: 3.92rem;
+            margin-right: 0.2rem;
+
+            &:first-of-type {
+                margin-left: 0.5rem;
+            }
+
+            &:last-of-type {
+                margin-right: 0.5rem;
+            }
+
+            .img {
+                width: 3.92rem;
+                height: 2.2rem;
+                border-radius: 0.2rem;
+                margin-bottom: 0.2rem;
+            }
+
+            .title {
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                font-weight: 650;
+                font-style: normal;
+                font-size: 0.32rem;
+                margin-bottom: 0.1rem;
+            }
+
+            .subtitle {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                font-size: 0.26rem;
+                color: #7f7f7f;
+            }
+        }
+    }
+
+    .preach-box {
+        width: 9rem;
+        // height: 5.88rem;
+        position: relative;
+        margin: 0 auto 0.54rem;
+        background: linear-gradient(123.157923884672deg, rgba(223, 234, 234, 1) 0%, rgba(251, 249, 245, 1) 100%);
+        border: 0.0133rem solid rgba(232, 239, 238, 1);
+        border-radius: 0.4rem;
+        padding-top: 1.04rem;
+        // padding-bottom: .42rem;
+
+        .head {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3.68rem;
+            height: 1.24rem;
+
+            .icon {
+                width: 0.52rem;
+                height: 0.36rem;
+                position: absolute;
+                top: 0.16rem;
+                left: 0;
+                z-index: 2;
+            }
+
+            .name {
+                width: 2.22rem;
+                height: 0.64rem;
+                position: absolute;
+                top: 0;
+                left: 0.68rem;
+                z-index: 2;
+            }
+
+            .head-bj {
+                position: absolute;
+                top: -0.0133rem;
+                left: -0.0133rem;
+                width: 3.68rem;
+                height: 1.24rem;
+                z-index: 1;
+            }
+        }
+
+        .swiper {
+            width: 9rem;
+            // width: 7.8rem;
+            // margin: 0 .6rem .2933rem .8rem;
+            margin: 0 auto 0.2933rem;
+            // flex-direction: column;
+            display: flex;
+            white-space: nowrap;
+            // 隐藏滚动条
+            overflow-x: auto;
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .swiper-item {
+                display: flex;
+                flex-direction: column;
+                width: 9rem;
+
+                .item {
+                    height: 1.36rem;
+                    padding-top: 0.3rem;
+                    padding-left: 0.8rem;
+                    padding-right: 0.6rem;
+                    position: relative;
+
+                    &:not(:last-of-type) {
+                        border-bottom: 0.0133rem dotted #d7d7d7;
+                    }
+
+                    .title {
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        font-size: 0.32rem;
+                        color: #000000;
+                        margin-bottom: 0.06rem;
+                        position: relative;
+                        width: 9rem;
+
+                        &::after {
+                            content: "";
+                            width: 0.16rem;
+                            height: 0.16rem;
+                            border-radius: 50%;
+                            position: absolute;
+                            top: 50%;
+                            left: -0.44rem;
+                            transform: translateY(-50%);
+                            background-color: #76c45e;
+                            border: 0.0133rem solid #406f30;
+                        }
+
+                        .text {
+                            max-width: 7.0133rem;
+                        }
+
+                        .arrow {
+                            width: 0.24rem;
+                            height: 0.24rem;
+                            margin-left: 0.2rem;
+                            // transform: rotate(180deg);
+                        }
+                    }
+
+                    .time {
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        color: #555555;
+                        font-size: 0.26rem;
+                    }
+                }
+            }
+        }
+
+        .indicator {
+            margin: 0 auto 0.42rem;
+
+            .item {
+                width: 0.2rem;
+                height: 0.08rem;
+                background-color: rgba(215, 215, 215, 1);
+                border-radius: 0.4rem;
+
+                &.pitch {
+                    background: rgba(211, 81, 16, 1);
+                }
+
+                &:not(:last-of-type) {
+                    margin-right: 0.08rem;
+                }
+            }
+        }
+    }
+
+    .paly-box-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 100;
+        .svg {
+            width: 1.3333rem;
+            height: 1.3333rem;
+            // 写个动画 无效旋转
+            animation: rotate 1s linear infinite;
+            @keyframes rotate {
+                from {
+                    transform: rotate(0deg);
+                }
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+
+        .paly-box {
+            // position: relative;
+            .close {
+                position: absolute;
+                top: -0.8667rem;
+                right: 0;
+                width: 0.8667rem;
+                height: 0.8667rem;
+                cursor: pointer;
+            }
+
+            .paly-video {
+                position: absolute;
+                top: -7rem;
+                left: 0;
+                width: 94vw;
+                height: 6.3333rem;
+                background-color: rgba(0, 0, 0, 1);
+                border-radius: 0.1333rem;
+                .art-video-player,
+                video {
+                    border-radius: 0.1333rem;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+}
+.page-header {
+    display: flex;
+    height: 60px;
+    padding: 0 0 0 15px;
+    align-items: center;
+    justify-content: space-between;
+    background: #3c7de9;
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    box-sizing: border-box;
+
+    .logo {
+        display: inline-flex;
+        width: 116px;
+        height: 30px;
+        background-size: 100%;
+    }
+
+    .r {
+        display: inline-flex;
+        background: url(../img/menu.png) no-repeat center;
+        background-size: 19px 15px;
+        width: 49px;
+        height: 60px;
+    }
+}
+
+.nav-container {
+    position: fixed;
+    left: 0;
+    top: 0px;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    display: none;
+
+    .page-header {
+        position: relative;
+        .logo {
+            // background: url(../img/helloofficer-logo.png) no-repeat;
+        }
+    }
+
+    .r {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .nav-list {
+        padding: 0 23px;
+        width: 100vw;
+        height: calc(100vh - 60px);
+        background: #fff;
+        position: relative;
+        left: 100vw;
+        .item {
+            border-bottom: 1px solid #ededed;
+            position: relative;
+            font-size: 16px;
+            color: #333;
+
+            a {
+                color: inherit;
+                height: 66px;
+                display: flex;
+                padding-left: 17px;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .arrow {
+                display: inline-flex;
+                flex: 0 0 7px;
+                width: 7px;
+                height: 12px;
+                background: url(../img/arrow-grey.png) no-repeat;
+                background-size: 100%;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .active {
+            color: #0170fe;
+            font-weight: bold;
+            .arrow {
+                background: #ffffff;
+            }
+
+            &:after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 25px;
+                width: 3px;
+                height: 16px;
+                background-color: #0170fe;
+            }
+        }
+    }
+
+    .close {
+        position: fixed;
+        left: calc(50vw - 25px);
+        bottom: 50px;
+        width: 50px;
+        height: 50px;
+        background: url(../img/helloofficer-close.png) no-repeat center;
+        background-size: 30px 30px;
+    }
+}
+.active-nav {
+    display: block;
+}
+.active-nav .nav-list {
+    animation: toleft 0.3s forwards;
+}
+@keyframes toleft {
+    0% {
+        left: 100vw;
+    }
+    100% {
+        left: 0;
     }
 }
diff --git a/css/index.css b/css/index.css
index ab37ebd..0b67339 100644
--- a/css/index.css
+++ b/css/index.css
@@ -6,6 +6,7 @@ body {
   min-height: 100vh;
   background-color: #f6f6f6;
   min-width: 1200px;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
 }
 .admission-officer * {
   padding: 0;
@@ -603,7 +604,6 @@ body {
   font-size: 20px;
   color: #000000;
   margin-bottom: 6px;
-  display: block;
 }
 .admission-officer .admission-body .school-list .school-item .right .info .name .arrows {
   width: 12px;
diff --git a/css/index.less b/css/index.less
index 008dc88..818b6a8 100644
--- a/css/index.less
+++ b/css/index.less
@@ -7,6 +7,7 @@ body {
     min-height: 100vh;
     background-color: rgba(246, 246, 246, 1);
     min-width: 1200px;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     * {
         padding: 0;
         margin: 0;
@@ -675,7 +676,6 @@ body {
                             font-size: 20px;
                             color: #000000;
                             margin-bottom: 6px;
-                            display: block;
                             .arrows {
                                 width: 12px;
                                 height: 12px;
diff --git a/img/1.svg b/img/1.svg
new file mode 100644
index 0000000..5f46255
--- /dev/null
+++ b/img/1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="50" viewBox="0 0 1920 50">
+  <rect width="1920" height="50" fill="transparent" />
+  <path d="
+    M0,0 
+    C0,0 420.344,18.463 978.286,18.258 
+    C1495.534,18.068 1920,0 1920,0 
+    C1920,0 1495.534,28.068 978.286,28.258 
+    C420.344,28.463 0,10 0,0 
+  " fill="#76c45e" stroke="#76c45e" stroke-width="1" />
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index a733fe3..0b8263f 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,17 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="referrer" content="no-referrer" />
-        <title>Document</title>
+        <title>5222</title>
         <link rel="stylesheet" href="./css/index.css" />
         <style>
             [v-cloak] {
                 display: none;
             }
+
+            .svg1 {
+                width: 100%;
+                min-width: 1920px;
+            }
         </style>
     </head>
     <body>
@@ -22,6 +27,7 @@
                     <img class="admission-head-2" src="/img/admission-head-gray.svg" />
                 </div>
             </div>
+            <img class="svg1" style="position: relative; margin-top: -22px" src="./img/1.svg" />
             <div class="admission-body">
                 <div class="interview-box flexflex" v-if="theme == 1">
                     <img class="bj" src="./img/interview-bj.svg" />
@@ -288,20 +294,20 @@
                                 <div class="item" v-for="item in moreSchoolList[moreSchoolPitch]">
                                     <div class="name flexacenter">
                                         <div class="icon flexcenter">
-                                            <img class="img" src="./img/course-icon.png" />
+                                            <img class="img" src="../img/course-icon.png" />
                                         </div>
                                         {{ item.title }}
                                     </div>
                                     <div class="bottom flexacenter">
                                         <div class="time flexacenter">
                                             <div class="icon flexcenter">
-                                                <img class="img" src="./img/time-icon.png" />
+                                                <img class="img" src="../img/time-icon.png" />
                                             </div>
                                             {{ item.date || '长期答疑'}}
                                         </div>
                                         <a class="btn flexcenter" :href="item.url" target="_blank">
                                             了解详情
-                                            <img class="arrows" src="./img/arrows-circle-white.svg" />
+                                            <img class="arrows" src="../img/arrows-circle-white.svg" />
                                         </a>
                                     </div>
                                 </div>
@@ -312,7 +318,7 @@
 
                 <div class="paly-box-mask flexcenter" v-if="palyState">
                     <div class="paly-box">
-                        <img class="close" src="./img/cross-white.svg" @click="closePalyState" />
+                        <img class="close" src="../img/cross-white.svg" @click="closePalyState" />
                         <div class="paly-video"></div>
                     </div>
                 </div>
@@ -453,15 +459,21 @@
                     };
 
                     // 切换招生官 院校 的 年份
-                    const cutSchoolYear = (index, year) => (admissionList.value[index]["pitch"] = year);
+                    const cutSchoolYear = (index, year) => {
+                        admissionList.value[index]["pitch"] = year;
+                        admissionList.value[index]["isPitchMore"] = false;
+                    };
 
                     // 点击 招生官 年份 更多弹窗
-                    const openSchoolYearState = (index) => (admissionList.value[index]["state"] = true);
+                    const openSchoolYearState = (index) => {
+                        admissionList.value[index]["state"] = true;
+                    };
 
                     // 选择 招生官 年份 更多弹窗
                     const selectSchoolYearState = (index, year) => {
                         admissionList.value[index]["state"] = false;
                         admissionList.value[index]["pitch"] = year;
+                        admissionList.value[index]["pitch"] = true;
                     };
 
                     // 关闭 招生官 年份 更多弹窗