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

v3

上级 da2a7d87
No preview for this file type
...@@ -34,3 +34,17 @@ export function postNes(data) { ...@@ -34,3 +34,17 @@ export function postNes(data) {
headers: { 'Content-Type': 'multipart/form-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 { ...@@ -203,7 +203,7 @@ export default {
{ {
name: this.$t('menu.industrialCollegeChild.saas'), name: this.$t('menu.industrialCollegeChild.saas'),
isShow: false, isShow: false,
path: 'https://x-learning.ezijing.com', path: 'https://e-saas.ezijing.com',
pathType: 1 pathType: 1
}, },
{ {
...@@ -211,16 +211,16 @@ export default { ...@@ -211,16 +211,16 @@ export default {
isShow: false, isShow: false,
path: '/services/employment' path: '/services/employment'
}, },
{ // {
name: this.$t('menu.industrialCollegeChild.x'), // name: this.$t('menu.industrialCollegeChild.x'),
path: 'https://x.ezijing.com', // path: 'https://x.ezijing.com',
pathType: 1 // pathType: 1
}, // },
{ // {
name: this.$t('menu.industrialCollegeChild.cert'), // name: this.$t('menu.industrialCollegeChild.cert'),
isShow: false, // isShow: false,
path: '/services/job' // path: '/services/job'
}, // },
{ {
name: this.$t('menu.industrialCollegeChild.data'), name: this.$t('menu.industrialCollegeChild.data'),
isShow: false, isShow: false,
...@@ -230,6 +230,7 @@ export default { ...@@ -230,6 +230,7 @@ export default {
}, },
{ {
name: this.$t('menu.degree'), name: this.$t('menu.degree'),
path: '/internationalDegree',
childern: [ childern: [
// { // {
// name: this.$t('menu.degreeChild.bachelor'), // name: this.$t('menu.degreeChild.bachelor'),
...@@ -260,22 +261,22 @@ export default { ...@@ -260,22 +261,22 @@ export default {
name: this.$t('menu.degreeChild.masterChild.map'), name: this.$t('menu.degreeChild.masterChild.map'),
path: 'https://ciis.ezijing.com', path: 'https://ciis.ezijing.com',
pathType: 1 pathType: 1
}, }
// { // {
// name: this.$t('menu.degreeChild.masterChild.paln'), // name: this.$t('menu.degreeChild.masterChild.paln'),
// path: 'https://cfflp.ezijing.com', // path: 'https://cfflp.ezijing.com',
// pathType: 1 // pathType: 1
// }, // },
{ // {
name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'), // name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
path: 'https://marywood-plus.ezijing.com/', // path: 'https://marywood-plus.ezijing.com/',
pathType: 1 // pathType: 1
}, // }
{ // {
name: '金融学硕士1+1', // name: '金融学硕士1+1',
path: 'https://sbu-plus.ezijing.com/', // path: 'https://sbu-plus.ezijing.com/',
pathType: 1 // pathType: 1
} // }
] ]
}, },
{ {
...@@ -303,44 +304,94 @@ export default { ...@@ -303,44 +304,94 @@ export default {
pathType: 1 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: '留学中心',
path: '/studyAbroad',
childern: [
{
name: '国际大一1+3(即将推出)',
pathType: 3
}, },
{ {
name: this.$t('menu.degreeChild.doctor'), name: '工商管理硕士1+1',
isShow: false, path: 'https://marywood-plus.ezijing.com/',
childern: [ pathType: 1
// { },
// name: this.$t('menu.degreeChild.doctorChild.dba'), {
// pathType: 3 name: '管理信息系统硕士1+1',
// }, path: 'https://marywood-plus.ezijing.com/',
{ pathType: 1
name: this.$t('menu.degreeChild.doctorChild.edd'), },
path: 'https://cbu-plus.ezijing.com', {
pathType: 1 name: '金融学硕士1+1',
}, path: 'https://sbu-plus.ezijing.com/',
{ pathType: 1
name: this.$t('menu.degreeChild.doctorChild.studyAbroad'), },
pathType: 3 {
} name: this.$t('menu.degreeChild.doctorChild.edd'),
] path: 'https://cbu-plus.ezijing.com',
pathType: 1
} }
] ]
}, },
{ {
name: this.$t('menu.onlineEdu'), name: this.$t('menu.industrialCollegeChild.cert'),
path: '/services/solution', path: '/services/job',
childern: [ childern: [
{ {
name: this.$t('menu.onlineEduChild.service'), name: this.$t('menu.industrialCollegeChild.x'),
isShow: false, path: 'https://x.ezijing.com',
path: '/services/solution' pathType: 1
}, },
{ {
name: this.$t('menu.onlineEduChild.prp'), name: this.$t('menu.onlineEduChild.prp'),
path: 'https://prp.ezijing.com/', path: 'https://prp.ezijing.com/',
pathType: 1 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'), name: this.$t('menu.alumni'),
path: '/alumnus', path: '/alumnus',
...@@ -361,11 +412,11 @@ export default { ...@@ -361,11 +412,11 @@ export default {
path: '/alumnus/story' path: '/alumnus/story'
} }
] ]
},
{
name: this.$t('menu.apply'),
click: 1
} }
// {
// name: this.$t('menu.apply'),
// click: 1
// }
], ],
time: null, time: null,
isEn: false isEn: false
...@@ -382,7 +433,7 @@ export default { ...@@ -382,7 +433,7 @@ export default {
}, },
goPage(path, goType) { goPage(path, goType) {
if (parseInt(goType) === 3) { if (parseInt(goType) === 3) {
this.$message('暂未开通,请期待') this.$message('暂未开通,请期待')
} else { } else {
if (path) { if (path) {
goType ? window.open(path) : this.$router.push({ path: path }) goType ? window.open(path) : this.$router.push({ path: path })
...@@ -434,7 +485,7 @@ export default { ...@@ -434,7 +485,7 @@ export default {
getNameActive() { getNameActive() {
return item => { return item => {
const currentPath = this.$route.path const currentPath = this.$route.path
if (item.path === currentPath) { if (currentPath.includes(item.path)) {
return 'name active' return 'name active'
} else { } else {
let className = 'name' let className = 'name'
......
<template> <template>
<div> <span class="app-link">
<template v-if="item.news"> <!-- 外部链接跳转 -->
<a <a :href="href" :target="target" v-if="href"><slot /></a>
:target="item.news.data.uri !== '' ? '_blank' : '_self'" <!-- 站内跳转 -->
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`"> <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
<slot /> <!-- 事件 -->
</a> <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
</template> <template v-else><slot /></template>
<template v-else> </span>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div>
</template> </template>
<script> <script>
export default { 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> </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> <template>
<div class="alumni-content"> <div class="home-alumni">
<div :class="isScale ? 'title-content max-width scale' : 'title-content max-width'"> <AppCard title="校友故事" class="max-width">
<div class="left-title"> <template #header-aside><nuxt-link to="/alumnus/story">查看更多+</nuxt-link></template>
<div class="line"></div> <p class="tips">You are What you together,结识6000+ 同样优秀的人!</p>
<div class="text">{{ $t('home.alumni.title') }}</div> </AppCard>
</div> <div class="swiper-content">
<div class="right-text" @click="$router.push({ path: '/alumnus/story' })"> <div v-swiper:mySwiper="swiperOptions" ref="mySwiper">
{{ $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="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ <app-link :data="item" :to="`/alumnus/story/${item.id}`">
news: { <img :src="item.web_img_uri" loading="lazy" />
data: item,
path: '/alumnus/story'
}
}">
<img :src="item.web_img_uri">
<div class="text">{{ item.title }}</div> <div class="text">{{ item.title }}</div>
</app-link> </app-link>
</div> </div>
...@@ -30,31 +19,20 @@ ...@@ -30,31 +19,20 @@
</div> </div>
</template> </template>
<script> <script>
import appLink from '@/components/Link' import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default { export default {
components: { components: { AppCard, AppLink },
appLink data() {
},
data () {
const _this = this
return { return {
isScale: false,
listData: [], listData: [],
swiperOption: { swiperOptions: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true, autoplay: true,
delay: 3000, delay: 5000,
loop: true, loop: true,
slidesPerView: 'auto', slidesPerView: 'auto',
centeredSlides: true, centeredSlides: true,
spaceBetween: 20, spaceBetween: 10
on: {
init() {
_this.swiper.slideNext()
}
}
} }
} }
}, },
...@@ -66,118 +44,79 @@ export default { ...@@ -66,118 +44,79 @@ export default {
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => { this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.max-width{ .max-width {
width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.alumni-content{ .home-alumni {
min-width: 1200px; padding-top: 60px;
padding-top: 89px; .tips {
.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{
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
line-height: 34px; line-height: 34px;
color: #424242; color: #424242;
margin-top: 12px; margin-bottom: 12px;
} }
.swiper-content{ .swiper-content {
padding-top: 37px; ::v-deep .swiper-wrapper {
// overflow: auto; align-items: center;
// width: 100%; }
.swiper-slide{
.swiper-slide {
position: relative; position: relative;
width: 388px; width: 388px;
height: 244px; height: 244px;
margin-top: 10px; overflow: hidden;
.text{ .text {
position: absolute; position: absolute;
bottom: 0;
left: 0; left: 0;
bottom: 0;
width: 100%; width: 100%;
height: 40px;
line-height: 40px; line-height: 40px;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
padding: 0 20px; padding: 0 20px;
box-sizing: border-box;
font-size: 20px; font-size: 20px;
color: #FEFEFE; color: #fefefe;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
img{ img {
display: block;
width: 100%; width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
} }
} }
.swiper-slide-active { .swiper-slide-active {
width: 423px; width: 424px;
height: 266px; height: 266px;
margin-top: 0;
img{
width: 100%;
height: 100%;
display: block;
}
} }
} }
} }
.scale{ .is-h5 {
transform: scale(0.85); .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> </style>
<template> <template>
<div class="banner-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="home-banner">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <swiper :options="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <swiper-slide v-for="(item, index) in listData" :key="index">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <template v-if="item.uri">
<template v-if="item.uri"> <a :href="item.uri" target="_black">
<a :href="item.uri" target="_blank"> <img :src="item.web_img_uri" />
<img :src="item.web_img_uri"> </a>
</a> </template>
</template> <template v-else>
<template v-else> <img :src="item.web_img_uri" />
<img :src="item.web_img_uri"> </template>
</template> </swiper-slide>
</div> </swiper>
</div> <template v-if="!isMobile">
</div> <div class="prev-button"></div>
<div class="prev-button"></div> <div class="next-button"></div>
<div class="next-button"></div> </template>
</div> </div>
</template> </template>
<script> <script>
const _this = this export default {
export default { name: 'banner',
data () { data() {
return { return {
listData: [], listData: [],
swiperOption: { swiperOption: {
speed: 400, speed: 400,
autoplay: true, autoplay: true,
delay: 4500, delay: 3000,
observer: true, observer: true,
observerParent: true, observerParent: true,
navigation: { navigation: {
nextEl: '.next-button', nextEl: '.next-button',
prevEl: '.prev-button' prevEl: '.prev-button'
}, },
loop: true loop: true
}
}
},
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
})
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
} }
} }
},
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 => res.data.data)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.banner-content{ .home-banner {
position: relative; position: relative;
width: 100%; .swiper-wrapper {
min-width: 1200px;
.swiper-wrapper{
width: 100%; width: 100%;
display: flex; display: flex;
.swiper-slide{ .swiper-slide {
width: 100%; img {
img{
width: 100%; width: 100%;
display: block; display: block;
} }
} }
} }
.prev-button{ .prev-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 30px; left: 30px;
...@@ -92,7 +74,7 @@ ...@@ -92,7 +74,7 @@
z-index: 999; z-index: 999;
cursor: pointer; cursor: pointer;
} }
.next-button{ .next-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 30px; right: 30px;
...@@ -104,4 +86,4 @@ ...@@ -104,4 +86,4 @@
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -143,7 +143,7 @@ export default { ...@@ -143,7 +143,7 @@ export default {
}, },
goPage(path) { goPage(path) {
if (path === '') { if (path === '') {
this.$message('暂未开通,请期待。') this.$message('暂未开通,请期待。')
return return
} }
window.open(path) window.open(path)
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="title">教育服务</div> <div class="title">教育服务</div>
<ul class="nav-content"> <ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path, item.pathType)"> <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.icon" alt="" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active"> <img :src="item.iconActive" alt="" class="icon-active" />
<div class="text" v-html="item.text"></div> <div class="text" v-html="item.text"></div>
</li> </li>
</ul> </ul>
...@@ -16,39 +16,53 @@ export default { ...@@ -16,39 +16,53 @@ export default {
return { return {
data: [ data: [
{ {
icon: 'https://zws-imgs-pub.ezijing.com/static/public/3118a654ec7f92a52b7d04f2f1f5989a.png', icon: 'https://zws-imgs-pub.ezijing.com/static/public/3118a654ec7f92a52b7d04f2f1f5989a.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/37488a824991634e9283c870d976eb79.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/7bea5e01e4e4c92e104bb1d73d313500.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8b624145e8cd4a8c38f108dbd0efc3eb.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/0e5522064d9070290b3d541a485d469f.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/01d9b50bd0e2e2355a18f486181d710a.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/0912f621abe188ccc84df6520a8fecf9.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/759a550044932bcf0f1159d103361ed2.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/6cf5b6010dd7d35a80d4acc270db8a86.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/4e86da38599e6fcfdd53f459df2f0a16.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/6db512b8b2b4501651e6f9bc520d7379.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/bcbc44b065ea26146a68750e82aa058c.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', icon: 'https://zws-imgs-pub.ezijing.com/static/public/9603456c7edb101ec5469f92e9e21553.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ae17f20f43525893b263fef139ea7006.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 { ...@@ -56,7 +70,7 @@ export default {
methods: { methods: {
goPage(path, type) { goPage(path, type) {
if (path === '') { if (path === '') {
this.$message('暂未开通,请期待。') this.$message('暂未开通,请期待。')
return return
} else { } else {
!type ? window.open(path) : this.$router.push({ path: path }) !type ? window.open(path) : this.$router.push({ path: path })
...@@ -67,47 +81,47 @@ export default { ...@@ -67,47 +81,47 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.service-content{ .service-content {
padding-top: 44px; padding-top: 44px;
.title{ .title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
line-height: 34px; line-height: 34px;
color: #424242; color: #424242;
margin-bottom: 20px; margin-bottom: 20px;
} }
.nav-content{ .nav-content {
display: flex; display: flex;
li{ li {
width: 156px; width: 156px;
height: 186px; height: 186px;
background: #FFFFFF; background: #ffffff;
padding-top: 36px; padding-top: 36px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
transition: all .5s; transition: all 0.5s;
img{ img {
width: 64px; width: 64px;
height: 64px; height: 64px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.icon-active{ .icon-active {
display: none; display: none;
} }
&:hover{ &:hover {
background: rgba(170, 25, 65, 1); background: rgba(170, 25, 65, 1);
.text{ .text {
color: #fff; color: #fff;
} }
.icon{ .icon {
display: none; display: none;
} }
.icon-active{ .icon-active {
display: block; display: block;
} }
} }
.text{ .text {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -118,7 +132,7 @@ export default { ...@@ -118,7 +132,7 @@ export default {
} }
} }
} }
.max-width-center{ .max-width-center {
width: 1212px; width: 1212px;
margin: 0 auto; margin: 0 auto;
} }
......
<template> <template>
<div class="msg-content"> <AppCard :title="$t('home.msg.title')" class="home-headmaster">
<div class="title-content"> <template #header-aside
<div class="left-title"> ><nuxt-link to="/about/message">{{ $t('viewMore') }}</nuxt-link></template
<div class="line"></div> >
<div class="text">{{ $t('home.msg.title') }}</div> <div class="gallery-top">
</div> <swiper :options="swiperOptionTop" ref="swiperTop">
<div class="right-text" @click="$router.push({ path: '/about/message', query: { type: 'img_text_school' } })"> <swiper-slide v-for="(item, index) in listData" :key="index">
{{ $t('viewMore') }} <app-link :data="item" :to="`/about/message/${item.id}`">
</div> <img :src="item.web_img_uri" loading="lazy" />
</app-link>
</swiper-slide>
</swiper>
</div> </div>
<div class="swiper-content"> <div class="gallery-thumbs">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <swiper :options="swiperOptionThumbs" ref="swiperThumbs">
<div class="swiper-wrapper"> <swiper-slide v-for="(item, index) in listData" :key="index">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="thumbs">
<app-link :item="{ news: { data: item, path: '/about/message' } }"> {{ item.title }}
<img :src="item.web_img_uri" />
</app-link>
</div> </div>
</div> </swiper-slide>
<div class="swiper-pagination swiper-pagination-bullets"></div> </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> </div>
</div> </div>
<text-swiper :listData="listData" @slideTo="handleSlideTo" v-if="listData.length" /> </AppCard>
</div>
</template> </template>
<script> <script>
import appLink from '@/components/Link' import AppCard from '@/components/AppCard'
import textSwiper from './textSwiper.vue' import AppLink from '@/components/Link'
export default { export default {
components: { components: { AppCard, AppLink },
appLink,
textSwiper
},
data() { data() {
const that = this const that = this
return { return {
listData: [], listData: [],
swiperOption: { swiperOptionTop: {
speed: 400, loop: true,
autoplay: false, loopedSlides: 5, // looped slides should be the same
delay: 3000, spaceBetween: 10
loop: false, },
// pagination: { swiperOptionThumbs: {
// el: '.swiper-pagination', loop: true,
// clickable: true loopedSlides: 5, // looped slides should be the same
// }, spaceBetween: 10,
// direction: 'vertical', centeredSlides: true,
height: 500 slidesPerView: 'auto',
// autoHeight: true touchRatio: 0.2,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
} }
} }
}, },
async fetch() { async fetch() {
const params = { const params = {
project_id: process.env.projectId, // project_id: process.env.projectId,
project_id: '6800242743894343680',
type_tag: 'img_text_school' type_tag: 'img_text_school'
} }
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => { this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
return res.data.data
})
},
computed: {
// swiper() {
// return this.$refs.mySwiper.swiper;
// }
}, },
methods: { mounted() {
handleSlideTo(index) { this.$nextTick(() => {
this.$refs.mySwiper.swiper.slideTo(index) const swiperTop = this.$refs.swiperTop.$swiper
} const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.msg-content { .home-headmaster {
padding-top: 90px; padding-top: 80px;
width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
.title-content {
display: flex; .gallery-top {
.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;
}
}
.swiper-content {
height: 500px; height: 500px;
margin-top: 15px; margin-top: 15px;
overflow: hidden; overflow: hidden;
img {
display: block;
width: 100%;
object-fit: cover;
}
}
}
.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;
cursor: pointer;
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 { img {
width: 100%; width: 100%;
height: 520px; height: 100%;
display: block; display: block;
} }
::v-deep { }
.swiper-pagination-bullets { .swiper-button-next {
right: 34px !important; left: unset;
} right: -5px;
.swiper-pagination-bullet { }
width: 6px; }
height: 6px; .is-h5 {
border-radius: 100%; .home-headmaster {
border: 1px solid #fff; margin: 0.2rem 0.15rem;
box-sizing: border-box; padding: 0;
background: none; .gallery-top {
opacity: 1; height: 1.36rem;
margin: 10px 0;
}
.swiper-pagination-bullet-active {
width: 6px;
height: 31px;
border-radius: 25px;
background: #fff;
}
} }
} }
} }
......
<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 { ...@@ -70,7 +70,7 @@ export default {
methods: { methods: {
goPage(path, type) { goPage(path, type) {
if (path === '') { if (path === '') {
this.$message('暂未开通,请期待。') this.$message('暂未开通,请期待。')
return return
} else { } else {
!type ? window.open(path) : this.$router.push({ path: path }) !type ? window.open(path) : this.$router.push({ path: path })
......
<template> <template>
<div class="service-content max-width-center"> <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"> <ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path, item.pathType)"> <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.icon" alt="" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active"> <img :src="item.iconActive" alt="" class="icon-active" />
<div class="text" v-html="item.text"></div> <div class="text" v-html="item.text"></div>
</li> </li>
</ul> </ul>
...@@ -16,14 +16,18 @@ export default { ...@@ -16,14 +16,18 @@ export default {
return { return {
data: [ data: [
{ {
icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01.png', 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', 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', 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', 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 { ...@@ -31,7 +35,7 @@ export default {
methods: { methods: {
goPage(path, type) { goPage(path, type) {
if (path === '') { if (path === '') {
this.$message('暂未开通,请期待。') this.$message('暂未开通,请期待。')
return return
} else { } else {
!type ? window.open(path) : this.$router.push({ path: path }) !type ? window.open(path) : this.$router.push({ path: path })
...@@ -42,47 +46,47 @@ export default { ...@@ -42,47 +46,47 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.service-content{ .service-content {
padding-top: 44px; padding-top: 44px;
.title{ .title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
line-height: 34px; line-height: 34px;
color: #424242; color: #424242;
margin-bottom: 20px; margin-bottom: 20px;
} }
.nav-content{ .nav-content {
display: flex; display: flex;
li{ li {
width: 156px; width: 156px;
height: 186px; height: 186px;
background: #FFFFFF; background: #ffffff;
padding-top: 36px; padding-top: 36px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
transition: all .5s; transition: all 0.5s;
img{ img {
width: 64px; width: 64px;
height: 64px; height: 64px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.icon-active{ .icon-active {
display: none; display: none;
} }
&:hover{ &:hover {
background: rgba(170, 25, 65, 1); background: rgba(170, 25, 65, 1);
.text{ .text {
color: #fff; color: #fff;
} }
.icon{ .icon {
display: none; display: none;
} }
.icon-active{ .icon-active {
display: block; display: block;
} }
} }
.text{ .text {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -93,7 +97,7 @@ export default { ...@@ -93,7 +97,7 @@ export default {
} }
} }
} }
.max-width-center{ .max-width-center {
width: 1212px; width: 1212px;
margin: 0 auto; margin: 0 auto;
} }
......
<template> <template>
<div class="class-content"> <AppCard :title="$t('home.openLesson.title')" class="home-class">
<div class="title-content"> <template #header-aside>
<div class="left-title"> <nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link>
<div class="line"></div> </template>
<div class="text">{{ $t('home.openLesson.title') }}</div> <app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`">
</div> <img :src="listData.first.web_img_uri" class="banner" />
<div class="right-text" @click="$router.push({ path: '/about/lesson', query: { type: 'article_publish_class' } })"> </app-link>
{{ $t('viewMore') }} <ul>
</div> <li v-for="(item, index) in listData.list" :key="index">
</div> <app-link :data="item" :to="`/about/lesson/${item.id}`">
<div class="content-box"> <div class="title">{{ item.title }}</div>
<app-link :item="{ <div class="con-txt">{{ item.abstract }}</div>
news: { <div class="info-box">
data: listData.first, <div class="time">{{ formatDate(item.start_time) }}</div>
path: '/about/lesson' <div class="look-num">
} <div class="icon"></div>
}"> <div class="num">{{ item.remarks }}</div>
<img :src="listData.first.web_img_uri" alt="" class="banner">
</app-link>
<ul>
<li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{
news: {
data: item,
path: '/about/lesson'
}
}">
<div class="title">{{ item.title }}</div>
<div class="con-txt">{{ item.abstract }}</div>
<div class="info-box">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="look-num">
<div class="icon"></div>
<div class="num">{{ item.remarks }}</div>
</div>
<div class="btn">{{ $t('home.openLesson.btn') }}</div>
</div> </div>
</app-link> <div class="btn">{{ $t('home.openLesson.btn') }}</div>
</li> </div>
<li> </app-link>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" alt="" class="logo"> </li>
<div class="wecome">HI!欢迎回来</div> <li>
<div class="course-btn" @click="showEnroll">课程预约</div> <img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" class="logo" />
<div class="login-txt" @click="showEnroll">注册/登陆</div> <div class="wecome">HI!欢迎回来</div>
</li> <div class="course-btn" @click="showEnroll">课程预约</div>
</ul> <div class="login-txt" @click="showEnroll">注册/登陆</div>
</div> </li>
</div> </ul>
</AppCard>
</template> </template>
<script> <script>
import appLink from '@/components/Link' import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default { export default {
components: { components: { AppCard, AppLink },
appLink
},
data() { data() {
return { return {
data: [] data: []
...@@ -93,152 +74,122 @@ export default { ...@@ -93,152 +74,122 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.class-content{ .home-class {
padding-top: 87px; padding-top: 80px;
width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
.title-content{ .banner {
width: 1200px;
display: block;
}
ul {
display: flex; display: flex;
.left-title{ justify-content: space-between;
display: flex; padding-top: 27px;
.line{ li {
width: 6px; width: 285px;
height: 34px; height: 287px;
background: #AA1941; background: #ffffff;
padding: 43px 22px 34px;
box-sizing: border-box;
cursor: pointer;
.logo {
width: 89px;
display: block;
margin: 0 auto;
} }
.text{ .wecome {
font-size: 34px; font-size: 18px;
font-weight: bold; line-height: 100%;
line-height: 34px; color: #666666;
color: #424242; text-align: center;
margin-left: 9px; margin: 18px 0 34px;
} }
} .course-btn {
.right-text{ font-size: 21px;
margin-left: auto; line-height: 36px;
margin-top: 18px; color: #ffffff;
font-size: 16px; width: 193px;
font-weight: 300; height: 36px;
line-height: 34px; background: #aa1941;
color: #9B9B9B; border-radius: 5px;
cursor: pointer; text-align: center;
} margin: 0 auto;
}
.content-box{
padding-top: 20px;
.banner{
width: 1200px;
display: block;
}
ul{
display: flex;
justify-content: space-between;
padding-top: 27px;
li{
width: 285px;
height: 287px;
background: #FFFFFF;
padding: 43px 22px 34px;
box-sizing: border-box;
cursor: pointer; cursor: pointer;
.logo{ }
width: 89px; .login-txt {
display: block; font-size: 14px;
margin: 0 auto; line-height: 100%;
} color: #666666;
.wecome{ margin-top: 15px;
font-size: 18px; text-align: center;
line-height: 100%; cursor: pointer;
color: #666666; }
text-align: center; .title {
margin: 18px 0 34px; font-size: 22px;
} line-height: 30px;
.course-btn{ color: #333333;
font-size: 21px; display: -webkit-box;
line-height: 36px; -webkit-box-orient: vertical;
color: #FFFFFF; -webkit-line-clamp: 2;
width: 193px; overflow: hidden;
height: 36px; }
background: #AA1941; .con-txt {
border-radius: 5px; font-size: 14px;
text-align: center; line-height: 28px;
margin: 0 auto; color: #666666;
cursor: pointer; margin-top: 10px;
} display: -webkit-box;
.login-txt{ -webkit-box-orient: vertical;
font-size: 14px; -webkit-line-clamp: 3;
line-height: 100%; overflow: hidden;
color: #666666; }
margin-top: 15px; .info-box {
text-align: center; display: flex;
cursor: pointer; align-items: center;
} justify-content: space-between;
.title{ padding-top: 21px;
font-size: 22px; .time {
line-height: 30px; font-size: 12px;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.con-txt{
font-size: 14px;
line-height: 28px; line-height: 28px;
color: #666666; color: #a8a8a8;
margin-top: 10px; white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} }
.info-box{ .look-num {
// margin-left: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; .icon {
padding-top: 21px; width: 15px;
.time{ height: 10px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/948410ca5d8663ef4e80d4913df8a9b4.png);
background-size: 100% 100%;
}
.num {
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #A8A8A8; color: #9b9b9b;
margin-left: 3px;
white-space: nowrap; white-space: nowrap;
} }
.look-num{ }
// margin-left: 16px; .btn {
display: flex; padding: 0 10px;
align-items: center; // width: 72px;
.icon{ height: 24px;
width: 15px; background: #aa1941;
height: 10px; opacity: 1;
background: url(https://zws-imgs-pub.ezijing.com/static/public/948410ca5d8663ef4e80d4913df8a9b4.png); border-radius: 6px;
background-size: 100% 100%; font-size: 13px;
} line-height: 18px;
.num{ color: #ffffff;
font-size: 12px; text-align: center;
line-height: 28px; line-height: 24px;
color: #9B9B9B; cursor: pointer;
margin-left: 3px; // margin-left: 32px;
white-space: nowrap;
}
}
.btn{
padding: 0 10px;
// width: 72px;
height: 24px;
background: #AA1941;
opacity: 1;
border-radius: 6px;
font-size: 13px;
line-height: 18px;
color: #FFFFFF;
text-align: center;
line-height: 24px;
cursor: pointer;
// margin-left: 32px;
}
} }
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="notice-content"> <AppCard :title="$t('home.bulletin.title')" class="home-news">
<div class="title-content"> <template #header-aside>
<div class="left-title"> <nuxt-link to="/about/news">{{ $t('viewMore') }}</nuxt-link>
<div class="line"></div> </template>
<div class="text">{{ $t('home.bulletin.title') }}</div>
</div>
<div class="right-text" @click="$router.push({ path: '/about/news' })">{{ $t('viewMore') }}</div>
</div>
<div class="news-content"> <div class="news-content">
<div class="left-content"> <div class="left-content">
<div class="list"> <div class="list">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-no-swiping"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-no-swiping">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in activityList" :key="index"> <div class="swiper-slide" v-for="(item, index) in activityList" :key="index">
<div class="li"> <div class="li">
<div class="txt">{{ item.title }}</div> <div class="txt">{{ item.title }}</div>
...@@ -25,7 +21,7 @@ ...@@ -25,7 +21,7 @@
<div class="right-content"> <div class="right-content">
<ul> <ul>
<template v-for="(item, index) in listData"> <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> <li>
<div class="time-block"> <div class="time-block">
<div class="m-time">{{ formatMD(item.start_time) }}</div> <div class="m-time">{{ formatMD(item.start_time) }}</div>
...@@ -38,12 +34,13 @@ ...@@ -38,12 +34,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </AppCard>
</template> </template>
<script> <script>
import appLink from '@/components/Link' import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default { export default {
components: { appLink }, components: { AppCard, AppLink },
data() { data() {
return { return {
listData: [], listData: [],
...@@ -97,37 +94,11 @@ export default { ...@@ -97,37 +94,11 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.notice-content { .home-news {
padding-top: 80px; padding-top: 80px;
width: 1200px; max-width: 1200px;
margin: 0 auto; 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 { .news-content {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
...@@ -242,4 +213,4 @@ export default { ...@@ -242,4 +213,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="class-content"> <AppCard :title="$t('home.case.title')" class="home-case">
<div class="title-content"> <template #header-aside>
<div class="left-title"> <nuxt-link to="/services/college/case">{{ $t('viewMore') }}</nuxt-link>
<div class="line"></div> </template>
<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>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <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" /> <img :src="item.web_img_uri" />
<div class="pop-txt-box">{{ item.title }}</div> <div class="pop-txt-box">{{ item.title }}</div>
</app-link> </app-link>
...@@ -23,14 +17,13 @@ ...@@ -23,14 +17,13 @@
<div class="prev-button"></div> <div class="prev-button"></div>
<div class="next-button"></div> <div class="next-button"></div>
</div> </div>
</div> </AppCard>
</template> </template>
<script> <script>
import appLink from '@/components/Link' import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default { export default {
components: { components: { AppCard, AppLink },
appLink
},
data() { data() {
return { return {
listData: [], listData: [],
...@@ -74,46 +67,18 @@ export default { ...@@ -74,46 +67,18 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.class-content { .home-case {
padding-top: 87px; padding-top: 80px;
width: 1200px; max-width: 1200px;
margin: 0 auto; 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 { .swiper-content {
padding-top: 20px;
position: relative; position: relative;
.swiper-slide { .swiper-slide {
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height:500px; height: 500px;
display: block; display: block;
} }
.pop-txt-box { .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 { ...@@ -30,6 +30,10 @@ export default {
}, },
methods: { methods: {
tabChanges(item, index) { tabChanges(item, index) {
if (item.path) {
this.$router.push({ path: item.path })
return
}
if (item.disabled) { if (item.disabled) {
return return
} }
......
...@@ -2,7 +2,7 @@ export default { ...@@ -2,7 +2,7 @@ export default {
menu: { menu: {
about: '关于紫荆', about: '关于紫荆',
services: '教育服务', services: '教育服务',
degree: '国际教育', degree: '在线国际学位',
industrialCollege: '数字经济产业学院', industrialCollege: '数字经济产业学院',
onlineEdu: '在线教育解决方案', onlineEdu: '在线教育解决方案',
alumni: '校友会', alumni: '校友会',
...@@ -119,13 +119,13 @@ export default { ...@@ -119,13 +119,13 @@ export default {
med: '教育学硕士<br />MED', med: '教育学硕士<br />MED',
map: '应用心理学硕士<br />MAP', map: '应用心理学硕士<br />MAP',
// plan: '未来金融<br />领袖计划', // plan: '未来金融<br />领袖计划',
mba: '数字领导力方向MBA', mba: '数字领导力方向<br/>MBA',
finance: '金融方向MBA', finance: '金融方向<br/>MBA',
international: '酒店和旅游方向MBA', international: '酒店和旅游方向<br/>MBA',
dba: '心理学博士<br/>(即将推出)', dba: '心理学博士<br/>(即将推出)',
edd: '工商管理博士', edd: '工商管理博士',
studyAbroad: '海外留学2+1<br/>(即将推出)', studyAbroad: '海外留学2+1<br/>(即将推出)',
caas: '餐饮管理方向MBA', caas: '餐饮管理方向<br/>MBA',
studyAbroadMaster: '国际硕士<br/> 1+1' studyAbroadMaster: '国际硕士<br/> 1+1'
}, },
onlineEdu: { onlineEdu: {
......
<template> <template>
<div> <div class="is-pc">
<Head class="heads"/> <Head class="heads" />
<Nuxt /> <Nuxt />
<Foot /> <Foot />
<RightAside /> <RightAside />
...@@ -8,14 +8,7 @@ ...@@ -8,14 +8,7 @@
</template> </template>
<style> <style>
html { html {
font-family: font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif; sans-serif;
font-size: 16px; font-size: 16px;
word-spacing: 1px; word-spacing: 1px;
......
export default function(context) { 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)) const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
isMobile && context.redirect('https://h5.ezijing.com/') 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> <template>
<div class="news-content"> <app-frame :tabs="tabs">
<tab /> <div id="allmap"></div>
<contact-content /> <template #article>
</div> <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> </template>
<script> <script>
import tab from '../../components/about/tabNav' import AppFrame from '@/components/AppFrame'
import contactContent from '../../components/about/contact' import navList from '@/assets/aboutNavList.js'
export default { export default {
components: { components: { AppFrame },
tab, data() {
contactContent 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news-content{ #allmap {
width: 1200px; width: 100%;
margin: 0 auto; height: 320px;
padding-top: 63px; }
display: flex; .article-contact {
justify-content: space-between; .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> </style>
<template> <template>
<div class="culture-content"> <app-frame :tabs="tabs">
<tab /> <div class="video-box">
<culture-content /> <video
</div> 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> </template>
<script> <script>
import tab from '../../components/about/tabNav' import AppFrame from '@/components/AppFrame'
import cultureContent from '../../components/about/culture' import navList from '@/assets/aboutNavList.js'
export default { export default {
components: { components: { AppFrame },
tab, data() {
cultureContent return {
tabs: navList(this)
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.culture-content{ .video-box {
width: 1200px; background: #000;
margin: 0 auto; video {
padding-top: 63px; width: 100%;
display: flex; height: 100%;
justify-content: space-between; }
}
.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> </style>
<template> <template>
<div class="intr-content"> <app-frame :tabs="tabs">
<tab /> <img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" class="banner" />
<intr-content /> <template #article>
</div> <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> </template>
<script> <script>
import tab from '../../components/about/tabNav' import AppFrame from '@/components/AppFrame'
import intrContent from '../../components/about/introduce' import navList from '@/assets/aboutNavList.js'
export default { export default {
components: { components: { AppFrame },
tab, data() {
intrContent return {
tabs: navList(this),
indexActive: 0
}
},
methods: {
changeIndex(n) {
this.indexActive = n
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.intr-content{ .intr-content-box {
width: 1200px; .text-content {
margin: 0 auto; .title {
padding-top: 63px; font-size: 22px;
display: flex; font-weight: 500;
justify-content: space-between; 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> </style>
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论