feat: 新增宣讲会模块和学校详情弹窗
新增宣讲会模块的HTML结构和样式 添加学校详情弹窗的HTML、CSS和交互逻辑 更新学校列表和回顾部分的样式和交互 新增多个SVG图标资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
96
index.html
96
index.html
@@ -67,7 +67,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter">
|
||||
<div class="preach-box flexflex">
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
<div class="left">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" src="./img/interview-icon.png" />
|
||||
<img class="name" src="./img/interview-name.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter" style="display: none">
|
||||
<div class="case flexcenter">
|
||||
<div class="name">更多访谈</div>
|
||||
<div class="english">More interviews</div>
|
||||
@@ -90,7 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-list">
|
||||
<div class="school-list" style="display: none">
|
||||
<div class="school-item flexflex">
|
||||
<div class="left">
|
||||
<div class="abbreviation flexcenter" :style="{ color: dynamicColor }">CUHK</div>
|
||||
@@ -101,7 +110,10 @@
|
||||
<div class="info flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2" />
|
||||
<div class="">
|
||||
<div class="name">香港中文大学</div>
|
||||
<div class="name">
|
||||
香港中文大学
|
||||
<img class="arrows" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Chinese University of Hong Kong</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,12 +140,16 @@
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<!-- unfold -->
|
||||
<div class="item more">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1370 -1149 )"><path d="M 8.8330078125 0.164930555555556 C 8.9443359375 0.274884259259259 9 0.405092592592591 9 0.555555555555556 C 9 0.706018518518518 8.9443359375 0.836226851851851 8.8330078125 0.946180555555556 L 4.8955078125 4.83506944444444 C 4.7841796875 4.94502314814815 4.65234375 5 4.5 5 C 4.34765625 5 4.2158203125 4.94502314814815 4.1044921875 4.83506944444444 L 0.1669921875 0.946180555555556 C 0.0556640625 0.836226851851851 0 0.706018518518518 0 0.555555555555556 C 0 0.405092592592591 0.0556640625 0.274884259259259 0.1669921875 0.164930555555556 C 0.2783203125 0.0549768518518512 0.41015625 0 0.5625 0 L 8.4375 0 C 8.58984375 0 8.7216796875 0.0549768518518512 8.8330078125 0.164930555555556 Z " fill-rule="nonzero" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" /></g>
|
||||
</svg>
|
||||
<div class="more-mask"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
</div>
|
||||
@@ -193,7 +209,8 @@
|
||||
<div class="retrospect">
|
||||
<img class="more-icon" src="./img/more-name.png" />
|
||||
<div class="list flexflex">
|
||||
<div class="item flexflex" v-for="item in 9">
|
||||
<div class="item flexflex" v-for="item in 6">
|
||||
<img class="bg" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="right">
|
||||
<div class="name">岭南大学</div>
|
||||
@@ -234,6 +251,75 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages flexcenter">
|
||||
<img class="arrows gray" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows rotate180" src="./img/arrows-thin-black.svg" />
|
||||
<div class="item flexcenter" :class="{'pitch': item == 1}" v-for="item in 3">{{ item }}</div>
|
||||
<img class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows" src="./img/arrows-thin-black.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-school-mask flexcenter" style="display: none">
|
||||
<div class="more-school">
|
||||
<img class="close" src="./img/cross.png" />
|
||||
<div class="head flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="info">
|
||||
<div class="name flexacenter">
|
||||
岭南大学
|
||||
<img class="icon" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Hong Kong Polytechnic University</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="year flexacenter">
|
||||
<div class="item pitch">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#3c7de9">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<!-- unfold -->
|
||||
<div class="item more">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1370 -1149 )"><path d="M 8.8330078125 0.164930555555556 C 8.9443359375 0.274884259259259 9 0.405092592592591 9 0.555555555555556 C 9 0.706018518518518 8.9443359375 0.836226851851851 8.8330078125 0.946180555555556 L 4.8955078125 4.83506944444444 C 4.7841796875 4.94502314814815 4.65234375 5 4.5 5 C 4.34765625 5 4.2158203125 4.94502314814815 4.1044921875 4.83506944444444 L 0.1669921875 0.946180555555556 C 0.0556640625 0.836226851851851 0 0.706018518518518 0 0.555555555555556 C 0 0.405092592592591 0.0556640625 0.274884259259259 0.1669921875 0.164930555555556 C 0.2783203125 0.0549768518518512 0.41015625 0 0.5625 0 L 8.4375 0 C 8.58984375 0 8.7216796875 0.0549768518518512 8.8330078125 0.164930555555556 Z " fill-rule="nonzero" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" /></g>
|
||||
</svg>
|
||||
<div class="more-mask"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in 10">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user