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

pc和h5整合

上级 f292f920
No preview for this file type
......@@ -88,3 +88,4 @@ sw.*
# Vim swap files
*.swp
.DS_Store
......@@ -30,3 +30,10 @@ export function checkCode(params) {
export function postNes(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data)
}
/**
* 提交留咨信息
*/
export function submit(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data)
}
<!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>
<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>
<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>
<template>
<div>
<!-- 外部链接跳转 -->
<a :href="item.href" target="_blank" v-if="item.href"><slot /></a>
<!-- 站内跳转 -->
<nuxt-link :to="item.path" v-else-if="item.path"><slot /></nuxt-link>
<!-- 事件 -->
<div v-else-if="item.onClick" @click="item.onClick"><slot /></div>
<template v-else><slot /></template>
</div>
</template>
<script>
export default {
props: { item: { type: Object } }
}
</script>
<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/bg' },
{ name: '项目特色', path: '/project/charac' },
{ name: '证书授权', path: '/project/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>
<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>
<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 :item="item">{{ item.name }}</app-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import AppLink from './Link'
export default {
components: { AppLink },
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>
<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>
<template>
<li class="tree-item">
<div class="cell" :class="{ bold: isFolder }" @click="toggle">
<div class="cell-title">
<app-link :item="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 AppLink from './Link'
import TreeItem from './TreeItem'
export default {
name: 'TreeItem',
props: { item: Object },
components: { AppLink, TreeItem },
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>
<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>
<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>
<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
<template>
<component :is="componentName" />
</template>
<script>
import PC from './pc'
import H5 from './h5'
export default {
components: { PC, H5 },
computed: {
isMobile() {
return this.$store.state.isMobile
},
componentName() {
return this.isMobile ? 'H5' : 'PC'
}
}
}
</script>
<template>
<div class="foot-mian">
<div class="foot-box">
<div class="foot-content">
<div class="left-content">
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
{{ $t('foot.link1') }}
</a>
</div>
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
{{ $t('foot.link2') }}
</a>
</div>
<div>
<a href="http://www.pbcsf.tsinghua.edu.cn" target="_blank" >
{{ $t('foot.link3') }}
</a>
</div>
<div>
<a href="http://www.pbcsf.tsinghua.edu.cn" target="_blank" >
{{ $t('foot.link4') }}
</a>
</div>
<div>
<a href="http://www.ezijing.com" target="_blank" >
{{ $t('foot.link5') }}
</a>
</div>
<!-- <div>
合作大学官网
</div> -->
</div>
<div class="center-content">
<div class="address" v-html="$t('foot.address')"></div>
<div class="phone" v-html="$t('foot.contact')"></div>
<div class="mail" v-html="$t('foot.email')"></div>
</div>
<div class="right-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/734d8fd7b853b838e5e029049e2d9db3.png" alt="" class="code">
<div class="tips-txt">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" alt="">
<div class="txt">{{ $t('foot.weChat') }}</div>
</div>
</div>
</div>
<!-- <div class="links">
友情链接:中国人民银行 中国涉外监管网 中国银行协会 中国证券投资基金业协会
</div> -->
</div>
<div class="copyright" style="height: 40px;line-height: 40px;color: rgba(153, 153, 153, 1);background: #fff;">
<div class="inner" style="width: 100%;justify-content: center;display: flex;">
<p style="font-size: 12px;">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆(北京)教育科技股份有限公司</p>
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/" style="color: rgba(153, 153, 153, 1);text-decoration:none;margin-left: 10px;">
<p style="font-size: 12px;">京ICP证150431号</p>
</a>
<a target="_blank" class="record" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
style="color: rgba(153, 153, 153, 1);text-decoration:none;align-items: center;display: flex;margin-right: 5px;">
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" alt=""
style="width: 20px;height: 20px;margin: 0 6px;display: block;">
<p style="font-size: 12px;">安备 11010802023681号</p>
</a>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="color: rgba(153, 153, 153, 1);text-decoration:none;">
<p style="font-size: 12px;">京ICP备15016866号-1</p>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.foot-mian{
width: 100%;
background: rgba(170, 25, 65, 1);
.links{
padding-top: 12px;
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #FFFFFF;
opacity: 0.6;
width: 1200px;
margin: 0 auto;
}
.foot-box{
padding: 80px 0 35px;
width: 1200px;
margin: 0 auto;
}
.foot-content{
// height: 300px;
display: flex;
.left-content{
div{
opacity: 0.7;
font-size: 22px;
font-weight: 300;
line-height: 50px;
color: #FFFFFF;
text-decoration: underline;
letter-spacing: 3px;
}
}
.center-content{
font-size: 16px;
line-height: 32px;
color: #FFFFFF;
letter-spacing: 3px;
opacity: 0.7;
margin-left: 88px;
}
.right-content{
margin-left: auto;
padding-top: 20px;
.code{
width: 120px;
display: block;
}
.tips-txt{
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
img{
width: 21px;
display: block;
}
.txt{
font-size: 14px;
color: #FFFFFF;
margin-left: 7px;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="head-mian">
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<app-link :item="{ path: '/' }">
<img src="https://zws-imgs-pub.ezijing.com/static/public/307f688850f8308a5c944bd129436fe0.png" />
</app-link>
<div class="user" v-if="user.id">
<span>{{ user.realname || user.nickname }}</span
><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span>
</div>
<div class="login-btn-box" v-else>
<div class="login"><a :href="loginURL">{{ $t('menu.fastLogin') }}</a></div>
<div class="register"><a :href="registerURL">{{ $t('menu.register') }}</a></div>
</div>
<div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
</div>
</div>
</div>
<div class="head-nav-content max-width-content">
<app-menu></app-menu>
<div class="search-box"></div>
</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
import AppMenu from '@/components/Menu'
export default {
components: {
AppMenu,
AppLink
},
data() {
return {}
},
methods: {
logout() {
this.$store.dispatch('logout').then(() => {
this.$router.replace('/')
})
},
switchLocale(locale) {
this.$i18n.locale = locale
this.$cookies.set('lang', locale)
process.client && location.reload()
}
},
computed: {
user() {
return this.$store.state.user || {}
},
loginURL() {
return process.client
? `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
location.origin + this.$route.fullPath
)}`
: ''
},
registerURL() {
return process.client
? `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(location.origin + this.$route.fullPath)}`
: ''
}
}
}
</script>
<style lang="scss" scoped>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.head-mian {
width: 100%;
background: #fff;
.color-bar {
height: 10px;
background: #aa1941;
}
.head-top-content {
// width: 1200px;
// margin: 0 auto;
border: 1px solid #ebebeb;
padding: 23px 0 22px;
.max-width-content {
display: flex;
align-items: center;
img {
height: 55px;
cursor: pointer;
display: block;
}
.user {
margin-left: auto;
font-size: 14px;
em {
font-size: 14px;
font-style: normal;
padding: 0 14px;
}
.logout {
cursor: pointer;
}
}
.login-btn-box {
margin-left: auto;
display: flex;
div {
width: 72px;
height: 24px;
box-sizing: border-box;
text-align: center;
line-height: 24px;
font-size: 12px;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
}
.login {
background: #aa1941;
color: #fff;
}
.register {
color: #333333;
border: 1px solid #eaeaea;
}
}
.language {
margin-left: 24px;
font-size: 14px;
color: #333;
cursor: pointer;
}
}
}
.max-width-content {
width: 1200px;
margin: 0 auto;
}
.head-nav-content {
height: 72px;
display: flex;
align-items: center;
}
}
</style>
<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>
<template>
<div class="link-content">
<template v-if="item.news">
<a
:target="item.news.data.uri !== '' ? '_blank' : '_self'"
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`">
<slot />
</a>
</template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div>
</template>
<script>
export default {
props: { item: { type: Object } }
}
</script>
<style lang="scss" scoped>
.link-content{
height: 100%;
}
</style>
<template>
<ul class="nav-item-box" @mouseleave="navLeave">
<template v-for="(item, index) in navData">
<li :key="index">
<div :class="getNameActive(item)">
<template v-if="!item.path">
<template v-if="item.click">
<span @click="showEnroll">{{ item.name }}</span>
</template>
<template v-else>
{{ item.name }}
</template>
</template>
<template v-else>
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</template>
</div>
<div class="child-item" v-if="item.childern">
<div class="one-level">
<template v-for="(level2Item, level2Index) in item.childern">
<div
:class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
:key="level2Index + 'level2'"
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')"
>
<app-link :item="{
path: level2Item.path
}">
<div class="name">
{{ level2Item.name }}
</div>
<div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
</app-link>
</div>
</template>
</div>
</div>
</li>
</template>
</ul>
</template>
<script>
import AppLink from '@/components/Link'
export default {
name: 'AppMenu',
components: { AppLink },
data() {
return {
navData: [
{
name: this.$t('menu.project'),
path: '/project-intro/bg',
childern: [
{ name: this.$t('menu.projectChild.bg'), path: '/project-intro/bg' },
{ name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' },
{ name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' }
]
},
{
name: this.$t('menu.course'),
path: '/about/course',
childern: [
{ name: this.$t('menu.courseChild.set'), path: '/about/course' },
{ name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
]
},
{
name: this.$t('menu.news'),
path: '/news/hot',
childern: [
{ name: this.$t('menu.newsChild.hot'), path: '/news/hot' },
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' }
]
},
{
name: this.$t('menu.recruit'),
path: '/apply/relevant',
childern: [
{ name: this.$t('menu.recruitChild.apply'), path: '/apply/relevant' },
{ name: this.$t('menu.recruitChild.cost'), path: '/apply/support' },
{ name: this.$t('menu.recruitChild.problem'), path: '/apply/problem' }
]
},
{
name: this.$t('menu.alumni'),
path: '/alumni/outstanding',
childern: [
{ name: this.$t('menu.alumniChild.outstanding'), path: '/alumni/outstanding' },
{ name: this.$t('menu.alumniChild.share'), path: '/alumni/sharing' }
]
},
{
name: this.$t('menu.enroll'),
path: '/my'
}
],
time: null
}
},
methods: {
navLeave() {
this.navData.map(item => {
if (item.childern) {
item.childern.map(cItem => {
cItem.isShow = false
})
}
})
this.$forceUpdate()
},
levelShow(item, isOut) {
if (item.childern) {
if (isOut) {
clearTimeout(this.time)
this.time = setTimeout(() => {
item.isShow = false
}, 500)
return
}
this.navLeave()
item.isShow = true
} else {
this.navLeave()
}
}
},
computed: {
getNameActive() {
return item => {
const currentPath = this.$route.path
if (currentPath.includes(item.path)) {
return 'name active'
} else {
let className = 'name'
if (item.childern) {
item.childern.map(cData => {
currentPath.includes(cData.path) && (className = 'name active')
})
}
return className
}
}
}
}
}
</script>
<style lang="scss" scoped>
.nav-item-box {
padding-left: 11px;
display: flex;
li {
position: relative;
margin-right: 60px;
.name {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active {
font-weight: 500;
color: #aa1941;
a {
// font-weight: 500;
color: #aa1941;
}
}
}
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a {
// font-weight: 500;
color: #aa1941;
}
}
.child-item {
.one-level {
display: block;
}
}
}
.child-item {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 72px;
left: -10px;
display: flex;
background: #fff;
z-index: 999;
.one-level {
padding: 36px 24px 0;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: none;
.li {
margin-bottom: 36px;
display: flex;
justify-content: space-between;
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
a {
color: #333333;
font-size: 16px;
}
}
.el-icon-arrow-right {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
}
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a {
color: rgba(170, 25, 65, 1);
}
}
.el-icon-arrow-right {
color: rgba(170, 25, 65, 1);
}
}
}
}
.two-level {
pointer-events: auto;
padding: 34px 41px 0 24px;
.name {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
&:hover {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
}
}
}
}
}
</style>
<template>
<div>
<Head />
<Nuxt />
<rightAside />
<Foot v-if="hasFooter" />
</div>
<app-layout v-bind="$attrs"></app-layout>
</template>
<script>
import AppLayout from '@/components/layout'
export default {
props: { hasFooter: { Boolean, default: true } }
components: { AppLayout }
}
</script>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
export default function(context) {
const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
isMobile && context.redirect('https://h5.ezijing.com/')
context.store.commit('setIsMobile', isMobile)
}
......@@ -45,10 +45,11 @@ export default {
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
css: ['vant/lib/index.css', '@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/vant',
'@/plugins/i18n',
'@/plugins/router',
'@/plugins/axios',
......
......@@ -17,6 +17,7 @@
"qrcode.vue": "^1.7.0",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
......@@ -1973,6 +1974,15 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
},
"node_modules/@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
......@@ -2068,6 +2078,19 @@
"node": ">=0.10.0"
}
},
"node_modules/@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
"integrity": "sha512-4Hvq4tl4grCOJLZ0e8ZaivBV8xOcmTPmTT8BDkTrEIKqnDowRFDdsXxcHECzWmbmMx+CYGdngvd2Cq8YR9DfKA=="
},
"node_modules/@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"dependencies": {
"@popperjs/core": "^2.9.2"
}
},
"node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -11227,6 +11250,21 @@
"node": ">= 0.4.0"
}
},
"node_modules/vant": {
"version": "2.12.21",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.21.tgz",
"integrity": "sha512-BvS3tLZS68drJJzs0Ymqj819BQbU3evdUYaJClGzXEXgUZb2pPFBFsD69NE0L7iHcGPYwQhRSpvg+budk8Xr7A==",
"dependencies": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.5.3",
"@vant/popperjs": "^1.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
},
"peerDependencies": {
"vue": ">= 2.6.0"
}
},
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......@@ -11278,6 +11316,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
},
"node_modules/vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"node_modules/vue-loader": {
"version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
......@@ -14497,6 +14540,11 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
},
"@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
......@@ -14589,6 +14637,19 @@
}
}
},
"@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
"integrity": "sha512-4Hvq4tl4grCOJLZ0e8ZaivBV8xOcmTPmTT8BDkTrEIKqnDowRFDdsXxcHECzWmbmMx+CYGdngvd2Cq8YR9DfKA=="
},
"@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"requires": {
"@popperjs/core": "^2.9.2"
}
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -22209,6 +22270,18 @@
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"vant": {
"version": "2.12.21",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.21.tgz",
"integrity": "sha512-BvS3tLZS68drJJzs0Ymqj819BQbU3evdUYaJClGzXEXgUZb2pPFBFsD69NE0L7iHcGPYwQhRSpvg+budk8Xr7A==",
"requires": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.5.3",
"@vant/popperjs": "^1.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
}
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......@@ -22254,6 +22327,11 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
},
"vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"vue-loader": {
"version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
......
......@@ -19,6 +19,7 @@
"qrcode.vue": "^1.7.0",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.21",
"viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
......
import Vue from 'vue'
import Vant from 'vant'
Vue.use(Vant)
import { getUser, logout } from '@/api/my'
export const state = () => ({
user: {}
user: {},
isMobile: false,
searchVisible: false,
menuVisible: false
})
export const mutations = {
......@@ -9,6 +12,15 @@ export const mutations = {
},
removeUser(state) {
state.user = {}
},
setIsMobile(state, isMobile) {
state.isMobile = isMobile
},
toggleSearch(state, visible) {
state.searchVisible = visible
},
toggleMenu(state, visible) {
state.menuVisible = visible
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论