Skip to content

P
project-online-pc
提交 6fb0d7cd authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

Merge branch 'kelley-h5' into shms

上级 19c5297d a5032218
隐藏空白字符变更
内嵌 并排
正在显示 包含 4122 行增加 和 1548 行删除
.DS_Store
浏览文件 @ 6fb0d7cd
No preview for this file type
.gitignore
浏览文件 @ 6fb0d7cd
......@@ -88,3 +88,4 @@ sw.*
# Vim swap files
*.swp
.DS_Store
api/index.js
浏览文件 @ 6fb0d7cd
......@@ -30,3 +30,24 @@ export function checkCode(params) {
export function postNes(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data)
}
/**
* 提交留咨信息
*/
export function submit(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', 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 })
}
app.html 0 → 100644
浏览文件 @ 6fb0d7cd
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
<script>
;(function(win, doc) {
function resizeRoot() {
var wWidth =
screen.width > 0
? win.innerWidth >= screen.width || win.innerWidth == 0
? screen.width
: win.innerWidth
: win.innerWidth,
wFsize
wFsize = ((wWidth > 750 ? 750 : wWidth) / 375) * 100
doc.documentElement.style.fontSize = wFsize + 'px'
}
resizeRoot()
win.addEventListener('resize', resizeRoot, false)
})(window, document)
</script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
components/ArticleList.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<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-pagination {
padding: 20px;
text-align: center;
}
</style>
\ No newline at end of file
components/ArticleListItem.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<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" />
<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;
margin: 0 50px;
cursor: pointer;
}
.article-item-inner {
display: flex;
}
.article-item-pic {
width: 320px;
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: 2;
-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: 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>
\ No newline at end of file
components/Card.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<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>
</div>
</template>
<script>
export default {
props: { title: String },
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss">
.is-pc{
.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: 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;
}
.card-bd {
}
}
.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;
}
.card-bd {
}
}
</style>
components/Link.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="link-content">
<template v-if="item.news">
<a
:target="item.news.data.uri !== '' ? '_blank' : '_self'"
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`">
<slot />
</a>
</template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
<div class="app-link">
<!-- 外部链接跳转 -->
<a :href="href" :target="target" v-if="href"><slot /></a>
<!-- 站内跳转 -->
<nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
<!-- 事件 -->
<div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
<template v-else><slot /></template>
</div>
</template>
<script>
export default {
props: { item: { type: Object } }
name: 'Link',
props: {
data: { type: Object, default: () => ({}) },
to: [String, Object, Function],
target: { type: String, default: '_blnak' }
},
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>
<style lang="scss" scoped>
.link-content{
height: 100%;
}
</style>
components/appFrame.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="frame-content-box">
<ul class="tab-content">
<li
v-for="(item, index) in data.slider"
:class="item.pathActive.findIndex(path => {
return $route.path.includes(path)
}) !== -1 && 'active'"
:key="index"
@click="goPage(item.path)"
>
{{ item.name }}
<div class="main-page">
<ul class="main-page-nav">
<li v-for="(item, index) in data.slider" :key="index" :class="{ 'is-active': isAcitve(item) }">
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</li>
</ul>
<div class="right-content">
<img v-if="data.banner" :src="data.banner" alt="" class="banner">
<div class="content-mian">
<div class="main-page-content">
<img v-if="data.banner" :src="data.banner" class="main-page-banner" />
<div class="main-content-html">
<slot></slot>
</div>
</div>
......@@ -24,75 +17,85 @@
export default {
name: 'appFrame',
props: {
data: {
type: Object
}
},
data() {
return {
}
},
mounted() {
data: { type: Object }
},
methods: {
goPage(path) {
this.$router.push({
path: path
})
isAcitve(item) {
return this.$route.fullPath.includes(item.path)
}
}
}
</script>
<style lang="scss" scoped>
.frame-content-box{
width: 1200px;
margin: 0 auto;
padding: 56px 0 100px;
display: flex;
justify-content: space-between;
.right-content{
width: 1000px;
.banner{
width: 100%;
display: block;
height: 320px;
}
.content-mian{
background: #fff;
}
<style lang="scss">
.is-pc {
.main-page {
width: 1200px;
margin: 0 auto;
padding: 56px 0 100px;
display: flex;
}
.tab-content{
.main-page-nav {
width: 160px;
height: fit-content;
background: #fff;
padding-top: 35px;
padding-bottom: 43px;
li{
padding: 35px 0 44px;
margin-right: 40px;
align-self: flex-start;
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{
&.is-active {
color: #aa1941;
&::after {
content: '';
width: 8px;
height: 40px;
background: rgba(170, 25, 65, 1);
background: #aa1941;
position: absolute;
top: 0;
left: 0;
}
}
}
li + li {
margin-top: 60px;
}
}
.main-page-content {
flex: 1;
background-color: #fff;
overflow: hidden;
}
.main-page-banner {
display: block;
height: 320px;
object-fit: cover;
}
}
.is-h5 {
.main-page-nav {
display: flex;
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
}
}
.main-page-banner {
display: block;
height: 1.2rem;
object-fit: cover;
}
.main-page-content {
background-color: #fff;
}
}
</style>
\ No newline at end of file
components/base/h5/ApplyForm.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div class="app-apply-form">
<h2 class="title">报名咨询</h2>
<div class="form">
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入您的姓名" v-model="ruleForm.name" />
</div>
<div class="form-item">
<input type="number" class="form-input" placeholder="请输入您的电话" maxlength="11" v-model="ruleForm.phone" />
</div>
<div class="form-item">
<select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id" disabled>
<option value="" disabled selected>请选择项目</option>
<option v-for="(item, index) in projectList" :value="item.value" :key="index">{{ item.label }}</option>
</select>
</div>
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="phoneCode" />
<input
type="button"
class="form-button"
:disabled="codeButtonDisabled"
:value="buttonText"
@click="onSendCode"
/>
</div>
<div class="form-item">
<input type="button" value="立即预约" class="form-button" @click="onSbumit" />
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api'
export default {
data() {
return {
ruleForm: { name: '', phone: '', project_id: '1001', channel: 19960 },
projectList: [
{ label: '金融工商管理硕士', value: '1000' },
{ label: '酒店及旅游业工商管理硕士', value: '1008' },
{ label: '金融硕士', value: '1001' },
{ label: '应用心理学硕士', value: '1006' },
{ label: '教育学硕士', value: '1005' },
{ label: '中国未来金融领袖计划', value: '1007' }
],
phoneCode: '',
codeButtonDisabled: false,
timer: null,
disabledTime: 60
}
},
computed: {
buttonText() {
return this.codeButtonDisabled ? `${this.disabledTime}秒后重发` : '获取验证码'
}
},
methods: {
onSbumit() {
if (!this.ruleForm.name) {
this.$notify('请输入您的姓名')
return
}
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
if (!this.phoneCode) {
this.$notify('请输入短信验证码')
return
}
this.checkPhoneCode().then(this.handleSubmit)
},
handleSubmit() {
api.submit(this.ruleForm).then(response => {
// this.$notify({ type: 'success', message: response.message })
this.$dialog.alert({ message: response.message }).then(() => {
this.$emit('success')
})
})
},
// 校验短信验证码
checkPhoneCode() {
return api.checkCode({ account: this.ruleForm.phone, code: this.phoneCode })
},
onSendCode() {
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
this.sendCode()
},
// 发送验证码
sendCode() {
this.setTimer()
api
.sendCode({ account: this.ruleForm.phone })
.then(() => {
this.$notify({ type: 'success', message: '验证码发送成功，注意查收' })
})
.catch(() => {
this.clearTimer()
})
},
setTimer() {
this.codeButtonDisabled = true
this.disabledTime = 60
this.timer = setInterval(() => {
this.disabledTime--
if (this.disabledTime <= 0) {
this.clearTimer()
}
}, 1000)
},
clearTimer() {
this.codeButtonDisabled = false
this.timer && clearInterval(this.timer)
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.app-apply-form {
min-width: 290px;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-input {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-select {
position: relative;
padding: 0 10px;
width: 100%;
height: 38px;
background: #fff url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 30px 30px;
box-sizing: border-box;
border: none;
}
.form-button {
padding: 0 10px;
width: 100%;
height: 38px;
font-size: 16px;
color: #aa1941;
background-color: #ffd61b;
box-sizing: border-box;
border: none;
cursor: pointer;
}
.form-input + .form-button {
margin-left: 10px;
}
</style>
components/base/h5/Card.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<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 }
}
</script>
<style lang="scss">
.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;
}
.card-bd {
}
</style>
components/base/h5/Menu.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<nav class="app-menu">
<ul>
<tree-item :item="item" v-for="(item, index) in list" :key="index" class="first"></tree-item>
</ul>
</nav>
</template>
<script>
import TreeItem from './TreeItem'
export default {
components: { TreeItem },
data() {
return {
list: [
{
name: '项目介绍',
children: [
{ name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授权', path: '/project-intro/certificate' }
]
},
{
name: '课程与师资',
children: [
{ name: '课程设置', path: '/about/course' },
{ name: '师资力量', path: '/about/teacher' }
]
},
{
name: '最新动态',
children: [
{ name: '热点新闻', path: '/news/hot' },
{ name: '教授采访', path: '/news/interview' }
]
},
{
name: '报名申请',
children: [
{ name: '有关申请', path: '/apply/relevant' },
{ name: '费用资助', path: '/apply/support' },
{ name: '常见问题', path: '/apply/problem' }
]
},
{
name: '校友风采',
children: [
{ name: '杰出校友', path: '/alumni/outstanding' },
{ name: '校友分享', path: '/alumni/share' }
]
},
{
name: '我要报名',
onClick: () => {
this.$emit('showApplyForm')
}
}
]
}
},
methods: {
showTips() {
this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
}
}
}
</script>
<style lang="scss">
.app-menu {
// position: fixed;
// left: 0;
// right: 0;
// top: 0.62rem;
// bottom: 0;
padding: 0 0.15rem;
min-height: 100vh;
background-color: #fff;
.first > .cell .cell-title {
font-size: 0.14rem;
font-weight: bold;
}
.first > .tree-item-group {
padding: 0;
}
}
</style>
components/base/h5/RightAside.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div>
<div class="rigth-aside">
<ul class="right-aside-btns">
<li @click="showApplyForm">
<img src="https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png" />
<p>我要报名</p>
</li>
<li @click="showFollow">
<img src="https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png" />
<p>关注我们</p>
</li>
</ul>
</div>
<!-- 我要报名 -->
<van-overlay :show="applyFormVisible" @click="hideApplyForm">
<div class="dialog-box" @click.stop>
<apply-form @success="hideApplyForm"></apply-form>
</div>
</van-overlay>
<!-- 关注我们 -->
<van-overlay :show="followVisible" @click="followVisible = false">
<div class="dialog-box" @click.stop>
<h2 class="title">关注我们</h2>
<div class="follow">
<img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
<p>扫码关注 了解更多</p>
</div>
</div>
</van-overlay>
</div>
</template>
<script>
import ApplyForm from './ApplyForm'
export default {
components: { ApplyForm },
data() {
return {
applyFormVisible: false,
followVisible: false
}
},
methods: {
// 我要报名
showApplyForm() {
this.applyFormVisible = true
},
hideApplyForm() {
this.applyFormVisible = false
},
// 关注我们
showFollow() {
this.followVisible = true
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .van-overlay {
z-index: 100;
}
.rigth-aside {
position: fixed;
top: 50%;
right: 16px;
z-index: 99;
transform: translateY(-50%);
.right-aside-btns {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 0.5rem;
height: 0.5rem;
font-size: 0.1rem;
color: #999;
background-color: #fff;
cursor: pointer;
img {
width: 0.23rem;
height: 0.23rem;
}
}
li + li {
border-top: 1px solid #999;
}
}
}
.dialog-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
width: 345px;
height: 426px;
background: url('https://webapp-pub.ezijing.com/www/h5/images/dialog_bg.png') no-repeat;
background-size: cover;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.follow {
img {
width: 182px;
height: 182px;
}
p {
margin-top: 20px;
font-size: 12px;
color: #fff;
text-align: center;
}
}
</style>
components/base/h5/Search.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div class="app-search">
<div class="hot-search">
<h2 class="hot-search__title">热门搜索</h2>
<ul class="hot-search__list">
<li v-for="(item, index) in hotList" :key="index">
<app-link :data="item">{{ item.name }}</app-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hotList: [
{ name: '1+x', href: 'https://x.ezijing.com' },
{ name: '金融', href: 'https://kelley.ezijing.com' },
{ name: 'MBA', href: 'https://sofia.ezijing.com' },
{ name: '心理学', href: 'https://ciis.ezijing.com' },
{ name: '新闻', path: '/about/news' }
]
}
}
}
</script>
<style lang="scss">
.app-search {
padding: 0 0.15rem;
min-height: 100vh;
background-color: #fff;
}
.hot-search {
}
.hot-search__title {
padding: 0.2rem 0;
font-size: 0.12rem;
font-weight: 400;
color: #333;
border-bottom: 1px solid #999;
}
.hot-search__list {
li {
font-size: 0.14rem;
color: #333;
font-weight: 500;
line-height: 0.52rem;
border-bottom: 1px solid #999;
}
a {
display: block;
}
}
</style>
components/base/h5/TabNav.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<nav>
<ul class="app-tab-nav">
<li v-for="(item, index) in list" :key="index" :class="{ 'is-active': item.value === active }">
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: { list: { type: Array, default: () => [] }, active: { type: String } },
data() {
return {}
}
}
</script>
<style lang="scss">
.app-tab-nav {
display: flex;
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
}
}
</style>
components/base/h5/TreeItem.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<li class="tree-item">
<div class="cell" :class="{ bold: isFolder }" @click="toggle">
<div class="cell-title">
<app-link :data="item">{{ item.name }}</app-link>
</div>
<div class="cell-icon" v-if="isFolder">
<van-icon name="arrow-up" v-if="isOpen" />
<van-icon name="arrow-down" v-else />
</div>
</div>
<ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
<tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
</ul>
</li>
</template>
<script>
import TreeItem from './TreeItem'
import AppLink from '@/components/Link'
export default {
name: 'TreeItem',
props: { item: Object },
components: { TreeItem, AppLink },
data: function () {
return {
isOpen: false
}
},
computed: {
isFolder: function () {
return this.item.children && this.item.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen
}
}
}
}
</script>
<style lang="scss">
.tree-item {
.cell {
display: flex;
align-items: center;
height: 0.52rem;
border-bottom: 1px solid #999;
}
.cell-title {
flex: 1;
font-size: 0.13rem;
font-weight: 400;
color: #333;
a {
display: block;
line-height: 0.52rem;
}
}
.cell-icon {
font-size: 0.14rem;
}
.tree-item-group {
padding-left: 0.1rem;
}
}
</style>
components/home/banner.vue
浏览文件 @ 6fb0d7cd
......@@ -14,8 +14,10 @@
</div>
</div>
</div>
<div class="prev-button"></div>
<div class="next-button"></div>
<template v-if="!isMobile">
<div class="prev-button"></div>
<div class="next-button"></div>
</template>
</div>
</template>
<script>
......@@ -45,6 +47,9 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
mounted() {},
......
components/home/commonProblem.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="common-content-box">
<m-title :data="titleParams" class="m-title"/>
<div class="content-mian">
<app-link :item="{ path: '/news/hot' }">
<div class="list-box">
<ul>
<li>
<div class="icon"></div>
<div class="text">瑞士酒店管理大学给本项目毕业生颁发的学位证书与在瑞士颁发的证书有何不同？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目是上课形式是怎么样？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目学制多久？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">能否顺利毕业拿到证书呢？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目是在职还是全职？</div>
</li>
</ul>
<ul>
<li>
<div class="icon"></div>
<div class="text">如何申请瑞士酒店管理大学酒店及旅游方向MBA？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">大概流程是什么？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">需要提交哪些材料？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">瑞士酒店管理大学酒店及旅游方向MBA的学费是多少？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">学费可以分期吗？</div>
</li>
</ul>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="common-content-box">
<card :title="$t('home.problem.title')">
<template #header-aside
><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="content-mian">
<app-link to="/apply/problem">
<div class="list-box">
<ul>
<li v-for="(item, index) in problem.itemLeft" :key="index">
<div class="icon"></div>
<div class="text">{{ item }}</div>
</li>
</ul>
<ul>
<li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div>
<div class="text">{{ item }}</div>
</li>
</ul>
</div>
</app-link>
<div class="msg-box">
<el-input type="textarea" placeholder="请输入内容" v-model="textarea"> </el-input>
<div class="btn">在线留言</div>
</div>
</div>
</app-link>
<div class="msg-box">
<el-input
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</div>
</div>
</card>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'commonProblem',
components: {
mTitle,
Card,
AppLink
},
data () {
data() {
return {
titleParams: {
name: '常见问题',
more: {
path: '/apply/problem'
}
problem: {
itemLeft: [
'Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？',
'本项目是上课形式是怎么样？',
'本项目学制多久？',
'能否顺利毕业拿到证书呢？',
'本项目是在职还是全职？'
],
itemRight: [
'如何申请Kelley商学院金融学硕士？',
'大概流程是什么？',
'需要提交哪些材料？',
'美国印第安纳大学Kelley商学院金融学硕士的学费是多少？',
'学费可以分期吗？'
]
},
textarea: ''
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.common-content-box{
width: 1200px;
margin: 0 auto;
padding-top: 77px;
.content-mian{
padding-top: 50px;
.msg-box{
padding-top: 40px;
box-sizing: border-box;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
::v-deep{
.el-textarea__inner{
background: none;
resize:none;
.is-pc {
.common-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 77px;
.content-mian {
padding-top: 50px;
.msg-box {
padding-top: 40px;
box-sizing: border-box;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
::v-deep {
.el-textarea__inner {
background: none;
resize: none;
}
}
.btn {
width: 136px;
height: 36px;
background: #aa1941;
opacity: 1;
border-radius: 4px;
font-size: 18px;
line-height: 36px;
text-align: center;
color: #ffffff;
margin-left: 57px;
cursor: pointer;
}
}
.btn{
width: 136px;
height: 36px;
background: #AA1941;
opacity: 1;
border-radius: 4px;
font-size: 18px;
line-height: 36px;
text-align: center;
color: #FFFFFF;
margin-left: 57px;
cursor: pointer;
.list-box {
display: flex;
justify-content: space-between;
ul {
&:nth-child(2) {
margin-left: 8px;
}
li {
display: flex;
align-items: center;
width: 600px;
height: 25px;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(even) {
.text {
background: none;
}
}
.icon {
width: 7px;
height: 7px;
background: #aa1941;
border-radius: 50%;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #666666;
padding-left: 4px;
width: 570px;
background: rgba(153, 153, 153, 0.2);
margin-left: 15px;
}
}
}
}
}
.list-box{
display: flex;
justify-content: space-between;
ul{
&:nth-child(2){
margin-left: 8px;
}
}
.is-h5 {
.common-content-box {
.content-mian {
.msg-box {
padding-top: 0.2rem;
box-sizing: border-box;
::v-deep {
.el-textarea__inner {
background: none;
resize: none;
}
}
li{
display: flex;
align-items: center;
width: 600px;
height: 25px;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(even){
.text{
background: none;
input {
height: 0.29rem;
border: 0.01rem solid rgba(153, 153, 153, 0.2);
margin-top: 0.05rem;
outline: none;
width: 100%;
background: none;
padding-left: 0.2rem;
box-sizing: border-box;
font-size: 0.1rem;
color: #999999;
}
.btn {
height: 0.24rem;
background: #aa1941;
font-size: 0.12rem;
text-align: center;
color: #ffffff;
margin-top: 0.1rem;
line-height: 0.24rem;
}
}
.list-box {
ul {
li {
display: flex;
align-items: center;
padding: 0.04rem 0 0.04rem 0;
&:nth-child(even) {
.text {
background: none;
}
}
.icon {
width: 0.04rem;
height: 0.04rem;
background: #aa1941;
border-radius: 50%;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.12rem;
color: #666666;
padding-left: 0.02rem;
width: 100%;
background: rgba(153, 153, 153, 0.2);
margin-left: 0.07rem;
}
}
.icon{
width: 7px;
height: 7px;
background: #AA1941;
border-radius: 50%;
}
.text{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #666666;
padding-left: 4px;
width: 570px;
background: rgba(153, 153, 153, .2);
margin-left: 15px;
}
}
}
......
components/home/moduleTitle.vue
浏览文件 @ 6fb0d7cd
......@@ -5,7 +5,7 @@
<div class="text">{{ data.name }}</div>
</div>
<div v-if="data.more" class="right-text" @click="$router.push({ path: data.more.path, query: data.more.query ? data.more.query : {} })">
查看更多+
{{ $t('viewMore') }}
</div>
</div>
</template>
......
components/home/news.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="news-content-box">
<m-title :data="titleParams" />
<div class="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<img :src="listData.first.web_img_uri" alt="" />
<div class="mantle-box">
<div class="tit">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="news-content-box">
<card :title="$t('home.news.title')">
<template #header-aside
><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left">
<app-link :data="listData.first" :to="`/news/hot/${listData.first.id}`">
<img :src="listData.first.web_img_uri" alt="" />
<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>
</app-link>
</div>
<ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<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>
<ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index">
<app-link :data="item" :to="`/news/hot/${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>
</card>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'news',
components: {
mTitle,
Card,
AppLink
},
async fetch() {
......@@ -53,6 +59,9 @@ export default {
listData() {
const [first = {}, ...list] = this.data
return { first, list: list || [] }
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
......@@ -65,86 +74,154 @@ export default {
}
</script>
<style lang="scss" scoped>
.news-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 65px;
.content-box {
display: flex;
justify-content: space-between;
padding-top: 26px;
.news-left {
width: 780px;
height: 500px;
.is-pc {
.news-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 65px;
.content-box {
display: flex;
justify-content: space-between;
padding-top: 26px;
.news-left {
width: 780px;
height: 500px;
position: relative;
img {
width: 100%;
height: 500px;
display: block;
}
.mantle-box {
width: 100%;
position: absolute;
bottom: 0;
left: 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-content-box {
.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(0, 0, 0, 0.2);
padding: 30px 37px;
.tit {
font-size: 24px;
background: rgba(8, 8, 8, 0.45);
padding-bottom: 0.14rem;
.con-txt {
font-size: 0.12rem;
font-weight: bold;
line-height: 100%;
line-height: 0.17rem;
color: #ffffff;
width: 696px;
padding: 0.14rem 0.32rem 0 0.19rem;
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;
margin-top: 0.1rem;
padding: 0.13rem 0.14rem 0.11rem 0.12rem;
background: #fff;
.time {
font-size: 16px;
font-weight: normal;
font-size: 0.1rem;
line-height: 100%;
color: #8e1e22;
color: #ab0a3d;
}
.news-r-title {
font-size: 22px;
font-weight: bold;
line-height: 30px;
font-size: 0.14rem;
color: #333333;
margin-top: 15px;
margin-top: 0.1rem;
line-height: 0.21rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.del {
width: 350px;
font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 100%;
color: #999999;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
......
components/home/openClass.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="alumni-content max-width">
<m-title :data="titleParams" class="m-title" />
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<template v-if="!isMobile">
<div class="alumni-content max-width">
<card :title="$t('home.course.title')">
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
</div>
</div>
</div>
</div>
</div>
</card>
</div>
</div>
</template>
<template v-else>
<card :title="$t('home.course.title')">
<van-swipe class="my-swipe" :loop="true" :autoplay="5000" :show-indicators="false">
<template v-for="(item, index) in listData">
<van-swipe-item :key="index">
<div class="case">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" class="case-pic" />
<p class="case-title">{{ item.title }}</p>
</app-link>
</div>
</van-swipe-item>
</template>
</van-swipe>
</card>
</template>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'openClass',
components: {
mTitle,
Card,
AppLink
},
data() {
const _this = this
return {
titleParams: {
name: '公开课'
},
isScale: false,
listData: [],
// 轮播图配置信息, 更多请参考 swiper.js 中文网，上面很详细。
swiperOption: {
observer: true,
observeParents: true,
......@@ -58,14 +75,13 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
created() {},
mounted() {
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
}
},
mounted() {},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
......@@ -77,74 +93,96 @@ export default {
}
</script>
<style lang="scss" scoped>
.max-width {
width: 1200px;
margin: 0 auto;
}
.alumni-content {
padding-top: 89px;
.title-content {
display: flex;
.left-title {
.is-pc {
.max-width {
width: 1200px;
margin: 0 auto;
}
.alumni-content {
padding-top: 89px;
.title-content {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
.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;
}
}
}
}
.small-tit {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-top: 12px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 360px;
height: 230px;
margin-top: 10px;
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
color: #fefefe;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.small-tit {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-top: 12px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 360px;
height: 230px;
margin-top: 10px;
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
color: #fefefe;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
.swiper-slide-active {
width: 438px;
height: 246px;
margin-top: 0;
}
}
.swiper-slide-active {
width: 438px;
height: 246px;
margin-top: 0;
}
}
}
.scale {
transform: scale(0.85);
.is-h5 {
.case {
position: relative;
}
.case-pic {
display: block;
width: 100%;
height: 1.17rem;
object-fit: cover;
}
.case-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.24rem;
padding: 0 0.1rem;
font-size: 0.1rem;
line-height: 0.24rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
}
</style>
components/home/presence.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="presence-content-box">
<m-title :data="titleParams" class="m-title" />
<div class="content-mian">
<div class="banner-box" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="presence-content-box">
<card :title="$t('home.presence.title')" class="card-style">
<template #header-aside>
<nuxt-link to="/alumni/sharing">{{ $t('viewMore') }}</nuxt-link>
</template>
</card>
<div class="content-mian">
<van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<template v-for="(item, index) in listData">
<van-swipe-item :key="index">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" />
</app-link>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</div>
<div class="enroll-box">
<div class="left-content">
<div class="tit">提交申请<br />免费领取试听课程</div>
<div class="tips">温馨提示：仅本科及以上学历可报名</div>
</div>
<div class="right-content">
<div class="li">
<el-select v-model="form.years" placeholder="请选择工作年限">
<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</van-swipe-item>
</template>
</van-swipe>
<div class="form-box">
<div class="title-box">
<div class="bt" v-html="$t('home.presence.tips1')"></div>
<div class="tips">{{ $t('home.presence.tips2') }}</div>
</div>
<div class="li">
<el-select v-model="form.degree" placeholder="请选择学历/学位">
<el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="li">
<el-input v-model="form.name" placeholder="输入您的姓名"></el-input>
</div>
<div class="li">
<el-input v-model="form.phone" placeholder="输入您的手机号"></el-input>
<div class="form">
<div class="li">
<el-select v-model="form.years" :placeholder="$t('home.presence.yearsholder')">
<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="li">
<el-select v-model="form.degree" :placeholder="$t('home.presence.degreeholder')">
<el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="li">
<el-input v-model="form.name" :placeholder="$t('home.presence.nameholder')"></el-input>
</div>
<div class="li">
<el-input v-model="form.phone" :placeholder="$t('home.presence.phoneholder')"></el-input>
</div>
<div class="btn" @click="submit">{{ $t('home.presence.formBtn') }}</div>
</div>
<div class="btn" @click="submit">立即提交</div>
</div>
</div>
</div>
......@@ -46,13 +49,13 @@
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
import { postNes } from '@/api'
export default {
name: 'presence',
components: {
mTitle,
Card,
AppLink
},
data() {
......@@ -98,30 +101,16 @@ export default {
degree: '',
name: '',
phone: '',
// channel: 19960,
project_id: process.env.newProjectId
},
value: '',
titleParams: {
name: '师生风采',
name: this.$t('home.presence.title'),
more: {
path: '/alumni/sharing'
}
},
listData: [],
swiperOption: {
speed: 400,
// autoplay: true,
delay: 3000,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'vertical',
height: 500
// autoHeight: true
}
listData: []
}
},
async fetch() {
......@@ -131,6 +120,9 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
mounted() {},
......@@ -173,20 +165,104 @@ export default {
</script>
<style lang="scss" scoped>
.presence-content-box {
padding-top: 80px;
.m-title {
.is-pc {
.card-style {
width: 1200px;
margin: 0 auto;
}
.content-mian {
padding-top: 24px;
.banner-box {
height: 500px;
overflow: hidden;
.presence-content-box {
padding-top: 80px;
.m-title {
width: 1200px;
margin: 0 auto;
}
.content-mian {
padding-top: 24px;
.my-swipe {
height: 500px;
img {
width: 100%;
height: 100%;
display: block;
}
}
.form-box {
width: 1200px;
height: 540px;
margin: 80px auto 0;
background: url(https://webapp-pub.ezijing.com/project/kelley/home-ssfc-bg.png);
background-size: 100% 100%;
display: flex;
justify-content: space-between;
.title-box {
width: 592px;
height: 223px;
background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 127px;
.bt {
font-size: 48px;
font-weight: bold;
line-height: 58px;
color: #ffffff;
text-align: center;
margin-top: 30px;
}
.tips {
font-size: 14px;
line-height: 100%;
color: #ffffff;
margin-top: 30px;
text-align: center;
}
}
.form {
width: 401px;
height: 382px;
background: #ffffff;
margin-top: 54px;
box-sizing: border-box;
padding: 63px 56px 56px 64px;
margin-right: 116px;
::v-deep {
.el-select {
width: 100%;
}
}
.li {
margin-bottom: 20px;
}
.btn {
font-size: 18px;
line-height: 32px;
color: #ffffff;
width: 281px;
background: #aa1941;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
}
}
}
}
}
.is-h5 {
.card-width {
width: 100%;
margin: 0;
::v-deep {
.card-hd {
margin: 0.2rem 0.15rem;
}
}
}
.presence-content-box {
.my-swipe {
height: 1.58rem;
img {
width: 100%;
height: 520px;
height: 100%;
display: block;
}
}
......@@ -202,47 +278,45 @@ export default {
width: 592px;
height: 223px;
background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 127px;
.tit {
font-size: 48px;
font-weight: bold;
line-height: 58px;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.07);
.bt {
text-align: center;
font-size: 0.26rem;
// font-weight: bold;
line-height: 0.31rem;
color: #ffffff;
text-align: center;
margin-top: 30px;
padding-top: 0.16rem;
}
.tips {
font-size: 14px;
line-height: 100%;
font-size: 0.1rem;
line-height: 0.12rem;
color: #ffffff;
margin-top: 30px;
text-align: center;
padding-top: 0.1rem;
}
}
.right-content {
width: 401px;
height: 382px;
.form {
width: 2.7rem;
background: #ffffff;
margin-top: 54px;
margin: 0.2rem auto;
padding: 0.25rem 0.2rem;
box-sizing: border-box;
padding: 63px 56px 56px 64px;
margin-right: 116px;
.li {
margin-bottom: 0.2rem;
}
::v-deep {
.el-select {
width: 100%;
height: 100%;
}
}
.li {
margin-bottom: 20px;
}
.btn {
font-size: 18px;
line-height: 32px;
font-size: 0.12rem;
line-height: 0.16rem;
color: #ffffff;
width: 281px;
background: #aa1941;
border-radius: 4px;
border-radius: 0.02rem;
text-align: center;
cursor: pointer;
}
......
components/home/projectFeatures.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="service-content max-width-center">
<m-title :data="titleParams"/>
<ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="icon">
<img :src="item.iconActive" alt="" class="icon-active">
<div class="text" v-html="item.text"></div>
</li>
</ul>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<card :title="$t('home.project.title')">
<ul class="nav-content">
<li v-for="(item, index) in data" :key="index">
<img :src="item.icon" class="icon" />
<img v-if="!isMobile" :src="item.iconActive" class="icon-active" />
<div class="text" v-html="item.text"></div>
</li>
</ul>
</card>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
mTitle,
AppLink
AppLink,
Card
},
data() {
return {
titleParams: {
name: '项目特色'
name: this.$t('home.project.title')
},
data: [
{
......@@ -61,61 +64,100 @@ export default {
}
window.open(path)
}
},
mounted() {
console.log(this.isMobile)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.service-content{
padding-top: 68px;
.nav-content{
display: flex;
justify-content: space-between;
padding-top: 15px;
li{
width: 224px;
height: 230px;
padding-top: 53px;
box-sizing: border-box;
background: #F9F8F8;
// background: #fff;
// box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
cursor: pointer;
transition: all .3s;
img{
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
}
.icon-active{
display: none;
}
&:hover{
background: #AA1941;
box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
.text{
color: #fff;
.is-pc {
.service-content {
padding-top: 68px;
.nav-content {
display: flex;
justify-content: space-between;
padding-top: 15px;
li {
width: 224px;
height: 230px;
padding-top: 53px;
box-sizing: border-box;
background: #f9f8f8;
// background: #fff;
// box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
cursor: pointer;
transition: all 0.3s;
img {
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
}
.icon{
.icon-active {
display: none;
}
.icon-active{
display: block;
&:hover {
background: #aa1941;
box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
.text {
color: #fff;
}
.icon {
display: none;
}
.icon-active {
display: block;
}
}
.text {
font-size: 14px;
line-height: 18px;
color: #666666;
margin-top: 20px;
text-align: center;
}
}
.text{
font-size: 14px;
line-height: 18px;
}
}
.max-width-center {
width: 1212px;
margin: 0 auto;
}
}
.is-h5 {
.service-content {
ul {
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
li {
min-width: 0.78rem;
background: #ffffff;
margin-right: 0.1rem;
padding-top: 0.11rem;
img {
width: 0.4rem;
height: 0.4rem;
display: block;
margin: 0 auto;
}
.text {
font-size: 0.1rem;
line-height: 0.16rem;
color: #666666;
margin-top: 20px;
padding-top: 0.05rem;
text-align: center;
padding-bottom: 0.1rem;
}
}
}
}
.max-width-center{
width: 1212px;
margin: 0 auto;
}
</style>
components/layout/h5/Footer.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<footer class="main-footer">
<div class="top">
<div class="about">
<p>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层</p>
<p>联系电话：010-62793299</p>
<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：service@ezijing.com</p>
</div>
<div class="link">
<template v-for="(item, index) in link">
<a :href="item.href" :key="index" target="_blank">{{ item.title }}</a>
</template>
</div>
<div class="friendlink">
友情链接：
<template v-for="(item, index) in link2">
<a :href="item.href" :key="index" target="_blank">{{ item.title }}</a>
</template>
</div>
</div>
<div class="copyright">
<p>Copyright @ 2017 Zijing Education. All rights reserved.</p>
<p>京ICP证150431号 <img src="~/assets/images/icon_jinghui.png" height="12" />京公网安备 11010802023681号</p>
<p>清控紫荆（北京）教育科技股份有限公司</p>
</div>
</footer>
</template>
<script>
export default {
data() {
return {
link: [
{ title: '中国教育部', href: 'http://www.pbc.gov.cn/' },
{ title: '教育部涉外监管网', href: 'http://www.pbc.gov.cn/' },
{ title: '印第安纳大学', href: 'http://www.pbc.gov.cn/' },
{ title: 'Kelley商学院', href: 'https://kelley.ezijing.com/' },
{ title: '紫荆教育', href: 'https://www.ezijing.com/' }
],
link2: [
{ title: '中国人民银行', href: 'http://www.pbc.gov.cn/' },
{ title: '中国涉外监管网', href: 'http://jsj.moe.gov.cn/' },
{ title: '中国银行协会', href: 'https://www.china-cba.net/' },
{ title: '中国证券投资基金业协会', href: 'https://www.amac.org.cn/' }
]
}
}
}
</script>
<style lang="scss">
.main-footer {
.top {
color: #fff;
background-color: #aa1941;
padding: 0.24rem 0.15rem;
}
.about {
p {
font-size: 0.12rem;
}
p + p {
margin-top: 10px;
}
}
.link {
margin-top: 0.22rem;
a {
font-size: 0.12rem;
margin-right: 0.2rem;
}
}
.friendlink {
margin-top: 0.22rem;
a {
font-size: 0.12rem;
line-height: 0.18rem;
margin-right: 0.1rem;
white-space: nowrap;
}
}
.copyright {
padding: 0.15rem 0 0.24rem;
p {
font-size: 0.12rem;
color: #999;
text-align: center;
}
p + p {
margin-top: 0.15rem;
}
img {
margin: -4px 5px 0;
vertical-align: middle;
}
}
}
</style>
components/layout/h5/Header.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div>
<header class="main-header">
<template v-if="!searchVisible">
<nuxt-link to="/" class="logo"></nuxt-link>
<div class="search" @click="toggleSearch"></div>
<div class="menu" :class="menuClasses" @click="toggleMenu"></div>
</template>
<div class="search-box" v-else>
<div class="search-inner">
<input type="text" placeholder="请输入关键词" class="search-input" ref="search" />
<div class="search-btn" @click="search"></div>
</div>
<div class="search-close" @click="toggleSearch"></div>
</div>
</header>
<app-search v-if="searchVisible"></app-search>
<app-menu v-show="menuVisible" @showApplyForm="showApplyForm"></app-menu>
<right-aside ref="rightAside"></right-aside>
</div>
</template>
<script>
import AppMenu from '@/components/base/h5/Menu'
import AppSearch from '@/components/base/h5/Search'
import RightAside from '@/components/base/h5/RightAside'
export default {
components: { AppMenu, AppSearch, RightAside },
data() {
return {}
},
computed: {
searchVisible() {
return this.$store.state.searchVisible
},
menuVisible() {
return this.$store.state.menuVisible
},
menuClasses() {
return {
'is-open': this.menuVisible
}
}
},
watch: {
$route() {
this.$store.commit('toggleSearch', false)
this.$store.commit('toggleMenu', false)
}
},
methods: {
toggleSearch() {
this.$store.commit('toggleMenu', false)
this.$store.commit('toggleSearch', !this.searchVisible)
this.searchVisible &&
this.$nextTick(() => {
this.$refs.search.focus()
})
},
toggleMenu() {
this.$store.commit('toggleMenu', !this.menuVisible)
},
search() {
this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
},
showApplyForm() {
this.$refs.rightAside.showApplyForm()
}
}
}
</script>
<style lang="scss">
.main-header {
position: relative;
display: flex;
align-items: center;
padding: 0.16rem 0.15rem 0.2rem;
background-color: #fff;
border-top: 0.05rem solid #aa1941;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
.logo {
flex: 1;
background: url('~/assets/images/logo.png') no-repeat;
height: 0.26rem;
background-size: contain;
}
.search {
width: 0.18rem;
height: 0.18rem;
padding: 0 0.08rem;
background: url('~/assets/images/icon_search.png') no-repeat center;
background-size: 0.18rem 0.18rem;
cursor: pointer;
}
.menu {
width: 0.18rem;
height: 0.18rem;
padding: 0 0.08rem;
background: url('~/assets/images/icon_menu.png') no-repeat center;
background-size: 0.18rem 0.18rem;
cursor: pointer;
&.is-open {
background: url('~/assets/images/icon_close.png') no-repeat center;
background-size: 0.18rem 0.18rem;
}
}
.search-box {
flex: 1;
display: flex;
align-items: center;
.search-inner {
height: 0.24rem;
flex: 1;
display: flex;
border: 0.01rem solid #eaeaea;
border-radius: 0.03rem;
overflow: hidden;
}
.search-input {
flex: 1;
height: 100%;
padding: 0 0.1rem;
border: 0;
}
.search-btn {
width: 0.18rem;
height: 100%;
padding: 0 0.05rem;
background: url('~/assets/images/icon_search_hover.png') no-repeat center;
background-size: 0.18rem 0.18rem;
cursor: pointer;
}
.search-close {
margin-left: 0.02rem;
width: 0.18rem;
height: 0.18rem;
padding: 0 0.08rem;
background: url('~/assets/images/icon_close.png') no-repeat center;
background-size: 0.18rem 0.18rem;
cursor: pointer;
}
}
}
</style>
components/layout/h5/Index.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div class="main-layout is-h5" :class="{ 'is-fixed': isFixed }">
<app-header />
<div v-show="!isFixed">
<Nuxt />
<app-footer />
</div>
</div>
</template>
<script>
import AppHeader from './Header'
import AppFooter from './Footer'
export default {
components: { AppHeader, AppFooter },
computed: {
isFixed() {
const { searchVisible, menuVisible } = this.$store.state
return searchVisible || menuVisible
}
}
}
</script>
<style lang="scss">
.is-h5 {
&.main-layout {
max-width: 750px;
min-height: 100vh;
margin: 0 auto;
overflow: hidden;
background-color: #f9f8f8;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.04);
}
}
</style>
\ No newline at end of file
components/layout/index.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<component :is="componentName" />
</template>
<script>
import PC from './pc/Index'
import H5 from './h5/Index'
export default {
components: { PC, H5 },
computed: {
isMobile() {
return this.$store.state.isMobile
},
componentName() {
return this.isMobile ? 'H5' : 'PC'
}
}
}
</script>
components/Foot.vue → components/layout/pc/Foot.vue
浏览文件 @ 6fb0d7cd
......@@ -5,12 +5,12 @@
<div class="left-content">
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
中国教育部
{{ $t('foot.link1') }}
</a>
</div>
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
教育部涉外监管网
{{ $t('foot.link2') }}
</a>
</div>
<div>
......@@ -20,7 +20,7 @@
</div>
<div>
<a href="http://www.ezijing.com" target="_blank" >
紫荆教育
{{ $t('foot.link5') }}
</a>
</div>
<!-- <div>
......@@ -28,15 +28,15 @@
</div> -->
</div>
<div class="center-content">
<div class="address">地&nbsp;&nbsp;&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层</div>
<div class="phone">联系电话：010-62793299</div>
<div class="mail">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：service@ezijing.com</div>
<div class="address" v-html="$t('foot.address')"></div>
<div class="phone" v-html="$t('foot.contact')"></div>
<div class="mail" v-html="$t('foot.email')"></div>
</div>
<div class="right-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/734d8fd7b853b838e5e029049e2d9db3.png" alt="" class="code">
<div class="tips-txt">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" alt="">
<div class="txt">微信公众号</div>
<div class="txt">{{ $t('foot.weChat') }}</div>
</div>
</div>
</div>
......@@ -92,7 +92,7 @@ export default {
.left-content{
div{
opacity: 0.7;
font-size: 22px;
font-size: 18px;
font-weight: 300;
line-height: 50px;
color: #FFFFFF;
......@@ -101,7 +101,7 @@ export default {
}
}
.center-content{
font-size: 16px;
font-size: 18px;
line-height: 32px;
color: #FFFFFF;
letter-spacing: 3px;
......
components/Head.vue → components/layout/pc/Head.vue
浏览文件 @ 6fb0d7cd
......@@ -3,17 +3,21 @@
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<app-link :item="{ path: '/' }">
<nuxt-link to="/">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/ciis/ezijing-logo.png" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-shms/seg-shms-logo.png" />
</app-link>
</nuxt-link>
<div class="user" v-if="user.id">
<span>{{ user.realname || user.nickname }}</span
><em>|</em><span class="logout" @click="logout">退出</span>
><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span>
</div>
<div class="login-btn-box" v-else>
<div class="login"><a :href="loginURL">快速登录</a></div>
<div class="register"><a :href="registerURL">注册</a></div>
<div class="login">
<a :href="loginURL">{{ $t('menu.fastLogin') }}</a>
</div>
<div class="register">
<a :href="registerURL">{{ $t('menu.register') }}</a>
</div>
</div>
<div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
......@@ -27,12 +31,10 @@
</div>
</template>
<script>
import AppLink from '@/components/Link'
import AppMenu from '@/components/Menu'
import AppMenu from './Menu'
export default {
components: {
AppMenu,
AppLink
AppMenu
},
data() {
return {}
......@@ -90,7 +92,7 @@ li {
.max-width-content {
display: flex;
align-items: center;
::v-deep.link-content{
::v-deep{
a{
display:flex;
img {
......
components/layout/pc/Index.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<div class="main-layout is-pc">
<app-header />
<Nuxt />
<app-footer v-if="hasFooter" />
<rightAside />
</div>
</template>
<script>
import AppHeader from './Head'
import AppFooter from './Foot'
export default {
props: { hasFooter: { Boolean, default: true } },
components: { AppHeader, AppFooter }
}
</script>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
components/Menu.vue → components/layout/pc/Menu.vue
浏览文件 @ 6fb0d7cd
......@@ -24,9 +24,7 @@
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')"
>
<app-link :item="{
path: level2Item.path
}">
<app-link :to="level2Item.path">
<div class="name">
{{ level2Item.name }}
</div>
......@@ -49,49 +47,49 @@ export default {
return {
navData: [
{
name: '项目介绍',
name: this.$t('menu.project'),
path: '/project-intro/bg',
childern: [
{ name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授予', path: '/project-intro/certificate' }
{ name: this.$t('menu.projectChild.bg'), path: '/project-intro/bg' },
{ name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' },
{ name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' }
]
},
{
name: '课程与师资',
name: this.$t('menu.course'),
path: '/about/course',
childern: [
{ name: '课程设置', path: '/about/course' },
{ name: '师资力量', path: '/about/teacher' }
{ name: this.$t('menu.courseChild.set'), path: '/about/course' },
{ name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
]
},
{
name: '最新动态',
name: this.$t('menu.news'),
path: '/news/hot',
childern: [
{ name: '热点新闻', path: '/news/hot' },
{ name: '教授采访', path: '/news/interview' }
{ name: this.$t('menu.newsChild.hot'), path: '/news/hot' },
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' }
]
},
{
name: '招生信息',
name: this.$t('menu.recruit'),
path: '/apply/relevant',
childern: [
{ name: '有关申请', path: '/apply/relevant' },
{ name: '费用资助', path: '/apply/support' },
{ name: '常见问题', path: '/apply/problem' }
{ name: this.$t('menu.recruitChild.apply'), path: '/apply/relevant' },
{ name: this.$t('menu.recruitChild.cost'), path: '/apply/support' },
{ name: this.$t('menu.recruitChild.problem'), path: '/apply/problem' }
]
},
{
name: '校友风采',
name: this.$t('menu.alumni'),
path: '/alumni/outstanding',
childern: [
{ name: '杰出校友', path: '/alumni/outstanding' },
{ name: '校友分享', path: '/alumni/sharing' }
{ name: this.$t('menu.alumniChild.outstanding'), path: '/alumni/outstanding' },
{ name: this.$t('menu.alumniChild.share'), path: '/alumni/sharing' }
]
},
{
name: '报名申请',
name: this.$t('menu.enroll'),
path: '/my'
}
],
......
components/recommend.vue
浏览文件 @ 6fb0d7cd
......@@ -7,14 +7,7 @@
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<app-link
:item="{
news: {
data: item,
path: '/news/hot'
}
}"
>
<app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</app-link>
......
components/rightAside.vue
浏览文件 @ 6fb0d7cd
......@@ -6,14 +6,14 @@
@mouseenter="handleMsOver('enroll')"
@mouseleave="handleMsOut"
>
<p>报名咨询</p>
<p>{{ $t('aside.apply') }}</p>
</li>
<li
:class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
@mouseenter="handleMsOver('wx')"
@mouseleave="handleMsOut"
>
<p>关注我们</p>
<p>{{ $t('aside.follow') }}</p>
</li>
</ul>
<transition
......@@ -29,9 +29,9 @@
@mouseout="handleMsOut"
>
<div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
<h5>报名咨询</h5>
<p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
<p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
<h5>{{ $t('aside.apply') }}</h5>
<p><el-input v-model="formInfo.name" :placeholder="$t('aside.name')" size="small"></el-input></p>
<p><el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')" size="small"></el-input></p>
<!-- <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p> -->
<p>
<select name="" id="" v-model="formInfo.newProjectId" disabled>
......@@ -48,16 +48,16 @@
</el-select> -->
</p>
<p class="sendcode">
<el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
<el-input v-model="sendCode" :placeholder="$t('aside.code')" size="small"></el-input
><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode"
>获取验证码</el-button
>{{ $t('aside.codeBtn') }}</el-button
>
</p>
<p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
<p><el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button></p>
</div>
<div class="wx_cont" v-show="tabBtnTarget === 'wx'">
<h5>关注我们</h5>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-shms/wx_code.jpg" />
<h5>{{ $t('aside.follow') }}</h5>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
</div>
</div>
</transition>
......@@ -197,15 +197,15 @@ export default {
btnDisabledTimer() {
this.isBtnDisabled = true
let count = 60
document.querySelector('#checkedCode').innerHTML = count + '秒后重发'
document.querySelector('#checkedCode').innerHTML = count + 's'
const timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = '获取验证码'
document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn')
} else {
document.querySelector('#checkedCode').innerHTML = count + '秒后重发'
document.querySelector('#checkedCode').innerHTML = count + 's'
}
}, 1000)
}
......
langs/en-US.js
浏览文件 @ 6fb0d7cd
export default {
// 头部 + 导航
menu: {
about: 'About'
out: '退出',
fastLogin: '快速登录',
register: '注册',
project: '项目介绍',
course: '课程与师资',
news: '最新动态',
recruit: '招生信息',
alumni: '校友风采',
enroll: '报名申请',
projectChild: {
bg: '项目背景',
feature: '项目特色',
cert: '证书授予'
},
courseChild: {
set: '课程设置',
teachers: '师资力量'
},
newsChild: {
hot: '热点新闻',
interview: '教授采访'
},
recruitChild: {
apply: '有关申请',
cost: '费用资助',
problem: '常见问题'
},
alumniChild: {
outstanding: '杰出校友',
share: '校友分享'
}
},
// 首页
home: {
project: {
title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '科学成熟的<br />在线<br />教育模式',
itemT4: '无需联考<br />快速入门<br />的学习体验',
itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌',
itemT3: '科学成熟的<br />在线教育模式',
itemT4: '无需联考、快速入门<br />的学习体验',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
},
ranking: {
title: '学校排名',
item1Tit: '印第安纳大学',
item2Tit: 'KELLEY 商学院',
item3Tit: 'KELLEY<br />在线金融硕士',
item1Txt1: '全球最佳研究生院排名<br />2018 《美国新闻与世界报道》',
item1Txt2: '全美最佳商学院研究生综合排名<br />2018 《美国新闻与世界报道》',
item2Txt1: '总体排名<br />2018 《美国新闻与世界报道》',
item2Txt2: '学生满意度排名<br />2016 《彭博商业周刊》',
item3Txt1: '全球最佳研究生院排名<br />2018 《美国新闻与世界报道》',
item3Txt2: '全美最佳商学院研究生综合排名<br />2018 《美国新闻与世界报道》'
},
news: {
title: '最新动态'
},
presence: {
title: '师生风采',
tips1: '提交申请<br />免费领取试听课程',
tips2: '温馨提示：仅本科及以上学历可报名',
yearsholder: '请选择工作年限',
degreeholder: '请选择学历/学位',
nameholder: '输入您的姓名',
phoneholder: '输入您的手机号',
formBtn: '立即提交'
},
problem: {
title: '常见问题'
},
course: {
title: '公开课'
}
},
// 底部
foot: {
address: '地&nbsp;&nbsp;&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层',
contact: '联系电话：010-62793299',
email: '邮&nbsp;&nbsp;&nbsp;&nbsp;箱：service@ezijing.com',
link1: '中国教育部',
link2: '教育部涉外监管网',
link3: '印第安纳大学',
link4: 'Kelley商学院',
link5: '紫荆教育',
weChat: '微信公众号'
},
// 项目背景
bg: {
tabBtn1: '紫荆教育',
tabBtn2: 'KELLEY商学院',
tabBtn3: '联合办学背景',
con1Txt: `紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，由清华控股有限公司于2015年以清华大学五道口金融学院相关知识产权创设而成。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。<br />
紫荆教育以教育为本、以科技赋能、以专业化为基础，以国际化为目标，提供高端国际学位教育、职业教育和在线教育解决方案，为我国培养高质量的国际化人才和产业人才。`,
con1ItemT1: '国际合作院校',
con1ItemT2: '线上课程',
con1ItemT3: '金融机构/协会/政府/学校',
con1ItemT4: '国内外师资团队',
con1ItemT5: '学术直播课',
con1ItemT6: '总研发课时',
con1ItemT7: '学位学员',
con1ItemT8: '人次学习',
unit1: '所',
unit2: '门',
unit3: '万',
con2Txt: `印第安纳大学伯明顿分校是美国公立常春藤名校，成立于1820年，有近200年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。<br />
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有近100年历史。<br />
Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance.
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The
Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。`,
con3Txt: `本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。<br />
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。<br />
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。<br />
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源，打造最原汁原味、最接近实战的金融学硕士学位课程。`
},
// 项目特色
feature: {
item1Tit: '线上线下结合灵活的授课学习方式',
item1Txt1: '线上+线下教学模式',
item1Txt2: '在职学习、无需出国、入读名校',
item1Txt3: '最短15个月最长5年拿到学位',
item2Tit: '高性价比享超高品质教学服务体验',
item2Txt1: '专业金融在线教育品牌',
item2Txt2: '无需联考、快速入门的学习模式',
item2Txt3: '全方位的金融职业教育课程体系',
item3Tit: '国际视野结合中国本土的实践课程',
item3Txt1: '先修课程+必修课程+选修课程+美国访学',
item3Txt2: '全球排名顶尖师资+中国金融界权威专家',
item3Txt3: '多次被 U.S. News & World Report评为全美第一',
},
// 证书授予
cert: {
txt1: '修满33个学分',
txt2: '完成毕业报告',
txt3: '达到毕业条件的学员将被授予美国印第安纳大学KELLEY商学院金融硕士学位',
txt4: 'KELLEY商学院学位证书',
txt5: '*本学位和美国本校生所获学位相同'
},
// 课程设置
setCourse: {
tit1: '先修课程',
tit2: '必修课程',
tit3: '选修课程',
tit4: '美国访学',
t1: '金融英语',
t2: '管理经济学',
t3: '会计基础与财务分析',
t4: '财务管理',
t5: '资产定价和证券估值',
t6: '决策过程中的管理会计信息',
t7: '金融风险管理',
t8: '企业估值与投资',
t9: '证券和投资分析',
t10: '国际金融管理',
t11: '高级衍生品和固定收益模型',
t12: '金融市场策略',
t13: '行为金融学',
t14: '国际货币体系',
t15: '毕业论文/毕业设计',
t16: '创业金融系列',
t17: '财富管理系列',
t18: '企业理财系列',
t19: '互联网金融系列',
t20: 'ABS系列',
t21: '利率市场化系列',
t22: '转型与发展：金融科技系列等',
t23: '机器学习和商业应用',
t24: '职业发展规划',
t25: '毕业典礼'
},
// 师资力量
teachers: {
tit1: '美方师资（部分）',
tit2: '中方师资（部分）',
tea1Name: 'Ash Soni',
tea1Txt: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授',
tea2Name: '杨珺',
tea2Txt: '华盛顿大学金融学博士<br />香港中文大学运营管理学博士<br />KELLEY商学院公司治理研究院院长',
tea3Name: 'Cathy Bonser-neal',
tea3Txt: '芝加哥大学博士<br />KELLEY商学院金融学副教授',
tea4Name: 'Sreeni Kamma',
tea4Txt: '纽约州立大学布法罗分校博士<br />KELLEY商学院金融系主任',
tea5Name: 'Dubos J. masson',
tea5Txt: '印第安纳大学金融学博士<br />KELLEY商学院金融系副教授',
tea6Name: 'Joe fisher',
tea6Txt: '俄亥俄州立大学博士<br />KELLEY商学院教授',
tea7Name: '肇越',
tea7Txt: '清华五道口经济学博士<br />香港致富证券首席经济学家',
tea8Name: '梁国忠',
tea8Txt: '复旦大学金融学硕士<br />中金甲子投资基金管理有限公司<br />董事长兼总经理',
tea9Name: '孙明春',
tea9Txt: '斯坦福大学博士<br />海通国际首席经济学家',
tea10Name: '洪灏',
tea10Txt: '澳大利亚商学院金融系工商管理硕士士<br />交银国际董事总经理、首席策略师',
tea11Name: '王勇',
tea11Txt: '加拿大达尔豪斯大学博士<br />国家千人计划专家<br />天风证券首席风险官',
tea12Name: '王鹤菲',
tea12Txt: '斯坦福大学商学院金融学博士<br />中国人民大学国际学院金融学教授',
},
// 有关申请
apply: {
con1Tit: '申请条件',
con1Txt: '已获得本科或以上学位<br />有一定工作经验<br />托福79分/雅思6分以上',
con2Tit: '招生对象',
con2Txt: `证劵、基金、银行、财富管理等相关行业人士<br />
金融相关行业有丰富工作经验的专业人士<br />
所从事的金融业务具有国际化需求的人士<br />
其他对本项目有兴趣并自身优异者`
},
// 费用资助
cost: {
con1Tit: '学费',
con1Txt: `本项目学费24.98万元，<br />
由学生向清华控股旗下紫荆教育一次性缴纳。`,
con2Tit: '贷款',
con2Txt: `1、就读本项目的学生，可以申请多家金融机构的贷款服务。<br />
2、具体信息会在学生获得正式录取资格后公布。<br />
3、清华控股旗下紫荆教育不为学员担保贷款，不承担催款义务`
},
// 常见问题
problem: {
item1Tit: '申请和面试相关问题',
item1problem1: 'Q:如何申请美国印第安纳大学Kelley商学院金融学硕士？大概流程是什么？',
item1answer1: 'A: 请参考网页招生简章。',
item1problem2: 'Q:面试多少人？录取多少人？率取比率是多少？',
item1answer2: 'A: 本项目采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。',
item1problem3: 'Q:是否要求考生的工作经验必须属于金融行业？',
item1answer3: 'A: 本项目对考生的行业没有特殊要求。只要是有志于从事金融行业和相关工作的考生都可以报考本项目。录取为综合考评，工作背景是综合评价时需要参考的一部分信息。',
item2Tit: '报考资格相关问题',
item2problem1: 'Q:大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
item2answer1: 'A: 可以报考，只要获得本科学位证书，按照本科毕业生身份报考即可。',
item2problem2: 'Q:成人教育的本科毕业生（无学位证）能否报考？',
item2answer2: 'A: 不可以。需要获得本科学位证书才能符合相应报考条件。',
item3Tit: '',
item3problem1: 'Q:美国印第安纳大学Kelley商学院金融学硕士项目学费是多少？ 可以分期吗？',
item3answer1: 'A: 目前本项目的学费为24.98万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。',
},
// 杰出校友
outstanding: {
title1: 'KELLEY商学院杰出校友',
title2: '紫荆-KELLEY优秀学生'
},
viewMore: '查看更多+',
// 右侧弹窗
aside: {
apply: '报名咨询',
follow: '关注我们',
name: '请输入您的名字',
phone: '请输入您的电话',
code: '请输入验证码',
codeBtn: '获取验证码',
formBtn: '立即报名',
project1: '综合管理方向工商管理硕士',
project2: '金融方向工商管理硕士',
project3: '酒店和旅游方向工商管理硕士',
project4: '金融硕士MSF',
project5: '应用心理学硕士MAP',
project6: '教育学硕士MED（儿童心理与教育）',
project7: '中国未来金融领袖计划',
pay: '扫描关注微信公众号'
}
}
langs/zh-CN.js
浏览文件 @ 6fb0d7cd
export default {
// 头部 + 导航
menu: {
about: '关于紫荆'
out: '退出',
fastLogin: '快速登录',
register: '注册',
project: '项目介绍',
course: '课程与师资',
news: '最新动态',
recruit: '招生信息',
alumni: '校友风采',
enroll: '报名申请',
projectChild: {
bg: '项目背景',
feature: '项目特色',
cert: '证书授予'
},
courseChild: {
set: '课程设置',
teachers: '师资力量'
},
newsChild: {
hot: '热点新闻',
interview: '教授采访'
},
recruitChild: {
apply: '有关申请',
cost: '费用资助',
problem: '常见问题'
},
alumniChild: {
outstanding: '杰出校友',
share: '校友分享'
}
},
// 首页
home: {
project: {
title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '线上线下<br />结合灵活的<br />授课学习方式',
itemT4: '全球排名<br />顶尖师资及<br />中国金融界权威专家',
itemT5: '聚焦中国实践<br />和国际前沿的<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌',
itemT3: '线上线下结合灵活的<br />授课学习方式',
itemT4: '全球排名顶尖师资<br />及中国金融界权威专家',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
},
ranking: {
title: '学校排名',
item1Tit: '印第安纳大学',
item2Tit: 'KELLEY 商学院',
item3Tit: 'KELLEY<br />在线金融硕士',
item1Txt1: '全球最佳研究生院排名<br />2018《美国新闻与世界报道》',
item1Txt2: '全美最佳商学院排名<br />2019《美国新闻与世界报道》',
item2Txt1: '在线硕士排名<br />2019《美国新闻与世界报道》',
item2Txt2: '学生满意度排名<br />2016《彭博商业周刊》',
item3Txt1: '在线MBA排名<br />2021《美国新闻与世界报道》',
item3Txt2: '最佳教授排名<br />2021《普林斯顿评论》'
},
news: {
title: '最新动态'
},
presence: {
title: '师生风采',
tips1: '提交申请<br />免费领取试听课程',
tips2: '温馨提示：仅本科及以上学历可报名',
yearsholder: '请选择工作年限',
degreeholder: '请选择学历/学位',
nameholder: '输入您的姓名',
phoneholder: '输入您的手机号',
formBtn: '立即提交'
},
problem: {
title: '常见问题'
},
course: {
title: '公开课'
}
},
// 底部
foot: {
address: '地&nbsp;&nbsp;&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层',
contact: '联系电话：010-62793299',
email: '邮&nbsp;&nbsp;&nbsp;&nbsp;箱：service@ezijing.com',
link1: '中国教育部',
link2: '教育部涉外监管网',
link3: '印第安纳大学',
link4: 'Kelley商学院',
link5: '紫荆教育',
weChat: '微信公众号'
},
// 项目背景
bg: {
tabBtn1: '紫荆教育',
tabBtn2: 'KELLEY商学院',
tabBtn3: '联合办学背景',
con1Txt: `紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，由清华控股有限公司于2015年以清华大学五道口金融学院相关知识产权创设而成。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。<br />
紫荆教育以教育为本、以科技赋能、以专业化为基础，以国际化为目标，提供高端国际学位教育、职业教育和在线教育解决方案，为我国培养高质量的国际化人才和产业人才。`,
con1ItemT1: '国际合作院校',
con1ItemT2: '线上课程',
con1ItemT3: '金融机构/协会/政府/学校',
con1ItemT4: '国内外师资团队',
con1ItemT5: '学术直播课',
con1ItemT6: '总研发课时',
con1ItemT7: '学位学员',
con1ItemT8: '人次学习',
unit1: '所',
unit2: '门',
unit3: '万',
con2Txt: `印第安纳大学伯明顿分校是美国公立常春藤院校，成立于1820年，有200多年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。<br />
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有100多年历史。<br />
Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance。
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The
Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。`,
con3Txt: `本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。<br />
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。<br />
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。<br />
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源，打造最原汁原味、最接近实战的金融学硕士学位课程。`
},
// 项目特色
feature: {
item1Tit: '线上线下结合灵活的授课学习方式',
item1Txt1: '线上+线下教学模式',
item1Txt2: '在职学习、无需出国、便捷高效',
item1Txt3: '最短15个月最长5年拿到学位',
item2Tit: '高性价比享超高品质教学服务体验',
item2Txt1: '专业金融在线教育品牌',
item2Txt2: '无需联考、快速入门的学习模式',
item2Txt3: '全方位的金融职业教育课程体系',
item3Tit: '国际视野结合中国本土的实践课程',
item3Txt1: '先修课程+必修课程+选修课程+美国访学',
item3Txt2: '全球排名顶尖师资+中国金融界权威专家',
item3Txt3: '多次被 U.S. News & World Report评为全美第一',
},
// 证书授予
cert: {
txt1: '修满33个学分',
txt2: '完成毕业报告',
txt3: '达到毕业条件的学员将被授予美国印第安纳大学KELLEY商学院金融硕士学位',
txt4: 'KELLEY商学院学位证书',
txt5: '*本学位和美国本校生所获学位相同'
},
// 课程设置
setCourse: {
tit1: '先修课程',
tit2: '必修课程',
tit3: '选修课程',
tit4: '美国访学',
t1: '金融英语',
t2: '管理经济学',
t3: '会计基础与财务分析',
t4: '财务管理',
t5: '资产定价和证券估值',
t6: '决策过程中的管理会计信息',
t7: '金融风险管理',
t8: '企业估值与投资',
t9: '证券和投资分析',
t10: '国际金融管理',
t11: '高级衍生品和固定收益模型',
t12: '金融市场策略',
t13: '行为金融学',
t14: '国际货币体系',
t15: '毕业论文/毕业设计',
t16: '创业金融系列',
t17: '财富管理系列',
t18: '企业理财系列',
t19: '互联网金融系列',
t20: 'ABS系列',
t21: '利率市场化系列',
t22: '转型与发展：金融科技系列等',
t23: '机器学习和商业应用',
t24: '职业发展规划',
t25: '毕业典礼'
},
// 师资力量
teachers: {
tit1: '美方师资（部分）',
tit2: '中方师资（部分）',
tea1Name: 'Ash Soni',
tea1Txt: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授',
tea2Name: '杨珺',
tea2Txt: '华盛顿大学金融学博士<br />香港中文大学运营管理学博士<br />KELLEY商学院公司治理研究院院长',
tea3Name: 'Cathy Bonser-neal',
tea3Txt: '芝加哥大学博士<br />KELLEY商学院金融学副教授',
tea4Name: 'Sreeni Kamma',
tea4Txt: '纽约州立大学布法罗分校博士<br />KELLEY商学院金融系主任',
tea5Name: 'Dubos J. masson',
tea5Txt: '印第安纳大学金融学博士<br />KELLEY商学院金融系副教授',
tea6Name: 'Joe fisher',
tea6Txt: '俄亥俄州立大学博士<br />KELLEY商学院教授',
tea7Name: '肇越',
tea7Txt: '清华五道口经济学博士<br />香港致富证券首席经济学家',
tea8Name: '梁国忠',
tea8Txt: '复旦大学金融学硕士<br />中金甲子投资基金管理有限公司<br />董事长兼总经理',
tea9Name: '孙明春',
tea9Txt: '斯坦福大学博士<br />海通国际首席经济学家',
tea10Name: '洪灏',
tea10Txt: '澳大利亚商学院金融系工商管理硕士士<br />交银国际董事总经理、首席策略师',
tea11Name: '王勇',
tea11Txt: '加拿大达尔豪斯大学博士<br />国家千人计划专家<br />天风证券首席风险官',
tea12Name: '王鹤菲',
tea12Txt: '斯坦福大学商学院金融学博士<br />中国人民大学国际学院金融学教授',
},
// 有关申请
apply: {
con1Tit: '申请条件',
con1Txt: '已获得本科或以上学位<br />有一定工作经验<br />托福79分/雅思6分以上',
con2Tit: '招生对象',
con2Txt: `证劵、基金、银行、财富管理等相关行业人士<br />
金融相关行业有丰富工作经验的专业人士<br />
所从事的金融业务具有国际化需求的人士<br />
其他对本项目有兴趣并自身优异者`
},
// 费用资助
cost: {
con1Tit: '学费',
con1Txt: `本项目学费24.98万元，<br />
由学生向清华控股旗下紫荆教育一次性缴纳。`,
con2Tit: '贷款',
con2Txt: `1、就读本项目的学生，可以申请多家金融机构的贷款服务。<br />
2、具体信息会在学生获得正式录取资格后公布。<br />
3、清华控股旗下紫荆教育不为学员担保贷款，不承担催款义务。`
},
// 常见问题
problem: {
item1Tit: '申请和面试相关问题',
item1problem1: 'Q:如何申请美国印第安纳大学Kelley商学院金融学硕士？大概流程是什么？',
item1answer1: 'A: 本项目为申请面试制； 申请流程为：在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。',
item1problem2: 'Q:面试多少人？录取多少人？率取比率是多少？',
item1answer2: 'A: 本项目采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。',
item1problem3: 'Q:是否要求考生的工作经验必须属于金融行业？',
item1answer3: 'A: 本项目对考生的行业背景无特殊要求。欢迎有志于从事金融行业或相关工作的考生报考。录取为综合考评，工作背景是综合考评时需要参考的一部分信息。',
item2Tit: '报考资格相关问题',
item2problem1: 'Q:大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
item2answer1: 'A: 可以报考，只要获得本科学位证书，按照本科毕业生身份报考即可。',
item2problem2: 'Q:成人教育的本科毕业生（无学位证）能否报考？',
item2answer2: 'A: 不可以。需要获得本科学位证书才能符合相应报考条件。',
item3Tit: '',
item3problem1: 'Q:美国印第安纳大学Kelley商学院金融学硕士项目学费是多少？ 可以分期吗？',
item3answer1: 'A: 目前本项目的学费为24.98万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。',
},
// 杰出校友
outstanding: {
title1: 'KELLEY商学院杰出校友',
title2: '紫荆-KELLEY优秀学生'
},
viewMore: '查看更多+',
// 右侧弹窗
aside: {
apply: '报名咨询',
follow: '关注我们',
name: '请输入您的名字',
phone: '请输入您的电话',
code: '请输入验证码',
codeBtn: '获取验证码',
formBtn: '立即报名',
project1: '综合管理方向工商管理硕士',
project2: '金融方向工商管理硕士',
project3: '酒店和旅游方向工商管理硕士',
project4: '金融硕士MSF',
project5: '应用心理学硕士MAP',
project6: '教育学硕士MED（儿童心理与教育）',
project7: '中国未来金融领袖计划',
pay: '扫描关注微信公众号'
}
}
layouts/normal.vue
浏览文件 @ 6fb0d7cd
<template>
<div>
<Head />
<Nuxt />
<rightAside />
<Foot v-if="hasFooter" />
</div>
<app-layout v-bind="$attrs"></app-layout>
</template>
<script>
import AppLayout from '@/components/layout'
export default {
props: { hasFooter: { Boolean, default: true } }
components: { AppLayout }
}
</script>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
middleware/device.js
浏览文件 @ 6fb0d7cd
export default function(context) {
const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
isMobile && context.redirect('https://h5.ezijing.com/')
context.store.commit('setIsMobile', isMobile)
}
nuxt.config.js
浏览文件 @ 6fb0d7cd
......@@ -45,10 +45,11 @@ export default {
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
css: ['vant/lib/index.css', '@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/vant',
'@/plugins/i18n',
'@/plugins/router',
'@/plugins/axios',
......
package-lock.json
浏览文件 @ 6fb0d7cd
......@@ -17,6 +17,7 @@
"qrcode.vue": "^1.7.0",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
......@@ -1973,6 +1974,15 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
},
"node_modules/@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
......@@ -2068,6 +2078,19 @@
"node": ">=0.10.0"
}
},
"node_modules/@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
"integrity": "sha512-4Hvq4tl4grCOJLZ0e8ZaivBV8xOcmTPmTT8BDkTrEIKqnDowRFDdsXxcHECzWmbmMx+CYGdngvd2Cq8YR9DfKA=="
},
"node_modules/@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"dependencies": {
"@popperjs/core": "^2.9.2"
}
},
"node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -11227,6 +11250,21 @@
"node": ">= 0.4.0"
}
},
"node_modules/vant": {
"version": "2.12.21",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.21.tgz",
"integrity": "sha512-BvS3tLZS68drJJzs0Ymqj819BQbU3evdUYaJClGzXEXgUZb2pPFBFsD69NE0L7iHcGPYwQhRSpvg+budk8Xr7A==",
"dependencies": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.5.3",
"@vant/popperjs": "^1.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
},
"peerDependencies": {
"vue": ">= 2.6.0"
}
},
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......@@ -11278,6 +11316,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
},
"node_modules/vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"node_modules/vue-loader": {
"version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
......@@ -14497,6 +14540,11 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
},
"@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
......@@ -14589,6 +14637,19 @@
}
}
},
"@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
"integrity": "sha512-4Hvq4tl4grCOJLZ0e8ZaivBV8xOcmTPmTT8BDkTrEIKqnDowRFDdsXxcHECzWmbmMx+CYGdngvd2Cq8YR9DfKA=="
},
"@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"requires": {
"@popperjs/core": "^2.9.2"
}
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -22209,6 +22270,18 @@
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"vant": {
"version": "2.12.21",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.21.tgz",
"integrity": "sha512-BvS3tLZS68drJJzs0Ymqj819BQbU3evdUYaJClGzXEXgUZb2pPFBFsD69NE0L7iHcGPYwQhRSpvg+budk8Xr7A==",
"requires": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.5.3",
"@vant/popperjs": "^1.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
}
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......@@ -22254,6 +22327,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
},
"vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"vue-loader": {
"version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
......
package.json
浏览文件 @ 6fb0d7cd
......@@ -19,6 +19,7 @@
"qrcode.vue": "^1.7.0",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
......
pages/about/course.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="course-content-box">
<app-frame :data="frameParams">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="course-content-box" v-if="!isMobile">
<div class="content-mian">
<div class="border-box">
<template v-for="(item, index) in courseData">
......@@ -18,8 +19,20 @@
</template>
</div>
</div>
</app-frame>
</div>
</div>
<div class="course-content" v-else>
<div class="item-box" v-for="(item, index) in courseData" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'c'">
<div class="name">{{ cItem.name }}</div>
<div class="score">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -32,198 +45,127 @@ export default {
return {
courseData: [
{
title: '先修课程',
title: this.$t('setCourse.tit1'),
item: [
{
name: '金融英语',
score: 0
},
{
name: '管理经济学',
score: 0
},
{
name: '会计基础与财务分析',
score: 0
}
{ name: this.$t('setCourse.t1'), score: 0 },
{ name: this.$t('setCourse.t2'), score: 0 },
{ name: this.$t('setCourse.t3'), score: 0 }
]
},
{
title: '必修课程',
title: this.$t('setCourse.tit2'),
item: [
{
name: '财务管理',
score: 3
},
{
name: '资产定价和证券估值',
score: 3
},
{
name: '决策过程中的管理会计信息',
score: 3
},
{
name: '金融风险管理',
score: 3
},
{
name: '企业估值与投资',
score: 3
},
{
name: '证券和投资分析',
score: 3
},
{
name: '国际金融管理',
score: 3
},
{
name: '高级衍生品和固定收益模型',
score: 3
},
{
name: '金融市场策略',
score: 3
},
{
name: '行为金融学',
score: 1.5
},
{
name: '国际货币体系',
score: 1.5
},
{
name: '毕业论文/毕业设计',
score: 1.5
}
{ name: this.$t('setCourse.t4'), score: 3 },
{ name: this.$t('setCourse.t5'), score: 3 },
{ name: this.$t('setCourse.t6'), score: 3 },
{ name: this.$t('setCourse.t7'), score: 3 },
{ name: this.$t('setCourse.t8'), score: 3 },
{ name: this.$t('setCourse.t9'), score: 3 },
{ name: this.$t('setCourse.t10'), score: 3 },
{ name: this.$t('setCourse.t11'), score: 3 },
{ name: this.$t('setCourse.t12'), score: 3 },
{ name: this.$t('setCourse.t13'), score: 1.5 },
{ name: this.$t('setCourse.t14'), score: 1.5 },
{ name: this.$t('setCourse.t15'), score: 1.5 }
]
},
{
title: '选修课程',
title: this.$t('setCourse.tit3'),
item: [
{
name: '创业金融系列',
score: 0
},
{
name: '财富管理系列',
score: 0
},
{
name: '企业理财系列',
score: 0
},
{
name: '互联网金融系列',
score: 0
},
{
name: 'ABS系列',
score: 0
},
{
name: '利率市场化系列',
score: 0
},
{
name: '转型与发展：金融科技系列等',
score: 0
}
{ name: this.$t('setCourse.t16'), score: 0 },
{ name: this.$t('setCourse.t17'), score: 0 },
{ name: this.$t('setCourse.t18'), score: 0 },
{ name: this.$t('setCourse.t19'), score: 0 },
{ name: this.$t('setCourse.t20'), score: 0 },
{ name: this.$t('setCourse.t21'), score: 0 },
{ name: this.$t('setCourse.t22'), score: 0 }
]
},
{
title: '美国访学',
title: this.$t('setCourse.tit4'),
item: [
{
name: '机器学习和商业应用',
score: 1.5
},
{
name: '职业发展规划',
score: 0
},
{
name: '毕业典礼',
score: 0
}
{ name: this.$t('setCourse.t23'), score: 1.5 },
{ name: this.$t('setCourse.t24'), score: 0 },
{ name: this.$t('setCourse.t25'), score: 0 }
]
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/about-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/about-banner.png',
slider: [
{
name: '课程设置',
path: '/about/course',
pathActive: ['/about/course']
name: this.$t('menu.courseChild.set'),
path: '/about/course'
},
{
name: '师资力量',
path: '/about/teacher',
pathActive: ['/about/teacher']
name: this.$t('menu.courseChild.teachers'),
path: '/about/teacher'
}
]
}
}
},
mounted() {
mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.course-content-box {
width: 1200px;
margin: 0 auto;
.content-mian {
padding: 106px 141px 110px 96px;
.border-box {
padding: 35px 0 51px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
.item-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
ul {
padding-bottom: 37px;
border-bottom: 1px solid #e6e6e6;
}
&:last-child {
border-bottom: none;
margin-bottom: 0;
.is-pc{
.course-content-box {
width: 1200px;
margin: 0 auto;
.content-mian {
padding: 106px 141px 110px 96px;
.border-box {
padding: 35px 0 51px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
.item-box {
// display: flex;
// justify-content: space-between;
margin-bottom: 40px;
ul {
padding-bottom: 37px;
border-bottom: none;
border-bottom: 1px solid #e6e6e6;
}
}
.title {
font-size: 26px;
font-weight: bold;
line-height: 100%;
color: #aa1941;
}
.right-content {
width: 562px;
li {
height: 32px;
background: #f7f7f7;
display: flex;
align-items: center;
&:nth-child(even) {
background: none;
}
.text {
width: 397px;
padding-left: 30px;
font-size: 16px;
color: #333333;
&:last-child {
border-bottom: none;
margin-bottom: 0;
ul {
padding-bottom: 37px;
border-bottom: none;
}
.score {
font-size: 16px;
color: #424242;
}
.title {
font-size: 26px;
font-weight: bold;
line-height: 100%;
color: #aa1941;
}
.right-content {
width: 562px;
li {
height: 32px;
background: #f7f7f7;
display: flex;
align-items: center;
&:nth-child(even) {
background: none;
}
.text {
width: 397px;
padding-left: 30px;
font-size: 16px;
color: #333333;
}
.score {
font-size: 16px;
color: #424242;
}
}
}
}
......@@ -231,4 +173,43 @@ export default {
}
}
}
.is-h5{
.course-content{
background: #fff;
padding: .38rem .28rem .2rem;
.title{
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #AA1941;
}
ul{
border-top: .01rem solid #E6E6E6;
padding-top: .1rem;
margin-top: .19rem;
margin-bottom: .24rem;
li{
height: .21rem;
box-sizing: border-box;
padding-left: .27rem;
display: flex;
align-items: center;
&:nth-child(odd) {
background: #F7F7F7;
}
.name{
font-size: 0.1rem;
color: #666666;
width: 2.17rem;
font-size: 0.1rem;
color: #666666;
}
.score{
font-size: 0.1rem;
color: #666666;
}
}
}
}
}
</style>
pages/about/teacher.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="teacher-content-box">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="content-box">
<div class="teacher-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.list">
<li :key="cIndex + '='">
<img :src="cItem.image" alt="" />
<div class="name">{{ cItem.name }}</div>
<template v-for="(text, tIndex) in cItem.intr">
<div class="p" :key="tIndex + '=='">{{ text }}</div>
</template>
</li>
</template>
</ul>
<div class="teacher-content-box">
<div class="content-box">
<div class="teacher-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.list">
<li :key="cIndex + '='">
<img :src="cItem.image" alt="" />
<div class="name">{{ cItem.name }}</div>
<div class="p" v-html="cItem.intr"></div>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
......@@ -33,138 +33,187 @@ export default {
return {
teacherList: [
{
title: '美方师资（部分）',
title: this.$t('teachers.tit1'),
list: [
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t1.png',
name: 'Ash Soni',
intr: ['印第安纳大学工商管理博士', 'KELLEY商学院副院长、教授']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t1.png',
name: this.$t('teachers.tea1Name'),
intr: this.$t('teachers.tea1Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t2.png',
name: '杨珺',
intr: ['华盛顿大学金融学博士', '香港中文大学运营管理学博士', 'KELLEY商学院公司治理研究院院长']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t2.png',
name: this.$t('teachers.tea2Name'),
intr: this.$t('teachers.tea2Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t3.png',
name: 'Cathy Bonser-neal',
intr: ['芝加哥大学博士', 'KELLEY商学院金融学副教授']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t3.png',
name: this.$t('teachers.tea3Name'),
intr: this.$t('teachers.tea3Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t4.png',
name: 'Sreeni Kamma',
intr: ['纽约州立大学布法罗分校博士', 'KELLEY商学院金融系主任']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t4.png',
name: this.$t('teachers.tea4Name'),
intr: this.$t('teachers.tea4Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t5.png',
name: 'Dubos J. masson',
intr: ['印第安纳大学金融学博士', 'KELLEY商学院金融系副教授']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t5.png',
name: this.$t('teachers.tea5Name'),
intr: this.$t('teachers.tea5Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t6.png',
name: 'Joe fisher',
intr: ['俄亥俄州立大学博士', 'KELLEY商学院教授']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t6.png',
name: this.$t('teachers.tea6Name'),
intr: this.$t('teachers.tea6Txt')
}
]
},
{
title: '中方师资（部分）',
title: this.$t('teachers.tit2'),
list: [
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t7.png',
name: '肇越',
intr: ['清华五道口经济学博士', '香港致富证券首席经济学家']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t7.png',
name: this.$t('teachers.tea7Name'),
intr: this.$t('teachers.tea7Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t8.png',
name: '梁国忠',
intr: ['复旦大学金融学硕士', '中金甲子投资基金管理有限公司', '董事长兼总经理']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t8.png',
name: this.$t('teachers.tea8Name'),
intr: this.$t('teachers.tea8Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t9.png',
name: '孙明春',
intr: ['斯坦福大学博士', '海通国际首席经济学家']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t9.png',
name: this.$t('teachers.tea9Name'),
intr: this.$t('teachers.tea9Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t10.png',
name: '洪灏',
intr: ['澳大利亚商学院金融系工商管理硕士', '交银国际董事总经理、首席策略师']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t10.png',
name: this.$t('teachers.tea10Name'),
intr: this.$t('teachers.tea10Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t11.png',
name: '王勇',
intr: ['加拿大达尔豪斯大学博士', '国家千人计划专家', '天风证券首席风险官']
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/wangyong.png',
name: this.$t('teachers.tea11Name'),
intr: this.$t('teachers.tea11Txt')
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t12.png',
name: '王鹤菲',
intr: ['斯坦福大学商学院金融学博士', '中国人民大学国际学院金融学教授']
image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t12.png',
name: this.$t('teachers.tea12Name'),
intr: this.$t('teachers.tea12Txt')
}
]
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/about-banner2.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/about-banner2.png',
slider: [
{
name: '课程设置',
path: '/about/course',
pathActive: ['/about/course']
name: this.$t('menu.courseChild.set'),
path: '/about/course'
},
{
name: '师资力量',
path: '/about/teacher',
pathActive: ['/about/teacher']
name: this.$t('menu.courseChild.teachers'),
path: '/about/teacher'
}
]
}
}
},
mounted() {
mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.teacher-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 60px 75px 61px;
.teacher-box {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
li {
width: 180px;
margin-right: 140px;
margin-bottom: 40px;
&:nth-child(3n + 3) {
margin-right: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 18px;
color: #aa1941;
line-height: 100%;
margin-top: 20px;
margin-bottom: 10px;
.is-pc{
.teacher-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 60px 75px 61px;
.teacher-box {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
li {
width: 180px;
margin-right: 140px;
margin-bottom: 40px;
&:nth-child(3n + 3) {
margin-right: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 18px;
color: #aa1941;
line-height: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
.p {
font-size: 14px;
// line-height: 100%;
color: #666666;
white-space: nowrap;
margin-bottom: 5px;
}
}
.p {
font-size: 14px;
line-height: 100%;
color: #666666;
white-space: nowrap;
margin-bottom: 5px;
}
}
}
}
}
.is-h5{
.teacher-content-box {
.content-box {
padding: .3rem .32rem .3rem;
.teacher-box {
.title {
font-size: .14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: .15rem;
li {
width: 1.32rem;
margin-left: .3rem;
margin-bottom: .13rem;
&:nth-child(odd){
margin-left: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 0.14rem;
line-height: 100%;
color: #AA1941;
margin-top: .1rem;
margin-bottom: .03rem;
}
.p {
font-size: 0.1rem;
line-height: 0.13rem;
color: #666666;
margin-top: .03rem;
}
}
}
}
......
pages/alumni/outstanding.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="outstanding">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="alumni">
<h5>KELLEY商学院杰出校友</h5>
<ul class="card-list">
<li v-for="(item, index) in alumniList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.post" :key="it">{{ it }}</p>
</div>
</li>
</ul>
<h5>紫荆-KELLEY优秀学生</h5>
<ul class="card-list">
<li v-for="item in studentList" :key="item.name">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.education" :key="it">{{ it }}</p>
<div v-for="it in item.post" :key="it">{{ it }}</div>
</div>
</li>
</ul>
<div class="outstanding">
<div class="alumni">
<h5>{{ $t('outstanding.title1') }}</h5>
<ul class="card-list">
<li v-for="(item, index) in alumniList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.post" :key="it">{{ it }}</p>
</div>
</li>
</ul>
<h5>{{ $t('outstanding.title2') }}</h5>
<ul class="card-list">
<li v-for="item in studentList" :key="item.name">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.education" :key="it">{{ it }}</p>
<div v-for="it in item.post" :key="it">{{ it }}</div>
</div>
</li>
</ul>
</div>
</div>
</app-frame>
</div>
......@@ -42,181 +44,259 @@ export default {
return {
alumniList: [
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-01.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-01.png',
name: "Paul H. O'Neill",
post: ['前美国财政部长']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-02.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-02.png',
name: 'Alan B. Graf',
post: ['Fedex首席财务官']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-03.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-03.png',
name: 'John Chambers',
post: ['Cisco首席执行官']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-04.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-04.png',
name: 'Ali Tuet',
post: ['香港ESG控股集团主席总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-05.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-05.png',
name: 'Jimmy Wales',
post: ['Jimmy Wales']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-06.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-06.png',
name: 'Mark Cuban',
post: ['美国知名投资人', 'NBA达拉斯独行侠球队老板']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-07.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-07.png',
name: 'Peter Wong',
post: ['汇丰银行', '亚洲区总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-08.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-08.png',
name: "Paul H. O'Neill",
post: ['美国 Whirlpool', '亚洲副总裁']
}
],
studentList: [
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-01.png',
name: '张彧',
education: ['Xavier University', '工商管理硕士'],
post: ['希尔顿酒店管理有限公司', '财务部副总裁']
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-mtq.png',
name: '马铁群',
education: ['斯坦福大学', '管理科学与工程硕士'],
post: ['益盟股份有限公司', '执行总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-02.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-02.png',
name: '赵旭娜',
education: ['约翰霍普金斯大学', '博士后'],
education: ['北京大学医学物理博士', '约翰霍普金斯大学博士后'],
post: ['瓦里安医疗系统公司（美国）', '大中华区高级临床战略经理']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-03.png',
name: '刘育弘',
education: ['中山大学', '高级工商管理硕士'],
post: ['广州快塑电子商务有限公司', '执行总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-04.png',
name: '刘丹',
education: ['香港大学李嘉诚医学院', '医学影像学博士'],
post: ['华润医疗直属医院', '运营院长']
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-08.png',
name: '虞东',
education: ['北京大学光华管理学院', '高级工商管理硕士'],
post: ['西安纸贵互联网科技有限公司', '董事合伙人首席风控官']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-05.png',
name: '刘志诚',
education: ['香港理工大学', '软件科技及工商管理双硕士'],
post: ['乐信集团信息安全中心', '总监']
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-01.png',
name: '张彧',
education: ['泽维尔大学', '工商管理硕士'],
post: ['希尔顿酒店管理有限公司', '财务部副总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-06.png',
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-06.png',
name: '孙红平',
education: ['广东外语外贸大学', '翻译硕士'],
post: ['美国IPO直通车公司', '管理合伙人']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-07.png',
name: '侍文',
education: ['The University of Manchester', '工商管理硕士'],
post: ['苏州诗诗珠宝有限公司', '总经理']
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/sgql.png',
name: '上官利青',
education: ['清华大学', '微电子学硕士'],
post: ['中航信托有限公司', '家族信托事业部副总经理']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-08.png',
name: '虞东',
education: ['北京大学光华管理学院', '高级工商管理硕士'],
post: ['西安纸贵互联网科技有限公司', '董事合伙人首席风控官']
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-04.png',
name: '刘丹',
education: ['香港大学李嘉诚医学院', '医学影像学博士'],
post: ['华润医疗直属医院', '运营院长']
},
{
avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-03.png',
name: '刘育弘',
education: ['中山大学', '高级工商管理硕士'],
post: ['广州快塑电子商务有限公司', '执行总裁']
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-banner.png',
slider: [
{
name: '杰出校友',
path: '/alumni/outstanding',
pathActive: ['/alumni/outstanding']
name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding'
},
{
name: '校友分享',
path: '/alumni/sharing',
pathActive: ['/alumni/sharing']
name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
.is-pc{
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
.text {
margin-top: 72px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
.text {
margin-top: 72px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
}
div {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
}
div {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
}
}
}
li:nth-child(even) {
margin-right: 0;
}
}
.is-h5{
.alumni {
padding: 0 .16rem .35rem;
h5 {
font-size: .14rem;
font-weight: 700;
line-height: 100%;
padding: .2rem 0;
color: #333;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
.card-list {
margin-bottom: .15rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
box-sizing: border-box;
width: 1.68rem;
background: #ebebeb;
padding: .11rem .05rem;
display: flex;
margin-bottom: .06rem;
margin-left: .06rem;
&:nth-child(odd){
margin-left: 0;
}
.avatar {
// width: 204px;
// height: 100%;
img {
width: .63rem;
height: .63rem;
display: block;
}
}
.text {
// margin-top: .3rem;
margin-left: .1rem;
h6 {
font-size: .11rem;
color: #aa1941;
font-weight: 700;
white-space: nowrap;
}
p {
font-size: .1rem;
line-height: .15rem;
color: #666;
}
div {
font-size: .07rem;
line-height: .15rem;
color: #666;
margin-top: .02rem;
}
}
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
}
}
}
......
pages/alumni/sharing/_id.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="detail-content-box">
<app-frame :data="frameParams">
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
......@@ -11,8 +11,8 @@
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</app-frame>
</div>
</div>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -28,14 +28,12 @@ export default {
frameParams: {
slider: [
{
name: '杰出校友',
path: '/alumni/outstanding',
pathActive: ['/alumni/outstanding']
name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding'
},
{
name: '校友分享',
path: '/alumni/sharing',
pathActive: ['/alumni/sharing']
name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing'
}
]
},
......
pages/alumni/sharing/index.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="sharing">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-sharing-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/alumni-sharing-banner.png',
slider: [
{
name: '杰出校友',
name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding',
pathActive: ['/alumni/outstanding']
},
{
name: '校友分享',
name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing',
pathActive: ['/alumni/sharing']
}
]
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'alumni-sharing-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
},
to(item) {
return `/alumni/sharing/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.news-item {
padding-top: 43px;
}
</style>
\ No newline at end of file
pages/apply/problem.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="problem-content-box">
<app-frame :data="frameParams">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="problem-content-box">
<div class="content-box">
<template v-for="(item, index) in problemList">
<div class="problem-item-box" :key="index">
......@@ -16,8 +17,9 @@
</div>
</template>
</div>
</app-frame>
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -30,100 +32,134 @@ export default {
return {
problemList: [
{
title: '申请和面试相关问题',
title: this.$t('problem.item1Tit'),
problem: [
{
tit: 'Q:如何申请美国印第安纳大学Kelley商学院金融学硕士？大概流程是什么？',
answer: 'A: 请参考网页招生简章。'
tit: this.$t('problem.item1problem1'),
answer: this.$t('problem.item1answer1')
},
{
tit: 'Q:面试多少人？录取多少人？率取比率是多少？',
answer: 'A: 本项目采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。'
tit: this.$t('problem.item1problem2'),
answer: this.$t('problem.item1answer2')
},
{
tit: 'Q:是否要求考生的工作经验必须属于金融行业？',
answer:
'A: 本项目对考生的行业没有特殊要求。只要是有志于从事金融行业和相关工作的考生都可以报考本项目。录取为综合考评，工作背景是综合评价时需要参考的一部分信息。'
tit: this.$t('problem.item1problem3'),
answer: this.$t('problem.item1answer3')
}
]
},
{
title: '报考资格相关问题',
title: this.$t('problem.item2Tit'),
problem: [
{
tit: 'Q:大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
answer: 'A: 可以报考，只要获得本科学位证书，按照本科毕业生身份报考即可。'
tit: this.$t('problem.item2problem1'),
answer: this.$t('problem.item2answer1')
},
{
tit: 'Q:成人教育的本科毕业生（无学位证）能否报考？',
answer: 'A: 不可以。需要获得本科学位证书才能符合相应报考条件。'
tit: this.$t('problem.item2problem2'),
answer: this.$t('problem.item2answer2')
}
]
},
{
title: '费用相关问题',
title: this.$t('problem.item3Tit'),
problem: [
{
tit: 'Q:美国印第安纳大学Kelley商学院金融学硕士项目学费是多少？ 可以分期吗？',
answer: 'A: 目前本项目的学费为24.98万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。'
tit: this.$t('problem.item3problem1'),
answer: this.$t('problem.item3answer1')
}
]
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/apply-banner3.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/apply-banner3.png',
slider: [
{
name: '有关申请',
path: '/apply/relevant',
pathActive: ['/apply/relevant']
name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant'
},
{
name: '费用资助',
path: '/apply/support',
pathActive: ['/apply/support']
name: this.$t('menu.recruitChild.cost'),
path: '/apply/support'
},
{
name: '常见问题',
path: '/apply/problem',
pathActive: ['/apply/problem']
name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.problem-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 54px 104px 90px 87px;
.problem-item-box {
margin-bottom: 80px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: 30px;
li {
width: 808px;
margin-bottom: 15px;
.pro-tit {
font-size: 16px;
font-weight: bold;
line-height: 32px;
color: #666666;
border-bottom: 1px solid #e6e6e6;
.is-pc{
.problem-content-box {
.content-box {
padding: 54px 104px 90px 87px;
.problem-item-box {
margin-bottom: 80px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: 30px;
li {
margin-bottom: 15px;
.pro-tit {
font-size: 16px;
font-weight: bold;
line-height: 32px;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
.answer {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
.answer {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
}
}
}
.is-h5{
.problem-content-box {
.content-box {
padding: .22rem;
.problem-item-box {
margin-bottom: .4rem;
.title {
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: .15rem;
li {
margin-bottom: .08rem;
.pro-tit {
font-size: .12rem;
font-weight: bold;
line-height: .17rem;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
.answer {
font-size: .12rem;
line-height: .17rem;
color: #424242;
}
}
}
}
......
pages/apply/relevant.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="rele-content-box">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="content-box">
<div class="text-content">
<div class="title">申请条件</div>
<div class="con-txt">已获得本科或以上学位<br />有一定工作经验<br />托福79分/雅思6分以上</div>
<div class="title mar-t55">招生对象</div>
<div class="con-txt">
证劵、基金、银行、财富管理等相关行业人士<br />
金融相关行业有丰富工作经验的专业人士<br />
所从事的金融业务具有国际化需求的人士<br />
其他对本项目有兴趣并自身优异者
<div class="rele-content-box">
<div class="content-box">
<div class="text-content">
<div class="title">{{ $t('apply.con1Tit') }}</div>
<div class="con-txt" v-html="$t('apply.con1Txt')"></div>
<div class="title mar-t55">{{ $t('apply.con2Tit') }}</div>
<div class="con-txt" v-html="$t('apply.con2Txt')"></div>
</div>
<img src="https://webapp-pub.ezijing.com/project/kelley/apply-img.png" alt="" />
</div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/apply-img.png" alt="" />
</div>
</app-frame>
</div>
......@@ -29,57 +26,90 @@ export default {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/apply-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/apply-banner.png',
slider: [
{
name: '有关申请',
path: '/apply/relevant',
pathActive: ['/apply/relevant']
name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant'
},
{
name: '费用资助',
path: '/apply/support',
pathActive: ['/apply/support']
name: this.$t('menu.recruitChild.cost'),
path: '/apply/support'
},
{
name: '常见问题',
path: '/apply/problem',
pathActive: ['/apply/problem']
name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.rele-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
img {
width: 900px;
margin: 58px auto 0;
display: block;
}
padding-top: 46px;
padding-bottom: 106px;
.text-content {
padding-left: 87px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: 55px;
.is-pc{
.rele-content-box {
.content-box {
img {
width: 900px;
margin: 58px auto 0;
display: block;
}
padding-top: 46px;
padding-bottom: 106px;
.text-content {
padding-left: 87px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: 55px;
}
}
.con-txt {
font-size: 16px;
line-height: 34px;
color: #424242;
margin-top: 20px;
}
}
.con-txt {
font-size: 16px;
line-height: 34px;
color: #424242;
margin-top: 20px;
}
}
}
.is-h5{
.rele-content-box{
background: #fff;
padding: .3rem .2rem;
.content-box {
img {
width: 100%;
display: block;
}
padding-bottom: .5rem;
.text-content {
margin-bottom: .4rem;
.title {
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: .25rem;
}
}
.con-txt {
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
padding-top: .14rem;
}
}
}
}
......
pages/apply/support.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="rele-content-box">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="content-box">
<div class="text-content">
<div class="title">学费</div>
<div class="con-txt">
本项目学费24.98万元，<br />
由学生向清华控股旗下紫荆教育一次性缴纳。
</div>
<div class="title mar-t55">贷款</div>
<div class="con-txt">
1、就读本项目的学生，可以申请多家金融机构的贷款服务。<br />
2、具体信息会在学生获得正式录取资格后公布。<br />
3、清华控股旗下紫荆教育不为学员担保贷款，不承担催款义务
<div class="rele-content-box">
<div class="content-box">
<div class="text-content">
<div class="title">{{ $t('cost.con1Tit') }}</div>
<div class="con-txt" v-html="$t('cost.con1Txt')"></div>
<div class="title mar-t55">{{ $t('cost.con2Tit') }}</div>
<div class="con-txt" v-html="$t('cost.con2Txt')"></div>
</div>
</div>
</div>
......@@ -30,52 +25,80 @@ export default {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/apply-banner2.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/apply-banner2.png',
slider: [
{
name: '有关申请',
path: '/apply/relevant',
pathActive: ['/apply/relevant']
name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant'
},
{
name: '费用资助',
path: '/apply/support',
pathActive: ['/apply/support']
name: this.$t('menu.recruitChild.cost'),
path: '/apply/support'
},
{
name: '常见问题',
path: '/apply/problem',
pathActive: ['/apply/problem']
name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.rele-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding-top: 46px;
padding-bottom: 106px;
.text-content {
padding-left: 87px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: 55px;
.is-pc{
.rele-content-box {
.content-box {
padding-top: 46px;
padding-bottom: 106px;
.text-content {
padding-left: 87px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: 55px;
}
}
.con-txt {
font-size: 16px;
line-height: 34px;
color: #424242;
margin-top: 20px;
}
}
.con-txt {
font-size: 16px;
line-height: 34px;
color: #424242;
margin-top: 20px;
}
}
}
.is-h5{
.rele-content-box{
background: #fff;
padding: .3rem .2rem;
.content-box {
.text-content {
padding-left: .2rem;
.title {
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
&.mar-t55 {
margin-top: .25rem;
}
}
.con-txt {
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
padding-top: .14rem;
}
}
}
}
......
pages/index.vue
浏览文件 @ 6fb0d7cd
......@@ -56,6 +56,6 @@ export default {
<style>
.container {
width: 100%;
padding-bottom: 100px;
padding-bottom: 50px;
}
</style>
pages/news/hot/_id.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="detail-content-box">
<app-frame :data="frameParams">
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
......@@ -11,8 +11,8 @@
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</app-frame>
</div>
</div>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -28,14 +28,12 @@ export default {
frameParams: {
slider: [
{
name: '热点新闻',
path: '/news/hot',
pathActive: ['/news/hot', '/news/hot-detail']
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: '教授采访',
path: '/news/interview',
pathActive: ['/news/interview', '/news/interview-detail']
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
}
]
},
......@@ -59,7 +57,6 @@ export default {
</script>
<style lang="scss" scoped>
.detail-content-box {
// width: 1000px;
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
......
pages/news/hot/index.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="hot-content-box">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/news-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/news-banner.png',
slider: [
{
name: '热点新闻',
path: '/news/hot',
pathActive: ['/news/hot', '/news/hot-detail']
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: '教授采访',
path: '/news/interview',
pathActive: ['/news/interview', '/news/interview-detail']
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
}
]
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'news-hot-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
},
to(item) {
return `/news/hot/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.hot-content-box {
width: 1200px;
margin: 0 auto;
.news-item {
padding-top: 43px;
}
}
</style>
</script>
\ No newline at end of file
pages/news/interview/_id.vue
浏览文件 @ 6fb0d7cd
......@@ -29,14 +29,12 @@ export default {
frameParams: {
slider: [
{
name: '热点新闻',
path: '/news/hot',
pathActive: ['/news/hot', '/news/hot-detail']
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: '教授采访',
path: '/news/interview',
pathActive: ['/news/interview', '/news/interview-detail']
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
}
]
},
......
pages/news/interview/index.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="hot-content-box">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/news-banner2.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/news-banner2.png',
slider: [
{
name: '热点新闻',
path: '/news/hot',
pathActive: ['/news/hot']
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: '教授采访',
path: '/news/interview',
pathActive: ['/news/interview']
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
}
]
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'news-interview-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
},
to(item) {
return `/news/interview/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.hot-content-box {
width: 1200px;
margin: 0 auto;
.news-item {
padding-top: 43px;
}
}
</style>
pages/project-intro/bg.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="project-bg">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="project-bg-main">
<div class="content-mian" v-if="isMobile">
<tab-content @tabChange="tabChange"></tab-content>
<div class="content-mod1" v-if="showIndex === 0">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png" class="main-banner">
<div class="content-txt">
<div class="tit">{{ $t('bg.brief') }}</div>
<div class="text">
<div class="p" v-html="$t('bg.con1Txt')"></div>
</div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt="">
</div>
</div>
<div class="content-mod2" v-if="showIndex === 1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod2-banner.png" class="main-banner">
<div class="content-txt">
<div class="p" v-html="$t('bg.con2Txt')"></div>
</div>
</div>
<div class="content-mod2" v-if="showIndex === 2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod3-banner.png" class="main-banner">
<div class="content-txt">
<div class="p" v-html="$t('bg.con3Txt')"></div>
</div>
</div>
</div>
<div class="project-bg-main" v-else>
<ul class="tabs">
<li
v-for="item in list"
......@@ -14,18 +39,11 @@
</ul>
<div class="zjjy" v-if="tabActive === 'zjjy'">
<div class="sub-banner">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg-zjjy.png" alt="" />
</div>
<div class="text">
紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，由清华控股有限公司于2015年以清华大学五道口金融学院相关知识产权创设而成。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。<br />
紫荆教育以教育为本、以科技赋能、以专业化为基础，以国际化为目标，提供高端国际学位教育、职业教育和在线教育解决方案，为我国培养高质量的国际化人才和产业人才。
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png" />
</div>
<div class="text" v-html="$t('bg.con1Txt')"></div>
<div class="tags">
<div
:class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }"
v-for="(item, index) in tags"
:key="item.text"
>
<div :class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }" v-for="(item, index) in tags" :key="item.text">
<div class="tag-item-inner">
<p>
<span>{{ item.num }}</span
......@@ -39,172 +57,221 @@
</div>
<div class="kelley" v-if="tabActive === 'kelley'">
<div class="sub-banner">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg-kelley.png"
alt=""
/>
</div>
<div class="text">
<p>
印第安纳大学伯明顿分校是美国公立常春藤名校，成立于1820年，有近200年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。
</p>
<p>
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有近100年历史。
</p>
<p>
Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance.
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The
Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。
</p>
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
</div>
<div class="text" v-html="$t('bg.con2Txt')"></div>
</div>
<div class="lhbx" v-if="tabActive === 'lhbx'">
<div class="sub-banner">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg-lhbx.png" alt="" />
</div>
<div class="text">
<p>
本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。
</p>
<p>
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。
</p>
<p>
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。
</p>
<p>
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源，打造最原汁原味、最接近实战的金融学硕士学位课程。
</p>
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
</div>
<div class="text" v-html="$t('bg.con3Txt')"></div>
</div>
</div>
</app-frame>
</div>
</template>
<script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default {
layout: 'normal',
components: {
TabNav,
TabContent
},
data() {
return {
showIndex: 0,
tabActive: 'zjjy',
list: [
{ name: 'zjjy', label: '紫荆教育' },
{ name: 'kelley', label: 'KELLEY商学院' },
{ name: 'lhbx', label: '联合办学背景' }
{ name: 'zjjy', label: this.$t('bg.tabBtn1') },
{ name: 'kelley', label: this.$t('bg.tabBtn2') },
{ name: 'lhbx', label: this.$t('bg.tabBtn3') }
],
tags: [
{ num: 12, unit: '所', text: '国际合作院校' },
{ num: 522, unit: '门', text: '线上课程' },
{ num: 600, unit: '+', text: '金融机构/协会/政府/学校' },
{ num: 700, unit: '+', text: '国内外师资团队' },
{ num: 1000, unit: '+', text: '学术直播课' },
{ num: 4800, unit: '+', text: '总研发课时' },
{ num: 5000, unit: '+', text: '学位学员' },
{ num: 500, unit: '万+', text: '人次学习' }
{ num: 12, unit: this.$t('bg.unit1'), text: this.$t('bg.con1ItemT1') },
{ num: 522, unit: this.$t('bg.unit2'), text: this.$t('bg.con1ItemT2') },
{ num: 600, unit: '+', text: this.$t('bg.con1ItemT3') },
{ num: 700, unit: '+', text: this.$t('bg.con1ItemT4') },
{ num: 1000, unit: '+', text: this.$t('bg.con1ItemT5') },
{ num: 4800, unit: '+', text: this.$t('bg.con1ItemT6') },
{ num: 5000, unit: '+', text: this.$t('bg.con1ItemT7') },
{ num: 500, unit: this.$t('bg.unit3'), text: this.$t('bg.con1ItemT8') }
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-bg.png',
slider: [
{
name: '项目背景',
path: '/project-intro/bg',
pathActive: ['/project-intro/bg']
name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg'
},
{
name: '项目特色',
path: '/project-intro/charac',
pathActive: ['/project-intro/charac']
name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac'
},
{
name: '证书授予',
path: '/project-intro/certificate',
pathActive: ['/project-intro/certificate']
name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate'
}
]
}
}
},
methods: {
tabChange(n) {
this.showIndex = n
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.project-bg-main {
padding: 42px 64px 50px;
.tabs {
margin-top: 42px;
display: flex;
justify-content: space-between;
li {
background: #fbfbfb;
width: 32%;
height: 83px;
line-height: 83px;
border-top: 8px solid #fbfbfb;
font-size: 26px;
font-family: Source Han Sans CN;
color: #333;
text-align: center;
cursor: pointer;
.is-pc{
.project-bg-main {
padding: 42px 64px 50px;
.tabs {
margin-top: 42px;
display: flex;
justify-content: space-between;
li {
background: #fbfbfb;
width: 32%;
height: 83px;
line-height: 83px;
border-top: 8px solid #fbfbfb;
font-size: 26px;
font-family: Source Han Sans CN;
color: #333;
text-align: center;
cursor: pointer;
}
li.is-active {
border-color: #aa1941;
color: #aa1941;
background-color: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
}
}
.sub-banner {
margin-top: 18px;
height: 302px;
img {
width: 100%;
height: 100%;
}
}
li.is-active {
border-color: #aa1941;
color: #aa1941;
background-color: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
.text {
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 32px;
color: #424242;
letter-spacing: 1px;
margin-top: 40px;
}
}
.sub-banner {
margin-top: 18px;
height: 302px;
img {
width: 100%;
height: 100%;
.tags {
width: 780px;
margin: 40px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: space-between;
.tag-item {
width: 180px;
margin-bottom: 10px;
.tag-item-inner {
display: inline-block;
text-align: center;
width: calc(100% - 17px);
p {
font-size: 20px;
color: #aa1941;
span {
font-size: 28px;
font-weight: bold;
}
}
> span {
font-size: 16px;
line-height: 34px;
color: #666666;
}
}
.el-divider {
height: 100%;
float: right;
}
}
.tag-item.big {
width: 240px;
}
}
}
.text {
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 32px;
color: #424242;
letter-spacing: 1px;
margin-top: 40px;
}
::v-deep{
// .is-h5{
.main-page-content{
background-color: #eee !important;
// }
}
.tags {
width: 780px;
margin: 40px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: space-between;
.tag-item {
width: 180px;
margin-bottom: 10px;
.tag-item-inner {
display: inline-block;
text-align: center;
width: calc(100% - 17px);
p {
font-size: 20px;
color: #aa1941;
span {
font-size: 28px;
font-weight: bold;
}
.is-h5{
.content-mian{
padding: 0 .16rem;
.content-mod1{
padding-top: .18rem;
img{
width: 100%;
display: block;
}
.content-txt{
background: #fff;
padding: 0 .16rem .42rem;
margin-bottom: .36rem;
.tit{
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding-top: .23rem;
padding-bottom: .1rem;
}
.text{
.p{
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
}
}
> span {
font-size: 16px;
line-height: 34px;
color: #666666;
img{
width: 2.59rem;
margin-left: .08rem;
margin-top: .27rem;
display: block;
}
}
.el-divider {
height: 100%;
float: right;
}
}
.tag-item.big {
width: 240px;
.content-mod2{
margin-top: .18rem;
background: #fff;
img{
width: 100%;
}
.content-txt{
background: #fff;
padding: 0 .16rem .42rem;
margin-bottom: .36rem;
.p{
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
margin-top: .35rem;
}
}
}
}
}
......
pages/project-intro/certificate.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="certificate">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="certificate-main">
<div class="certificate">
<div class="checkbox">
<p><i></i>修满33个学分</p>
<p><i></i>完成毕业报告</p>
<p><i></i>{{ $t('cert.txt1') }}</p>
<p><i></i>{{ $t('cert.txt2') }}</p>
</div>
<p class="text">达到毕业条件的学员将被授予美国印第安纳大学KELLEY商学院金融硕士学位</p>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-certificate-pic.png"
alt=""
/>
<p class="certificate-title">KELLEY商学院学位证书</p>
<p class="certificate-des">*本学位和美国本校生所获学位相同</p>
<p class="text">{{ $t('cert.txt3') }}</p>
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png" />
<p class="certificate-title">{{ $t('cert.txt4') }}</p>
<p class="certificate-des">{{ $t('cert.txt5') }}</p>
</div>
</app-frame>
</div>
......@@ -23,85 +20,139 @@ export default {
data() {
return {
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-certificate-banner.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-banner.png',
slider: [
{
name: '项目背景',
path: '/project-intro/bg',
pathActive: ['/project-intro/bg']
name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg'
},
{
name: '项目特色',
path: '/project-intro/charac',
pathActive: ['/project-intro/charac']
name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac'
},
{
name: '证书授予',
path: '/project-intro/certificate',
pathActive: ['/project-intro/certificate']
name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.certificate-main {
padding: 40px;
text-align: center;
.checkbox {
display: flex;
width: 450px;
margin: 0 auto;
p {
width: 50%;
.is-pc{
.certificate {
padding: 40px;
text-align: center;
.checkbox {
display: flex;
width: 450px;
margin: 0 auto;
p {
width: 50%;
text-align: center;
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 34px;
color: #424242;
i {
display: inline-block;
width: 22px;
height: 22px;
background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
background-size: 22px 22px;
margin-right: 10px;
vertical-align: middle;
}
}
}
.text {
text-align: center;
font-size: 22px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
font-weight: 400;
line-height: 34px;
color: #424242;
i {
display: inline-block;
width: 22px;
height: 22px;
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-certificate-icon.png');
background-size: 22px 22px;
margin-right: 10px;
vertical-align: middle;
}
margin-top: 40px;
}
img {
display: block;
width: 376px;
height: 291px;
margin: 40px auto;
}
.certificate-title {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #424242;
margin-top: 26px;
}
.certificate-des {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #aa1941;
}
}
.text {
}
.is-h5{
.certificate {
padding: .3rem .52rem;
text-align: center;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #424242;
margin-top: 40px;
}
img {
display: block;
width: 376px;
height: 291px;
margin: 40px auto;
}
.certificate-title {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #424242;
margin-top: 26px;
}
.certificate-des {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #aa1941;
.checkbox {
display: flex;
// width: 450px;
margin: 0 auto;
p {
width: 50%;
text-align: center;
// font-size: .12rem;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: .17rem;
color: #424242;
i {
display: inline-block;
width: .18rem;
height: .18rem;
background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
background-size: .18rem .18rem;
margin-right: .05rem;
vertical-align: middle;
}
}
}
.text {
text-align: center;
font-size: .12rem;
color: #424242;
margin-top: .2rem;
}
img {
display: block;
width: 100%;
display: block;
// height: 291px;
margin: .2rem auto;
}
.certificate-title {
font-size: .12rem;
color: #424242;
margin-top: .13rem;
}
.certificate-des {
color: #aa1941;
}
}
}
</style>
\ No newline at end of file
pages/project-intro/charac.vue
浏览文件 @ 6fb0d7cd
<template>
<div class="charac">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<ul class="card">
<li v-for="item in list" :key="item.title">
......@@ -22,84 +22,123 @@ export default {
return {
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-charac-icon1.png',
title: '线上线下结合灵活的授课学习方式',
texts: ['线上+线下教学模式', '在职学习、无需出国、入读名校', '最短15个月最长5年拿到学位']
img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon1.png',
title: this.$t('feature.item1Tit'),
texts: [this.$t('feature.item1Txt1'), this.$t('feature.item1Txt2'), this.$t('feature.item1Txt3')]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-charac-icon2.png',
title: '高性价比享超高品质教学服务体验',
texts: ['专业金融在线教育品牌', '无需联考、快速入门的学习模式', '全方位的金融职业教育课程体系']
img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon2.png',
title: this.$t('feature.item2Tit'),
texts: [this.$t('feature.item2Txt1'), this.$t('feature.item2Txt2'), this.$t('feature.item2Txt3')]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-charac-icon3.png',
title: '国际视野结合中国本土的实践课程',
texts: [
'先修课程+必修课程+选修课程+美国访学',
'全球排名顶尖师资+中国金融界权威专家',
'多次被 U.S. News & World Report评为全美第一'
]
img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon3.png',
title: this.$t('feature.item3Tit'),
texts: [this.$t('feature.item3Txt1'), this.$t('feature.item3Txt2'), this.$t('feature.item3Txt3')]
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-charac.png',
banner: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac.png',
slider: [
{
name: '项目背景',
path: '/project-intro/bg',
pathActive: ['/project-intro/bg']
name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg'
},
{
name: '项目特色',
path: '/project-intro/charac',
pathActive: ['/project-intro/charac']
name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac'
},
{
name: '证书授予',
path: '/project-intro/certificate',
pathActive: ['/project-intro/certificate']
name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate'
}
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.card {
width: 763px;
margin: 0 auto 0;
padding: 80px 0 30px;
li {
height: 205px;
background: #f9f8f8;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
margin-bottom: 50px;
display: flex;
.left {
width: 212px;
// background:#fcfcfc;
img {
width: 120px;
height: 120px;
margin: 43px 0 0 47px;
.is-pc{
.card {
width: 763px;
margin: 0 auto 0;
padding: 80px 0 30px;
li {
height: 205px;
background: #f9f8f8;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
margin-bottom: 50px;
display: flex;
.left {
width: 212px;
// background:#fcfcfc;
img {
width: 120px;
height: 120px;
margin: 43px 0 0 47px;
}
}
.right {
width: calc(100% - 212px);
padding-top: 20px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 44px;
color: #333333;
}
p {
color: #424242;
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 36px;
}
}
}
.right {
width: calc(100% - 212px);
padding-top: 20px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 44px;
color: #333333;
}
}
.is-h5{
.card {
background: #fff;
// padding: .24rem .15rem .56rem;
li {
background: #f9f8f8;
box-shadow: 0 0 0 rgb(0 0 0 / 9%);
margin-bottom: .16rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding: .16rem .14rem .1rem;
.left {
img {
width: .72rem;
height: .72rem;
display: block;
}
}
p {
color: #424242;
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 36px;
.right {
margin-left: .23rem;
h5 {
font-size: .12rem;
font-weight: 700;
line-height: 100%;
color: #333;
margin-bottom: .16rem;
}
p {
font-size: .1rem;
font-family: Source Han Sans CN;
line-height: 100%;
color: #424242;
margin-bottom: .1rem;
}
}
}
}
......
pages/project-intro/components/TabContent.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<ul class="tab-content">
<li
v-for="(item, index) in items"
:key="index"
:class="activeIndex === index && 'active'"
@click="tabChange(index)"
>
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [this.$t('bg.tabBtn1'), this.$t('bg.tabBtn2'), this.$t('bg.tabBtn3')],
activeIndex: 0
}
},
methods: {
tabChange(n) {
this.activeIndex = n
this.$emit('tabChange', n)
}
}
}
</script>
<style lang="scss" scoped>
.tab-content{
padding-top: .2rem;
display: flex;
justify-content: space-between;
li{
width: 1.1rem;
height: 0.75rem;
line-height: .75rem;
background: #FFFFFF;
text-align: center;
font-size: 0.13rem;
font-weight: bold;
color: #333333;
position: relative;
&.active{
color: #AA1941;
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.04rem;
background: #AA1941
}
}
}
}
</style>
pages/project-intro/components/TabNav.vue 0 → 100644
浏览文件 @ 6fb0d7cd
<template>
<tab-nav :list="list" v-bind="$attrs"></tab-nav>
</template>
<script>
import TabNav from '@/components/base/h5/TabNav'
export default {
components: { TabNav },
data() {
return {
list: [
{ name: this.$t('menu.projectChild.bg'), path: '/project/bg', value: '1' },
{ name: this.$t('menu.projectChild.feature'), path: '/project/charac', value: '2' },
{ name: this.$t('menu.projectChild.cert'), path: '/project/certificate', value: '3' }
]
}
}
}
</script>
<style>
</style>
plugins/vant.js 0 → 100644
浏览文件 @ 6fb0d7cd
import Vue from 'vue'
import Vant from 'vant'
Vue.use(Vant)
store/index.js
浏览文件 @ 6fb0d7cd
import { getUser, logout } from '@/api/my'
export const state = () => ({
user: {}
user: {},
isMobile: false,
searchVisible: false,
menuVisible: false
})
export const mutations = {
......@@ -9,6 +12,15 @@ export const mutations = {
},
removeUser(state) {
state.user = {}
},
setIsMobile(state, isMobile) {
state.isMobile = isMobile
},
toggleSearch(state, visible) {
state.searchVisible = visible
},
toggleMenu(state, visible) {
state.menuVisible = visible
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论