提交 4e0f4cfa authored 作者: 王鹏飞's avatar 王鹏飞

v3

上级 da2a7d87
No preview for this file type
......@@ -34,3 +34,17 @@ export function postNes(data) {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
/**
* 获取文章列表
*/
export function getArticleList(params) {
return httpRequest.get('/api/cms/api/v1/articles', { params })
}
/**
* 获取图文列表
*/
export function getImgTextList(params) {
return httpRequest.get('/api/cms/api/v1/img-text', { params })
}
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
export default function(_this) {
return [
{
name: _this.$t('menu.aboutChild.about'),
path: '/about/introduce'
},
{
name: _this.$t('menu.aboutChild.culture'),
path: '/about/culture'
},
{
name: _this.$t('menu.aboutChild.news'),
path: '/about/news'
},
{
name: _this.$t('menu.aboutChild.msg'),
path: '/about/message'
},
{
name: _this.$t('menu.aboutChild.openLesson'),
path: '/about/lesson'
},
{
name: _this.$t('menu.aboutChild.contact'),
path: '/about/contact'
}
]
}
export default function(_this) {
return [
{
name: _this.$t('menu.alumniChild.alumni'),
path: '/alumnus'
},
{
name: _this.$t('menu.alumniChild.alumniZijinghua'),
path: '/alumnus/zijinghua'
},
{
name: _this.$t('menu.alumniChild.alumniStory'),
path: '/alumnus/story'
}
]
}
.w1200 {
max-width: 1200px;
margin: 0 auto;
}
.banner {
height: 650px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.why {
padding: 55px 0;
}
.why-title {
padding: 55px 0;
font-size: 34px;
font-weight: bold;
line-height: 30px;
color: #424242;
text-align: center;
}
.why-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
}
.why-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 232px;
color: #262626;
background: #fff;
img {
height: 70px;
}
.why-item__icon_hover {
display: none;
}
.why-content {
margin-top: 30px;
padding: 0 52px;
font-size: 18px;
font-weight: 400;
line-height: 30px;
text-align: center;
}
&:hover {
color: #fff;
background: #a81840;
box-shadow: 0px 2px 20px rgba(168, 24, 64, 0.2);
.why-item__icon {
display: none;
}
.why-item__icon_hover {
display: block;
}
}
}
.project-list {
padding-bottom: 70px;
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
}
.project-item {
background-color: #fff;
img {
width: 100%;
}
&:hover {
box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
}
}
.qa-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 80px;
li {
padding: 0 5px;
margin-left: 18px;
position: relative;
line-height: 44px;
white-space: nowrap;
text-overflow: ellipsis;
&::before {
content: '';
position: absolute;
left: -15px;
top: 50%;
width: 7px;
height: 7px;
background: #aa1941;
border-radius: 50%;
transform: translate(-50%);
}
}
li:nth-child(4n + 1),
li:nth-child(4n + 2) {
background: rgba(153, 153, 153, 0.39);
}
}
.process {
margin: 55px;
img {
width: 100%;
}
}
export default [
{
name: '最新动态',
path: '/internationalDegree/news'
},
{
name: '常见问题',
path: '/internationalDegree/qa'
}
]
export default [
{
question: '紫荆教育在线国际学位项目毕业生颁发的学位证书与在美国/欧洲颁发的证书有何不同?',
answer: '没有不同,完全一样,具有相同的形式和效力。'
},
{
question: '紫荆教育在线国际学位项目上课形式是怎么样?',
answer:
'项目采用在线学习和线下面授相结合的授课方式。在线学习时,学生可根据自己的时间灵活安排学习,线下面授采用周末或短期集中安排的方式。'
},
{
question: '紫荆教育在线国际学位项目学制多久?',
answer: '学制为16—24个月不等,具体因项目而异。'
},
{
question: '紫荆教育在线国际学位项目能否顺利毕业拿到证书呢?',
answer: '修满规定学分的学员可获得相应项目的学位证书。'
},
{
question: '紫荆教育在线国际学位项目是在职还是全职?',
answer: '项目为在职硕士项目,采用在线学习和线下面授相结合的学习方式。'
},
{
question: '如何申请紫荆教育在线国际学位项目?大概流程是什么?',
answer: '申请流程为:在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。'
},
{
question: '紫荆教育在线国际学位项目面试多少人?录取多少人?',
answer: '采取现场/视频面试的方式,面试人数和录取人数视申请人数和申请资质而定。'
},
{
question: '申请紫荆教育在线国际学位项目需要提交哪些材料?',
answer:
'申请项目需提交:<br />1. 本科学历证书;<br />2. 身份证正、反面照片;<br />3. 一寸白底证件照。<br /><br />学籍注册需提交:<br />1. 本科阶段中、英文双语版成绩单;<br />2. 英文版《教育部学历证书电子注册备案表》;<br />3. 入学协议;<br />4. 英文简历;<br />5. 推荐信2封;<br />6. 缴费凭证。'
},
{
question: '大专毕业后,又通过自考获得本科毕业证和学士学位,能否报考?',
answer: '可以报考,只要获得专科及以上学位证书,即可报考,特别优秀者可放宽条件。'
},
{
question: '紫荆教育在线国际学位项目学费是多少? 可以分期吗?',
answer: '目前在线国际学位项目的学费在6.9万元—12.6万元人民币,由学生在入学前向紫荆教育缴清(不可选择分期)。'
}
]
export default function(_this) {
return [
{
name: _this.$t('menu.college.tit1'),
path: '/services/college'
},
{
name: _this.$t('menu.college.tit2'),
path: '/services/college/project'
},
{
name: _this.$t('menu.college.tit3'),
path: '/services/college/case'
}
]
}
export default [
{
name: '最新动态',
path: '/studyAbroad/news'
},
{
name: '常见问题',
path: '/studyAbroad/qa'
}
]
export default [
{
question: '紫荆教育在线国际学位项目毕业生颁发的学位证书与在美国/欧洲颁发的证书有何不同?',
answer: '没有不同,完全一样,具有相同的形式和效力。'
},
{
question: '紫荆教育在线国际学位项目上课形式是怎么样?',
answer:
'项目采用在线学习和线下面授相结合的授课方式。在线学习时,学生可根据自己的时间灵活安排学习,线下面授采用周末或短期集中安排的方式。'
},
{
question: '紫荆教育在线国际学位项目学制多久?',
answer: '学制为16—24个月不等,具体因项目而异。'
},
{
question: '紫荆教育在线国际学位项目能否顺利毕业拿到证书呢?',
answer: '修满规定学分的学员可获得相应项目的学位证书。'
},
{
question: '紫荆教育在线国际学位项目是在职还是全职?',
answer: '项目为在职硕士项目,采用在线学习和线下面授相结合的学习方式。'
},
{
question: '如何申请紫荆教育在线国际学位项目?大概流程是什么?',
answer: '申请流程为:在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。'
},
{
question: '紫荆教育在线国际学位项目面试多少人?录取多少人?',
answer: '采取现场/视频面试的方式,面试人数和录取人数视申请人数和申请资质而定。'
},
{
question: '申请紫荆教育在线国际学位项目需要提交哪些材料?',
answer:
'申请项目需提交:<br />1. 本科学历证书;2. 身份证正、反面照片;3. 一寸白底证件照。<br />学籍注册需提交:<br />1. 本科阶段中、英文双语版成绩单;2. 英文版《教育部学历证书电子注册备案表》;3. 入学协议;4. 英文简历;5. 推荐信2封;6. 缴费凭证。'
},
{
question: '大专毕业后,又通过自考获得本科毕业证和学士学位,能否报考?',
answer: '可以报考,只要获得专科及以上学位证书,即可报考,特别优秀者可放宽条件。'
},
{
question: '紫荆教育在线国际学位项目学费是多少? 可以分期吗?',
answer: '目前在线国际学位项目的学费在6.9万元—12.6万元人民币,由学生在入学前向紫荆教育缴清(不可选择分期)。'
}
]
<template>
<div class="card">
<div class="card-hd">
<div class="card-hd__title">{{ title }}</div>
<div class="card-hd__aside"><slot name="header-aside"></slot></div>
</div>
<div class="card-bd"><slot /></div>
</div>
</template>
<script>
export default {
props: { title: String },
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss">
.is-pc {
.card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.card-hd__title {
flex: 1;
border-left: 7px solid #aa1941;
padding-left: 20px;
font-size: 32px;
font-weight: bold;
line-height: 1;
}
.card-hd__aside {
font-size: 16px;
color: #9b9b9b;
cursor: pointer;
}
}
.is-h5 {
.card {
margin: 0.2rem 0.15rem;
}
.card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.card-hd__title {
flex: 1;
border-left: 0.03rem solid #aa1941;
padding-left: 0.05rem;
font-size: 0.17rem;
font-weight: bold;
line-height: 1;
}
.card-hd__aside {
font-size: 0.1rem;
color: #9b9b9b;
}
}
</style>
<template>
<main class="app-main">
<h1 class="app-main__title" v-if="title">{{ title }}</h1>
<div class="app-main-inner">
<ul class="app-main-tabs">
<li v-for="(item, index) in tabs" :class="genClassName(item)" :key="index" @click="handleClick(item.path)">
{{ item.name }}
</li>
</ul>
<section class="app-main-container">
<slot></slot>
<article class="app-main-article">
<div>
<slot name="article"></slot>
</div>
</article>
<slot name="footer"></slot>
</section>
</div>
</main>
</template>
<script>
export default {
name: 'AppFrame',
props: {
title: { type: String },
tabs: { type: Array, default: () => [] }
},
data() {
return {}
},
computed: {
activeTab() {
const tabs = [...this.tabs].reverse()
const found = tabs.find(item => item.path === this.$route.path)
return found || tabs.find(item => this.$route.fullPath.includes(item.path))
}
},
methods: {
handleClick(path) {
this.$router.push({ path })
},
genClassName(data) {
if (!this.activeTab) return ''
return this.activeTab.path === data.path ? 'is-active' : ''
}
}
}
</script>
<style lang="scss">
.is-pc {
.app-main {
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
.app-main__title {
font-size: 28px;
font-weight: 500;
line-height: 1;
color: #aa1941;
padding-bottom: 30px;
}
.app-main-inner {
display: flex;
align-items: flex-start;
}
.app-main-tabs {
min-width: 160px;
background: #fff;
padding: 40px 0;
margin-right: 50px;
li {
position: relative;
padding: 0 20px;
height: 40px;
font-size: 22px;
line-height: 40px;
text-align: center;
color: #777777;
cursor: pointer;
&.is-active {
color: rgba(170, 25, 65, 1);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 40px;
background: rgba(170, 25, 65, 1);
}
}
}
li + li {
margin-top: 60px;
}
}
.app-main-container {
flex: 1;
overflow: hidden;
.banner {
width: 100%;
display: block;
height: 320px;
}
}
.app-main-article {
padding: 50px;
background: #fff;
}
}
.is-h5 {
.app-main-tabs {
display: flex;
overflow-x: auto;
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
white-space: nowrap;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
}
}
.banner {
display: block;
width: 100%;
height: 1.2rem;
object-fit: cover;
}
.app-main-article {
padding: 0.2rem 0.15rem;
background: #fff;
}
}
.app-main-article img {
max-width: 100%;
}
</style>
<template>
<app-frame v-bind="$attrs" v-on="$listeners" class="article-detail">
<template #article>
<div class="article-back" @click="$emit('back')">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="article-time">{{ formatDate(data.start_time) }}</div>
<h1 class="article-title">{{ data.title }}</h1>
<div class="article-content" v-html="data.content"></div>
<ArticleRecommend />
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import ArticleRecommend from '@/components/ArticleRecommend'
export default {
components: { AppFrame, ArticleRecommend },
data() {
return {
data: {}
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
this.$emit('loaded', this.data)
},
methods: {
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss">
.is-pc {
.article-back {
margin-bottom: 20px;
display: flex;
align-items: center;
font-size: 16px;
color: #999;
cursor: pointer;
}
.article-time {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.article-title {
font-size: 32px;
font-weight: bold;
color: #141414;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333;
}
}
.is-h5 {
.article-back {
display: flex;
align-items: center;
font-size: 0.1rem;
cursor: pointer;
}
.article-time {
margin-top: 0.15rem;
font-size: 0.1rem;
color: #9b9b9b;
}
.article-title {
margin: 0.1rem 0;
padding: 0 0 0.1rem;
font-size: 0.14rem;
font-weight: 700;
color: #333;
border-bottom: 1px solid #e6e6e6;
}
.article-content {
font-size: 0.12rem;
line-height: 0.24rem;
}
}
</style>
<template>
<div class="article-list">
<article-list-item v-for="(item, index) in dataList" :data="item" v-bind="$attrs" :key="index"></article-list-item>
<el-pagination
class="article-list-pagination"
layout="prev, pager, next"
:page-size="page.size"
:total="page.total"
:current-page.sync="page.currentPage"
@current-change="fetchList"
:hide-on-single-page="true"
>
</el-pagination>
</div>
</template>
<script>
import ArticleListItem from './ArticleListItem.vue'
export default {
name: 'ArticleList',
components: { ArticleListItem },
inheritAttrs: false,
props: {
remote: { type: Object, default: () => ({}) },
// 是否含有翻页
hasPagination: { type: Boolean, default: true },
// 每页多少条数据
limit: { type: Number, default: 20 }
},
data() {
return {
loading: false,
params: this.remote.params || {},
dataList: this.data,
page: { total: 0, size: this.limit, currentPage: 1 }
}
},
watch: {
'remote.params': {
immediate: true,
handler(data) {
this.params = data || {}
}
}
},
async fetch() {
await this.fetchList()
},
methods: {
fetchList() {
/**
* @param function httpRequest api接口
* @param function beforeRequest 接口请求之前
* @param function callback 接口请求成功回调
*/
const { httpRequest, beforeRequest, callback } = this.remote
if (!httpRequest) {
return
}
// 参数设置
let params = this.params
// 翻页参数设置
if (this.hasPagination) {
params.page = this.page.currentPage
params.limit = this.page.size
}
// 接口请求之前
if (beforeRequest) {
params = beforeRequest(params)
}
for (const key in params) {
if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
delete params[key]
}
}
this.loading = true
return httpRequest(params)
.then(res => {
const { data = [], total = 0 } = res.data || {}
this.page.total = total
this.dataList = callback ? callback(data) : data
})
.catch(() => {
this.page.total = 0
this.dataList = []
})
.finally(() => {
this.loading = false
})
}
}
}
</script>
<style lang="scss">
.article-list {
overflow: hidden;
}
.article-list-pagination {
padding: 20px;
text-align: center;
}
.is-h5 {
.article-list {
background: #eee;
margin: -0.2rem -0.15rem;
}
}
</style>
<template>
<div class="article-item">
<app-link :data="data" v-bind="$attrs">
<div class="article-item-inner">
<img :src="data.web_img_uri" class="article-item-pic" loading="lazy" />
<div class="article-item-content">
<div class="article-item-content__date">{{ formatDate(data.start_time) }}</div>
<div class="article-item-content__title">{{ data.title }}</div>
<div class="article-item-content__text">{{ data.abstract }}</div>
</div>
</div>
</app-link>
</div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
name: 'ArticleItem',
components: { AppLink },
inheritAttrs: false,
props: { data: { type: Object, required: true } },
methods: {
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss">
.is-pc {
.article-item {
border-bottom: 1px solid #e6e6e6;
padding: 36px 0;
cursor: pointer;
}
.article-item-inner {
display: flex;
&.set-list {
.article-item-pic {
width: 335px;
object-fit: cover;
height: 130px;
}
.article-item-content__text {
-webkit-line-clamp: 2;
}
}
}
.article-item-pic {
width: 320px;
height: 100%;
// height: fit-content;
// height: 210px;
// object-fit: cover;
}
.article-item-content {
flex: 1;
overflow: hidden;
margin-left: 30px;
}
.article-item-content__date {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.article-item-content__title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.article-item-content__text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
.is-h5 {
.article-list-inner {
display: flex;
}
.article-item {
margin: 0.2rem;
background-color: #fff;
}
.article-item-pic {
display: block;
width: 100%;
// height: fit-content;
// height: 2.99rem;
// object-fit: cover;
}
.article-item-content {
padding: 0.18rem;
}
.article-item-content__date {
font-size: 0.1rem;
color: #aa1941;
line-height: 0.16rem;
}
.article-item-content__title {
margin-top: 0.1rem;
font-size: 0.14rem;
font-weight: 500;
color: #333;
line-height: 0.24rem;
}
.article-item-content__text {
margin-top: 0.2rem;
font-size: 0.1rem;
line-height: 0.2rem;
}
}
</style>
<template>
<div v-if="listData.length">
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" />
<div class="dec">{{ item.title }}</div>
</app-link>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/news/hot' })">查看更多</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
components: { AppLink },
data() {
return {
data: {},
listData: []
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: 'article_news_hot',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
methods: {
goPage(item) {
if (item.source) {
window.open(item.source)
} else {
this.$router.push({ name: 'news-hot-id', params: { id: item.id } })
}
}
}
}
</script>
<style lang="scss" scoped>
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
</style>
......@@ -203,7 +203,7 @@ export default {
{
name: this.$t('menu.industrialCollegeChild.saas'),
isShow: false,
path: 'https://x-learning.ezijing.com',
path: 'https://e-saas.ezijing.com',
pathType: 1
},
{
......@@ -211,16 +211,16 @@ export default {
isShow: false,
path: '/services/employment'
},
{
name: this.$t('menu.industrialCollegeChild.x'),
path: 'https://x.ezijing.com',
pathType: 1
},
{
name: this.$t('menu.industrialCollegeChild.cert'),
isShow: false,
path: '/services/job'
},
// {
// name: this.$t('menu.industrialCollegeChild.x'),
// path: 'https://x.ezijing.com',
// pathType: 1
// },
// {
// name: this.$t('menu.industrialCollegeChild.cert'),
// isShow: false,
// path: '/services/job'
// },
{
name: this.$t('menu.industrialCollegeChild.data'),
isShow: false,
......@@ -230,6 +230,7 @@ export default {
},
{
name: this.$t('menu.degree'),
path: '/internationalDegree',
childern: [
// {
// name: this.$t('menu.degreeChild.bachelor'),
......@@ -260,22 +261,22 @@ export default {
name: this.$t('menu.degreeChild.masterChild.map'),
path: 'https://ciis.ezijing.com',
pathType: 1
},
}
// {
// name: this.$t('menu.degreeChild.masterChild.paln'),
// path: 'https://cfflp.ezijing.com',
// pathType: 1
// },
{
name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
path: 'https://marywood-plus.ezijing.com/',
pathType: 1
},
{
name: '金融学硕士1+1',
path: 'https://sbu-plus.ezijing.com/',
pathType: 1
}
// {
// name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
// path: 'https://marywood-plus.ezijing.com/',
// pathType: 1
// }
// {
// name: '金融学硕士1+1',
// path: 'https://sbu-plus.ezijing.com/',
// pathType: 1
// }
]
},
{
......@@ -303,44 +304,94 @@ export default {
pathType: 1
}
]
}
// {
// name: this.$t('menu.degreeChild.doctor'),
// isShow: false,
// childern: [
// // {
// // name: this.$t('menu.degreeChild.doctorChild.dba'),
// // pathType: 3
// // },
// {
// name: this.$t('menu.degreeChild.doctorChild.edd'),
// path: 'https://cbu-plus.ezijing.com',
// pathType: 1
// },
// {
// name: this.$t('menu.degreeChild.doctorChild.studyAbroad'),
// pathType: 3
// }
// ]
// }
]
},
{
name: this.$t('menu.degreeChild.doctor'),
isShow: false,
name: '留学中心',
path: '/studyAbroad',
childern: [
// {
// name: this.$t('menu.degreeChild.doctorChild.dba'),
// pathType: 3
// },
{
name: this.$t('menu.degreeChild.doctorChild.edd'),
path: 'https://cbu-plus.ezijing.com',
name: '国际大一1+3(即将推出)',
pathType: 3
},
{
name: '工商管理硕士1+1',
path: 'https://marywood-plus.ezijing.com/',
pathType: 1
},
{
name: this.$t('menu.degreeChild.doctorChild.studyAbroad'),
pathType: 3
}
]
name: '管理信息系统硕士1+1',
path: 'https://marywood-plus.ezijing.com/',
pathType: 1
},
{
name: '金融学硕士1+1',
path: 'https://sbu-plus.ezijing.com/',
pathType: 1
},
{
name: this.$t('menu.degreeChild.doctorChild.edd'),
path: 'https://cbu-plus.ezijing.com',
pathType: 1
}
]
},
{
name: this.$t('menu.onlineEdu'),
path: '/services/solution',
name: this.$t('menu.industrialCollegeChild.cert'),
path: '/services/job',
childern: [
{
name: this.$t('menu.onlineEduChild.service'),
isShow: false,
path: '/services/solution'
name: this.$t('menu.industrialCollegeChild.x'),
path: 'https://x.ezijing.com',
pathType: 1
},
{
name: this.$t('menu.onlineEduChild.prp'),
path: 'https://prp.ezijing.com/',
pathType: 1
},
{
name: '高管培训(数字创新管理)',
pathType: 3
}
]
},
// {
// name: this.$t('menu.onlineEdu'),
// path: '/services/solution',
// childern: [
// {
// name: this.$t('menu.onlineEduChild.service'),
// isShow: false,
// path: '/services/solution'
// },
// {
// name: this.$t('menu.onlineEduChild.prp'),
// path: 'https://prp.ezijing.com/',
// pathType: 1
// }
// ]
// },
{
name: this.$t('menu.alumni'),
path: '/alumnus',
......@@ -361,11 +412,11 @@ export default {
path: '/alumnus/story'
}
]
},
{
name: this.$t('menu.apply'),
click: 1
}
// {
// name: this.$t('menu.apply'),
// click: 1
// }
],
time: null,
isEn: false
......@@ -382,7 +433,7 @@ export default {
},
goPage(path, goType) {
if (parseInt(goType) === 3) {
this.$message('暂未开通,请期待')
this.$message('暂未开通,请期待')
} else {
if (path) {
goType ? window.open(path) : this.$router.push({ path: path })
......@@ -434,7 +485,7 @@ export default {
getNameActive() {
return item => {
const currentPath = this.$route.path
if (item.path === currentPath) {
if (currentPath.includes(item.path)) {
return 'name active'
} else {
let className = 'name'
......
<template>
<div>
<template v-if="item.news">
<a
:target="item.news.data.uri !== '' ? '_blank' : '_self'"
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`">
<slot />
</a>
</template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div>
<span class="app-link">
<!-- 外部链接跳转 -->
<a :href="href" :target="target" v-if="href"><slot /></a>
<!-- 站内跳转 -->
<nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
<!-- 事件 -->
<div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
<template v-else><slot /></template>
</span>
</template>
<script>
export default {
props: { item: { type: Object } }
name: 'Link',
props: {
data: { type: Object, default: () => ({}) },
to: [String, Object, Function],
target: { type: String, default: '_blank' }
},
computed: {
href() {
return this.data.href || this.data.uri
},
path() {
if (typeof this.to === 'function') {
return this.to(this.data)
}
return this.data.path || this.to
}
}
}
</script>
<template>
<AppCard title="最新动态" class="news-card">
<template #header-aside><nuxt-link :to="baseUrl">查看更多+</nuxt-link></template>
<div class="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left">
<app-link :data="listData.first" :to="`${baseUrl}/${listData.first.id}`">
<img :src="listData.first.web_img_uri" />
<div class="mantle-box">
<div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div>
</div>
</app-link>
</div>
<ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index">
<app-link :data="item" :to="`${baseUrl}/${item.id}`">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="news-r-title">{{ item.title }}</div>
<div class="del">{{ item.abstract }}</div>
</app-link>
</li>
</ul>
</div>
</AppCard>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
import AppLink from '@/components/Link'
export default {
name: 'NewsCard',
props: { baseUrl: String, default: '/about/news', params: Object },
components: { AppCard, AppLink },
async fetch() {
const params = this.params || { project_id: process.env.projectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
await this.$axios
.get('/api/cms/api/v1/articles', { params, headers: { 'Content-Type': 'application/json' } })
.then(res => {
this.data = res.data.data || []
})
},
data() {
return {
data: []
}
},
computed: {
listData() {
const [first = {}, ...list] = this.data
return { first, list: list || [] }
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.is-pc {
.news-card {
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
.content-box {
display: flex;
justify-content: space-between;
.news-left {
width: 780px;
height: 500px;
position: relative;
img {
width: 100%;
height: 100%;
display: block;
}
.mantle-box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
padding: 30px 37px;
.tit {
font-size: 24px;
font-weight: bold;
line-height: 100%;
color: #ffffff;
width: 696px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.con-txt {
width: 461px;
font-size: 14px;
line-height: 24px;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 10px;
}
}
}
.news-right {
li {
width: 366px;
border-bottom: 1px solid #e3e3e3;
padding-bottom: 19px;
margin-bottom: 30px;
cursor: pointer;
.time {
font-size: 16px;
font-weight: normal;
line-height: 100%;
color: #8e1e22;
}
.news-r-title {
font-size: 22px;
font-weight: bold;
line-height: 30px;
color: #333333;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.del {
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 100%;
color: #999999;
margin-top: 15px;
}
}
}
}
}
}
.is-h5 {
.news-card {
.content-box {
// height: 2.18rem;
position: relative;
img {
width: 100%;
height: 100%;
display: block;
}
.news-left {
position: relative;
}
.mantle-box {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(8, 8, 8, 0.45);
padding-bottom: 0.14rem;
.con-txt {
font-size: 0.12rem;
font-weight: bold;
line-height: 0.17rem;
color: #ffffff;
padding: 0.14rem 0.32rem 0 0.19rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
.news-right {
li {
margin-top: 0.1rem;
padding: 0.13rem 0.14rem 0.11rem 0.12rem;
background: #fff;
.time {
font-size: 0.1rem;
line-height: 100%;
color: #ab0a3d;
}
.news-r-title {
font-size: 0.14rem;
color: #333333;
margin-top: 0.1rem;
line-height: 0.21rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.del {
font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
}
</style>
<template>
<AppCard title="优秀师资">
<swiper ref="mySwiper" :options="swiperOptions" class="teacher-list">
<swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
<div class="teacher-item-inner">
<img :src="item.imgUrl" />
<p>{{ item.name }}</p>
</div>
<div class="teacher-item-cover">
<h3>{{ item.name }}</h3>
<p>{{ item.project }} | {{ item.title }}</p>
<div v-html="item.desc"></div>
</div>
</swiper-slide>
</swiper>
</AppCard>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
export default {
name: 'TeacherCard',
props: { list: { type: Array, default: () => [] } },
components: { AppCard },
data() {
return {
swiperOptions: {
autoplay: true,
loop: true,
slidesPerView: 'auto',
spaceBetween: 20
}
}
}
}
</script>
<style lang="scss">
.teacher-list {
margin-bottom: 60px;
}
.teacher-item {
position: relative;
width: 286px;
height: 258px;
&:hover {
.teacher-item-cover {
transform: translateY(0);
}
}
}
.teacher-item-inner {
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
p {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 20px;
height: 34px;
font-size: 16px;
line-height: 34px;
color: #ffffff;
background: rgba(0, 0, 0, 0.39);
}
}
.teacher-item-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #a81840;
color: #fff;
padding: 10px;
transform: translateY(100%);
transition: all 0.3s;
h3 {
font-size: 20px;
font-weight: 500;
line-height: 28px;
text-align: center;
}
p {
margin-top: 8px;
margin-bottom: 20px;
text-align: center;
}
}
</style>
<template>
<div class="contact-content-box">
<div id="allmap"></div>
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/ae02f022dd9ab2ffec155b98a9c5f809.png" alt=""> -->
<div class="con-mian">
<div class="tit">{{ $t('about.contact.lxTit') }}</div>
<div class="info" v-html="$t('about.contact.contactTxt')"></div>
<div class="follow">
<div class="tits">{{ $t('about.contact.follow') }}</div>
<ul>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5c4a58f1d41f786e7713a5a84069404d.png" alt="">
<div class="name">{{ $t('about.contact.followCodeT1') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/wb-code.png" alt="">
<div class="name">{{ $t('about.contact.followCodeT2') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/douyin-code.png" alt="">
<div class="name" style="margin-top:50px">{{ $t('about.contact.followCodeT3') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/xiaoet-code.png" alt="">
<div class="name">{{ $t('about.contact.followCodeT4') }}</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
if(process.browser){
!function (mapInit) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://api.map.baidu.com/api?v=2.0&ak=Z9Km7UTGFI2fwRrpGp7Mji4ySDsvn30d&callback=mapinit";
window['mapinit'] = function () {
mapInit();
};
document.head.appendChild(script);
}(function () {
// 这里使用BMap
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.336323, 39.998848), 20);
map.enableScrollWheelZoom(true);
// 创建点标记
var marker1 = new BMap.Marker(new BMap.Point(116.336323, 39.998848));
map.addOverlay(marker1);
});
}
}
}
</script>
<style lang="scss" scoped>
#allmap{
// position: relative;
// z-index: 1;
width: 1000px;
height: 320px;
}
.contact-content-box{
position: relative;
z-index: -1;
width: 1000px;
padding-bottom: 100px;
img{
width: 100%;
display: block;
}
.con-mian{
background: #fff;
padding: 60px 75px 62px;
.tit{
font-size: 22px;
font-weight: 500;
line-height: 100%;
}
.info{
font-size: 16px;
line-height: 32px;
color: #333333;
margin-top: 20px;
}
.follow{
padding-top: 97px;
.tits{
font-size: 22px;
font-weight: 500;
line-height: 100%;
color: #333333;
margin-bottom: 30px;
}
ul{
display: flex;
li{
width: 130px;
margin-right: 80px;
img{
display: block;
width: 100%;
}
.name{
font-size: 16px;
margin-top: 22px;
text-align: center;
color: #666666;
}
}
}
}
}
}
</style>
<template>
<div class="culture-content-box">
<div class="video-box">
<video
src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
controls="controls"
preload="auto"
></video>
</div>
<div class="honor-content">
<div class="tit">{{ $t('about.culture.title') }}</div>
<ul>
<li>
<div class="tits">{{ $t('about.culture.item1H1') }}</div>
<div class="h2">{{ $t('about.culture.item1H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item1Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item2H1') }}</div>
<div class="h2">{{ $t('about.culture.item2H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item2Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item3H1') }}</div>
<div class="h2">{{ $t('about.culture.item3H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item3Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item4H1') }}</div>
<div class="h2">{{ $t('about.culture.item4H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item4Txt')"></div>
</div>
</li>
</ul>
<!-- <ul>
<li>
<div class="flex">
<img src="https://zws-imgs-pub.ezijing.com/static/public/9f22659632f43c0b1bb93d6adf49bd4c.png" alt="" />
<div class="text">
2015年<br />
将五道口金融学院<br />
在线教育中心商业化<br />
成立清控紫荆教育
</div>
</div>
<div class="flex">
<img src="https://zws-imgs-pub.ezijing.com/static/public/48b2ab5dfc414d3f6c8500e8328f6b28.png" alt="" />
<div class="text">
2015年9月<br />
签约索菲亚大学推出<br />
在线MBA学位项目
</div>
</div>
</li>
<li>
<div class="flex">
<img src="https://zws-imgs-pub.ezijing.com/static/public/a37b13b8fa98ee448850bbb32a5fcd2f.png" alt="" />
<div class="text">
行业技术优秀服务商<br />
——在线教育资讯网
</div>
</div>
<div class="flex">
<img src="https://zws-imgs-pub.ezijing.com/static/public/00cdb23e91efa803bb711058e251e962.png" alt="" />
<div class="text">
综合实力突出教育集团<br />
——中国教育网
</div>
</div>
</li>
<li>
<div class="flex">
<img src="https://zws-imgs-pub.ezijing.com/static/public/5fdb3a042efcb0f8fb0eea8d4376eacc.png" alt="" />
<div class="text">
年度城市教育行业<br />
影响力机构<br />
——巨量引擎
</div>
</div>
</li>
</ul> -->
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.culture-content-box {
width: 1000px;
padding-bottom: 100px;
img {
width: 100%;
display: block;
}
.video-box {
width: 1000px;
height: 552px;
video {
display: block;
width: 100%;
height: 100%;
background-color: #000;
}
}
.honor-content {
padding: 50px 90px 20px;
background: #fff;
.tit {
font-size: 22px;
font-weight: 500;
line-height: 100%;
color: #424242;
margin-bottom: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 70px;
width: 370px;
min-height: 430px;
margin-top: 30px;
&:nth-child(even) {
margin-right: 0;
}
.tits {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #424242;
margin-bottom: 12px;
}
.h2 {
height: 46px;
line-height: 100%;
border-bottom: 1px solid #98002e;
font-size: 20px;
line-height: 100%;
color: #424242;
}
.txts {
padding-top: 18px;
.p {
font-size: 16px;
line-height: 34px;
color: #424242;
}
}
}
}
// ul {
// li {
// display: flex;
// justify-content: space-between;
// margin-bottom: 80px;
// .flex {
// align-items: center;
// display: flex;
// }
// img {
// width: 211px;
// display: block;
// }
// .text {
// font-size: 16px;
// font-weight: 300;
// line-height: 32px;
// color: #424242;
// margin-left: 38px;
// }
// }
// }
}
}
</style>
<template>
<div class="intr-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" alt="" />
<div class="text-content">
<div class="title">{{ $t('about.project.title') }}</div>
<div class="text-intr" v-html="$t('about.project.text')"></div>
<div class="garish-content">
<div class="flex-box">
<div class="li w184">
<div class="col-txt">
12<span>{{ $t('about.project.unit1') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText1') }}</div>
</div>
<div class="li w180">
<div class="col-txt">
535<span>{{ $t('about.project.unit2') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText2') }}</div>
</div>
<div class="li w249">
<div class="col-txt">600<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText3') }}</div>
</div>
<div class="li w186">
<div class="col-txt">700<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText4') }}</div>
</div>
</div>
<div class="flex-box mar-t-35">
<div class="li w188">
<div class="col-txt">1000<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText5') }}</div>
</div>
<div class="li w180">
<div class="col-txt">4800<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText6') }}</div>
</div>
<div class="li w249">
<div class="col-txt">6000<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText7') }}</div>
</div>
<div class="li w186">
<div class="col-txt">
<span class="unit3Text">{{ $t('about.project.unit3Text') }}</span
><span>{{ $t('about.project.unit3') }}+</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText8') }}</div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-nav">
<div :class="indexActive === 0 ? 'li active' : 'li'" @click="changeIndex(0)">
<div class="t1">{{ $t('about.project.tabBtn1Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn1Txt')"></div>
</div>
<div :class="indexActive === 1 ? 'li active' : 'li'" @click="changeIndex(1)">
<div class="t1">{{ $t('about.project.tabBtn2Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn2Txt')"></div>
</div>
<div :class="indexActive === 2 ? 'li active' : 'li'" @click="changeIndex(2)">
<div class="t1">{{ $t('about.project.tabBtn3Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn3Txt')"></div>
</div>
</div>
<div class="tab-con" v-if="indexActive === 0" v-html="$t('about.project.tabCon1')"></div>
<div class="tab-con tab-con2" v-if="indexActive === 1" v-html="$t('about.project.tabCon2')"></div>
<div class="tab-con tab-con3" v-if="indexActive === 2" v-html="$t('about.project.tabCon3')"></div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
indexActive: 0
}
},
methods: {
changeIndex(n) {
this.indexActive = n
}
}
}
</script>
<style lang="scss" scoped>
.intr-content-box {
width: 1000px;
padding-bottom: 100px;
img {
width: 100%;
display: block;
}
.text-content {
padding: 50px 64px 81px;
box-sizing: border-box;
background: #fff;
.title {
font-size: 22px;
font-weight: 500;
color: #424242;
margin-bottom: 15px;
}
.text-intr {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
.garish-content {
padding-top: 66px;
.flex-box {
display: flex;
width: 800px;
margin: 0 auto;
&.mar-t-35 {
padding-top: 35px;
}
.li {
box-sizing: border-box;
padding-top: 6px;
// height: 70px;
border-right: 1px solid #c3c3c3;
&:last-child {
border: none;
}
.col-txt {
font-size: 36px;
font-weight: 500;
line-height: 30px;
color: #aa1941;
text-align: center;
.unit3Text {
font-size: 36px;
}
span {
font-size: 24px;
}
}
.n-txt {
font-size: 16px;
font-family: auto;
// line-height: 34px;
text-align: center;
color: #666666;
}
&.w184 {
width: 184px;
}
&.w180 {
width: 180px;
}
&.w249 {
width: 249px;
}
&.w186 {
width: 186px;
}
&.w188 {
width: 188px;
}
}
}
}
.tab-content {
padding-top: 80px;
.tab-nav {
display: flex;
justify-content: space-between;
.li {
width: 280px;
height: 150px;
box-sizing: border-box;
padding-top: 38px;
background: #fbfbfb;
// margin-right: 16px;
cursor: pointer;
&.active {
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #aa1941;
}
}
.t1 {
text-align: center;
line-height: 100%;
font-size: 24px;
font-weight: 500;
color: #aa1941;
}
.t2 {
font-size: 20px;
line-height: 100%;
color: #424242;
margin-top: 16px;
text-align: center;
font-family: auto;
}
}
}
.tab-con {
width: 872px;
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
padding: 20px 48px;
margin-top: 40px;
position: relative;
font-size: 16px;
font-weight: 400;
line-height: 40px;
color: #333333;
::v-deep {
span {
color: rgba(170, 25, 65, 1);
font-size: 28px;
font-weight: bold;
}
}
&.tab-con2 {
&::after {
top: -15px;
left: 50%;
transform: translateX(-50%);
}
}
&.tab-con3 {
&::after {
top: -15px;
left: auto;
right: 140px;
}
}
&::after {
content: '';
position: absolute;
top: -15px;
left: 140px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #fff;
}
}
}
}
</style>
<template>
<div class="news-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="limit" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
export default {
props: {
type: {
type: String,
default: 'article_news'
}
},
components: { appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.type,
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
}
</style>
<template>
<ul class="tab-content">
<li
v-for="(item, index) in dataNav"
:class="item.pathActive.findIndex(path => {
return $route.path.includes(path)
}) !== -1 && 'active'"
:key="index"
@click="goPage(item.goPath)"
>
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
dataNav: [
{
name: this.$t('menu.aboutChild.about'),
goPath: '/about/introduce',
pathActive: ['/about/introduce']
},
{
name: this.$t('menu.aboutChild.culture'),
goPath: '/about/culture',
pathActive: ['/about/culture']
},
{
name: this.$t('menu.aboutChild.news'),
goPath: '/about/news',
pathActive: ['/about/news', '/about/news-detail']
},
{
name: this.$t('menu.aboutChild.msg'),
goPath: '/about/message',
pathActive: ['/about/message', '/about/message-detail']
},
{
name: this.$t('menu.aboutChild.openLesson'),
goPath: '/about/lesson',
pathActive: ['/about/lesson', '/about/lesson-detail']
},
{
name: this.$t('menu.aboutChild.contact'),
goPath: '/about/contact',
pathActive: ['/about/contact']
}
// {
// name: '招聘信息',
// goPath: '',
// pathActive: ['']
// }
]
}
},
mounted() {
},
methods: {
goPage(path) {
this.$router.push({
path: path
})
}
}
}
</script>
<style lang="scss" scoped>
.tab-content{
width: 160px;
// height: 420px;
height: fit-content;
background: #fff;
padding-top: 35px;
padding-bottom: 43px;
li{
position: relative;
width: 100%;
font-size: 22px;
line-height: 40px;
text-align: center;
color: #777777;
margin-bottom: 60px;
cursor: pointer;
&:last-child{
margin: 0;
}
&.active{
color: rgba(170, 25, 65, 1);
&::after{
content: '';
width: 8px;
height: 40px;
background: rgba(170, 25, 65, 1);
position: absolute;
top: 0;
left: 0;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="party-content-box">
<img src="https://webapp-pub.ezijing.com/pages/ciis/pc20210913/Banner.jpg" alt="" class="banner" />
<div class="party-con-mian">
<div class="tit">{{ $t('flower.contentTit1') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP1') }}</p>
</div>
<div class="tit">{{ $t('flower.contentTit2') }}</div>
<ul class="text-con">
<li>{{ $t('flower.contentP21') }}</li>
<li>{{ $t('flower.contentP22') }}</li>
<li>{{ $t('flower.contentP23') }}</li>
<li>{{ $t('flower.contentP24') }}</li>
</ul>
<div class="tit">{{ $t('flower.contentTit3') }}</div>
<ul class="text-con">
<li>{{ $t('flower.contentP31') }}</li>
<li>{{ $t('flower.contentP32') }}</li>
<li>{{ $t('flower.contentP33') }}</li>
<li>{{ $t('flower.contentP34') }}</li>
<li>{{ $t('flower.contentP35') }}</li>
<li>{{ $t('flower.contentP36') }}</li>
</ul>
<div class="tit">{{ $t('flower.contentTit4') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP4') }}</p>
</div>
<div class="tit">{{ $t('flower.contentTit5') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP5') }}</p>
</div>
<div class="text-con" style="text-align:right">
<p>{{ $t('flower.contentP61') }}</p>
<p>{{ $t('flower.contentP62') }}</p>
<p>{{ $t('flower.contentP63') }}</p>
<p>{{ $t('flower.contentP64') }}</p>
<p>{{ $t('flower.contentP65') }}</p>
<p>{{ $t('flower.contentP66') }}</p>
<p>{{ $t('flower.contentP67') }}</p>
<p>{{ $t('flower.contentP68') }}</p>
</div>
<div class="text-con" style="text-align:right">
<p>{{ $t('flower.contentP7') }}</p>
</div>
<div class="alumnus-code" style="margin:auto">
<p class="t">{{ $t('flower.contentP8') }}</p>
<img src="https://webapp-pub.ezijing.com/pages/ciis/pc20210913/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg" />
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.party-content-box {
width: 1000px;
padding-bottom: 100px;
img {
width: 100%;
display: block;
}
.party-con-mian {
padding: 50px;
background: #fff;
.tit {
font-size: 22px;
line-height: 100%;
color: #424242;
margin-bottom: 20px;
}
.text-con {
margin-bottom: 35px;
p,
li {
font-size: 16px;
line-height: 32px;
color: #424242;
}
li {
list-style-type: decimal;
text-indent: 1em;
margin-left: 30px;
}
}
}
.alumnus-code {
width: 230px;
margin: 0 auto;
padding-top: 28px;
.t {
font-size: 22px;
line-height: 100%;
margin-bottom: 24px;
color: #424242;
text-align: center;
}
img {
width: 100%;
display: block;
}
}
}
</style>
<template>
<div class="party-content-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/54e010d17c5cf9a36ef3addd9e893a4f.png" alt="" class="banner">
<div class="party-con-mian">
<div class="tit">{{ $t('alumni.contentTit') }}</div>
<div class="text-con">
<p>{{ $t('alumni.contentP1') }}</p>
<p>{{ $t('alumni.contentP2') }}</p>
<p>{{ $t('alumni.contentP3') }}</p>
</div>
<div class="tit">{{ $t('alumni.fbTit') }}</div>
<div class="text-con2">
{{ $t('alumni.fbDes') }}
</div>
<div class="img-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/8d402595ac1eb1c5142b548fa84be60d.png" alt="" class="img1">
<img src="https://zws-imgs-pub.ezijing.com/static/public/560f659bcb9896f6dde674beeac1fd15.png" alt="" class="img2">
</div>
<div class="end-time">{{ $t('alumni.time') }}</div>
<div class="alumnus-code">
<div class="t">{{ $t('alumni.followTit') }}</div>
<img src="https://webapp-pub.ezijing.com/www/pc/alum-code.png" alt="">
<div class="dec">{{ $t('alumni.followDes') }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.party-content-box{
width: 1000px;
padding-bottom: 100px;
img{
width: 100%;
display: block;
}
.party-con-mian{
padding: 50px;
background: #fff;
.tit{
font-size: 22px;
line-height: 100%;
color: #424242;
margin-bottom: 20px;
}
.text-con{
p{
font-size: 16px;
font-family: SourceHanSansCN-Light;
line-height: 32px;
color: #424242;
margin-bottom: 35px;
}
}
.text-con2{
font-size: 16px;
font-family: SourceHanSansCN-Light;
line-height: 100%;
color: #424242;
margin-bottom: 25px;
}
.img-content{
display: flex;
.img1{
width: 389px;
height: 256px;
display: block;
}
.img2{
width: 383px;
height: 241px;
display: block;
margin-left: 105px;
}
}
.end-time{
text-align: right;
margin-top: 62px;
font-size: 16px;
color: #424242;
}
}
.alumnus-code{
width: 202px;
margin: 0 auto;
padding-top: 28px;
.t{
font-size: 22px;
line-height: 100%;
margin-bottom: 24px;
color: #424242;
// padding-left: 26px;
text-align: center;
}
img{
width: 100%;
display: block;
}
.dec{
font-size: 16px;
line-height: 100%;
color: #424242;
margin-top: 10px;
text-align: center;
}
}
}
</style>
<template>
<ul class="tab-content">
<li
v-for="(item, index) in dataNav"
:class="
item.pathActive.findIndex(path => {
return path === $route.path
}) !== -1 && 'active'
"
:key="index"
@click="goPage(item.goPath)"
>
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
dataNav: [
{
name: this.$t('menu.alumniChild.alumni'),
goPath: '/alumnus',
pathActive: ['/alumnus']
},
{
name: this.$t('menu.alumniChild.alumniZijinghua'),
goPath: '/alumnus/zijinghua',
pathActive: ['/alumnus/zijinghua']
},
{
name: this.$t('menu.alumniChild.alumniStory'),
goPath: '/alumnus/story',
pathActive: ['/alumnus/story']
},
]
}
},
mounted() {},
methods: {
goPage(path) {
this.$router.push({
path: path
})
}
}
}
</script>
<style lang="scss" scoped>
.tab-content {
width: 160px;
height: fit-content;
background: #fff;
padding-top: 35px;
padding-bottom: 43px;
li {
position: relative;
width: 100%;
height: 40px;
font-size: 22px;
line-height: 40px;
text-align: center;
color: #777777;
margin-bottom: 60px;
cursor: pointer;
&:last-child {
margin: 0;
}
&.active {
color: rgba(170, 25, 65, 1);
&::after {
content: '';
width: 8px;
height: 40px;
background: rgba(170, 25, 65, 1);
position: absolute;
top: 0;
left: 0;
}
}
}
}
</style>
<template>
<div class="alumni-content">
<div :class="isScale ? 'title-content max-width scale' : 'title-content max-width'">
<div class="left-title">
<div class="line"></div>
<div class="text">{{ $t('home.alumni.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/alumnus/story' })">
{{ $t('viewMore') }}
</div>
</div>
<div :class="isScale ? 'small-tit max-width scale' : 'small-tit max-width'">{{ $t('home.alumni.des') }}</div>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="home-alumni">
<AppCard title="校友故事" class="max-width">
<template #header-aside><nuxt-link to="/alumnus/story">查看更多+</nuxt-link></template>
<p class="tips">You are What you together,结识6000+ 同样优秀的人!</p>
</AppCard>
<div class="swiper-content">
<div v-swiper:mySwiper="swiperOptions" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{
news: {
data: item,
path: '/alumnus/story'
}
}">
<img :src="item.web_img_uri">
<app-link :data="item" :to="`/alumnus/story/${item.id}`">
<img :src="item.web_img_uri" loading="lazy" />
<div class="text">{{ item.title }}</div>
</app-link>
</div>
......@@ -30,31 +19,20 @@
</div>
</template>
<script>
import appLink from '@/components/Link'
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
components: {
appLink
},
data () {
const _this = this
components: { AppCard, AppLink },
data() {
return {
isScale: false,
listData: [],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
swiperOptions: {
autoplay: true,
delay: 3000,
delay: 5000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
on: {
init() {
_this.swiper.slideNext()
}
}
spaceBetween: 10
}
}
},
......@@ -66,118 +44,79 @@ export default {
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
},
goPage(item) {
if (item.source === '') {
this.$router.push({
path: '/about/news-detail',
query: {
id: item.id
}
})
} else {
window.open(item.source)
}
}
}
}
</script>
<style lang="scss" scoped>
.max-width{
width: 1200px;
.max-width {
max-width: 1200px;
margin: 0 auto;
}
.alumni-content{
min-width: 1200px;
padding-top: 89px;
.title-content{
display: flex;
.left-title{
display: flex;
.line{
width: 6px;
height: 34px;
background: #AA1941;
}
.text{
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
}
}
.right-text{
margin-left: auto;
margin-top: 18px;
font-size: 16px;
font-weight: 300;
line-height: 34px;
color: #9B9B9B;
cursor: pointer;
}
}
.small-tit{
.home-alumni {
padding-top: 60px;
.tips {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-top: 12px;
margin-bottom: 12px;
}
.swiper-content{
padding-top: 37px;
// overflow: auto;
// width: 100%;
.swiper-slide{
.swiper-content {
::v-deep .swiper-wrapper {
align-items: center;
}
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
.text{
overflow: hidden;
.text {
position: absolute;
bottom: 0;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
color: #FEFEFE;
color: #fefefe;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
img{
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
}
.swiper-slide-active {
width: 423px;
width: 424px;
height: 266px;
margin-top: 0;
img{
width: 100%;
height: 100%;
display: block;
}
}
}
}
.scale{
transform: scale(0.85);
.is-h5 {
.home-alumni {
margin: 0.2rem 0.15rem;
padding: 0;
.tips {
font-size: 0.1rem;
font-weight: 500;
margin-bottom: 0.1rem;
}
.swiper-slide {
position: relative;
width: 2.1rem;
height: 1.22rem;
}
.swiper-slide-active {
width: 2.1rem;
height: 1.34rem;
}
}
}
</style>
<template>
<div class="banner-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<div class="home-banner">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in listData" :key="index">
<template v-if="item.uri">
<a :href="item.uri" target="_blank">
<img :src="item.web_img_uri">
<a :href="item.uri" target="_black">
<img :src="item.web_img_uri" />
</a>
</template>
<template v-else>
<img :src="item.web_img_uri">
<img :src="item.web_img_uri" />
</template>
</div>
</div>
</div>
</swiper-slide>
</swiper>
<template v-if="!isMobile">
<div class="prev-button"></div>
<div class="next-button"></div>
</template>
</div>
</template>
<script>
const _this = this
export default {
data () {
export default {
name: 'banner',
data() {
return {
listData: [],
swiperOption: {
speed: 400,
autoplay: true,
delay: 4500,
delay: 3000,
observer: true,
observerParent: true,
navigation: {
......@@ -39,49 +39,31 @@
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: 'ad_banner'
}
this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => {
return res.data.data
})
const params = { project_id: process.env.projectId, type_tag: 'ad_banner' }
this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
}
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.banner-content{
.home-banner {
position: relative;
width: 100%;
min-width: 1200px;
.swiper-wrapper{
.swiper-wrapper {
width: 100%;
display: flex;
.swiper-slide{
width: 100%;
img{
.swiper-slide {
img {
width: 100%;
display: block;
}
}
}
.prev-button{
.prev-button {
position: absolute;
top: 50%;
left: 30px;
......@@ -92,7 +74,7 @@
z-index: 999;
cursor: pointer;
}
.next-button{
.next-button {
position: absolute;
top: 50%;
right: 30px;
......
......@@ -143,7 +143,7 @@ export default {
},
goPage(path) {
if (path === '') {
this.$message('暂未开通,请期待。')
this.$message('暂未开通,请期待。')
return
}
window.open(path)
......
......@@ -3,8 +3,8 @@
<div class="title">教育服务</div>
<ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.icon" alt="" class="icon">
<img :src="item.iconActive" alt="" class="icon-active">
<img :src="item.icon" alt="" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active" />
<div class="text" v-html="item.text"></div>
</li>
</ul>
......@@ -18,37 +18,51 @@ export default {
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/3118a654ec7f92a52b7d04f2f1f5989a.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/37488a824991634e9283c870d976eb79.png',
text: this.$t('home.service.x'), path: 'https://x.ezijing.com', pathType: 0
text: this.$t('home.service.x'),
path: 'https://x.ezijing.com',
pathType: 0
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/7bea5e01e4e4c92e104bb1d73d313500.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8b624145e8cd4a8c38f108dbd0efc3eb.png',
text: this.$t('home.service.program'), path: '/services/major', pathType: 1
text: this.$t('home.service.program'),
path: '/services/major',
pathType: 1
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/0e5522064d9070290b3d541a485d469f.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/01d9b50bd0e2e2355a18f486181d710a.png',
text: this.$t('home.service.college'), path: '/services/college', pathType: 1
text: this.$t('home.service.college'),
path: '/services/college',
pathType: 1
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/0912f621abe188ccc84df6520a8fecf9.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/759a550044932bcf0f1159d103361ed2.png',
text: this.$t('home.service.high'), path: '/services/employment', pathType: 1
text: this.$t('home.service.high'),
path: '/services/employment',
pathType: 1
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6cf5b6010dd7d35a80d4acc270db8a86.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/4e86da38599e6fcfdd53f459df2f0a16.png',
text: this.$t('home.service.online'), path: '', pathType: 0
text: this.$t('home.service.online'),
path: '',
pathType: 0
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6db512b8b2b4501651e6f9bc520d7379.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/bcbc44b065ea26146a68750e82aa058c.png',
text: this.$t('home.service.career'), path: '/services/job', pathType: 1
text: this.$t('home.service.career'),
path: '/services/job',
pathType: 1
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/9603456c7edb101ec5469f92e9e21553.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ae17f20f43525893b263fef139ea7006.png',
text: this.$t('home.service.more'), path: '', pathType: 0
text: this.$t('home.service.more'),
path: '',
pathType: 0
}
]
}
......@@ -56,7 +70,7 @@ export default {
methods: {
goPage(path, type) {
if (path === '') {
this.$message('暂未开通,请期待。')
this.$message('暂未开通,请期待。')
return
} else {
!type ? window.open(path) : this.$router.push({ path: path })
......@@ -67,47 +81,47 @@ export default {
</script>
<style lang="scss" scoped>
.service-content{
.service-content {
padding-top: 44px;
.title{
.title {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-bottom: 20px;
}
.nav-content{
.nav-content {
display: flex;
li{
li {
width: 156px;
height: 186px;
background: #FFFFFF;
background: #ffffff;
padding-top: 36px;
margin-right: 20px;
cursor: pointer;
transition: all .5s;
img{
transition: all 0.5s;
img {
width: 64px;
height: 64px;
display: block;
margin: 0 auto;
}
.icon-active{
.icon-active {
display: none;
}
&:hover{
&:hover {
background: rgba(170, 25, 65, 1);
.text{
.text {
color: #fff;
}
.icon{
.icon {
display: none;
}
.icon-active{
.icon-active {
display: block;
}
}
.text{
.text {
text-align: center;
font-size: 14px;
font-weight: 400;
......@@ -118,7 +132,7 @@ export default {
}
}
}
.max-width-center{
.max-width-center {
width: 1212px;
margin: 0 auto;
}
......
<template>
<div class="msg-content">
<div class="title-content">
<div class="left-title">
<div class="line"></div>
<div class="text">{{ $t('home.msg.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/about/message', query: { type: 'img_text_school' } })">
{{ $t('viewMore') }}
</div>
</div>
<div class="swiper-content">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/about/message' } }">
<img :src="item.web_img_uri" />
<AppCard :title="$t('home.msg.title')" class="home-headmaster">
<template #header-aside
><nuxt-link to="/about/message">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="gallery-top">
<swiper :options="swiperOptionTop" ref="swiperTop">
<swiper-slide v-for="(item, index) in listData" :key="index">
<app-link :data="item" :to="`/about/message/${item.id}`">
<img :src="item.web_img_uri" loading="lazy" />
</app-link>
</swiper-slide>
</swiper>
</div>
<div class="gallery-thumbs">
<swiper :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide v-for="(item, index) in listData" :key="index">
<div class="thumbs">
{{ item.title }}
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</swiper-slide>
</swiper>
<div class="swiper-btn swiper-button-prev">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
</div>
<div class="swiper-btn swiper-button-next">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
</div>
<text-swiper :listData="listData" @slideTo="handleSlideTo" v-if="listData.length" />
</div>
</AppCard>
</template>
<script>
import appLink from '@/components/Link'
import textSwiper from './textSwiper.vue'
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
components: {
appLink,
textSwiper
},
components: { AppCard, AppLink },
data() {
const that = this
return {
listData: [],
swiperOption: {
speed: 400,
autoplay: false,
delay: 3000,
loop: false,
// pagination: {
// el: '.swiper-pagination',
// clickable: true
// },
// direction: 'vertical',
height: 500
// autoHeight: true
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
// project_id: process.env.projectId,
project_id: '6800242743894343680',
type_tag: 'img_text_school'
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
computed: {
// swiper() {
// return this.$refs.mySwiper.swiper;
// }
},
methods: {
handleSlideTo(index) {
this.$refs.mySwiper.swiper.slideTo(index)
}
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
</script>
<style lang="scss" scoped>
.msg-content {
padding-top: 90px;
width: 1200px;
.home-headmaster {
padding-top: 80px;
max-width: 1200px;
margin: 0 auto;
.title-content {
display: flex;
.left-title {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
.gallery-top {
height: 500px;
margin-top: 15px;
overflow: hidden;
img {
display: block;
width: 100%;
object-fit: cover;
}
}
.right-text {
margin-left: auto;
margin-top: 18px;
}
.gallery-thumbs {
padding: 0 25px;
margin-top: 5px;
position: relative;
.swiper-slide {
width: 266px;
height: 44px;
padding: 0 20px;
margin: 7px 0;
line-height: 22px;
font-size: 16px;
font-weight: 300;
line-height: 34px;
color: #9b9b9b;
cursor: pointer;
}
}
.swiper-content {
height: 500px;
margin-top: 15px;
border-right: 1px solid #a81840;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.swiper-slide-active,
.swiper-slide:hover {
color: #a81840;
}
.swiper-btn {
width: 20px;
height: 35px;
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
user-select: none;
cursor: pointer;
img {
width: 100%;
height: 520px;
height: 100%;
display: block;
}
::v-deep {
.swiper-pagination-bullets {
right: 34px !important;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
border-radius: 100%;
border: 1px solid #fff;
box-sizing: border-box;
background: none;
opacity: 1;
margin: 10px 0;
}
.swiper-pagination-bullet-active {
width: 6px;
height: 31px;
border-radius: 25px;
background: #fff;
.swiper-button-next {
left: unset;
right: -5px;
}
}
.is-h5 {
.home-headmaster {
margin: 0.2rem 0.15rem;
padding: 0;
.gallery-top {
height: 1.36rem;
}
}
}
......
<template>
<div class="home-menu">
<div class="menu-card" v-for="(row, index) in rows" :key="index">
<h2 class="menu-card__title">{{ row.title }}</h2>
<ul class="menu-card-nav">
<li v-for="(item, index) in row.children" :key="index">
<AppLink :data="item">
<img :src="item.icon" alt="" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active" />
<div class="text" v-html="item.text"></div>
</AppLink>
</li>
</ul>
</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
components: { AppLink },
data() {
return {
rows: [
{
title: this.$t('home.college.title'),
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_1.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_1_hover.png',
text: this.$t('home.college.corePower'),
path: '/services/college'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_2.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_2_hover.png',
text: this.$t('home.college.program'),
path: '/services/major'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_3.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_3_hover.png',
text: this.$t('home.college.saas'),
href: 'https://e-saas.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_4.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_4_hover.png',
text: this.$t('home.college.internship'),
path: '/services/employment'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_5.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_5_hover.png',
text: this.$t('home.college.data'),
path: '/services/dataAnalysis'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_6.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_6_hover.png',
text: '服务案例',
path: '/services/college/case'
}
]
},
{
title: '在线国际学位',
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_kelley.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_kelley_hover.png',
text: this.$t('home.degree.msf'),
href: 'https://kelley.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cu.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cu_hover.png',
text: this.$t('home.degree.med'),
href: 'https://cu.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_ciis.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_ciis_hover.png',
text: this.$t('home.degree.map'),
href: 'https://ciis.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_hover.png',
text: this.$t('home.degree.mba'),
href: 'https://marywood.ezijing.com/'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_shms.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_shms_hover.png',
text: this.$t('home.degree.international'),
href: 'https://shms.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_caas.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_caas_hover.png',
text: this.$t('home.degree.caas'),
href: 'https://caas.ezijing.com'
}
]
},
{
title: '留学中心',
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_gd_plus.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_gd_plus_hover.png',
text: '国际大一<br/>1+3',
onClick: this.showMessage
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus1.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus1_hover.png',
text: '工商管理硕士<br/>1+1',
href: 'https://marywood-plus.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus2.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus2_hover.png',
text: '管理信息系统硕士<br/>1+1',
href: 'https://marywood-plus.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_sbu_plus.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_sbu_plus_hover.png',
text: '金融学硕士<br/>1+1',
href: 'https://sbu-plus.ezijing.com/'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cbu_plus.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cbu_plus_hover.png',
text: '工商管理博士<br/>DBA',
href: 'https://cbu-plus.ezijing.com'
}
]
},
{
title: '职业证书',
children: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_x.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_x_hover.png',
text: this.$t('home.college.x'),
href: 'https://x.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_prp.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_prp_hover.png',
text: this.$t('home.onlineEdu.prp'),
href: 'https://prp.ezijing.com'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx_hover.png',
text: '高管培训<br/>数字创新管理',
onClick: this.showMessage
}
]
}
]
}
},
methods: {
showMessage() {
this.$message('暂未开通,敬请期待。')
}
}
}
</script>
<style lang="scss" scoped>
.home-menu {
max-width: 1200px;
margin: 0 auto;
.menu-card {
padding-top: 44px;
}
.menu-card__title {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-bottom: 20px;
}
.menu-card-nav {
display: flex;
li {
width: 156px;
height: 186px;
background: #ffffff;
padding-top: 36px;
margin-right: 20px;
cursor: pointer;
transition: all 0.5s;
img {
height: 64px;
display: block;
margin: 0 auto;
}
.icon-active {
display: none;
}
&:hover {
background: rgba(170, 25, 65, 1);
.text {
color: #fff;
}
.icon {
display: none;
}
.icon-active {
display: block;
}
}
.text {
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666666;
margin-top: 20px;
}
}
}
}
</style>
......@@ -70,7 +70,7 @@ export default {
methods: {
goPage(path, type) {
if (path === '') {
this.$message('暂未开通,请期待。')
this.$message('暂未开通,请期待。')
return
} else {
!type ? window.open(path) : this.$router.push({ path: path })
......
<template>
<div class="service-content max-width-center">
<div class="title">{{$t('home.onlineEdu.title')}}</div>
<div class="title">{{ $t('home.onlineEdu.title') }}</div>
<ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.icon" alt="" class="icon">
<img :src="item.iconActive" alt="" class="icon-active">
<img :src="item.icon" alt="" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active" />
<div class="text" v-html="item.text"></div>
</li>
</ul>
......@@ -18,12 +18,16 @@ export default {
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01_on.png',
text: this.$t('home.onlineEdu.service'), path: '/services/solution', pathType: 1
text: this.$t('home.onlineEdu.service'),
path: '/services/solution',
pathType: 1
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02.png',
iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02_on.png',
text: this.$t('home.onlineEdu.prp'), path: 'https://prp.ezijing.com/', pathType: 0
text: this.$t('home.onlineEdu.prp'),
path: 'https://prp.ezijing.com/',
pathType: 0
}
]
}
......@@ -31,7 +35,7 @@ export default {
methods: {
goPage(path, type) {
if (path === '') {
this.$message('暂未开通,请期待。')
this.$message('暂未开通,请期待。')
return
} else {
!type ? window.open(path) : this.$router.push({ path: path })
......@@ -42,47 +46,47 @@ export default {
</script>
<style lang="scss" scoped>
.service-content{
.service-content {
padding-top: 44px;
.title{
.title {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-bottom: 20px;
}
.nav-content{
.nav-content {
display: flex;
li{
li {
width: 156px;
height: 186px;
background: #FFFFFF;
background: #ffffff;
padding-top: 36px;
margin-right: 20px;
cursor: pointer;
transition: all .5s;
img{
transition: all 0.5s;
img {
width: 64px;
height: 64px;
display: block;
margin: 0 auto;
}
.icon-active{
.icon-active {
display: none;
}
&:hover{
&:hover {
background: rgba(170, 25, 65, 1);
.text{
.text {
color: #fff;
}
.icon{
.icon {
display: none;
}
.icon-active{
.icon-active {
display: block;
}
}
.text{
.text {
text-align: center;
font-size: 14px;
font-weight: 400;
......@@ -93,7 +97,7 @@ export default {
}
}
}
.max-width-center{
.max-width-center {
width: 1212px;
margin: 0 auto;
}
......
<template>
<div class="class-content">
<div class="title-content">
<div class="left-title">
<div class="line"></div>
<div class="text">{{ $t('home.openLesson.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/about/lesson', query: { type: 'article_publish_class' } })">
{{ $t('viewMore') }}
</div>
</div>
<div class="content-box">
<app-link :item="{
news: {
data: listData.first,
path: '/about/lesson'
}
}">
<img :src="listData.first.web_img_uri" alt="" class="banner">
<AppCard :title="$t('home.openLesson.title')" class="home-class">
<template #header-aside>
<nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link>
</template>
<app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`">
<img :src="listData.first.web_img_uri" class="banner" />
</app-link>
<ul>
<li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{
news: {
data: item,
path: '/about/lesson'
}
}">
<app-link :data="item" :to="`/about/lesson/${item.id}`">
<div class="title">{{ item.title }}</div>
<div class="con-txt">{{ item.abstract }}</div>
<div class="info-box">
......@@ -39,21 +22,19 @@
</app-link>
</li>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" alt="" class="logo">
<img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" class="logo" />
<div class="wecome">HI!欢迎回来</div>
<div class="course-btn" @click="showEnroll">课程预约</div>
<div class="login-txt" @click="showEnroll">注册/登陆</div>
</li>
</ul>
</div>
</div>
</AppCard>
</template>
<script>
import appLink from '@/components/Link'
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
components: {
appLink
},
components: { AppCard, AppLink },
data() {
return {
data: []
......@@ -93,79 +74,50 @@ export default {
}
</script>
<style lang="scss" scoped>
.class-content{
padding-top: 87px;
width: 1200px;
.home-class {
padding-top: 80px;
max-width: 1200px;
margin: 0 auto;
.title-content{
display: flex;
.left-title{
display: flex;
.line{
width: 6px;
height: 34px;
background: #AA1941;
}
.text{
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
}
}
.right-text{
margin-left: auto;
margin-top: 18px;
font-size: 16px;
font-weight: 300;
line-height: 34px;
color: #9B9B9B;
cursor: pointer;
}
}
.content-box{
padding-top: 20px;
.banner{
.banner {
width: 1200px;
display: block;
}
ul{
ul {
display: flex;
justify-content: space-between;
padding-top: 27px;
li{
li {
width: 285px;
height: 287px;
background: #FFFFFF;
background: #ffffff;
padding: 43px 22px 34px;
box-sizing: border-box;
cursor: pointer;
.logo{
.logo {
width: 89px;
display: block;
margin: 0 auto;
}
.wecome{
.wecome {
font-size: 18px;
line-height: 100%;
color: #666666;
text-align: center;
margin: 18px 0 34px;
}
.course-btn{
.course-btn {
font-size: 21px;
line-height: 36px;
color: #FFFFFF;
color: #ffffff;
width: 193px;
height: 36px;
background: #AA1941;
background: #aa1941;
border-radius: 5px;
text-align: center;
margin: 0 auto;
cursor: pointer;
}
.login-txt{
.login-txt {
font-size: 14px;
line-height: 100%;
color: #666666;
......@@ -173,7 +125,7 @@ export default {
text-align: center;
cursor: pointer;
}
.title{
.title {
font-size: 22px;
line-height: 30px;
color: #333333;
......@@ -182,7 +134,7 @@ export default {
-webkit-line-clamp: 2;
overflow: hidden;
}
.con-txt{
.con-txt {
font-size: 14px;
line-height: 28px;
color: #666666;
......@@ -192,45 +144,45 @@ export default {
-webkit-line-clamp: 3;
overflow: hidden;
}
.info-box{
.info-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 21px;
.time{
.time {
font-size: 12px;
line-height: 28px;
color: #A8A8A8;
color: #a8a8a8;
white-space: nowrap;
}
.look-num{
.look-num {
// margin-left: 16px;
display: flex;
align-items: center;
.icon{
.icon {
width: 15px;
height: 10px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/948410ca5d8663ef4e80d4913df8a9b4.png);
background-size: 100% 100%;
}
.num{
.num {
font-size: 12px;
line-height: 28px;
color: #9B9B9B;
color: #9b9b9b;
margin-left: 3px;
white-space: nowrap;
}
}
.btn{
.btn {
padding: 0 10px;
// width: 72px;
height: 24px;
background: #AA1941;
background: #aa1941;
opacity: 1;
border-radius: 6px;
font-size: 13px;
line-height: 18px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
line-height: 24px;
cursor: pointer;
......@@ -239,6 +191,5 @@ export default {
}
}
}
}
}
</style>
<template>
<div class="notice-content">
<div class="title-content">
<div class="left-title">
<div class="line"></div>
<div class="text">{{ $t('home.bulletin.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/about/news' })">{{ $t('viewMore') }}</div>
</div>
<AppCard :title="$t('home.bulletin.title')" class="home-news">
<template #header-aside>
<nuxt-link to="/about/news">{{ $t('viewMore') }}</nuxt-link>
</template>
<div class="news-content">
<div class="left-content">
<div class="list">
......@@ -25,7 +21,7 @@
<div class="right-content">
<ul>
<template v-for="(item, index) in listData">
<app-link :key="index" :item="{ news: { data: item, path: '/about/news' } }">
<app-link :key="index" :data="item" :to="`/about/news/${item.id}`">
<li>
<div class="time-block">
<div class="m-time">{{ formatMD(item.start_time) }}</div>
......@@ -38,12 +34,13 @@
</ul>
</div>
</div>
</div>
</AppCard>
</template>
<script>
import appLink from '@/components/Link'
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
components: { appLink },
components: { AppCard, AppLink },
data() {
return {
listData: [],
......@@ -97,37 +94,11 @@ export default {
}
</script>
<style lang="scss" scoped>
.notice-content {
.home-news {
padding-top: 80px;
width: 1200px;
max-width: 1200px;
margin: 0 auto;
.title-content {
display: flex;
.left-title {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
}
}
.right-text {
margin-left: auto;
margin-top: 18px;
font-size: 16px;
font-weight: 300;
line-height: 34px;
color: #9b9b9b;
cursor: pointer;
}
}
.news-content {
margin-top: 15px;
display: flex;
......
<template>
<div class="class-content">
<div class="title-content">
<div class="left-title">
<div class="line"></div>
<div class="text">{{ $t('home.case.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/services/college', query: { type: '2' } })">
{{ $t('viewMore') }}
</div>
</div>
<AppCard :title="$t('home.case.title')" class="home-case">
<template #header-aside>
<nuxt-link to="/services/college/case">{{ $t('viewMore') }}</nuxt-link>
</template>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<app-link :data="item" :to="`/services/college/case/${item.id}`">
<img :src="item.web_img_uri" />
<div class="pop-txt-box">{{ item.title }}</div>
</app-link>
......@@ -23,14 +17,13 @@
<div class="prev-button"></div>
<div class="next-button"></div>
</div>
</div>
</AppCard>
</template>
<script>
import appLink from '@/components/Link'
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
components: {
appLink
},
components: { AppCard, AppLink },
data() {
return {
listData: [],
......@@ -74,46 +67,18 @@ export default {
}
</script>
<style lang="scss" scoped>
.class-content {
padding-top: 87px;
width: 1200px;
.home-case {
padding-top: 80px;
max-width: 1200px;
margin: 0 auto;
.title-content {
display: flex;
.left-title {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
}
}
.right-text {
margin-left: auto;
margin-top: 18px;
font-size: 16px;
font-weight: 300;
line-height: 34px;
color: #9b9b9b;
cursor: pointer;
// transform: translateY(-34px);
}
}
.swiper-content {
padding-top: 20px;
position: relative;
.swiper-slide {
position: relative;
img {
width: 100%;
height:500px;
height: 500px;
display: block;
}
.pop-txt-box {
......
<template>
<div class="title-swiper">
<div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping" v-for="(item, index) in listData" :key="index">
{{item.title}}
</div>
</div>
</div>
<div class="swiper-btn swiper-button-prev" @click="handleBtnClick">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
</div>
<div class="swiper-btn swiper-button-next" @click="handleBtnClick">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
</div>
</div>
</template>
<script>
export default {
props: {
listData: {
type: Array,
default() {
return []
}
}
},
data() {
return {
swiperOption1: {
observer: true,
observeParents: true,
speed: 400,
autoplay: false,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 0,
disableOnInteraction: false,
on:{
init: function(){
// that.isShowSwiper = true
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
},
isEn: false
}
},
mounted() {
this.isEn = this.$cookies.get('lang') === 'en-US'
},
methods: {
handleClick(e) {
const index = e.target.dataset.swiperSlideIndex
this.$refs.mySwiper1.swiper.slideTo(index % 5 + 5)
this.$emit('slideTo', index)
},
handleBtnClick() {
setTimeout(() => {
this.$emit('slideTo', this.$refs.mySwiper1.swiper.realIndex)
}, 100)
}
}
}
</script>
<style lang="scss" scoped>
.title-swiper{
padding: 0 25px;
margin-top:5px;
position:relative;
// overflow: auto;
// width: 100%;
.swiper-slide{
position: relative;
width: 266px;
height: 44px;
padding:0 20px;
margin:7px 0;
line-height:22px;
font-size:16px;
cursor: pointer;
user-select:none;
border-right:1px solid #a81840;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.swiper-slide-active, .swiper-slide:hover{
color:#a81840;
}
.swiper-btn{
width:20px;
height:35px;
position:absolute;
left:-5px;
top:50%;
transform:translateY(-50%);
z-index:2;
user-select:none;
cursor:pointer;
img{
width:100%;
height:100%;
display:block;
}
}
.swiper-button-next{
left:unset;
right: -5px;
}
}
</style>
\ No newline at end of file
......@@ -30,6 +30,10 @@ export default {
},
methods: {
tabChanges(item, index) {
if (item.path) {
this.$router.push({ path: item.path })
return
}
if (item.disabled) {
return
}
......
......@@ -2,7 +2,7 @@ export default {
menu: {
about: '关于紫荆',
services: '教育服务',
degree: '国际教育',
degree: '在线国际学位',
industrialCollege: '数字经济产业学院',
onlineEdu: '在线教育解决方案',
alumni: '校友会',
......@@ -119,13 +119,13 @@ export default {
med: '教育学硕士<br />MED',
map: '应用心理学硕士<br />MAP',
// plan: '未来金融<br />领袖计划',
mba: '数字领导力方向MBA',
finance: '金融方向MBA',
international: '酒店和旅游方向MBA',
mba: '数字领导力方向<br/>MBA',
finance: '金融方向<br/>MBA',
international: '酒店和旅游方向<br/>MBA',
dba: '心理学博士<br/>(即将推出)',
edd: '工商管理博士',
studyAbroad: '海外留学2+1<br/>(即将推出)',
caas: '餐饮管理方向MBA',
caas: '餐饮管理方向<br/>MBA',
studyAbroadMaster: '国际硕士<br/> 1+1'
},
onlineEdu: {
......
<template>
<div>
<Head class="heads"/>
<div class="is-pc">
<Head class="heads" />
<Nuxt />
<Foot />
<RightAside />
......@@ -8,14 +8,7 @@
</template>
<style>
html {
font-family:
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
......
export default function(context) {
const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
const UA = process.server ? context.req?.headers['user-agent'] : navigator.userAgent
const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
isMobile && context.redirect('https://h5.ezijing.com/')
}
// export default function(context) {
// const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
// let isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
// if (context.route.path.includes('/my')) {
// isMobile = false
// }
// context.store.commit('setIsMobile', isMobile)
// }
# PAGES
This directory contains your Application Views and Routes.
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
<template>
<div class="news-content">
<tab />
<contact-content />
<app-frame :tabs="tabs">
<div id="allmap"></div>
<template #article>
<div class="article-contact">
<div class="tit">{{ $t('about.contact.lxTit') }}</div>
<div class="info" v-html="$t('about.contact.contactTxt')"></div>
<div class="follow">
<div class="tits">{{ $t('about.contact.follow') }}</div>
<ul>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5c4a58f1d41f786e7713a5a84069404d.png" alt="" />
<div class="name">{{ $t('about.contact.followCodeT1') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/wb-code.png" alt="" />
<div class="name">{{ $t('about.contact.followCodeT2') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/douyin-code.png" alt="" />
<div class="name" style="margin-top:50px">{{ $t('about.contact.followCodeT3') }}</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/project/marywood/xiaoet-code.png" alt="" />
<div class="name">{{ $t('about.contact.followCodeT4') }}</div>
</li>
</ul>
</div>
</div>
</template>
</app-frame>
</template>
<script>
import tab from '../../components/about/tabNav'
import contactContent from '../../components/about/contact'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab,
contactContent
components: { AppFrame },
data() {
return {
tabs: navList(this)
}
},
mounted() {
if (process.browser) {
!(function(mapInit) {
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://api.map.baidu.com/api?v=2.0&ak=Z9Km7UTGFI2fwRrpGp7Mji4ySDsvn30d&callback=mapinit'
window['mapinit'] = function() {
mapInit()
}
document.head.appendChild(script)
})(function() {
// 这里使用BMap
var map = new BMap.Map('allmap')
map.centerAndZoom(new BMap.Point(116.336323, 39.998848), 20)
map.enableScrollWheelZoom(true)
// 创建点标记
var marker1 = new BMap.Marker(new BMap.Point(116.336323, 39.998848))
map.addOverlay(marker1)
})
}
}
}
</script>
<style lang="scss" scoped>
.news-content{
width: 1200px;
margin: 0 auto;
padding-top: 63px;
#allmap {
width: 100%;
height: 320px;
}
.article-contact {
.tit {
font-size: 22px;
font-weight: 500;
line-height: 100%;
}
.info {
font-size: 16px;
line-height: 32px;
color: #333333;
margin-top: 20px;
}
.follow {
padding-top: 97px;
.tits {
font-size: 22px;
font-weight: 500;
line-height: 100%;
color: #333333;
margin-bottom: 30px;
}
ul {
display: flex;
justify-content: space-between;
li {
width: 130px;
margin-right: 80px;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 16px;
margin-top: 22px;
text-align: center;
color: #666666;
}
}
}
}
</style>
<template>
<div class="culture-content">
<tab />
<culture-content />
<app-frame :tabs="tabs">
<div class="video-box">
<video
src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
controls="controls"
preload="auto"
></video>
</div>
<template #article>
<div class="article-honor">
<div class="tit">{{ $t('about.culture.title') }}</div>
<ul>
<li>
<div class="tits">{{ $t('about.culture.item1H1') }}</div>
<div class="h2">{{ $t('about.culture.item1H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item1Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item2H1') }}</div>
<div class="h2">{{ $t('about.culture.item2H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item2Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item3H1') }}</div>
<div class="h2">{{ $t('about.culture.item3H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item3Txt')"></div>
</div>
</li>
<li>
<div class="tits">{{ $t('about.culture.item4H1') }}</div>
<div class="h2">{{ $t('about.culture.item4H2') }}</div>
<div class="txts">
<div class="p" v-html="$t('about.culture.item4Txt')"></div>
</div>
</li>
</ul>
</div>
</template>
</app-frame>
</template>
<script>
import tab from '../../components/about/tabNav'
import cultureContent from '../../components/about/culture'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab,
cultureContent
components: { AppFrame },
data() {
return {
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.culture-content{
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
.video-box {
background: #000;
video {
width: 100%;
height: 100%;
}
}
.article-honor {
.tit {
font-size: 22px;
font-weight: 500;
line-height: 100%;
color: #424242;
margin-bottom: 30px;
}
li {
margin-top: 30px;
.tits {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #424242;
margin-bottom: 12px;
}
.h2 {
height: 46px;
line-height: 100%;
border-bottom: 1px solid #98002e;
font-size: 20px;
line-height: 100%;
color: #424242;
}
.txts {
padding-top: 18px;
.p {
font-size: 16px;
line-height: 34px;
color: #424242;
}
}
}
}
.is-pc {
.video-box {
height: 552px;
}
.article-honor {
ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 60px;
}
}
}
.is-h5 {
.video-box {
height: 1.94rem;
}
}
</style>
<template>
<div class="intr-content">
<tab />
<intr-content />
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" class="banner" />
<template #article>
<div class="intr-content-box">
<div class="text-content">
<div class="title">{{ $t('about.project.title') }}</div>
<div class="text-intr" v-html="$t('about.project.text')"></div>
</div>
<div class="garish-content">
<div class="flex-box">
<div class="li w184">
<div class="col-txt">
12<span>{{ $t('about.project.unit1') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText1') }}</div>
</div>
<div class="li w180">
<div class="col-txt">
535<span>{{ $t('about.project.unit2') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText2') }}</div>
</div>
<div class="li w249">
<div class="col-txt">600<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText3') }}</div>
</div>
<div class="li w186">
<div class="col-txt">700<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText4') }}</div>
</div>
</div>
<div class="flex-box mar-t-35">
<div class="li w188">
<div class="col-txt">1000<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText5') }}</div>
</div>
<div class="li w180">
<div class="col-txt">4800<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText6') }}</div>
</div>
<div class="li w249">
<div class="col-txt">6000<span>+</span></div>
<div class="n-txt">{{ $t('about.project.itemText7') }}</div>
</div>
<div class="li w186">
<div class="col-txt">
<span class="unit3Text">{{ $t('about.project.unit3Text') }}</span
><span>{{ $t('about.project.unit3') }}+</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText8') }}</div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-nav">
<div :class="indexActive === 0 ? 'li active' : 'li'" @click="changeIndex(0)">
<div class="t1">{{ $t('about.project.tabBtn1Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn1Txt')"></div>
</div>
<div :class="indexActive === 1 ? 'li active' : 'li'" @click="changeIndex(1)">
<div class="t1">{{ $t('about.project.tabBtn2Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn2Txt')"></div>
</div>
<div :class="indexActive === 2 ? 'li active' : 'li'" @click="changeIndex(2)">
<div class="t1">{{ $t('about.project.tabBtn3Tit') }}</div>
<div class="t2" v-html="$t('about.project.tabBtn3Txt')"></div>
</div>
</div>
<div class="tab-con" v-if="indexActive === 0" v-html="$t('about.project.tabCon1')"></div>
<div class="tab-con tab-con2" v-if="indexActive === 1" v-html="$t('about.project.tabCon2')"></div>
<div class="tab-con tab-con3" v-if="indexActive === 2" v-html="$t('about.project.tabCon3')"></div>
</div>
</div>
</template>
</app-frame>
</template>
<script>
import tab from '../../components/about/tabNav'
import intrContent from '../../components/about/introduce'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab,
intrContent
components: { AppFrame },
data() {
return {
tabs: navList(this),
indexActive: 0
}
},
methods: {
changeIndex(n) {
this.indexActive = n
}
}
}
</script>
<style lang="scss" scoped>
.intr-content{
width: 1200px;
.intr-content-box {
.text-content {
.title {
font-size: 22px;
font-weight: 500;
color: #424242;
margin-bottom: 15px;
}
.text-intr {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
.garish-content {
padding-top: 66px;
.flex-box {
display: flex;
width: 800px;
margin: 0 auto;
padding-top: 63px;
&.mar-t-35 {
padding-top: 35px;
}
.li {
box-sizing: border-box;
padding-top: 6px;
// height: 70px;
border-right: 1px solid #c3c3c3;
&:last-child {
border: none;
}
.col-txt {
font-size: 36px;
font-weight: 500;
line-height: 30px;
color: #aa1941;
text-align: center;
.unit3Text {
font-size: 36px;
}
span {
font-size: 24px;
}
}
.n-txt {
font-size: 16px;
font-family: auto;
// line-height: 34px;
text-align: center;
color: #666666;
}
&.w184 {
width: 184px;
}
&.w180 {
width: 180px;
}
&.w249 {
width: 249px;
}
&.w186 {
width: 186px;
}
&.w188 {
width: 188px;
}
}
}
}
.tab-content {
padding-top: 80px;
.tab-nav {
display: flex;
justify-content: space-between;
.li {
width: 280px;
height: 150px;
box-sizing: border-box;
padding-top: 38px;
background: #fbfbfb;
// margin-right: 16px;
cursor: pointer;
&.active {
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #aa1941;
}
}
.t1 {
text-align: center;
line-height: 100%;
font-size: 24px;
font-weight: 500;
color: #aa1941;
}
.t2 {
font-size: 20px;
line-height: 100%;
color: #424242;
margin-top: 16px;
text-align: center;
font-family: auto;
}
}
}
.tab-con {
width: 872px;
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
padding: 20px 48px;
margin-top: 40px;
position: relative;
font-size: 16px;
font-weight: 400;
line-height: 40px;
color: #333333;
::v-deep {
span {
color: rgba(170, 25, 65, 1);
font-size: 28px;
font-weight: bold;
}
}
&.tab-con2 {
&::after {
top: -15px;
left: 50%;
transform: translateX(-50%);
}
}
&.tab-con3 {
&::after {
top: -15px;
left: auto;
right: 140px;
}
}
&::after {
content: '';
position: absolute;
top: -15px;
left: 140px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #fff;
}
}
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/lesson/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/about/lesson' })">查看更多</div>
</div>
</div>
<article-detail :tabs="tabs" @back="$router.push('/about/lesson')"></article-detail>
</template>
<script>
import tab from '@/components/about/tabNav'
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab
},
components: { ArticleDetail },
data() {
return {
data: {},
listData: []
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
const params = {
project_id: process.env.projectId,
type_tag: 'article_publish_class',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
// line-height: 100%;
padding-bottom: 10px;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/lesson' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</app-frame>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { tab, appLink },
components: { AppFrame, ArticleList },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
tabs: navList(this)
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_publish_class',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_publish_class',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.projectId, type_tag: 'article_publish_class' }
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
to(item) {
return { name: 'about-lesson-id', params: { id: item.id } }
}
}
}
}
}
</style>
</script>
<template>
<div class="news-content">
<tab />
<div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/message/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/about/message' })">查看更多</div>
</div>
</div>
<article-detail :tabs="tabs" @back="$router.push('/about/message')"></article-detail>
</template>
<script>
import tab from '@/components/about/tabNav'
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab
},
components: { ArticleDetail },
data() {
return {
data: {},
listData: []
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
const params = {
project_id: process.env.projectId,
type_tag: 'img_text_school',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
// line-height: 100%;
padding-bottom: 10px;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/message' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</app-frame>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { tab, appLink },
components: { AppFrame, ArticleList },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
tabs: navList(this)
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'img_text_school',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'img_text_school',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.projectId, type_tag: 'img_text_school' }
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
to(item) {
return { name: 'about-message-id', params: { id: item.id } }
}
}
}
}
}
</style>
</script>
<template>
<div class="news-content">
<tab />
<div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/news/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/about/news' })">查看更多</div>
</div>
</div>
<article-detail :tabs="tabs" @back="$router.push('/about/news')"></article-detail>
</template>
<script>
import tab from '@/components/about/tabNav'
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/aboutNavList.js'
export default {
components: {
tab
},
components: { ArticleDetail },
data() {
return {
data: {},
listData: []
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
const params = {
project_id: process.env.projectId,
type_tag: 'article_news',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
// line-height: 100%;
padding-bottom: 10px;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
</style>
<template>
<div class="news-content">
<tab />
<new-list :type="type"/>
</div>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</app-frame>
</template>
<script>
import tab from '@/components/about/tabNav'
import newList from '@/components/about/newList'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { tab, newList },
components: { AppFrame, ArticleList },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
tabs: navList(this)
}
},
computed: {
type() {
return this.$route.query.type
}
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.projectId, type_tag: 'article_news' }
},
methods: {
to(item) {
return { name: 'about-news-id', params: { id: item.id } }
}
}
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
</style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
<template>
<div class="news-content">
<tab />
<party-content />
<app-frame :tabs="tabs">
<img src="https://zws-imgs-pub.ezijing.com/static/public/54e010d17c5cf9a36ef3addd9e893a4f.png" class="banner" />
<template #article>
<div class="party-con-mian">
<div class="tit">{{ $t('alumni.contentTit') }}</div>
<div class="text-con">
<p>{{ $t('alumni.contentP1') }}</p>
<p>{{ $t('alumni.contentP2') }}</p>
<p>{{ $t('alumni.contentP3') }}</p>
</div>
<div class="tit">{{ $t('alumni.fbTit') }}</div>
<div class="text-con2">
{{ $t('alumni.fbDes') }}
</div>
<div class="img-content">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/8d402595ac1eb1c5142b548fa84be60d.png"
alt=""
class="img1"
/>
<img
src="https://zws-imgs-pub.ezijing.com/static/public/560f659bcb9896f6dde674beeac1fd15.png"
alt=""
class="img2"
/>
</div>
<div class="end-time">{{ $t('alumni.time') }}</div>
<div class="alumnus-code">
<div class="t">{{ $t('alumni.followTit') }}</div>
<img src="https://webapp-pub.ezijing.com/www/pc/alum-code.png" alt="" />
<div class="dec">{{ $t('alumni.followDes') }}</div>
</div>
</div>
</template>
</app-frame>
</template>
<script>
import tab from '../../components/alumnus/tabNav'
import partyContent from '../../components/alumnus/party'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/alumnusNavList.js'
export default {
components: {
tab,
partyContent
components: { AppFrame },
data() {
return {
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.news-content{
width: 1200px;
margin: 0 auto;
padding-top: 63px;
.party-con-mian {
.tit {
font-size: 22px;
line-height: 100%;
color: #424242;
margin-bottom: 20px;
}
.text-con {
p {
font-size: 16px;
font-family: SourceHanSansCN-Light;
line-height: 32px;
color: #424242;
margin-bottom: 35px;
}
}
.text-con2 {
font-size: 16px;
font-family: SourceHanSansCN-Light;
line-height: 100%;
color: #424242;
margin-bottom: 25px;
}
.img-content {
display: flex;
justify-content: space-between;
.img1 {
width: 389px;
height: 256px;
display: block;
}
.img2 {
width: 383px;
height: 241px;
display: block;
margin-left: 105px;
}
}
.end-time {
text-align: right;
margin-top: 62px;
font-size: 16px;
color: #424242;
}
}
.alumnus-code {
width: 202px;
margin: 0 auto;
padding-top: 28px;
.t {
font-size: 22px;
line-height: 100%;
margin-bottom: 24px;
color: #424242;
text-align: center;
}
img {
width: 100%;
display: block;
}
.dec {
font-size: 16px;
line-height: 100%;
color: #424242;
margin-top: 10px;
text-align: center;
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/alumnus/story/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/alumnus/story' })">查看更多</div>
</div>
</div>
<article-detail :tabs="tabs" @back="$router.push('/alumnus/story')"></article-detail>
</template>
<script>
import tab from '@/components/alumnus/tabNav'
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/alumnusNavList.js'
export default {
components: {
tab
},
components: { ArticleDetail },
data() {
return {
data: {},
listData: []
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
const params = {
project_id: process.env.projectId,
type_tag: 'article_alumni',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
// line-height: 100%;
padding-bottom: 10px;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/alumnus/story' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</app-frame>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/alumnus/tabNav'
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/alumnusNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { tab, appLink },
components: { AppFrame, ArticleList },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
tabs: navList(this)
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_alumni',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_alumni',
page: num,
limit: 10
type_tag: 'article_alumni'
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
to(item) {
return { name: 'alumnus-story-id', params: { id: item.id } }
}
}
}
}
}
</style>
</script>
<template>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/pages/ciis/pc20210913/Banner.jpg" class="banner" />
<template #article>
<div class="party-con-mian">
<div class="tit">{{ $t('flower.contentTit1') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP1') }}</p>
</div>
<div class="tit">{{ $t('flower.contentTit2') }}</div>
<ul class="text-con">
<li>{{ $t('flower.contentP21') }}</li>
<li>{{ $t('flower.contentP22') }}</li>
<li>{{ $t('flower.contentP23') }}</li>
<li>{{ $t('flower.contentP24') }}</li>
</ul>
<div class="tit">{{ $t('flower.contentTit3') }}</div>
<ul class="text-con">
<li>{{ $t('flower.contentP31') }}</li>
<li>{{ $t('flower.contentP32') }}</li>
<li>{{ $t('flower.contentP33') }}</li>
<li>{{ $t('flower.contentP34') }}</li>
<li>{{ $t('flower.contentP35') }}</li>
<li>{{ $t('flower.contentP36') }}</li>
</ul>
<div class="tit">{{ $t('flower.contentTit4') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP4') }}</p>
</div>
<div class="tit">{{ $t('flower.contentTit5') }}</div>
<div class="text-con">
<p>{{ $t('flower.contentP5') }}</p>
</div>
<div class="text-con" style="text-align:right">
<p>{{ $t('flower.contentP61') }}</p>
<p>{{ $t('flower.contentP62') }}</p>
<p>{{ $t('flower.contentP63') }}</p>
<p>{{ $t('flower.contentP64') }}</p>
<p>{{ $t('flower.contentP65') }}</p>
<p>{{ $t('flower.contentP66') }}</p>
<p>{{ $t('flower.contentP67') }}</p>
<p>{{ $t('flower.contentP68') }}</p>
</div>
<div class="text-con" style="text-align:right">
<p>{{ $t('flower.contentP7') }}</p>
</div>
<div class="alumnus-code" style="margin:auto">
<p class="t">{{ $t('flower.contentP8') }}</p>
<img src="https://webapp-pub.ezijing.com/pages/ciis/pc20210913/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg" />
</div>
</div>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/alumnusNavList.js'
export default {
components: { AppFrame },
data() {
return {
tabs: navList(this)
}
}
}
</script>
<style lang="scss" scoped>
.party-con-mian {
.tit {
font-size: 22px;
line-height: 100%;
color: #424242;
margin-bottom: 20px;
}
.text-con {
margin-bottom: 35px;
p,
li {
font-size: 16px;
line-height: 32px;
color: #424242;
}
li {
list-style-type: decimal;
text-indent: 1em;
margin-left: 30px;
}
}
}
.alumnus-code {
width: 230px;
margin: 0 auto;
padding-top: 28px;
.t {
font-size: 22px;
line-height: 100%;
margin-bottom: 24px;
color: #424242;
text-align: center;
}
img {
width: 100%;
display: block;
}
}
</style>
<template>
<div class="news-content">
<tab />
<zijing-flower />
</div>
</template>
<script>
import tab from '../../../components/alumnus/tabNav.vue'
import zijingFlower from '../../../components/alumnus/flower.vue'
export default {
components: {
tab,
zijingFlower
}
}
</script>
<style>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
</style>
<template>
<div class="container">
<div class="home">
<!-- 轮播图 -->
<banner />
<HomeMenu />
<!-- 产业学院 -->
<industrial-college/>
<!-- <industrial-college /> -->
<!-- 学位教育 -->
<degree-education/>
<!-- <degree-education /> -->
<!-- 在线教育 -->
<online-edu/>
<!-- <online-edu /> -->
<!-- 教育服务 -->
<!-- <education-services/> -->
<!-- <education-services /> -->
<!-- 项目公告 -->
<project-notice/>
<project-notice />
<!-- 教育服务案例 -->
<service-case/>
<service-case />
<!-- 校长寄语 -->
<headmaster-msg/>
<headmaster-msg />
<!-- 校友故事 -->
<alumni-stories/>
<alumni-stories />
<!-- 公开课 -->
<open-class/>
<open-class />
</div>
</template>
<script>
import banner from '../components/home/banner'
import HomeMenu from '@/components/home/homeMenu'
import degreeEducation from '../components/home/degreeEducation'
import educationServices from '../components/home/educationServices'
import projectNotice from '../components/home/projectNotice'
......@@ -37,6 +39,7 @@ import onlineEdu from '../components/home/onlineEdu'
export default {
components: {
banner,
HomeMenu,
degreeEducation,
educationServices,
projectNotice,
......@@ -46,23 +49,11 @@ export default {
serviceCase,
industrialCollege,
onlineEdu
},
data () {
return {
isScale: false
}
},
created() {
},
mounted() {
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
}
}
}
</script>
<style>
.container{
.home {
padding-bottom: 100px;
}
</style>
<template>
<div>
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner.jpg" />
</div>
<div class="w1200">
<div class="why">
<h1 class="why-title">为什么选择紫荆的国际免联考在线学位课程?</h1>
<div class="why-list">
<div class="why-item" v-for="(item, index) in whyList" :key="index">
<img :src="item.icon" class="why-item__icon" />
<img :src="item.hoverIcon" class="why-item__icon_hover" />
<div class="why-content" v-html="item.desc"></div>
</div>
</div>
</div>
<app-card title="热门专业">
<div class="project-list">
<div class="project-item" v-for="(item, index) in projectList" :key="index">
<AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
</div>
</div>
</app-card>
<app-card title="常见问题">
<template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
<ul class="qa-list">
<li v-for="(item, index) in qaList" :key="index">
<nuxt-link to="/internationalDegree/qa">{{ item.question }}</nuxt-link>
</li>
</ul>
</app-card>
<NewsCard baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
<TeacherCard :list="teacherList"></TeacherCard>
<app-card title="申请流程">
<div class="process">
<img src="https://webapp-pub.ezijing.com/www/pc/internationalDegree/process.png" />
</div>
</app-card>
</div>
</div>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
import AppLink from '@/components/Link.vue'
import NewsCard from '@/components/NewsCard.vue'
import TeacherCard from '@/components/TeacherCard.vue'
import qaList from '@/assets/internationalDegreeQA.js'
export default {
components: { AppCard, AppLink, NewsCard, TeacherCard },
data() {
return {
whyList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01_hover.png',
desc: '优选国际正规院校、学位受到全球普遍承认'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02_hover.png',
desc: '严格审核,正规面试, 以国际标准选拔优秀人才'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03_hover.png',
desc: '国企背景、专业口碑 国际化专业运营团队'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04_hover.png',
desc: '与在校生一样的授课老师,一样的专业课程体系'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05_hover.png',
desc: '针对在线学习特点的教学优化和授课安排'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06_hover.png',
desc: '稳定的学习系统,365天X24小时全球登录'
}
],
// 热门专业
projectList: [
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_kelley.png',
href: 'https://kelley.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_ciis.png',
href: 'https://ciis.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cu.png',
href: 'https://cu.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_marywood.png',
href: 'https://marywood.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_shms.png',
href: 'https://shms.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_caas.png',
href: 'https://caas.ezijing.com/'
}
],
// 常见问题
qaList,
// 最新动态请求参数
newsParams: {
project_ids: [
'6800243768751554560',
'6808657045168848896',
'6808657689426526208',
'6805762100502200320',
'6808658580045037568',
'6823789210604929024'
],
type_tag: 'article_news_hot',
page: 1,
limit: 4
},
teacherList: [
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
name: 'Glenn Hartelius',
project: '师资-CIIS',
title: '博士',
desc:
'《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
name: '钟思嘉',
project: '师资-CIIS',
title: '教授',
desc:
'美国俄勒冈大学哲学博士(教育心理学与咨询心理学)<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师,心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
name: 'Sharon Hundley,Ed.D.',
project: '师资-CU',
title: '副教授',
desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
name: '胡晓毅',
project: '师资-CU',
title: '教授',
desc:
'北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
name: 'Ash Soni',
project: '师资-KELLEY',
title: '教授',
desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
name: '肇越',
project: '师资-KELLEY',
title: '博士',
desc:
'清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
name: 'Chris Speicher',
project: '师资-MARYWOOD',
title: '副教授',
desc: '天普大学博士副教授'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
name: '张恩忠',
project: '师资-MARYWOOD',
title: '副教授',
desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_09.jpg',
name: 'Andrea Leuenberger',
project: '师资-SHMS',
title: '项目主管',
desc:
'擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
}
]
}
}
}
</script>
<style lang="scss" scoped src="@/assets/css/studyAbroad.scss"></style>
<template>
<article-detail :tabs="tabs" @back="$router.push('/internationalDegree/news')"></article-detail>
</template>
<script>
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/internationalDegreeNavList.js'
export default {
components: { ArticleDetail },
data() {
return {
tabs: navList
}
}
}
</script>
<template>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/internationalDegreeNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { AppFrame, ArticleList },
data() {
return {
tabs: navList
}
},
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: {
project_ids: [
'6800243768751554560',
'6808657045168848896',
'6808657689426526208',
'6805762100502200320',
'6808658580045037568',
'6823789210604929024'
],
type_tag: 'article_news_hot'
}
},
to(item) {
return { name: 'internationalDegree-news-id', params: { id: item.id } }
}
}
}
}
}
</script>
<template>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<dl v-for="(item, index) in qaList" :key="index">
<dt>Q: {{ item.question }}</dt>
<dd v-html="item.answer"></dd>
</dl>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/internationalDegreeNavList.js'
import qaList from '@/assets/internationalDegreeQA.js'
export default {
components: { AppFrame },
data() {
return {
tabs: navList,
qaList
}
}
}
</script>
<style lang="scss" scoped>
.is-pc {
dl {
margin-bottom: 20px;
dt {
font-size: 16px;
font-weight: bold;
line-height: 32px;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
dd {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
}
.is-h5 {
dl {
margin-bottom: 0.18rem;
dt {
font-size: 0.12rem;
font-weight: bold;
line-height: 0.16rem;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
dd {
font-size: 0.12rem;
line-height: 0.16rem;
color: #424242;
}
}
}
</style>
<template>
<div class="college-content">
<div class="mian-title">{{ $t('menu.servicesChild.college') }}</div>
<div class="mian">
<tab :data="tabList" :defaultActive="defaultActive" @tabChangeIndex="tabChangeIndex" />
<div class="college-content-mian">
<!-- 核心特色 -->
<template v-if="showModule === 0">
<div class="module-1 module-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/college-m1-banner.jpg" alt="" class="banner" />
<div class="content-mian">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image2.png'
: ' https://webapp-pub.ezijing.com/www/pc/industry/image2.png'
"
/>
<p style="font-size: 18px;font-weight: 400;color: #A81840;margin-bottom:33px">
依托数字经济人才需求-能力模型
</p>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
: ' https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
"
/>
<div>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
国际化引领新时代高校拔尖创新人才培养
</p>
<p style="font-size: 16px;font-weight: 400;color: #555;margin-bottom:20px">
依托清控紫荆教育长期所积累的专业化研发能力,科技研发能力以及国际化能力,我们对共建数字经济产业学院提出了“五个一流”的建设目标,力争和全国各类院校一起,从实际情况出发培养产业所急需的初、中、高等各级别专业化岗位人才。
</p>
<img
style="margin-bottom:0;"
src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png"
alt=""
/>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
紫荆数字经济产业学院有以下主要特点
</p>
<ul>
<li
v-for="(item, index) in navList"
:key="index"
class="li"
:class="{ active: index === tabActive }"
@mouseover="navActive(item, index)"
>
<img :src="index === tabActive ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div>
</li>
</ul>
<div class="img-content">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="false" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 0" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 2" />
</div>
<div v-if="false" class="part">
<ul>
<li>数字经济人才国家战略</li>
<li>企业人才需求强劲</li>
</ul>
<p class="desc">
“加快数字化发展,建设数字中国”
国家推进数字化转型的认识和决心不断强化,不断出台支持政策,数字化转型的发展化境不断优化。
<br />
<br />
预计2035年中国整体数字经济规模将近16万亿,总就业容量达到4.15亿人,从目前存量看,中国国高技能人才仅占整体劳动力市场的4%,数字经济类人才缺口巨大。
</p>
</div>
<div v-if="tabActive === 0" class="part">
<ul>
<li>专业能力提升</li>
<li>解决实习就业</li>
<li>提升院校专业影响力</li>
</ul>
<p class="desc">
依据数字经济岗位胜任力模型,有针对性的制定人才培养计划,全面提升人才的数字专项技能。引产入校,充分解决学生实习就业的问题,做好学员从学生到职业人的角色转化工作。产学研的融合,进一步提升院校的专业影响力。
</p>
</div>
<div v-if="tabActive === 1" class="part">
<ul>
<li>学生:学-用-就业</li>
<li>学校:招生-教学-师资-实习-就业</li>
<li>企业:人才培养-岗位培训-实习-招聘</li>
</ul>
<p class="desc">
学生,学以致用,从学习技能到实际使用技能为企业创造价值,得到社会企业的认可,达到就业的目的。<br /><br />
学校,以产业发展为方向,以科研为先导,以选拔招生为前提,以教学为根本,以实习为抓手,以学生就业为目的,使学校全栈得到综合提升。<br /><br />
企业,从企业发展的角度,对人才进行前置性储备,建立人才培养体系,引进实习实训,发现人才、培养人才、留住人才,形成企业的核心竞争力。
</p>
</div>
<div v-if="tabActive === 2" class="part">
<ul>
<li>贯穿整个教学周期</li>
<li>服务院校长期专业发展目标</li>
<li>多种产品提供给学校、学生</li>
</ul>
<p class="desc">
从人才培养方案咨询、课程体系建设、教师培训、线上线下授课、落地实习实训、指导学生就业,全方位贯彻整个教学周期。<br /><br />
以省市乃至国家一流产业学院为目标,服务院校长期专业发展。<br /><br />
从国内外,从线上线下,从产学研,从校师生,多个层面提供服务。<br /><br />
</p>
</div>
</div>
</div>
</div>
</template>
<!-- 服务项目 -->
<template v-if="showModule === 1">
<div class="module-2 module-content-box">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img5.png" alt="" class="banner" />
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image24.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image24.png'
"
alt=""
style="padding-left:50px;padding-top:51px"
/>
<p style="color: #424242;font-size:16px;font-weight: 400;padding-left:50px;margin-top:30px;">
数字经济产业学院服务项目
</p>
<p
style="color: #424242;font-size:14px;margin-top:20px;font-weight: 300;padding-left:50px;margin-bottom:17px"
>
为学校、学生和企业提供长期的闭环服务
</p>
<ul>
<li
v-for="(item, index) in tabsList"
:key="index"
class="li"
@click="tabsClick(item, index)"
@mouseenter="handleMsEnter(index)"
@mouseleave="handleMsLeave"
:class="{ active: index === tabsActive, isHover: index === hoverIndex }"
>
<img
:src="index === tabsActive || index === hoverIndex ? item.activeImg : item.img"
alt=""
style="width:43px;height:43px"
/>
<div class="name">{{ item.name }}</div>
<p>{{ item.dec }}</p>
</li>
</ul>
<div class="content-mian" style="padding-top:10px;">
<div class="con-img-box" v-if="tabsActive === 0">
<!-- <img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
"
alt=""
/> -->
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image7.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image7.png'
"
alt=""
style="width: 100%;;height:100%"
/>
<p class="desc">
面向产业转型发展和区域经济社会需求,清控紫荆教育与地方院校进行专业共建。以深化产教深度融合,创新人才培养方案、课程体系、方式方法、保障机制等。促成课程内容与技术发展衔接、教学过程与生产过程对接、人才培养与产业需求融合。达到共同建设省市乃至国家级的一流学科。
</p>
</div>
<p style="font-size:16px;color:#424242;margin-bottom:21px">三大专业范畴,10余个特色专业方向。</p>
<div class="parts">
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img16.png" alt="" />
<p class="title">新文科</p>
<p class="dec">数字金融.数字营销,商业数据分析、数字媒体技术、智能运营;…</p>
</div>
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img17.png" alt="" />
<p class="title">新工科</p>
<p class="dec">人工智能方向、数据技术方向、云计算方向、网络安全方向;</p>
</div>
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img18.png" alt="" />
<p class="title">智能制造</p>
</div>
</div>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image9.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image9.png'
"
alt=""
/>
</div>
<div class="con-img-box" v-if="tabsActive === 1">
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image10.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image10.png'
"
alt=""
style="width: 100%;height:100%"
/>
<p class="desc">
紫荆教育数字经济产业学院SAAS平台(以下简称“ZJSAAS平台”)是由紫荆教育经过6年时间的教育科技实践,专门为与高校合作建立
数字经济产业学院而研发,以提高教学质量为目的,以数据科技为基础,
以学生为核心,100+功能模块涵盖信息宣传、学生管理、教师管理、教学内容管理、教学过程实施、课程实训以及实习就业等工作。
</p>
</div>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image11.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image11.png'
"
alt=""
/>
</div>
<div class="con-img-box" v-if="tabsActive === 2">
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image12.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image12.png'
"
alt=""
style="width: 100%;;height:100%"
/>
<p class="descc">
清控紫荆教育针对数字经济岗位要求,以培养学生综合职业能力为导向,结合学校数字经济专业实训条件,
提出了“引产入校、以产促教”的工学结合一体化人才培养思路,实施“边教、边做、边生产、边学习”。引
进企业产品生产任务,将一体化课程项目教学与实际产品生产相结合,灵活调整专业教学内容,安排学生参
与产品生产加工、市场推广运营、经营管理等环节。通过各种不同项目的教学和真实产品的生产经营,使学
生掌握各种岗位的技能与能力,了解企业经营生产组织方式、工艺流程、产品加工技术要求、市场推广、运
营管理等,形成必备的职业核心技能和素养。<br />清控紫荆教育追求深度融合,协同创新,充分发挥企业和学校在
产学融合中的作用,整合资源、优化结构,充分实现产学协同发展,培养高素质、高技能人才,并且形成独有的特色。
</p>
</div>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image13.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image13.png'
"
alt=""
/>
</div>
<div class="con-img-box" v-if="tabsActive === 3">
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image14.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image14.png'
"
alt=""
style="width: 100%;;height:100%"
/>
<p class="desc">
清控紫荆教育实习就业服务以专业课程导入为前提,分为实训、就业指导与实习上岗三个层次。完成学生和用人企业的无缝对接,达成“学位即岗位”的目标。
</p>
</div>
<p style="font-size:18px;font-weight:400;color:#000000;margin-bottom:20px">
企业人力资源用人模式的改变
</p>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image15.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image15.png'
"
alt=""
/>
<p style="color: #777777;font-weight: 300;font-size: 14px;margin-bottom:40px">
清控紫荆教育的产业、企业、学校联动的方式,在降低企业人力资源成本的同时提升了学生在实战项目中的应用技能,最终达到产业人才培养的目的。
</p>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image16.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image16.png'
"
alt=""
/>
</div>
<div class="con-img-box" v-if="tabsActive === 4">
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image17.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image17.png'
"
alt=""
style="width: 100%;;height:100%"
/>
<p class="desc">
以新兴技术为基础,聚焦数字经济领域,清控紫荆教育汇集顶尖数字理论和应用研究专家,整合先进技术资源,通过产学研紧密
合作,建设成具有引领作用的创新型数字经济实验室,以案例作为实验室的核心要素,旨在创新技术研发、企业培育、校企合作培养专
业人才等方面发挥重要作用,为数字经济人才提供学习提升的平台与机会,强化产学研协作培养顶尖数字人才,助推国家人才发展战略。
</p>
</div>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image18.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image18.png'
"
alt=""
/>
</div>
<div class="con-img-box" v-if="tabsActive === 5">
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image19.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image19.png'
"
alt=""
style="width: 100%;;height:100%"
/>
<p class="desc">
以新兴技术为基础,聚焦数字经济领域,清控紫荆教育汇集顶尖数字理论和应用研究专家,整合先进技术资源,通过产学研紧密
合作,建设成具有引领作用的创新型数字经济实验室,以案例作为实验室的核心要素,旨在创新技术研发、企业培育、校企合作培养专
业人才等方面发挥重要作用,为数字经济人才提供学习提升的平台与机会,强化产学研协作培养顶尖数字人才,助推国家人才发展战略。
</p>
</div>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image20.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image20.png'
"
alt=""
/><img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image21.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image21.png'
"
alt=""
/><img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image22.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image22.png'
"
alt=""
/><img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image23.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image23.png'
"
alt=""
/>
</div>
</div>
</div>
</template>
<!-- 服务案例 -->
<template v-if="showModule === 2">
<new-list type="service_case" />
</template>
</div>
</div>
</div>
</template>
<script>
import tab from '../../components/services/tab'
import newList from '../../components/about/newList'
export default {
components: {
tab,
newList
},
data() {
return {
tabList: [
{
name: this.$t('menu.college.tit1')
// 现代产业学院'
},
{
name: this.$t('menu.college.tit2')
// name: '数字金融'
},
{
name: this.$t('menu.college.tit3')
// name: '服务案例'
}
],
navList: [
// {
// name: '需求强劲',
// img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png',
// activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_01.png'
// },
{
name: '瞄准痛点',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_02.png'
},
{
name: '闭环服务',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_03.png'
},
{
name: '长期共赢',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_04.png'
}
],
tabsList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
name: '专业共建',
dec: '专业提升',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_01.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image82.png',
name: 'SAAS软件平台',
dec: '教学管理',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_02.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image83.png',
name: '引产入校',
dec: '实训基地',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_03.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image84.png',
name: '实习就业',
dec: '企业人力资源服务',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_04.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png',
name: '数字经济实验室',
dec: '前沿案例',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_05.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png',
name: '培训证书',
dec: '专业补充',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_06.png'
}
],
tabActive: 0,
tabsActive: 0,
defaultActive: 0,
showModule: 0,
count: 0,
hoverIndex: -1
}
},
mounted() {
this.tabActive = 0
this.tabsActive = 0
if (this.$route.query.type) {
this.defaultActive = parseInt(this.$route.query.type)
this.showModule = parseInt(this.$route.query.type)
}
// const type = this.$route.query.type
// this.showModule = type ? parseInt(type) : 0
// const timer = setInterval(() => {
// this.count++
// this.tabActive = this.count % 4
// }, 5000)
// this.$once('hook:beforeDestroy', () => {
// clearInterval(timer)
// })
},
methods: {
navActive(item, index) {
this.tabActive = index
},
tabsClick(item, index) {
this.tabsActive = index
},
tabChangeIndex(n) {
// if (n === 2) {
// this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
// }
this.showModule = n
},
handleMsEnter(index) {
this.hoverIndex = index
},
handleMsLeave() {
this.hoverIndex = -1
}
},
computed: {
m1SetStyle() {
return url => {
return `background: url(${url});background-size: 100% 100%`
}
}
}
}
</script>
<style lang="scss" scoped>
.college-content {
width: 1200px;
margin: 0 auto;
padding-bottom: 100px;
.mian {
display: flex;
justify-content: space-between;
}
.mian-title {
font-size: 28px;
font-weight: 500;
line-height: 100%;
color: #aa1941;
padding: 48px 0 31px;
}
.college-content-mian {
width: 1000px;
.module-content-box {
background: #fff;
.banner {
width: 100%;
height: 320px;
display: block;
}
}
.module-1 {
.content-mian {
padding: 60px 50px 65px;
.desc {
font-size: 14px;
font-weight: 300;
line-height: 28px;
color: #444;
opacity: 1;
}
.m1-new-item {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #424242;
padding-top: 53px;
padding-bottom: 20px;
}
.tips {
font-size: 16px;
line-height: 32px;
color: #424242;
font-weight: 300;
padding: 20px 0 50px;
}
.item-box {
display: flex;
.left-box {
width: 562px;
height: 385px;
position: relative;
.bg {
width: 100%;
height: 100%;
display: block;
transition: all 0.5s;
}
.txt {
position: absolute;
top: 50%;
left: 19px;
transform: translateY(-50%);
width: 155px;
}
.img1 {
width: 155px;
}
.img11 {
width: 415px;
}
overflow: hidden;
&:hover {
.bg {
transform: scale(1.1);
}
}
}
.right-box {
width: 329px;
margin-left: 4px;
.items {
position: relative;
width: 100%;
height: 190px;
margin-bottom: 4px;
overflow: hidden;
&:hover {
.bg {
transform: scale(1.1);
}
}
}
.bg {
width: 100%;
height: 100%;
display: block;
transition: all 0.5s;
}
.txt {
position: absolute;
top: 50%;
left: 19px;
transform: translateY(-50%);
&.t1 {
width: 109px;
}
&.t11 {
width: 253px;
}
&.t2 {
width: 181px;
}
&.t22 {
width: 303px;
}
}
}
}
}
img {
width: 100%;
display: block;
&:nth-child(1) {
margin-bottom: 18px;
}
&:nth-child(2) {
margin-bottom: 22px;
}
&:nth-child(3) {
width: 874px;
margin-bottom: 54px;
}
&:nth-child(4) {
margin-bottom: 12px;
}
&:nth-child(5) {
width: 863px;
margin-bottom: 50px;
}
}
ul {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 32px;
// li {
// // padding: 15px;
// margin-left: 25px;
// }
.li {
list-style-type: disc;
color: #333;
font-size: 18px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 146px;
height: 146px;
opacity: 1;
background: #f4f4f4;
.name {
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active {
background-color: #a81840;
border-bottom: 6px solid #a81840;
.name {
color: #fff;
}
}
}
.img-content {
height: 280px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
}
.part {
li {
list-style-type: disc;
color: #333;
font-size: 18px;
margin-left: 25px;
padding: 15px;
}
}
}
}
.module-2 {
ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 900px;
margin: 0 auto;
.li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 130px;
height: 132px;
background: #f4f4f4;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
.name {
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active,
.isHover {
background: #a81840;
border-top: 6px solid #a81840;
box-shadow: 5px 5px 5px #bbb;
.name {
color: #fff;
}
p {
color: #fff;
}
}
.isHover {
transform: translateY(-10px);
}
}
.content-mian {
padding: 60px 50px 65px;
.con-img-box {
.desc {
position: absolute;
top: 50%;
left: 98px;
right: 56px;
margin-top: -50px;
color: #fff;
line-height: 26px;
font-size: 14px;
font-weight: 300;
}
.descc {
top: 35px;
bottom: 30px;
left: 55px;
right: 56px;
position: absolute;
color: #fff;
font-size: 14px;
font-weight: 300;
line-height: 26px;
}
img {
display: block;
&:nth-child(1) {
width: 768px;
margin-bottom: 67px;
}
&:nth-child(2) {
width: 100%;
margin-bottom: 38px;
}
&:nth-child(3) {
width: 864px;
// margin-bottom: 78px;
}
}
.parts {
// padding: 50px 36px;
display: flex;
justify-content: space-around;
.part:hover {
background-color: #fff;
}
.part {
width: 286px;
height: 380px;
display: flex;
flex-direction: column;
background: #f9f8f8;
img {
width: 100%;
height: 190px;
}
.title {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
opacity: 1;
margin-left: 25px;
margin-top: -40px;
}
.dec {
font-size: 14px;
font-weight: 300;
line-height: 26px;
color: #666666;
opacity: 1;
margin-left: 25px;
}
}
}
}
.ul-tit {
font-size: 22px;
font-weight: 500;
line-height: 100%;
padding: 0 0 36px;
color: #424242;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 5px;
margin-bottom: 5px;
width: 220px;
height: 170px;
position: relative;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
transition: all 0.3s;
width: 100%;
height: 100%;
display: block;
}
.pop-txt {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
.name {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 16px;
font-weight: 300;
// line-height: 170px;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>
<template>
<article-detail :tabs="tabs" title="数字经济产业学院" @back="$router.push('/services/college/case')"></article-detail>
</template>
<script>
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/servicesCollegeNavList.js'
export default {
components: { ArticleDetail },
data() {
return {
tabs: navList(this)
}
}
}
</script>
<template>
<app-frame :tabs="tabs" title="数字经济产业学院">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/servicesCollegeNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { AppFrame, ArticleList },
data() {
return {
tabs: navList(this)
}
},
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.projectId, type_tag: 'service_case' }
},
to(item) {
return { name: 'services-college-case-id', params: { id: item.id } }
}
}
}
}
}
</script>
<template>
<app-frame :tabs="tabs" title="数字经济产业学院">
<img src="https://webapp-pub.ezijing.com/www/pc/college-m1-banner.jpg" class="banner" />
<template #article>
<div class="content-mian module-1">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image2.png" />
<p style="font-size: 18px;font-weight: 400;color: #A81840;margin-bottom:33px">
依托数字经济人才需求-能力模型
</p>
<img src="https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png" />
<div>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
国际化引领新时代高校拔尖创新人才培养
</p>
<p style="font-size: 16px;font-weight: 400;color: #555;margin-bottom:20px">
依托清控紫荆教育长期所积累的专业化研发能力,科技研发能力以及国际化能力,我们对共建数字经济产业学院提出了“五个一流”的建设目标,力争和全国各类院校一起,从实际情况出发培养产业所急需的初、中、高等各级别专业化岗位人才。
</p>
<img style="margin-bottom:0;" src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png" />
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
紫荆数字经济产业学院有以下主要特点
</p>
<ul>
<li
v-for="(item, index) in navList"
:key="index"
class="li"
:class="{ active: index === tabActive }"
@mouseover="navActive(item, index)"
>
<img :src="index === tabActive ? item.activeImg : item.img" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div>
</li>
</ul>
<div class="img-content">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" v-if="false" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" v-if="tabActive === 0" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" v-if="tabActive === 2" />
</div>
<div v-if="false" class="part">
<ul>
<li>数字经济人才国家战略</li>
<li>企业人才需求强劲</li>
</ul>
<p class="desc">
“加快数字化发展,建设数字中国”
国家推进数字化转型的认识和决心不断强化,不断出台支持政策,数字化转型的发展化境不断优化。
<br />
<br />
预计2035年中国整体数字经济规模将近16万亿,总就业容量达到4.15亿人,从目前存量看,中国国高技能人才仅占整体劳动力市场的4%,数字经济类人才缺口巨大。
</p>
</div>
<div v-if="tabActive === 0" class="part">
<ul>
<li>专业能力提升</li>
<li>解决实习就业</li>
<li>提升院校专业影响力</li>
</ul>
<p class="desc">
依据数字经济岗位胜任力模型,有针对性的制定人才培养计划,全面提升人才的数字专项技能。引产入校,充分解决学生实习就业的问题,做好学员从学生到职业人的角色转化工作。产学研的融合,进一步提升院校的专业影响力。
</p>
</div>
<div v-if="tabActive === 1" class="part">
<ul>
<li>学生:学-用-就业</li>
<li>学校:招生-教学-师资-实习-就业</li>
<li>企业:人才培养-岗位培训-实习-招聘</li>
</ul>
<p class="desc">
学生,学以致用,从学习技能到实际使用技能为企业创造价值,得到社会企业的认可,达到就业的目的。<br /><br />
学校,以产业发展为方向,以科研为先导,以选拔招生为前提,以教学为根本,以实习为抓手,以学生就业为目的,使学校全栈得到综合提升。<br /><br />
企业,从企业发展的角度,对人才进行前置性储备,建立人才培养体系,引进实习实训,发现人才、培养人才、留住人才,形成企业的核心竞争力。
</p>
</div>
<div v-if="tabActive === 2" class="part">
<ul>
<li>贯穿整个教学周期</li>
<li>服务院校长期专业发展目标</li>
<li>多种产品提供给学校、学生</li>
</ul>
<p class="desc">
从人才培养方案咨询、课程体系建设、教师培训、线上线下授课、落地实习实训、指导学生就业,全方位贯彻整个教学周期。<br /><br />
以省市乃至国家一流产业学院为目标,服务院校长期专业发展。<br /><br />
从国内外,从线上线下,从产学研,从校师生,多个层面提供服务。<br /><br />
</p>
</div>
</div>
</div>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/servicesCollegeNavList.js'
export default {
components: { AppFrame },
data() {
return {
tabs: navList(this),
navList: [
// {
// name: '需求强劲',
// img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png',
// activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_01.png'
// },
{
name: '瞄准痛点',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_02.png'
},
{
name: '闭环服务',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_03.png'
},
{
name: '长期共赢',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_04.png'
}
],
tabActive: 0
}
},
methods: {
navActive(item, index) {
this.tabActive = index
}
}
}
</script>
<style lang="scss" scoped>
.module-1 {
.desc {
font-size: 14px;
font-weight: 300;
line-height: 28px;
color: #444;
opacity: 1;
}
.m1-new-item {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #424242;
padding-top: 53px;
padding-bottom: 20px;
}
.tips {
font-size: 16px;
line-height: 32px;
color: #424242;
font-weight: 300;
padding: 20px 0 50px;
}
.item-box {
display: flex;
.left-box {
width: 562px;
height: 385px;
position: relative;
.bg {
width: 100%;
height: 100%;
display: block;
transition: all 0.5s;
}
.txt {
position: absolute;
top: 50%;
left: 19px;
transform: translateY(-50%);
width: 155px;
}
.img1 {
width: 155px;
}
.img11 {
width: 415px;
}
overflow: hidden;
&:hover {
.bg {
transform: scale(1.1);
}
}
}
.right-box {
width: 329px;
margin-left: 4px;
.items {
position: relative;
width: 100%;
height: 190px;
margin-bottom: 4px;
overflow: hidden;
&:hover {
.bg {
transform: scale(1.1);
}
}
}
.bg {
width: 100%;
height: 100%;
display: block;
transition: all 0.5s;
}
.txt {
position: absolute;
top: 50%;
left: 19px;
transform: translateY(-50%);
&.t1 {
width: 109px;
}
&.t11 {
width: 253px;
}
&.t2 {
width: 181px;
}
&.t22 {
width: 303px;
}
}
}
}
}
img {
width: 100%;
display: block;
&:nth-child(1) {
margin-bottom: 18px;
}
&:nth-child(2) {
margin-bottom: 22px;
}
&:nth-child(3) {
width: 874px;
margin-bottom: 54px;
}
&:nth-child(4) {
margin-bottom: 12px;
}
&:nth-child(5) {
width: 863px;
margin-bottom: 50px;
}
}
ul {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 32px;
// li {
// // padding: 15px;
// margin-left: 25px;
// }
.li {
list-style-type: disc;
color: #333;
font-size: 18px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 146px;
height: 146px;
opacity: 1;
background: #f4f4f4;
.name {
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active {
background-color: #a81840;
border-bottom: 6px solid #a81840;
.name {
color: #fff;
}
}
}
.img-content {
height: 280px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
}
.part {
li {
list-style-type: disc;
color: #333;
font-size: 18px;
margin-left: 25px;
padding: 15px;
}
}
}
</style>
<template>
<app-frame :tabs="tabs" title="数字经济产业学院">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img5.png" class="banner" />
<template #article>
<div class="module-2">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image24.png" />
<p style="color: #424242;font-size:16px;font-weight: 400;margin-top:30px;">
数字经济产业学院服务项目
</p>
<p style="color: #424242;font-size:14px;margin-top:20px;margin-bottom:17px">
为学校、学生和企业提供长期的闭环服务
</p>
<ul>
<li
v-for="(item, index) in tabsList"
:key="index"
class="li"
@click="tabsClick(item, index)"
@mouseenter="handleMsEnter(index)"
@mouseleave="handleMsLeave"
:class="{ active: index === tabsActive, isHover: index === hoverIndex }"
>
<img
:src="index === tabsActive || index === hoverIndex ? item.activeImg : item.img"
style="width:43px;height:43px"
/>
<div class="name">{{ item.name }}</div>
<p>{{ item.dec }}</p>
</li>
</ul>
<div class="content-mian" style="padding-top:10px;">
<div class="con-img-box" v-if="tabsActive === 0">
<!-- <img src="https://webapp-pub.ezijing.com/www/pc/industry/image6.png" /> -->
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image7.png" style="width: 100%;;height:100%" />
<p class="desc">
面向产业转型发展和区域经济社会需求,清控紫荆教育与地方院校进行专业共建。以深化产教深度融合,创新人才培养方案、课程体系、方式方法、保障机制等。促成课程内容与技术发展衔接、教学过程与生产过程对接、人才培养与产业需求融合。达到共同建设省市乃至国家级的一流学科。
</p>
</div>
<p style="font-size:16px;color:#424242;margin-bottom:21px">三大专业范畴,10余个特色专业方向。</p>
<div class="parts">
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img16.png" />
<p class="title">新文科</p>
<p class="dec">数字金融.数字营销,商业数据分析、数字媒体技术、智能运营;…</p>
</div>
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img17.png" />
<p class="title">新工科</p>
<p class="dec">人工智能方向、数据技术方向、云计算方向、网络安全方向;</p>
</div>
<div class="part">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/img18.png" />
<p class="title">智能制造</p>
</div>
</div>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image9.png" />
</div>
<div class="con-img-box" v-if="tabsActive === 1">
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image10.png" style="width: 100%;height:100%" />
<p class="desc">
紫荆教育数字经济产业学院SAAS平台(以下简称“ZJSAAS平台”)是由紫荆教育经过6年时间的教育科技实践,专门为与高校合作建立
数字经济产业学院而研发,以提高教学质量为目的,以数据科技为基础,
以学生为核心,100+功能模块涵盖信息宣传、学生管理、教师管理、教学内容管理、教学过程实施、课程实训以及实习就业等工作。
</p>
</div>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image11.png" />
</div>
<div class="con-img-box" v-if="tabsActive === 2">
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image12.png" style="width: 100%;;height:100%" />
<p class="descc">
清控紫荆教育针对数字经济岗位要求,以培养学生综合职业能力为导向,结合学校数字经济专业实训条件,
提出了“引产入校、以产促教”的工学结合一体化人才培养思路,实施“边教、边做、边生产、边学习”。引
进企业产品生产任务,将一体化课程项目教学与实际产品生产相结合,灵活调整专业教学内容,安排学生参
与产品生产加工、市场推广运营、经营管理等环节。通过各种不同项目的教学和真实产品的生产经营,使学
生掌握各种岗位的技能与能力,了解企业经营生产组织方式、工艺流程、产品加工技术要求、市场推广、运
营管理等,形成必备的职业核心技能和素养。<br />清控紫荆教育追求深度融合,协同创新,充分发挥企业和学校在
产学融合中的作用,整合资源、优化结构,充分实现产学协同发展,培养高素质、高技能人才,并且形成独有的特色。
</p>
</div>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image13.png" />
</div>
<div class="con-img-box" v-if="tabsActive === 3">
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image14.png" style="width: 100%;;height:100%" />
<p class="desc">
清控紫荆教育实习就业服务以专业课程导入为前提,分为实训、就业指导与实习上岗三个层次。完成学生和用人企业的无缝对接,达成“学位即岗位”的目标。
</p>
</div>
<p style="font-size:18px;font-weight:400;color:#000000;margin-bottom:20px">
企业人力资源用人模式的改变
</p>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image15.png" />
<p style="color: #777777;font-weight: 300;font-size: 14px;margin-bottom:40px">
清控紫荆教育的产业、企业、学校联动的方式,在降低企业人力资源成本的同时提升了学生在实战项目中的应用技能,最终达到产业人才培养的目的。
</p>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image16.png" />
</div>
<div class="con-img-box" v-if="tabsActive === 4">
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image17.png" style="width: 100%;;height:100%" />
<p class="desc">
以新兴技术为基础,聚焦数字经济领域,清控紫荆教育汇集顶尖数字理论和应用研究专家,整合先进技术资源,通过产学研紧密
合作,建设成具有引领作用的创新型数字经济实验室,以案例作为实验室的核心要素,旨在创新技术研发、企业培育、校企合作培养专
业人才等方面发挥重要作用,为数字经济人才提供学习提升的平台与机会,强化产学研协作培养顶尖数字人才,助推国家人才发展战略。
</p>
</div>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image18.png" />
</div>
<div class="con-img-box" v-if="tabsActive === 5">
<div style="position:relative;height:262px;margin-bottom:60px">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image19.png" style="width: 100%;;height:100%" />
<p class="desc">
以新兴技术为基础,聚焦数字经济领域,清控紫荆教育汇集顶尖数字理论和应用研究专家,整合先进技术资源,通过产学研紧密
合作,建设成具有引领作用的创新型数字经济实验室,以案例作为实验室的核心要素,旨在创新技术研发、企业培育、校企合作培养专
业人才等方面发挥重要作用,为数字经济人才提供学习提升的平台与机会,强化产学研协作培养顶尖数字人才,助推国家人才发展战略。
</p>
</div>
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image20.png" /><img
src="https://webapp-pub.ezijing.com/www/pc/industry/image21.png"
/><img src="https://webapp-pub.ezijing.com/www/pc/industry/image22.png" /><img
src="https://webapp-pub.ezijing.com/www/pc/industry/image23.png"
/>
</div>
</div>
</div>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/servicesCollegeNavList.js'
export default {
components: { AppFrame },
data() {
return {
tabs: navList(this),
tabsList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
name: '专业共建',
dec: '专业提升',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_01.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image82.png',
name: 'SAAS软件平台',
dec: '教学管理',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_02.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image83.png',
name: '引产入校',
dec: '实训基地',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_03.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image84.png',
name: '实习就业',
dec: '企业人力资源服务',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_04.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png',
name: '数字经济实验室',
dec: '前沿案例',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_05.png'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png',
name: '培训证书',
dec: '专业补充',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_06.png'
}
],
tabsActive: 0,
hoverIndex: -1
}
},
methods: {
tabsClick(item, index) {
this.tabsActive = index
},
handleMsEnter(index) {
this.hoverIndex = index
},
handleMsLeave() {
this.hoverIndex = -1
}
}
}
</script>
<style lang="scss" scoped>
.module-2 {
ul {
display: flex;
justify-content: space-between;
align-items: center;
.li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 130px;
height: 132px;
background: #f4f4f4;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
.name {
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active,
.isHover {
background: #a81840;
border-top: 6px solid #a81840;
box-shadow: 5px 5px 5px #bbb;
.name {
color: #fff;
}
p {
color: #fff;
}
}
.isHover {
transform: translateY(-10px);
}
}
.content-mian {
.con-img-box {
.desc {
position: absolute;
top: 50%;
left: 98px;
right: 56px;
margin-top: -50px;
color: #fff;
line-height: 26px;
font-size: 14px;
font-weight: 300;
}
.descc {
top: 35px;
bottom: 30px;
left: 55px;
right: 56px;
position: absolute;
color: #fff;
font-size: 14px;
font-weight: 300;
line-height: 26px;
}
img {
display: block;
&:nth-child(1) {
width: 768px;
margin-bottom: 67px;
}
&:nth-child(2) {
width: 100%;
margin-bottom: 38px;
}
&:nth-child(3) {
width: 864px;
// margin-bottom: 78px;
}
}
.parts {
// padding: 50px 36px;
display: flex;
justify-content: space-around;
.part:hover {
background-color: #fff;
}
.part {
width: 286px;
height: 380px;
display: flex;
flex-direction: column;
background: #f9f8f8;
img {
width: 100%;
height: 190px;
}
.title {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
opacity: 1;
margin-left: 25px;
margin-top: -40px;
}
.dec {
font-size: 14px;
font-weight: 300;
line-height: 26px;
color: #666666;
opacity: 1;
margin-left: 25px;
}
}
}
}
.ul-tit {
font-size: 22px;
font-weight: 500;
line-height: 100%;
padding: 0 0 36px;
color: #424242;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 5px;
margin-bottom: 5px;
width: 220px;
height: 170px;
position: relative;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
transition: all 0.3s;
width: 100%;
height: 100%;
display: block;
}
.pop-txt {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
.name {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 16px;
font-weight: 300;
// line-height: 170px;
color: #ffffff;
}
}
}
}
}
}
</style>
......@@ -4,45 +4,21 @@
<div class="mian">
<div class="occupation-content-mian">
<div class="module-1 module-content-box">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/internship/img1.png'
: 'https://webapp-pub.ezijing.com/www/pc/internship/img1.png'
"
class="img1"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/internship/img1.png" class="img1" />
<div class="content-mian">
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/internship/img2.png'
: 'https://webapp-pub.ezijing.com/www/pc/internship/img2.png'
"
class="img1"
/><img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/internship/img3.png'
: 'https://webapp-pub.ezijing.com/www/pc/internship/img3.png'
"
<img src="https://webapp-pub.ezijing.com/www/pc/internship/img2.png" class="img1" /><img
src="https://webapp-pub.ezijing.com/www/pc/internship/img3.png"
class="img1"
/>
<img
v-if="$cookies.get('lang') == 'en-US'"
src="https://webapp-pub.ezijing.com/www/pc/internship/img6.png"
alt=""
class="img21"
/>
<img
v-else
src="https://webapp-pub.ezijing.com/www/pc/internship/img6.png"
alt=""
class="img2"
/>
<img v-else src="https://webapp-pub.ezijing.com/www/pc/internship/img6.png" class="img2" />
<ul>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp624-i1.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp624-i1.png" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Professional Thinking' : '职业思维篇' }}
......@@ -50,7 +26,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx2.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx2.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Professional Image' : '职业形象篇' }}
......@@ -58,7 +34,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx3.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx3.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Professional Efficiency' : '职业效率篇' }}
......@@ -66,7 +42,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx4.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx4.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Career Advancement' : '职业规划篇' }}
......@@ -74,7 +50,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx5.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx5.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Erudite Thinking' : '菁英思维' }}
......@@ -82,7 +58,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx6.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx6.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Erudite Skills' : '菁英技能' }}
......@@ -90,7 +66,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp624-i2.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp624-i2.png" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Erudite Development' : '菁英拓展' }}
......@@ -98,7 +74,7 @@
</div>
</li>
<li>
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx8.jpg" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/emp-gx8.jpg" />
<div class="pop-txt">
<div class="name">
{{ $cookies.get('lang') == 'en-US' ? 'Erudite Practice' : '菁英实训' }}
......@@ -106,23 +82,9 @@
</div>
</li>
</ul>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/internship/img4.png'
: 'https://webapp-pub.ezijing.com/www/pc/internship/img4.png'
"
class="img1"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/internship/img4.png" class="img1" />
<h1 style="font-size:22px;color:#424242;padding-bottom:20px">部分合作企业</h1>
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/internship/img5.png'
: 'https://webapp-pub.ezijing.com/www/pc/internship/img5.png'
"
class="img1"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/internship/img5.png" class="img1" />
<h1 style="font-size:22px;color:#424242;padding-bottom:20px">实习就业咨询合作</h1>
<p style="font-size:18px;color:#424242">联系电话:010-62799201&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 王老师</p>
</div>
......
<template>
<div>
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" />
</div>
<div class="w1200">
<div class="why">
<h1 class="why-title">为什么选择紫荆教育的国际留学课程?</h1>
<div class="why-list">
<div class="why-item" v-for="(item, index) in whyList" :key="index">
<img :src="item.icon" class="why-item__icon" />
<img :src="item.hoverIcon" class="why-item__icon_hover" />
<div class="why-content" v-html="item.desc"></div>
</div>
</div>
</div>
<app-card title="热门专业">
<div class="project-list">
<div class="project-item" v-for="(item, index) in projectList" :key="index">
<AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
</div>
</div>
</app-card>
<app-card title="常见问题">
<template #header-aside><nuxt-link to="/studyAbroad/qa">查看更多+</nuxt-link></template>
<ul class="qa-list">
<li v-for="(item, index) in qaList" :key="index">
<nuxt-link to="/studyAbroad/qa">{{ item.question }}</nuxt-link>
</li>
</ul>
</app-card>
<NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
<TeacherCard :list="teacherList"></TeacherCard>
<app-card title="申请流程">
<div class="process">
<img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/process.png" />
</div>
</app-card>
</div>
</div>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
import AppLink from '@/components/Link.vue'
import NewsCard from '@/components/NewsCard.vue'
import TeacherCard from '@/components/TeacherCard.vue'
import qaList from '@/assets/studyAbroadQA.js'
export default {
components: { AppCard, AppLink, NewsCard, TeacherCard },
data() {
return {
whyList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01_hover.png',
desc: '优选国际正规院校、学位受到全球普遍承认'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02_hover.png',
desc: '短期出国,可做中留服同等学历认证'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03_hover.png',
desc: '严格审核,正规面试,以国际标准选拔优秀人才'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04_hover.png',
desc: '国企背景、专业口碑,国际化专业运营团队'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05_hover.png',
desc: '国内外学习过程紧密衔接,全程跟踪服务'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06_hover.png',
desc: '稳定的学习系统,365天X24小时全球登录'
}
],
// 热门专业
projectList: [
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu.png',
href: 'https://cbu-plus.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_marywood_plus_1.png',
href: 'https://marywood-plus.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu.png',
href: 'https://sbu-plus.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_ucr.png',
onClick: this.showMessage
// href: 'https://cbu-plus.ezijing.com/'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_marywood_plus_2.png',
href: 'https://marywood-plus.ezijing.com/'
}
],
// 常见问题
qaList,
// 最新动态请求参数
newsParams: {
project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408'],
type_tag: 'article_news_hot',
page: 1,
limit: 4
},
teacherList: [
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
name: 'Glenn Hartelius',
project: '师资-CIIS',
title: '博士',
desc:
'《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
name: '钟思嘉',
project: '师资-CIIS',
title: '教授',
desc:
'美国俄勒冈大学哲学博士(教育心理学与咨询心理学)<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师,心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
name: 'Sharon Hundley,Ed.D.',
project: '师资-CU',
title: '副教授',
desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
name: '胡晓毅',
project: '师资-CU',
title: '教授',
desc:
'北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
name: 'Ash Soni',
project: '师资-KELLEY',
title: '教授',
desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
name: '肇越',
project: '师资-KELLEY',
title: '博士',
desc:
'清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
name: 'Chris Speicher',
project: '师资-MARYWOOD',
title: '副教授',
desc: '天普大学博士副教授'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
name: '张恩忠',
project: '师资-MARYWOOD',
title: '副教授',
desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_09.jpg',
name: 'Andrea Leuenberger',
project: '师资-SHMS',
title: '项目主管',
desc:
'擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
}
]
}
},
methods: {
showMessage() {
this.$message('敬请期待')
}
}
}
</script>
<style lang="scss" scoped src="@/assets/css/studyAbroad.scss"></style>
<template>
<article-detail :tabs="tabs" @back="$router.push('/studyAbroad/news')"></article-detail>
</template>
<script>
import ArticleDetail from '@/components/ArticleDetail'
import navList from '@/assets/studyAbroadNavList.js'
export default {
components: { ArticleDetail },
data() {
return {
tabs: navList
}
}
}
</script>
<template>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<article-list v-bind="listOptions"></article-list>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/studyAbroadNavList.js'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
components: { AppFrame, ArticleList },
data() {
return {
tabs: navList
}
},
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: {
project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408'],
type_tag: 'article_news_hot'
}
},
to(item) {
return { name: 'studyAbroad-news-id', params: { id: item.id } }
}
}
}
}
}
</script>
<template>
<app-frame :tabs="tabs">
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<template #article>
<dl v-for="(item, index) in qaList" :key="index">
<dt>Q:{{ item.question }}</dt>
<dd v-html="item.answer"></dd>
</dl>
</template>
</app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/studyAbroadNavList.js'
import qaList from '@/assets/studyAbroadQA.js'
export default {
components: { AppFrame },
data() {
return {
tabs: navList,
qaList
}
}
}
</script>
<style lang="scss" scoped>
.is-pc {
dl {
margin-bottom: 20px;
dt {
font-size: 16px;
font-weight: bold;
line-height: 32px;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
dd {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
}
.is-h5 {
dl {
margin-bottom: 0.18rem;
dt {
font-size: 0.12rem;
font-weight: bold;
line-height: 0.16rem;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
dd {
font-size: 0.12rem;
line-height: 0.16rem;
color: #424242;
}
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论