Skip to content

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

chore: update

上级 4935b31e
显示空白字符变更
内嵌 并排
正在显示 包含 4467 行增加 和 1421 行删除
.DS_Store
浏览文件 @ 701aab24
No preview for this file type
app/api/index.js
浏览文件 @ 701aab24
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 })
......
app/assets/css/base.css
浏览文件 @ 701aab24
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;
}
app/assets/css/studyAbroad.scss
浏览文件 @ 701aab24
.w1200 {
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
}
// .banner {
......
app/components/AppCard.vue
浏览文件 @ 701aab24
......@@ -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;
......
app/components/AppContact.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/AppFooter.vue
浏览文件 @ 701aab24
<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>
<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">
<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="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 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;
}
.foot-box {
padding: 80px 0 35px;
width: 1200px;
.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-content {
// height: 300px;
}
.app-footer-left {
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;
dl {
flex: 1;
}
dt {
font-size: 22px;
line-height: 1;
margin-bottom: 28px;
}
.center-content {
margin-top: 30px;
dd {
font-size: 18px;
line-height: 32px;
color: #ffffff;
letter-spacing: 4px;
opacity: 0.7;
&.f-size {
}
}
.app-footer-right {
h4 {
font-size: 22px;
line-height: 1;
margin-bottom: 28px;
}
.address {
dl {
display: flex;
font-size: 16px;
line-height: 32px;
}
dt {
display: flex;
.label {
width: 70px;
text-align-last: justify;
}
.right-content {
margin-left: 30px;
.code {
width: 120px;
display: block;
}
.tips-txt {
padding-top: 20px;
}
.qrcode {
margin-top: 35px;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
dt {
img {
width: 21px;
display: block;
}
.txt {
font-size: 14px;
color: #ffffff;
margin-left: 7px;
width: 120px;
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;
}
......
app/components/AppFrame.vue
浏览文件 @ 701aab24
......@@ -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;
}
......
app/components/AppHeader.vue
浏览文件 @ 701aab24
<template>
<div class="head-main">
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<div class="logo-box">
<nuxt-link to="/">
<img
:src="
isEn
? 'https://webapp-pub.ezijing.com/www/pc/logo/en-logo.png'
: 'https://webapp-pub.ezijing.com/www/pc/logo/us-logo.png'
" />
</nuxt-link>
</div>
<div class="language">
<span @click="switchLocale('zh')" :class="!isEn ? 'cn' : ''">中文</span>/<span
:class="isEn ? 'cn' : ''"
@click="switchLocale('en')"
>EN</span
>
</div>
</div>
</div>
<div class="head-nav-content max-width-content">
<ul :class="{ 'nav-item-box': true, isEn }" @mouseleave="navLeave">
<template v-for="(item, index) in navData" :key="index">
<li>
<div :class="getNameActive(item)">
<AppLink :to="item.path">{{ item.name }}</AppLink>
</div>
<div class="child-item" v-if="item.children">
<div class="one-level">
<template v-for="(level2Item, level2Index) in item.children" :key="level2Index + 'level2'">
<div
:class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')">
<div
@click="goPage(level2Item.path, level2Item.pathType)"
class="name"
:class="isEn ? 'name1' : ''"
v-html="level2Item.name"></div>
<ClientOnly>
<el-icon v-if="level2Item.children" class="arrow-icon">
<ArrowRight />
</el-icon>
</ClientOnly>
</div>
</template>
</div>
<template v-for="(level2Item, level2Index) in item.children" :key="level2Index + 'two-level2'">
<div
class="two-level"
v-if="level2Item.isShow"
@mouseenter="level3Show"
@mouseleave="level3Show(level2Item, 'out')">
<div
@click="goPage(level3Item.path, level3Item.pathType)"
:class="isEn ? 'name1' : 'name'"
v-for="(level3Item, level3Index) in level2Item.children"
:key="level3Index + level3Item">
{{ level3Item.name }}
</div>
</div>
</template>
</div>
</li>
</template>
</ul>
</div>
</div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
const { t, locale, setLocale } = useI18n()
const route = useRoute()
const router = useRouter()
const time = ref(null)
import { Search } from '@element-plus/icons-vue'
import IconPhone from './icons/IconPhone.vue'
const { locale, setLocale } = useI18n()
const runtimeConfig = useRuntimeConfig()
const isEn = computed(() => locale.value === 'en')
const navData = ref([
{
name: t('menu.about'),
path: '/about/introduce',
children: [
{
name: t('menu.aboutChild.about'),
isShow: false,
path: '/about/introduce',
},
{
name: t('menu.aboutChild.culture'),
isShow: false,
path: '/about/culture',
},
{
name: t('menu.aboutChild.news'),
isShow: false,
path: '/about/news',
},
{
name: '有偿行业动态',
isShow: false,
path: '/about/paid',
const navList = [
{
name: '院校客户',
path: '/#school',
isFull: true,
items: [
{ name: '学习服务', items: [{ name: 'AI学习助手', href: '' }] },
{
name: '职业技能',
groupItems: [
{
name: '工信部',
items: [
{ name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
{ name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
{ name: '数智营销师', href: 'https://eec.ezijing.com' },
],
},
{
name: t('menu.aboutChild.openLesson'),
isShow: false,
path: '/about/lesson',
name: '教育部',
items: [{ name: '1+X金融产品数字化营销', href: 'https://x.ezijing.com' }],
},
{
name: t('menu.aboutChild.contact'),
isShow: false,
path: '/about/contact',
},
name: '人社部',
items: [
{ name: '商务数据分析师', href: '/about/news/420311578702516225' },
{ name: '营销员', href: '/about/news/496389699913539584' },
{ name: '无人机驾驶员', href: '' },
],
},
{
name: '产教融合',
path: '/digital/yx_1',
children: [
{
name: '院&nbsp;校',
isShow: false,
children: [
{
name: '数字技能实训平台',
path: '/digital/yx_1',
name: '协会',
items: [
{ name: '私人财富风险管理顾问', href: 'https://prp.ezijing.com' },
{ name: '“未来管理者”MBA课程', href: 'https://cfflp.ezijing.com' },
],
},
{
name: '数字经济实验室',
// path: '/digital/yx_2'
],
},
{
name: '专业数字化改造提升',
path: '/digital/yx_3',
name: '解决方案',
items: [
{ name: 'AI+专业改造', href: '/digital/yx_3' },
{ name: '新双高建设', href: '' },
{ name: '应用型本科', href: '' },
{ name: '产教融合实训基地', href: '/digital/zf_1' },
{ name: '国赛/省赛/行业赛', href: '/digital/ds' },
{ name: '国际合作', href: '' },
],
},
{
name: '数字经济新商科产业学院',
path: '/digital/yx_2',
},
name: 'AI专业建设',
items: [
{
name: '未来技术产业学院',
path: '/digital/yx_5',
name: '新工科',
items: [
{ 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' },
],
},
{
name: '1+X金融产品数字化营销',
path: 'https://x.ezijing.com',
pathType: 1,
},
name: '新商科',
items: [
{ name: 'AIGC智能营销实验室', href: '/digital/ds' },
{ name: 'AIGC金融工程智能创新实验室', href: '/digital/ds' },
{ name: 'AIGC融媒体实验室', href: '/digital/ds' },
{ name: 'AIGC网络主播实验室', href: '/digital/ds' },
],
},
{
name: '政&nbsp;府',
isShow: false,
children: [
{
name: '数字技能公共实训基地',
path: '/digital/zf_1',
},
name: '低空经济',
items: [
{ name: '低空技术', href: '/digital/ds' },
{ name: '低空文旅', href: '/digital/ds' },
{ name: '低空物流', href: '/digital/ds' },
],
},
{
name: '数字教材',
path: '/digital/sz',
],
},
{
name: '职业技能大赛',
path: '/digital/ds',
name: 'AI教学基础层',
items: [
{ name: '人工智能基础:数据分析通识课', href: '/digital/yx_1_3' },
{ name: '人工智能应用通识课', href: '/digital/yx_1_4' },
{ name: '数字教材', href: '/digital/sz' },
{ name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
{ name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
],
},
],
},
{
name: t('menu.degree'),
path: '/internationalDegree',
children: [
name: '个人客户',
path: '/#personal',
isFull: true,
items: [
{
name: t('menu.degreeChild.master'),
isShow: false,
children: [
{
name: t('menu.degreeChild.masterChild.med'),
path: 'https://cu.ezijing.com',
pathType: 1,
},
name: '国际留学',
href: '/studyAbroad',
groupItems: [
{
name: t('menu.degreeChild.masterChild.jmed'),
path: ' https://cuw.ezijing.com/index',
pathType: 1,
},
name: '雪城大学',
href: 'https://syracuse-plus.ezijing.com/',
items: [
{ name: '计算机工程硕士', href: 'https://syracuse-plus.ezijing.com/' },
{ name: '计算机科学硕士', href: 'https://syracuse-plus.ezijing.com/' },
{ name: '电气工程硕士', href: 'https://syracuse-plus.ezijing.com/' },
],
},
{
name: 'EMBA',
isShow: false,
children: [
{
name: '领航数字时代EMBA',
path: 'http://marywood.ezijing.com/',
pathType: 1,
},
],
name: '斯蒂文斯理工学院',
href: 'https://sit-plus.ezijing.com/',
items: [{ name: '工程管理硕士', href: 'https://sit-plus.ezijing.com/' }],
},
{
name: t('menu.degreeChild.mba'),
isShow: false,
children: [
{
name: t('menu.degreeChild.mbaChild.mba'),
path: 'http://marywood.ezijing.com/',
pathType: 1,
name: '纽约州立大学石溪分校',
href: 'https://sbu-plus.ezijing.com/',
items: [{ name: '金融学硕士', href: 'https://sbu-plus.ezijing.com/' }],
},
{
name: t('menu.degreeChild.mbaChild.internatidnal'),
path: 'https://shms.ezijing.com',
pathType: 1,
},
name: '帕克大学',
href: 'https://park-plus.ezijing.com/',
items: [
{ name: '工商管理硕士', href: 'https://park-plus.ezijing.com/' },
{ name: '信息系统与商业数据分析硕士', href: 'https://park-plus.ezijing.com/' },
],
},
{
name: 'DBA',
isShow: false,
children: [
{
name: '科创方向DBA',
path: 'https://ppai.ezijing.com/',
pathType: 1,
name: '德保罗大学',
href: 'https://depaul-plus.ezijing.com/',
items: [{ name: '金融学硕士', href: 'https://depaul-plus.ezijing.com/' }],
},
],
},
],
},
{
name: t('menu.abroad'),
path: '/studyAbroad',
children: [
{
name: t('menu.degreeChild.master'),
isShow: false,
children: [
{
name: '雪城大学硕士保研项目',
path: 'https://syracuse-plus.ezijing.com/',
pathType: 1,
},
name: '国际学位',
href: '/internationalDegree',
groupItems: [
{
name: t('menu.degreeChild.masterChild.sit'),
path: 'https://sit-plus.ezijing.com/',
pathType: 1,
name: '硕士',
items: [
{ name: '教育学硕士(儿童)MED', href: 'https://cu.ezijing.com/' },
{ name: '教育学硕士(家庭)MED', href: 'https://cuw.ezijing.com/' },
],
},
{
name: t('menu.degreeChild.masterChild.sbu'),
path: 'https://sbu-plus.ezijing.com/',
pathType: 1,
name: 'EMBA',
items: [{ name: '玛丽伍德大学数字时代领航人才EMBA', href: 'https://marywood.ezijing.com/' }],
},
{
name: '北京理工大学1+1硕士留学-德保罗大学金融学硕士项目',
path: 'https://depaul-plus.ezijing.com/',
pathType: 1,
},
name: 'MBA',
items: [
{ name: '玛丽伍德大学综合管理方向MBA', href: 'https://marywood.ezijing.com/' },
{ name: '瑞士酒店管理大学MBA', href: 'https://shms.ezijing.com/' },
],
},
{ name: 'DBA', items: [{ name: '科创企业家学者项目DBA', href: 'https://ppai.ezijing.com/' }] },
],
},
{
name: '职业认证',
children: [
{
name: '1+X金融产品数字化营销',
path: 'https://x.ezijing.com',
pathType: 1,
},
{
name: '工信部职业技能证书',
path: 'https://eec.ezijing.com',
pathType: 1,
name: '职业技能',
href: 'https://eec.ezijing.com',
items: [
{ name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
{ name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
{ name: '智能数据营销与实战应用', href: 'https://eec.ezijing.com' },
{ name: '私人财富风险管理课程', href: 'https://prp.ezijing.com' },
],
},
{
name: '私人财富风险管理(PRP)课程',
path: 'https://prp.ezijing.com',
pathType: 1,
name: '就业服务',
href: '',
items: [
{ name: '1V1定制化', href: '' },
{ name: '全程辅导', href: '' },
{ name: '内推面试', href: '' },
{ name: '内推入职', href: '' },
],
},
{
name: '金融保险（FI）系列课程',
path: 'https://paa.ezijing.com',
pathType: 1,
],
},
{
name: '中/高端酒店总经理培养项目',
path: 'https://wdgm.ezijing.com',
pathType: 1,
},
name: '政企客户',
path: '/#enterprise',
isFull: true,
isBrand: true,
items: [
{ name: '教育部' },
{ name: '全国科学技术名词审定委员会' },
{ name: '工信部' },
{ name: '供销合作总社' },
{ name: '国家新闻出版署' },
{ name: '国家广播电视总局' },
{ name: '清华大学出版社' },
{ name: '中国标准出版社' },
{ name: '中国经济出版社' },
{ name: '中国金融出版社' },
{ name: '中国科学技术出版社' },
{ name: '西安交通大学出版社' },
{ name: '中国中小企业协会' },
{ name: '中国电子商会' },
{ name: '华为' },
{ name: '百融云创' },
{ name: '电科北斗' },
{ name: '国开在线' },
],
},
{
name: t('menu.story'),
path: '/alumnus/story',
isShow: false,
name: '关于紫荆',
path: '/about',
items: [
{ name: '紫荆简介', href: '/about' },
{ name: '文化理念', href: '/about/culture' },
{ name: '企业动态', href: '/about/news' },
{ name: '校友故事', href: '/alumnus/story' },
{ name: '公开课', href: '/about/lesson' },
{ name: '联系我们', href: '/about/contact' },
],
},
])
const switchLocale = async (newLocale) => {
await setLocale(newLocale)
if (import.meta.client) window.location.reload()
}
const goPage = (path, goType) => {
if (parseInt(goType) === 3) {
// 暂未开通
console.log('暂未开通，敬请期待')
} else {
if (path) {
if (goType === 1) {
window.open(path)
} else if (goType === 2) {
window.location.href = path
} else {
router.push({ path: path })
}
}
}
{ name: '下载APP' },
]
const searchKeyword = ref('')
const toggleLocale = () => {
// setLocale(locale.value === 'zh' ? 'en' : 'zh')
}
const levelShow = (item, isOut) => {
if (item.children) {
if (isOut) {
clearTimeout(time.value)
time.value = setTimeout(() => {
item.isShow = false
}, 500)
return
}
navLeave()
item.isShow = true
} else {
navLeave()
}
const handleLogin = () => {
window.open(
runtimeConfig.public.loginURL + '/login/index?redirect_uri=' + encodeURIComponent(location.href),
'_blank'
)
}
const level3Show = (item, isOut) => {
if (isOut) {
item.isShow = false
} else {
clearTimeout(time.value)
}
const handleRegister = () => {
window.open(runtimeConfig.public.loginURL + '/register?redirect_uri=' + encodeURIComponent(location.href), '_blank')
}
const navLeave = () => {
navData.value.forEach((item) => {
if (item.children) {
item.children.forEach((cItem) => {
cItem.isShow = false
})
}
})
}
const getNameActive = (item) => {
const currentPath = route.path
if (currentPath.includes(item.path)) {
return 'name active'
} else {
let className = 'name'
if (item.children) {
item.children.forEach((cData) => {
if (cData.path === currentPath) {
className = 'name active'
}
})
}
return className
const handleSearch = () => {
if (searchKeyword.value.trim()) {
console.log('搜索:', searchKeyword.value)
}
}
</script>
<template>
<header class="app-header">
<!-- 顶部栏 -->
<div class="top-bar">
<div class="top-bar-inner">
<div class="logo-section">
<NuxtLink to="/" class="logo">
<img src="https://webapp-pub.ezijing.com/website/base/logo_white.svg" alt="清控紫荆教育" class="logo-img" />
</NuxtLink>
<span class="slogan">让每个人都有改变的能力</span>
</div>
<div class="user-section">
<a href="javascript:;" class="login-btn" @click="handleLogin">登录/学习空间</a>
<a href="javascript:;" class="register-btn" @click="handleRegister">注册</a>
<span class="lang-switch" @click="toggleLocale">
{{ locale === 'zh' ? '中文' : 'EN' }} / {{ locale === 'zh' ? 'EN' : '中文' }}
</span>
</div>
</div>
</div>
<!-- 导航栏 -->
<nav class="app-nav">
<div class="nav-inner">
<ul class="nav-list">
<li
v-for="item in navList"
:key="item.name"
:class="{ 'nav-item': true, 'is-position-relative': !item.isFull }">
<NuxtLink :to="item.path" class="nav-link">{{ item.name }}</NuxtLink>
<template v-if="item.items">
<div class="nav-item-full-box" v-if="item.isFull">
<div class="nav-item-full-box-inner">
<h3 class="nav-item-full-box-title">{{ item.name }}</h3>
<div class="nav-item-full-box-content">
<ul class="enterprise-list" v-if="item.isBrand">
<li class="enterprise-list-item" v-for="subitem in item.items" :key="subitem.name">
<NuxtLink :to="subitem.href" target="_blank">{{ subitem.name }}</NuxtLink>
</li>
</ul>
<dl class="nav-item-full-box-content-item" v-for="subitem in item.items" :key="subitem.name" v-else>
<dt class="nav-item-full-box-content-item-title">
<NuxtLink :to="subitem.href" target="_blank">{{ subitem.name }}</NuxtLink>
</dt>
<dd class="nav-item-full-box-content-item-content">
<ul v-if="subitem.items">
<li v-for="item in subitem.items" :key="item.name">
<NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
</li>
</ul>
<div class="group" v-if="subitem.groupItems">
<dl
class="nav-item-full-box-content-item-group"
v-for="groupItem in subitem.groupItems"
:key="groupItem.name">
<dt>
<NuxtLink :to="groupItem.href" target="_blank">{{ groupItem.name }}</NuxtLink>
</dt>
<dd>
<ul>
<li v-for="item in groupItem.items" :key="item.name">
<NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
</li>
</ul>
</dd>
</dl>
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="nav-item-box" v-else>
<ul>
<li v-for="subitem in item.items" :key="subitem.name">
<NuxtLink :to="subitem.href">{{ subitem.name }}</NuxtLink>
</li>
</ul>
</div>
</template>
</li>
</ul>
<div class="nav-right">
<div class="phone">
<IconPhone class="phone-icon" />
<span>010-62793909</span>
</div>
<div class="search-box">
<input
v-model="searchKeyword"
type="text"
placeholder="搜索"
class="search-input"
@keyup.enter="handleSearch" />
<button class="search-btn" @click="handleSearch">
<el-icon>
<Search />
</el-icon>
</button>
</div>
</div>
</div>
</nav>
<div class="school-box">
<!-- <div class="title">院校客户</div> -->
</div>
<div class="personal-box"></div>
<div class="enterprise-box"></div>
</header>
</template>
<style lang="scss">
.head-main {
background: #fff;
.color-bar {
height: 10px;
background: #aa1941;
}
.head-top-content {
border-bottom: 1px solid #ebebeb;
padding: 22px 0;
.max-width-content {
.app-header {
position: sticky;
top: 0;
z-index: 1000;
}
/* 顶部栏 */
.top-bar {
background-color: var(--main-color);
height: 70px;
}
.top-bar-inner {
max-width: 1300px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
img {
height: 50px;
cursor: pointer;
display: block;
}
.logo-box {
flex: 1;
}
.user {
margin-left: auto;
font-size: 14px;
em {
font-size: 14px;
font-style: normal;
padding: 0 14px;
}
.logout {
cursor: pointer;
}
}
.login-btn-box {
margin-left: auto;
justify-content: space-between;
}
.logo-section {
display: flex;
align-items: center;
gap: 44px;
}
.logo {
display: flex;
align-items: center;
}
.logo-img {
height: 40px;
}
.slogan {
color: #fff;
font-size: 18px;
}
.user-section {
display: flex;
div {
width: 72px;
height: 24px;
box-sizing: border-box;
align-items: center;
gap: 20px;
}
.login-btn {
width: 100px;
text-align: center;
background: #fff;
border: 1px solid #fff;
color: #333;
border-radius: 22px;
font-size: 12px;
line-height: 24px;
cursor: pointer;
transition: all 0.3s;
}
.login-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.register-btn {
width: 100px;
text-align: center;
background: transparent;
border: 1px solid #fff;
color: #fff;
border-radius: 22px;
font-size: 12px;
border-radius: 6px;
margin-left: 10px;
line-height: 24px;
cursor: pointer;
}
.login {
background: #aa1941;
transition: all 0.3s;
}
.register-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.lang-switch {
margin-left: 40px;
color: #fff;
}
.register {
color: #333333;
border: 1px solid #eaeaea;
}
}
.language {
margin-left: 24px;
font-size: 14px;
color: #333;
cursor: pointer;
.cn {
color: #aa1941;
}
}
}
}
.max-width-content {
width: 1200px;
}
.lang-switch:hover {
opacity: 0.85;
}
/* 导航栏 */
.app-nav {
position: relative;
background-color: #fff;
height: 100px;
}
.nav-inner {
max-width: 1300px;
margin: 0 auto;
}
.head-nav-content {
min-height: 72px;
display: flex;
// align-items: center;
.nav-item-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
li {
}
.nav-list {
display: flex;
align-items: center;
gap: 40px;
}
.nav-item {
padding: 26px 0;
&.is-position-relative {
position: relative;
// margin-right: 50px;
.name1 {
line-height: 1.5;
}
.name {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active {
font-weight: 500;
color: #aa1941;
a {
color: #aa1941;
}
}
}
}
.nav-item-box {
display: none;
position: absolute;
left: 0;
top: 80px;
width: 300px;
padding: 20px;
background: #ffffff;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.16);
border-radius: 12px;
border: 1px solid #d5d5d5;
li {
line-height: 50px;
padding: 0 20px;
border-radius: 12px;
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a {
// font-weight: 500;
color: #aa1941;
}
}
.child-item {
.one-level {
display: block;
}
background: #ededed;
}
}
.child-item {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.nav-item-full-box {
display: none;
position: absolute;
top: 72px;
left: -10px;
left: 0;
right: 0;
top: 80px;
background: #ffffff;
border-top: #d5d5d5 1px solid;
&-inner {
width: 1300px;
margin: 0 auto;
padding: 40px 0;
}
&-title {
font-size: 18px;
font-weight: bold;
line-height: 1;
color: var(--main-color);
margin-bottom: 30px;
}
&-content {
&-item {
margin-bottom: 30px;
display: flex;
background: #fff;
z-index: 999;
.one-level {
padding: 36px 24px 0;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: none;
.li {
margin-bottom: 36px;
gap: 38px;
&-title {
width: 160px;
padding: 16px;
font-size: 18px;
font-weight: 500;
line-height: 1;
color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 12px;
display: flex;
justify-content: space-between;
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
letter-spacing: 1px;
a {
color: #333333;
font-size: 16px;
align-items: center;
justify-content: center;
}
}
.enterprise-list {
padding-bottom: 40px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
&-item {
padding: 0 10px;
min-height: 60px;
background: #f7f0f2;
border-radius: 12px;
text-align: center;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
}
.arrow-icon {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
font-size: 16px;
}
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a {
color: rgba(170, 25, 65, 1);
&-content-item-content {
align-content: center;
font-size: 18px;
line-height: 32px;
dl {
display: flex;
gap: 20px;
}
dt {
font-weight: bold;
color: var(--main-color);
white-space: nowrap;
}
.arrow-icon {
color: rgba(170, 25, 65, 1);
li {
position: relative;
display: inline-block;
line-height: 30px;
}
li + li {
padding-left: 20px;
&::after {
content: '';
width: 1px;
height: 18px;
background: #333;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
}
.group {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 0 50px;
}
}
.two-level {
pointer-events: auto;
padding: 34px 0 0 0px;
.name1 {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
&:hover {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
.nav-link {
display: block;
padding: 0 24px;
font-size: 18px;
line-height: 48px;
border-radius: 12px;
transition: background-color 0.3s;
}
.nav-item:hover {
.nav-link {
background-color: #ededed;
font-weight: bold;
}
.nav-item-box {
display: block;
}
.name {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 16px;
padding: 8px 41px 8px 24px;
white-space: nowrap;
// padding-left: 24px;
&:hover {
color: rgba(170, 25, 65, 1);
background: #ededed;
.nav-item-full-box {
display: block;
}
a {
}
.nav-right {
display: flex;
align-items: center;
gap: 68px;
}
.phone {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
}
}
}
}
}
}
}
.phone-icon {
width: 14px;
height: 14px;
color: #6c6c6c;
}
.search-box {
display: flex;
align-items: center;
border-radius: 6px;
border: 1px solid #d5d5d5;
overflow: hidden;
}
.search-input {
width: 140px;
height: 28px;
padding: 0 12px;
border: none;
outline: none;
font-size: 14px;
}
.search-input::placeholder {
color: #999;
}
.search-btn {
width: 36px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background: transparent;
}
.search-btn:hover {
color: var(--main-color);
}
</style>
app/components/AppRightAside.vue 0 → 100644
浏览文件 @ 701aab24
<template>
<div class="app-right-aside">
<ul>
<li>
<div class="text hover-text">售前<br />咨询</div>
<div class="hover">
<div class="enroll_cont">
<h5>{{ t('aside.apply') }}</h5>
<div class="p">
<input
v-model="formInfo.name"
type="text"
class="custom-input"
:class="{ 'input-error': errors.name }"
:placeholder="t('aside.name')"
@input="errors.name = ''" />
<div v-if="errors.name" class="error-message">{{ errors.name }}</div>
</div>
<div class="p">
<input
v-model="formInfo.phone"
type="text"
class="custom-input"
:class="{ 'input-error': errors.phone }"
:placeholder="t('aside.phone')"
@input="errors.phone = ''" />
<div v-if="errors.phone" class="error-message">{{ errors.phone }}</div>
</div>
<div class="p">
<select v-model="formInfo.projectId" class="custom-select" :class="{ 'input-error': errors.projectId }">
<option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
</select>
<span class="icon el-icon-arrow-down"></span>
<div v-if="errors.projectId" class="error-message">{{ errors.projectId }}</div>
</div>
<div class="p code-input-wrapper">
<div class="code-input-container">
<input
v-model="sendCodeValue"
type="text"
class="custom-input code-input"
:class="{ 'input-error': errors.code }"
:placeholder="t('aside.code')"
@input="errors.code = ''" />
<button class="custom-button code-button" :disabled="isBtnDisabled" @click="getSendCode">
{{ countdown > 0 ? `${countdown}s` : t('aside.codeBtn') }}
</button>
</div>
<div v-if="errors.code" class="error-message">{{ errors.code }}</div>
</div>
<div class="p">
<button class="custom-button submit-button" @click="submitEnroll">{{ t('aside.formBtn') }}</button>
<div v-if="successMessage" class="success-message">{{ successMessage }}</div>
</div>
</div>
</div>
</li>
<li>
<div class="text">技术<br />客服</div>
<div class="hover">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg"
width="150px" />
</div>
</li>
<li>
<div class="text">APP</div>
<div class="hover">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg"
width="150px" />
</div>
</li>
<li>
<div class="text">小程序</div>
<div class="hover">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg"
width="150px" />
</div>
</li>
<li>
<div class="text">公众号</div>
<div class="hover">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg"
width="150px" />
</div>
</li>
<li @click="scrollToTop">
<div class="text">回到<br />顶部</div>
</li>
</ul>
</div>
</template>
<script setup>
import { sendCode, checkCode, postNes } from '@/api/index'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
const { t } = useI18n()
const route = useRoute()
const sendCodeValue = ref('')
const isBtnDisabled = ref(false)
const countdown = ref(0)
const countdownTimer = ref(null)
const successMessage = ref('')
const formInfo = reactive({
name: '',
phone: '',
projectId: '',
})
const errors = reactive({
name: '',
phone: '',
projectId: '',
code: '',
})
const projectListMap = computed(() => [
{ label: t('aside.project1'), value: '1012' },
{ label: t('aside.project5'), value: '1006' },
{ label: t('aside.project6'), value: '1005' },
{ label: t('aside.project8'), value: '1021' },
{ label: t('aside.project3'), value: '1008' },
{ label: t('aside.project10'), value: '1018' },
{ label: t('aside.project12'), value: '1020' },
])
const projectList = computed(() => {
if (route.path === '/internationalDegree') {
return projectListMap.value.slice(0, 7)
} else if (route.path === '/studyAbroad') {
return projectListMap.value.slice(-4)
} else {
return projectListMap.value
}
})
// 清除所有错误信息
const clearErrors = (clearSuccess = false) => {
errors.name = ''
errors.phone = ''
errors.projectId = ''
errors.code = ''
if (clearSuccess) {
successMessage.value = ''
}
}
// 返回顶部功能
const scrollToTop = () => {
if (process.client) {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
}
// 组件卸载时清理定时器
onBeforeUnmount(() => {
if (countdownTimer.value) {
clearInterval(countdownTimer.value)
}
})
// 监听路由变化
watch(
() => route.path,
(newPath) => {
if (newPath === '/studyAbroad') {
formInfo.projectId = '1018'
} else {
formInfo.projectId = '1012'
}
},
{ immediate: true },
)
const submitEnroll = async () => {
// 清除之前的错误信息
clearErrors()
// 验证表单字段
let hasError = false
if (!formInfo.name) {
errors.name = '请输入姓名'
hasError = true
}
if (!formInfo.phone) {
errors.phone = '请输入手机号'
hasError = true
} else if (!MOBILE_REG.test(formInfo.phone)) {
errors.phone = '手机号格式错误'
hasError = true
}
if (!formInfo.projectId) {
errors.projectId = '请选择项目'
hasError = true
}
if (!sendCodeValue.value) {
errors.code = '请输入验证码'
hasError = true
}
if (hasError) {
return
}
try {
await checkSendcode()
await enrollQuery()
// 清空表单和错误信息
formInfo.name = ''
formInfo.phone = ''
formInfo.projectId = route.path === '/studyAbroad' ? '1018' : '1012'
sendCodeValue.value = ''
clearErrors(true)
successMessage.value = '报名成功'
// 3秒后清除成功提示
setTimeout(() => {
successMessage.value = ''
}, 3000)
} catch (err) {
if (err && err.type === 'checkcode') {
errors.code = err.msg || '验证码错误'
} else {
errors.code = err.msg || '报名提交失败'
}
}
}
const enrollQuery = async () => {
const params = {
channel: process.client ? localStorage.getItem('channel_num') || 19962 : 19962,
project_id: formInfo.projectId === '9999' ? '1016' : formInfo.projectId,
name: formInfo.name,
phone: formInfo.phone,
}
try {
const res = await postNes(params)
if (res && res.status === 200 && res.error === 0) {
return {
type: 'enroll',
state: 'success',
}
} else {
throw {
type: 'enroll',
state: 'fail',
msg: res.message || '报名提交失败',
}
}
} catch (error) {
throw error
}
}
const getSendCode = async () => {
// 清除之前的错误信息
errors.phone = ''
errors.code = ''
if (!formInfo.phone) {
errors.phone = '手机号不能为空'
return
}
if (!MOBILE_REG.test(formInfo.phone)) {
errors.phone = '手机号格式错误'
return
}
try {
const param = {
account: formInfo.phone,
service: 'ezijing.com',
}
const res = await sendCode(param)
btnDisabledTimer()
if (res && res.code === 0) {
successMessage.value = '验证码已发送，请注意查收'
setTimeout(() => {
successMessage.value = ''
}, 3000)
} else {
errors.code = '获取验证码失败，请稍后再试'
}
} catch (error) {
errors.code = '获取验证码失败，请稍后再试'
}
}
const checkSendcode = async () => {
const checkCodeParam = {
account: formInfo.phone,
code: sendCodeValue.value,
countryCode: 86,
}
try {
const res = await checkCode(checkCodeParam)
if (res && res.code === 0) {
return {
type: 'checked',
state: 'success',
}
} else {
throw {
type: 'checked',
state: 'fail',
msg: res.msg || '验证码检测失败',
}
}
} catch (error) {
throw error
}
}
const btnDisabledTimer = () => {
// 清除之前的定时器
if (countdownTimer.value) {
clearInterval(countdownTimer.value)
}
isBtnDisabled.value = true
countdown.value = 60
countdownTimer.value = setInterval(() => {
countdown.value--
if (countdown.value < 1) {
clearInterval(countdownTimer.value)
countdownTimer.value = null
isBtnDisabled.value = false
countdown.value = 0
}
}, 1000)
}
</script>
<style lang="scss">
.app-right-aside {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
box-shadow: 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
border-radius: 12px;
z-index: 1001;
li {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.hover-text {
color: var(--main-color);
}
& + li {
border-top: 1px solid #ededed;
}
&:hover {
.text {
color: #fff;
}
border-color: transparent;
background-color: var(--main-color);
.hover {
display: block;
}
}
}
.hover {
display: none;
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border-radius: 12px;
background-color: #fff;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
padding: 10px;
}
.enroll_cont {
padding: 10px;
min-width: 260px;
h5 {
margin: 0 0 15px 0;
font-size: 16px;
font-weight: 600;
color: #333;
text-align: center;
}
.p {
margin-bottom: 15px;
position: relative;
&:last-child {
margin-bottom: 0;
}
}
.error-message {
margin-top: 4px;
font-size: 12px;
color: #f56c6c;
line-height: 1.5;
min-height: 18px;
}
.success-message {
margin-top: 4px;
font-size: 12px;
color: #67c23a;
line-height: 1.5;
min-height: 18px;
}
.custom-input {
width: 100%;
height: 40px;
padding: 0 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
color: #606266;
background-color: #fff;
transition: border-color 0.2s;
&::placeholder {
color: #c0c4cc;
}
&:focus {
outline: none;
border-color: var(--main-color);
}
&:disabled {
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
&.input-error {
border-color: #f56c6c;
&:focus {
border-color: #f56c6c;
}
}
}
.custom-select {
width: 100%;
height: 40px;
padding: 0 30px 0 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
color: #606266;
background-color: #fff;
appearance: none;
cursor: pointer;
transition: border-color 0.2s;
&:focus {
outline: none;
border-color: var(--main-color);
}
&.input-error {
border-color: #f56c6c;
&:focus {
border-color: #f56c6c;
}
}
}
.icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #c0c4cc;
&::before {
content: '\25BC';
font-size: 12px;
}
}
.code-input-wrapper {
.code-input-container {
display: flex;
gap: 10px;
}
.code-input {
flex: 1;
}
.code-button {
white-space: nowrap;
padding: 0 15px;
min-width: 100px;
}
}
.custom-button {
height: 40px;
padding: 0 20px;
border: 1px solid var(--main-color);
border-radius: 4px;
font-size: 14px;
color: #fff;
background-color: var(--main-color);
cursor: pointer;
transition: all 0.3s;
&:hover:not(:disabled) {
background-color: #98163a;
border-color: #98163a;
}
&:active:not(:disabled) {
background-color: #871232;
border-color: #871232;
}
&:disabled {
background-color: #c0c4cc;
border-color: #c0c4cc;
cursor: not-allowed;
opacity: 0.6;
}
&.submit-button {
width: 100%;
}
}
}
}
</style>
app/components/ArticleDetail.vue
浏览文件 @ 701aab24
......@@ -38,7 +38,7 @@ onMounted(async () => {
<style lang="scss">
.is-pc {
.article-detail {
width: 1200px;
width: 1300px;
margin: 30px auto;
}
.article-back {
......
app/components/FormSubmit.vue
浏览文件 @ 701aab24
......@@ -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);
......
app/components/NewsCard.vue
浏览文件 @ 701aab24
......@@ -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 {
......
app/components/home/banner.vue
浏览文件 @ 701aab24
<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%;
......
app/components/home/enterprise.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/home/enterpriseIcons.vue 0 → 100644
浏览文件 @ 701aab24
<script setup>
defineProps({
name: { type: Number, required: true },
})
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" v-if="name === 1">
<g transform="translate(10 6.964)">
<path fill="var(--main-color)"
d="M286.9,421.059a1.173,1.173,0,1,1,0-2.347h5.4a1.173,1.173,0,0,1,0,2.347Zm0-8.1a1.174,1.174,0,1,1,0-2.348h5.4a1.174,1.174,0,0,1,0,2.348Zm0-8.1a1.174,1.174,0,1,1,0-2.347h5.4a1.174,1.174,0,0,1,0,2.347Z"
transform="translate(-272.229 -391.71)" />
<path fill="currentColor"
d="M273.409,448.04a1.175,1.175,0,0,1-1.174-1.173V400.985a20.9,20.9,0,0,1,.353-4.364,5.41,5.41,0,0,1,4.544-4.548A20.891,20.891,0,0,1,281,391.71c.161,0,.322,0,.482.005H297.7c.179,0,.34-.005.5-.005a20.92,20.92,0,0,1,3.868.362,5.407,5.407,0,0,1,4.548,4.545,20.7,20.7,0,0,1,.354,4.347v6.943h6.924c.177,0,.335-.006.493-.006a20.914,20.914,0,0,1,3.874.364,5.409,5.409,0,0,1,4.548,4.545,20.819,20.819,0,0,1,.354,4.348v29.709a1.174,1.174,0,0,1-1.174,1.173Zm33.558-2.346h13.846V417.179a18.679,18.679,0,0,0-.289-3.806,3.636,3.636,0,0,0-.862-1.881l-.041-.047-.047-.041a3.7,3.7,0,0,0-1.913-.861,18.331,18.331,0,0,0-3.277-.294c-.173,0-.345,0-.517.007h-6.9Zm-15.275-16.2c.8,0,1.606.039,2.406.116a3.893,3.893,0,0,1,2.3,1.04,3.79,3.79,0,0,1,1,2.263,23.765,23.765,0,0,1,.119,3.017v9.764h7.1V400.986a18.635,18.635,0,0,0-.287-3.8,3.665,3.665,0,0,0-.861-1.881l-.041-.046-.048-.041a3.684,3.684,0,0,0-1.914-.863,18.365,18.365,0,0,0-3.28-.294c-.171,0-.343,0-.515.007H281.505c-.151,0-.327-.007-.5-.007a18.422,18.422,0,0,0-3.312.3,3.6,3.6,0,0,0-1.878.857l-.046.04-.04.046a3.679,3.679,0,0,0-.868,1.915,18.815,18.815,0,0,0-.282,3.794v44.685h7.1v-9.744a24.264,24.264,0,0,1,.113-3.024,3.882,3.882,0,0,1,1.039-2.311,3.84,3.84,0,0,1,2.266-1.005c.8-.077,1.613-.116,2.409-.116q.3,0,.6.008h2.96C291.289,429.495,291.491,429.493,291.692,429.493Zm-7.47,3.264a2.686,2.686,0,0,0-.11.533,24.167,24.167,0,0,0-.086,2.8v9.6h11.15v-9.626a23.866,23.866,0,0,0-.084-2.768,2.8,2.8,0,0,0-.145-.656l-.024-.068-.1-.177-.114-.121-.111-.105-.149-.067a2.77,2.77,0,0,0-.726-.174c-.691-.064-1.393-.1-2.091-.1-.236,0-.472,0-.708.011h-2.675c-.21-.007-.447-.01-.684-.01-.7,0-1.4.031-2.093.1a2.684,2.684,0,0,0-.553.111h-.693Z"
transform="translate(-272.229 -391.71)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 2">
<g transform="translate(9 8.319)">
<path fill="currentColor"
d="M321.542,395.452H311.91c-1.17,0-1.526.354-1.526,1.524l0,48.208a1.95,1.95,0,0,0,1.867,2.03,1.522,1.522,0,0,0,.166,0h8.619a1.948,1.948,0,0,0,2.03-1.864c0-.055,0-.111,0-.166V396.976C323.068,395.806,322.712,395.452,321.542,395.452Zm-.681,49.732h-8.623V396.976h8.623Z"
transform="translate(-271.128 -394.672)" />
<path fill="currentColor"
d="M306.163,395.452h-9.641c-1.167,0-1.521.354-1.521,1.524v48.208a1.948,1.948,0,0,0,1.865,2.03,1.5,1.5,0,0,0,.165,0h8.623a1.949,1.949,0,0,0,2.03-1.864c0-.055,0-.111,0-.166V396.976C307.684,395.806,307.333,395.452,306.163,395.452Zm-.509,49.732h-8.623V396.976h8.623Z"
transform="translate(-271.128 -394.672)" />
<g transform="translate(27.673 9.914)">
<path fill="var(--main-color)"
d="M298.8,410.676c0,.712.7,1.018,1.526,1.018h2.027c.83,0,1.524-.3,1.524-1.018s-.7-1.012-1.524-1.012h-2.027C299.5,409.664,298.8,409.964,298.8,410.676Z"
transform="translate(-298.801 -404.586)" />
<path fill="var(--main-color)"
d="M298.8,415.751c0,.713.7,1.015,1.526,1.015h2.027c.83,0,1.524-.3,1.524-1.015s-.7-1.015-1.524-1.015h-2.027C299.5,414.736,298.8,415.041,298.8,415.751Z"
transform="translate(-298.801 -404.586)" />
<path fill="var(--main-color)"
d="M298.8,420.571c0,.71.7,1.017,1.526,1.017h2.027c.83,0,1.524-.308,1.524-1.017s-.7-1.015-1.524-1.015h-2.027c-.83,0-1.526.3-1.526,1.017Z"
transform="translate(-298.801 -404.586)" />
<path fill="var(--main-color)"
d="M298.8,405.6c0,.713.7,1.015,1.526,1.015h2.027c.83,0,1.524-.3,1.524-1.012s-.7-1.018-1.524-1.018h-2.027c-.83,0-1.526.3-1.526,1.018Z"
transform="translate(-298.801 -404.586)" />
</g>
<path fill="currentColor"
d="M295.138,397.345l-9.293-2.55c-1.13-.311-1.564-.062-1.875,1.066l-12.746,46.493h0a1.949,1.949,0,0,0,1.262,2.451c.051.016.1.03.155.042l8.318,2.282a1.953,1.953,0,0,0,2.5-1.42L296.2,399.217C296.512,398.09,296.266,397.656,295.138,397.345ZM281.5,445.174l-8.317-2.282L285.931,396.4h0l8.318,2.282Z"
transform="translate(-271.128 -394.672)" />
<g transform="translate(10.239 9.842)">
<path fill="currentColor"
d="M284.021,410.082c-.19.686.4,1.162,1.2,1.382l1.958.536c.8.222,1.548.112,1.735-.576s-.4-1.162-1.2-1.382l-1.955-.536C284.959,409.286,284.208,409.4,284.021,410.082Z"
transform="translate(-281.367 -404.514)" />
<path fill="currentColor"
d="M282.677,414.982c-.187.686.4,1.16,1.2,1.379l1.955.536c.8.222,1.548.113,1.738-.576s-.4-1.16-1.2-1.379l-1.955-.538c-.8-.22-1.55-.11-1.74.578Z"
transform="translate(-281.367 -404.514)" />
<path fill="currentColor"
d="M281.4,419.631c-.187.686.4,1.162,1.2,1.379l1.955.536c.8.22,1.548.11,1.735-.576s-.4-1.159-1.2-1.379l-1.954-.543c-.8-.217-1.548-.107-1.735.578Z"
transform="translate(-281.367 -404.514)" />
<path fill="currentColor"
d="M285.363,405.192c-.187.686.4,1.162,1.2,1.382l1.955.536c.8.22,1.548.11,1.738-.576s-.4-1.162-1.2-1.382l-1.955-.536c-.8-.22-1.553-.11-1.741.576Z"
transform="translate(-281.367 -404.514)" />
</g>
<g transform="translate(42.884 9.92)">
<path fill="currentColor"
d="M314.014,410.682c0,.712.7,1.018,1.524,1.018h2.027c.833,0,1.526-.305,1.526-1.018s-.693-1.018-1.525-1.018h-2.028c-.83,0-1.526.3-1.526,1.012Z"
transform="translate(-314.012 -404.592)" />
<path fill="currentColor"
d="M314.014,415.757c0,.713.7,1.015,1.524,1.015h2.027c.833,0,1.526-.3,1.526-1.015s-.693-1.015-1.526-1.015h-2.027c-.83,0-1.526.3-1.526,1.015Z"
transform="translate(-314.012 -404.592)" />
<path fill="currentColor"
d="M314.014,420.577c0,.71.7,1.017,1.524,1.017h2.027c.833,0,1.526-.308,1.526-1.017s-.693-1.015-1.526-1.015h-2.027c-.83,0-1.526.3-1.526,1.017Z"
transform="translate(-314.012 -404.592)" />
<path fill="currentColor"
d="M314.014,405.607c0,.713.7,1.015,1.524,1.015h2.027c.833,0,1.526-.3,1.526-1.012s-.693-1.018-1.526-1.018h-2.027c-.83,0-1.526.3-1.526,1.018Z"
transform="translate(-314.012 -404.592)" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 3">
<g transform="translate(6 7)">
<path fill="var(--main-color)"
d="M113.114,424.091a1.6,1.6,0,0,1-1.532-1.18l-3.04-12.041a1.575,1.575,0,0,1,.417-1.511l3.525-3.49h1.273l3.52,3.487a1.586,1.586,0,0,1,.42,1.52l-3.041,12.017a1.57,1.57,0,0,1-1.178,1.149A1.372,1.372,0,0,1,113.114,424.091Zm-2.575-13.481,2.578,10.213L115.7,410.61l-2.581-2.557Zm-.062-.247,0,.015Z"
transform="translate(-84.557 -373.393)" />
<path fill="currentColor"
d="M112.931,402.785a11.288,11.288,0,0,1-11.245-11.112,11.164,11.164,0,0,1,11.077-11.068h.151a11.267,11.267,0,0,1,11.22,11.076,11.036,11.036,0,0,1-3.291,7.855,11.2,11.2,0,0,1-7.773,3.25Zm-.068-20.215a9.108,9.108,0,0,0-.187,18.215h.121a9.108,9.108,0,0,0,.117-18.216Z"
transform="translate(-84.557 -373.393)" />
<path fill="currentColor"
d="M134.525,413.1a1,1,0,0,1,0-2h4.812l-4-16.883h-8.562a1,1,0,1,1,0-2h8.692a1.8,1.8,0,0,1,1.818,1.539l4.158,17.57-.008.083a1.755,1.755,0,0,1-1.761,1.695ZM86.316,413.1a1.756,1.756,0,0,1-1.759-1.7v-.137L88.7,393.8a1.8,1.8,0,0,1,1.775-1.567H99.2a1,1,0,0,1,0,2H90.649L86.658,411.1h4.806a1,1,0,0,1,1,1v.074a1,1,0,0,1-1,.926Zm12.553-21.713a1,1,0,0,1-.306-.049,8.933,8.933,0,0,1-5.842-8.365,9.614,9.614,0,0,1,9.592-9.536,8.887,8.887,0,0,1,7.611,4.409,1,1,0,1,1-1.673,1.1,6.872,6.872,0,0,0-5.895-3.512,7.626,7.626,0,0,0-7.634,7.529,6.985,6.985,0,0,0,4.45,6.467,1,1,0,0,1-.3,1.954Zm28.187-.025a1,1,0,0,1-.314-1.95,6.985,6.985,0,0,0,4.47-6.475,7.618,7.618,0,0,0-7.6-7.543,6.918,6.918,0,0,0-5.956,3.534,1,1,0,0,1-1.666-1.1,8.889,8.889,0,0,1,7.583-4.43,9.635,9.635,0,0,1,9.639,9.545,8.946,8.946,0,0,1-5.86,8.377.912.912,0,0,1-.289.046Z"
transform="translate(-84.557 -373.393)" />
<path fill="currentColor"
d="M92.433,430.367a1.967,1.967,0,0,1-2.025-1.889v-.138l5.134-22.323a1.988,1.988,0,0,1,1.966-1.766l30.848,0a1.994,1.994,0,0,1,2.011,1.735l5.147,22.414-.007.084a1.946,1.946,0,0,1-1.953,1.881Zm.031-2h40.982l-5.07-22.117H97.544Z"
transform="translate(-84.557 -373.393)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 4">
<g transform="translate(8.105 8.105)">
<path fill="currentColor"
d="M123.292,418.017a1.1,1.1,0,0,1-1.093-1.093V394.865a1.094,1.094,0,0,1,1.093-1.093h8.484a1.1,1.1,0,0,1,1.093,1.093v22.054a1.1,1.1,0,0,1-1.093,1.093Zm1.093-2.256,6.235.061.061-19.806-6.3-.061Z"
transform="translate(-85.789 -376.02)" />
<path fill="currentColor"
d="M94.938,418.017a1.1,1.1,0,0,1-1.093-1.093V394.865a1.094,1.094,0,0,1,1.093-1.093h8.484a1.1,1.1,0,0,1,1.093,1.093v22.054a1.1,1.1,0,0,1-1.093,1.093Zm1.093-2.256,6.236.061.06-19.806-6.3-.061Z"
transform="translate(-87.974 -376.02)" />
<path fill="currentColor"
d="M109.117,418.017a1.1,1.1,0,0,1-1.093-1.093V394.865a1.094,1.094,0,0,1,1.093-1.093H117.6a1.1,1.1,0,0,1,1.092,1.093v22.054a1.1,1.1,0,0,1-1.091,1.093Zm1.092-2.256,6.235.061.061-19.806-6.3-.061Z"
transform="translate(-86.881 -376.02)" />
<path fill="var(--main-color)"
d="M113.237,389.446a3.638,3.638,0,1,1,3.638-3.638A3.642,3.642,0,0,1,113.237,389.446Zm0-5.091a1.452,1.452,0,1,0,1.45,1.546,1.482,1.482,0,0,0-1.45-1.546Z"
transform="translate(-86.76 -376.914)" />
<path fill="currentColor"
d="M89.419,427.089a1.026,1.026,0,0,1-1.025-1.024v-6.786a1.024,1.024,0,0,1,1.023-1.024h50.906a1.025,1.025,0,0,1,1.025,1.024v6.786a1.026,1.026,0,0,1-1.025,1.024Zm1.024-2.11,48.793.061.061-4.676L90.444,420.3Z"
transform="translate(-88.394 -374.133)" />
<path fill="currentColor"
d="M89.42,392.921a1.026,1.026,0,0,1-1.025-1.025v-4.473a1.025,1.025,0,0,1,.679-.964l25.452-9.109a1.019,1.019,0,0,1,.346-.06,1.054,1.054,0,0,1,.345.059l25,8.947.455.168a1.024,1.024,0,0,1,.677.963V391.9a1.027,1.027,0,0,1-1.026,1.025H89.42Zm1.065-4.786-.041,2.668,48.793.06.061-2.671-24.427-8.783Z"
transform="translate(-88.394 -377.29)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 5">
<g transform="translate(10 10.319)">
<path fill="currentColor"
d="M282.2,435.879a.924.924,0,0,1-.432-.107,1.122,1.122,0,0,1-.547-.952V400.526a1.007,1.007,0,0,1,.43-.835,12.384,12.384,0,0,1,6.555-1.87l.306,0a14.538,14.538,0,0,1,9.1,3.212l.631.515.632-.517a14.524,14.524,0,0,1,9.08-3.212l.331-.005a12.278,12.278,0,0,1,6.542,1.886.949.949,0,0,1,.379.795v18.876a1.018,1.018,0,0,1-1.016,1h0a1.014,1.014,0,0,1-1.056-1V401.1l-.608-.275a11.168,11.168,0,0,0-4.526-.951h-.123a12.269,12.269,0,0,0-6.7,1.984,11.13,11.13,0,0,0-1.565,1.176l-.338.278V419.25a1.1,1.1,0,1,1-2.2,0V403.293l-.355-.3a17.783,17.783,0,0,0-1.671-1.238,12.052,12.052,0,0,0-6.518-1.91,11.752,11.752,0,0,0-4.7.946l-.617.279v32.063l1.325-.384a13.942,13.942,0,0,1,3.882-.551,14.415,14.415,0,0,1,5.534,1.078,1.044,1.044,0,1,1-.774,1.939,12.581,12.581,0,0,0-4.707-1.011l-.219,0a10.741,10.741,0,0,0-5.383,1.449,1.064,1.064,0,0,1-.638.223ZM321.573,420.4a1.027,1.027,0,0,1-1.025-1.026V407.568a1.006,1.006,0,0,1,1-1.027,1.027,1.027,0,0,1,1.035,1.026v.568h.02v11.24a1.027,1.027,0,0,1-1.027,1.026Z"
transform="translate(-273.896 -397.818)" />
<path fill="currentColor"
d="M274.906,446.48a1,1,0,0,1-.6-.192,1.044,1.044,0,0,1-.415-.819V407.54a1.039,1.039,0,0,1,1.013-1.027,1.023,1.023,0,0,1,1.016,1.026V444.1l1.283-.334a44.255,44.255,0,0,1,10.047-1.82h.236a29.169,29.169,0,0,1,6.383.708,1.03,1.03,0,0,1,.757.993,1.008,1.008,0,0,1-.029.26,1.02,1.02,0,0,1-1.237.752,27.042,27.042,0,0,0-6.085-.716c-4.313,0-12.012,2.47-12.087,2.5a.858.858,0,0,1-.277.047Z"
transform="translate(-273.896 -397.818)" />
<path fill="var(--main-color)"
d="M305.171,443.817a.928.928,0,0,1-.023-1.856h16.5a.928.928,0,0,1-.014,1.855Zm0-6.426a.929.929,0,0,1-.022-1.857h10.524a.929.929,0,0,1-.015,1.856Zm0-6.4a.928.928,0,0,1-.024-1.855h16.5a.928.928,0,0,1-.014,1.854Z"
transform="translate(-273.896 -397.818)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 6">
<g transform="translate(8 5)">
<path fill="var(--main-color)"
d="M292.9,434.043a6.744,6.744,0,0,1-5.677-3.236l-3.907-6.6a6.819,6.819,0,0,1-.018-6.643l3.912-6.749a6.749,6.749,0,0,1,5.675-3.258H300.7a6.49,6.49,0,0,1,5.687,3.251l3.9,6.73a6.821,6.821,0,0,1,.015,6.636l-3.919,6.619a6.738,6.738,0,0,1-5.666,3.251Zm-.046-24.2a4.371,4.371,0,0,0-3.68,2.133l-3.886,6.7a4.546,4.546,0,0,0,.014,4.393l3.879,6.554a4.391,4.391,0,0,0,3.742,2.128H300.7a4.39,4.39,0,0,0,3.728-2.137l3.891-6.575a4.544,4.544,0,0,0-.019-4.381l-3.883-6.7a4.314,4.314,0,0,0-3.7-2.12h-7.845Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M295.476,425.1a2.071,2.071,0,0,1-1.765-1.007l-1.324-2.235a2.125,2.125,0,0,1,0-2.065l1.323-2.284a2.076,2.076,0,0,1,1.764-1.01h2.646a2.014,2.014,0,0,1,1.766,1.006l1.321,2.282a2.125,2.125,0,0,1,0,2.064l-1.323,2.238a2.074,2.074,0,0,1-1.758,1.011Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M278.047,439.281a1.613,1.613,0,0,1-.606-.176l-6.253-3.336a1.132,1.132,0,0,1-.685-1.09v-7.733a1.281,1.281,0,0,1,2.561,0v6.947l5.646,3.04a1.274,1.274,0,0,1,.435,1.658A1.345,1.345,0,0,1,278.047,439.281Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M271.892,415.819a1.28,1.28,0,0,1-1.277-1.284V406.5l.076-.082.022-.211.229-.227.089-.059a.793.793,0,0,0,.223-.152l6.191-3.289a1.247,1.247,0,0,1,.589-.146,1.27,1.27,0,0,1,1.114.658,1.338,1.338,0,0,1-.427,1.72l-4.2,2.214,4.232,2.232a1.264,1.264,0,0,1,.508,1.7,1.351,1.351,0,0,1-1.116.686,1.681,1.681,0,0,1-.589-.179l-4.376-2.3v5.469a1.284,1.284,0,0,1-1.281,1.284Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M296.815,402.783a1.283,1.283,0,0,1-1.282-1.282v-6.2l-4.378,2.3a1.3,1.3,0,0,1-.619.164,1.257,1.257,0,0,1-.58-2.373l6.261-3.337a1.5,1.5,0,0,1,1.211.008l6.241,3.328a1.266,1.266,0,0,1,.512,1.7,1.334,1.334,0,0,1-1.119.685,1.655,1.655,0,0,1-.588-.178l-4.376-2.3v6.2A1.284,1.284,0,0,1,296.815,402.783Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M321.953,415.926a1.281,1.281,0,0,1-1.28-1.279v-5.476l-4.378,2.305a1.644,1.644,0,0,1-.621.176,1.35,1.35,0,0,1-1.087-.689,1.266,1.266,0,0,1,.515-1.7l4.23-2.231L315.1,404.8a1.256,1.256,0,0,1,1.2-2.209l6.254,3.334c.016.038.106.082.172.115l.171.145.084.088h.029l.016.024a.646.646,0,0,0,.078.281l.022.345.111,7.727A1.28,1.28,0,0,1,321.953,415.926Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M315.524,439.285a1.241,1.241,0,0,1-1.055-.594,1.265,1.265,0,0,1,.519-1.7l5.572-3.106v-6.946a1.318,1.318,0,0,1,1.276-1.278h0a1.3,1.3,0,0,1,1.283,1.2v7.7a1.333,1.333,0,0,1-.688,1.108l-6.255,3.44a1.656,1.656,0,0,1-.618.176Z"
transform="translate(-270.501 -391.93)" />
<path fill="currentColor"
d="M296.392,449.608c.045-.012-.047-.1-.209-.1h-.03l-6.2-3.3a1.257,1.257,0,1,1,1.189-2.214l4.385,2.308v-5.58a1.282,1.282,0,0,1,2.565,0v5.47l4.352-2.291a1.3,1.3,0,0,1,.543-.118,1.313,1.313,0,0,1,1.174.719,1.277,1.277,0,0,1-.51,1.708l-6.192,3.3h-.145l-.083.081-.01.019Z"
transform="translate(-270.501 -391.93)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" v-if="name === 7">
<g transform="translate(8 8.319)">
<path fill="var(--main-color)"
d="M294.349,429.752a1.093,1.093,0,0,1,.015-2.185h5.228a1.093,1.093,0,0,1-.019,2.184h-5.224Zm-.014-9.064a1.093,1.093,0,0,1-1.063-1.117,1.1,1.1,0,0,1,1.092-1.068h5.228a1.093,1.093,0,0,1-.02,2.184h-5.237Zm0-9.068a1.093,1.093,0,0,1,.029-2.185h5.228a1.093,1.093,0,0,1-.02,2.184h-5.237Z"
transform="translate(-270.004 -393.895)" />
<path fill="currentColor"
d="M271.1,447.887a1.091,1.091,0,0,1,0-2.183h1.5V428.659a13.633,13.633,0,0,1,.237-2.876,3.795,3.795,0,0,1,3.16-3.16,13.809,13.809,0,0,1,2.548-.238l.31,0h6.7V405.348a13.672,13.672,0,0,1,.238-2.875,3.792,3.792,0,0,1,3.157-3.161,13.818,13.818,0,0,1,2.549-.238l4.417,0v-4.091a1.094,1.094,0,0,1,2.188,0l0,4.092h4.09l.339-.005a13.551,13.551,0,0,1,2.534.239,3.793,3.793,0,0,1,3.159,3.157,13.816,13.816,0,0,1,.237,2.866v17.055h6.679l.34,0a13.665,13.665,0,0,1,2.536.238,3.8,3.8,0,0,1,3.155,3.157,13.484,13.484,0,0,1,.238,2.86V445.7h1.5a1.091,1.091,0,1,1,0,2.183Zm37.359-2.183h10.765V428.659a11.673,11.673,0,0,0-.177-2.348,1.952,1.952,0,0,0-.425-1l-.062-.078-.078-.062a2.071,2.071,0,0,0-1.056-.429,11.462,11.462,0,0,0-1.975-.17l-.34.006h-6.654Zm-29.9-21.137a11.832,11.832,0,0,0-2.032.178,1.951,1.951,0,0,0-1.011.434,1.884,1.884,0,0,0-.548,1.1,11.537,11.537,0,0,0-.182,2.409V445.7h10.764l0-21.132h-6.678ZM297,440.519a1.093,1.093,0,0,1,1.092,1.092l-.007,4.09h8.179v-40.35a11.756,11.756,0,0,0-.175-2.347,1.975,1.975,0,0,0-.427-1.005l-.063-.079-.08-.062a2.092,2.092,0,0,0-1.046-.427,11.513,11.513,0,0,0-1.981-.17l-.341.005H291.817l-.316-.005a11.721,11.721,0,0,0-2.03.178,1.969,1.969,0,0,0-1.008.43l-.075.06-.059.076a2.046,2.046,0,0,0-.432,1.063,11.422,11.422,0,0,0-.167,2.311V445.7h8.178v-4.09A1.094,1.094,0,0,1,297,440.519Z"
transform="translate(-270.004 -393.895)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 8">
<g transform="translate(7 9.319)">
<path fill="currentColor"
d="M268.573,397.786v39.381l43.24,7.627a3.2,3.2,0,0,0,3.708-2.6l.888-5.042h3.622a3.358,3.358,0,0,0,3.358-3.357V397.786a3.358,3.358,0,0,0-3.358-3.358h-48.1A3.357,3.357,0,0,0,268.573,397.786Zm42.815,44.724-30.476-5.359H314.2l-.683,3.866A1.842,1.842,0,0,1,311.388,442.51Zm8.358-7.531h-49V398.071a1.47,1.47,0,0,1,1.469-1.47h47.31a1.693,1.693,0,0,1,1.692,1.692V433.51A1.47,1.47,0,0,1,319.746,434.979Z"
transform="translate(-268.573 -394.428)" />
<path fill="currentColor"
d="M275.536,402.729v6.406a2.2,2.2,0,0,0,2.2,2.2h36.488a2.2,2.2,0,0,0,2.2-2.2v-6.406a2.2,2.2,0,0,0-2.2-2.2H277.736A2.2,2.2,0,0,0,275.536,402.729Zm37.9,6.434h-34.9a.822.822,0,0,1-.822-.822v-4.818a.822.822,0,0,1,.822-.822h34.9a.823.823,0,0,1,.823.822v4.818A.823.823,0,0,1,313.433,409.163Z"
transform="translate(-268.573 -394.428)" />
<rect fill="currentColor" width="40.889" height="2.173" rx="1.087" transform="translate(6.963 20.667)" />
<rect fill="var(--main-color)" width="40.889" height="2.177" rx="1.087" transform="translate(6.963 26.811)" />
<rect fill="var(--main-color)" width="25.889" height="2.173" rx="1.087" transform="translate(6.963 32.961)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" v-if="name === 9">
<g transform="translate(4 12.319)">
<path fill="currentColor"
d="M309.486,401.709l0,0a10.314,10.314,0,0,0-8.013-3.82h-.021a50.064,50.064,0,0,0-3.109,10.516c-.7,4.418.172,22.337.192,22.582a.277.277,0,0,0,.3.246.514.514,0,0,0,.351-.158c.288-.275,8.117-12.776,9.6-15.962S312.617,405.748,309.486,401.709Zm-2.514,12.556c-.866,1.862-4.208,7.391-6.663,11.343-.206-5.681-.414-14.207.005-16.853a48.27,48.27,0,0,1,2.452-8.771,8.274,8.274,0,0,1,5.062,2.851l.077.1C310.147,405.826,308.635,410.692,306.972,414.265Z"
transform="translate(-266.275 -397.885)" />
<path fill="currentColor"
d="M323.359,414.206l0,.006c-.365-3.924-4.39-7.937-4.948-8H318.4c-.6,0-5.41,6.272-9.121,12.127-3.731,5.884-8.279,13.975-8.073,14.5.008.021.034.031.077.031,1.026,0,11.539-5.794,16.067-9C322.043,420.74,323.724,418.129,323.359,414.206Zm-7.114,7.993-.025.017-.024.017a121.515,121.515,0,0,1-10.744,6.456c1.475-2.647,3.485-6.071,5.52-9.28a110.928,110.928,0,0,1,7.516-10.508c1.109,1.237,2.689,3.464,2.881,5.49h0C321.618,417.075,320.875,419.114,316.245,422.2Z"
transform="translate(-266.275 -397.885)" />
<path fill="currentColor"
d="M284.7,418.347c-3.709-5.854-8.524-12.126-9.12-12.127h-.008l.005-.006c-.561.06-4.585,4.073-4.948,8s1.314,6.535,6,9.658c4.528,3.211,15.039,9.005,16.065,9.005.044,0,.07-.01.079-.031C292.982,432.321,288.431,424.228,284.7,418.347Zm-6.915,3.894-.023-.016-.024-.016c-4.624-3.083-5.366-5.123-5.118-7.81.187-2.027,1.765-4.253,2.873-5.491a110.431,110.431,0,0,1,7.517,10.509c2.034,3.211,4.043,6.634,5.518,9.279A121.6,121.6,0,0,1,277.79,422.241Z"
transform="translate(-266.275 -397.885)" />
<path fill="currentColor"
d="M327.226,421.253h-.014c-.4,0-7.383,3.9-10.79,5.608-3.44,1.724-13.725,7.939-13.8,8.169a77.3,77.3,0,0,0,8.75.269c2.876,0,5.571-.053,6.474-.181,1.979-.3,6.292-1.439,8.508-5.151S327.5,421.328,327.226,421.253Zm-2.589,7.687c-1.9,3.186-5.909,4.019-7.074,4.2-.523.074-2.459.161-6.191.161-.764,0-1.5,0-2.2-.009,2.965-1.774,6.4-3.771,8.141-4.641,1.475-.74,3.552-1.852,5.56-2.929.929-.5,1.963-1.052,2.849-1.519A9.141,9.141,0,0,1,324.637,428.94Z"
transform="translate(-266.275 -397.885)" />
<path fill="currentColor"
d="M277.578,426.861h-.005c-3.41-1.707-10.393-5.608-10.79-5.608h-.01c-.273.075-1.343,5,.872,8.713s6.529,4.847,8.509,5.15c.9.129,3.6.182,6.484.182a77.011,77.011,0,0,0,8.741-.27C291.3,434.8,281.021,428.583,277.578,426.861Zm5.06,6.439c-3.738,0-5.678-.088-6.182-.159-1.185-.182-5.2-1.02-7.094-4.2a9.155,9.155,0,0,1-1.089-4.736c.87.459,1.882,1,2.79,1.487,2.028,1.087,4.126,2.211,5.615,2.956l.275.136c1.8.927,5.051,2.816,7.872,4.5C284.132,433.3,283.4,433.3,282.638,433.3Z"
transform="translate(-266.275 -397.885)" />
<path fill="var(--main-color)"
d="M302.884,436.571s2.513,1.911,3.871,2.95c1.2.816,5,3.266,8.2,3.266a4.764,4.764,0,0,0,1.955-.383c3.394-1.517,5.216-5.318,5.216-5.318Zm13.2,4.007a2.8,2.8,0,0,1-1.139.209,12.4,12.4,0,0,1-5.693-2.045l9.05.242A7.47,7.47,0,0,1,316.089,440.578Z"
transform="translate(-266.275 -397.885)" />
<path fill="var(--main-color)"
d="M271.875,437.09s1.82,3.8,5.216,5.318a4.761,4.761,0,0,0,1.955.383c3.2,0,6.988-2.45,8.191-3.266,1.362-1.039,3.875-2.95,3.875-2.95Zm7.171,3.7a2.8,2.8,0,0,1-1.139-.209,7.462,7.462,0,0,1-2.218-1.594l9.047-.242A12.383,12.383,0,0,1,279.046,440.791Z"
transform="translate(-266.275 -397.885)" />
<path fill="currentColor"
d="M295.641,408.4a50.194,50.194,0,0,0-3.107-10.511h-.019a10.31,10.31,0,0,0-8.012,3.82c-3.131,4.043-.779,10.219.7,13.4s9.313,15.687,9.6,15.961a.524.524,0,0,0,.353.159.277.277,0,0,0,.3-.247C295.47,430.73,296.345,412.814,295.641,408.4ZM293.679,425.6c-2.456-3.952-5.8-9.482-6.663-11.342-1.661-3.574-3.172-8.44-.96-11.3a8.275,8.275,0,0,1,5.166-2.98,48.091,48.091,0,0,1,2.443,8.726C294.09,411.376,293.883,419.924,293.679,425.6Z"
transform="translate(-266.275 -397.885)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 10">
<g transform="translate(9.299 9.674)">
<path fill="currentColor"
d="M322.341,410.105c.091-1.149-1.07-2.159-1.428-2.442l-22.721-11.646a2.33,2.33,0,0,0-2.619,0q-3.469,1.777-6.987,3.6c-4.862,2.509-9.891,5.1-14.778,7.552a3.8,3.8,0,0,0-2.143,2.143l-.069.176v3.7l.048.307a2.562,2.562,0,0,0,2.783,1.746h.324v26.137a5.047,5.047,0,0,0,.845,3.021,2.967,2.967,0,0,0,2.782,1.531h6.436V423.653h24.3v22.622h1c2.09,0,4.25,0,6.4-.179l.176-.014.161-.074a4.06,4.06,0,0,0,2.333-4.121V415.236h.753a2.339,2.339,0,0,0,2.4-2.579Zm-2,2.552c0,.579-.16.579-.4.579h-2.753v28.707l.007.122a2.062,2.062,0,0,1-1.037,2.054c-1.668.13-3.368.152-5.037.155V421.653h-28.3v22.273l-4.513,0a1.029,1.029,0,0,1-.971-.531l-.056-.09a3.088,3.088,0,0,1-.524-1.889V413.236h-2.4l-.176.015a.552.552,0,0,1-.577-.267v-3.1a1.9,1.9,0,0,1,1.025-.895c4.981-2.49,10.014-5.088,14.882-7.6q3.546-1.83,7.047-3.628l.144-.09a.315.315,0,0,1,.378,0l22.669,11.614a2.171,2.171,0,0,1,.6.738Z"
transform="translate(-271.596 -395.614)" />
<rect fill="currentColor" width="7.425" height="2.125" rx="1.062" transform="translate(33.612 17.546)" />
<rect fill="currentColor" width="7.425" height="2.125" rx="1.062" transform="translate(21.263 17.546)" />
<rect fill="currentColor" width="7.425" height="2.125" rx="1.062" transform="translate(8.913 17.546)" />
<path fill="var(--main-color)"
d="M298.994,445.054a1.757,1.757,0,0,1-1.755-1.756v-3.657a1.757,1.757,0,0,1,1.755-1.756h3.657a1.759,1.759,0,0,1,1.757,1.756V443.3a1.759,1.759,0,0,1-1.757,1.756Zm-.049-1.707H302.7v-3.755h-3.755Zm-10.4,1.707a1.758,1.758,0,0,1-1.756-1.756v-3.657a1.758,1.758,0,0,1,1.756-1.756H292.2a1.757,1.757,0,0,1,1.755,1.756V443.3a1.757,1.757,0,0,1-1.755,1.756Zm-.05-1.707h3.755v-3.755h-3.755Zm.05-8.642a1.757,1.757,0,0,1-1.756-1.755v-3.66a1.758,1.758,0,0,1,1.756-1.756H292.2a1.757,1.757,0,0,1,1.755,1.756v3.66A1.757,1.757,0,0,1,292.2,434.7Zm-.05-1.707h3.755v-3.757h-3.755Z"
transform="translate(-271.596 -395.614)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 11">
<g transform="translate(-262.696 -386.929)">
<path fill="currentColor"
d="M277.893,445.851a4.211,4.211,0,0,1-4.2-4.227V401.262a4.213,4.213,0,0,1,4.106-4.332h31.6a4.433,4.433,0,0,1,4.45,4.347v40.786a1.062,1.062,0,0,1-1.063,1.064,1.064,1.064,0,0,1-1.062-1.064v-40.8a2.321,2.321,0,0,0-2.3-2.2H277.893a2.108,2.108,0,0,0-2.069,2.15l0,40.308a2.1,2.1,0,0,0,1.971,2.2l27.928,0a1.065,1.065,0,0,1,0,2.13H277.893Z" />
<path fill="currentColor"
d="M316.119,445.716a4.47,4.47,0,0,1-4.457-4.467,1.066,1.066,0,0,1,1.035-1.1h0a1.075,1.075,0,0,1,1.089,1.036,2.379,2.379,0,0,0,2.19,2.4c.049,0,.1.006.152.006a2.123,2.123,0,0,0,2.109-1.965l.006-.106V407.247a1.061,1.061,0,0,1,1.035-1.1h0a1.076,1.076,0,0,1,1.089,1.036v34.342a4.234,4.234,0,0,1-4.222,4.2Z" />
<path fill="var(--main-color)"
d="M281.281,415.385a1.064,1.064,0,0,1-1.063-1.065v-9.793a1.066,1.066,0,0,1,1.064-1.065h23.9a1.065,1.065,0,0,1,1.062,1.065v9.793a1.065,1.065,0,0,1-1.062,1.065h-23.9Zm1.06-2.13h21.774v-7.662H282.341Z" />
<path fill="currentColor" d="M281.818,423a1.064,1.064,0,1,1,0-2.129h16.3a1.064,1.064,0,1,1,0,2.129Z" />
<path fill="currentColor"
d="M281.818,430.617a1.064,1.064,0,0,1-1.059-1.068,1.067,1.067,0,0,1,1.061-1.061h21.728a1.064,1.064,0,0,1,1.058,1.068,1.065,1.065,0,0,1-1.06,1.061Z" />
<path fill="currentColor"
d="M281.818,438.234a1.065,1.065,0,0,1,0-2.129h16.3a1.062,1.062,0,0,1,1.059,1.068,1.067,1.067,0,0,1-1.06,1.061Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 12">
<g transform="translate(-262.417 -386.312)">
<path fill="var(--main-color)"
d="M294.874,437.273a.407.407,0,0,1-.212-.06l-6.053-3.621-6.046,3.62a.408.408,0,0,1-.2.059.422.422,0,0,1-.424-.411v-28a2.5,2.5,0,0,1,2.5-2.5h8.349a2.5,2.5,0,0,1,2.5,2.5v27.991a.411.411,0,0,1-.411.417Zm-9.044-28.688a1.673,1.673,0,0,0-1.677,1.673v23.883l4.456-2.67,4.459,2.67V410.264a1.68,1.68,0,0,0-1.672-1.679Z" />
<path fill="currentColor"
d="M275.466,445.457a6.036,6.036,0,0,1-6.049-5.83V433.75a5.689,5.689,0,0,1,2.274-4.482l.3-.228-.3-.227a5.682,5.682,0,0,1-2.274-4.484v-5.882a5.688,5.688,0,0,1,2.274-4.483l.3-.227-.3-.227a5.687,5.687,0,0,1-2.274-4.485V403.14a6.038,6.038,0,0,1,6.052-5.82l.205,0h47.721a1.109,1.109,0,1,1,0,2.218c-3.3,0-5.984,2.407-5.984,5.365v2.356c0,2.959,2.684,5.367,5.984,5.367a1.155,1.155,0,0,1,.865.354,1.108,1.108,0,0,1-.813,1.862h0c-3.351,0-6.034,2.408-6.034,5.367v2.349c0,2.96,2.684,5.367,5.984,5.367a1.11,1.11,0,0,1,0,2.219c-3.3,0-5.984,2.407-5.984,5.367v2.353c0,2.96,2.684,5.367,5.984,5.367a1.11,1.11,0,0,1-.008,2.219Zm.009-15.312a3.86,3.86,0,0,0-3.84,3.588v5.907a3.863,3.863,0,0,0,3.838,3.6c.075,0,.151,0,.228-.007h41.882l-.445-.476a7.187,7.187,0,0,1-1.941-4.892v-2.35a7.2,7.2,0,0,1,1.941-4.891l.445-.477H298.354a1.109,1.109,0,1,1,0-2.217h19.226l-.444-.477a7.2,7.2,0,0,1-1.941-4.889v-2.355a7.192,7.192,0,0,1,1.94-4.89l.445-.477H298.353a1.111,1.111,0,0,1,.015-2.217h19.211l-.445-.477a7.2,7.2,0,0,1-1.94-4.892V404.9a7.2,7.2,0,0,1,1.94-4.888l.445-.477h-41.9c-.059,0-.135-.006-.21-.006a3.858,3.858,0,0,0-3.838,3.587v5.906a3.864,3.864,0,0,0,3.84,3.608c.074,0,.15,0,.226-.006h3.173a1.107,1.107,0,0,1,0,2.215h-3.19c-.059,0-.135-.006-.21-.006a3.86,3.86,0,0,0-3.838,3.589v5.9a3.863,3.863,0,0,0,3.838,3.609c.075,0,.152,0,.228-.007h3.173a1.109,1.109,0,1,1,0,2.218h-3.192C275.624,430.147,275.549,430.145,275.475,430.145Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 13">
<g transform="translate(9.626 10.016)">
<path fill="currentColor"
d="M270.367,444.472a1.174,1.174,0,0,1-.128-.536v-37.1a.963.963,0,0,1,.159-.658l1.655.017a1.158,1.158,0,0,1,.128.536v37.1a1.092,1.092,0,0,1-.111.639Z"
transform="translate(-270.239 -393.917)" />
<path fill="currentColor"
d="M279.9,443.729a3.033,3.033,0,0,1-3.017-3.014V395.641a3.031,3.031,0,0,1,3.014-3.017h37.613a3.108,3.108,0,0,1,3.123,2.973l0,45.116a3.034,3.034,0,0,1-3.013,3.017Zm0-49.16a1.078,1.078,0,0,0-1.072,1.075v45.069a1.078,1.078,0,0,0,1.076,1.072h37.715a1.077,1.077,0,0,0,1.072-1.075V395.64a1.161,1.161,0,0,0-1.115-1.071Z"
transform="translate(-270.873 -392.623)" />
<path fill="var(--main-color)" d="M284.344,438.376a1,1,0,0,1,0-1.991h9.914a1,1,0,0,1,0,1.991Z"
transform="translate(-271.491 -396.801)" />
<path fill="var(--main-color)" d="M284.344,430.353a1,1,0,0,1,0-1.991h9.915a1,1,0,0,1,0,1.991Z"
transform="translate(-271.491 -396.035)" />
<path fill="var(--main-color)" d="M284.344,422.33a.995.995,0,0,1,0-1.99h9.915a.995.995,0,0,1,0,1.99Z"
transform="translate(-271.491 -395.269)" />
<path fill="currentColor"
d="M303.468,438.057a3.54,3.54,0,0,1-3.536-3.537V422.372a3.54,3.54,0,0,1,3.536-3.536h9.386a3.54,3.54,0,0,1,3.537,3.536V434.52a3.541,3.541,0,0,1-3.537,3.537Zm0-17.277a1.594,1.594,0,0,0-1.591,1.592V434.52a1.593,1.593,0,0,0,1.591,1.592h9.385a1.594,1.594,0,0,0,1.592-1.592V422.372a1.594,1.594,0,0,0-1.592-1.592Z"
transform="translate(-273.074 -395.126)" />
<g transform="translate(11.858 8.149)">
<path fill="currentColor"
d="M284.983,401.632l4.93,7.192h.056v-7.192h1.647V411.6h-1.591l-4.986-7.29h-.056v7.29h-1.634v-9.971Z"
transform="translate(-283.349 -401.632)" />
<path fill="currentColor" d="M301.848,401.632v1.4h-5.557v2.765h5.223v1.4h-5.223v3.017h5.794v1.4h-7.428v-9.971Z"
transform="translate(-284.429 -401.632)" />
<path fill="currentColor"
d="M305.413,401.632l1.871,7.583h.055l1.97-7.583H311l1.97,7.583h.055l1.871-7.583h1.843l-2.876,9.971h-1.732l-1.941-7.5h-.055l-1.956,7.5h-1.746l-2.863-9.971Z"
transform="translate(-285.28 -401.632)" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 14">
<g transform="translate(-262.251 -386.642)">
<path fill="currentColor"
d="M312.923,406.47V401c0-1.565-1.679-2.887-3.666-2.887H284.741c-1.988,0-3.666,1.322-3.666,2.887v5.469H278.6V401c0-2.9,2.811-5.359,6.139-5.359h24.512c3.327,0,6.139,2.454,6.139,5.359l0,5.469Z" />
<path fill="currentColor"
d="M313.926,436.108v-2.476h.233a6.215,6.215,0,0,0,6.117-6.106V412.811a6.217,6.217,0,0,0-6.105-6.119h-34.33a6.215,6.215,0,0,0-6.117,6.107v14.719a6.215,6.215,0,0,0,6.106,6.114h.356v2.473h-.345a8.7,8.7,0,0,1-8.59-8.6v-14.7a8.7,8.7,0,0,1,8.6-8.59h34.308a8.7,8.7,0,0,1,8.592,8.6v14.7a8.6,8.6,0,0,1-8.587,8.59Z" />
<path fill="currentColor"
d="M284.741,447.138a6.212,6.212,0,0,1-6.139-6.146v-19.6a6.212,6.212,0,0,1,6.146-6.139h24.505a6.214,6.214,0,0,1,6.139,6.146V441a6.127,6.127,0,0,1-6.1,6.139Zm-.013-29.414a3.682,3.682,0,0,0-3.653,3.653V441a3.687,3.687,0,0,0,3.652,3.666h24.526a3.687,3.687,0,0,0,3.666-3.652V421.39a3.685,3.685,0,0,0-3.652-3.666H284.728Z" />
<path fill="var(--main-color)"
d="M288.041,435.886a1.244,1.244,0,0,1-1.237-1.211,1.236,1.236,0,0,1,1.21-1.263h17.9a1.252,1.252,0,0,1,1.282,1.21,1.238,1.238,0,0,1-1.211,1.263Zm.046-8.47a1.253,1.253,0,0,1-1.283-1.209,1.24,1.24,0,0,1,1.211-1.264h17.9a1.253,1.253,0,0,1,1.282,1.211,1.234,1.234,0,0,1-1.21,1.262h-17.9Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 15">
<g transform="translate(-264.919 -388.939)">
<path fill="currentColor"
d="M310.03,453.057a1.154,1.154,0,0,1-1.152-1.152v-4.192h-8.285V451.9a1.175,1.175,0,0,1-2.35,0v-4.192h-8.288V451.9a1.174,1.174,0,0,1-2.347,0v-4.192h-5.743a4.9,4.9,0,0,1-4.9-4.9v-7.074H272.79a1.151,1.151,0,0,1-1.151-1.157,1.165,1.165,0,0,1,1.151-1.189h4.175V425.1h-4.18a1.153,1.153,0,0,1-1.152-1.151,1.165,1.165,0,0,1,1.152-1.2h4.18v-8.29h-4.176a1.154,1.154,0,0,1-1.152-1.149,1.181,1.181,0,0,1,.337-.864,1.146,1.146,0,0,1,.816-.339h4.176v-6.8a5.172,5.172,0,0,1,5.166-5.166h5.477v-4.174a1.174,1.174,0,0,1,2.347,0v4.174h8.288v-4.174a1.175,1.175,0,0,1,2.35,0v4.174h8.288v-4.174a1.154,1.154,0,0,1,1.152-1.152,1.166,1.166,0,0,1,1.2,1.152v4.176h5.471a5.173,5.173,0,0,1,5.167,5.167v6.8h4.181a1.175,1.175,0,0,1,0,2.349h-4.181v8.461l4.147-.126a1.151,1.151,0,1,1,.033,2.3h-4.181v8.29h4.174a1.154,1.154,0,0,1,1.151,1.147,1.171,1.171,0,0,1-.335.862,1.142,1.142,0,0,1-.815.339h-4.176v7.075a4.9,4.9,0,0,1-4.9,4.9h-5.739V451.9a1.154,1.154,0,0,1-1.152,1.152ZM281.87,402.491c-1.62,0-2.549,1.025-2.549,2.811v37.513c0,1.619,1.024,2.548,2.809,2.548h34.577c1.393,0,2.816-.254,2.816-2.148l.008-36.841c0-1.613-.789-3.883-2.547-3.883Z"
transform="translate(0)" />
<path fill="currentColor"
d="M288.227,436.216a3.8,3.8,0,0,1-3.8-3.639V412.605a3.9,3.9,0,0,1,3.777-3.793h7.335a1.13,1.13,0,0,1,0,2.261h-7.295a1.688,1.688,0,0,0-1.555,1.585v19.9a1.658,1.658,0,0,0,1.578,1.533h1.147a1.413,1.413,0,0,1,.951.391,1.011,1.011,0,0,1,.31.731c0,.373-.164,1-1.264,1Z"
transform="translate(1.232 1.347)" />
<path fill="var(--main-color)"
d="M290.2,440.192a.972.972,0,0,1-.71-.31,1.183,1.183,0,0,1,.019-1.681l12.9-14.851H291.142a1.262,1.262,0,0,1-1.119-.636,1.142,1.142,0,0,1,.2-1.325l13-15.337a1.2,1.2,0,0,1,1.9,1.457l-11.7,13.584h11.629a1.134,1.134,0,0,1,1.146.566l.048.1v.109a1.158,1.158,0,0,1-.469,1.1L291.2,439.729a1.616,1.616,0,0,1-.852.453Z"
transform="translate(1.687 1.037)" />
<path fill="currentColor"
d="M298.425,436.361a1.138,1.138,0,0,1-1.263-1.131,1.152,1.152,0,0,1,1.263-1.137h8.343a1.827,1.827,0,0,0,1.7-1.616l0-19.87a1.788,1.788,0,0,0-1.72-1.529h-1.01a1.141,1.141,0,1,1,0-2.269h1.519l.009.031a3.941,3.941,0,0,1,3.461,3.769v19.935a3.965,3.965,0,0,1-3.8,3.818h-8.5Z"
transform="translate(2.458 1.347)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 16">
<g transform="translate(14 7.319)">
<path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"
d="M295.4,419l-9.337,30.276a.723.723,0,0,0,.473.9.733.733,0,0,0,.223.032h20.635a.729.729,0,0,0,.728-.731.719.719,0,0,0-.03-.206L298.754,419a.945.945,0,0,0-.9-.666h-1.564a.945.945,0,0,0-.893.666Z"
transform="translate(-275.455 -396.268)" />
<path fill="currentColor"
d="M302.384,441.712l1.429,4.741a.827.827,0,0,1-1.583.476l-1.429-4.742a.827.827,0,0,1,1.583-.475Z"
transform="translate(-275.455 -396.268)" />
<path fill="currentColor"
d="M300.108,434.3l1.429,4.741a.827.827,0,0,1-1.583.476l-1.429-4.742a.827.827,0,0,1,1.583-.475Z"
transform="translate(-275.455 -396.268)" />
<path fill="currentColor"
d="M297.832,426.885l1.429,4.742a.827.827,0,0,1-1.57.519l-.013-.043-1.429-4.741a.827.827,0,0,1,1.583-.477Z"
transform="translate(-275.455 -396.268)" />
<path fill="currentColor"
d="M303.325,424.529a9.46,9.46,0,0,0,2.937-6.876c0-.123,0-.279,0-.435a9.239,9.239,0,0,0-9.179-8.953l-.226,0a9.188,9.188,0,0,0-8.963,9.413,9.522,9.522,0,0,0,2.624,6.538l-.721,1.808a11.426,11.426,0,0,1-3.654-8.364c-.005-.2-.005-.373,0-.546a11,11,0,0,1,10.933-10.682l.271,0a10.953,10.953,0,0,1,10.673,11.2,11.381,11.381,0,0,1-3.976,8.683Z"
transform="translate(-275.455 -396.268)" />
<path fill="currentColor"
d="M308.353,434.18a20.069,20.069,0,0,0,8.247-16.285,19.529,19.529,0,1,0-39.047.023A20.116,20.116,0,0,0,285.4,433.88l-.758,1.9a22.3,22.3,0,0,1-9.188-17.878,21.652,21.652,0,0,1,21.621-21.631h.177a21.414,21.414,0,0,1,21.161,21.612A22.261,22.261,0,0,1,309.08,436Z"
transform="translate(-275.455 -396.268)" />
<path fill="var(--main-color)"
d="M306.817,428.6l.131-.132a14.576,14.576,0,0,0,4.185-10.214c.006-.179.006-.42,0-.662a14.13,14.13,0,0,0-14.047-13.7l-.341,0a14.062,14.062,0,0,0-13.722,14.406A14.646,14.646,0,0,0,286.755,428l.118.131-.8,1.994-.3-.316a16.679,16.679,0,0,1-4.647-11.535c-.006-.3-.007-.554,0-.807a16.053,16.053,0,0,1,15.946-15.582l.4.006a15.978,15.978,0,0,1,15.563,16.333,16.62,16.62,0,0,1-5.123,12.069l-.3.289Z"
transform="translate(-275.455 -396.268)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="70" viewBox="0 0 69 70" v-if="name === 17">
<g transform="translate(-263.11 -387.698)">
<path fill="currentColor"
d="M279.617,448.164a7.9,7.9,0,0,1-5.406-2.131c-3.977-3.978-2.037-13.018,4.947-23.028l.057-.082-.058-.081a49.811,49.811,0,0,1-5-8.785c-2.744-6.4-2.723-11.459.061-14.242a7.911,7.911,0,0,1,5.829-2.117c3.527,0,7.988,1.49,12.9,4.308a1.363,1.363,0,0,1,.512,1.879,1.339,1.339,0,0,1-1.159.656,1.357,1.357,0,0,1-.692-.192c-4.447-2.551-8.551-3.955-11.558-3.955a5.341,5.341,0,0,0-3.924,1.328c-1.924,1.928-1.737,6.037.51,11.274a46.138,46.138,0,0,0,4.163,7.459l.11.16.118-.153a77.3,77.3,0,0,1,6.489-7.349c9.325-9.332,19.989-15.361,27.168-15.361a7.823,7.823,0,0,1,5.765,2.061c2.784,2.787,2.806,7.845.062,14.244-2.573,6.007-7.318,12.642-13.361,18.683-1.458,1.453-2.915,2.807-4.33,4.022a1.349,1.349,0,0,1-1.755-2.047c1.39-1.193,2.8-2.5,4.179-3.881,5.8-5.8,10.344-12.14,12.786-17.845,2.247-5.242,2.434-9.351.512-11.273a5.346,5.346,0,0,0-3.934-1.384c-6.09,0-16.682,6.172-25.185,14.675a71.3,71.3,0,0,0-6.775,7.865l-.063.085.063.084a74.062,74.062,0,0,0,6.775,7.787c8.509,8.509,19.1,14.686,25.187,14.685a5.34,5.34,0,0,0,3.932-1.385c2.453-2.454,1.442-8.39-2.639-15.492a1.351,1.351,0,1,1,2.341-1.348c4.859,8.459,5.662,15.292,2.206,18.747a7.9,7.9,0,0,1-5.4,2.116h0c-.14,0-.28,0-.419-.011A21.888,21.888,0,0,1,306.2,446.1c-6.025-2.585-12.663-7.329-18.694-13.362a76.893,76.893,0,0,1-6.447-7.3l-.121-.156-.109.164c-4.543,6.768-8.166,15.233-4.708,18.69a5.347,5.347,0,0,0,3.925,1.331c3.048,0,7.209-1.442,11.719-4.06a1.35,1.35,0,0,1,1.354,2.336c-4.995,2.888-9.518,4.415-13.078,4.415C279.9,448.16,279.756,448.164,279.617,448.164Z" />
<path fill="var(--main-color)"
d="M297.333,418.089a4.835,4.835,0,1,0,4.834,4.834A4.84,4.84,0,0,0,297.333,418.089Zm0,7.4a2.564,2.564,0,1,1,2.565-2.565A2.568,2.568,0,0,1,297.332,425.488Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70"
viewBox="0 0 70 70" v-if="name === 18">
<defs>
<pattern id="enterprise-icon-18-pattern" preserveAspectRatio="none" width="100%" height="100%"
viewBox="0 0 98 36">
<image width="98" height="36"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAAkCAYAAABypO9/AAAABHNCSVQICAgIfAhkiAAACKpJREFUaEPNmwWsHFUUhnm4OwTnFSgQij8I7u5OIEB4uLtTvC2uwb0QAiHBSnF3KxR3W6RQnEKxov+3mUvOO+/O7szOzL6e5M/uzF4/9x6929HV1TVBCzSR6nQKcwpzCDMLPwrvCi8Lf7XQZqjSX18mNvW/1/evCrRH1bmFqU0bv+r7JznbZM7rChsKSwrzCdMLHcJo4UthlPC4MFz4NE/7HTkYMbkaXkfYQthUmCmlox/0/m7hDuEe4bc8A0omA3MDXaAvB+dswxe/Sy82Mi+f0PfVMra5sMp1CzsJdlzNqr+mAlck+LNZ4SyMmFCN7CKcknMg9P2NwEKeL/zSbDDJ7+yq8YERU2kcpwv7Cez6VuljVTxJuEH4J62RZoxYSRUvExZtdRRJvc/1eYhwS4Z2xgdGcFquERA/ZdH9amh7AYnRixoxYleVvlSYtKyRJJPbX5+NxFVfM+Jwje9MIe0UMPb3hI8S/KzP2QX05YrCjA3WizqIdsRWD0pjxNkqdViDBlFMdwrPC18IKFMGgKJFFqPUJkup/6LeryeghGPUl4zYRwO6JGVcbye/XadPFj9GGBkrC90COgWx7uknvUDSvGF/iDHiGBU4NaWj5/T+WOEx4d+UMryeVtgrKYtl4el1vVhLQId46itG7KiBXC/4k8CG2U3A+MhDA1QY3bh2pBIW23LC/9agZwTW0O2C5yRc3FO4Oc9IVBbLapDATvP0pF6sKXhTl+PbzxRuh9XE4iMuvC4cqXdbCbWc8w7FWcchwtGR+kgTTk99/pYRc+n5LWEaV+lDPcMgfmuV9lBF9A22uCV2DErc0vF6wEIL1A5G0NdSAic+6MQH9H0z4fdWJ23qYXldFGmH93VRaBmBlYCZaglHZVkBq6cobaIGOFFTuIY4FY+ad4gyji7iDWoXI+gLRX2WgHjEafu26KRNfRjBwlui/QWEMYERHMlXBSuS/tDz6gK7pCzqVkPXusY4aUzaOj0cZ3QR1E5GIKJwQgcLT5c16aQdFDmibjHXLnM9LjDiJj1s5wqcZhajzDHF+mInnmM6IWRSE3Cq2skIhsCCFQnRNFqrDRJG2zLMsx+MwMzkiNhYzHd6nl8YUyYHkrZm1ef7QhA9vMYyQUFjFASCMYf2ASMqmHKPJp/V0/Kuky4Ygd1PLMZSVach9BFkse3zRD1YJY2ThAV1uVB2rAmxg8XSF4Rxcq7reDCMwJrZ2/2AjftChaPEMiFS22n64PTxTBQ3EAoOMVE2I4j54AVjQrabCJtgiVoaDiMe1BvrdHyt59mERg5bGYPHSbrKNYTpiqIMNI++HCAcUbBDQha+jTf1bmlhXMG2W6mOCLZuwkgYwYAWMa0hw9gtVRNK8R0BXRQIXTWvQL4g0OL60is2k3Nw6EFOOG1ZqloEpw2TeS9kfhwNI4gG2jDEbXrGm2wH7a5OrnQdIYawlMomzEbiXDaI+beeifu0W0Q9lfQb5jgORpAnmNLMmnjLzmWvQkp7LAoKmchlIJwpTgl+TNl0pBo8wzWKrsKPKcODzjpeL4VGwQhMSby7QLj2REfbRZio1oegX/RCLCRQdEw4rKQyvcV0od4dWLTxHPW9FBoBIxjYqqYRwrPe+8vRR+6iOG1ksWYxNas8FfgrRBGsssQwwdkieVM1kX1kfpaGwQhSeDuYt5iLOF3RTFJFo4yJjKpOBVMg6XW1mws5liWEWGi+zGnjKuAyWBoII9AHQ90PJDVgULuIU1ETCG0EqvJU0MetwpZugpjynAyUeFWE6OcShqUBMILMGr6DDVHflwyoqsHE2j1KL0nWW0J/nFfSIBB9drczb0QU4X9LF+uBdG4VRGgD98DSB3roH4J+j+hhDVeABDrXTtpFxLpqgr2mg3jEkEhLq2YdW1DSzNEG9FbRMyF4nycpcwPYMbKe9GnpBD0MCowgV0AO2tIIPeDYVRWJjC1iTFeUYdGEnVgPObuOD9IzCSpLhEC2FshWlkWxFDSpUjbaWJsYinGL7JFPZpQ1sFg7XGLD68S7DlRGXAjfCL1HW5wKf9JhthdHbEAcTi4LFCUyfTDV58P31bu64raMiMkvyvhcQdFBNatPXoSchSUcIMY3tlnlyO9kAB8yi8BVSKwjG1xEdLFQpIQ9+fhX3iFwiQJGT+IqpuasKUfAbWCkJy6ZYU62KqYYRNNrh6Zf7Hmu5Fi6Vw/cCcrjceMxPyz4u0YEALkyZInoAj7VMpH536h3OHzkabISxgGxLIKbnrAISUFjMtfJ3+Lg6LAzOEqeSPMxARR7ViI/DWPRQUQ6s5qFRF1xLP1Fhmf0jhPzWYYBIIrwzm0Cimos5oJCzADAfEZXrhBpH4uLfDb5EZvA8kU79QKXgHthfvyU5YIaCvslWzF2rwnrhcWGYzFih7FDuPEcc36wQIhycr2QywjBN+Amhw97p3RRf019+vFEbAyTlrb8jW529foC4jS2mHjQnKphDTpGT6FTtkkpw0KiY0gusaMJo4ebfkQoEHtpxGWMzYVeQca0m37s5KHCtg0aRfERsAs3/ZgAi85FhNhO4DhyEzDP7fA0URmGhQ3+ioDoYzFYhLQbhjABBvnsWGyKSAbECr5NWcQJgAnRGzGN7r4yGBQVsP9XKDIwLqn5sHez9k5WAWztIoSS5yZfo5MQax/Pm5C8d/ryjIXMI44qJnJqhLfZbXA6JIFBQ3CzVcJeRldwlSb1anqDxskg8l8DewMw61g4NYijHndNs1ZWOUQ1Dh63FclcZiV0EKYvvktTJZ+FEaFjEijI+Y2FtD+p+EHiFLKAmKNZ/x+RNlHiUVwwwLafIcNq1FSG8Dr9l5EOJXeCecumwBfpFEKSic1FmAgxTdKHe7JcKc1sZeZhRJg7yhilhOYnpEtSh53CsSPViQwknsKAcv19KcPiUoTJE5gji4jOwcJCp7EDawKKEPOXhag67z6d+sBAgAlZLcLoNP8D2qLczuLV/FgAAAAASUVORK5CYII=" />
</pattern>
</defs>
<rect fill="url(#enterprise-icon-18-pattern)" width="66" height="24" transform="translate(2 23)" />
</svg>
</template>
app/components/home/honor.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/home/menu.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/home/menuIcons.vue 0 → 100644
浏览文件 @ 701aab24
<script setup>
defineProps({
name: { type: String, required: true },
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30.602"
height="31.785"
viewBox="0 0 30.602 31.785"
v-if="name === 'ai'">
<g transform="translate(276.159 -648.382)">
<path
fill="currentColor"
d="M-261.005,680.167a3.442,3.442,0,0,1-.881-.115l-6.514-2.386-.111-.054a1.849,1.849,0,0,1-1.075-1.3l-1.052-3.085-.029-.062a2.3,2.3,0,0,0-.563-.687l-4.146-2.9-.15-.13a2.2,2.2,0,0,1-.633-1.454v-8.205a1.764,1.764,0,0,1,.913-1.489l3.978-2.24a1.579,1.579,0,0,0,.649-.79l.023-.076,1.057-3.077.064-.156a2.458,2.458,0,0,1,1-1.04l.117-.051,6.524-2.385a3.433,3.433,0,0,1,.822-.1h.262a3.814,3.814,0,0,1,.926.115l6.5,2.385.119.051a2.5,2.5,0,0,1,.968,1.045l.064.159,1.059,3.088a1.557,1.557,0,0,0,.633.809l4,2.253a1.774,1.774,0,0,1,.92,1.508v8.222a2.19,2.19,0,0,1-.648,1.439l-.176.146-4.048,2.833a2.266,2.266,0,0,0-.625.743l-.023.043-1.033,3.017a1.89,1.89,0,0,1-1.081,1.364l-.176.082-6.518,2.382a3.484,3.484,0,0,1-.826.1ZM-274.918,668.1l.051.118a1.38,1.38,0,0,0,.139.251l.065.093,4.095,2.856a3.2,3.2,0,0,1,1.156,1.545l1.128,3.291.134.113a1.348,1.348,0,0,0,.117.088l.063.043,6.49,2.379V649.679L-268,652.067l-.1.112a2.173,2.173,0,0,0-.215.274l-.043.067-1.052,3.067a2.753,2.753,0,0,1-1.243,1.555l-4.258,2.4v3.55h3.171l.187-.3a1.742,1.742,0,0,1,1.491-.829,1.746,1.746,0,0,1,.92.263,1.754,1.754,0,0,1,.566,2.411,1.743,1.743,0,0,1-1.491.83,1.742,1.742,0,0,1-.921-.264,1.748,1.748,0,0,1-.566-.565l-.186-.3h-3.171Zm14.682,10.776,6.488-2.373.1-.063.093-.074.13-.112,1.129-3.29a3.191,3.191,0,0,1,1.173-1.552l4.075-2.853.066-.1a1.519,1.519,0,0,0,.132-.242l.052-.12v-3.764h-3.171l-.186.3a1.742,1.742,0,0,1-1.491.83,1.745,1.745,0,0,1-.921-.264,1.736,1.736,0,0,1-.782-1.089,1.742,1.742,0,0,1,.216-1.323,1.744,1.744,0,0,1,1.492-.829,1.749,1.749,0,0,1,.921.263,1.766,1.766,0,0,1,.566.567l.186.3h3.171v-3.55l-4.262-2.4a2.729,2.729,0,0,1-1.235-1.54l-1.056-3.079-.043-.067a2,2,0,0,0-.22-.28l-.1-.108-6.52-2.388Z" />
<path
fill="currentColor"
d="M-263.368,674.311a1.533,1.533,0,0,1-1.057-.421.942.942,0,0,1-.3-.653.924.924,0,0,1,.245-.669,1.522,1.522,0,0,1,1.1-.484c.086,0,.141,0,.194.008l.313.032.968-.681v-8.394l-.969-.68-.313.032c-.039,0-.079.007-.12.007a1.124,1.124,0,0,1-.679-.423,1.124,1.124,0,0,1-.225-.835,1.133,1.133,0,0,1,1.118-.986.979.979,0,0,1,.147.01,1.127,1.127,0,0,1,.984,1.07l.019.417,1.4.982v9.207l-1.382.971-.029.4a1.082,1.082,0,0,1-.585.881,1.644,1.644,0,0,1-.792.207Z"
transform="translate(-2.883 -2.972)" />
<path
fill="currentColor"
d="M-249.2,674.143a1.206,1.206,0,0,1-.147-.01l-.095-.01-.145.006A1.28,1.28,0,0,1-250.845,673l-.045-.374-1.364-.959v-9.21l1.454-1.023-.043-.486a1.386,1.386,0,0,1,.322-1.018,1.379,1.379,0,0,1,.947-.493c.043,0,.084-.006.126-.006a1.4,1.4,0,0,1,1.387,1.274,1.383,1.383,0,0,1-.322,1.018,1.38,1.38,0,0,1-.947.493c-.043,0-.084.006-.125.006a1.372,1.372,0,0,1-.157-.008l-.315-.031-.97.68v8.4l.97.677.312-.03c.055-.005.108-.008.16-.008l.109-.007a1.293,1.293,0,0,1,.151-.01,1.133,1.133,0,0,1,1.118.985,1.125,1.125,0,0,1-.225.834,1.126,1.126,0,0,1-.749.432A1.209,1.209,0,0,1-249.2,674.143Z"
transform="translate(-6.03 -2.788)" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="33.881"
height="27.517"
viewBox="0 0 33.881 27.517"
v-if="name === 'business'">
<g transform="translate(233.022 -657.368)">
<path
fill="currentColor"
d="M-225.989,675.438a.7.7,0,0,1-.226-.038.7.7,0,0,1-.47-.658V658.068a.7.7,0,0,1,.7-.7h7.7a.7.7,0,0,1,.7.7v16.677a.7.7,0,0,1-.712.689.7.7,0,0,1-.535-.264l-3.3-4.254-3.3,4.254a.7.7,0,0,1-.55.268Zm.7-16.673v13.942l2.6-3.355a.7.7,0,0,1,.55-.268.7.7,0,0,1,.55.268l2.6,3.355V658.765Z" />
<path
fill="currentColor"
d="M-200.709,677.025h-9.627l-.144.23a1.85,1.85,0,0,1-1.58.872,1.867,1.867,0,0,1-1.864-1.865,1.859,1.859,0,0,1,.874-1.58,1.865,1.865,0,0,1,2.57.586l.144.23h9.627Z" />
<path
fill="currentColor"
d="M-200.708,670.156h-7l-.144.229a1.854,1.854,0,0,1-1.583.874,1.872,1.872,0,0,1-1.866-1.868,1.871,1.871,0,0,1,1.869-1.866,1.852,1.852,0,0,1,1.579.874l.144.229h7Z" />
<path
fill="currentColor"
d="M-230.016,684.885a3.015,3.015,0,0,1-3.006-3.006V663.636a3.015,3.015,0,0,1,3.006-3.006h.3a.842.842,0,0,1,.841.842.842.842,0,0,1-.841.841h-.3a1.335,1.335,0,0,0-1.329,1.329v18.251a1.335,1.335,0,0,0,1.329,1.328h27.87a1.334,1.334,0,0,0,1.328-1.328V663.636a1.334,1.334,0,0,0-1.328-1.329h-12.573a.842.842,0,0,1-.842-.841.843.843,0,0,1,.842-.842h12.573a3.013,3.013,0,0,1,3,3.005V681.88a3.016,3.016,0,0,1-2.863,3l-.142.006Z" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="29.753"
height="30.085"
viewBox="0 0 29.753 30.085"
v-if="name === 'engineering'">
<g transform="translate(271.13 -654.624)">
<path
fill="currentColor"
d="M-267.972,684.709a.4.4,0,0,1-.4-.4v-8.3h-2.355c-.122,0-.4-.458-.4-.789,0-.259.225-.591.4-.591h3.235l4.424-8.134a1.243,1.243,0,0,1,1.152-.812l11.456,0a1.249,1.249,0,0,1,1.209.774l4.436,8.175h3.04c.177,0,.4.334.4.592,0,.331-.279.789-.4.789h-2.355v8.3a.4.4,0,0,1-.4.4Zm.958-1.371H-245.5v-7.269h-21.515Zm13.471-13.919a1.33,1.33,0,0,1,.878.265l2.831,4.95h3.385l-4.277-7.41v-.039l-.033-.039v-.076l-.142-.083a.8.8,0,0,0-.324-.107h-9.836a.632.632,0,0,0-.184.026l-.308-.2,0,.43-.016.016-.006.057-4.287,7.429h3.385l2.805-4.881c.074-.169.5-.331.909-.331a.676.676,0,0,1,.177.017c.25.068.5.307.447.507l-2.776,4.69h9.519l-2.806-4.761c-.015-.079.243-.363.48-.435A.6.6,0,0,1-253.542,669.419Zm-2.809-4.938a5.009,5.009,0,0,1-4.994-4.969,5.022,5.022,0,0,1,5-4.888,5.026,5.026,0,0,1,5,4.9,5.008,5.008,0,0,1-5,4.961Zm0-8.578a3.617,3.617,0,0,0-3.613,3.611,3.621,3.621,0,0,0,3.613,3.6h.205l0-.008a3.62,3.62,0,0,0,3.406-3.587A3.617,3.617,0,0,0-256.348,655.9Z"
transform="translate(0 0)" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="27.939"
height="29.094"
viewBox="0 0 27.939 29.094"
v-if="name === 'economy'">
<g transform="translate(269.159 -654.945)">
<path
fill="currentColor"
d="M-268.483,684.039a.675.675,0,0,1-.676-.66v-17.9a.682.682,0,0,1,.374-.6l5.889-2.991.009-.012a.685.685,0,0,1,.286-.063.734.734,0,0,1,.3.063l.086.106.121.005,4.76,2.417v-4.8a.666.666,0,0,1,.362-.592l7.277-3.935.1-.063a.755.755,0,0,1,.317-.07.686.686,0,0,1,.34.086l7.355,3.982a.664.664,0,0,1,.362.583v23.773a.687.687,0,0,1-.695.67Zm11.1-1.08.005-.687V665.886l-5.2-2.646-5.2,2.646v16.808h9.826Zm1.418-22.967v22.7h13.385v-22.7l-6.7-3.6Zm-6.654,19.084a.718.718,0,0,1-.351-.089.611.611,0,0,1-.332-.565V671.8a.678.678,0,0,1,.688-.669.742.742,0,0,1,.48.2.617.617,0,0,1,.2.462V678.4a.62.62,0,0,1-.331.586A.74.74,0,0,1-262.619,679.076Zm13.464,0a.723.723,0,0,1-.351-.089.611.611,0,0,1-.332-.564V665.693a.619.619,0,0,1,.332-.585.727.727,0,0,1,.35-.088.725.725,0,0,1,.352.089.613.613,0,0,1,.332.565V678.4a.621.621,0,0,1-.332.585A.728.728,0,0,1-249.155,679.073Z" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="27.939"
height="29.094"
viewBox="0 0 27.939 29.094"
v-if="name === 'textbook'">
<g transform="translate(269.159 -654.945)">
<path
fill="currentColor"
d="M-268.483,684.039a.675.675,0,0,1-.676-.66v-17.9a.682.682,0,0,1,.374-.6l5.889-2.991.009-.012a.685.685,0,0,1,.286-.063.734.734,0,0,1,.3.063l.086.106.121.005,4.76,2.417v-4.8a.666.666,0,0,1,.362-.592l7.277-3.935.1-.063a.755.755,0,0,1,.317-.07.686.686,0,0,1,.34.086l7.355,3.982a.664.664,0,0,1,.362.583v23.773a.687.687,0,0,1-.695.67Zm11.1-1.08.005-.687V665.886l-5.2-2.646-5.2,2.646v16.808h9.826Zm1.418-22.967v22.7h13.385v-22.7l-6.7-3.6Zm-6.654,19.084a.718.718,0,0,1-.351-.089.611.611,0,0,1-.332-.565V671.8a.678.678,0,0,1,.688-.669.742.742,0,0,1,.48.2.617.617,0,0,1,.2.462V678.4a.62.62,0,0,1-.331.586A.74.74,0,0,1-262.619,679.076Zm13.464,0a.723.723,0,0,1-.351-.089.611.611,0,0,1-.332-.564V665.693a.619.619,0,0,1,.332-.585.727.727,0,0,1,.35-.088.725.725,0,0,1,.352.089.613.613,0,0,1,.332.565V678.4a.621.621,0,0,1-.332.585A.728.728,0,0,1-249.155,679.073Z" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30.4"
height="30.4"
viewBox="0 0 30.4 30.4"
v-if="name === 'competition'">
<defs>
<clipPath id="competition-a">
<path
fill="currentColor"
d="M72.569-98.466l-1.351-1.351L70.4-99l-1.075-1.075,1.893-1.893,1.351,1.352,1.349-1.349,1.8,1.8-1.075,1.075-.727-.727Z"
transform="translate(-69.324 101.967)" />
</clipPath>
<clipPath id="competition-b">
<path
fill="currentColor"
d="M15.7-145.1A15.217,15.217,0,0,1,.5-160.3a15.217,15.217,0,0,1,15.2-15.2,15.217,15.217,0,0,1,15.2,15.2A15.217,15.217,0,0,1,15.7-145.1Zm0-28.88A13.7,13.7,0,0,0,2.02-160.3,13.7,13.7,0,0,0,15.7-146.62,13.7,13.7,0,0,0,29.38-160.3,13.7,13.7,0,0,0,15.7-173.98Z"
transform="translate(-0.5 175.5)" />
</clipPath>
<clipPath id="competition-c">
<path
fill="currentColor"
d="M60.772-108.94H59.8a2.811,2.811,0,0,1-2.807-2.808v-.259a3.045,3.045,0,0,0-.9-2.1,5.778,5.778,0,0,1-1.63-4.175,5.9,5.9,0,0,1,5.6-5.686,5.781,5.781,0,0,1,4.268,1.624,5.777,5.777,0,0,1,1.786,4.2,5.8,5.8,0,0,1-1.575,3.979,3.346,3.346,0,0,0-.958,2.272v.147a2.81,2.81,0,0,1-2.807,2.807Zm-.485-13.511c-.057,0-.114,0-.171,0a4.362,4.362,0,0,0-4.136,4.2,4.271,4.271,0,0,0,1.2,3.085,4.551,4.551,0,0,1,1.328,3.155v.259A1.289,1.289,0,0,0,59.8-110.46h.972a1.289,1.289,0,0,0,1.287-1.288v-.147a4.858,4.858,0,0,1,1.37-3.312,4.279,4.279,0,0,0,1.163-2.939,4.272,4.272,0,0,0-1.321-3.1,4.273,4.273,0,0,0-2.985-1.2Z"
transform="translate(-54.46 123.971)" />
</clipPath>
<clipPath id="competition-d">
<path
fill="currentColor"
d="M43.673-142.808l1.075-1.075,1.733,1.733-1.075,1.075Zm12.592.658L58-143.883l1.075,1.075-1.733,1.733Zm-5.652-4.163h1.52v2.451h-1.52Z"
transform="translate(-43.673 146.313)" />
</clipPath>
</defs>
<g clip-path="url(#competition-a)" transform="translate(11.956 12.774)">
<path fill="currentColor" d="M64.324-106.967h8.132v5.238H64.324Z" transform="translate(-65.193 106.098)" />
</g>
<g clip-path="url(#competition-b)" transform="translate(0)">
<path fill="currentColor" d="M-4.5-180.5H27.638v32.138H-4.5Z" transform="translate(3.631 179.631)" />
</g>
<g clip-path="url(#competition-c)" transform="translate(9.374 8.951)">
<path fill="currentColor" d="M49.46-128.971H62.85V-112.2H49.46Z" transform="translate(-50.328 128.103)" />
</g>
<g clip-path="url(#competition-d)" transform="translate(7.5 5.07)">
<path fill="currentColor" d="M38.673-151.313H55.81v6.975H38.673Z" transform="translate(-39.542 150.444)" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="31.366"
height="31.369"
viewBox="0 0 31.366 31.369"
v-if="name === 'study_abroad'">
<g transform="translate(-455.636 -125.674)">
<path
fill="currentColor"
d="M485.259,141.939H478.87v-4.647a2.476,2.476,0,0,0-1.43-2.144l-4.828-2.01a2.937,2.937,0,0,0-.714-.184v-2.6a.639.639,0,0,0,.15-.009,4.606,4.606,0,0,1,2.453-.043,2.926,2.926,0,0,0,1.32.285,4.784,4.784,0,0,0,1.5-.257.582.582,0,0,0,.383-.546V126.8a.579.579,0,0,0-.248-.475.585.585,0,0,0-.53-.073,2.867,2.867,0,0,1-1.908.027,5.431,5.431,0,0,0-3.134-.089.571.571,0,0,0-.567-.514.581.581,0,0,0-.582.582v6.7a2.887,2.887,0,0,0-.714.184l-4.828,2.01a2.48,2.48,0,0,0-1.43,2.144v4.65h-6.387a1.744,1.744,0,0,0-1.743,1.743V156.4a.148.148,0,0,0,.006.039c0,.009-.006.016-.006.025a.582.582,0,0,0,.582.582h30.2a.582.582,0,0,0,.582-.582V143.682A1.744,1.744,0,0,0,485.259,141.939ZM471.9,127.365a.773.773,0,0,0,.086,0,4.671,4.671,0,0,1,2.518-.043,3.421,3.421,0,0,0,2.043.224v1.795a2.513,2.513,0,0,1-1.526-.076,5.321,5.321,0,0,0-3.122-.08Zm-8.129,28.511H456.8v-4.065h6.972Zm0-5.226H456.8v-6.969a.582.582,0,0,1,.582-.582h6.39Zm6.969,5.229h-2.322v-6.39h2.322Zm3.489,0H471.9v-6.39h2.325Zm3.482,0h-2.325v-6.39a.582.582,0,0,0,0-1.164h-8.13a.582.582,0,0,0,0,1.164v6.39h-2.325V137.292a1.317,1.317,0,0,1,.714-1.072l4.828-2.01a2.683,2.683,0,0,1,1.7,0l4.827,2.01a1.316,1.316,0,0,1,.714,1.072Zm8.133,0H478.87v-4.065h6.972Zm0-5.223H478.87V143.1h6.389a.582.582,0,0,1,.582.582Z"
transform="translate(0 0)" />
<path fill="currentColor" d="M499.8,183.093" transform="translate(-20.932 -27.214)" />
<path
fill="currentColor"
d="M482.308,145.547a3.486,3.486,0,1,0,3.486,3.486A3.49,3.49,0,0,0,482.308,145.547Zm0,5.811a2.325,2.325,0,1,1,2.325-2.325A2.328,2.328,0,0,1,482.308,151.358Z"
transform="translate(-10.989 -9.419)" />
<path fill="currentColor" d="M485.449,156.593" transform="translate(-14.13 -14.654)" />
<path
fill="currentColor"
d="M486.083,150.019H485.5v-.582a.582.582,0,0,0-1.164,0V150.6a.582.582,0,0,0,.582.582h1.161a.58.58,0,0,0,0-1.161Z"
transform="translate(-13.603 -10.987)" />
<path fill="currentColor" d="M487.656,151.067" transform="translate(-15.176 -12.035)" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="31.389"
height="30.775"
viewBox="0 0 31.389 30.775"
v-if="name === 'degree'">
<g transform="translate(-533.393 -129.452)">
<path
fill="currentColor"
d="M549.088,142.588a.731.731,0,0,1-.2-.029,89.35,89.35,0,0,1-13.486-5.122l-1.588-.756a.732.732,0,0,1,0-1.321l1.588-.756a89.393,89.393,0,0,1,13.485-5.122.726.726,0,0,1,.407,0,89.425,89.425,0,0,1,13.486,5.122l1.588.756a.732.732,0,0,1,0,1.321l-1.588.756a89.363,89.363,0,0,1-13.485,5.122A.723.723,0,0,1,549.088,142.588Zm-13.261-6.568.2.1a88.033,88.033,0,0,0,13.06,4.979,87.942,87.942,0,0,0,13.06-4.979l.2-.1-.2-.095a87.94,87.94,0,0,0-13.06-4.98,87.9,87.9,0,0,0-13.061,4.98Z"
transform="translate(0)" />
<path
fill="currentColor"
d="M551.558,170.916a.732.732,0,0,1-.332-.079l-.239-.122a59.327,59.327,0,0,0-11.3-4.378.732.732,0,0,1-.539-.705V152.49a.733.733,0,0,1,.925-.706,60.8,60.8,0,0,1,11.48,4.438,60.8,60.8,0,0,1,11.481-4.438.731.731,0,0,1,.924.706v13.141a.731.731,0,0,1-.538.705,59.347,59.347,0,0,0-11.3,4.377l-.238.122A.73.73,0,0,1,551.558,170.916Zm-10.943-5.84a60.784,60.784,0,0,1,10.942,4.288,60.819,60.819,0,0,1,10.942-4.288V153.457a59.375,59.375,0,0,0-10.371,4.116l-.238.122a.733.733,0,0,1-.665,0l-.239-.122a59.357,59.357,0,0,0-10.371-4.116Zm11.182-8.154h0Z"
transform="translate(-2.47 -10.688)" />
<path
fill="currentColor"
d="M570.691,168.619a.731.731,0,0,1-.732-.732v-4.51a.732.732,0,1,1,1.463,0v4.51A.732.732,0,0,1,570.691,168.619Z"
transform="translate(-15.684 -15.358)" />
<path
fill="currentColor"
d="M586.528,150.55a.731.731,0,0,1-.732-.732V140.4a.732.732,0,1,1,1.463,0v9.415A.732.732,0,0,1,586.528,150.55Z"
transform="translate(-22.477 -4.384)" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="28.717"
height="28.723"
viewBox="0 0 28.717 28.723"
v-if="name === 'certificate'">
<g transform="translate(270.771 -655.15)">
<path
fill="currentColor"
d="M-267.356,683.873a3.425,3.425,0,0,1-3.415-3.415V658.57a3.425,3.425,0,0,1,3.415-3.414h21.888a3.423,3.423,0,0,1,3.414,3.414v21.888a3.425,3.425,0,0,1-3.414,3.415h-21.888Zm0-27.359a2.062,2.062,0,0,0-2.057,2.056v21.888a2.062,2.062,0,0,0,2.057,2.057h21.888a2.061,2.061,0,0,0,2.056-2.057V658.57a2.061,2.061,0,0,0-2.056-2.056Z" />
<path
fill="currentColor"
d="M-245.461,680.752h-21.895l-.173,0a3.252,3.252,0,0,1-3.242-3.06v-.97a3.252,3.252,0,0,1,3.242-3.051l.166,0h21.9l.174,0a3.25,3.25,0,0,1,3.24,3.059v.972a3.251,3.251,0,0,1-3.242,3.051Zm-21.9-5.89a1.989,1.989,0,0,0-2.052,1.851v.988a1.971,1.971,0,0,0,1.965,1.862l21.985,0a1.99,1.99,0,0,0,2.051-1.852v-.984a1.97,1.97,0,0,0-1.962-1.862Zm9.788-8.822a.722.722,0,0,1-.508-.207l-2.767-2.8-2.77,2.8a.737.737,0,0,1-.514.205.759.759,0,0,1-.24-.039.6.6,0,0,1-.432-.559v-9.7a.637.637,0,0,1,.637-.594h6.612a.65.65,0,0,1,.678.6v9.691a.605.605,0,0,1-.43.554.745.745,0,0,1-.245.041Zm-3.268-4.508a.722.722,0,0,1,.508.207l2.088,2.117v-7.512h-5.209v7.511l2.091-2.117a.722.722,0,0,1,.506-.206Z" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30.135"
height="27.862"
viewBox="0 0 30.135 27.862"
v-if="name === 'career'">
<g transform="translate(-604.875 -130.921)">
<path
fill="currentColor"
d="M626.624,160.312a2.835,2.835,0,0,1-2.827-2.827V153.91a.7.7,0,0,1,.2-.489.688.688,0,0,1,.489-.2h9.723a.69.69,0,0,1,.691.691v3.576a2.834,2.834,0,0,1-2.827,2.826Zm-1.445-2.826a1.446,1.446,0,0,0,1.445,1.444h5.452a1.45,1.45,0,0,0,1.445-1.443V154.6h-8.341Z"
transform="translate(-9.467 -11.156)" />
<path
fill="currentColor"
d="M610.427,158.783a5.565,5.565,0,0,1-5.552-5.552V140.678a5.569,5.569,0,0,1,5.546-5.554h3.437V134.1a3.192,3.192,0,0,1,3.183-3.184h5.814a3.192,3.192,0,0,1,3.184,3.184v1.02h3.419a5.568,5.568,0,0,1,5.552,5.554v12.552a5.566,5.566,0,0,1-5.553,5.552H610.427Zm-4.169-5.552a4.183,4.183,0,0,0,4.161,4.165h19.04a4.181,4.181,0,0,0,4.17-4.164v-9.786H606.257Zm4.161-16.724a4.184,4.184,0,0,0-4.161,4.171v1.385h27.371v-1.385a4.182,4.182,0,0,0-4.169-4.171Zm6.621-4.2a1.806,1.806,0,0,0-1.8,1.8l.015,1h9.4v-1a1.807,1.807,0,0,0-1.8-1.8Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" v-if="name === 'more'">
<g transform="translate(44 -79.89)">
<path
fill="currentColor"
d="M-23.258,81.028A14.958,14.958,0,0,0-29,79.89a15,15,0,0,0-15,15,15,15,0,0,0,15,15,15,15,0,0,0,15-15,14.952,14.952,0,0,0-1.139-5.742.75.75,0,0,0-.974-.391.75.75,0,0,0-.412.965A13.457,13.457,0,0,1-15.5,94.89,13.5,13.5,0,0,1-29,108.39a13.5,13.5,0,0,1-13.5-13.5A13.5,13.5,0,0,1-29,81.39a13.466,13.466,0,0,1,5.168,1.024A.75.75,0,0,0-22.867,82a.75.75,0,0,0-.391-.974ZM-36.5,96.39a1.5,1.5,0,0,0,1.3-.75,1.5,1.5,0,0,0,0-1.5,1.5,1.5,0,0,0-1.3-.75,1.5,1.5,0,0,0-1.5,1.5,1.5,1.5,0,0,0,1.5,1.5Zm7.5,0a1.5,1.5,0,0,0,1.3-.75,1.5,1.5,0,0,0,0-1.5,1.5,1.5,0,0,0-1.3-.75,1.5,1.5,0,0,0-1.5,1.5,1.5,1.5,0,0,0,1.5,1.5Zm7.5,0a1.5,1.5,0,0,0,1.3-.75,1.5,1.5,0,0,0,0-1.5,1.5,1.5,0,0,0-1.3-.75,1.5,1.5,0,0,0-1.5,1.5,1.5,1.5,0,0,0,1.5,1.5Zm0,0"
transform="translate(0)" />
</g>
</svg>
</template>
app/components/home/partner.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/home/personal.vue 0 → 100644
浏览文件 @ 701aab24
<script setup>
import IconMore from '../icons/IconMore.vue'
const items = ref([
{
name: '国际留学',
items: [
{
colIndex: 1,
name: '雪城大学',
href: 'https://syracuse-plus.ezijing.com/',
desc: ['计算机工程硕士', '计算机科学硕士', '电气工程硕士'],
},
{ colIndex: 2, name: '纽约州立大学石溪分校', href: 'https://sbu-plus.ezijing.com/', desc: ['金融学硕士'] },
{ colIndex: 3, name: '斯蒂文斯理工学院', href: 'https://sit-plus.ezijing.com/', desc: ['工程管理硕士'] },
{
colIndex: 2,
name: '帕克大学',
href: 'https://park-plus.ezijing.com/',
desc: ['工商管理硕士', '信息系统与商业数据分析硕士'],
},
{ colIndex: 1, name: '德保罗大学', href: 'https://depaul-plus.ezijing.com/', desc: ['金融学硕士'] },
],
moreText: '了解更多留学项目',
moreHref: '/studyAbroad',
},
{
name: '国际学位',
items: [
{ name: '教育学硕士(儿童)MED', href: 'https://cu.ezijing.com/' },
{ name: '教育学硕士(家庭)MED', href: 'https://cuw.ezijing.com/' },
{ name: '数字时代领航人才EMBA', href: 'https://marywood.ezijing.com/' },
{ name: '瑞士酒店管理大学MBA', href: 'https://shms.ezijing.com/' },
{ name: '科创企业家学者项目DBA', href: 'https://ppai.ezijing.com/' },
],
groupItems: [
{
name: '硕士',
items: [
{ name: '威斯康星协和大学家庭教育硕士', href: 'https://cu.ezijing.com/' },
{ name: '康博斯维尔大学教育学硕士', href: 'https://cuw.ezijing.com/' },
],
},
{
name: 'MBA',
items: [
{
name: '玛丽伍德大学综合管理方向MBA',
href: 'https://marywood.ezijing.com/',
},
{ name: '瑞士酒店管理大学MBA', href: 'https://shms.ezijing.com/' },
],
},
{
name: 'DBA',
items: [{ name: '科创企业家学者项目DBA', href: 'https://ppai.ezijing.com/' }],
},
{
name: 'EMBA',
items: [{ name: '玛丽伍德大学数字时代领航人才EMBA', href: 'https://marywood.ezijing.com/' }],
},
],
moreText: '了解更多学位项目',
moreHref: '/internationalDegree',
},
{
name: '职业技能',
items: [
{
name: '人工智能通识应用',
href: 'https://eec.ezijing.com/AI',
items: [{ name: '零基础AI工具课' }, { name: '学ChatGPT等工具职场实操' }, { name: '适配全行业提效职员' }],
},
{
name: '智能数据分析与实战应用',
href: 'https://eec.ezijing.com/product',
items: [{ name: '数据可视化实操课' }, { name: 'Python/Tableau+真实案例' }, { name: '适配市场/运营/财务岗' }],
},
{
name: '智能数据营销与实战应用',
href: 'https://eec.ezijing.com/',
items: [{ name: 'AI营销升级课' }, { name: '智能画像+平台投放' }, { name: '适配营销/新媒体从业者' }],
},
{
name: '私人财富风险管理课程',
href: 'https://prp.ezijing.com/',
items: [{ name: '资产风控课' }, { name: '风险识别+避险策略' }, { name: '适配高净值人群/理财顾问' }],
},
],
moreText: '了解更多职业技能',
moreHref: 'https://eec.ezijing.com',
},
{
name: '就业服务',
items: [{ name: '1V1定制化' }, { name: '全程辅导' }, { name: '内推面试' }, { name: '内推入职' }],
moreText: '了解更多就业服务',
moreHref: '/',
},
])
const colList = computed(() => {
const grouped = items.value[0].items.reduce((acc, item) => {
const key = item.colIndex
if (!acc[key]) {
acc[key] = []
}
acc[key].push(item)
return acc
}, {})
return Object.values(grouped)
})
</script>
<template>
<div class="home-personal" id="personal">
<div class="home-personal-inner">
<div class="home-personal-title">
<h2>个人客户</h2>
</div>
<div class="home-personal-main">
<div v-for="(item, index) in items" :key="index" class="home-personal-item">
<div class="home-personal-item-content">
<h3>{{ item.name }}</h3>
<ul>
<li v-for="subItem in item.items" :key="subItem.name">{{ subItem.name }}</li>
</ul>
</div>
<div class="home-personal-item-content-hover">
<h3>{{ item.name }}</h3>
<div class="box1" v-if="index === 0">
<div v-for="items in colList" :key="items.name">
<dl v-for="source in items" :key="source.name">
<dt>
<a :href="source.href" target="_blank">{{ source.name }}</a>
</dt>
<dd>
<ul>
<li v-for="item in source.desc" :key="item.name">
<a :href="source.href" target="_blank">{{ item }}</a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="box2" v-if="index === 1">
<dl v-for="source in item.groupItems" :key="source.name">
<dt>{{ source.name }}</dt>
<dd>
<ul>
<li v-for="item in source.items" :key="item.name">
<a :href="item.href" target="_blank">{{ item.name }}</a>
</li>
</ul>
</dd>
</dl>
</div>
<div class="box3" v-if="index === 2">
<dl v-for="source in item.items" :key="source.name">
<dt>
<a :href="source.href" target="_blank">{{ source.name }}</a>
</dt>
<dd>
<ul>
<li v-for="item in source.items" :key="item.name">
<a :href="source.href" target="_blank">{{ item.name }}</a>
</li>
</ul>
</dd>
</dl>
</div>
<div class="box4" v-if="index === 3">
<h4>8步就业辅导体系覆盖求职全流程</h4>
<p>精准解决核心问题，为求职者提供科学、高效的就业支持</p>
<div class="ul-box">
<ul>
<li>1. 职业测评</li>
<li>2. 职业规划</li>
<li>3. 简历设计</li>
<li>4. 网申辅导</li>
</ul>
<ul>
<li>5. 面试辅导</li>
<li>6. 岗位内推</li>
<li>7. offer 分析</li>
<li>8. 试用期辅导</li>
</ul>
</div>
</div>
<div class="more">
<a :href="item.moreHref" target="_blank"
>{{ item.moreText }}
<IconMore />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.home-personal {
scroll-margin-top: 170px;
padding-bottom: 90px;
background: #fff;
.home-personal-inner {
max-width: 1300px;
margin: 0 auto;
.home-personal-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-personal-main {
display: flex;
justify-content: space-between;
gap: 16px;
}
.home-personal-item {
flex: 1;
position: relative;
height: 400px;
color: #fff;
transition: flex 0.3s ease;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
border-radius: 12px;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
&.active,
&:hover {
color: #333;
flex: 0 0 620px;
.home-personal-item-content-hover {
display: block;
}
.home-personal-item-content {
display: none;
}
}
&:nth-child(1) {
background-image: url('~/assets/images/home/personal_bg_1.png');
&:hover {
background-image: url('~/assets/images/home/personal_bg_1_hover.png');
}
}
&:nth-child(2) {
background-image: url('~/assets/images/home/personal_bg_2.png');
&:hover {
background-image: url('~/assets/images/home/personal_bg_2_hover.png');
}
}
&:nth-child(3) {
background-image: url('~/assets/images/home/personal_bg_3.png');
&:hover {
background-image: url('~/assets/images/home/personal_bg_3_hover.png');
}
}
&:nth-child(4) {
background-image: url('~/assets/images/home/personal_bg_4.png');
&:hover {
background-image: url('~/assets/images/home/personal_bg_4_hover.png');
}
}
.home-personal-item-content {
padding: 65px 20px 0;
h3 {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
line-height: 1;
}
ul {
margin-top: 40px;
}
li {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 16px;
line-height: 30px;
white-space: nowrap;
}
}
.home-personal-item-content-hover {
display: none;
width: 620px;
height: 400px;
padding: 65px 40px 0;
h3 {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
line-height: 1;
margin-bottom: 40px;
}
}
.more {
position: absolute;
bottom: 50px;
width: 240px;
height: 32px;
background: #ffffff;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 33px;
font-size: 14px;
a {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
}
}
.box1 {
margin-top: -10px;
display: flex;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
flex-wrap: wrap;
dl + dl {
margin-top: 15px;
}
dt {
font-size: 18px;
font-weight: bold;
line-height: 1;
color: var(--main-color);
margin-bottom: 5px;
}
li {
font-size: 16px;
line-height: 30px;
}
}
.box2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 0;
dt {
font-size: 16px;
font-weight: bold;
line-height: 1;
color: var(--main-color);
margin-bottom: 10px;
}
li {
font-size: 16px;
line-height: 26px;
}
}
.box3 {
margin-top: -20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 0;
dt {
font-size: 16px;
font-weight: bold;
line-height: 1;
color: var(--main-color);
margin-bottom: 10px;
}
li {
font-size: 14px;
line-height: 20px;
}
}
.box4 {
h4 {
margin-bottom: 10px;
font-size: 18px;
line-height: 1;
color: var(--main-color);
}
p {
font-size: 16px;
font-weight: bold;
line-height: 1;
}
.ul-box {
margin-top: 20px;
display: flex;
gap: 80px;
}
li {
font-size: 16px;
line-height: 24px;
}
}
}
</style>
app/components/home/projectNotice.vue
浏览文件 @ 701aab24
<template>
<div class="home-news">
<AppCard :title="$t('menu.notice')" titleAlign="center">
<template #title>
<nuxt-link to="/about/news">{{ $t('menu.notice') }}</nuxt-link>
......@@ -27,8 +28,8 @@
<div class="right-content">
<ul>
<template v-for="(item, index) in listData" :key="index">
<AppLink :data="item" :to="`/about/news/${item.id}`">
<li>
<AppLink :data="item" :to="`/about/news/${item.id}`">
<div class="time-block">
<div class="m-time">
{{ formatMD(item.start_time * 1000) }}
......@@ -41,13 +42,14 @@
<div class="text">{{ item.title }}</div>
<div class="desc">{{ item.abstract }}</div>
</div>
</li>
</AppLink>
</li>
</template>
</ul>
</div>
</div>
</AppCard>
</div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
......@@ -106,17 +108,22 @@ onMounted(() => {
fetchActivityList()
})
</script>
<style lang="scss" scoped>
.news-content {
<style lang="scss">
.home-news {
max-width: 1300px;
padding-bottom: 90px;
margin: 0 auto;
.news-content {
margin-top: 15px;
display: flex;
.left-content {
width: 600px;
flex: 0 0 650px;
height: 282px;
background: #ffffff;
box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03);
padding: 40px 25px 40px 38px;
display: flex;
.tit {
font-size: 34px;
font-weight: 500;
......@@ -125,20 +132,15 @@ onMounted(() => {
padding-top: 29px;
text-align: center;
}
.list {
overflow: hidden;
height: 100%;
:deep(.swiper) {
height: 100%;
}
:deep(.swiper-wrapper) {
.swiper {
height: 100%;
}
:deep(.swiper-slide) {
height: auto;
display: flex;
align-items: center;
}
.swiper-slide-active {
.li {
border-bottom: 1px solid #999999;
......@@ -146,15 +148,15 @@ onMounted(() => {
}
.li {
width: 549px;
padding: 0 30px;
// width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-bottom: 30px;
box-sizing: border-box;
padding-left: 12px;
.time-block {
width: 70px;
flex: 0 0 70px;
height: 70px;
background: #aa1941;
border-radius: 5px;
......@@ -170,6 +172,7 @@ onMounted(() => {
text-align: center;
opacity: 0.8;
}
.t-time {
font-size: 16px;
font-weight: normal;
......@@ -179,9 +182,9 @@ onMounted(() => {
text-align: center;
}
}
.txt {
margin-left: 33px;
width: 390px;
font-size: 18px;
font-weight: 400;
color: #424242;
......@@ -195,25 +198,31 @@ onMounted(() => {
}
}
}
.right-content {
margin-left: 45px;
flex: 1;
height: 282px;
ul {
li+li {
margin-top: 35px;
}
li {
padding: 9px 0 22px 0;
a {
display: flex;
align-items: center;
cursor: pointer;
&:nth-child(1) {
border: none;
}
&:hover {
.content_con {
.text {
color: #aa1941;
}
.desc {
color: #aa1941;
}
......@@ -221,10 +230,12 @@ onMounted(() => {
.time-block {
background: #aa1941;
.m-time {
color: #ffffff;
opacity: 1;
}
.t-time {
color: #ffffff;
opacity: 1;
......@@ -242,12 +253,14 @@ onMounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
.m-time {
font-size: 20px;
font-weight: normal;
color: #777777;
opacity: 0.8;
}
.t-time {
font-size: 16px;
font-weight: normal;
......@@ -256,8 +269,9 @@ onMounted(() => {
opacity: 0.8;
}
}
.content_con {
width: 459px;
flex: 1;
margin-left: 15px;
.text {
......@@ -271,6 +285,7 @@ onMounted(() => {
overflow: hidden;
// margin-bottom: 11px;
}
.desc {
text-align: left;
......@@ -287,5 +302,6 @@ onMounted(() => {
}
}
}
}
}
</style>
app/components/home/school.vue 0 → 100644
浏览文件 @ 701aab24
<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>
app/components/home/schoolIcons.vue 0 → 100644
浏览文件 @ 701aab24
<script setup>
defineProps({
name: { type: Number, required: true },
})
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 1">
<circle fill="#fff" cx="27" cy="27" r="27" />
<path
fill="currentColor"
d="M377.973,472.3a3.459,3.459,0,0,1-1.04-6.735V462.6a4.065,4.065,0,0,1-3.04-3.909,4,4,0,0,1,.119-.975l-3.416-2.391a3.432,3.432,0,0,1-1.782.494,3.463,3.463,0,1,1,3.259-2.294l3.131,2.192a4.028,4.028,0,0,1,5.408-.032l3.228-2.26a3.459,3.459,0,0,1,3.29-4.523h.443v.029a3.459,3.459,0,0,1-.44,6.89h0a3.478,3.478,0,0,1-1.875-.552l-3.432,2.4a4.032,4.032,0,0,1-2.572,4.83V465.6a3.459,3.459,0,0,1-1.216,6.7Zm.065-4.594a1.136,1.136,0,1,0,1.137,1.136A1.138,1.138,0,0,0,378.038,467.705Zm-.112-10.726a1.711,1.711,0,1,0,1.711,1.71A1.713,1.713,0,0,0,377.926,456.979Zm9.205-5.757a1.137,1.137,0,1,0,1.137,1.136A1.138,1.138,0,0,0,387.131,451.222Zm-18.313,0a1.137,1.137,0,1,0,1.137,1.136A1.138,1.138,0,0,0,368.818,451.222Z"
transform="translate(-350.637 -430.33)" />
<g transform="translate(14.714 12.849)">
<path
fill="currentColor"
d="M398.759,435.787a1.377,1.377,0,0,1-.691-2.569l6.351-3.689a1.378,1.378,0,0,1,1.372-.007l5.979,3.4a1.377,1.377,0,1,1-1.369,2.39l-5.283-3-5.667,3.291a1.378,1.378,0,0,1-.69.187h0Z"
transform="translate(-392.308 -429.343)" />
<g transform="translate(0 12.911)">
<path
fill="currentColor"
d="M382.879,499.349a1.38,1.38,0,0,1-.685-.183l-5.985-3.435a1.381,1.381,0,0,1-.692-1.191l-.023-7.8a1.377,1.377,0,0,1,2.755-.007l.02,7.008,5.3,3.039a1.378,1.378,0,0,1-.687,2.572Z"
transform="translate(-375.495 -485.283)" />
<path
fill="currentColor"
d="M447.93,499.041a1.377,1.377,0,0,1-.671-2.58l5.29-3.035.021-7.009a1.378,1.378,0,1,1,2.755.008l-.022,7.662a1.372,1.372,0,0,1-.679,1.342l-5.5,3.194a1.344,1.344,0,0,1-.348.144l-.153.088a1.371,1.371,0,0,1-.695.188Z"
transform="translate(-430.082 -485.043)" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 2">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(14.195 12)">
<path
fill="currentColor"
d="M675.6,261.725a4.476,4.476,0,0,1-4.458-4.457V237.114a4.475,4.475,0,0,1,4.457-4.458h16.8a4.476,4.476,0,0,1,4.458,4.457v20.155a4.477,4.477,0,0,1-4.458,4.458Zm0-26.872a2.268,2.268,0,0,0-2.261,2.261v20.153a2.268,2.268,0,0,0,2.261,2.26H692.4a2.266,2.266,0,0,0,2.259-2.261V237.114a2.267,2.267,0,0,0-2.26-2.26Z"
transform="translate(-671.143 -232.656)" />
<path
fill="currentColor"
d="M686.547,247.6l-.017-.006a1.1,1.1,0,0,1-.36-.1l-2.152-1.012-2.152,1.012a1.076,1.076,0,0,1-.467.1,1.1,1.1,0,0,1-.995-.631,1.085,1.085,0,0,1-.095-.605l.3-2.359-1.628-1.734a1.1,1.1,0,0,1,.593-1.831l2.34-.449,1.145-2.085a1.1,1.1,0,0,1,.963-.569,1.111,1.111,0,0,1,.528.135,1.093,1.093,0,0,1,.433.433l1.146,2.086,2.34.449a1.1,1.1,0,0,1,.592,1.833L687.432,244l.3,2.36a1.1,1.1,0,0,1-.445,1.03,1.078,1.078,0,0,1-.639.208Zm-2.53-3.431a1.083,1.083,0,0,1,.469.1l.809.382-.112-.889a1.1,1.1,0,0,1,.287-.89l.612-.649-.877-.167a1.1,1.1,0,0,1-.758-.55l-.431-.785-.429.78a1.1,1.1,0,0,1-.759.55l-.878.167.613.654a1.094,1.094,0,0,1,.29.889l-.113.89.81-.382A1.086,1.086,0,0,1,684.017,244.167Z"
transform="translate(-671.143 -232.656)" />
<path
fill="currentColor"
d="M677.948,252.3a1.1,1.1,0,0,1-.809-1.841,1.083,1.083,0,0,1,.762-.355h12.163a1.1,1.1,0,0,1,.071,2.2H677.972l-.024-.566Z"
transform="translate(-671.143 -232.656)" />
<path
fill="currentColor"
d="M677.948,256.35a1.1,1.1,0,0,1-.025-2.2h12.125a1.106,1.106,0,0,1,1.075,1.146,1.093,1.093,0,0,1-1.051,1.05H677.948Z"
transform="translate(-671.143 -232.656)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 3">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(14.411 15.001)">
<path
fill="currentColor"
d="M288.288,400.211a.838.838,0,1,1,0-1.676h23.5a.838.838,0,0,1,0,1.676Z"
transform="translate(-287.449 -398.535)" />
<path
fill="currentColor"
d="M288.288,425.416a.837.837,0,0,1-.592-1.43.828.828,0,0,1,.592-.246h23.5a.838.838,0,0,1,0,1.676Z"
transform="translate(-287.449 -401.418)" />
<path
fill="currentColor"
d="M290.941,424.885a.84.84,0,0,1-.839-.838v-4.109a.839.839,0,1,1,1.677,0v4.113A.84.84,0,0,1,290.941,424.885Z"
transform="translate(-287.753 -400.887)" />
<path
fill="currentColor"
d="M288.288,418.952a.84.84,0,0,1-.839-.839v-4.7a.839.839,0,0,1,.839-.838h4.7a.838.838,0,0,1,.838.838v4.7a.837.837,0,0,1-.838.839Zm3.861-1.676v-3.023h-3.022v3.023Zm5.538-3.023a.839.839,0,0,1-.839-.839v-4.7a.839.839,0,0,1,.837-.839h4.7a.838.838,0,0,1,.839.839v4.7a.836.836,0,0,1-.839.839Zm3.862-1.676v-3.023h-3.023v3.023Zm5.537-3.023a.84.84,0,0,1-.838-.839v-4.695a.84.84,0,0,1,.838-.842h4.7a.84.84,0,0,1,.838.839v4.7a.84.84,0,0,1-.838.839Zm3.861-1.676v-3.023h-3.023v3.023Z"
transform="translate(-287.449 -399.066)" />
<path
fill="currentColor"
d="M312.166,423.671a.839.839,0,0,1-.837-.838V409.322a.838.838,0,1,1,1.676,0v13.512A.84.84,0,0,1,312.166,423.671Z"
transform="translate(-290.181 -399.673)" />
<path
fill="currentColor"
d="M290.941,410.141a.84.84,0,0,1-.839-.839v-.587a.836.836,0,0,1,.77-.834l.069,0a.839.839,0,0,1,.839.838v.587A.84.84,0,0,1,290.941,410.141Zm8.812-4.7a.839.839,0,0,1-.838-.838v-.587a.83.83,0,0,1,.245-.593.838.838,0,0,1,1.43.593v.587A.839.839,0,0,1,299.752,405.442Zm-8.812,0a.84.84,0,0,1-.839-.838v-.587a.838.838,0,0,1,.839-.839.84.84,0,0,1,.839.839v.587A.84.84,0,0,1,290.941,405.442Z"
transform="translate(-287.753 -399.066)" />
<path
fill="currentColor"
d="M301.558,424.279a.839.839,0,0,1-.838-.838v-8.813a.838.838,0,1,1,1.676,0v8.813A.839.839,0,0,1,301.558,424.279Z"
transform="translate(-288.967 -400.28)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 4">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(12.692 12)">
<path
fill="currentColor"
d="M309.758,407.512,297.922,396.9a3.086,3.086,0,0,0-4.024,0l-11.835,10.6a2.406,2.406,0,0,0-.633,2.82,2.859,2.859,0,0,0,2.643,1.605h23.672a2.885,2.885,0,0,0,2.646-1.6A2.407,2.407,0,0,0,309.758,407.512Zm-1.362,2.07a.68.68,0,0,1-.656.4H284.073a.681.681,0,0,1-.654-.4.575.575,0,0,1,.151-.685l-.755-.695.755.694h0L295.4,398.283a.765.765,0,0,1,1,0l11.838,10.611A.572.572,0,0,1,308.4,409.582Z"
transform="translate(-281.214 -396.155)" />
<path
fill="currentColor"
d="M284.686,424.377a1.093,1.093,0,0,1-1.074-1.11v-8.885a1.075,1.075,0,1,1,2.148,0v8.886a1.1,1.1,0,0,1-1.074,1.11Z"
transform="translate(-281.214 -396.155)" />
<path
fill="currentColor"
d="M291.953,424.377a1.093,1.093,0,0,1-1.074-1.11v-5.331a1.074,1.074,0,1,1,2.146,0h0v5.331A1.1,1.1,0,0,1,291.953,424.377Z"
transform="translate(-281.214 -396.155)" />
<path
fill="currentColor"
d="M307.181,424.377a1.093,1.093,0,0,1-1.074-1.11v-8.885a1.091,1.091,0,0,1,1.073-1.11h0a1.092,1.092,0,0,1,1.072,1.11h0v8.886a1.1,1.1,0,0,1-1.072,1.11Z"
transform="translate(-281.214 -396.155)" />
<path
fill="currentColor"
d="M299.914,424.377a1.093,1.093,0,0,1-1.074-1.11v-5.331a1.074,1.074,0,1,1,2.146,0h0v5.331A1.1,1.1,0,0,1,299.914,424.377Z"
transform="translate(-281.214 -396.155)" />
<path
fill="currentColor"
d="M308.6,425.593H283.1a1.112,1.112,0,0,1,0-2.222h25.5a1.11,1.11,0,0,1,0,2.22Z"
transform="translate(-281.214 -396.155)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 5">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(13.336 13)">
<path
fill="currentColor"
d="M729.718,310.368a1.247,1.247,0,0,1-1.216-.965,12.811,12.811,0,0,1,9.292-15.394,1.249,1.249,0,1,1,.631,2.418,10.326,10.326,0,0,0-7.488,12.407,1.25,1.25,0,0,1-.934,1.5A1.217,1.217,0,0,1,729.718,310.368Z"
transform="translate(-727.108 -290.622)" />
<path
fill="currentColor"
d="M741.04,319.357a12.845,12.845,0,0,1-8.194-2.966,1.25,1.25,0,0,1,1.59-1.93,10.307,10.307,0,0,0,14.423-1.206,1.25,1.25,0,1,1,1.889,1.639A12.818,12.818,0,0,1,741.04,319.357Z"
transform="translate(-727.108 -290.622)" />
<path
fill="currentColor"
d="M752.65,307.714h0a1.25,1.25,0,0,1-1.25-1.25,10.383,10.383,0,0,0-6.12-9.46,1.25,1.25,0,1,1,1.026-2.28,12.886,12.886,0,0,1,7.594,11.74A1.25,1.25,0,0,1,752.65,307.714Z"
transform="translate(-727.108 -290.622)" />
<path
fill="currentColor"
d="M751.245,314.59a4.085,4.085,0,1,1,4.084-4.085A4.089,4.089,0,0,1,751.245,314.59Zm0-5.67a1.585,1.585,0,1,0,1.584,1.585A1.587,1.587,0,0,0,751.245,308.92Z"
transform="translate(-727.108 -290.622)" />
<path
fill="currentColor"
d="M731.193,316.7a4.085,4.085,0,1,1,4.084-4.085A4.09,4.09,0,0,1,731.193,316.7Zm0-5.67a1.585,1.585,0,1,0,1.584,1.585A1.587,1.587,0,0,0,731.193,311.026Z"
transform="translate(-727.108 -290.622)" />
<path
fill="currentColor"
d="M742.29,298.791a4.084,4.084,0,1,1,4.084-4.084A4.089,4.089,0,0,1,742.29,298.791Zm0-5.669a1.584,1.584,0,1,0,1.584,1.585A1.587,1.587,0,0,0,742.29,293.122Z"
transform="translate(-727.108 -290.622)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 6">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(12.065 13)">
<path
fill="currentColor"
d="M684.953,311.45a3.248,3.248,0,0,1-3.239-3.238V291a3.248,3.248,0,0,1,3.238-3.239h21.665A3.238,3.238,0,0,1,709.851,291v17.211a3.248,3.248,0,0,1-3.24,3.239Zm0-21.378a.928.928,0,0,0-.927.927v17.212a.928.928,0,0,0,.927.926h21.663a.928.928,0,0,0,.926-.927L707.537,291a.928.928,0,0,0-.927-.926Z"
transform="translate(-681.714 -287.759)" />
<path
fill="currentColor"
d="M686.4,315.14a1.157,1.157,0,0,1-.045-2.313h18.788a1.157,1.157,0,0,1,.023,2.313h-18.74l-.026-.567Z"
transform="translate(-681.714 -287.759)" />
<path
fill="currentColor"
d="M694.446,306.828a2.043,2.043,0,0,1-1.957-2.636l-4.83-5.961a2.046,2.046,0,1,1,1.481-3.571,2.048,2.048,0,0,1,.432,2.519l2.131,2.61.7.888,1.692,2.087a2.025,2.025,0,0,1,.348-.03,2.068,2.068,0,0,1,1.08.3l4.128-3.34.894-.711,1.176-.95a2.049,2.049,0,1,1,1.41,1.631l-6.66,5.366A2.049,2.049,0,0,1,694.446,306.828Z"
transform="translate(-681.714 -287.759)" />
<path
fill="currentColor"
d="M703.732,305.239A2.228,2.228,0,0,1,701.511,303a2.172,2.172,0,0,1,.105-.678l-3.338-3.082a2.2,2.2,0,0,1-1.153.325,2.246,2.246,0,0,1-1.313-.427l-5.8,3.774c0,.033,0,.066,0,.1a2.234,2.234,0,1,1-1.123-1.937l6.024-3.914a2.229,2.229,0,0,1,4.451.137l3.826,3.548a2.229,2.229,0,0,1,.547-.068h.322l.013.027a2.229,2.229,0,0,1-.334,4.433Z"
transform="translate(-681.714 -287.759)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 7">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(9.243 10)">
<path
fill="currentColor"
d="M300.707,426.11a16.975,16.975,0,1,1,16.977-16.975,17.059,17.059,0,0,1-16.977,16.975Zm0-31.283a15.192,15.192,0,1,0,.1.006Z"
transform="translate(-283.734 -392.161)" />
<path
fill="currentColor"
d="M299.967,419.206a3.23,3.23,0,0,1-3.208-3.212v-.254a2.488,2.488,0,0,0-.746-1.729,6.167,6.167,0,0,1,4.186-10.45l.266-.006a6.163,6.163,0,0,1,4.482,10.387,2.79,2.79,0,0,0-.816,1.918v.133a3.23,3.23,0,0,1-3.213,3.212Zm.324-13.24a3.813,3.813,0,0,0-3.6,3.672,3.774,3.774,0,0,0,1.05,2.682,4.855,4.855,0,0,1,1.432,3.411v.26a.8.8,0,0,0,.8.8h.951a.8.8,0,0,0,.8-.8v-.145a5.2,5.2,0,0,1,1.473-3.567,3.757,3.757,0,0,0-2.74-6.314l.123.114-.253-.07.123-.045h-.154Z"
transform="translate(-283.472 -392.017)" />
<path
fill="currentColor"
d="M291.954,401.76l1.7-1.706,2.351,2.352-1.706,1.706Zm12.336.645,2.352-2.352,1.707,1.706L306,404.111Zm-5.347-1.215v-3.325h2.413v3.325Z"
transform="translate(-283.172 -391.284)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 8">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(10.168 10)">
<path
fill="currentColor"
d="M301.924,424.337a11.926,11.926,0,1,1,11.926-11.926A11.938,11.938,0,0,1,301.924,424.337Zm-4.674-5.31a4.876,4.876,0,0,0,3.777,3.431v-3.431Zm5.569,3.431a4.884,4.884,0,0,0,3.777-3.433h-3.777Zm5.59-3.276a6.68,6.68,0,0,1-.5,1.4,10.147,10.147,0,0,0,1.29-1.126A4.723,4.723,0,0,0,308.409,419.182Zm-13.761.277a10.1,10.1,0,0,0,1.288,1.124,6.714,6.714,0,0,1-.5-1.4A4.815,4.815,0,0,0,294.648,419.459Zm-2.818-6.15a10.069,10.069,0,0,0,1.665,4.723,6.528,6.528,0,0,1,1.773-.652v-4.071Zm16.748,4.069a6.59,6.59,0,0,1,1.775.653,10.082,10.082,0,0,0,1.664-4.722h-3.439Zm-1.791-.144v-3.925h-3.968v3.925Zm-5.76,0v-3.925H297.06v3.925Zm10.99-5.718a10.058,10.058,0,0,0-1.665-4.724,6.535,6.535,0,0,1-1.774.652v4.072Zm-5.23,0V407.59h-3.968v3.926Zm-5.76,0V407.59H297.06v3.926Zm-5.759,0v-4.071a6.529,6.529,0,0,1-1.773-.652,10.069,10.069,0,0,0-1.665,4.723ZM306.6,405.8a4.879,4.879,0,0,0-3.777-3.432V405.8Zm-5.569,0v-3.432a4.879,4.879,0,0,0-3.777,3.432Zm6.884-1.554a6.572,6.572,0,0,1,.5,1.4,4.876,4.876,0,0,0,.79-.279A10.026,10.026,0,0,0,307.911,404.244Zm-13.263,1.121a4.826,4.826,0,0,0,.791.28,6.7,6.7,0,0,1,.5-1.4A10.277,10.277,0,0,0,294.648,405.365Z"
transform="translate(-285.623 -395.093)" />
<path
fill="currentColor"
d="M287.9,420.489a2.277,2.277,0,0,1-1.495-4,16.035,16.035,0,0,1,6.921-17.628.866.866,0,1,1,.927,1.463,14.176,14.176,0,0,0-6.64,12.082,14.033,14.033,0,0,0,.444,3.531,2.291,2.291,0,0,1,1.685.935,2.277,2.277,0,0,1-1.842,3.614Zm-.073-2.825a.569.569,0,0,0-.438.325.654.654,0,0,0-.044.231.554.554,0,1,0,.769-.514.563.563,0,0,0-.217-.042Z"
transform="translate(-285.623 -395.093)" />
<path
fill="currentColor"
d="M301.926,428.467a16.054,16.054,0,0,1-7.437-1.836.864.864,0,0,1,.4-1.633.857.857,0,0,1,.41.105,14.269,14.269,0,0,0,13.782-.3,14.1,14.1,0,0,0,2.835-2.15,2.276,2.276,0,1,1,2.045,1.279,2.247,2.247,0,0,1-.741-.125,15.774,15.774,0,0,1-3.271,2.5,16.011,16.011,0,0,1-8.019,2.157Zm11.965-7.358a.554.554,0,0,0-.483.617.606.606,0,0,0,.072.208.576.576,0,0,0,.492.281.658.658,0,0,0,.267-.08.554.554,0,0,0-.28-1.031Z"
transform="translate(-285.623 -395.093)" />
<path
fill="currentColor"
d="M317.093,412.7a.858.858,0,0,1-.863-.839,14.323,14.323,0,0,0-10.376-13.209,2.279,2.279,0,0,1-1.659.987,2.2,2.2,0,0,1-.228.011,2.278,2.278,0,0,1-.225-4.544c.077-.007.154-.011.229-.011a2.268,2.268,0,0,1,2.236,1.854,15.733,15.733,0,0,1,3.79,1.6,15.9,15.9,0,0,1,7.959,13.25.871.871,0,0,1-.826.9Zm-13.126-15.881a.555.555,0,0,0-.548.475.553.553,0,0,0,.88.521.568.568,0,0,0,.118-.771.68.68,0,0,0-.178-.153A.55.55,0,0,0,303.967,396.817Z"
transform="translate(-285.623 -395.093)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 9">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(-268.976 -382.672)">
<path
fill="currentColor"
d="M291.489,421.9a1.117,1.117,0,0,1-.013-2.222h3.551V417h-9.908a2.279,2.279,0,0,1-2.14-2.377V400.038a2.276,2.276,0,0,1,2.126-2.366h21.759a2.282,2.282,0,0,1,2.141,2.375v14.589A2.271,2.271,0,0,1,306.881,417h-9.82v2.673h3.4a1.119,1.119,0,0,1,1.01,1.223,1.124,1.124,0,0,1-.994,1h-8.99Zm-6.361-22.005a.124.124,0,0,0-.112.13v14.612a.128.128,0,0,0,.114.142h21.738a.122.122,0,0,0,.1-.13V400.037a.127.127,0,0,0-.117-.141Z" />
<path
fill="currentColor"
d="M293.956,410.1a1,1,0,0,1-.145-.011,1.026,1.026,0,0,1-.872-1.161V406.6a1.021,1.021,0,0,1,.923-1.106h.011a1.037,1.037,0,0,1,1.1.922,1.117,1.117,0,0,1,0,.2v2.344a.833.833,0,0,1,0,.259,1.024,1.024,0,0,1-1.015.881Z" />
<path
fill="currentColor"
d="M289.752,411.985a1.2,1.2,0,0,1-.146-.009,1.028,1.028,0,0,1-.872-1.162v-6.1a1.021,1.021,0,0,1,.918-1.111l.1-.006a1.02,1.02,0,0,1,1.018.924,1.05,1.05,0,0,1,0,.21v6.119a.893.893,0,0,1,0,.258,1.023,1.023,0,0,1-1.015.881Z" />
<path
fill="currentColor"
d="M302.368,412.814a.9.9,0,0,1-.147-.01,1.028,1.028,0,0,1-.872-1.16v-7.757a1.006,1.006,0,0,1,.23-.74,1.017,1.017,0,0,1,.693-.366h.01a1.039,1.039,0,0,1,1.1.922,1.1,1.1,0,0,1,0,.2v7.773a.9.9,0,0,1,0,.259,1.025,1.025,0,0,1-1.016.88Z" />
<path
fill="currentColor"
d="M298.162,411.546a1.162,1.162,0,0,1-.145-.009,1.029,1.029,0,0,1-.873-1.162v-5.219a1.023,1.023,0,0,1,.923-1.106h.011a1.022,1.022,0,0,1,1.1,1.124v5.233a.9.9,0,0,1,0,.259,1.023,1.023,0,0,1-1.013.88Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 10">
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(-269.158 -382.972)">
<path
fill="currentColor"
d="M291.727,425.728a1.456,1.456,0,0,1-1.47-1.457,1.441,1.441,0,0,1,.173-.668,14.29,14.29,0,0,0,.786-1.7c.2-.491.3-.814.376-1.057l.068-.229-.233.049a10.017,10.017,0,0,1-1.912.215,6.182,6.182,0,0,1-3.236-.952c-1.241-.793-1.743-2.195-2.115-4.057a18.909,18.909,0,0,1-.37-3.4v-.07l-.056-.042a1.932,1.932,0,0,0-.318-.192l-.316-.161c-.266-.137-.566-.291-.838-.416l-1.061-.5a2.041,2.041,0,0,1-1.118-1.583c-.062-.862.469-1.374,1.349-2.223l.308-.3a18.294,18.294,0,0,0,1.508-1.541,3.31,3.31,0,0,0,.523-.836,9.672,9.672,0,0,1,.7-3.6,10.626,10.626,0,0,1,2.281-3.533,12.5,12.5,0,0,1,8.7-3.5c.169,0,.338,0,.507.01a9.583,9.583,0,0,1,8.326,4.928,16.2,16.2,0,0,1,2,4.653,1.454,1.454,0,0,1-.243,1.156,1.436,1.436,0,0,1-.945.568,1.537,1.537,0,0,1-.213.016,1.445,1.445,0,0,1-1.382-1.041,13.345,13.345,0,0,0-1.688-3.89,6.775,6.775,0,0,0-5.849-3.517c-.153-.007-.311-.011-.469-.011a9.535,9.535,0,0,0-6.631,2.667,7.171,7.171,0,0,0-2.143,5.05c.033,1.473-1.5,3.145-2.835,4.436l-.149.144.188.087a10.164,10.164,0,0,1,1.323.734,2.759,2.759,0,0,1,1.411,2.268,14.971,14.971,0,0,0,.333,3.131,4.431,4.431,0,0,0,.824,2.171,2.968,2.968,0,0,0,1.657.508,8.362,8.362,0,0,0,1.7-.229l.964-.163a2.637,2.637,0,0,1,.4-.03h0a2.086,2.086,0,0,1,1.7.849c.55.748.464,2.4-.219,4.214a23.789,23.789,0,0,1-1.02,2.257,1.421,1.421,0,0,1-1.278.79Z" />
<path
fill="currentColor"
d="M305.4,410.878a1.416,1.416,0,0,1-1.009-.431l-4.19-4.16h-5.759a1.438,1.438,0,0,1,0-2.877h6.367a1.436,1.436,0,0,1,1.008.431l4.192,4.16h4.35a1.438,1.438,0,1,1,0,2.877Z" />
<path
fill="currentColor"
d="M295.852,417.918a1.438,1.438,0,0,1,0-2.876h4.779l2.477-2.479a1.417,1.417,0,0,1,1-.43h4.535a1.438,1.438,0,0,1,0,2.876h-3.891l-2.48,2.479a1.45,1.45,0,0,1-1.025.43Z" />
<path fill="currentColor" d="M292.607,412.167a1.438,1.438,0,0,1,0-2.877h5.939a1.438,1.438,0,0,1,0,2.877Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 54 54" v-if="name === 11">
<defs>
<clipPath id="school-icon-11-clip">
<rect fill="#fff" width="28.448" height="28.373" />
</clipPath>
</defs>
<circle fill="#fff" cx="27" cy="27" r="27" />
<g transform="translate(13.216 13.173)">
<g clip-path="url(#school-icon-11-clip)">
<path
fill="currentColor"
d="M39.927,163.7l5.288,5.288a1.136,1.136,0,0,0,1.645,0,1.136,1.136,0,0,0,0-1.645l-5.288-5.288a3.863,3.863,0,0,0,.47-2,5.537,5.537,0,0,0-.47-2l5.288-5.288a1.163,1.163,0,0,0-1.645-1.645l-5.288,5.288a3.862,3.862,0,0,0-2-.47,5.534,5.534,0,0,0-2,.47l-5.288-5.288A1.163,1.163,0,1,0,29,152.775l5.288,5.288a3.862,3.862,0,0,0-.47,2,5.537,5.537,0,0,0,.47,2L29,167.347a1.136,1.136,0,0,0,0,1.645,1.136,1.136,0,0,0,1.645,0l5.288-5.288a3.861,3.861,0,0,0,2,.47,5.534,5.534,0,0,0,2-.47Zm-.235-3.643a1.763,1.763,0,1,1-1.763-1.763,1.807,1.807,0,0,1,1.763,1.763Zm0,0"
transform="translate(-23.714 -145.941)" />
<path
fill="currentColor"
d="M-108.949,23.4h.235a1.144,1.144,0,0,0,1.175-.94,1.289,1.289,0,0,0-.94-1.41,4.352,4.352,0,0,1-2.115-.94,3.688,3.688,0,0,1,0-5.171,3.688,3.688,0,0,1,5.171,0,3.341,3.341,0,0,1,1.058,2,1.219,1.219,0,0,0,1.41.94,1.219,1.219,0,0,0,.94-1.41,6.73,6.73,0,0,0-1.645-3.29,6.1,6.1,0,0,0-8.579,0,6.1,6.1,0,0,0,0,8.579,6.73,6.73,0,0,0,3.29,1.645Zm5.993,9.871a1.219,1.219,0,0,0-1.41.94,3.7,3.7,0,0,1-1.058,2,3.689,3.689,0,0,1-5.171,0,3.689,3.689,0,0,1,0-5.171,3.34,3.34,0,0,1,2-1.058,1.219,1.219,0,0,0,.94-1.41,1.219,1.219,0,0,0-1.41-.94,6.729,6.729,0,0,0-3.29,1.645,6.1,6.1,0,0,0,0,8.578,5.964,5.964,0,0,0,4.231,1.763,5.964,5.964,0,0,0,4.23-1.763,5.216,5.216,0,0,0,1.645-3.29.885.885,0,0,0-.705-1.293Zm12.1-5.641a1.219,1.219,0,0,0-1.41.94,1.289,1.289,0,0,0,.94,1.41,3.7,3.7,0,0,1,2,1.058,3.689,3.689,0,0,1,0,5.171,3.689,3.689,0,0,1-5.171,0,3.34,3.34,0,0,1-1.058-2,1.219,1.219,0,0,0-1.41-.94,1.219,1.219,0,0,0-.94,1.41,6.729,6.729,0,0,0,1.645,3.29,5.963,5.963,0,0,0,4.23,1.763A5.964,5.964,0,0,0-87.8,37.968a6.1,6.1,0,0,0,0-8.578,4.75,4.75,0,0,0-3.055-1.763Zm-5.993-9.871a1.219,1.219,0,0,0,1.41-.94,3.7,3.7,0,0,1,1.058-2,3.688,3.688,0,0,1,5.171,0,3.689,3.689,0,0,1,0,5.171,3.34,3.34,0,0,1-2,1.058,1.219,1.219,0,0,0-.94,1.41,1.144,1.144,0,0,0,1.175.94h.235a6.731,6.731,0,0,0,3.29-1.645,6.1,6.1,0,0,0,0-8.579,6.1,6.1,0,0,0-8.579,0,5.215,5.215,0,0,0-1.645,3.29,1,1,0,0,0,.823,1.293Zm0,0"
transform="translate(114.116 -11.392)" />
</g>
</g>
</svg>
</template>
app/components/icons/IconMore.vue 0 → 100644
浏览文件 @ 701aab24
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="22.693" height="7.282" viewBox="0 0 22.693 7.282">
<path fill="currentColor"
d="M45.495,797.339a.371.371,0,0,1,.324.25.651.651,0,0,1,0,.5.371.371,0,0,1-.324.25H24.587a.371.371,0,0,1-.324-.25.652.652,0,0,1,0-.5.371.371,0,0,1,.323-.25Z"
transform="translate(-24.214 -794.191)" />
<path fill="currentColor"
d="M196.34,773.836a1.256,1.256,0,0,1,.606.142l6.6,3.5-6.6,3.507a1.268,1.268,0,0,1-.584.129,1.475,1.475,0,0,1-.225-.017.759.759,0,0,1-.583-.325c-.074-.157.012-.324.225-.437l5.369-2.856-5.367-2.852c-.234-.115-.331-.285-.259-.447a.753.753,0,0,1,.6-.332,1.483,1.483,0,0,1,.215-.015Z"
transform="translate(-180.855 -773.836)" />
</svg>
</template>
\ No newline at end of file
app/components/icons/IconPhone.vue 0 → 100644
浏览文件 @ 701aab24
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="14.293" height="14.407" viewBox="0 0 14.293 14.407">
<g transform="translate(-415.032 -50.116)">
<path fill="currentColor"
d="M428.783,64.311a1.259,1.259,0,0,1-.754.21,15.192,15.192,0,0,1-12.992-13.185,1.344,1.344,0,0,1,.209-.851,1.031,1.031,0,0,1,.8-.369c.31,0,1.722.021,1.927.016a.811.811,0,0,1,.884.578l.851,3.1a.787.787,0,0,1-.466.964c-.048.017-1.06.643-1.06.643a13.348,13.348,0,0,0,2.522,3.5,12.815,12.815,0,0,0,3.212,2.376c.866.452.9-.37.874-.873a.734.734,0,0,1,.945-.753l.011,0,3.02,1.045a.782.782,0,0,1,.545.914c-.006.05-.111,1.911-.111,1.911a.971.971,0,0,1-.418.771Z" />
<path fill="currentColor"
d="M440.114,61.271a.525.525,0,0,1-.5-.551.541.541,0,0,1,.528-.52,3.584,3.584,0,0,1,2.495,1.117,3.9,3.9,0,0,1,1.07,2.6.534.534,0,0,1-.5.551H443.2a.518.518,0,0,1-.514-.521,2.76,2.76,0,0,0-.77-1.876,2.534,2.534,0,0,0-1.8-.8Z"
transform="translate(-17.438 -7.153)" />
<path fill="currentColor"
d="M442.521,53.74a.537.537,0,0,1,.028-1.072,4.928,4.928,0,0,1,3.465,1.548,5.365,5.365,0,0,1,1.484,3.618.534.534,0,0,1-.5.551h-.013a.519.519,0,0,1-.514-.521,4.318,4.318,0,0,0-1.184-2.889,4.03,4.03,0,0,0-2.767-1.236Z"
transform="translate(-19.144 -1.81)" />
<path fill="currentColor" d="M443.741,56.358" transform="translate(-20.365 -4.428)" />
</g>
</svg>
</template>
\ No newline at end of file
app/components/rightAside.vue deleted 100644 → 0
浏览文件 @ 4935b31e
<template>
<div class="right_bar">
<ul class="tab_btns">
<li
:class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
@mouseenter="handleMsOver('enroll')"
@mouseleave="handleMsOut">
<p>{{ $t('aside.apply') }}</p>
</li>
<li
:class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
@mouseenter="handleMsOver('wx')"
@mouseleave="handleMsOut">
<p>{{ $t('aside.follow') }}</p>
</li>
</ul>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<div
id="show-enroll"
v-show="tabBtnActive"
class="tab_cont"
@mouseenter="handleMsOver('')"
@mouseleave="handleMsOut">
<div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
<h5>{{ $t('aside.apply') }}</h5>
<div class="p">
<el-input v-model="formInfo.name" :placeholder="$t('aside.name')"></el-input>
</div>
<div class="p">
<el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')"></el-input>
</div>
<div class="p">
<select name="" id="" v-model="formInfo.projectId">
<option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
</select>
<span class="icon el-icon-arrow-down"></span>
</div>
<div class="p">
<el-input v-model="sendCode" :placeholder="$t('aside.code')">
<template #append>
<el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
$t('aside.codeBtn')
}}</el-button>
</template>
</el-input>
</div>
<div class="p">
<el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button>
</div>
</div>
<div class="wx_cont" v-show="tabBtnTarget === 'wx'" id="show-enroll-wx">
<h5>{{ $t('aside.pay') }}</h5>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
</div>
</div>
</transition>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { sendCode, checkCode, postNes } from '@/api/index'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
export default {
data() {
return {
tabBtnActive: false,
tabBtnTarget: '',
projectName: this.$t('aside.project2'),
sendCode: '',
isBtnDisabled: false,
formInfo: {
name: '',
phone: '',
projectId: '',
},
projectListMap: [
{ label: this.$t('aside.project1'), value: '1012' },
{ label: this.$t('aside.project5'), value: '1006' },
{ label: this.$t('aside.project6'), value: '1005' },
{ label: this.$t('aside.project8'), value: '1021' },
{ label: this.$t('aside.project3'), value: '1008' },
// { label: this.$t('aside.project9'), value: '1015' },
// { label: this.$t('aside.project4'), value: '1001' },
// { label: '工商管理硕士保研项目', value: '1016' },
// { label: '管理信息系统硕士保研项目', value: '9999' },
{ label: this.$t('aside.project10'), value: '1018' },
// { label: this.$t('aside.project11'), value: '1017' },
{ label: this.$t('aside.project12'), value: '1020' },
// { label: this.$t('aside.project13'), value: '1023' }
],
}
},
watch: {
$route: {
handler: function (val, oldVal) {
if (val.path === '/studyAbroad') {
this.formInfo.projectId = '1018'
} else {
this.formInfo.projectId = '1012'
}
},
// 深度观察监听
deep: true,
immediate: true,
},
},
computed: {
projectList() {
if (this.$route.path === '/internationalDegree') {
return this.projectListMap.slice(0, 7)
} else if (this.$route.path === '/studyAbroad') {
return this.projectListMap.slice(-4)
} else {
return this.projectListMap
}
},
},
methods: {
handleMsOver(type) {
this.tabBtnActive = true
if (type !== '') {
this.tabBtnTarget = type
}
},
handleMsOut(type) {
this.tabBtnActive = false
},
submitEnroll() {
let flag = true
Object.keys(this.formInfo).map((item) => {
if (this.formInfo[item] === '') {
flag = false
}
})
if (!flag || !this.sendCode) {
ElMessage('请完善信息')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
ElMessage('手机号格式错误')
} else {
this.checkSendcode()
.then((res) => {
return this.enrollQuery()
})
.then((res) => {
ElMessage({
type: 'success',
message: '报名成功',
duration: 5000,
})
})
.catch((err) => {
if (err && err.type === 'checkcode') ElMessage.error(err.msg)
else ElMessage.error(err.msg || '报名提交失败')
})
}
},
enrollQuery() {
const params = {
channel: localStorage.getItem('channel_num') || 19962,
project_id: this.formInfo.projectId === '9999' ? '1016' : this.formInfo.projectId,
name: this.formInfo.name,
phone: this.formInfo.phone,
}
return new Promise((resolve, reject) => {
postNes(params).then((res) => {
if (res && res.status === 200 && res.error === 0) {
resolve({
type: 'enroll',
state: 'success',
})
} else {
reject({
type: 'enroll',
state: 'fail',
msg: res.message || '报名提交失败',
})
}
})
})
},
getSendCode() {
if (!this.formInfo.phone) {
ElMessage('手机号不能为空')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
ElMessage('手机号格式错误')
} else {
const param = {
account: this.formInfo.phone,
service: 'ezijing.com',
}
sendCode(param)
.then((res) => {
this.btnDisabledTimer()
if (res && res.code === 0) ElMessage.success('验证码已发送，请注意查收')
else ElMessage.error('获取验证码失败，请稍后再试')
})
.catch(() => {})
}
},
checkSendcode() {
const checkCodeParam = {
account: this.formInfo.phone,
code: this.sendCode,
countryCode: 86,
}
return new Promise((resolve, reject) => {
checkCode(checkCodeParam).then((res) => {
if (res && res.code === 0) {
res.type = 'checkcode'
resolve({
type: 'checked',
state: 'success',
})
} else {
reject({
type: 'checked',
state: 'fail',
msg: res.msg || '验证码检测失败',
})
}
})
})
},
btnDisabledTimer() {
this.isBtnDisabled = true
let count = 60
document.querySelector('#checkedCode').innerHTML = count + 's'
const timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn')
} else {
document.querySelector('#checkedCode').innerHTML = count + 's'
}
}, 1000)
},
},
}
</script>
<style lang="scss" scoped>
.right_bar {
position: fixed;
top: 40%;
right: 10px;
z-index: 2000;
transform: translateY(-50%);
.tab_btns {
width: 100px;
// height: 136px;
font-size: 12px;
border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
li {
padding: 70px 0 18px;
color: #999;
background-position: center 18px;
background-repeat: no-repeat;
background-color: #fff;
text-align: center;
}
li.active {
background-color: #af1b40;
color: #fff;
opacity: 0.9;
transition: 0.3s;
}
li.enroll {
position: relative;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
}
li.enroll:after {
content: '';
width: 100%;
height: 1px;
background: #b8bcbf;
position: absolute;
left: 0;
bottom: 0;
// transform: translateX(-50%) scale(0.5);
}
li.enroll.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
}
li.wx {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png);
}
li.wx.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/0831ea27fee535ab0ce9f730f467b2e1.png);
}
li > p {
font-size: 12px;
line-height: 14px;
text-align: center;
// transform: scale(0.9);
line-height: 100%;
cursor: default;
}
}
.tab_cont {
position: absolute;
left: -310px;
top: -120px;
width: 310px;
height: 374px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4ae1f00a05a40fd10866ffe153fa82b0.png);
// display:none;
h5 {
font-size: 20px;
line-height: 60px;
font-weight: normal;
color: rgba(255, 255, 255, 0.9);
text-align: center;
}
.enroll_cont {
padding: 0 20px;
.p {
margin-bottom: 15px;
position: relative;
:deep(.el-input__inner) {
line-height: 44px;
height: 44px;
}
:deep(.el-select) {
width: 100%;
}
select {
width: 100%;
height: 44px;
border-radius: 5px;
font-size: 13px;
border: 1px solid #ccc;
line-height: 44px;
height: 44px;
outline: none;
color: #606266;
padding: 0 12px;
box-sizing: border-box;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
color: #606266;
}
}
}
.wx_cont img {
width: 156px;
height: 156px;
display: block;
margin: 65px auto 0;
}
}
}
</style>
app/composables/useAboutNavList.ts
浏览文件 @ 701aab24
......@@ -4,7 +4,7 @@ export const useAboutNavList = () => {
return computed(() => [
{
name: t('menu.aboutChild.about'),
path: '/about/introduce',
path: '/about',
},
{
name: t('menu.aboutChild.culture'),
......
app/layouts/default.vue
浏览文件 @ 701aab24
......@@ -3,6 +3,6 @@
<AppHeader class="heads" />
<slot />
<AppFooter />
<RightAside />
<AppRightAside />
</div>
</template>
app/pages/about/paid.vue
浏览文件 @ 701aab24
......@@ -130,7 +130,7 @@ const handleDialogClick = (event) => {
<style lang="scss" scoped>
.card {
margin: 80px auto;
max-width: 1200px;
max-width: 1300px;
}
.card-hd {
align-items: center;
......@@ -298,7 +298,7 @@ const handleDialogClick = (event) => {
.banner img {
width: 100%;
min-width: 1200px;
min-width: 1300px;
object-fit: cover;
}
......
app/pages/alumnus/story/index.vue
浏览文件 @ 701aab24
......@@ -26,7 +26,7 @@ const listOptions = {
<style lang="scss" scoped>
.main_content {
width: 1200px;
width: 1300px;
margin: 30px auto;
.banner {
......
app/pages/digital/ds.vue
浏览文件 @ 701aab24
<!-- 引产入校 -->
<!-- 技能大赛 -->
<script setup>
import { ref } from 'vue'
const typeIndex = ref(0)
const dsTypes = ['国赛', '省赛', '行业赛']
const dsList = ref([
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_1.png',
title:
'清控紫荆教育人工智能应用开发平台助力长春金融高等专科学校荣获2025年世界职业院校技能大赛新一代信息技术赛道高职组金奖',
text: '本次比赛由教育部牵头、联合国家部委及行业组织主办，江苏省教育厅承办，常州市人民政府、武…',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_2.png',
title: '清控紫荆教育数智营销平台助力长春金融高等专科学校荣获2024年世界职业院校技能大赛智慧金融金奖（第一名）',
text: '本次比赛由教育部牵头、联合国家部委及行业组织主办，江苏省教育厅承办，常州市人民政府、武…',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news_3.png',
title: '2024年世界职业院校技能大赛总决赛争夺赛高职组财经商贸赛道智慧金融赛项',
text: '2024年世界职业院校技能大赛总决赛争夺赛高职组财经商贸赛道智慧金融小组赛项在热烈的掌声中…',
},
])
const schoolList = ref([
'安阳师范学院',
'北京财贸职业学院',
'常州工业职业技术学院',
'桂林理工大学南宁分校',
'河南财经政法大学',
'吉林工商学院',
'吉林农业大学',
'江西工商职业技术学院',
'黎明职业大学',
'南宁职业技术学院',
'内蒙古警察职业学院',
'清远职业技术学院',
'沈阳工业大学',
'石家庄邮电职业技术学院',
'四川财经职业学院',
'四川职业技术学院',
'天津滨海汽车工程职业学院',
'长春大学',
'长春金融高等专科学校',
'重庆工商大学派斯学院',
])
const xsList = ref([
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_1.png',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_2.png',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_3.png',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_4.png',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_5.png',
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/next/ds/xsfc_6.png',
},
])
</script>
<template>
<div>
<div class="ds-page">
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/banner1.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/next/ds/ds_banner.png" />
<div class="cover">
<div class="cover-inner">
<div class="h1">
<h1>150</h1>
<div class="j">＋</div>
<span>高校咨询参赛</span>
</div>
<h6>2023年全国大学生商业数据分析与应用大赛</h6>
<h1>以赛促学 以赛促教</h1>
<div class="line"></div>
<h6>支持服务：行业赛/省赛/国赛<span>50</span>场</h6>
<div class="text-list">
<div class="text-list_item">
<div class="list_item_t">
<div class="num">195</div>
<div class="d">个</div>
</div>
<div class="list_item_b">学校报名</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">52</div>
<div class="d">名</div>
<div class="num">600</div>
</div>
<div class="list_item_b">指导教师</div>
<div class="list_item_b">个学校报名</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">41</div>
<div class="d">支</div>
<div class="num">6000</div>
</div>
<div class="list_item_b">参赛队伍</div>
<div class="list_item_b">人次服务选手</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">16</div>
<div class="d">个</div>
<div class="num">20</div>
</div>
<div class="list_item_b">省市</div>
<div class="list_item_b">个覆盖省市</div>
</div>
</div>
</div>
......@@ -46,117 +102,75 @@
</div>
<section class="section">
<div class="section-inner">
<h2 class="section-title">赛项名称</h2>
<h2 class="section-title">赛事快讯</h2>
<ul class="ds-type-list">
<li
v-for="(item, index) in dsTypes"
:key="index"
:class="{ active: typeIndex === index }"
@click="typeIndex = index">
{{ item }}
</li>
</ul>
<div class="sx-list">
<div class="sx-list_item" v-for="(item, index) in nameList" :key="index">
<img :src="item.logo" class="logo" />
<div class="sx-list_item" v-for="(item, index) in dsList" :key="index">
<img :src="item.img" class="logo" />
<div class="bg-box">
<img :src="item.bg" />
<div class="text" v-html="item.text"></div>
<h5>{{ item.title }}</h5>
<p>{{ item.text }}</p>
</div>
<a href="javascript:void(0)" class="btn">了解详情</a>
</div>
</div>
</div>
</section>
<section class="section">
<div class="section-inner">
<h2 class="section-title">赛项简介</h2>
<h2 class="section-title">最新赛项</h2>
<div class="intr-top">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/sx-bg.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/next/ds/ds_news.png" />
<div class="intr-top_r">
<p>面向泛管理类和财经商贸类专业</p>
<p>商业数据分析和数字营销两大类行业赛事群。</p>
<h3>2025年“湖北工匠杯”技能大赛</h3>
<p><strong>赛事时间：</strong>2025年9月12日</p>
<p>
赛项设计遵循《2023年全国职业院校技能大赛制度汇编》的总体指导思想及原则。
赛项平台贯穿模拟多个真实的商业级工作平台，利用大数据、人工智能技术，采用行业真实数据和案例集。竞赛内容设计适应数字经济国家战略对人才培养的需求，覆盖数字+金融、贸易、电商、服务、零售等数十个行业。通过大赛促进大数据应用融入管理类、财经商贸等专业大类，推进专业实践教学水平，加快专业教师大数据应用水平，培养学生大数据应用与数字营销技能。
<strong>赛事简介：</strong
>赛事紧密对接国赛及世赛标准，深度融合国家数字经济发展战略与湖北省产业升级需求，全面覆盖数字技术核心岗位技能体系，既实现了“以赛促学、以赛促训、以赛促建”的良性循环，也为湖北省高技能人才队伍建设与数字经济高质量发展注入了强劲动力。
</p>
<p><strong>参赛规模：</strong>全国28个省、自治区、直辖市的251支队伍参赛</p>
</div>
</div>
<div class="intr-list">
<div class="intr-l_item" v-for="(item, index) in schoolList" :key="index">{{ item }}</div>
</div>
<ul class="intr-list">
<li class="intr-l_item" v-for="(item, index) in schoolList" :key="index">{{ item }}</li>
</ul>
</div>
</section>
<section class="section">
<div class="section-inner">
<h2 class="section-title">选手风采</h2>
<div class="xs-list">
<div class="xs-items">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-1.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-2.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-3.png" />
</div>
<div class="xs-items">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-4.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-5.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/fc-6.png" />
</div>
</div>
<ul class="xs-list">
<li v-for="(item, index) in xsList" :key="index"><img :src="item.img" /></li>
</ul>
</div>
</section>
<!-- <section class="section">
<section>
<div class="section-inner">
<h2 class="section-title">交付案例</h2>
<ul class="al-list">
<li v-for="item in jfalList" :key="item"><img :src="item" /></li>
</ul>
<AppContact />
</div>
</section> -->
</section>
</div>
</template>
<script setup>
import { ref } from 'vue'
const nameList = ref([
{
logo: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-bg1.png',
text: '第一届<br />全国大学生商业数据分析与应用大赛',
},
{
logo: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-bg2.png',
text: '第二届<br />全国大学生商业数据分析与应用大赛',
},
{
logo: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.ezijing.com/www/pc/digital/ds/name-bg3.png',
text: '第一届<br />全国大学生数字营销技能大赛',
},
])
const schoolList = ref([
'安阳师范学院',
'北京财贸职业学院',
'常州工业职业技术学院',
'桂林理工大学南宁分校',
'河南财经政法大学',
'吉林工商学院',
'吉林农业大学',
'江西工商职业技术学院',
'黎明职业大学',
'南宁职业技术学院',
'内蒙古警察职业学院',
'清远职业技术学院',
'沈阳工业大学',
'石家庄邮电职业技术学院',
'四川财经职业学院',
'四川职业技术学院',
'天津滨海汽车工程职业学院',
'长春大学',
'长春金融高等专科学校',
'重庆工商大学派斯学院',
])
</script>
<style lang="scss" scoped>
.banner {
<style lang="scss">
.ds-page {
background-color: #fff;
.banner {
position: relative;
margin-bottom: 90px;
img {
width: 100%;
height: 650px;
object-fit: cover;
}
.cover {
position: absolute;
......@@ -164,39 +178,35 @@ const schoolList = ref([
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4039);
line-height: 1;
color: #ffffff;
.h1 {
display: flex;
align-items: center;
margin-bottom: 18px;
h1 {
font-size: 56px;
font-size: 60px;
font-weight: bold;
color: #ffffff;
line-height: 100%;
}
span {
font-size: 22px;
margin-left: 10px;
}
.j {
font-size: 40px;
font-weight: bold;
line-height: 1;
}
.line {
margin: 40px 0 35px;
width: 60px;
height: 6px;
background: #ffffff;
}
h6 {
font-size: 28px;
line-height: 100%;
font-size: 24px;
font-weight: normal;
line-height: 1;
span {
font-size: 36px;
font-weight: 500;
}
}
.text-list {
display: flex;
margin-top: 88px;
margin-left: -40px;
margin-top: 48px;
margin-left: -48px;
.text-list_item {
width: 198px;
padding: 0 48px;
text-align: center;
border-right: 1px solid #fff;
&:last-child {
......@@ -207,47 +217,35 @@ const schoolList = ref([
justify-content: center;
align-items: flex-end;
.num {
font-size: 56px;
font-size: 48px;
font-weight: bold;
color: #ffffff;
line-height: 100%;
}
.d {
font-size: 20px;
color: #ffffff;
line-height: 35px;
margin-left: 5px;
}
}
}
.list_item_b {
font-size: 16px;
font-size: 18px;
color: #ffffff;
margin-top: 8px;
margin-top: 15px;
}
}
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
}
}
.section:nth-child(odd) {
background-color: #f9f8f8;
}
.section:nth-child(even) {
background-color: #fff;
}
.section-inner {
width: 1200px;
}
.section-inner {
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
.section-title {
padding-bottom: 90px;
}
.section-title {
margin-bottom: 36px;
font-size: 30px;
font-family: Source Han Sans CN;
......@@ -255,108 +253,122 @@ const schoolList = ref([
line-height: 32px;
color: #333333;
text-align: center;
}
}
.sx-list {
display: flex;
justify-content: space-between;
.sx-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px;
.sx-list_item {
width: 370px;
// border: 1px solid #dbdbdb;
padding: 19px 25px 25px;
box-sizing: border-box;
cursor: pointer;
position: relative;
border-radius: 12px;
border: 1px solid #d5d5d5;
padding-bottom: 60px;
transition: all 0.3s;
&:hover {
.bg-box {
img {
transform: scale(1.1);
}
}
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
transform: translateY(-10px);
}
.logo {
width: 145px;
width: 100%;
display: block;
height: 230px;
object-fit: cover;
}
.bg-box {
margin-top: 18px;
position: relative;
overflow: hidden;
img {
width: 320px;
display: block;
transition: all 0.2s;
padding: 40px 25px;
h5 {
font-size: 20px;
line-height: 30px;
}
p {
margin-top: 15px;
font-size: 16px;
line-height: 22px;
color: #d5d5d5;
}
.text {
}
.btn {
position: absolute;
top: 0;
left: 0;
text-align: center;
justify-content: center;
width: 100%;
height: 100%;
left: 50%;
transform: translate(-50%);
bottom: 40px;
width: 270px;
height: 42px;
background-color: var(--main-color);
border-radius: 33px;
color: #fff;
font-size: 18px;
color: #ffffff;
line-height: 30px;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.4039);
line-height: 42px;
text-align: center;
text-decoration: none;
display: block;
&:hover {
background-color: #fff;
color: var(--main-color);
border: 1px solid var(--main-color);
}
}
}
}
.intr-top {
}
.intr-top {
display: flex;
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
border-radius: 12px;
height: 360px;
margin-bottom: 60px;
img {
width: 576px;
width: 640px;
height: fit-content;
}
.intr-top_r {
margin-left: 44px;
padding: 40px;
h3 {
font-size: 20px;
line-height: 30px;
margin-bottom: 30px;
}
p {
font-size: 16px;
color: #333333;
line-height: 36px;
line-height: 22px;
margin-bottom: 20px;
position: relative;
text-align: justify;
&::before {
content: '';
position: absolute;
top: 15px;
left: -15px;
width: 6px;
height: 6px;
background: #aa1941;
border-radius: 50%;
color: #6c6c6c;
}
}
}
}
.intr-list {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
margin-right: -20px;
.intr-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px 20px;
.intr-l_item {
background-color: #fff;
width: 224px;
background: #ffffff;
border-radius: 5px 5px 5px 5px;
font-size: 16px;
color: #333333;
line-height: 47px;
line-height: 60px;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
border-radius: 12px;
border: 1px solid #e2e2e2;
}
}
.xs-list {
.xs-items {
}
.xs-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ds-type-list {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
img {
width: 380px;
justify-content: center;
gap: 100px;
margin-bottom: 36px;
li {
font-size: 22px;
cursor: pointer;
&.active,
:hover {
color: var(--main-color);
border-bottom: 5px solid var(--main-color);
}
}
}
}
......
app/pages/digital/sz.vue
浏览文件 @ 701aab24
<!-- 引产入校 -->
<!-- 数字教材 -->
<script setup>
import { ref } from 'vue'
const skList = ref([
{
h1: '优势一',
h2: '多形态工具与AI大模型结合的<br />数字教材编辑器',
p: '清控紫荆数智学堂的数字教材编辑器提供对于立体式、多元化教学资源的支持，绝大部分数字资源都支持加入数字化教材。在教材编写方面，教师只要会用Office就会编写数字化教材，同时平台还提供基于大模型、多模态的智能化辅助能力。',
},
{
h1: '优势二',
h2: '提供富媒体、交互式<br/>数字教材',
p: '清控紫荆数智学堂打造了富媒体、交互式的一站式综合平台。全面提升了高校在数字化教材、数字化课件、数字化教案、数字化教学、数字化测评、数字化评价综合能力。同时实现了理论课程与实践教学的一站式融合。',
},
{
h1: '优势三',
h2: '高品质专业<br/>出版服务',
p: '清控紫荆数智学堂提供从策划选题开始，涵盖内容创作、编辑校对、设计排版、数字技术实现，最终到质量控制的完整的一站式数字化教材出版流程，辅以清华大学出版社等各类型A、B类出版社共计20余家，为高校提供优质的出版服务和数字化资源定制开发服务。',
},
{
h1: '优势四',
h2: '全流程数字化教学<br/>及管理',
p: '清控紫荆数智学堂通过数字化手段结合AI技术，实现从教学前的一键式教案生成，到教学过程的全面大数据管理，到教学之后的智能总结与推送，结合多维度教学测评和360教学评价，为高校提供了一站式、全流程的数字化教学及管理能力。',
},
{
h1: '优势五',
h2: '基于大数据、多模态的<br/>AI辅助教学',
p: '清控紫荆数智学堂提供AIGC生成式教案系统，快速辅助教师完成教案编写。通过AI为学生提供大模型、多模态学习辅助功能，实现7*24的贴身智能辅导。',
},
])
const ptList = ref([
{
h1: '特色功能一：AI能力的全场景应用',
h2: '清控紫荆数智学堂面向教师和学生提供了全场景的AI能力，实现了针对教材文本、图片、课件、案例、题库等多维度的教师支撑，以及针对学生在学习辅助场景的全面支撑。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c1.png',
},
{
h1: '特色功能二：基于大数据的教学管理',
h2: '清控紫荆数智学堂全面实现了数据化能力，学生从购买数字教材开始，到数字教材的学习，笔记、讨论、测评、查阅等一系列动作行为及结果数据均实现国家信息安全保障基础上的全面采集和分析，为高校的教学管理提供了强力支撑。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c2.png',
},
{
h1: '特色功能三："学-测-评"一站式在线教学平台',
h2: '清控紫荆数智学堂在全面AI辅助教学的基础上，实现了从知识点级别，到教学单元、教学主题等多维度综合测评。同时结合360度教学评价，全面实现对课程、教材、教师、教学、质量等多维度的评价，形成了学习、测试、评价的业务闭环。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c3.png',
},
{
h1: '特色功能四：理论教学与实践教学的无缝衔接',
h2: '清控紫荆数智学堂将理论教学与实践教学全面打通，形成了面向教材、课程、知识点级别的无缝衔接，让学生在理论学习过程中，无缝切换进行实践训练，并形成相应的学习过程和结果数据，支撑全面的教学评价。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c4.png',
},
])
</script>
<template>
<div>
<div class="sz-page">
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/banner.png" />
<img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/szjc_banner.png" />
<div class="cover">
<div class="cover-inner">
<h2>数字教材一站式平台：清控紫荆数智学堂</h2>
<span></span>
<h2>数字教材一站式平台</h2>
<h1><span>清控紫荆</span>数智学堂</h1>
<div class="line"></div>
<h6>全链路 · 一站式 · 大模型 · 多模态 · 富媒体</h6>
<p>
打通”学校端—出版端-教学端-学生端“的完整流程，提供多形态工具与AI大模型结合的数字教材编辑器，支持富媒体、交互式数字教材，满足全流程数字化教学及管理要求，基于大数据、多模态的AI辅助教学，配套高品质专业出版服务。实现教育资源的优化配置与高效利用，科技赋能教育，校企共筑教育新质生产力。
......@@ -60,11 +117,17 @@
</div>
<div class="bz-b">
<div class="bz-h1">企业资质与安全等保认证</div>
<div class="img-box">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z1.png?v=1.2" />
<img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z2.png" />
<ul class="img-box">
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/zs1.png" />
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/zs2.png" />
</li>
<!-- <li>
<img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z3.jpg" />
</div>
</li> -->
</ul>
</div>
</div>
</div>
......@@ -72,66 +135,14 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
const skList = ref([
{
h1: '优势一',
h2: '多形态工具与AI大模型结合的<br />数字教材编辑器',
p: '清控紫荆数智学堂的数字教材编辑器提供对于立体式、多元化教学资源的支持，绝大部分数字资源都支持加入数字化教材。在教材编写方面，教师只要会用Office就会编写数字化教材，同时平台还提供基于大模型、多模态的智能化辅助能力。',
},
{
h1: '优势二',
h2: '提供富媒体、交互式<br/>数字教材',
p: '清控紫荆数智学堂打造了富媒体、交互式的一站式综合平台。全面提升了高校在数字化教材、数字化课件、数字化教案、数字化教学、数字化测评、数字化评价综合能力。同时实现了理论课程与实践教学的一站式融合。',
},
{
h1: '优势三',
h2: '高品质专业<br/>出版服务',
p: '清控紫荆数智学堂提供从策划选题开始，涵盖内容创作、编辑校对、设计排版、数字技术实现，最终到质量控制的完整的一站式数字化教材出版流程，辅以清华大学出版社等各类型A、B类出版社共计20余家，为高校提供优质的出版服务和数字化资源定制开发服务。',
},
{
h1: '优势四',
h2: '全流程数字化教学<br/>及管理',
p: '清控紫荆数智学堂通过数字化手段结合AI技术，实现从教学前的一键式教案生成，到教学过程的全面大数据管理，到教学之后的智能总结与推送，结合多维度教学测评和360教学评价，为高校提供了一站式、全流程的数字化教学及管理能力。',
},
{
h1: '优势五',
h2: '基于大数据、多模态的<br/>AI辅助教学',
p: '清控紫荆数智学堂提供AIGC生成式教案系统，快速辅助教师完成教案编写。通过AI为学生提供大模型、多模态学习辅助功能，实现7*24的贴身智能辅导。',
},
])
const ptList = ref([
{
h1: '特色功能一：AI能力的全场景应用',
h2: '清控紫荆数智学堂面向教师和学生提供了全场景的AI能力，实现了针对教材文本、图片、课件、案例、题库等多维度的教师支撑，以及针对学生在学习辅助场景的全面支撑。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c1.png',
},
{
h1: '特色功能二：基于大数据的教学管理',
h2: '清控紫荆数智学堂全面实现了数据化能力，学生从购买数字教材开始，到数字教材的学习，笔记、讨论、测评、查阅等一系列动作行为及结果数据均实现国家信息安全保障基础上的全面采集和分析，为高校的教学管理提供了强力支撑。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c2.png',
},
{
h1: '特色功能三："学-测-评"一站式在线教学平台',
h2: '清控紫荆数智学堂在全面AI辅助教学的基础上，实现了从知识点级别，到教学单元、教学主题等多维度综合测评。同时结合360度教学评价，全面实现对课程、教材、教师、教学、质量等多维度的评价，形成了学习、测试、评价的业务闭环。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c3.png',
},
{
h1: '特色功能四：理论教学与实践教学的无缝衔接',
h2: '清控紫荆数智学堂将理论教学与实践教学全面打通，形成了面向教材、课程、知识点级别的无缝衔接，让学生在理论学习过程中，无缝切换进行实践训练，并形成相应的学习过程和结果数据，支撑全面的教学评价。',
img: 'https://webapp-pub.ezijing.com/www/pc/digital/szz/c4.png',
},
])
</script>
<style lang="scss" scoped>
.banner {
<style lang="scss">
.sz-page {
.banner {
position: relative;
img {
width: 100%;
height: 650px;
object-fit: cover;
}
.cover {
position: absolute;
......@@ -139,54 +150,41 @@ const ptList = ref([
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4039);
line-height: 1;
color: #ffffff;
h2 {
font-size: 42px;
font-size: 36px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
line-height: 1;
}
h3 {
margin-bottom: 20px;
font-size: 24px;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
h1 {
margin-top: 20px;
font-size: 60px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
line-height: 1;
letter-spacing: 4px;
}
span {
margin: 24px 0;
width: 42px;
height: 3px;
background: #ffffff;
color: var(--main-color);
}
}
.line {
margin: 46px 0;
width: 60px;
height: 6px;
background: #333;
}
h6 {
margin-bottom: 24px;
margin-bottom: 30px;
font-size: 20px;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
line-height: 1;
letter-spacing: 2px;
}
p {
max-width: 644px;
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
line-height: 26px;
}
a {
margin-top: 28px;
width: 112px;
height: 36px;
font-size: 16px;
max-width: 720px;
font-size: 18px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #ffffff;
line-height: 36px;
background: #aa1941;
text-align: center;
line-height: 30px;
}
}
.cover-inner {
......@@ -197,19 +195,19 @@ const ptList = ref([
justify-content: center;
flex-direction: column;
}
}
.section:nth-child(odd) {
}
.section:nth-child(odd) {
background: #f0f2f5;
}
.section:nth-child(even) {
background-color: #fff;
}
.section:nth-child(even) {
background-color: #f9f8f8;
}
.section-inner {
}
.section-inner {
width: 1200px;
margin: 0 auto;
padding: 100px 0;
}
.section-title {
}
.section-title {
margin-bottom: 36px;
font-size: 30px;
font-family: Source Han Sans CN;
......@@ -217,30 +215,30 @@ const ptList = ref([
line-height: 32px;
color: #333333;
text-align: center;
}
.section-desc {
}
.section-desc {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #666666;
}
.section-pic {
}
.section-pic {
text-align: center;
img {
max-width: 100%;
}
}
.is-border {
}
.is-border {
border: 1px solid #d5d5d5;
}
.gk-list {
}
.gk-list {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.gk-item {
}
.gk-item {
min-height: 280px;
text-align: center;
background: #fff;
......@@ -271,8 +269,8 @@ const ptList = ref([
.a_icon {
display: none;
}
}
.gk-item__pic {
}
.gk-item__pic {
padding: 46px 0 36px;
// .p_icon{
// display: block;
......@@ -280,8 +278,8 @@ const ptList = ref([
// .a_icon{
// display: none;
// }
}
.gk-item__content {
}
.gk-item__content {
padding: 0 12px;
h2 {
font-size: 19px;
......@@ -298,13 +296,13 @@ const ptList = ref([
a {
color: var(--main-color);
}
}
.ys-list {
}
.ys-list {
display: flex;
justify-content: space-between;
margin-top: 60px;
.ys-item {
background-color: #fff;
background: linear-gradient(180deg, #f9f8f8 0%, #f0f2f5 100%);
width: 230px;
height: 390px;
box-sizing: border-box;
......@@ -332,8 +330,8 @@ const ptList = ref([
margin: 0 auto;
}
}
}
.pt-list {
}
.pt-list {
width: 1200px;
margin: 0 auto;
.pt-item {
......@@ -364,8 +362,8 @@ const ptList = ref([
margin: 37px auto 0;
}
}
}
.bz-box {
}
.bz-box {
.bz-h1 {
font-weight: bold;
font-size: 18px;
......@@ -380,11 +378,9 @@ const ptList = ref([
margin-top: 60px;
.img-box {
background-color: #fff;
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex;
align-items: center;
img {
max-width: 100%;
justify-content: space-between;
}
}
}
......
app/pages/digital/yx_1.vue
浏览文件 @ 701aab24
......@@ -45,16 +45,16 @@
</p>
<div class="gk-list">
<div class="gk-item active" v-for="item in gkList" :key="item.title">
<div class="gk-item__pic p_icon" style="padding: 40px 0 30px;">
<div class="gk-item__pic p_icon" style="padding: 40px 0 30px">
<img :src="item.icon" />
</div>
<div class="gk-item__pic a_icon" style="padding: 40px 0 30px;">
<div class="gk-item__pic a_icon" style="padding: 40px 0 30px">
<img :src="item.iconActive" />
</div>
<!-- <div class="gk-item__pic" style="padding: 40px 0 30px;"><img :src="item.icon" /></div> -->
<div class="gk-item__content a_color">
<h2>{{ item.title }}</h2>
<p style="margin: 8px 0;" v-html="item.desc"></p>
<p style="margin: 8px 0" v-html="item.desc"></p>
<a :href="item.more" v-if="item.more">查看更多</a>
</div>
</div>
......@@ -198,7 +198,7 @@ const gkList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -212,7 +212,7 @@ const gkList = ref([
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......@@ -295,7 +295,7 @@ const gkList = ref([
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 24px;
color: #AA1941;
color: #aa1941;
}
p {
margin: 12px 0;
......
app/pages/digital/yx_1_1.vue
浏览文件 @ 701aab24
......@@ -340,7 +340,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -354,7 +354,7 @@ const jfalList = ref([
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_1_2.vue
浏览文件 @ 701aab24
......@@ -336,7 +336,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -350,7 +350,7 @@ const jfalList = ref([
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_1_3.vue
浏览文件 @ 701aab24
......@@ -318,7 +318,7 @@ const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -332,7 +332,7 @@ const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_1_4.vue
浏览文件 @ 701aab24
......@@ -36,7 +36,9 @@
<section class="section">
<div class="section-inner">
<h2 class="section-title">人工智能实践教学平台案例资源介绍</h2>
<p class="section-info">以真实的行业案例为原型，辅之以大量的真实行业数据，按照国家级教材研发标准为参考开发的综合性企业真实场景的实战教学案例</p>
<p class="section-info">
以真实的行业案例为原型，辅之以大量的真实行业数据，按照国家级教材研发标准为参考开发的综合性企业真实场景的实战教学案例
</p>
<div class="zy">
<table class="table">
<thead>
......@@ -63,7 +65,13 @@
<h3 class="section-subtitle">案例资源示例</h3>
<div class="tab">
<ul class="tab-header">
<li v-for="(item, index) in tabList" :class="{ 'is-active': index === tabActive }" :key="index" @mouseover="tabActive = index">{{ item.title }}</li>
<li
v-for="(item, index) in tabList"
:class="{ 'is-active': index === tabActive }"
:key="index"
@mouseover="tabActive = index">
{{ item.title }}
</li>
</ul>
<ul class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
<li v-for="item in item.children" :key="item"><img :src="item" /></li>
......@@ -100,21 +108,21 @@ const mkList = ref([
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
title: '内置多个开箱即用教学环境'
title: '内置多个开箱即用教学环境',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
title: '内置多门人工智能基础及提升课程资源'
title: '内置多门人工智能基础及提升课程资源',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
title: '支持多种训练环境及教师远程辅助'
title: '支持多种训练环境及教师远程辅助',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_4.png',
title: '支持多种虚拟化技术及部署方式'
}
]
title: '支持多种虚拟化技术及部署方式',
},
],
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
......@@ -122,21 +130,21 @@ const mkList = ref([
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
title: '一站式理论+实践学习平台'
title: '一站式理论+实践学习平台',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
title: '结合配套教学资源实现开箱即用'
title: '结合配套教学资源实现开箱即用',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
title: '工业级产品与教学管理的完美适配'
title: '工业级产品与教学管理的完美适配',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_4.png',
title: '全面支撑课程评价和专业建设数据要求'
}
]
title: '全面支撑课程评价和专业建设数据要求',
},
],
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
......@@ -144,20 +152,20 @@ const mkList = ref([
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
title: '灵活的实验配置实现丰富教学场景支撑'
title: '灵活的实验配置实现丰富教学场景支撑',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
title: '实验成绩多维构成及综合评分制'
title: '实验成绩多维构成及综合评分制',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
title: '实验报告在线灵活填写及自动评分'
title: '实验报告在线灵活填写及自动评分',
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_4.png',
title: '与大赛平台无缝衔接'
}
title: '与大赛平台无缝衔接',
},
],
},
])
......@@ -310,7 +318,7 @@ const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -324,7 +332,7 @@ const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_2.vue
浏览文件 @ 701aab24
......@@ -137,7 +137,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -151,7 +151,7 @@ const jfalList = ref([
background-color: #fff;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_3.vue
浏览文件 @ 701aab24
......@@ -170,7 +170,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -184,7 +184,7 @@ const jfalList = ref([
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/yx_4.vue
浏览文件 @ 701aab24
......@@ -147,7 +147,7 @@ watch(
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -155,7 +155,7 @@ watch(
}
}
.main {
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
}
.tab {
......
app/pages/digital/yx_5.vue
浏览文件 @ 701aab24
......@@ -137,7 +137,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -151,7 +151,7 @@ const jfalList = ref([
background-color: #fff;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......
app/pages/digital/zf_1.vue
浏览文件 @ 701aab24
......@@ -110,7 +110,7 @@ const jfalList = ref([
}
.cover-inner {
height: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
......@@ -124,7 +124,7 @@ const jfalList = ref([
background-color: #f9f8f8;
}
.section-inner {
width: 1200px;
width: 1300px;
margin: 0 auto;
padding: 100px 0;
}
......@@ -170,7 +170,7 @@ const jfalList = ref([
}
}
.img1 {
min-width: 1200px;
min-width: 1300px;
height: 759px;
object-fit: cover;
}
......
app/pages/index.vue
浏览文件 @ 701aab24
<template>
<div class="home">
<!-- 轮播图 -->
<HomeBanner />
<!-- 产教融合 -->
<HomeDigital />
<HomeInternationalDegree />
<HomeAbroadStudy />
<div style="background-color: #fff; overflow: hidden">
<!-- 通知公告 -->
<HomeMenu />
<HomeSchool />
<HomePersonal />
<HomeEnterprise />
<HomeHonor />
<HomePartner />
<HomeProjectNotice />
<!-- 校友故事 -->
<HomeAlumniStories />
</div>
</div>
</template>
<style lang="scss">
.card {
max-width: 1200px;
margin: 80px auto;
.home {
background-color: #fff;
}
</style>
package.json
浏览文件 @ 701aab24
......@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --open",
"dev": "nuxt dev --open --port 4000",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论