From 7effa0f0994bf8def821f925fd98dbd9bb7e7199 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Thu, 21 Nov 2024 17:55:29 +0800
Subject: [PATCH] no message

---
 css/details.css                | 209 ++++++++++++++--
 css/details.less               | 429 +++++++++++++++++++++++----------
 html/details.html              | 181 +++++++++++---
 img/talk-live-icon.png         | Bin 0 -> 5020 bytes
 img/triangle-dark-cyan.svg     |   6 +
 img/triangle-white-lucency.svg |   6 +
 img/word-answer.png            | Bin 0 -> 1861 bytes
 img/word-live.png              | Bin 0 -> 1379 bytes
 img/word-playback.png          | Bin 0 -> 1359 bytes
 9 files changed, 644 insertions(+), 187 deletions(-)
 create mode 100644 img/talk-live-icon.png
 create mode 100644 img/triangle-dark-cyan.svg
 create mode 100644 img/triangle-white-lucency.svg
 create mode 100644 img/word-answer.png
 create mode 100644 img/word-live.png
 create mode 100644 img/word-playback.png

diff --git a/css/details.css b/css/details.css
index 8feec9b..93062a0 100644
--- a/css/details.css
+++ b/css/details.css
@@ -960,20 +960,181 @@
   width: 14px;
   margin-right: 5px;
 }
