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

chore: 新首页

上级 13906fdd
......@@ -12,7 +12,7 @@
<script>
export default {
props: { title: String },
props: { title: String, titleAlign: { type: String, default: 'left' } },
computed: {
isMobile() {
return this.$store.state.isMobile
......@@ -24,6 +24,7 @@ export default {
<style lang="scss">
.is-pc {
.card-hd {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -36,11 +37,14 @@ export default {
font-size: 32px;
font-weight: bold;
line-height: 1;
text-align: v-bind(titleAlign);
a:hover {
color: var(--main-color);
}
}
.card-hd__aside {
position: absolute;
right: 0;
font-size: 16px;
color: #9b9b9b;
cursor: pointer;
......
<template>
<div class="head-mian">
<div class="head-main">
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
......@@ -95,7 +95,6 @@
</li>
</template>
</ul>
<div class="search-box"></div>
</div>
</div>
</template>
......@@ -502,19 +501,15 @@ li {
padding: 0;
list-style: none;
}
.head-mian {
width: 100%;
min-width: 1200px;
.head-main {
background: #fff;
.color-bar {
height: 10px;
background: #aa1941;
}
.head-top-content {
// width: 1200px;
// margin: 0 auto;
border: 1px solid #ebebeb;
padding: 23px 0 22px;
border-bottom: 1px solid #ebebeb;
padding: 22px 0;
.max-width-content {
display: flex;
align-items: center;
......@@ -581,11 +576,12 @@ li {
display: flex;
// align-items: center;
.nav-item-box {
padding-left: 11px;
width: 100%;
display: flex;
justify-content: space-between;
li {
position: relative;
margin-right: 50px;
// margin-right: 50px;
.name1 {
line-height: 1.5;
}
......
<template>
<AppCard :title="$t('home.abroad.title')">
<AppCard title="$t('home.degree.title')" titleAlign="center">
<template #title>
<nuxt-link to="/studyAbroad">{{ $t('home.abroad.title') }}</nuxt-link>
<nuxt-link to="/internationalDegree">{{ $t('home.degree.title') }}</nuxt-link>
</template>
<div class="content_con">
<div class="con_left con_left1" v-for="(item, index) in abroadList" :key="index">
<div class="left_tit">{{ item.title }}</div>
<div class="left_content">
<ul class="left_con1">
<li v-for="(it, index) in item.children" :key="index">
<AppLink :data="it">
<div class="con">
<img :src="it.img" alt="" class="con_img" />
<div class="con_desc" v-html="it.desc"></div>
</div>
</AppLink>
</li>
</ul>
<div class="line1" v-if="item.isLine"></div>
</div>
<div class="box-row">
<div class="box-col" v-for="(col, index) in abroadList" :key="index">
<div class="box-col__title">{{ col.title }}</div>
<ul class="box-wrap">
<li v-for="(item, index) in col.children" :key="index">
<AppLink :data="item">
<div class="box-inner">
<img :src="item.img" class="box-pic" />
<div class="box-desc" v-html="item.desc"></div>
</div>
</AppLink>
</li>
</ul>
</div>
</div>
</AppCard>
......@@ -34,7 +30,6 @@ export default {
abroadList: [
{
title: this.$t('home.degree.tabBtn1'),
isLine: true,
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
......@@ -50,7 +45,6 @@ export default {
},
{
title: this.$t('home.abroad.tabBtn2'),
isLine: false,
children: [
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
......@@ -71,68 +65,53 @@ export default {
</script>
<style lang="scss" scoped>
.content_con {
.box-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
padding: 40px 32px;
background: #ffffff;
.con_left {
.left_tit {
font-size: 16px;
color: #000000;
text-align: center;
}
.left_content {
display: flex;
margin-top: 20px;
.left_con1 {
display: flex;
li {
width: 260px;
height: 120px;
background: #f9f8f8;
box-sizing: border-box;
.con {
width: 260px;
height: 120px;
display: flex;
align-items: center;
padding: 10px;
}
&:hover {
background: #aa1940;
.con_desc {
color: #f9f8f8;
}
}
.con_img {
width: 128px;
height: 90px;
}
.con_desc {
margin-left: 4px;
text-align: left;
width: 95px;
font-size: 14px;
line-height: 18px;
color: #333333;
// white-space: nowrap;
}
}
li:nth-child(2) {
margin-left: 20px;
}
}
.line1 {
width: 0px;
border: 1px dashed #c4c4c4;
margin: 0 30px;
}
}
column-gap: 100px;
}
.box-col {
position: relative;
}
.box-col:nth-child(even) {
&::before {
position: absolute;
top: 42px;
bottom: 0;
left: -50px;
content: '';
width: 0;
border: 1px dashed #c4c4c4;
}
}
.box-col__title {
padding-left: 10px;
margin-bottom: 26px;
font-size: 16px;
line-height: 1;
border-left: 1px solid var(--main-color);
}
.box-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.box-inner {
display: flex;
align-items: center;
padding: 10px;
&:hover {
color: #fff;
background-color: var(--main-color);
}
.box-pic {
width: 120px;
height: 80px;
}
.box-desc {
flex: 1;
text-align: center;
}
}
</style>
<template>
<AppCard :title="$t('menu.story')" class="home-alumni">
<AppCard :title="$t('menu.story')" class="home-alumni" titleAlign="center">
<template #title
><nuxt-link to="/alumnus/story">{{
$t('menu.story')
}}</nuxt-link></template
><nuxt-link to="/alumnus/story">{{ $t('menu.story') }}</nuxt-link></template
>
<template #header-aside
><nuxt-link to="/alumnus/story">{{ $t('viewMore') }}</nuxt-link></template
>
<app-link
v-if="listData.length > 0"
:data="listData[0]"
:to="`/alumnus/story/${listData[0].id}`"
>
<app-link v-if="listData.length > 0" :data="listData[0]" :to="`/alumnus/story/${listData[0].id}`">
<div class="alumni_content">
<img
class="content_img"
:src="listData[0].web_img_uri"
loading="lazy"
/>
<img class="content_img" :src="listData[0].web_img_uri" loading="lazy" />
<div class="content_desc">
<div class="desc_tit">
{{ listData[0].title }}
......@@ -46,11 +36,9 @@ export default {
project_id: process.env.projectId,
type_tag: 'article_alumni'
}
this.listData = await this.$axios
.get('/api/cms/api/v1/articles', { params })
.then((res) => {
return res.data.data
})
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
}
}
</script>
......
<template>
<div>
<AppCard v-for="(row, index) in rows" :key="index">
<div style="background-color: #fff;overflow: hidden;">
<AppCard titleAlign="center" v-for="(row, index) in rows" :key="index">
<template #title>
<nuxt-link :to="row.to">{{ row.title }}</nuxt-link>
</template>
......@@ -85,8 +85,7 @@ export default {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 63px 40px;
margin-top: 21px;
margin-top: 72px;
li {
width: 156px;
height: 186px;
......
<template>
<AppCard :title="$t('home.industrial.tit')">
<AppCard :title="$t('home.industrial.tit')" titleAlign="center">
<template #title>
<nuxt-link to="/services">{{ $t('home.industrial.tit') }}</nuxt-link>
</template>
......@@ -87,19 +87,16 @@ export default {
.nav-content {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 78px 58px 70px 56px;
margin-top: 20px;
margin-top: 72px;
li {
width: 105px;
background: #ffffff;
margin-right: 20px;
cursor: pointer;
.img_box {
width: 100px;
height: 100px;
background: #f6f5f5;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
......
<template>
<AppCard title="$t('home.degree.title')">
<template #title>
<nuxt-link to="/internationalDegree">{{ $t('home.degree.title') }}</nuxt-link>
</template>
<div class="content_con">
<div class="con_left" v-for="(item, index) in degreeList" :key="index">
<div class="left_tit">{{ item.title }}</div>
<div class="left_content">
<div class="line" v-if="item.isLine"></div>
<ul class="left_con">
<li v-for="(it, index) in item.children" :key="index">
<AppLink :data="it">
<img :src="it.img" alt="" class="con_img" />
<div class="con_desc" v-html="it.desc"></div>
<div style="background-color: #fff;overflow: hidden;">
<AppCard title="$t('home.degree.title')" titleAlign="center">
<template #title>
<nuxt-link to="/internationalDegree">{{ $t('home.degree.title') }}</nuxt-link>
</template>
<div class="box-row">
<div class="box-col" v-for="(col, index) in degreeList" :key="index">
<div class="box-col__title">{{ col.title }}</div>
<ul class="box-wrap">
<li v-for="(item, index) in col.children" :key="index">
<AppLink :data="item">
<div class="box-inner">
<img :src="item.img" class="box-pic" />
<div class="box-desc" v-html="item.desc"></div>
</div>
</AppLink>
</li>
</ul>
</div>
</div>
</div>
</AppCard>
</AppCard>
</div>
</template>
<script>
import AppLink from '@/components/Link'
......@@ -30,7 +31,6 @@ export default {
degreeList: [
{
title: this.$t('home.degree.tabBtn1'),
isLine: false,
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med1.png',
......@@ -56,7 +56,6 @@ export default {
},
{
title: this.$t('home.degree.tabBtn2'),
isLine: true,
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba1.png',
......@@ -76,8 +75,7 @@ export default {
]
},
{
title: '— 博士 —',
isLine: false,
title: '博士',
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/cbu-online.png',
......@@ -87,8 +85,7 @@ export default {
]
},
{
title: '— 企业家学者DBA —',
isLine: true,
title: '企业家学者DBA',
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/cbu-enterprise.png',
......@@ -104,66 +101,53 @@ export default {
</script>
<style lang="scss" scoped>
.content_con {
.box-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
padding: 40px 32px;
background: #ffffff;
.con_left {
height: 192px;
.left_tit {
font-size: 16px;
color: #000000;
text-align: center;
}
.left_content {
display: flex;
margin-top: 20px;
.left_con {
display: flex;
justify-content: space-around;
li {
width: 148px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
&:hover {
background: #aa1940;
padding-top: 10px;
padding-bottom: 14px;
margin-top: -10px;
box-sizing: border-box;
.con_desc {
color: #f9f8f8;
}
}
.con_img {
width: 128px;
height: 90px;
}
.con_desc {
width: 128px;
text-align: center;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
color: #333333;
}
}
li:not(:last-child) {
margin-right: 10px;
}
}
.line {
width: 0px;
border: 1px dashed #c4c4c4;
margin: 0 30px;
}
}
column-gap: 100px;
}
.box-col {
position: relative;
}
.box-col:nth-child(even) {
&::before {
position: absolute;
top: 42px;
bottom: 0;
left: -50px;
content: '';
width: 0;
border: 1px dashed #c4c4c4;
}
}
.box-col__title {
padding-left: 10px;
margin-bottom: 26px;
font-size: 16px;
line-height: 1;
border-left: 1px solid var(--main-color);
}
.box-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.box-inner {
display: flex;
align-items: center;
padding: 10px;
&:hover {
color: #fff;
background-color: var(--main-color);
}
.box-pic {
width: 120px;
height: 80px;
}
.box-desc {
flex: 1;
text-align: center;
}
}
</style>
<template>
<AppCard :title="$t('home.openLesson.title')" class="home-class">
<AppCard :title="$t('home.openLesson.title')" class="home-class" titleAlign="center">
<template #title>
<nuxt-link to="/about/lesson">{{ $t('home.openLesson.title') }}</nuxt-link>
</template>
......
<template>
<AppCard :title="$t('menu.notice')">
<AppCard :title="$t('menu.notice')" titleAlign="center">
<template #title>
<nuxt-link to="/about/news">{{ $t('menu.notice') }}</nuxt-link>
</template>
......@@ -9,17 +9,9 @@
<div class="news-content">
<div class="left-content">
<div class="list">
<div
v-swiper:mySwiper="swiperOption"
ref="mySwiper"
class="swiper-no-swiping"
>
<div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-no-swiping">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in activityList"
:key="index"
>
<div class="swiper-slide" v-for="(item, index) in activityList" :key="index">
<div class="li">
<div class="time-block">
<div class="m-time">{{ formatMD(item.abstract) }}</div>
......@@ -87,9 +79,7 @@ export default {
page: 1,
limit: 3
}
this.listData = await this.$axios
.get('/api/cms/api/v1/articles', { params })
.then((res) => res.data.data)
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
mounted() {
this.getActivity()
......@@ -110,7 +100,7 @@ export default {
project_id: process.env.projectId,
type_tag: 'www_activity'
}
this.$axios.get('/api/cms/api/v1/articles', { params }).then((res) => {
this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.activityList = res.data.data
})
}
......
......@@ -31,10 +31,10 @@
<div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
<h5>{{ $t('aside.apply') }}</h5>
<div class="p">
<el-input v-model="formInfo.name" :placeholder="$t('aside.name')" size="small"></el-input>
<el-input v-model="formInfo.name" :placeholder="$t('aside.name')"></el-input>
</div>
<div class="p">
<el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')" size="small"></el-input>
<el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')"></el-input>
</div>
<div class="p">
<select name="" id="" v-model="formInfo.projectId">
......@@ -43,10 +43,13 @@
<span class="icon el-icon-arrow-down"></span>
</div>
<div class="p sendcode">
<el-input v-model="sendCode" :placeholder="$t('aside.code')" size="small"></el-input
><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
$t('aside.codeBtn')
}}</el-button>
<el-input v-model="sendCode" :placeholder="$t('aside.code')">
<template #append>
<el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
$t('aside.codeBtn')
}}</el-button>
</template>
</el-input>
</div>
<div class="p">
<el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button>
......@@ -323,12 +326,12 @@ export default {
.p {
margin-bottom: 15px;
position: relative;
::v-deep.el-input__inner {
::v-deep(.el-input__inner) {
border: 1px solid #ccc;
line-height: 44px;
height: 44px;
}
::v-deep.el-select {
::v-deep(.el-select) {
width: 100%;
}
select {
......@@ -354,7 +357,7 @@ export default {
right: 10px;
color: #606266;
}
::v-deep.el-button {
::v-deep(.el-button) {
background-color: #ff8e1a;
border: #ff8e1a 1px solid;
color: rgba(255, 255, 255, 0.9);
......@@ -363,10 +366,10 @@ export default {
.sendcode {
display: flex;
justify-content: space-between;
::v-deep.el-input {
::v-deep(.el-input) {
width: 170px;
}
::v-deep.el-button {
::v-deep(.el-button) {
white-space: break-spaces;
width: 94px;
margin-right: 2px;
......@@ -377,7 +380,7 @@ export default {
height: 45px;
justify-content: center;
}
::v-deep.is-disabled {
::v-deep(.is-disabled) {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
......
......@@ -160,15 +160,15 @@ export default {
},
degree: {
title: '国际学位',
tabBtn1: '— 硕士 —',
tabBtn2: '— MBA —',
tabBtn1: '硕士',
tabBtn2: 'MBA',
tabBtn3: 'MBA',
tabBtn4: '博士',
shms: '海外留学<br />SHMS<br />(即将推出)',
msf: '金融硕士<br />MSF',
med: '教育学硕士(儿童)<br />MED',
med: '教育学硕士(儿童)<br />MED',
map: '应用心理学硕士<br />MAP',
cuw: '教育学硕士(家庭)<br />MED',
cuw: '教育学硕士(家庭)<br />MED',
// plan: '未来金融<br />领袖计划',
mba: '数字领导力方向<br/>MBA',
finance: '金融方向<br/>MBA',
......@@ -181,9 +181,9 @@ export default {
},
abroad: {
title: '国际留学',
tabBtn1: '— 硕士 —',
tabBtn2: '— 博士 —',
sbu: '纽约州立大学<br/>石溪分校<br/>金融学硕士<br/>保研项目NSF',
tabBtn1: '硕士',
tabBtn2: '博士',
sbu: '纽约州立大学<br/>石溪分校<br/>金融学硕士<br/>保研项目MSF',
sit: '斯蒂文斯理工学院<br/>工程管理硕士<br/>保研项目MEM',
cbu_plus: '加州浸会大学<br/>全日制工商管理<br/>博士项目DBA',
cbu_online: '加州浸会大学<br/>在线工商管理<br/>博士项目DBA'
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -10,16 +10,16 @@
"generate": "nuxt generate"
},
"dependencies": {
"axios": "^0.21.1",
"cookie-universal-nuxt": "^2.1.4",
"axios": "^0.21.4",
"cookie-universal-nuxt": "^2.2.2",
"core-js": "^3.9.1",
"element-ui": "^2.15.1",
"element-ui": "^2.15.13",
"lodash": "^4.17.21",
"nuxt": "^2.15.3",
"qs": "^6.10.1",
"nuxt": "^2.16.2",
"qs": "^6.11.0",
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4"
"vue-i18n": "^8.28.2"
},
"devDependencies": {
"sass": "^1.32.11",
......
......@@ -15,15 +15,17 @@
<!-- 教育服务 -->
<!-- <education-services /> -->
<!-- 项目公告 -->
<project-notice />
<!-- 教育服务案例 -->
<!-- <service-case /> -->
<!-- 校长寄语 -->
<!-- <headmaster-msg /> -->
<!-- 校友故事 -->
<alumni-stories />
<div style="background-color: #fff;overflow: hidden;">
<project-notice />
<!-- 教育服务案例 -->
<!-- <service-case /> -->
<!-- 校长寄语 -->
<!-- <headmaster-msg /> -->
<!-- 校友故事 -->
<alumni-stories />
</div>
<!-- 公开课 -->
<open-class />
<!-- <open-class /> -->
</div>
</template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论