Skip to content

P
project-www-pc
提交 2ae02690 authored 作者: matian's avatar matian
浏览文件
操作

项目优化

上级 5ec5a257
隐藏空白字符变更
内嵌 并排
正在显示 包含 108 行增加 和 230 行删除
assets/studyAbroadNavList.js
浏览文件 @ 2ae02690
......@@ -2,9 +2,9 @@ export default [
{
name: '最新动态',
path: '/studyAbroad/news'
},
{
name: '常见问题',
path: '/studyAbroad/qa'
}
// {
// name: '常见问题',
// path: '/studyAbroad/qa'
// }
]
components/ProjectCard.vue
浏览文件 @ 2ae02690
......@@ -4,10 +4,7 @@
<div class="project-list">
<div class="project-item" v-for="(item, index) in list" :key="index">
<!-- <AppLink :data="item"><img :src="item.imgUrl"/></AppLink> -->
<div
class="project-item-pic"
:style="`background:url(${item.imgUrl}) no-repeat center;background-size: 100% 100%;`"
>
<div class="project-item-pic" :style="`background:url(${item.imgUrl}) no-repeat center / 100% 100%; `">
<!-- <img :src="item.imgUrl" /> -->
<ul class="tools">
<li @click="handleSubmit(item)">我要报名</li>
......
components/ProjectCard1.vue deleted 100644 → 0
浏览文件 @ 5ec5a257
<template>
<AppCard :title="title" style="margin-top:50px;">
<template #header-aside><nuxt-link :to="baseUrl" v-if="baseUrl">查看更多+</nuxt-link></template>
<div class="project-list">
<div class="project-item" v-for="(item, index) in list" :key="index">
<!-- <AppLink :data="item"><img :src="item.imgUrl"/></AppLink> -->
<div class="project-item-pic">
<img :src="item.imgUrl" />
</div>
<ul class="tools">
<li @click="handleSubmit(item)">我要报名</li>
<li><AppLink :data="item">了解详情</AppLink></li>
</ul>
<!-- <div class="tools">
<el-button type="primary" @click="handleSubmit(item)">我要报名</el-button>
<AppLink :data="item" style="margin-left:20px;">
<el-button plain type="primary">了解详情</el-button>
</AppLink>
</div> -->
</div>
</div>
</AppCard>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
import AppLink from '@/components/Link.vue'
export default {
name: 'ProjectCard',
props: { list: { type: Array, default: () => [] }, title: String, baseUrl: String },
components: { AppCard, AppLink },
data() {
return {}
},
methods: {
handleSubmit(data) {
if (data.onClick) {
data.onClick()
} else {
const formEl = document.querySelector('#form')
if (!formEl) return
window.scrollTo(0, formEl.offsetTop)
if (this.$parent.$refs.formSubmit) {
this.$parent.$refs.formSubmit.form.project_id = data.project_id
}
}
}
}
}
</script>
<style lang="scss" scoped>
.project-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
}
.project-item {
background-color: #fff;
.project-item-pic {
height: 345px;
overflow: hidden;
}
img {
width: 100%;
}
&:hover {
box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
}
}
.tools {
position: relative;
// margin-top: -20px;
padding: 25px 0;
display: flex;
justify-content: center;
border-top: 1px dashed #e1e1e1;
z-index: 1;
li {
flex: 1;
font-size: 16px;
font-weight: 400;
line-height: 25px;
color: #777;
text-align: center;
cursor: pointer;
&:hover {
font-weight: 500;
color: #333333;
}
}
li:first-child {
color: #a81840;
}
li + li {
border-left: 1px solid #e1e1e1;
}
}
</style>
components/TeacherCard.vue
浏览文件 @ 2ae02690
......@@ -101,6 +101,7 @@ export default {
font-size: 14px;
margin-top: 20px;
color: #575964;
padding: 0 5px 0 5px;
}
}
</style>
components/TeacherCard1.vue deleted 100644 → 0
浏览文件 @ 5ec5a257
<template>
<AppCard title="优秀师资">
<swiper ref="mySwiper" :options="swiperOptions" class="teacher-list">
<swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
<div class="teacher-item-inner">
<img :src="item.imgUrl" />
<p>{{ item.name }}</p>
</div>
<div class="teacher-item-cover">
<h3>{{ item.name }}</h3>
<p>{{ item.project }} | {{ item.title }}</p>
<div v-html="item.desc"></div>
</div>
</swiper-slide>
</swiper>
</AppCard>
</template>
<script>
import AppCard from '@/components/AppCard.vue'
export default {
name: 'TeacherCard',
props: { list: { type: Array, default: () => [] } },
components: { AppCard },
data() {
return {
swiperOptions: {
autoplay: true,
loop: true,
slidesPerView: 'auto',
spaceBetween: 20
}
}
}
}
</script>
<style lang="scss" scoped>
.teacher-list {
margin-bottom: 60px;
}
.teacher-item {
position: relative;
width: 286px;
height: 258px;
&:hover {
.teacher-item-cover {
transform: translateY(0);
}
}
}
.teacher-item-inner {
position: relative;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
p {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 20px;
height: 34px;
font-size: 16px;
line-height: 34px;
color: #ffffff;
background: rgba(0, 0, 0, 0.39);
}
}
.teacher-item-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #a81840;
color: #fff;
padding: 10px;
transform: translateY(100%);
transition: all 0.3s;
h3 {
font-size: 20px;
font-weight: 500;
line-height: 28px;
text-align: center;
}
p {
margin-top: 8px;
margin-bottom: 20px;
text-align: center;
}
}
</style>
pages/internationalDegree/index.vue
浏览文件 @ 2ae02690
<template>
<div>
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner.jpg" />
<!-- <img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" /> -->
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in listData" :key="index">
<img :src="item.web_img_uri" />
</swiper-slide>
</swiper>
<template>
<div class="prev-button"></div>
<div class="next-button"></div>
</template>
</div>
<FormSubmit id="form" ref="formSubmit"></FormSubmit>
<div class="w1200">
<ProjectCard title="热门专业" :list="projectList"></ProjectCard>
<div class="why">
<h1 class="why-title">为什么选择紫荆的国际免联考在线学位课程？</h1>
<div class="why-list">
......@@ -16,21 +26,29 @@
</div>
</div>
</div>
<app-card title="常见问题">
<app-card title="申请流程" style="margin-top:68px">
<div class="process">
<img src="https://webapp-pub.ezijing.com/www/pc/internationalDegree/process.png" />
</div>
</app-card>
<!-- <app-card title="常见问题">
<template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
<ul class="qa-list">
<li v-for="(item, index) in qaList" :key="index">
<nuxt-link to="/internationalDegree/qa">{{ item.question }}</nuxt-link>
</li>
</ul>
</app-card> -->
<app-card title="报考指南" style="margin-top: 74px;">
<ul class="qa-list2">
<li v-for="(item, index) in qaList2" :key="index">
<h2>Q：{{ item.question }}</h2>
<p>{{ item.answer }}</p>
</li>
</ul>
</app-card>
<TeacherCard :list="teacherList" style="margin-top: 96px"></TeacherCard>
<NewsCard baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
<TeacherCard :list="teacherList"></TeacherCard>
<app-card title="申请流程">
<div class="process">
<img src="https://webapp-pub.ezijing.com/www/pc/internationalDegree/process.png" />
</div>
</app-card>
</div>
<FormSubmit></FormSubmit>
</div>
......@@ -38,9 +56,9 @@
<script>
import AppCard from '@/components/AppCard.vue'
import ProjectCard from '@/components/ProjectCard1.vue'
import ProjectCard from '@/components/ProjectCard.vue'
import NewsCard from '@/components/NewsCard.vue'
import TeacherCard from '@/components/TeacherCard1.vue'
import TeacherCard from '@/components/TeacherCard.vue'
import FormSubmit from '@/components/FormSubmit.vue'
import qaList from '@/assets/internationalDegreeQA.js'
......@@ -65,6 +83,24 @@ export default {
components: { AppCard, ProjectCard, NewsCard, TeacherCard, FormSubmit },
data() {
return {
listData: [
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner1.jpg' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner2.jpg' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner3.jpg' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner4.jpg' }
],
swiperOption: {
speed: 400,
autoplay: true,
delay: 4000,
observer: true,
observerParent: true,
navigation: {
nextEl: '.next-button',
prevEl: '.prev-button'
},
loop: true
},
whyList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01.png',
......@@ -99,26 +135,28 @@ export default {
],
// 热门专业
projectList: [
{
project_id: '1001',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_kelley.png',
href: 'https://kelley.ezijing.com/'
},
{
project_id: '1006',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_ciis.png',
href: 'https://ciis.ezijing.com/'
},
{
project_id: '1005',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cu.png',
href: 'https://cu.ezijing.com/'
},
{
project_id: '1012',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_marywood.png',
href: 'https://marywood.ezijing.com/'
},
{
project_id: '1021',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cuw.png',
href: 'https://cuw.ezijing.com/'
},
{
project_id: '1005',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cu.png',
href: 'https://cu.ezijing.com/'
},
{
project_id: '1008',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_shms.png',
......@@ -152,16 +190,14 @@ export default {
name: 'Glenn Hartelius',
project: '师资-CIIS',
title: '博士',
desc:
'《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
desc: '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_02.jpg',
name: '钟思嘉',
project: '师资-CIIS',
title: '教授',
desc:
'美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
desc: '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_03.jpg',
......@@ -175,8 +211,7 @@ export default {
name: '胡晓毅',
project: '师资-CU',
title: '教授',
desc:
'北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
desc: '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_05.jpg',
......@@ -215,6 +250,47 @@ export default {
desc:
'擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
}
],
qaList2: [
{
question: '学校是否正规？学籍是否正规？',
answer:
'紫荆教育所有合作院校均为各国官方教育机构认证的合规大学，受到US.NEWS,QS，AACSB,ACBSP等数十个国际权威评级和教育评价组织认可。所有学生均注册正规学籍，终身可查。'
},
{
question: '在线学习颁发的学位证与出国留学颁发的证书有何不同？',
answer:
'颁发正规学位，与留学生完全一样，且具有相同的形式和法律效力。不存在在线学位、远程学位、校证、特殊学位等说法。'
},
{
question: '关于上课形式，课程体系，老师水平',
answer:
'以网络授课为主。配合线下课，企业参访，工作坊，国际访学等多种授课形式。课程体系与授课老师完全按照在校生标准配置。'
},
{
question: '学制多久？能否确保拿到学位证书？',
answer:
'国际在线学位项目的学制一般为16—24个月不等。只要按时上课，完成作业并修满规定学分就可获得所修项目的学位证书。'
},
{
question: '必须要本科吗？非统招本科学历是否可以，大专学历能上吗？',
answer: '部分项目针对大专学历少量择优录取，详情请咨询招生顾问老师。非统招，专升本都可以上。'
},
{
question: '申请紫荆教育在线国际学位项目需要提交哪些材料？',
answer:
'需提交：本科学历证书、本科阶段（中、英文双语版成绩单）、英文版《教育部学历证书电子注册备案表》、及推荐信等个人能力证明文件。'
},
{
question: '每周要花多久用于学习？遇到急事可以请假或者补课吗？',
answer:
'学习时长因人而异，大部分学员保持在每周上2-3次课。每次2个小时左右。可以请假，但部分公开课，线下课及直播课无法补课。'
},
{
question: '可以做中留服认证吗？',
answer:
'因国家政策规定，不出国的在线学习项目都不能申请中留服认证。对于市场上承诺可以做中留服的项目请注意鉴别，避免受骗。'
}
]
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论