Skip to content

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

Merge branch 'kelley-h5' into sofia

# Conflicts: # components/home/commonProblem.vue # components/home/presence.vue # components/home/projectFeatures.vue # components/home/schoolRanking.vue # components/layout/pc/Head.vue
上级 370cc272 5057a4d1
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 2780 行增加 和 711 行删除
.DS_Store
浏览文件 @ 7895d935
No preview for this file type
.gitignore
浏览文件 @ 7895d935
...@@ -88,3 +88,4 @@ sw.* ...@@ -88,3 +88,4 @@ sw.*
# Vim swap files # Vim swap files
*.swp *.swp
.DS_Store
api/index.js
浏览文件 @ 7895d935
...@@ -30,3 +30,24 @@ export function checkCode(params) { ...@@ -30,3 +30,24 @@ export function checkCode(params) {
export function postNes(data) { export function postNes(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', 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
浏览文件 @ 7895d935
<!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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<template> <template>
<div class="link-content"> <div class="app-link">
<template v-if="item.news"> <!-- 外部链接跳转 -->
<a <a :href="href" :target="target" v-if="href"><slot /></a>
:target="item.news.data.uri !== '' ? '_blank' : '_self'" <!-- 站内跳转 -->
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`"> <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
<slot /> <!-- 事件 -->
</a> <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
</template> <template v-else><slot /></template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { item: { type: Object } } name: 'Link',
props: {
data: { type: Object, default: () => ({}) },
to: [String, Object, Function],
target: { type: String, default: '_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> </script>
<style lang="scss" scoped>
.link-content{
height: 100%;
}
</style>
components/appFrame.vue
浏览文件 @ 7895d935
<template> <template>
<div class="frame-content-box"> <div class="main-page">
<ul class="tab-content"> <ul class="main-page-nav">
<li <li v-for="(item, index) in data.slider" :key="index" :class="{ 'is-active': isAcitve(item) }">
v-for="(item, index) in data.slider" <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
:class="item.pathActive.findIndex(path => {
return $route.path.includes(path)
}) !== -1 && 'active'"
:key="index"
@click="goPage(item.path)"
>
{{ item.name }}
</li> </li>
</ul> </ul>
<div class="right-content"> <div class="main-page-content">
<img v-if="data.banner" :src="data.banner" alt="" class="banner"> <img v-if="data.banner" :src="data.banner" class="main-page-banner" />
<div class="content-mian"> <div class="main-content-html">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
...@@ -24,75 +17,85 @@ ...@@ -24,75 +17,85 @@
export default { export default {
name: 'appFrame', name: 'appFrame',
props: { props: {
data: { data: { type: Object }
type: Object
}
},
data() {
return {
}
},
mounted() {
}, },
methods: { methods: {
goPage(path) { isAcitve(item) {
this.$router.push({ return this.$route.fullPath.includes(item.path)
path: path
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.frame-content-box{ .is-pc {
.main-page {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 56px 0 100px; padding: 56px 0 100px;
display: flex; display: flex;
justify-content: space-between;
.right-content{
width: 1000px;
.banner{
width: 100%;
display: block;
height: 320px;
} }
.content-mian{ .main-page-nav {
background: #fff;
}
}
.tab-content{
width: 160px; width: 160px;
height: fit-content;
background: #fff; background: #fff;
padding-top: 35px; padding: 35px 0 44px;
padding-bottom: 43px; margin-right: 40px;
li{ align-self: flex-start;
li {
position: relative; position: relative;
width: 100%;
height: 40px; height: 40px;
font-size: 22px; font-size: 22px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
color: #777777; color: #777777;
margin-bottom: 60px;
cursor: pointer; cursor: pointer;
&:last-child{ &.is-active {
margin: 0; color: #aa1941;
} &::after {
&.active{
color: rgba(170, 25, 65, 1);
&::after{
content: ''; content: '';
width: 8px; width: 8px;
height: 40px; height: 40px;
background: rgba(170, 25, 65, 1); background: #aa1941;
position: absolute; position: absolute;
top: 0; top: 0;
left: 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> </style>
\ No newline at end of file
components/base/h5/ApplyForm.vue 0 → 100644
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
</div> </div>
</div> </div>
</div> </div>
<template v-if="!isMobile">
<div class="prev-button"></div> <div class="prev-button"></div>
<div class="next-button"></div> <div class="next-button"></div>
</template>
</div> </div>
</template> </template>
<script> <script>
...@@ -45,6 +47,9 @@ export default { ...@@ -45,6 +47,9 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
mounted() {}, mounted() {},
......
components/home/commonProblem.vue
浏览文件 @ 7895d935
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="common-content-box"> <div class="common-content-box">
<m-title :data="titleParams" class="m-title"/> <card :title="$t('home.problem.title')">
<template #header-aside
><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="content-mian"> <div class="content-mian">
<app-link :item="{ path: '/news/hot' }"> <app-link to="/apply/problem">
<div class="list-box"> <div class="list-box">
<ul> <ul>
<li> <li v-for="(item, index) in problem.itemLeft" :key="index">
<div class="icon"></div> <div class="icon"></div>
<div class="text">索菲亚大学给本项目毕业生颁发的学位证书与在美国颁发的证书有何不同？</div> <div class="text">{{ item }}</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> </li>
</ul> </ul>
<ul> <ul>
<li> <li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div>
<div class="text">如何申请美国索菲亚大学FMBA？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">大概流程是什么？</div>
</li>
<li>
<div class="icon"></div> <div class="icon"></div>
<div class="text">需要提交哪些材料？</div> <div class="text">{{ item }}</div>
</li>
<li>
<div class="icon"></div>
<div class="text">美国索菲亚大学金融方向工商管理硕士的学费是多少？</div>
</li>
<li>
<div class="icon"></div>
<div class="text">学费可以分期吗？</div>
</li> </li>
</ul> </ul>
</div> </div>
</app-link> </app-link>
<div class="msg-box"> <div class="msg-box">
<el-input <el-input type="textarea" placeholder="请输入内容" v-model="textarea"> </el-input>
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</div> <div class="btn">在线留言</div>
</div> </div>
</div> </div>
</card>
</div>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'commonProblem', name: 'commonProblem',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data () { data() {
return { return {
titleParams: { problem: {
name: this.$t('home.problem.title'), itemLeft: [
more: { 'Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？',
path: '/apply/problem' '本项目是上课形式是怎么样？',
} '本项目学制多久？',
'能否顺利毕业拿到证书呢？',
'本项目是在职还是全职？'
],
itemRight: [
'如何申请Kelley商学院金融学硕士？',
'大概流程是什么？',
'需要提交哪些材料？',
'美国印第安纳大学Kelley商学院金融学硕士的学费是多少？',
'学费可以分期吗？'
]
}, },
textarea: '' textarea: ''
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.common-content-box{ .is-pc {
.common-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 77px; padding-top: 77px;
.content-mian{ .content-mian {
padding-top: 50px; padding-top: 50px;
.msg-box{ .msg-box {
padding-top: 40px; padding-top: 40px;
box-sizing: border-box; box-sizing: border-box;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
::v-deep{ ::v-deep {
.el-textarea__inner{ .el-textarea__inner {
background: none; background: none;
resize:none; resize: none;
} }
} }
.btn{ .btn {
width: 136px; width: 136px;
height: 36px; height: 36px;
background: #AA1941; background: #aa1941;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
color: #FFFFFF; color: #ffffff;
margin-left: 57px; margin-left: 57px;
cursor: pointer; cursor: pointer;
} }
} }
.list-box{ .list-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
ul{ ul {
&:nth-child(2){ &:nth-child(2) {
margin-left: 8px; margin-left: 8px;
} }
li{ li {
display: flex; display: flex;
align-items: center; align-items: center;
width: 600px; width: 600px;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
&:nth-child(even){ &:nth-child(even) {
.text{ .text {
background: none; background: none;
} }
} }
.icon{ .icon {
width: 7px; width: 7px;
height: 7px; height: 7px;
background: #AA1941; background: #aa1941;
border-radius: 50%; border-radius: 50%;
} }
.text{ .text {
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
line-height: 25px; line-height: 25px;
color: #666666; color: #666666;
padding-left: 4px; padding-left: 4px;
width: 570px; width: 570px;
background: rgba(153, 153, 153, .2); background: rgba(153, 153, 153, 0.2);
margin-left: 15px; margin-left: 15px;
} }
} }
} }
} }
} }
}
}
.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;
}
}
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;
}
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
components/home/news.vue
浏览文件 @ 7895d935
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="news-content-box"> <div class="news-content-box">
<m-title :data="titleParams" /> <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="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left"> <div class="news-left">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <app-link :data="listData.first" :to="`/news/hot/${listData.first.id}`">
<img :src="listData.first.web_img_uri" alt="" /> <img :src="listData.first.web_img_uri" alt="" />
<div class="mantle-box"> <div class="mantle-box">
<div class="tit">{{ listData.first.title }}</div> <div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div> <div class="con-txt">{{ listData.first.abstract }}</div>
</div> </div>
</app-link> </app-link>
</div> </div>
<ul class="news-right"> <ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index"> <li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<div class="time">{{ formatDate(item.start_time) }}</div> <div class="time">{{ formatDate(item.start_time) }}</div>
<div class="news-r-title">{{ item.title }}</div> <div class="news-r-title">{{ item.title }}</div>
<div class="del">{{ item.abstract }}</div> <div class="del">{{ item.abstract }}</div>
...@@ -21,15 +25,17 @@ ...@@ -21,15 +25,17 @@
</li> </li>
</ul> </ul>
</div> </div>
</card>
</div>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'news', name: 'news',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
async fetch() { async fetch() {
...@@ -42,7 +48,7 @@ export default { ...@@ -42,7 +48,7 @@ export default {
return { return {
data: [], data: [],
titleParams: { titleParams: {
name: this.$t('home.news.title'), name: '最新动态',
more: { more: {
path: '/news/hot' path: '/news/hot'
} }
...@@ -53,6 +59,9 @@ export default { ...@@ -53,6 +59,9 @@ export default {
listData() { listData() {
const [first = {}, ...list] = this.data const [first = {}, ...list] = this.data
return { first, list: list || [] } return { first, list: list || [] }
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
methods: { methods: {
...@@ -65,7 +74,8 @@ export default { ...@@ -65,7 +74,8 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news-content-box { .is-pc {
.news-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 65px; padding-top: 65px;
...@@ -79,7 +89,7 @@ export default { ...@@ -79,7 +89,7 @@ export default {
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 100%; height: 500px;
display: block; display: block;
} }
.mantle-box { .mantle-box {
...@@ -149,5 +159,72 @@ export default { ...@@ -149,5 +159,72 @@ export default {
} }
} }
} }
}
}
.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(8, 8, 8, 0.45);
padding-bottom: 0.14rem;
.con-txt {
font-size: 0.12rem;
font-weight: bold;
line-height: 0.17rem;
color: #ffffff;
padding: 0.14rem 0.32rem 0 0.19rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
.news-right {
li {
margin-top: 0.1rem;
padding: 0.13rem 0.14rem 0.11rem 0.12rem;
background: #fff;
.time {
font-size: 0.1rem;
line-height: 100%;
color: #ab0a3d;
}
.news-r-title {
font-size: 0.14rem;
color: #333333;
margin-top: 0.1rem;
line-height: 0.21rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.del {
font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
} }
</style> </style>
components/home/openClass.vue
浏览文件 @ 7895d935
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<template v-if="!isMobile">
<div class="alumni-content max-width"> <div class="alumni-content max-width">
<m-title :data="titleParams" class="m-title" /> <card :title="$t('home.course.title')">
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" /> <img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div> <div class="text">{{ item.title }}</div>
</app-link> </app-link>
...@@ -13,26 +15,41 @@ ...@@ -13,26 +15,41 @@
</div> </div>
</div> </div>
</div> </div>
</card>
</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> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'openClass', name: 'openClass',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data() { data() {
const _this = this const _this = this
return { return {
titleParams: {
name: this.$t('home.course.title')
},
isScale: false, isScale: false,
listData: [], listData: [],
// 轮播图配置信息, 更多请参考 swiper.js 中文网，上面很详细。
swiperOption: { swiperOption: {
observer: true, observer: true,
observeParents: true, observeParents: true,
...@@ -58,14 +75,13 @@ export default { ...@@ -58,14 +75,13 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
}
}, },
created() {}, isMobile() {
mounted() { return this.$store.state.isMobile
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
} }
}, },
created() {},
mounted() {},
methods: { methods: {
swiperStop() { swiperStop() {
this.swiper.autoplay.stop() this.swiper.autoplay.stop()
...@@ -77,11 +93,12 @@ export default { ...@@ -77,11 +93,12 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.max-width { .is-pc {
.max-width {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.alumni-content { .alumni-content {
padding-top: 89px; padding-top: 89px;
.title-content { .title-content {
display: flex; display: flex;
...@@ -143,8 +160,29 @@ export default { ...@@ -143,8 +160,29 @@ export default {
margin-top: 0; margin-top: 0;
} }
} }
}
} }
.scale { .is-h5 {
transform: scale(0.85); .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> </style>
components/home/presence.vue
浏览文件 @ 7895d935
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="presence-content-box"> <div class="presence-content-box">
<m-title :data="titleParams" class="m-title" /> <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"> <div class="content-mian">
<div class="banner-box" @mouseenter="swiperStop" @mouseleave="swiperStart"> <van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <template v-for="(item, index) in listData">
<div class="swiper-wrapper"> <van-swipe-item :key="index">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" /> <img :src="item.web_img_uri" />
</app-link> </app-link>
</div> </van-swipe-item>
</div> </template>
<div class="swiper-pagination swiper-pagination-bullets"></div> </van-swipe>
</div> <div class="form-box">
</div> <div class="title-box">
<div class="enroll-box"> <div class="bt" v-html="$t('home.presence.tips1')"></div>
<div class="left-content">
<div class="tit" v-html="$t('home.presence.tips1')"></div>
<div class="tips">{{ $t('home.presence.tips2') }}</div> <div class="tips">{{ $t('home.presence.tips2') }}</div>
</div> </div>
<div class="right-content"> <div class="form">
<div class="li"> <div class="li">
<el-select v-model="form.years" :placeholder="$t('home.presence.yearsholder')"> <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 v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
...@@ -43,16 +45,17 @@ ...@@ -43,16 +45,17 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
import { postNes } from '@/api' import { postNes } from '@/api'
export default { export default {
name: 'presence', name: 'presence',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data() { data() {
...@@ -98,7 +101,6 @@ export default { ...@@ -98,7 +101,6 @@ export default {
degree: '', degree: '',
name: '', name: '',
phone: '', phone: '',
// channel: 19960,
project_id: process.env.newProjectId project_id: process.env.newProjectId
}, },
value: '', value: '',
...@@ -108,20 +110,7 @@ export default { ...@@ -108,20 +110,7 @@ export default {
path: '/alumni/sharing' path: '/alumni/sharing'
} }
}, },
listData: [], listData: []
swiperOption: {
speed: 400,
// autoplay: true,
delay: 3000,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'vertical',
height: 500
// autoHeight: true
}
} }
}, },
async fetch() { async fetch() {
...@@ -131,6 +120,9 @@ export default { ...@@ -131,6 +120,9 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
mounted() {}, mounted() {},
...@@ -173,7 +165,12 @@ export default { ...@@ -173,7 +165,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.presence-content-box { .is-pc {
.card-style {
width: 1200px;
margin: 0 auto;
}
.presence-content-box {
padding-top: 80px; padding-top: 80px;
.m-title { .m-title {
width: 1200px; width: 1200px;
...@@ -181,30 +178,29 @@ export default { ...@@ -181,30 +178,29 @@ export default {
} }
.content-mian { .content-mian {
padding-top: 24px; padding-top: 24px;
.banner-box { .my-swipe {
height: 500px; height: 500px;
overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 520px; height: 100%;
display: block; display: block;
} }
} }
.enroll-box { .form-box {
width: 1200px; width: 1200px;
height: 540px; height: 540px;
margin: 80px auto 0; margin: 80px auto 0;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sofia/home-apply-form-bg.png); background: url(https://webapp-pub.ezijing.com/project/kelley/home-ssfc-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left-content { .title-box {
width: 592px; width: 592px;
height: 223px; height: 223px;
background: rgba(170, 25, 65, 0.63); background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 127px; margin-top: 127px;
.tit { .bt {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
line-height: 58px; line-height: 58px;
...@@ -220,7 +216,7 @@ export default { ...@@ -220,7 +216,7 @@ export default {
text-align: center; text-align: center;
} }
} }
.right-content { .form {
width: 401px; width: 401px;
height: 382px; height: 382px;
background: #ffffff; background: #ffffff;
...@@ -249,5 +245,82 @@ export default { ...@@ -249,5 +245,82 @@ export default {
} }
} }
} }
}
}
.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: 100%;
display: block;
}
}
.form-box {
background: url(https://webapp-pub.ezijing.com/project/kelley-h5/home-presen-bg-new1.png) center;
background-size: cover;
padding-top: 0.18rem;
box-sizing: border-box;
margin-top: 0.27rem;
padding-bottom: 0.05rem;
.title-box {
width: 3.75rem;
height: 1.2rem;
background: rgba(170, 25, 65, 0.63);
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;
padding-top: 0.16rem;
}
.tips {
font-size: 0.1rem;
line-height: 0.12rem;
color: #ffffff;
text-align: center;
padding-top: 0.1rem;
}
}
.form {
width: 2.7rem;
background: #ffffff;
margin: 0.2rem auto;
padding: 0.25rem 0.2rem;
box-sizing: border-box;
.li {
margin-bottom: 0.2rem;
}
::v-deep {
.el-select {
width: 100%;
height: 100%;
}
}
.btn {
font-size: 0.12rem;
line-height: 0.16rem;
color: #ffffff;
background: #aa1941;
border-radius: 0.02rem;
text-align: center;
cursor: pointer;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
components/home/projectFeatures.vue
浏览文件 @ 7895d935
<template> <template>
<div class="service-content max-width-center"> <div class="service-content max-width-center">
<m-title :data="titleParams"/> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<card :title="$t('home.project.title')">
<ul class="nav-content"> <ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path)"> <li v-for="(item, index) in data" :key="index">
<img :src="item.icon" alt="" class="icon"> <img :src="item.icon" class="icon" />
<img :src="item.iconActive" alt="" class="icon-active"> <img v-if="!isMobile" :src="item.iconActive" class="icon-active" />
<div class="text" v-html="item.text"></div> <div class="text" v-html="item.text"></div>
</li> </li>
</ul> </ul>
</card>
</div>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'projectFeatures', name: 'projectFeatures',
components: { components: {
mTitle, AppLink,
AppLink Card
}, },
data() { data() {
return { return {
...@@ -61,50 +64,59 @@ export default { ...@@ -61,50 +64,59 @@ export default {
} }
window.open(path) window.open(path)
} }
},
mounted() {
console.log(this.isMobile)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.service-content{ .is-pc {
.service-content {
padding-top: 68px; padding-top: 68px;
.nav-content{ .nav-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 15px; padding-top: 15px;
li{ li {
width: 224px; width: 224px;
height: 230px; height: 230px;
padding-top: 53px; padding-top: 53px;
box-sizing: border-box; box-sizing: border-box;
background: #F9F8F8; background: #f9f8f8;
// background: #fff; // background: #fff;
// box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41); // box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all 0.3s;
img{ img {
width: 80px; width: 80px;
height: 80px; height: 80px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.icon-active{ .icon-active {
display: none; display: none;
} }
&:hover{ &:hover {
background: #AA1941; background: #aa1941;
box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41); box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
.text{ .text {
color: #fff; color: #fff;
} }
.icon{ .icon {
display: none; display: none;
} }
.icon-active{ .icon-active {
display: block; display: block;
} }
} }
.text{ .text {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: #666666; color: #666666;
...@@ -113,9 +125,39 @@ export default { ...@@ -113,9 +125,39 @@ export default {
} }
} }
} }
} }
.max-width-center{ .max-width-center {
width: 1212px; width: 1212px;
margin: 0 auto; 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;
padding-top: 0.05rem;
text-align: center;
padding-bottom: 0.1rem;
}
}
}
} }
</style> </style>
components/home/schoolRanking.vue
浏览文件 @ 7895d935
...@@ -41,7 +41,12 @@ ...@@ -41,7 +41,12 @@
</template> </template>
<script> <script>
export default { export default {
name: 'schoolRanking' name: 'schoolRanking',
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
components/layout/h5/Footer.vue 0 → 100644
浏览文件 @ 7895d935
<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.11rem;
}
p + p {
margin-top: 10px;
}
}
.link {
margin-top: 0.22rem;
a {
font-size: 0.14rem;
margin-right: 0.2rem;
}
}
.friendlink {
margin-top: 0.22rem;
a {
font-size: 0.11rem;
line-height: 0.18rem;
margin-right: 0.1rem;
white-space: nowrap;
}
}
.copyright {
padding: 0.15rem 0 0.24rem;
p {
font-size: 0.1rem;
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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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/Head.vue → components/layout/pc/Head.vue
浏览文件 @ 7895d935
...@@ -3,17 +3,21 @@ ...@@ -3,17 +3,21 @@
<div class="color-bar"></div> <div class="color-bar"></div>
<div class="head-top-content"> <div class="head-top-content">
<div class="max-width-content"> <div class="max-width-content">
<app-link :item="{ path: '/' }"> <nuxt-link to="/">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sofia/ezijing-logo.png" /> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sofia/ezijing-logo.png" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sofia/sofia-logo.png" /> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sofia/sofia-logo.png" />
</app-link> </nuxt-link>
<div class="user" v-if="user.id"> <div class="user" v-if="user.id">
<span>{{ user.realname || user.nickname }}</span <span>{{ user.realname || user.nickname }}</span
><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span> ><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span>
</div> </div>
<div class="login-btn-box" v-else> <div class="login-btn-box" v-else>
<div class="login"><a :href="loginURL">{{ $t('menu.fastLogin') }}</a></div> <div class="login">
<div class="register"><a :href="registerURL">{{ $t('menu.register') }}</a></div> <a :href="loginURL">{{ $t('menu.fastLogin') }}</a>
</div>
<div class="register">
<a :href="registerURL">{{ $t('menu.register') }}</a>
</div>
</div> </div>
<div class="language"> <div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span> <span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
...@@ -27,12 +31,10 @@ ...@@ -27,12 +31,10 @@
</div> </div>
</template> </template>
<script> <script>
import AppLink from '@/components/Link' import AppMenu from './Menu'
import AppMenu from '@/components/Menu'
export default { export default {
components: { components: {
AppMenu, AppMenu
AppLink
}, },
data() { data() {
return {} return {}
...@@ -90,7 +92,7 @@ li { ...@@ -90,7 +92,7 @@ li {
.max-width-content { .max-width-content {
display: flex; display: flex;
align-items: center; align-items: center;
::v-deep.link-content{ ::v-deep{
a{ a{
display:flex; display:flex;
img { img {
......
components/layout/pc/Index.vue 0 → 100644
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
...@@ -24,9 +24,7 @@ ...@@ -24,9 +24,7 @@
@mouseenter="levelShow(level2Item)" @mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')" @mouseleave="levelShow(level2Item, 'out')"
> >
<app-link :item="{ <app-link :to="level2Item.path">
path: level2Item.path
}">
<div class="name"> <div class="name">
{{ level2Item.name }} {{ level2Item.name }}
</div> </div>
......
components/recommend.vue
浏览文件 @ 7895d935
...@@ -7,14 +7,7 @@ ...@@ -7,14 +7,7 @@
</div> </div>
<ul class="list-box"> <ul class="list-box">
<li v-for="(item, index) in listData" :key="index"> <li v-for="(item, index) in listData" :key="index">
<app-link <app-link :data="item" :to="`/news/hot/${item.id}`">
:item="{
news: {
data: item,
path: '/news/hot'
}
}"
>
<img :src="item.web_img_uri" alt="" /> <img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div> <div class="dec">{{ item.title }}</div>
</app-link> </app-link>
......
langs/en-US.js
浏览文件 @ 7895d935
...@@ -37,11 +37,20 @@ export default { ...@@ -37,11 +37,20 @@ export default {
home: { home: {
project: { project: {
title: '项目特色', title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '科学成熟的<br />在线<br />教育模式',
itemT4: '无需联考<br />快速入门<br />的学习体验',
itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系', itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌', itemT2: '专业金融<br />在线教育品牌',
itemT3: '科学成熟的<br />在线教育模式', itemT3: '科学成熟的<br />在线教育模式',
itemT4: '无需联考、快速入门<br />的学习体验', itemT4: '无需联考、快速入门<br />的学习体验',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程', itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
}, },
ranking: { ranking: {
title: '学校排名', title: '学校排名',
......
langs/zh-CN.js
浏览文件 @ 7895d935
...@@ -37,23 +37,32 @@ export default { ...@@ -37,23 +37,32 @@ export default {
home: { home: {
project: { project: {
title: '项目特色', title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '线上线下<br />结合灵活的<br />授课学习方式',
itemT4: '全球排名<br />顶尖师资及<br />中国金融界权威专家',
itemT5: '聚焦中国实践<br />和国际前沿的<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系', itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌', itemT2: '专业金融<br />在线教育品牌',
itemT3: '科学成熟的<br />在线教育模式', itemT3: '线上线下结合灵活的<br />授课学习方式',
itemT4: '无需联考、快速入门<br />的学习体验', itemT4: '全球排名顶尖师资<br />及中国金融界权威专家',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程', itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
}, },
ranking: { ranking: {
title: '学校排名', title: '学校排名',
item1Tit: '印第安纳大学', item1Tit: '印第安纳大学',
item2Tit: 'KELLEY 商学院', item2Tit: 'KELLEY 商学院',
item3Tit: 'KELLEY<br />在线金融硕士', item3Tit: 'KELLEY<br />在线金融硕士',
item1Txt1: '全球最佳研究生院排名<br />2018 《美国新闻与世界报道》', item1Txt1: '全球最佳研究生院排名<br />2018《美国新闻与世界报道》',
item1Txt2: '全美最佳商学院研究生综合排名<br />2018 《美国新闻与世界报道》', item1Txt2: '全美最佳商学院排名<br />2019《美国新闻与世界报道》',
item2Txt1: '总体排名<br />2018 《美国新闻与世界报道》', item2Txt1: '在线硕士排名<br />2019《美国新闻与世界报道》',
item2Txt2: '学生满意度排名<br />2016 《彭博商业周刊》', item2Txt2: '学生满意度排名<br />2016《彭博商业周刊》',
item3Txt1: '全球最佳研究生院排名<br />2018 《美国新闻与世界报道》', item3Txt1: '在线MBA排名<br />2021《美国新闻与世界报道》',
item3Txt2: '全美最佳商学院研究生综合排名<br />2018 《美国新闻与世界报道》' item3Txt2: '最佳教授排名<br />2021《普林斯顿评论》'
}, },
news: { news: {
title: '最新动态' title: '最新动态'
...@@ -105,9 +114,9 @@ export default { ...@@ -105,9 +114,9 @@ export default {
unit1: '所', unit1: '所',
unit2: '门', unit2: '门',
unit3: '万', unit3: '万',
con2Txt: `印第安纳大学伯明顿分校是美国公立常春藤名校，成立于1820年，有近200年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。<br /> con2Txt: `印第安纳大学伯明顿分校是美国公立常春藤院校，成立于1820年，有200多年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。<br />
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有近100年历史。<br /> 印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有100多年历史。<br />
Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance. Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance。
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The
Economist Intelligence Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。`, Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。`,
...@@ -121,7 +130,7 @@ export default { ...@@ -121,7 +130,7 @@ export default {
feature: { feature: {
item1Tit: '线上线下结合灵活的授课学习方式', item1Tit: '线上线下结合灵活的授课学习方式',
item1Txt1: '线上+线下教学模式', item1Txt1: '线上+线下教学模式',
item1Txt2: '在职学习、无需出国、入读名校', item1Txt2: '在职学习、无需出国、便捷高效',
item1Txt3: '最短15个月最长5年拿到学位', item1Txt3: '最短15个月最长5年拿到学位',
item2Tit: '高性价比享超高品质教学服务体验', item2Tit: '高性价比享超高品质教学服务体验',
item2Txt1: '专业金融在线教育品牌', item2Txt1: '专业金融在线教育品牌',
...@@ -219,17 +228,17 @@ export default { ...@@ -219,17 +228,17 @@ export default {
con2Tit: '贷款', con2Tit: '贷款',
con2Txt: `1、就读本项目的学生，可以申请多家金融机构的贷款服务。<br /> con2Txt: `1、就读本项目的学生，可以申请多家金融机构的贷款服务。<br />
2、具体信息会在学生获得正式录取资格后公布。<br /> 2、具体信息会在学生获得正式录取资格后公布。<br />
3、清华控股旗下紫荆教育不为学员担保贷款，不承担催款义务` 3、清华控股旗下紫荆教育不为学员担保贷款，不承担催款义务。`
}, },
// 常见问题 // 常见问题
problem: { problem: {
item1Tit: '申请和面试相关问题', item1Tit: '申请和面试相关问题',
item1problem1: 'Q:如何申请美国印第安纳大学Kelley商学院金融学硕士？大概流程是什么？', item1problem1: 'Q:如何申请美国印第安纳大学Kelley商学院金融学硕士？大概流程是什么？',
item1answer1: 'A: 请参考网页招生简章。', item1answer1: 'A: 本项目为申请面试制； 申请流程为：在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。',
item1problem2: 'Q:面试多少人？录取多少人？率取比率是多少？', item1problem2: 'Q:面试多少人？录取多少人？率取比率是多少？',
item1answer2: 'A: 本项目采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。', item1answer2: 'A: 本项目采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。',
item1problem3: 'Q:是否要求考生的工作经验必须属于金融行业？', item1problem3: 'Q:是否要求考生的工作经验必须属于金融行业？',
item1answer3: 'A: 本项目对考生的行业没有特殊要求。只要是有志于从事金融行业和相关工作的考生都可以报考本项目。录取为综合考评，工作背景是综合评价时需要参考的一部分信息。', item1answer3: 'A: 本项目对考生的行业背景无特殊要求。欢迎有志于从事金融行业或相关工作的考生报考。录取为综合考评，工作背景是综合考评时需要参考的一部分信息。',
item2Tit: '报考资格相关问题', item2Tit: '报考资格相关问题',
item2problem1: 'Q:大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？', item2problem1: 'Q:大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
item2answer1: 'A: 可以报考，只要获得本科学位证书，按照本科毕业生身份报考即可。', item2answer1: 'A: 可以报考，只要获得本科学位证书，按照本科毕业生身份报考即可。',
......
layouts/normal.vue
浏览文件 @ 7895d935
<template> <template>
<div> <app-layout v-bind="$attrs"></app-layout>
<Head />
<Nuxt />
<rightAside />
<Foot v-if="hasFooter" />
</div>
</template> </template>
<script> <script>
import AppLayout from '@/components/layout'
export default { export default {
props: { hasFooter: { Boolean, default: true } } components: { AppLayout }
} }
</script> </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
浏览文件 @ 7895d935
export default function(context) { export default function(context) {
const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA)) const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
isMobile && context.redirect('https://h5.ezijing.com/') context.store.commit('setIsMobile', isMobile)
} }
nuxt.config.js
浏览文件 @ 7895d935
...@@ -45,10 +45,11 @@ export default { ...@@ -45,10 +45,11 @@ export default {
] ]
}, },
// Global CSS: https://go.nuxtjs.dev/config-css // 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 to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
'@/plugins/vant',
'@/plugins/i18n', '@/plugins/i18n',
'@/plugins/router', '@/plugins/router',
'@/plugins/axios', '@/plugins/axios',
......
package-lock.json
浏览文件 @ 7895d935
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"qrcode.vue": "^1.7.0", "qrcode.vue": "^1.7.0",
"qs": "^6.10.1", "qs": "^6.10.1",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0", "viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4" "vue-i18n": "^8.24.4"
...@@ -1973,6 +1974,15 @@ ...@@ -1973,6 +1974,15 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==" "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": { "node_modules/@types/anymatch": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
...@@ -2068,6 +2078,19 @@ ...@@ -2068,6 +2078,19 @@
"node": ">=0.10.0" "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": { "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1", "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", "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 @@ ...@@ -11227,6 +11250,21 @@
"node": ">= 0.4.0" "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": { "node_modules/vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
...@@ -11278,6 +11316,11 @@ ...@@ -11278,6 +11316,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw==" "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": { "node_modules/vue-loader": {
"version": "15.9.6", "version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
...@@ -14497,6 +14540,11 @@ ...@@ -14497,6 +14540,11 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==" "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": { "@types/anymatch": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
...@@ -14589,6 +14637,19 @@ ...@@ -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": { "@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1", "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", "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 @@ ...@@ -22209,6 +22270,18 @@
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" "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": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
...@@ -22254,6 +22327,11 @@ ...@@ -22254,6 +22327,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw==" "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": { "vue-loader": {
"version": "15.9.6", "version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
......
package.json
浏览文件 @ 7895d935
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"qrcode.vue": "^1.7.0", "qrcode.vue": "^1.7.0",
"qs": "^6.10.1", "qs": "^6.10.1",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0", "viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4" "vue-i18n": "^8.24.4"
......
pages/about/course.vue
浏览文件 @ 7895d935
<template> <template>
<div class="course-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="course-content-box" v-if="!isMobile">
<div class="content-mian"> <div class="content-mian">
<div class="border-box"> <div class="border-box">
<template v-for="(item, index) in courseData"> <template v-for="(item, index) in courseData">
...@@ -18,8 +19,20 @@ ...@@ -18,8 +19,20 @@
</template> </template>
</div> </div>
</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> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -34,147 +47,75 @@ export default { ...@@ -34,147 +47,75 @@ export default {
{ {
title: this.$t('setCourse.tit1'), title: this.$t('setCourse.tit1'),
item: [ item: [
{ { name: this.$t('setCourse.t1'), score: 0 },
name: this.$t('setCourse.t1'), { name: this.$t('setCourse.t2'), score: 0 },
score: 0 { name: this.$t('setCourse.t3'), score: 0 }
},
{
name: this.$t('setCourse.t2'),
score: 0
},
{
name: this.$t('setCourse.t3'),
score: 0
}
] ]
}, },
{ {
title: this.$t('setCourse.tit2'), title: this.$t('setCourse.tit2'),
item: [ item: [
{ { name: this.$t('setCourse.t4'), score: 3 },
name: this.$t('setCourse.t4'), { name: this.$t('setCourse.t5'), score: 3 },
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.t5'), { name: this.$t('setCourse.t9'), score: 3 },
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.t6'), { name: this.$t('setCourse.t13'), score: 1.5 },
score: 3 { name: this.$t('setCourse.t14'), score: 1.5 },
}, { name: this.$t('setCourse.t15'), score: 1.5 }
{
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: this.$t('setCourse.tit3'), title: this.$t('setCourse.tit3'),
item: [ item: [
{ { name: this.$t('setCourse.t16'), score: 0 },
name: this.$t('setCourse.t16'), { name: this.$t('setCourse.t17'), score: 0 },
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.t17'), { name: this.$t('setCourse.t21'), score: 0 },
score: 0 { name: this.$t('setCourse.t22'), 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: this.$t('setCourse.tit4'), title: this.$t('setCourse.tit4'),
item: [ item: [
{ { name: this.$t('setCourse.t23'), score: 1.5 },
name: this.$t('setCourse.t23'), { name: this.$t('setCourse.t24'), score: 0 },
score: 1.5 { name: this.$t('setCourse.t25'), score: 0 }
},
{
name: this.$t('setCourse.t24'),
score: 0
},
{
name: this.$t('setCourse.t25'),
score: 0
}
] ]
} }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.courseChild.set'), name: this.$t('menu.courseChild.set'),
path: '/about/course', path: '/about/course'
pathActive: ['/about/course']
}, },
{ {
name: this.$t('menu.courseChild.teachers'), name: this.$t('menu.courseChild.teachers'),
path: '/about/teacher', path: '/about/teacher'
pathActive: ['/about/teacher']
} }
] ]
} }
} }
}, },
mounted() { mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.course-content-box { .is-pc{
.course-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.content-mian { .content-mian {
...@@ -184,8 +125,8 @@ export default { ...@@ -184,8 +125,8 @@ export default {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
.item-box { .item-box {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
margin-bottom: 40px; margin-bottom: 40px;
ul { ul {
padding-bottom: 37px; padding-bottom: 37px;
...@@ -230,5 +171,45 @@ export default { ...@@ -230,5 +171,45 @@ 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> </style>
pages/about/teacher.vue
浏览文件 @ 7895d935
<template> <template>
<div class="teacher-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="teacher-content-box">
<div class="content-box"> <div class="content-box">
<div class="teacher-box"> <div class="teacher-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index"> <div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
...@@ -34,32 +36,32 @@ export default { ...@@ -34,32 +36,32 @@ export default {
title: this.$t('teachers.tit1'), title: this.$t('teachers.tit1'),
list: [ list: [
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t1.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t1.png',
name: this.$t('teachers.tea1Name'), name: this.$t('teachers.tea1Name'),
intr: this.$t('teachers.tea1Txt') intr: this.$t('teachers.tea1Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t2.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t2.png',
name: this.$t('teachers.tea2Name'), name: this.$t('teachers.tea2Name'),
intr: this.$t('teachers.tea2Txt') intr: this.$t('teachers.tea2Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t3.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t3.png',
name: this.$t('teachers.tea3Name'), name: this.$t('teachers.tea3Name'),
intr: this.$t('teachers.tea3Txt') intr: this.$t('teachers.tea3Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t4.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t4.png',
name: this.$t('teachers.tea4Name'), name: this.$t('teachers.tea4Name'),
intr: this.$t('teachers.tea4Txt') intr: this.$t('teachers.tea4Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t5.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t5.png',
name: this.$t('teachers.tea5Name'), name: this.$t('teachers.tea5Name'),
intr: this.$t('teachers.tea5Txt') intr: this.$t('teachers.tea5Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t6.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t6.png',
name: this.$t('teachers.tea6Name'), name: this.$t('teachers.tea6Name'),
intr: this.$t('teachers.tea6Txt') intr: this.$t('teachers.tea6Txt')
} }
...@@ -69,32 +71,32 @@ export default { ...@@ -69,32 +71,32 @@ export default {
title: this.$t('teachers.tit2'), title: this.$t('teachers.tit2'),
list: [ list: [
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t7.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t7.png',
name: this.$t('teachers.tea7Name'), name: this.$t('teachers.tea7Name'),
intr: this.$t('teachers.tea7Txt') intr: this.$t('teachers.tea7Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t8.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t8.png',
name: this.$t('teachers.tea8Name'), name: this.$t('teachers.tea8Name'),
intr: this.$t('teachers.tea8Txt') intr: this.$t('teachers.tea8Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t9.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t9.png',
name: this.$t('teachers.tea9Name'), name: this.$t('teachers.tea9Name'),
intr: this.$t('teachers.tea9Txt') intr: this.$t('teachers.tea9Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t10.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t10.png',
name: this.$t('teachers.tea10Name'), name: this.$t('teachers.tea10Name'),
intr: this.$t('teachers.tea10Txt') intr: this.$t('teachers.tea10Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t11.png', image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/wangyong.png',
name: this.$t('teachers.tea11Name'), name: this.$t('teachers.tea11Name'),
intr: this.$t('teachers.tea11Txt') intr: this.$t('teachers.tea11Txt')
}, },
{ {
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/teacher-t12.png', image: 'https://webapp-pub.ezijing.com/project/kelley/teacher-t12.png',
name: this.$t('teachers.tea12Name'), name: this.$t('teachers.tea12Name'),
intr: this.$t('teachers.tea12Txt') intr: this.$t('teachers.tea12Txt')
} }
...@@ -102,28 +104,31 @@ export default { ...@@ -102,28 +104,31 @@ export default {
} }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.courseChild.set'), name: this.$t('menu.courseChild.set'),
path: '/about/course', path: '/about/course'
pathActive: ['/about/course']
}, },
{ {
name: this.$t('menu.courseChild.teachers'), name: this.$t('menu.courseChild.teachers'),
path: '/about/teacher', path: '/about/teacher'
pathActive: ['/about/teacher']
} }
] ]
} }
} }
}, },
mounted() { mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.teacher-content-box { .is-pc{
.teacher-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.content-box { .content-box {
...@@ -168,5 +173,51 @@ export default { ...@@ -168,5 +173,51 @@ export default {
} }
} }
} }
}
}
.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;
}
}
}
}
}
}
} }
</style> </style>
pages/alumni/outstanding.vue
浏览文件 @ 7895d935
<template> <template>
<div class="outstanding"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="outstanding">
<div class="alumni"> <div class="alumni">
<h5>{{ $t('outstanding.title1') }}</h5> <h5>{{ $t('outstanding.title1') }}</h5>
<ul class="card-list"> <ul class="card-list">
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
...@@ -42,117 +44,121 @@ export default { ...@@ -42,117 +44,121 @@ export default {
return { return {
alumniList: [ 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", name: "Paul H. O'Neill",
post: ['前美国财政部长'] 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', name: 'Alan B. Graf',
post: ['Fedex首席财务官'] 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', name: 'John Chambers',
post: ['Cisco首席执行官'] 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', name: 'Ali Tuet',
post: ['香港ESG控股集团主席总裁'] 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', name: 'Jimmy Wales',
post: ['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', name: 'Mark Cuban',
post: ['美国知名投资人', 'NBA达拉斯独行侠球队老板'] 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', name: 'Peter Wong',
post: ['汇丰银行', '亚洲区总裁'] 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", name: "Paul H. O'Neill",
post: ['美国 Whirlpool', '亚洲副总裁'] post: ['美国 Whirlpool', '亚洲副总裁']
} }
], ],
studentList: [ studentList: [
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-01.png', avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-01.png',
name: '张彧', name: '张彧',
education: ['Xavier University', '工商管理硕士'], education: ['Xavier University', '工商管理硕士'],
post: ['希尔顿酒店管理有限公司', '财务部副总裁'] 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: '赵旭娜', name: '赵旭娜',
education: ['约翰霍普金斯大学', '博士后'], education: ['约翰霍普金斯大学', '博士后'],
post: ['瓦里安医疗系统公司（美国）', '大中华区高级临床战略经理'] post: ['瓦里安医疗系统公司（美国）', '大中华区高级临床战略经理']
}, },
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-03.png', avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-03.png',
name: '刘育弘', name: '刘育弘',
education: ['中山大学', '高级工商管理硕士'], education: ['中山大学', '高级工商管理硕士'],
post: ['广州快塑电子商务有限公司', '执行总裁'] post: ['广州快塑电子商务有限公司', '执行总裁']
}, },
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-04.png', avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-04.png',
name: '刘丹', name: '刘丹',
education: ['香港大学李嘉诚医学院', '医学影像学博士'], education: ['香港大学李嘉诚医学院', '医学影像学博士'],
post: ['华润医疗直属医院', '运营院长'] post: ['华润医疗直属医院', '运营院长']
}, },
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-05.png', avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-05.png',
name: '刘志诚', name: '刘志诚',
education: ['香港理工大学', '软件科技及工商管理双硕士'], education: ['香港理工大学', '软件科技及工商管理双硕士'],
post: ['乐信集团信息安全中心', '总监'] 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: '孙红平', name: '孙红平',
education: ['广东外语外贸大学', '翻译硕士'], education: ['广东外语外贸大学', '翻译硕士'],
post: ['美国IPO直通车公司', '管理合伙人'] post: ['美国IPO直通车公司', '管理合伙人']
}, },
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-07.png', avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/sgql.png',
name: '侍文', name: '上官利青',
education: ['The University of Manchester', '工商管理硕士'], education: ['清华大学', '微电子学硕士'],
post: ['苏州诗诗珠宝有限公司', '总经理'] post: ['中航信托有限公司', '家族信托事业部副总经理']
}, },
{ {
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-outstanding-stud-08.png', avatar: 'https://webapp-pub.ezijing.com/project/kelley/alumni-outstanding-stud-08.png',
name: '虞东', name: '虞东',
education: ['北京大学光华管理学院', '高级工商管理硕士'], education: ['北京大学光华管理学院', '高级工商管理硕士'],
post: ['西安纸贵互联网科技有限公司', '董事合伙人首席风控官'] post: ['西安纸贵互联网科技有限公司', '董事合伙人首席风控官']
} }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.alumniChild.outstanding'), name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding', path: '/alumni/outstanding'
pathActive: ['/alumni/outstanding']
}, },
{ {
name: this.$t('menu.alumniChild.share'), name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing', path: '/alumni/sharing'
pathActive: ['/alumni/sharing']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alumni { .is-pc{
.alumni {
padding: 30px 74px; padding: 30px 74px;
h5 { h5 {
font-size: 22px; font-size: 22px;
...@@ -221,5 +227,79 @@ export default { ...@@ -221,5 +227,79 @@ export default {
} }
} }
} }
}
}
.is-h5{
.alumni {
padding: 0 .16rem .35rem;
h5 {
font-size: .14rem;
font-weight: 700;
line-height: 100%;
padding: .2rem 0;
color: #333;
}
.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;
}
}
}
}
}
} }
</style> </style>
pages/alumni/sharing/_id.vue
浏览文件 @ 7895d935
<template> <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="content-box">
<div class="back-btn" @click="$router.go(-1)"> <div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div> <div class="el-icon-arrow-left"></div>
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<div class="article-content" v-html="data.content"></div> <div class="article-content" v-html="data.content"></div>
<recommend /> <recommend />
</div> </div>
</app-frame>
</div> </div>
</app-frame>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -28,14 +28,12 @@ export default { ...@@ -28,14 +28,12 @@ export default {
frameParams: { frameParams: {
slider: [ slider: [
{ {
name: '杰出校友', name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding', path: '/alumni/outstanding'
pathActive: ['/alumni/outstanding']
}, },
{ {
name: '校友分享', name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing', path: '/alumni/sharing'
pathActive: ['/alumni/sharing']
} }
] ]
}, },
......
pages/alumni/sharing/index.vue
浏览文件 @ 7895d935
<template> <template>
<div class="sharing">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" /> <article-list v-bind="listOptions"></article-list>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem' import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default { export default {
layout: 'normal', layout: 'normal',
components: { components: { appFrame, ArticleList },
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)
},
data() { data() {
return { return {
newsList: [],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.alumniChild.outstanding'), name: this.$t('menu.alumniChild.outstanding'),
path: '/alumni/outstanding', path: '/alumni/outstanding',
pathActive: ['/alumni/outstanding']
}, },
{ {
name: this.$t('menu.alumniChild.share'), name: this.$t('menu.alumniChild.share'),
path: '/alumni/sharing', path: '/alumni/sharing',
pathActive: ['/alumni/sharing']
} }
] ]
} }
} }
}, },
methods: { computed: {
handleClick(item) { listOptions() {
this.$router.push({ name: 'alumni-sharing-id', params: { id: item.id } }) return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
},
to(item) {
return `/alumni/sharing/${item.id}`
}
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped>
.news-item {
padding-top: 43px;
}
</style>
\ No newline at end of file
pages/apply/problem.vue
浏览文件 @ 7895d935
<template> <template>
<div class="problem-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="problem-content-box">
<div class="content-box"> <div class="content-box">
<template v-for="(item, index) in problemList"> <template v-for="(item, index) in problemList">
<div class="problem-item-box" :key="index"> <div class="problem-item-box" :key="index">
...@@ -16,8 +17,9 @@ ...@@ -16,8 +17,9 @@
</div> </div>
</template> </template>
</div> </div>
</app-frame>
</div> </div>
</app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -70,33 +72,34 @@ export default { ...@@ -70,33 +72,34 @@ export default {
} }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.recruitChild.apply'), name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant', path: '/apply/relevant'
pathActive: ['/apply/relevant']
}, },
{ {
name: this.$t('menu.recruitChild.cost'), name: this.$t('menu.recruitChild.cost'),
path: '/apply/support', path: '/apply/support'
pathActive: ['/apply/support']
}, },
{ {
name: this.$t('menu.recruitChild.problem'), name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem', path: '/apply/problem'
pathActive: ['/apply/problem']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.problem-content-box { .is-pc{
width: 1200px; .problem-content-box {
margin: 0 auto;
.content-box { .content-box {
padding: 54px 104px 90px 87px; padding: 54px 104px 90px 87px;
.problem-item-box { .problem-item-box {
...@@ -110,7 +113,6 @@ export default { ...@@ -110,7 +113,6 @@ export default {
ul { ul {
padding-top: 30px; padding-top: 30px;
li { li {
width: 808px;
margin-bottom: 15px; margin-bottom: 15px;
.pro-tit { .pro-tit {
font-size: 16px; font-size: 16px;
...@@ -128,5 +130,40 @@ export default { ...@@ -128,5 +130,40 @@ export default {
} }
} }
} }
}
}
.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;
}
}
}
}
}
}
} }
</style> </style>
pages/apply/relevant.vue
浏览文件 @ 7895d935
<template> <template>
<div class="rele-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="rele-content-box">
<div class="content-box"> <div class="content-box">
<div class="text-content"> <div class="text-content">
<div class="title">{{ $t('apply.con1Tit') }}</div> <div class="title">{{ $t('apply.con1Tit') }}</div>
...@@ -8,7 +9,8 @@ ...@@ -8,7 +9,8 @@
<div class="title mar-t55">{{ $t('apply.con2Tit') }}</div> <div class="title mar-t55">{{ $t('apply.con2Tit') }}</div>
<div class="con-txt" v-html="$t('apply.con2Txt')"></div> <div class="con-txt" v-html="$t('apply.con2Txt')"></div>
</div> </div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/apply-img.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/kelley/apply-img.png" alt="" />
</div>
</div> </div>
</app-frame> </app-frame>
</div> </div>
...@@ -24,33 +26,34 @@ export default { ...@@ -24,33 +26,34 @@ export default {
return { return {
newsList: [], newsList: [],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.recruitChild.apply'), name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant', path: '/apply/relevant'
pathActive: ['/apply/relevant']
}, },
{ {
name: this.$t('menu.recruitChild.cost'), name: this.$t('menu.recruitChild.cost'),
path: '/apply/support', path: '/apply/support'
pathActive: ['/apply/support']
}, },
{ {
name: this.$t('menu.recruitChild.problem'), name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem', path: '/apply/problem'
pathActive: ['/apply/problem']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.rele-content-box { .is-pc{
width: 1200px; .rele-content-box {
margin: 0 auto;
.content-box { .content-box {
img { img {
width: 900px; width: 900px;
...@@ -78,5 +81,37 @@ export default { ...@@ -78,5 +81,37 @@ export default {
} }
} }
} }
}
}
.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;
}
}
}
}
} }
</style> </style>
pages/apply/support.vue
浏览文件 @ 7895d935
<template> <template>
<div class="rele-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="rele-content-box">
<div class="content-box"> <div class="content-box">
<div class="text-content"> <div class="text-content">
<div class="title">{{ $t('cost.con1Tit') }}</div> <div class="title">{{ $t('cost.con1Tit') }}</div>
...@@ -9,6 +10,7 @@ ...@@ -9,6 +10,7 @@
<div class="con-txt" v-html="$t('cost.con2Txt')"></div> <div class="con-txt" v-html="$t('cost.con2Txt')"></div>
</div> </div>
</div> </div>
</div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
...@@ -23,33 +25,34 @@ export default { ...@@ -23,33 +25,34 @@ export default {
return { return {
newsList: [], newsList: [],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.recruitChild.apply'), name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant', path: '/apply/relevant'
pathActive: ['/apply/relevant']
}, },
{ {
name: this.$t('menu.recruitChild.cost'), name: this.$t('menu.recruitChild.cost'),
path: '/apply/support', path: '/apply/support'
pathActive: ['/apply/support']
}, },
{ {
name: this.$t('menu.recruitChild.problem'), name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem', path: '/apply/problem'
pathActive: ['/apply/problem']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.rele-content-box { .is-pc{
width: 1200px; .rele-content-box {
margin: 0 auto;
.content-box { .content-box {
padding-top: 46px; padding-top: 46px;
padding-bottom: 106px; padding-bottom: 106px;
...@@ -72,5 +75,32 @@ export default { ...@@ -72,5 +75,32 @@ export default {
} }
} }
} }
}
}
.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;
}
}
}
}
} }
</style> </style>
pages/index.vue
浏览文件 @ 7895d935
...@@ -56,6 +56,6 @@ export default { ...@@ -56,6 +56,6 @@ export default {
<style> <style>
.container { .container {
width: 100%; width: 100%;
padding-bottom: 100px; padding-bottom: 50px;
} }
</style> </style>
pages/news/hot/_id.vue
浏览文件 @ 7895d935
<template> <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="content-box">
<div class="back-btn" @click="$router.go(-1)"> <div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div> <div class="el-icon-arrow-left"></div>
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<div class="article-content" v-html="data.content"></div> <div class="article-content" v-html="data.content"></div>
<recommend /> <recommend />
</div> </div>
</app-frame>
</div> </div>
</app-frame>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -28,14 +28,12 @@ export default { ...@@ -28,14 +28,12 @@ export default {
frameParams: { frameParams: {
slider: [ slider: [
{ {
name: '热点新闻', name: this.$t('menu.newsChild.hot'),
path: '/news/hot', path: '/news/hot'
pathActive: ['/news/hot', '/news/hot-detail']
}, },
{ {
name: '教授采访', name: this.$t('menu.newsChild.interview'),
path: '/news/interview', path: '/news/interview'
pathActive: ['/news/interview', '/news/interview-detail']
} }
] ]
}, },
...@@ -59,7 +57,6 @@ export default { ...@@ -59,7 +57,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-content-box { .detail-content-box {
// width: 1000px;
// background: #fff; // background: #fff;
// box-sizing: border-box; // box-sizing: border-box;
// margin-bottom: 100px; // margin-bottom: 100px;
......
pages/news/hot/index.vue
浏览文件 @ 7895d935
<template> <template>
<div class="hot-content-box">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" /> <article-list v-bind="listOptions"></article-list>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem' import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default { export default {
layout: 'normal', layout: 'normal',
components: { components: { appFrame, ArticleList },
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)
},
data() { data() {
return { return {
newsList: [],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.newsChild.hot'), name: this.$t('menu.newsChild.hot'),
path: '/news/hot', path: '/news/hot'
pathActive: ['/news/hot', '/news/hot-detail']
}, },
{ {
name: this.$t('menu.newsChild.interview'), name: this.$t('menu.newsChild.interview'),
path: '/news/interview', path: '/news/interview'
pathActive: ['/news/interview', '/news/interview-detail']
} }
] ]
} }
} }
}, },
methods: { computed: {
handleClick(item) { listOptions() {
this.$router.push({ name: 'news-hot-id', params: { id: item.id } }) 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
浏览文件 @ 7895d935
...@@ -29,14 +29,12 @@ export default { ...@@ -29,14 +29,12 @@ export default {
frameParams: { frameParams: {
slider: [ slider: [
{ {
name: '热点新闻', name: this.$t('menu.newsChild.hot'),
path: '/news/hot', path: '/news/hot'
pathActive: ['/news/hot', '/news/hot-detail']
}, },
{ {
name: '教授采访', name: this.$t('menu.newsChild.interview'),
path: '/news/interview', path: '/news/interview'
pathActive: ['/news/interview', '/news/interview-detail']
} }
] ]
}, },
......
pages/news/interview/index.vue
浏览文件 @ 7895d935
<template> <template>
<div class="hot-content-box">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" /> <article-list v-bind="listOptions"></article-list>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem' import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default { export default {
layout: 'normal', layout: 'normal',
components: { components: { appFrame, ArticleList },
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)
},
data() { data() {
return { return {
newsList: [],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.newsChild.hot'), name: this.$t('menu.newsChild.hot'),
path: '/news/hot', path: '/news/hot'
pathActive: ['/news/hot']
}, },
{ {
name: this.$t('menu.newsChild.interview'), name: this.$t('menu.newsChild.interview'),
path: '/news/interview', path: '/news/interview'
pathActive: ['/news/interview']
} }
] ]
} }
} }
}, },
methods: { computed: {
handleClick(item) { listOptions() {
this.$router.push({ name: 'news-interview-id', params: { id: item.id } }) 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> </script>
pages/project-intro/bg.vue
浏览文件 @ 7895d935
<template> <template>
<div class="project-bg"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <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"> <ul class="tabs">
<li <li
v-for="item in list" v-for="item in list"
...@@ -14,15 +39,11 @@ ...@@ -14,15 +39,11 @@
</ul> </ul>
<div class="zjjy" v-if="tabActive === 'zjjy'"> <div class="zjjy" v-if="tabActive === 'zjjy'">
<div class="sub-banner"> <div class="sub-banner">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg-zjjy.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png" />
</div> </div>
<div class="text" v-html="$t('bg.con1Txt')"></div> <div class="text" v-html="$t('bg.con1Txt')"></div>
<div class="tags"> <div class="tags">
<div <div :class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }" v-for="(item, index) in tags" :key="item.text">
:class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }"
v-for="(item, index) in tags"
:key="item.text"
>
<div class="tag-item-inner"> <div class="tag-item-inner">
<p> <p>
<span>{{ item.num }}</span <span>{{ item.num }}</span
...@@ -36,55 +57,32 @@ ...@@ -36,55 +57,32 @@
</div> </div>
<div class="kelley" v-if="tabActive === 'kelley'"> <div class="kelley" v-if="tabActive === 'kelley'">
<div class="sub-banner"> <div class="sub-banner">
<img <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
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>
</div> </div>
<div class="text" v-html="$t('bg.con2Txt')"></div>
</div> </div>
<div class="lhbx" v-if="tabActive === 'lhbx'"> <div class="lhbx" v-if="tabActive === 'lhbx'">
<div class="sub-banner"> <div class="sub-banner">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-bg-lhbx.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
</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>
</div> </div>
<div class="text" v-html="$t('bg.con3Txt')"></div>
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
<script> <script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default { export default {
layout: 'normal', layout: 'normal',
components: {
TabNav,
TabContent
},
data() { data() {
return { return {
showIndex: 0,
tabActive: 'zjjy', tabActive: 'zjjy',
list: [ list: [
{ name: 'zjjy', label: this.$t('bg.tabBtn1') }, { name: 'zjjy', label: this.$t('bg.tabBtn1') },
...@@ -102,31 +100,39 @@ export default { ...@@ -102,31 +100,39 @@ export default {
{ num: 500, unit: this.$t('bg.unit3'), text: this.$t('bg.con1ItemT8') } { num: 500, unit: this.$t('bg.unit3'), text: this.$t('bg.con1ItemT8') }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.projectChild.bg'), name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg', path: '/project-intro/bg'
pathActive: ['/project-intro/bg']
}, },
{ {
name: this.$t('menu.projectChild.feature'), name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac', path: '/project-intro/charac'
pathActive: ['/project-intro/charac']
}, },
{ {
name: this.$t('menu.projectChild.cert'), name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate', path: '/project-intro/certificate'
pathActive: ['/project-intro/certificate']
} }
] ]
} }
} }
},
methods: {
tabChange(n) {
this.showIndex = n
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-bg-main { .is-pc{
.project-bg-main {
padding: 42px 64px 50px; padding: 42px 64px 50px;
.tabs { .tabs {
margin-top: 42px; margin-top: 42px;
...@@ -204,5 +210,69 @@ export default { ...@@ -204,5 +210,69 @@ export default {
width: 240px; width: 240px;
} }
} }
}
}
::v-deep{
// .is-h5{
.main-page-content{
background-color: #eee !important;
// }
}
}
.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;
}
}
img{
width: 2.59rem;
margin-left: .08rem;
margin-top: .27rem;
display: block;
}
}
}
.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;
}
}
}
}
} }
</style> </style>
pages/project-intro/certificate.vue
浏览文件 @ 7895d935
<template> <template>
<div class="certificate"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="certificate-main"> <div class="certificate">
<div class="checkbox"> <div class="checkbox">
<p><i></i>{{ $t('cert.txt1') }}</p> <p><i></i>{{ $t('cert.txt1') }}</p>
<p><i></i>{{ $t('cert.txt2') }}</p> <p><i></i>{{ $t('cert.txt2') }}</p>
</div> </div>
<p class="text">{{ $t('cert.txt3') }}</p> <p class="text">{{ $t('cert.txt3') }}</p>
<img <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png" />
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-certificate-pic.png"
alt=""
/>
<p class="certificate-title">{{ $t('cert.txt4') }}</p> <p class="certificate-title">{{ $t('cert.txt4') }}</p>
<p class="certificate-des">{{ $t('cert.txt5') }}</p> <p class="certificate-des">{{ $t('cert.txt5') }}</p>
</div> </div>
...@@ -23,31 +20,34 @@ export default { ...@@ -23,31 +20,34 @@ export default {
data() { data() {
return { return {
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.projectChild.bg'), name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg', path: '/project-intro/bg'
pathActive: ['/project-intro/bg']
}, },
{ {
name: this.$t('menu.projectChild.feature'), name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac', path: '/project-intro/charac'
pathActive: ['/project-intro/charac']
}, },
{ {
name: this.$t('menu.projectChild.cert'), name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate', path: '/project-intro/certificate'
pathActive: ['/project-intro/certificate']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.certificate-main { .is-pc{
.certificate {
padding: 40px; padding: 40px;
text-align: center; text-align: center;
.checkbox { .checkbox {
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-certificate-icon.png'); background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
background-size: 22px 22px; background-size: 22px 22px;
margin-right: 10px; margin-right: 10px;
vertical-align: middle; vertical-align: middle;
...@@ -103,5 +103,56 @@ export default { ...@@ -103,5 +103,56 @@ export default {
line-height: 34px; line-height: 34px;
color: #aa1941; color: #aa1941;
} }
}
}
.is-h5{
.certificate {
padding: .3rem .52rem;
text-align: center;
.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> </style>
\ No newline at end of file
pages/project-intro/charac.vue
浏览文件 @ 7895d935
<template> <template>
<div class="charac"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<ul class="card"> <ul class="card">
<li v-for="item in list" :key="item.title"> <li v-for="item in list" :key="item.title">
...@@ -22,47 +22,50 @@ export default { ...@@ -22,47 +22,50 @@ export default {
return { return {
list: [ list: [
{ {
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/project-intro-charac-icon1.png', img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon1.png',
title: this.$t('feature.item1Tit'), title: this.$t('feature.item1Tit'),
texts: [this.$t('feature.item1Txt1'), this.$t('feature.item1Txt2'), this.$t('feature.item1Txt3')] 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', img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon2.png',
title: this.$t('feature.item2Tit'), title: this.$t('feature.item2Tit'),
texts: [this.$t('feature.item2Txt1'), this.$t('feature.item2Txt2'), this.$t('feature.item2Txt3')] 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', img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon3.png',
title: this.$t('feature.item3Tit'), title: this.$t('feature.item3Tit'),
texts: [this.$t('feature.item3Txt1'), this.$t('feature.item3Txt2'), this.$t('feature.item3Txt3')] texts: [this.$t('feature.item3Txt1'), this.$t('feature.item3Txt2'), this.$t('feature.item3Txt3')]
} }
], ],
frameParams: { 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: [ slider: [
{ {
name: this.$t('menu.projectChild.bg'), name: this.$t('menu.projectChild.bg'),
path: '/project-intro/bg', path: '/project-intro/bg'
pathActive: ['/project-intro/bg']
}, },
{ {
name: this.$t('menu.projectChild.feature'), name: this.$t('menu.projectChild.feature'),
path: '/project-intro/charac', path: '/project-intro/charac'
pathActive: ['/project-intro/charac']
}, },
{ {
name: this.$t('menu.projectChild.cert'), name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate', path: '/project-intro/certificate'
pathActive: ['/project-intro/certificate']
} }
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .is-pc{
.card {
width: 763px; width: 763px;
margin: 0 auto 0; margin: 0 auto 0;
padding: 80px 0 30px; padding: 80px 0 30px;
...@@ -99,5 +102,45 @@ export default { ...@@ -99,5 +102,45 @@ export default {
} }
} }
} }
}
}
.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;
}
}
.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;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
pages/project-intro/components/TabContent.vue 0 → 100644
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
<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
浏览文件 @ 7895d935
import Vue from 'vue'
import Vant from 'vant'
Vue.use(Vant)
store/index.js
浏览文件 @ 7895d935
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论