Skip to content

P
project-www-pc
提交 10a4c759 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: add new '有偿行业动态' section and update Chinese translation for news

上级 bab190cd
隐藏空白字符变更
内嵌 并排
正在显示 包含 377 行增加 和 2 行删除
components/Head.vue
浏览文件 @ 10a4c759
......@@ -113,7 +113,11 @@ export default {
isShow: false,
path: '/about/news'
},
{
name: '有偿行业动态',
isShow: false,
path: '/about/paid'
},
{
name: this.$t('menu.aboutChild.openLesson'),
isShow: false,
......
langs/zh-CN.js
浏览文件 @ 10a4c759
......@@ -16,7 +16,7 @@ export default {
aboutChild: {
about: '紫荆简介',
culture: '文化理念',
news: '新闻中心',
news: '企业动态',
msg: '校长寄语',
openLesson: '公开课',
contact: '联系我们',
......
pages/about/paid.vue 0 → 100644
浏览文件 @ 10a4c759
<template>
<div class="home">
<div class="banner">
<img src="https://webapp-pub.ezijing.com/hr/images/banner.png" />
</div>
<div class="card">
<div class="card-hd">
<div class="card-hd__title"><a class="">Solution选择产品服务</a></div>
</div>
<div class="card-bd"><img src="https://webapp-pub.ezijing.com/hr/images/brand.png" /></div>
</div>
<div class="card">
<div class="card-hd">
<div class="card-hd__title"><a class="">有偿行业动态</a></div>
<div class="card-hd__aside"><a href="javascript:void(0)" class="">查看更多+</a></div>
</div>
<div class="card-bd">
<div class="news-content">
<img src="https://webapp-pub.ezijing.com/hr/images/news.png?v=2" alt="" style="width: 600px" />
<div class="right-content">
<ul>
<span class="app-link" @click="showQrDialog = true"
><a href="javascript:void(0)" class=""
><li>
<div class="time-block">
<div class="m-time">9/26</div>
<div class="t-time">2025</div>
</div>
<div class="content_con">
<div class="text">清华、交大等名校本硕博齐聚，全美第一在线硕士盛大开学！</div>
</div>
</li></a
></span
><span class="app-link" @click="showQrDialog = true"
><a href="javascript:void(0)"
><li>
<div class="time-block">
<div class="m-time">1/14</div>
<div class="t-time">2025</div>
</div>
<div class="content_con">
<div class="text">紫荆·国际人才论坛重磅发布“中国未来领袖计划”</div>
</div>
</li></a
></span
><span class="app-link" @click="showQrDialog = true"
><a href="javascript:void(0)"
><li>
<div class="time-block">
<div class="m-time">11/5</div>
<div class="t-time">2025</div>
</div>
<div class="content_con">
<div class="text">
职引未来——2025年全国城市联合招聘高校毕业生秋季专场推出第四批121场特色服务活动
</div>
</div>
</li></a
></span
>
<span class="app-link" @click="showQrDialog = true"
><a href="javascript:void(0)"
><li>
<div class="time-block">
<div class="m-time">10/14</div>
<div class="t-time">2025</div>
</div>
<div class="content_con">
<div class="text">国际研学全面升级 SHMSMBA日本研学项目再出发</div>
</div>
</li></a
></span
>
<span class="app-link" @click="showQrDialog = true"
><a href="javascript:void(0)"
><li>
<div class="time-block">
<div class="m-time">6/14</div>
<div class="t-time">2025</div>
</div>
<div class="content_con">
<div class="text">关于全面做好紫荆-索菲亚方向工商管理硕士（FMBA） 项目价格调整的工作通知</div>
</div>
</li></a
></span
>
</ul>
</div>
</div>
</div>
</div>
<!-- QR Code Dialog -->
<dialog id="qrDialog" ref="qrDialog" class="qr-dialog" @click="handleDialogClick">
<div class="qr-dialog-content" @click.stop>
<button class="qr-dialog-close" @click="closeQrDialog" aria-label="关闭">&times;</button>
<img src="https://webapp-pub.ezijing.com/hr/images/qrcode.png" alt="二维码" class="qr-image" />
<p class="qr-dialog-text">支付1元查看全文</p>
</div>
</dialog>
</div>
</template>
<script>
export default {
data() {
return {
showQrDialog: false,
}
},
watch: {
showQrDialog(newVal) {
if (newVal) {
this.$nextTick(() => {
this.$refs.qrDialog?.showModal()
})
} else {
this.$refs.qrDialog?.close()
}
},
},
methods: {
closeQrDialog() {
this.showQrDialog = false
},
handleDialogClick(event) {
// 点击 dialog 的 backdrop（背景）时关闭弹框
if (event.target === this.$refs.qrDialog) {
this.closeQrDialog()
}
},
},
}
</script>
<style lang="scss" scoped>
.card {
margin: 80px auto;
max-width: 1200px;
}
.card-hd {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
position: relative;
}
.card-hd__title {
flex: 1;
font-size: 32px;
font-weight: 700;
line-height: 1;
text-align: center;
}
.card-hd__title a:hover {
color: var(--main-color);
}
.card-hd__aside {
color: #9b9b9b;
cursor: pointer;
font-size: 16px;
position: absolute;
right: 0;
}
.news-content {
display: flex;
margin-top: 15px;
}
.news-content .left-content {
background: #fff;
box-shadow: 0 0 29px rgba(0, 0, 0, 0.03);
display: flex;
padding: 40px 25px 40px 38px;
width: 600px;
}
.news-content .left-content .list {
overflow: hidden;
}
.news-content .left-content .list .swiper-container {
height: 100%;
}
.news-content .left-content .list .swiper-slide-active .li {
border-bottom: 1px solid #999;
}
.news-content .left-content .list .li {
align-items: center;
box-sizing: border-box;
display: flex;
padding-bottom: 30px;
padding-left: 12px;
width: 549px;
}
.news-content .left-content .list .li .time-block {
align-items: center;
background: #aa1941;
border-radius: 5px;
display: flex;
flex-direction: column;
height: 70px;
justify-content: center;
width: 70px;
}
.news-content .left-content .list .li .time-block .m-time {
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 0.8;
text-align: center;
}
.news-content .left-content .list .li .time-block .t-time {
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 15px;
opacity: 0.8;
text-align: center;
}
.news-content .left-content .list .li .txt {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
color: #424242;
display: -webkit-box;
font-size: 18px;
font-weight: 400;
margin-left: 33px;
overflow: hidden;
text-overflow: ellipsis;
width: 390px;
}
.news-content .right-content {
margin-left: 45px;
}
.news-content .right-content ul li {
align-items: center;
cursor: pointer;
display: flex;
padding: 9px 0 8px;
}
.news-content .right-content ul li:first-child {
border: none;
}
.news-content .right-content ul li:hover .content_con .desc,
.news-content .right-content ul li:hover .content_con .text {
color: #aa1941;
}
.news-content .right-content ul li:hover .time-block {
background: #aa1941;
}
.news-content .right-content ul li:hover .time-block .m-time,
.news-content .right-content ul li:hover .time-block .t-time {
color: #fff;
opacity: 1;
}
.news-content .right-content ul li .time-block {
align-items: center;
background: hsla(0, 0%, 100%, 0.39);
border-radius: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
height: 70px;
justify-content: center;
width: 70px;
}
.news-content .right-content ul li .time-block .m-time {
color: #777;
font-size: 20px;
font-weight: 400;
opacity: 0.8;
}
.news-content .right-content ul li .time-block .t-time {
color: #777;
font-size: 16px;
font-weight: 400;
line-height: 15px;
opacity: 0.8;
}
.news-content .right-content ul li .content_con {
margin-left: 15px;
width: 459px;
}
.news-content .right-content ul li .content_con .text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #333;
display: -webkit-box;
font-size: 18px;
font-weight: 500;
overflow: hidden;
text-align: left;
}
.news-content .right-content ul li .content_con .desc {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: #666;
display: -webkit-box;
font-size: 13px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-align: left;
}
.banner img {
width: 100%;
min-width: 1200px;
object-fit: cover;
}
/* QR Code Dialog Styles */
.qr-dialog {
border: none;
border-radius: 12px;
padding: 0;
max-width: 90vw;
max-height: 90vh;
background: transparent;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.qr-dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
.qr-dialog-content {
position: relative;
background: #fff;
border-radius: 12px;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.qr-dialog-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 32px;
color: #999;
cursor: pointer;
line-height: 1;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.qr-dialog-close:hover {
color: #aa1941;
}
.qr-image {
width: 200px;
height: 200px;
display: block;
}
.qr-dialog-text {
color: #333;
font-size: 16px;
margin: 0;
text-align: center;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论