提交 701aab24 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 4935b31e
No preview for this file type
import httpRequest from '@/utils/httpRequest'
// 获取广告列表
export function getAdvertisementList(params) {
return httpRequest.get('/api/cms/api/v1/advertisements', { params })
}
// 获取新闻列表
export function getNewsList(params) {
return httpRequest.get(`/api/zws/v1/cms/news`, { params })
......
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 100px;
}
ul,
li,
a {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: currentColor;
}
a:hover {
color: var(--main-color);
}
body {
font-size: 14px;
......@@ -36,6 +22,8 @@ body {
padding: 0;
margin: 0;
background: #f9f8f8;
color: #333;
min-width: 1300px;
}
p {
margin: 0;
......@@ -49,10 +37,6 @@ img {
vertical-align: middle;
}
a {
color: currentColor;
}
:root {
--main-color: #aa1941;
}
.w1200 {
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
}
// .banner {
......@@ -13,9 +13,9 @@
.banner {
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-wrapper {
width: 100%;
......
......@@ -24,7 +24,7 @@ defineProps({
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
margin-bottom: 60px;
}
.card-hd__title {
flex: 1;
......
<script setup></script>
<template>
<div class="app-contact">
<h4>联系我们</h4>
<p>
联系人:张老师<br />
联系电话:13810886558(微信同号)
</p>
</div>
</template>
<style lang="scss">
.app-contact {
background: url(https://webapp-pub.ezijing.com/www/pc/next/contact_bg.png) no-repeat;
height: 200px;
padding: 50px 0 0 68px;
h4 {
font-size: 30px;
line-height: 1;
margin-bottom: 30px;
}
p {
font-size: 18px;
line-height: 30px;
}
}
</style>
<script setup>
const { locale } = useI18n()
const items = [
{
name: '院校客户',
items: [
{
name: 'AI教学基础层',
href: '',
},
{
name: 'AI专业建设中心',
href: '',
},
{
name: '解决方案中心',
href: '',
},
{
name: '职业技能中心',
href: '',
},
{
name: '学习服务中心',
href: '',
},
],
},
{
name: '个人客户',
items: [
{
name: '国际留学',
href: '/studyAbroad',
},
{
name: '国际学位',
href: '/internationalDegree',
},
{
name: '职业技能',
href: 'https://eec.ezijing.com',
},
{
name: '就业服务',
href: '',
},
],
},
{
name: '政企客户',
items: [
{
name: '教育部',
href: '',
},
{
name: '人社部',
href: '',
},
{
name: '工信部',
href: '',
},
{
name: '中华全国供销合作总社',
href: '',
},
{
name: '国家新闻出版署',
href: '',
},
{
name: '广播电视总局',
href: '',
},
],
},
{
name: '申请试用',
},
]
</script>
<template>
<div class="foot-main">
<div class="foot-box">
<div class="foot-content">
<div class="left-content">
<div class="link">
<a href="http://jsj.moe.gov.cn" target="_blank">
{{ $t('foot.link1') }}
</a>
</div>
<!-- <div>
<a href="http://www.pbcsf.tsinghua.edu.cn" target="_blank"> {{ $t('foot.link2') }} </a>
</div> -->
<!-- <div>
合作大学官网
</div> -->
<div :class="locale.value === 'en-US' ? 'center-content f-size' : 'center-content'">
<div class="address" v-html="$t('foot.address')"></div>
<div class="phone" v-html="$t('foot.contact')"></div>
<div class="mail" v-html="$t('foot.email', { email: 'service@ezijing.com' })"></div>
</div>
<div class="app-footer">
<div class="app-footer-main">
<div class="app-footer-inner">
<div class="app-footer-left">
<dl v-for="item in items" :key="item.name">
<dt>{{ item.name }}</dt>
<dd>
<ul>
<li v-for="subItem in item.items" :key="subItem.name">
<a :href="subItem.href" target="_blank">{{ subItem.name }}</a>
</li>
</ul>
</dd>
</dl>
</div>
<div class="right-content">
<img src="https://webapp-pub.ezijing.com/project/marywood/ezijing-code.jpg" class="code" />
<div class="tips-txt">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" />
<div class="txt">{{ $t('foot.weChat') }}</div>
<div class="app-footer-right">
<h4>联系我们</h4>
<div class="address">
<dl>
<dt><span class="label">地址</span><span class="colon"></span></dt>
<dd>北京市海淀区北四环西路52号方正国际大厦5层501</dd>
</dl>
<dl>
<dt><span class="label">联系电话</span><span class="colon"></span></dt>
<dd><a href="tel:010-62793909">010-62793909</a></dd>
</dl>
<dl>
<dt><span class="label">邮箱</span><span class="colon"></span></dt>
<dd><a href="mailto:service@ezijing.com">service@ezijing.com</a></dd>
</dl>
</div>
</div>
<div class="right-content">
<img src="https://webapp-pub.ezijing.com/project/marywood/ezijing_xet_x.png" class="code" />
<div class="tips-txt">
<img src="https://webapp-pub.ezijing.com/www/pc/icon_gongkaike.png" />
<div class="txt">{{ $t('foot.ezjClass') }}</div>
<div class="qrcode">
<dl>
<dt><img src="https://webapp-pub.ezijing.com/project/marywood/ezijing-code.jpg" /></dt>
<dd>APP</dd>
</dl>
<dl>
<dt><img src="https://webapp-pub.ezijing.com/project/marywood/ezijing-code.jpg" /></dt>
<dd>微信公众号</dd>
</dl>
<dl>
<dt><img src="https://webapp-pub.ezijing.com/project/marywood/ezijing_xet_x.png" /></dt>
<dd>微信视频号</dd>
</dl>
</div>
</div>
</div>
<div class="links" v-html="$t('foot.relation')"></div>
</div>
<div class="copyright">
<div class="inner">
<p>
{{
locale.value === 'en-US'
? `Copyright © 2017 Zijing Education. All rights reserved.`
: `Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆(北京)教育科技股份有限公司`
? `Copyright © 2026 Zijing Education. All rights reserved.`
: `Copyright © 2026 Zijing Education. All rights reserved. 清控紫荆(北京)教育科技股份有限公司`
}}
</p>
<a
......@@ -84,96 +180,94 @@
</div>
</div>
</template>
<script setup>
const { locale } = useI18n()
</script>
<style lang="scss">
.foot-main {
width: 100%;
min-width: 1200px;
background: rgba(170, 25, 65, 1);
.links {
padding-top: 12px;
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #ffffff;
opacity: 0.6;
width: 1200px;
margin: 0 auto;
.app-footer-main {
background: var(--main-color);
}
.app-footer-inner {
max-width: 1300px;
margin: 0 auto;
color: #fff;
padding: 80px 0;
display: flex;
a:hover {
color: #fff;
}
.foot-box {
padding: 80px 0 35px;
width: 1200px;
margin: 0 auto;
}
.app-footer-left {
display: flex;
flex: 1;
dl {
flex: 1;
}
.foot-content {
// height: 300px;
display: flex;
.left-content {
flex: 1;
.link {
opacity: 0.7;
font-size: 18px;
font-weight: 300;
// line-height: 30px;
color: #ffffff;
text-decoration: underline;
letter-spacing: 3px;
}
}
.center-content {
margin-top: 30px;
font-size: 18px;
dt {
font-size: 22px;
line-height: 1;
margin-bottom: 28px;
}
dd {
font-size: 18px;
line-height: 32px;
}
}
.app-footer-right {
h4 {
font-size: 22px;
line-height: 1;
margin-bottom: 28px;
}
.address {
dl {
display: flex;
font-size: 16px;
line-height: 32px;
color: #ffffff;
letter-spacing: 4px;
opacity: 0.7;
&.f-size {
font-size: 16px;
}
dt {
display: flex;
.label {
width: 70px;
text-align-last: justify;
}
}
.right-content {
margin-left: 30px;
.code {
}
.qrcode {
margin-top: 35px;
display: flex;
gap: 30px;
dt {
img {
width: 120px;
display: block;
}
.tips-txt {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 21px;
display: block;
}
.txt {
font-size: 14px;
color: #ffffff;
margin-left: 7px;
}
height: 120px;
}
}
dd {
margin-top: 8px;
line-height: 1;
text-align: center;
color: #fff;
}
}
}
.copyright {
height: 40px;
color: rgba(153, 153, 153, 1) !important;
color: rgb(47, 33, 33) !important;
background: #fff;
display: flex;
align-items: center;
.inner {
width: 100%;
justify-content: center;
display: flex;
align-items: center;
}
.record {
display: flex;
}
p {
font-size: 12px;
}
......
......@@ -54,7 +54,7 @@ export default {
<style lang="scss">
.is-pc {
.app-main {
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
padding: 60px 0;
}
......
差异被折叠。
......@@ -38,7 +38,7 @@ onMounted(async () => {
<style lang="scss">
.is-pc {
.article-detail {
width: 1200px;
width: 1300px;
margin: 30px auto;
}
.article-back {
......
......@@ -89,7 +89,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">{{ isEn ? 'Register now' : '立即报名' }}</el-button>
<el-button type="primary" @click="handleSubmit">{{ isEn ? 'Register now' : '立即报名' }}</el-button>
</el-form-item>
</el-form>
</div>
......@@ -203,7 +203,7 @@ const handleSubmit = () => {
font-weight: 400;
line-height: 1.5;
color: #010101;
width: 1200px;
width: 1300px;
text-align: center;
}
.desc {
......@@ -240,12 +240,13 @@ const handleSubmit = () => {
height: 48px;
border-radius: 0;
}
.el-input__inner,.el-select__wrapper {
.el-input__inner,
.el-select__wrapper {
height: 48px;
border-radius: 0;
}
.desc2 {
width: 1200px;
width: 1300px;
padding: 40px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
......
......@@ -72,7 +72,7 @@ onMounted(async () => {
<style lang="scss" scoped>
.is-pc {
.news-card {
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
padding: 60px 0;
.content-box {
......
<template>
<div class="home-banner">
<div class="home-banner" v-if="data?.length > 0">
<Swiper ref="mySwiper" v-bind="swiperOption">
<SwiperSlide v-for="(item, index) in listData" :key="index">
<SwiperSlide v-for="(item, index) in data" :key="index">
<template v-if="item.uri">
<a :href="item.uri" target="_black">
<img :src="item.web_img_uri" />
......@@ -19,7 +19,7 @@
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper/modules'
import httpRequest from '@/utils/httpRequest'
import { getAdvertisementList } from '@/api'
const config = useRuntimeConfig()
......@@ -38,18 +38,20 @@ const swiperOption = {
}
// 使用 useAsyncData 进行服务端渲染
const { data: listData } = await useAsyncData('banner-ads', async () => {
const { data } = await useAsyncData('banner-ads', async () => {
const params = { project_id: config.public.projectId, type_tag: 'ad_banner' }
const res = await httpRequest.get('/api/cms/api/v1/advertisements', { params })
return res.data.data || []
const res = await getAdvertisementList(params)
return [{ web_img_uri: '/images/banner.jpg' }, ...res.data.data] || []
})
</script>
<style lang="scss">
.home-banner {
position: relative;
.swiper-wrapper {
height: 580px;
height: 650px;
.swiper-slide {
img {
width: 100%;
......@@ -58,6 +60,7 @@ const { data: listData } = await useAsyncData('banner-ads', async () => {
}
}
}
.prev-button {
position: absolute;
top: 50%;
......@@ -69,6 +72,7 @@ const { data: listData } = await useAsyncData('banner-ads', async () => {
z-index: 999;
cursor: pointer;
}
.next-button {
position: absolute;
top: 50%;
......
<script setup>
import EnterpriseIcons from './enterpriseIcons.vue'
const rows = [
[
{
name: '教育部',
icon: 1,
desc: `2025:院校技术支持获得世界职业技能大赛新一代信息技术赛项金奖
2024:院校技术支持单位获得世界职业技能大赛智慧金融赛项金奖第一名
2021:教育部产学合作协同育人项目单位
2021:教育部供需对接就业育人项目单位
2020:《1+X金融产品数字化营销》职业技能评价单位`,
},
{
name: '清华大学出版社',
icon: 2,
desc: `根植清华大学,1980 年成立,秉持清华校训,主打学术专著、精品教材与前沿科技读物,聚焦人工智能、智能制造等国家重点领域,兼顾教育教学与专业出版,是综合性、多层次的知名大学出版社,数字化转型与国际合作成果显著。`,
},
{
name: '中国中小企业协会',
icon: 3,
desc: `清控紫荆教育成为中国中小企业协会副会长单位。
中国中小企业协会数字经济人才专业委员会成立!`,
},
],
[
{
name: '全国科学技术名词审定委员会',
icon: 4,
desc: `2022年,清控紫荆教育与全国科学技术名词审定委员会双方就数字经济方向设立科研课题、数字经济领域学术成果发表、数字经济人才培养、国际论坛交流活动等方面进行深入探讨和交流,并举行战略合作签约仪式。`,
},
{
name: '中国标准出版社',
icon: 5,
desc: `国家权威标准类专业出版社,核心出版国家标准、行业标准、地方标准及标准配套读物,同步推出标准培训教材、计量与质量相关专著,精准服务标准化工作推进,是国内标准出版领域的核心阵地,助力各行各业规范发展。`,
},
{
name: '中国电子商会',
icon: 6,
desc: `授予清控紫荆教育元宇宙专委会副理事长单位牌匾,并在此设立中国电子商会元宇宙专委会教培秘书处。双方将整合行业资源与教育优势,携手为数字经济教育革新注入国家级平台力量,推动AIGC产教融合迈向新高度。`,
},
],
[
{
name: '工信部',
icon: 7,
desc: `2025:工信部职业技能提升行动-人工智能通识应用评价组织
2024:工信部职业技能提升行动-智能数据分析与实战应用评价组织
2024: 工信部职业技能提升行动-智能数字营销与实战应用)评价组织`,
},
{
name: '中国经济出版社',
icon: 8,
desc: `经济学领域权威出版机构,深耕经济理论、国企改革、经济管理等核心板块,紧扣国家经济发展战略,打造国企改革出版特色品牌,推出众多贴合政策导向与行业需求的精品力作,获评经济学领域最具学术影响力出版社,兼具专业性与实用性。`,
},
{
name: '华为',
icon: 9,
desc: `携手华为、新疆轻工职业技术学院共建ICT产业学院!
携手华为、新疆交通职业技术学院共建ICT产业学院!`,
},
],
[
{
name: '供销合作总社',
icon: 10,
desc: `2025:“数智营销”纳入工种考试系统“商务数据分析 纳入工种考试系统共同开发人社部“商务数据分析师”“营销员”数字教材
2024:提供新职业职业技能在线课程(商务数据分析师、营销员/营销师`,
},
{
name: '中国金融出版社',
icon: 11,
desc: `1956年成立,直属中国人民银行,国内优质的金融专业出版社,主营金融理论、实务操作、金融教材及法律法规类读物,出版《中国金融》等核心期刊,覆盖金融全领域内容,兼具权威政策解读与大众金融知识普及功能,是金融从业者与学习者的核心读物来源。`,
},
{
name: '百融云创',
icon: 12,
desc: `清控紫荆教育携手百融云创,整合教育资源与产业技术,共探数字化人才高效培养新范式。`,
},
],
[
{
name: '国家新闻出版署',
icon: 13,
desc: `2024:副组长单位参与全国新闻出版标准技术委员会《数字教材平台接口》、《高等教育和职业教育数字出版产品质量要求》数字教材两项行业标准制定`,
},
{
name: '中国科学技术出版社',
icon: 17,
desc: `1956年成立,直属中国科协(暨科学普及出版社),中央级科技出版单位,核心出版科普读物、科技专著、专业工具书及科教教材,覆盖基础科学、工程技术等多领域,同步发力数字融合出版与科普期刊运营,是国内科普出版规模最大、品类最全的权威阵地,助力全民科学素养提升。`,
},
{
name: '电科北斗',
icon: 15,
desc: `清控紫荆教育与电科北斗签订人才战略合作框架协议,双方将共同探索数字化企业中所需人才,通过定制化培养、招聘服务、实习实训基地共建、引产入校等方式,打造数字人才培训与服务体系。`,
},
],
[
{
name: '国家广播电视总局',
icon: 16,
desc: `2025:2025-2028人社部“网络主播”行业职业二类国赛广电技术支持单位人社部“网络主播”工种考试系统
2024:首届网络视听行业职业技能大赛技术支持单位
第二届网络视听行业职业技能大赛技术支持单位`,
},
{
name: '西安交通大学出版社',
icon: 14,
desc: `西安交通大学出版社是1983年成立、1998年合并重组的教育部直属综合性大学出版社,依托西安交大优势学科主攻多领域高教教材与学术专著出版,曾获“国家一级出版社”等多项殊荣,深耕融合出版并与国际优质机构合作实现版权全球输出。`,
},
{
name: '国开在线',
icon: 18,
desc: `清控紫荆教育携手国开在线合作斯蒂文斯理工学院工程管理硕士项目、雪城大学计算机科学、计算机工程、电电气工程、帕克大学工商管理硕士、信息系统与商业数据分析等热门硕士项目。`,
},
],
]
</script>
<template>
<div class="home-enterprise" id="enterprise">
<div class="home-enterprise-inner">
<div class="home-enterprise-title">
<h2>政企客户</h2>
</div>
<div class="home-enterprise-main">
<div class="home-enterprise-col" v-for="(item, index) in rows" :key="index">
<div class="home-enterprise-box" v-for="(item, index) in item" :key="index">
<div class="home-enterprise-box-inner">
<div class="home-enterprise-box-inner-header">
<div class="home-enterprise-box-icon">
<EnterpriseIcons :name="item.icon" />
</div>
<p class="home-enterprise-box-name">{{ item.name }}</p>
</div>
<div class="home-enterprise-box-desc" v-html="item.desc"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.home-enterprise {
scroll-margin-top: 170px;
background: #f0f2f5;
padding-bottom: 90px;
.home-enterprise-inner {
max-width: 1300px;
margin: 0 auto;
.home-enterprise-title {
h2 {
padding: 90px 0 60px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
line-height: 1;
text-align: center;
}
}
}
.home-enterprise-main {
display: flex;
gap: 6px;
}
.home-enterprise-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.3s;
&:hover {
flex: 2;
}
}
.home-enterprise-box {
position: relative;
flex: 1;
min-height: 210px;
&:hover {
z-index: 10;
.home-enterprise-box-inner {
padding: 60px 30px 0;
color: #fff;
background-color: var(--main-color);
height: calc(200% + 10px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 40px;
}
.home-enterprise-box-inner-header {
flex-direction: row;
gap: 14px;
}
.home-enterprise-box-name {
font-size: 20px;
white-space: nowrap;
}
.home-enterprise-box-icon {
--main-color: #fff;
svg {
width: 30px;
height: 30px;
}
}
.home-enterprise-box-desc {
display: block;
}
}
&:last-child {
.home-enterprise-box-inner {
bottom: 0;
}
}
}
.home-enterprise-box-inner {
transition: all 0.3s;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background-color: #fff;
border-radius: 12px;
}
.home-enterprise-box-inner-header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.home-enterprise-box-name {
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 1;
text-align: center;
}
.home-enterprise-box-desc {
display: none;
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 20px;
white-space: pre-wrap;
}
}
</style>
差异被折叠。
<script setup>
const rows1 = [
`中国电子商会
元宇宙专业委员会
副理事长单位`,
`河北省电子商务
产教融合共同体
副理事长单位`,
`企业信用平价
AAA级
信用企业`,
`全国数智商业
产教融合共同体
副理事长单位`,
`ISO 9001
质量管理体系
认证企业`,
]
const rows2 = [
'国家高新技术企业',
`质量服务
诚信单位`,
`2025-2026
诚信供应商`,
`中国中小企业协会
副会长单位`,
`ISO 27001
信息安全管理体系
认证企业`,
`诚信经营
示范单位`,
]
</script>
<template>
<div class="home-honor">
<div class="home-honor-inner">
<div class="home-honor-bg"></div>
<div class="home-honor-title">
<h2>获得荣誉</h2>
</div>
<div class="home-honor-main">
<ul>
<li v-for="item in rows1" :key="item">{{ item }}</li>
</ul>
<ul>
<li v-for="item in rows2" :key="item">{{ item }}</li>
</ul>
</div>
</div>
</div>
</template>
<style lang="scss">
.home-honor {
background: linear-gradient(161deg, #aa1941 50%, #a24979 100%);
.home-honor-bg {
position: absolute;
bottom: 0;
right: -310px;
width: 100%;
height: 100%;
background: url(~/assets/images/home/honor_cup.png) no-repeat right bottom;
}
.home-honor-inner {
position: relative;
max-width: 1300px;
height: 580px;
margin: 0 auto;
.home-honor-title {
position: relative;
z-index: 1;
h2 {
padding: 90px 0 42px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
line-height: 1;
color: #fff;
text-align: center;
}
}
}
.home-honor-main {
position: relative;
z-index: 1;
ul {
display: flex;
}
ul:first-child {
padding: 0 40px;
justify-content: space-evenly;
}
ul:last-child {
justify-content: space-between;
}
li {
position: relative;
width: 174px;
height: 200px;
font-size: 18px;
line-height: 24px;
background: url(~/assets/images/home/honor_bg.png) no-repeat center center;
color: #fff;
text-align: center;
white-space: pre-wrap;
padding-top: 62px;
&::before {
content: '';
display: block;
width: 59px;
height: 17px;
background: url(~/assets/images/home/honor_star.png) no-repeat center center;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
&:hover {
background: url(~/assets/images/home/honor_bg_hover.png) no-repeat center center;
}
}
}
}
</style>
<script setup>
import MenuIcons from './menuIcons.vue'
const menuGroups = [
{
label: '项目合作',
items: [
{
name: '人工智能应用<br/>实践通识课',
iconName: 'ai',
path: '/digital/yx_1',
},
{
name: '新商科综合实践<br/>教学平台',
iconName: 'business',
path: '/digital/yx_2',
},
{
name: '新工科综合实践<br/>教学平台',
iconName: 'engineering',
path: '/digital/yx_3',
},
{
name: '数智经济<br/>产教融合基地',
iconName: 'economy',
path: '/digital/zf_1',
},
{
name: '数字教材',
iconName: 'textbook',
path: '/digital/sz',
},
{
name: '技能大赛',
iconName: 'competition',
path: '/digital/ds',
},
],
},
{
label: '报考我们',
items: [
{
name: '国际留学项目',
iconName: 'study_abroad',
path: '/studyAbroad',
},
{
name: '国际学位项目',
iconName: 'degree',
path: '/internationalDegree',
},
{
name: '职业证书',
iconName: 'certificate',
path: '/',
},
{
name: '就业服务',
iconName: 'career',
path: '/',
},
{
name: '更多',
iconName: 'more',
path: '/',
},
],
},
]
</script>
<template>
<div class="app-menu">
<div class="menu-inner">
<div v-for="group in menuGroups" :key="group.label" class="menu-row">
<div class="menu-label">
<span>{{ group.label }}</span>
<span class="arrow"></span>
</div>
<div class="menu-items">
<div class="menu-item" v-for="item in group.items" :key="item.name">
<NuxtLink :to="item.path" target="_blank" class="menu-item-link">
<div class="menu-icon">
<MenuIcons :name="item.iconName" />
</div>
<span class="menu-name" v-html="item.name"></span>
</NuxtLink>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.app-menu {
position: relative;
max-width: 1300px;
margin: -100px auto 0;
background: #fff;
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
border-radius: 12px;
z-index: 100;
}
.menu-inner {
max-width: 1300px;
margin: 0 auto;
}
.menu-row {
display: flex;
align-items: center;
padding: 0 20px;
}
.menu-row + .menu-row {
border-top: 1px solid var(--main-color);
}
.menu-label {
padding: 0 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 18px;
font-weight: bold;
}
.menu-label .arrow {
font-size: 10px;
color: var(--main-color);
}
.menu-items {
display: flex;
align-items: stretch;
justify-content: space-between;
flex: 1;
}
.menu-item {
position: relative;
}
.menu-item-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 24px;
border-radius: 12px;
text-decoration: none;
color: var(--main-color);
transition: transform 0.3s;
position: relative;
width: 180px;
height: 120px;
}
.menu-item:hover {
.menu-item-link {
background: var(--main-color);
color: #fff;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
}
.menu-icon {
color: #fff;
}
&::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 7px;
background: #aa1941;
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
border-radius: 12px;
}
}
.menu-row:first-child {
.menu-item:hover {
.menu-item-link {
transform: translateY(-20px);
}
&::after {
bottom: -4px;
}
}
}
.menu-row:last-child {
.menu-item:hover {
.menu-item-link {
transform: translateY(20px);
}
&::after {
top: -4px;
}
}
}
.menu-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: #6c6c6c;
}
.menu-name {
font-size: 16px;
line-height: 20px;
text-align: center;
font-weight: bold;
}
</style>
差异被折叠。
<script setup>
import { ref, computed } from 'vue'
const activeTab = ref(0)
const tabs = [
{ name: '国内合作院校', key: 'domestic' },
{ name: '国际合作院校', key: 'international' },
]
// 国内合作院校数据
const domesticList = [
[
{ name: '山东农业大学', icon: '/images/partner/partner_domestic_1.png' },
{ name: '克拉玛依职业技术学院', icon: '/images/partner/partner_domestic_1-2.png' },
],
[
{ name: '襄阳职业技术学院', icon: '/images/partner/partner_domestic_2.png' },
{ name: '长春金融高等专科学校', icon: '/images/partner/partner_domestic_2-2.png' },
],
[
{ name: '北京理工大学', icon: '/images/partner/partner_domestic_3.png' },
{ name: '北京科技职业大学', icon: '/images/partner/partner_domestic_3-2.png' },
],
[
{ name: '武汉科技大学', icon: '/images/partner/partner_domestic_4.png' },
{ name: '北京财贸职业学院', icon: '/images/partner/partner_domestic_4-2.png' },
],
[
{ name: '长春大学', icon: '/images/partner/partner_domestic_5.png' },
{ name: '广西金融职业技术学院', icon: '/images/partner/partner_domestic_5-2.png' },
],
[
{ name: '吉林师范大学', icon: '/images/partner/partner_domestic_6.png' },
{ name: '西安理工大学', icon: '/images/partner/partner_domestic_6-2.png' },
],
[
{ name: '山东管理学院', icon: '/images/partner/partner_domestic_7.png' },
{ name: '河南财经政法大学', icon: '/images/partner/partner_domestic_7-2.png' },
],
[
{ name: '新疆交通职业技术学院', icon: '/images/partner/partner_domestic_8.png' },
{ name: '山东理工大学', icon: '/images/partner/partner_domestic_8-2.png' },
],
]
// 国际合作院校数据
const internationalList = [
[
{ name: '美国斯蒂文斯理工学院', icon: '/images/partner/partner_internationality_1.png' },
{ name: '加州多米尼克大学', icon: '/images/partner/partner_internationality_1-2.png' },
],
[
{ name: '美国玛丽伍德大学', icon: '/images/partner/partner_internationality_2.png' },
{ name: '纽约州立大学石溪分校', icon: '/images/partner/partner_internationality_2-2.png' },
],
[
{ name: '美国威斯康星协和大学', icon: '/images/partner/partner_internationality_3.png' },
{ name: '美国帕克大学', icon: '/images/partner/partner_internationality_3-2.png' },
],
[
{ name: '美国康博斯威尔大学', icon: '/images/partner/partner_internationality_4.png' },
{ name: '美国雪城大学', icon: '/images/partner/partner_internationality_4-2.png' },
],
[
{ name: '瑞士酒店管理大学', icon: '/images/partner/partner_internationality_5.png' },
{ name: '美国德保罗大学', icon: '/images/partner/partner_internationality_5-2.png' },
],
]
const handleTabChange = (index) => {
activeTab.value = index
}
const currentList = computed(() => {
return activeTab.value === 0 ? domesticList : internationalList
})
</script>
<template>
<div class="home-partner">
<div class="home-partner-inner">
<div class="home-partner-title">
<h2>合作院校</h2>
</div>
<div class="tab">
<ul>
<li
v-for="(tab, index) in tabs"
:key="tab.key"
:class="{ active: activeTab === index }"
@click="handleTabChange(index)">
{{ tab.name }}
</li>
</ul>
</div>
</div>
<div class="scroll-container">
<div class="scroll-track" :key="activeTab">
<!-- 第一组 -->
<div
v-for="(column, index) in currentList"
:key="'a-' + index"
class="partner-column"
:class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
<div v-for="(item, idx) in column" :key="idx" class="partner-item">
<div class="partner-logo">
<img :src="item.icon" :alt="item.name" />
</div>
<div class="partner-name">{{ item.name }}</div>
</div>
</div>
<!-- 第二组(用于无缝衔接) -->
<div
v-for="(column, index) in currentList"
:key="'b-' + index"
class="partner-column"
:class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
<div v-for="(item, idx) in column" :key="idx" class="partner-item">
<div class="partner-logo">
<img :src="item.icon" :alt="item.name" />
</div>
<div class="partner-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.home-partner {
background: #fff;
padding-bottom: 80px;
.home-partner-inner {
max-width: 1300px;
margin: 0 auto;
.home-partner-title {
h2 {
padding: 90px 0 60px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
line-height: 1;
text-align: center;
}
}
}
.tab {
margin-bottom: -3px;
ul {
display: flex;
gap: 40px;
li {
position: relative;
font-size: 16px;
color: #333;
cursor: pointer;
padding-bottom: 10px;
transition: color 0.3s;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 5px;
background: var(--main-color);
transition: width 0.3s;
}
&:hover {
color: var(--main-color);
}
&.active {
color: var(--main-color);
&::after {
width: 30px;
}
}
}
}
}
.scroll-container {
border-top: 1px solid #d5d5d5;
overflow: hidden;
}
.scroll-track {
display: flex;
gap: 24px;
animation: scroll 15s linear infinite;
width: fit-content;
&:hover {
animation-play-state: paused;
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.partner-column {
display: flex;
flex-direction: column;
gap: 42px;
padding-top: 50px;
flex-shrink: 0;
}
.partner-item {
.partner-logo {
width: 300px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #ffffff;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
}
.partner-name {
margin-top: 20px;
font-size: 14px;
line-height: 1;
text-align: center;
}
}
.partner-column-odd {
.partner-item:first-child {
.partner-logo {
background: #ffffff;
}
}
.partner-item:last-child {
.partner-logo {
background: var(--main-color);
}
}
}
.partner-column-even {
.partner-item:first-child {
.partner-logo {
background: var(--main-color);
}
}
.partner-item:last-child {
.partner-logo {
background: #ffffff;
}
}
}
}
</style>
差异被折叠。
<script setup>
import SchoolIcons from './schoolIcons.vue'
const rows = [
{
name: '学习<br/>服务',
items: [{ btns: [{ name: 'AI学习助手' }] }],
},
{
name: '职业<br/>技能',
items: [
{
icon: 1,
items: [
{ name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
{ name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
{ name: '数智营销师', href: 'https://eec.ezijing.com' },
],
watermark: '工信部',
},
{
icon: 2,
items: [
{ name: '商务数据分析师', href: '/about/news/420311578702516225' },
{ name: '营销员', href: '/about/news/496389699913539584' },
{ name: '无人机驾驶员', href: '' },
],
watermark: '人社部',
},
{
icon: 3,
items: [{ name: '1+X金融产品数字化营销', href: 'https://x.ezijing.com' }],
watermark: '教育',
},
{
icon: 4,
items: [
{ name: '1+私人财富风险管理顾问', href: 'https://prp.ezijing.com' },
{ name: '“未来管理者”MBA课程', href: 'https://cfflp.ezijing.com' },
],
watermark: '协会',
},
],
},
{
name: '解决<br/>方案',
items: [
{
icon: 5,
items: [
{ name: 'AI+专业改造', href: '/digital/yx_3' },
{ name: '新双高建设', href: '' },
{ name: '应用型本科', href: '' },
],
},
{
icon: 6,
items: [{ name: '产教融合实训基地', href: '/digital/zf_1' }],
},
{
icon: 7,
items: [
{ name: '国赛', href: '/digital/ds' },
{ name: '省赛', href: '/digital/ds' },
{ name: '行业赛', href: '/digital/ds' },
],
},
{
icon: 8,
items: [{ name: '国际合作', href: '' }],
},
],
},
{
name: 'AI专业<br/>建设',
items: [
{
icon: 9,
title: '新工科',
desc: [
{ name: '大数据实验室', href: '/digital/yx_1_3' },
{ name: '网络安全实验室', href: '/digital/yx_1_4' },
{ name: '人工智能开发实验室', href: '/digital/yx_1_5' },
{ name: '物联网实验室', href: '/digital/yx_1_6' },
{ name: '信息安全实验室', href: '/digital/yx_1_7' },
],
className: 'home-school-box-new-engineering',
},
{
icon: 10,
title: '新商科',
desc: [
{ name: 'AIGC智能营销实验室', href: '/digital/ds' },
{ name: 'AIGC金融工程智能创新实验室', href: '/digital/ds' },
{ name: 'AIGC融媒体实验室', href: '/digital/ds' },
{ name: 'AIGC网络主播实验室', href: '/digital/ds' },
],
},
{
icon: 11,
title: '低空经济',
desc: [
{ name: '低空技术', href: '/digital/ds' },
{ name: '低空文旅', href: '/digital/ds' },
{ name: '低空物流', href: '/digital/ds' },
{ name: '…', href: '/digital/ds' },
],
},
],
},
{
name: 'AI教学<br/>基础层',
items: [
{
className: 'home-school-box-ai',
btns: [
{ name: '人工智能基础:数据分析通识课', href: 'https://eec.ezijing.com/product' },
{ name: '人工智能应用通识课', href: 'https://eec.ezijing.com/AI' },
{ name: '数字教材', href: '/digital/sz' },
{ name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
{ name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
],
},
],
},
]
</script>
<template>
<div class="home-school" id="school">
<div class="home-school-inner">
<div class="home-school-title">
<h2>院校客户</h2>
</div>
<div class="home-school-main">
<div class="home-school-row" v-for="(item, index) in rows" :key="index">
<div class="home-school-col">
<div class="home-school-box">
<div class="home-school-box-label" v-html="item.name"></div>
</div>
</div>
<div class="home-school-col">
<div
class="home-school-box"
:class="{ 'home-school-box-icon': !!box.icon, [box.className]: true }"
v-for="(box, index) in item.items"
:key="index">
<div class="home-school-box-watermark" v-if="box.watermark">
<span>{{ box.watermark }}</span>
</div>
<ul class="home-school-box-btns" v-if="box.btns">
<li v-for="btn in box.btns" :key="btn.name">
<a :href="btn.href" target="_blank">{{ btn.name }}</a>
</li>
</ul>
<template v-if="box.icon">
<SchoolIcons :name="box.icon" />
<ul class="home-school-box-list" v-if="box.items">
<li v-for="item in box.items" :key="item.name">
<a :href="item.href" target="_blank">{{ item.name }}</a>
</li>
</ul>
<div>
<div class="home-school-box-title" v-if="box.title">
{{ box.title }}
</div>
<ul class="home-school-box-desc" v-if="box.desc">
<li v-for="desc in box.desc" :key="desc.name">
<a :href="desc.href" target="_blank">{{ desc.name }}</a>
</li>
</ul>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.home-school {
scroll-margin-top: 170px;
background: #fff;
.home-school-inner {
max-width: 1300px;
margin: 0 auto;
.home-school-title {
h2 {
padding: 90px 0 60px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
line-height: 1;
text-align: center;
}
}
.home-school-main {
display: flex;
flex-direction: column;
gap: 20px;
}
.home-school-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
}
.home-school-row:nth-child(odd) {
.home-school-col:nth-child(odd) {
.home-school-box {
background-color: #bec3ce;
}
}
.home-school-col:nth-child(even) {
.home-school-box {
padding: 18px;
background-color: #dee2ea;
}
}
}
.home-school-row:nth-child(even) {
.home-school-col:nth-child(odd) {
.home-school-box {
background-color: #dbd0d1;
}
}
.home-school-col:nth-child(even) {
.home-school-box {
padding: 18px;
background-color: #efecea;
}
}
}
.home-school-col {
display: flex;
gap: 12px;
}
.home-school-box {
position: relative;
flex: 1;
border-radius: 12px;
height: 100%;
transition: all 0.3s;
&:hover {
transform: translateY(-10px);
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
}
}
.home-school-box-label {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 18px;
line-height: 24px;
text-align: center;
}
}
.home-school-box-btns {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
li {
min-width: 220px;
background-color: #fff;
border-radius: 22px;
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 32px;
text-align: center;
a {
display: block;
}
}
}
.home-school-box-list {
position: relative;
z-index: 10;
margin: 10px 0;
li {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
line-height: 32px;
white-space: nowrap;
&:hover {
color: var(--main-color);
}
}
}
.home-school-box-icon {
display: flex;
gap: 10px;
}
.home-school-box-watermark {
position: absolute;
right: 0;
bottom: 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 51px;
color: #dbd4d0;
line-height: 1;
opacity: 0.2;
}
.home-school-box-ai {
padding: 38px 155px !important;
background-image: url('~/assets/images/icon/icon_ai.png');
background-position: right center;
background-repeat: no-repeat;
.home-school-box-btns {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px 115px;
& li:nth-child(1),
& li:nth-child(2) {
grid-column: span 3;
}
& li:nth-child(n + 3) {
grid-column: span 2;
}
}
}
.home-school-box-title {
margin: 10px 0;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
line-height: 32px;
white-space: nowrap;
&:hover {
color: var(--main-color);
}
}
.home-school-box-desc {
li {
font-size: 14px;
color: #333333;
line-height: 24px;
white-space: nowrap;
}
}
.home-school-box-new-engineering {
.home-school-box-desc {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px;
}
}
}
</style>
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论