-.else {
+.right {
   width: 290px;
+  margin-left: 10px;
+}
+.right .live {
+  width: 100%;
+  margin-bottom: 20px;
+  background: linear-gradient(-24.24254087deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%);
+  border-radius: 11px;
+  padding-top: 20px;
+  padding-bottom: 30px;
+}
+.right .live .head {
+  margin-bottom: 17px;
+}
+.right .live .head .icon {
+  width: 89px;
+  height: 28px;
+  margin-right: 8px;
+}
+.right .live .head .text {
+  width: 104px;
+  height: 24px;
+  background-color: #026277;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 13px;
+  position: relative;
+}
+.right .live .head .text .triangle {
+  position: absolute;
+  top: 50%;
+  left: -3px;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 11px;
+}
+.right .live .content-box {
+  position: relative;
+}
+.right .live .content-box .triangle {
+  width: 14px;
+  height: 5px;
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+.right .live .content-box .point {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 28px;
+}
+.right .live .content-box .point .item {
+  width: 10px;
+  height: 4px;
+  background-color: #d7d7d7;
+  border-radius: 20px;
+  cursor: pointer;
+}
+.right .live .content-box .point .item:not(:last-of-type) {
+  margin-right: 4px;
+}
+.right .live .content-box .point .item.pitch {
+  background-color: #fa6b11;
+}
+.right .live .content {
+  height: 340px;
+  background-color: rgba(255, 255, 255, 0.80392157);
+  border-radius: 8px;
+  margin: 0 11px 27px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+.right .live .content .swiper {
+  margin-bottom: 5px;
+  display: flex;
+}
+.right .live .content .swiper .swiper-item {
+  width: 268px;
+  padding-top: 8px;
+}
+.right .live .content .swiper .swiper-item .item {
+  position: relative;
+  padding-bottom: 13px;
+}
+.right .live .content .swiper .swiper-item .item:not(:last-of-type)::after {
+  content: "";
+  position: absolute;
+  width: calc(100% - 50px);
+  height: 1px;
+  right: 0;
+  bottom: 0;
+  border-bottom: 1px dotted #ebebeb;
+}
+.right .live .content .swiper .swiper-item .item .icon-box {
+  padding-left: 9px;
+  padding-right: 13px;
+}
+.right .live .content .swiper .swiper-item .item .icon-box .icon {
+  width: 28px;
+}
+.right .live .content .swiper .swiper-item .item .text {
+  font-size: 14px;
+  color: #000000;
+  line-height: 26px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  padding-top: 8px;
+  padding-right: 8px;
+}
+.right .live .content .swiper .swiper-item .item .text .admissionState {
+  height: 20px;
+  background-color: #b30081;
+  border-radius: 115px;
+  color: #ffffff;
+  font-size: 13px;
+  padding: 0 6px;
+  display: inline-flex;
+  width: fit-content;
+}
+.right .live .content .swiper .swiper-item .item .text .admissionState.state2 {
+  background-color: #bec105;
+}
+.right .live .content .swiper .swiper-item .item .text .admissionState.state3 {
+  background-color: #04b0d5;
+}
+.right .live .word {
+  margin-bottom: 9px;
+}
+.right .live .word .item {
+  width: 34px;
+  height: 22px;
+  padding: 0 5px;
+  box-sizing: content-box;
+}
+.right .live .word .item:not(:last-of-type) {
+  border-right: 1px solid #aaaaaa;
+}
+.right .live .hint {
+  font-size: 13px;
+  color: #333333;
+  line-height: 26px;
+  text-align: center;
+  margin-bottom: 13px;
+}
+.right .live .QR-code {
+  width: 120px;
+  height: 120px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+.right .live .QR-code .icon {
+  width: 103px;
+  height: 103px;
+}
+.right .else {
+  width: 100%;
   background: -webkit-linear-gradient(270.00883066deg, #f7fbf7 0%, #eaf6ea 100%);
   background: -moz-linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%);
   background: linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%);
   border: none;
   border-radius: 12px;
   padding: 20px 10px 0;
-  margin-left: 10px;
 }
-.else .school {
+.right .else .school {
   margin-bottom: 20px;
 }
-.else .school .logo {
+.right .else .school .logo {
   width: 50px;
   height: 50px;
   background-color: #ffffff;
@@ -981,10 +1142,10 @@
   border-radius: 8px;
   margin-right: 10px;
 }
-.else .school .logo .img {
+.right .else .school .logo .img {
   height: 30px;
 }
-.else .school .info .name {
+.right .else .school .info .name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
@@ -992,17 +1153,17 @@
   color: #000000;
   margin-bottom: 5px;
 }
-.else .school .info .name-en {
+.right .else .school .info .name-en {
   font-size: 13px;
   color: #555555;
 }
-.else .case {
+.right .else .case {
   width: 270px;
   background-color: #ffffff;
   border-radius: 8px;
   margin-bottom: 20px;
 }
-.else .case .head {
+.right .else .case .head {
   width: 270px;
   height: 45px;
   border-bottom: 1px dotted #ebebeb;
@@ -1011,7 +1172,7 @@
   border-radius: 8px 8px 0 0;
   overflow: hidden;
 }
-.else .case .head .dot {
+.right .else .case .head .dot {
   width: 14px;
   height: 14px;
   background-color: #e7f7ee;
@@ -1020,7 +1181,7 @@
   position: relative;
   margin-right: 10px;
 }
-.else .case .head .dot::after {
+.right .else .case .head .dot::after {
   content: "";
   width: 6px;
   height: 6px;
@@ -1034,59 +1195,59 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.else .case .head .text {
+.right .else .case .head .text {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
   font-size: 16px;
   color: #000000;
 }
-.else .case .head .img {
+.right .else .case .head .img {
   width: 14px;
   height: 14px;
   transform: rotate(270deg);
 }
-.else .case .list .item {
+.right .else .case .list .item {
   padding: 20px 10px;
   display: block;
 }
-.else .case .list .item:not(:last-of-type) {
+.right .else .case .list .item:not(:last-of-type) {
   border-bottom: 1px solid #f6f6f6;
 }
-.else .case .list .item .name {
+.right .else .case .list .item .name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-size: 15px;
   color: #000000;
   margin-bottom: 8px;
 }
-.else .case .list .item .brief {
+.right .else .case .list .item .brief {
   font-size: 14px;
   color: #7f7f7f;
 }
-.else .case .list .item .brief span {
+.right .else .case .list .item .brief span {
   color: #d7d7d7;
   margin: 0 8px;
 }
-.else .case.mj .list .item {
+.right .else .case.mj .list .item {
   padding-top: 15px;
 }
-.else .case.mj .list .item:not(:last-of-type) {
+.right .else .case.mj .list .item:not(:last-of-type) {
   border-bottom: 1px dotted #ebebeb;
 }
-.else .case.mj .list .name {
+.right .else .case.mj .list .name {
   font-weight: 650;
   font-style: normal;
   font-size: 15px;
   color: #000000;
 }
-.else .case.mj .list .brief-box {
+.right .else .case.mj .list .brief-box {
   padding: 10px 15px 10px 10px;
   width: 251px;
   border-radius: 6px;
   background-color: #f7f7f7;
 }
-.else .case.mj .list .brief {
+.right .else .case.mj .list .brief {
   display: inline-block;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
@@ -1100,7 +1261,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.else .case.mj .list .brief .avatar {
+.right .else .case.mj .list .brief .avatar {
   width: 20px;
   height: 20px;
   margin-right: 5px;
diff --git a/css/details.less b/css/details.less
index 8dfb565..a4379a8 100644
--- a/css/details.less
+++ b/css/details.less
@@ -1104,166 +1104,345 @@
     }
 }
 
-.else {
+.right {
     width: 290px;
-    background: -webkit-linear-gradient(270.008830663227deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
-    background: -moz-linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
-    background: linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
-    border: none;
-    border-radius: 12px;
-    padding: 20px 10px 0;
     margin-left: 10px;
 
-    .school {
+    .live {
+        width: 100%;
         margin-bottom: 20px;
+        background: linear-gradient(-24.2425408707597deg, rgba(214, 220, 240, 1) 0%, rgba(218, 230, 242, 1) 19%, rgba(239, 242, 204, 1) 62%, rgba(239, 249, 241, 1) 100%);
+        border-radius: 11px;
+        padding-top: 20px;
 
-        .logo {
-            width: 50px;
-            height: 50px;
-            background-color: rgba(255, 255, 255, 1);
-            border: 1px solid rgba(246, 246, 246, 1);
-            border-radius: 8px;
-            margin-right: 10px;
-            .img {
-                height: 30px;
+        padding-bottom: 30px;
+        .head {
+            margin-bottom: 17px;
+            .icon {
+                width: 89px;
+                height: 28px;
+                margin-right: 8px;
+            }
+
+            .text {
+                width: 104px;
+                height: 24px;
+                background-color: rgba(2, 98, 119, 1);
+                border-radius: 4px;
+                color: #ffffff;
+                font-size: 13px;
+                position: relative;
+                .triangle {
+                    position: absolute;
+                    top: 50%;
+                    left: -3px;
+                    transform: translateY(-50%);
+                    width: 6px;
+                    height: 11px;
+                }
             }
         }
-        .info {
-            .name {
-                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
-                font-weight: 650;
-                font-style: normal;
-                font-size: 18px;
-                color: #000000;
-                margin-bottom: 5px;
+
+        .content-box {
+            position: relative;
+            .triangle {
+                width: 14px;
+                height: 5px;
+                position: absolute;
+                bottom: -4px;
+                left: 50%;
+                transform: translateX(-50%) rotate(180deg);
             }
 
-            .name-en {
-                font-size: 13px;
-                color: #555555;
+            .point {
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 28px;
+                .item {
+                    &:not(:last-of-type) {
+                        margin-right: 4px;
+                    }
+                    width: 10px;
+                    height: 4px;
+                    background-color: rgba(215, 215, 215, 1);
+                    border-radius: 20px;
+                    cursor: pointer;
+
+                    &.pitch {
+                        background-color: rgba(250, 107, 17, 1);
+                    }
+                }
+            }
+        }
+
+        .content {
+            // width: 268px;
+            height: 340px;
+            background-color: rgba(255, 255, 255, 0.803921568627451);
+            border-radius: 8px;
+            margin: 0 11px 27px;
+            display: flex;
+            overflow: hidden;
+            position: relative;
+            .swiper {
+                margin-bottom: 5px;
+                display: flex;
+                .swiper-item {
+                    width: 268px;
+                    padding-top: 8px;
+                    .item {
+                        position: relative;
+                        padding-bottom: 13px;
+
+                        &:not(:last-of-type)::after {
+                            content: "";
+                            position: absolute;
+                            width: calc(100% - 50px);
+                            height: 1px;
+                            right: 0;
+                            bottom: 0;
+                            border-bottom: 1px dotted rgb(235, 235, 235);
+                        }
+
+                        .icon-box {
+                            padding-left: 9px;
+                            padding-right: 13px;
+                            .icon {
+                                width: 28px;
+                            }
+                        }
+
+                        .text {
+                            .admissionState {
+                                height: 20px;
+                                background-color: rgba(179, 0, 129, 1);
+                                border-radius: 115px;
+                                color: #ffffff;
+                                font-size: 13px;
+                                padding: 0 6px;
+                                display: inline-flex;
+                                width: fit-content;
+
+                                &.state2 {
+                                    background-color: #bec105;
+                                }
+
+                                &.state3 {
+                                    background-color: rgba(4, 176, 213, 1);
+                                }
+                            }
+                            font-size: 14px;
+                            color: #000000;
+                            line-height: 26px;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            -webkit-line-clamp: 2;
+                            padding-top: 8px;
+                            padding-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .word {
+            .item {
+                width: 34px;
+                height: 22px;
+                padding: 0 5px;
+                box-sizing: content-box;
+                &:not(:last-of-type) {
+                    border-right: 1px solid #aaaaaa;
+                }
+            }
+
+            margin-bottom: 9px;
+        }
+
+        .hint {
+            font-size: 13px;
+            color: #333333;
+            line-height: 26px;
+            text-align: center;
+            margin-bottom: 13px;
+        }
+
+        .QR-code {
+            width: 120px;
+            height: 120px;
+            background-color: rgba(255, 255, 255, 1);
+            border-radius: 8px;
+            margin: 0 auto;
+            .icon {
+                width: 103px;
+                height: 103px;
             }
         }
     }
 
-    .case {
-        width: 270px;
-        background-color: #ffffff;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        .head {
-            width: 270px;
-            height: 45px;
-            border-bottom: 1px dotted rgb(235, 235, 235);
-            padding: 0 10px;
-            background: linear-gradient(to right, #d8f1d8, rgba(255, 255, 255, 0.501961));
-            border-radius: 8px 8px 0 0;
-            overflow: hidden;
-            .dot {
-                width: 14px;
-                height: 14px;
-                background-color: rgba(231, 247, 238, 1);
-                border: 1px solid rgba(183, 196, 189, 1);
-                border-radius: 39px;
-                position: relative;
+    .else {
+        width: 100%;
+        background: -webkit-linear-gradient(270.008830663227deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        background: -moz-linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        background: linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        border: none;
+        border-radius: 12px;
+        padding: 20px 10px 0;
+
+        .school {
+            margin-bottom: 20px;
+
+            .logo {
+                width: 50px;
+                height: 50px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(246, 246, 246, 1);
+                border-radius: 8px;
                 margin-right: 10px;
-                &::after {
-                    content: "";
-                    width: 6px;
-                    height: 6px;
-                    display: block;
-                    background-color: rgba(114, 219, 134, 1);
-                    border: 1px solid rgba(87, 168, 105, 1);
-                    border-radius: 39px;
-                    box-sizing: border-box;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
+                .img {
+                    height: 30px;
                 }
             }
-
-            .text {
-                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
-                font-weight: 650;
-                font-style: normal;
-                font-size: 16px;
-                color: #000000;
-            }
-
-            .img {
-                width: 14px;
-                height: 14px;
-                transform: rotate(270deg);
-            }
-        }
-
-        .list {
-            .item {
-                &:not(:last-of-type) {
-                    border-bottom: 1px solid rgb(246, 246, 246);
-                }
-                padding: 20px 10px;
-                display: block;
+            .info {
                 .name {
                     font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                     font-weight: 650;
-                    font-size: 15px;
+                    font-style: normal;
+                    font-size: 18px;
                     color: #000000;
-                    margin-bottom: 8px;
+                    margin-bottom: 5px;
                 }
-                .brief {
-                    font-size: 14px;
-                    color: #7f7f7f;
 
-                    span {
-                        color: #d7d7d7;
-                        margin: 0 8px;
-                    }
+                .name-en {
+                    font-size: 13px;
+                    color: #555555;
                 }
             }
         }
 
-        &.mj {
-            .list {
-                .item {
-                    padding-top: 15px;
-                    &:not(:last-of-type) {
-                        border-bottom: 1px dotted rgb(235, 235, 235);
+        .case {
+            width: 270px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            .head {
+                width: 270px;
+                height: 45px;
+                border-bottom: 1px dotted rgb(235, 235, 235);
+                padding: 0 10px;
+                background: linear-gradient(to right, #d8f1d8, rgba(255, 255, 255, 0.501961));
+                border-radius: 8px 8px 0 0;
+                overflow: hidden;
+                .dot {
+                    width: 14px;
+                    height: 14px;
+                    background-color: rgba(231, 247, 238, 1);
+                    border: 1px solid rgba(183, 196, 189, 1);
+                    border-radius: 39px;
+                    position: relative;
+                    margin-right: 10px;
+                    &::after {
+                        content: "";
+                        width: 6px;
+                        height: 6px;
+                        display: block;
+                        background-color: rgba(114, 219, 134, 1);
+                        border: 1px solid rgba(87, 168, 105, 1);
+                        border-radius: 39px;
+                        box-sizing: border-box;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
                     }
                 }
-                .name {
+
+                .text {
+                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                     font-weight: 650;
                     font-style: normal;
-                    font-size: 15px;
+                    font-size: 16px;
                     color: #000000;
                 }
-                .brief-box {
-                    padding: 10px 15px 10px 10px;
-                    width: 251px;
-                    border-radius: 6px;
-                    background-color: rgba(247, 247, 247, 1);
+
+                .img {
+                    width: 14px;
+                    height: 14px;
+                    transform: rotate(270deg);
                 }
-                .brief {
-                    display: inline-block;
-                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-                    font-weight: 400;
-                    font-style: normal;
-                    color: #555555;
-                    line-height: 20px;
-                    font-size: 13px;
+            }
 
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
+            .list {
+                .item {
+                    &:not(:last-of-type) {
+                        border-bottom: 1px solid rgb(246, 246, 246);
+                    }
+                    padding: 20px 10px;
+                    display: block;
+                    .name {
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-size: 15px;
+                        color: #000000;
+                        margin-bottom: 8px;
+                    }
+                    .brief {
+                        font-size: 14px;
+                        color: #7f7f7f;
 
-                    .avatar {
-                        width: 20px;
-                        height: 20px;
-                        margin-right: 5px;
-                        vertical-align: bottom;
-                        border-radius: 50%;
+                        span {
+                            color: #d7d7d7;
+                            margin: 0 8px;
+                        }
+                    }
+                }
+            }
+
+            &.mj {
+                .list {
+                    .item {
+                        padding-top: 15px;
+                        &:not(:last-of-type) {
+                            border-bottom: 1px dotted rgb(235, 235, 235);
+                        }
+                    }
+                    .name {
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 15px;
+                        color: #000000;
+                    }
+                    .brief-box {
+                        padding: 10px 15px 10px 10px;
+                        width: 251px;
+                        border-radius: 6px;
+                        background-color: rgba(247, 247, 247, 1);
+                    }
+                    .brief {
+                        display: inline-block;
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        color: #555555;
+                        line-height: 20px;
+                        font-size: 13px;
+
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2;
+                        -webkit-box-orient: vertical;
+
+                        .avatar {
+                            width: 20px;
+                            height: 20px;
+                            margin-right: 5px;
+                            vertical-align: bottom;
+                            border-radius: 50%;
+                        }
                     }
                 }
             }
diff --git a/html/details.html b/html/details.html
index 0042d23..59388bf 100644
--- a/html/details.html
+++ b/html/details.html
@@ -483,57 +483,112 @@
                 </div>
             </div>
 
-            <div class="else">
-                <div class="school flexacenter">
-                    <div class="logo flexcenter">
-                        <img class="img" src="http://127.0.0.1:5500/images/%E9%A6%96%E9%A1%B5/u74.png" />
+            <div class="right">
+                <div class="live">
+                    <div class="head flexcenter">
+                        <img class="icon" src="/img/talk-live-icon.png" />
+
+                        <div class="text flexcenter">
+                            <img class="triangle" src="/img/triangle-dark-cyan.svg" />
+                            招生官为你答疑
+                        </div>
                     </div>
-                    <div class="info">
-                        <div class="name">香港大学</div>
-                        <div class="name-en">The University of Hong Kong</div>
+
+                    <div class="content-box">
+                        <div ref="swiperRef" class="content">
+                            <div class="swiper" bindchange="admissionChange">
+                                <div class="swiper-item" :class="'swiper-item' + index" v-for="(item,index) in urls" :key="index">
+                                    <div class="item flexacenter" v-for="(item,index) in item" :key="index">
+                                        <div class="flexcenter icon-box">
+                                            <img class="icon" :src="item.logo" />
+                                        </div>
+                                        <div class="text flex1">
+                                            <div class="admissionState flexcenter" :class="'state' + item.mold">{{ moldObj[item.mold] }}</div>
+                                            {{ item.title }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                        </div>
+
+                        <div class="point flexcenter">
+                            <div class="item " :class="{'pitch': admissionCurrent == index}" v-for="(item,index) in urls" :key="index" @click="cutSwiper(index)">
+                            </div>
+                        </div>
+                        <img class="triangle" src="/img/triangle-white-lucency.svg">
                     </div>
+
+                    <div class="word flexcenter">
+                        <img class="item" src="/img/word-live.png">
+                        <img class="item" src="/img/word-playback.png">
+                        <img class="item" src="/img/word-answer.png">
+                    </div>
+
+                    <div class="hint">请添加申请小助手</div>
+
+                    <div class="QR-code flexcenter">
+                        <img class="icon" src="https://u.gter.net/assistantwxqrcode.png">
+                    </div>
+
+
                 </div>
 
-                <div class="case">
-                    <div class="head flexacenter">
-                        <div class="dot"></div>
-                        <div class="text flex1">Offer</div>
-                        <img class="img" src="/img/arrows-icon.png" />
-                    </div>
-                    <div class="list offer">
-                        <div class="item">
-                            <div class="name">Asian Studies</div>
-                            <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
+                <div class="else">
+                    <div class=""></div>
+                    <div class="school flexacenter">
+                        <div class="logo flexcenter">
+                            <img class="img" src="http://127.0.0.1:5500/images/%E9%A6%96%E9%A1%B5/u74.png" />
                         </div>
-                        <div class="item">
-                            <div class="name">Asian Studies</div>
-                            <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
-                        </div>
-                        <div class="item">
-                            <div class="name">Asian Studies</div>
-                            <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
+                        <div class="info">
+                            <div class="name">香港大学</div>
+                            <div class="name-en">The University of Hong Kong</div>
                         </div>
                     </div>
-                </div>
-                <div class="case mj">
-                    <div class="head flexacenter">
-                        <div class="dot"></div>
-                        <div class="text flex1">面经</div>
-                        <img class="img" src="/img/arrows-icon.png" />
+
+                    <div class="case">
+                        <div class="head flexacenter">
+                            <div class="dot"></div>
+                            <div class="text flex1">Offer</div>
+                            <img class="img" src="/img/arrows-icon.png" />
+                        </div>
+                        <div class="list offer">
+                            <div class="item">
+                                <div class="name">Asian Studies</div>
+                                <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
+                            </div>
+                            <div class="item">
+                                <div class="name">Asian Studies</div>
+                                <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
+                            </div>
+                            <div class="item">
+                                <div class="name">Asian Studies</div>
+                                <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="list offer">
-                        <div class="item">
-                            <div class="name">environmental science</div>
-                            <div class="brief-box">
-                                <div class="brief flexacenter">
-                                    <img class="avatar" src="http://127.0.0.1:5500/images/%E9%A1%B9%E7%9B%AE%E8%AF%A6%E6%83%85/u1144.svg" />
-                                    第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，因为第一轮的时候我还没注意到这个项目，错过了DDL...
+                    <div class="case mj">
+                        <div class="head flexacenter">
+                            <div class="dot"></div>
+                            <div class="text flex1">面经</div>
+                            <img class="img" src="/img/arrows-icon.png" />
+                        </div>
+                        <div class="list offer">
+                            <div class="item">
+                                <div class="name">environmental science</div>
+                                <div class="brief-box">
+                                    <div class="brief flexacenter">
+                                        <img class="avatar" src="http://127.0.0.1:5500/images/%E9%A1%B9%E7%9B%AE%E8%AF%A6%E6%83%85/u1144.svg" />
+                                        第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，因为第一轮的时候我还没注意到这个项目，错过了DDL...
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+
         </div>
 
         <!-- 底部 -->
@@ -878,7 +933,57 @@
                     view: 242,
                 }])
 
-                return {offerList, side, sideKey, info, disciplineObj, rankingsObj, cutStudyMode, studyMode, course, contras, copy, download, stateObj, bindblur, remark, addComparison, cutSide, detailsRef, stateState, cutState, changeType, deletee}
+                const urls = ref([[{
+                    logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2",
+                    mold: 2,
+                    title: "11.27 19:00 | 高达90%就业率！工科生不能错过的香港城大工学院线上宣讲会快来了解！",
+                    url: "https://bbs.gter.net/thread-2619710-1-1.html",
+                }, {
+                    logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLVSBaR7ec6NYmTA5sRfNP5NHJQuwf83NTE2",
+                    mold: 1,
+                    title: "香港大学 香港大学社会科学硕士（社会数据分析）线上公开课暨宣讲会",
+                    url: "https://bbs.gter.net/thread-2619923-1-1.html"
+                }, {
+                    logo: "https://oss.x-php.com/school/J6BSwE6VfCFmDrknc6IXB9eUbGqEscEIOawLEogy25QhNzUxNg~~",
+                    mold: 2,
+                    title: "11.28 19:30 | 毕业起薪高 工作一年学费回本？昆杜研究生项目优点真的太太太太多了！ ",
+                    url: "https://bbs.gter.net/thread-2620009-1-1.html",
+                }, {
+                    logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2",
+                    mold: 3,
+                    title: "招生资讯 | 香港中文大学 政务与政策科学学院授课式硕士课程",
+                    url: "https://bbs.gter.net/thread-2616456-1-1.html",
+                }], [{
+                    logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2",
+                    mold: 3,
+                    title: "长期答疑 | 香港中文大学 经济学理学硕士课程-2025入学现正招生",
+                    url: "https://bbs.gter.net/thread-2617401-1-1.html",
+                }]])
+
+
+
+                const moldObj = ref({
+                    1: "直播",
+                    2: "回放",
+                    3: "答疑"
+                })
+
+                let admissionCurrent = ref(0)
+
+                const swiperRef = ref(null)
+
+                // 写一个 点击切换轮播图
+                const cutSwiper = index => {
+                    admissionCurrent.value = index
+                    const dom = document.querySelector(".swiper-item" + index)
+                    const left = dom.offsetLeft
+                    swiperRef.value.scrollTo({
+                        left,
+                        behavior: "smooth",
+                    })
+                }
+
+                return {swiperRef, cutSwiper, admissionCurrent, moldObj, urls, offerList, side, sideKey, info, disciplineObj, rankingsObj, cutStudyMode, studyMode, course, contras, copy, download, stateObj, bindblur, remark, addComparison, cutSide, detailsRef, stateState, cutState, changeType, deletee}
             },
         })
         subject.component("text-module", textModule)
diff --git a/img/talk-live-icon.png b/img/talk-live-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..310c056fe801316ba0d735fa50515bfac7f59026
GIT binary patch
literal 5020
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
T+;-gmK4WUiT1sCOps@b~dd`Dg

literal 0
HcmV?d00001

diff --git a/img/triangle-dark-cyan.svg b/img/triangle-dark-cyan.svg
new file mode 100644
index 0000000..8717978
--- /dev/null
+++ b/img/triangle-dark-cyan.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="6px" height="11px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -6180 -544 )">
+    <path d="M 5.80208333333333 0.2041015625  C 5.93402777777778 0.340169270833332  6 0.501302083333332  6 0.6875  L 6 10.3125  C 6 10.4986979166667  5.93402777777778 10.6598307291667  5.80208333333333 10.7958984375  C 5.67013888888889 10.9319661458333  5.51388888888889 11  5.33333333333333 11  C 5.15277777777778 11  4.99652777777778 10.9319661458333  4.86458333333333 10.7958984375  L 0.197916666666667 5.9833984375  C 0.0659722222222223 5.84733072916667  0 5.68619791666667  0 5.5  C 0 5.31380208333333  0.0659722222222223 5.15266927083333  0.197916666666667 5.0166015625  L 4.86458333333333 0.2041015625  C 4.99652777777778 0.0680338541666659  5.15277777777778 0  5.33333333333333 0  C 5.51388888888889 0  5.67013888888889 0.0680338541666659  5.80208333333333 0.2041015625  Z " fill-rule="nonzero" fill="#026277" stroke="none" transform="matrix(1 0 0 1 6180 544 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/triangle-white-lucency.svg b/img/triangle-white-lucency.svg
new file mode 100644
index 0000000..e79acb7
--- /dev/null
+++ b/img/triangle-white-lucency.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="16px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -7022 -940 )">
+    <path d="M 7022 948  L 7030 940  L 7038 948  L 7022 948  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.698039215686274" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/word-answer.png b/img/word-answer.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfe6e4d94ecb2af8315cd48182feda379062ac6d
GIT binary patch
literal 1861
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

literal 0
HcmV?d00001

diff --git a/img/word-live.png b/img/word-live.png
new file mode 100644
index 0000000000000000000000000000000000000000..d269cabc2ba69df0e5337110ced999ca5334d66f
GIT binary patch
literal 1379
zcmV-p1)TbcP)<h;3K|Lk000e1NJLTq002k;001rs1^@s6i$Grh00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91NT34%1ONa40RR91E&u=k0ER=v0ssI6%}GQ-RA>e5nMsTlMHt6NB1(p^
z2oo_N5;p{tC0vL%l~F+rs0c>zBq1gqB;i0fC?<vky>SyYQ34^xB_c)-MkCC45DX|_
zWKnSr2u4v*K-m=d{hwVgMNL(|u72;$>q+`c{!>-|Z|SP9t801F)>cZHfieSS2FeVS
z8R)MWxT21Z&%}2vI1A2MI8J>oXq3D_piw~2Ig^xKlv_Z(qVW#~L%}dG68sIm0TsE@
zRC1IGe2d5Lgomq#dKBj=PJowbD?#GtgMr|xq*Q%S0P3@icG~VF*#>tfsED1Qr(sql
ze3s(sfYA{6qXAurz755(kTQiIhwix)eIC^$+sRIlvfg1UbJq1nV&k}PG3%obXEltl
z)8}?Q_*p&!^rs(7GZLh9+-`DG)CB1*E=n-mbk-_0fCWIG<#~&5RJEEQJK$0p7h44F
z9=1%Nk)<zMOnU;h$Kk*8=uX4E0d{(H``{h{w}Oh;YtUAhXaA=&{hf@}l7MAQoWF>n
znUGg*#PMVBfD_;u+V6mW9sW<+PXX<O(;eL=+Co+A1nq_uv|v71wFp<P4XE^n^j2%h
z5e&YrWmH4oj(#xc25y38!zppD=r|yshg=11#gXm;&^WxJ09mGYy*7HgA<6oQ)!T=V
z|6bFvqAt>=f2}I3d8t-f)sw(;wS8{{?+5hXr|1GMQFLlvitvfqqtUwPehM!o2Kzla
z*EUc4N7Dg&kv3dfc`wQXX$BtMdbqnhd?P3=rp=IlOwiZ_>At3IIYw@ZF^;tD#C{;q
zHEA=@oz4~w^duN%k*BC@r*f}1I&jVbIt!(au|Irb+Ze<;ptG1x+S<;2pVEu)I~?67
zv^A@J_Btai09A>dK~={lR)!LL8qmxe4|H*KWd?+xS#UQP3tZ8RcngdGM=WI*^{wD>
zpvhp%FdA=zWnekzcBdI!#p$dn9{CFH7Z0CCX&~2m4Bmyi>}@4BPf~91*!MN1PjN`>
z40;}?p2(hRI{Ok73iC%u(Z_t{lpmWQeZS3?-<$n_jPbY2Za_xkzBDUJg0!6U+XQL1
z`MkzkTZ#TLpxw%rgEZ!W*KN{Mugsv>PfRPnj`=aN7Go{cSw-g-{g*^LjMgLfw<4&v
zSHTLf1}p_W*#-F}I0SC647B)mgE1E8R<#kyuPrt~OYqSEV#MxTR=-&o>O~v|x@t@T
zKG8Nl4m|8pe(2#uO$A2-I??xm;YJ^upibl1<Z?^K`1%aq1HJ@h4AIL>r|3@&Tf{}$
z^sNwO><s#dUjG)^bIrOupP3$`gKUQ?trC+U9mm^~PU!L%k~Js}gp>hZ*8pFFbfvJb
z5n34kvtnFBeK8nqaWU0<FxFzMT}$hfk)2euX)FZm4H+s;f?mPEckFllK68mW+V|sI
z*(s73TA0m2^a<)4f$u7mnAa?nl!?HM(Ku)U7N05cuCoc!iqgI~?x6!|$+?iBgKq|G
zZifFhpzB2!b&=jnPt)#X$9j#VNkmZ-bdm9Xkuv6AQ*;eg6*WN`WLIFMx~qi_fdQBN
zv{{2bAjD7k!!*S62PaCm)7J4qza*{(_D`bndkr)~&J!edmu|#!bH&i??gV!L?L4KF
l87MPQW}wVKnSskQa0wy(dIf28wl4qx002ovPDHLkV1nixV>$o;

literal 0
HcmV?d00001

diff --git a/img/word-playback.png b/img/word-playback.png
new file mode 100644
index 0000000000000000000000000000000000000000..2be0ae2eebcab3fec3d757cd9d00312b58739b5d
GIT binary patch
literal 1359
zcmV-V1+e;wP)<h;3K|Lk000e1NJLTq002k;001rs1^@s6i$Grh00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91NT34%1ONa40RR91E&u=k0ER=v0ssI6xk*GpRA>e5S!sw)Q5c?)UDiyN
z2}#I0Sw>1ymMGaWBwK_b{)wW=5B#HKDcO^~q%2u}kR*vBSwgn4jD1NN*#^(UIiL3)
z=iKk!@B7SmNB6DAdEe)}=X~#d=ALuUy>fD5ixr3!h!uzxh!v=+3glL?!jGWd29}z)
zg4<!?NzDKj1J8h`qP++I0N`uYMQ;)O-Xg9{cMX1w7m&>Ik<i1E^bnj&ph4(sryz%3
zK#)`*Ie>qKA6Y_yEX2p(<EW1p>oSUGyRMb40g{(@kmR%NH$njoEk(StaHQG-ZA9NU
z_+>yVptazodrAf_KdJ&PK*1%hqAh$LxKe}XcG2G8WH=we97!1dBE+|%Dv(iYN?|>W
z8s#%`h)*B8R`8!{{O3P4E>S;$0$uk1EYNr;P$!TIK1o5A*a?gu>oZ5tu3<<F^;iu$
zu_JG?gAYXq5vT$)egv8UBSX#pJNY{r9wEw87@PGWK?Kr8PK2{c2O-+8$fZDGj0eZv
zY5-f?;gH-Hm18y=K=e0B#AU!K#dktmsC?PHKyVbeO)`u?%&#otc}JglD6q}0gXDR~
zG@hFKnxu*kp`EAvS!itn9R^>law02`u8(a^83>=}6rPYx8w#R^NvgO&@Lh#3-HS4a
z>K!C&bY1LnnH13Pg**z*rP<9f#v@Qwc+9)*AjkFj(zVgs52yv$Ud;J0x&b6C-8<+G
zX5uZajenv2I>=C)Nr6}r_Z|vWpMhbQ5LZYpU4giPJ`fYO5PqiIx|y0t&BHUD>j3Fl
zUd*owON?*!VQrVs0N#<K9sOrbKI#JT?y+ssZ^3T|xFl@04kVY#L0hMTdk&uGACING
z#5!ZPt767XFNY>#Zt3z2G#%ilRPKAGac>+090y8)d?1-^LBe0>s&ob7kGdY0$qEY6
zFF%6G{MRbr)5vCgj2}@Q8__PaB?*qNLz_jMaHGD&IwUIfIxkh|Cy*Yo7S1~zIND?2
zAKCh%E)d_BZ1zNvHi39I@ad}UJ)C6kklS>!*+yNUfo8!f=7)G1&oicdHV9s0cY`xS
z?q}BR#!8x_ReTNYCP$wi?Kyb)B^rHsh<h5G4zDQ3_E0bdT94dudZ42n0e&|y5%AO-
zMxc`zOjMRl!4KtHeykkaO~u=mpcaUC&T3$`%1zdcM*^4TG$8Rb3nEZQ3`ph05W_qc
z=4nS^=6Xi|33w-W0VV-`{?G}J0yPHq0z(sQFo$#I14Y0abI4W@{CtoN$j=b0iv^}r
z$K5o?-^ci0pF^U!NwcP<KswgWXE2w~E`Wakm$gO5d7w!Y1saaRIy)-A4St`aF9^*I
zcrw8Ktr+kVi3d%-(j+V@ORNDZIs@32*h27A9euWZ$x$2%BW)%Eo||MI{l@_JF^@$>
zAQr{X5k~=8_y@#I0silb?V@xp^R%zqkKiT%HZw)y+=Fe2TR?JsRyO$5;gixdzQuDn
z>5G)7;md;8{cL%bX%5^G{k$7`0e&V$TH}`(wLb2V8-Y(iOHo`2e4d3)13Q5wzyLs7
z8#ol^9Kbs+h*6~LfbDc1WPDb03RC!XF2_uNu1%qgcu1^3tU#<ltiV50;3otJmfToB
RHbejb002ovPDHLkV1gV8PE!B?

literal 0
HcmV?d00001