Skip to content

P
project-online-old
提交 f04ed8aa authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 4540bfec
隐藏空白字符变更
内嵌 并排
正在显示 包含 723 行增加 和 1747 行删除
src/assets/css/reset.css
浏览文件 @ f04ed8aa
@charset "utf-8";
/*！--CSS重置和样式初始化(参考Normalize.css) ~ v1.0--*/
body,
h1,
h2,
......@@ -18,6 +14,10 @@ dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
......@@ -26,169 +26,56 @@ td {
margin: 0;
padding: 0;
}
html {
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%;
}
body {
font-style: normal;
font-family: '\5FAE\8F6F\96C5\9ED1', Helvetica, sans-serif;
table {
border-collapse: collapse;
border-spacing: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
ul,
ol {
ol,
li {
list-style: none;
}
a {
text-decoration: none;
background-color: transparent;
}
a:hover,
a:active {
outline-width: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
em,
i {
font-style: normal;
}
hr {
border: 0;
height: 1px;
strong,
b {
font-weight: normal;
}
img {
border-style: none;
}
img:not([src]) {
display: none;
}
svg:not(:root) {
overflow: hidden;
border: none;
}
input,
textarea,
button,
img {
vertical-align: middle;
}
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: inherit;
text-decoration: none;
}
button,
input,
button,
select,
textarea {
font-size: 100%;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
border: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
textarea {
overflow: auto;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
padding: 0;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
border-radius: 0;
font: inherit;
}
.clear:after {
display: block;
height: 0;
content: '';
clear: both;
}
a,
a:active,
a:visited,
a:hover,
a:target {
display: block;
}
* {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-webkit-backface-visibility: hidden;
}
input.checkbox {
-webkit-appearance: checkbox;
}
div > img {
vertical-align: middle;
}
input,
textarea {
-webkit-user-select: text !important;
user-select: text !important;
cursor: pointer;
textarea:focus {
outline: 0;
}
:root {
--main-color: #fa9e3b;
--main-color: #faa634;
}
src/components/formBox.vue 0 → 100644
浏览文件 @ f04ed8aa
<template>
<div class="homepage_message" :style="{ backgroundImage: 'url(' + bg + ')' }">
<div class="homepage_message-main">
<h3>
<span>留下您的信息</span>
</h3>
<h5>紫荆教育学位顾问为您提供专业的服务</h5>
<div class="homepage_message_body">
<div class="body_img">
<img src="@/assets/images/mes1.png" style="width: 472px;" />
</div>
<div class="body_input">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item prop="phone">
<el-input v-model="ruleForm.phone" placeholder="手机"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="isLoading" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
export default {
name: 'FormBox',
props: {
bg: { type: String, default: 'https://webapp-pub.ezijing.com/project/cuw/form_bg_1.png' }
},
data() {
var checkPhone = (rule, value, callback) => {
var reg = /^1[345789]\d{9}$/
if (!reg.test(value)) {
callback(new Error('请输入11位手机号！'))
} else {
callback()
}
}
return {
ruleForm: {
name: '',
phone: '',
channel: 19960,
project_id: 1021
},
isLoading: false,
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
phone: [{ required: true, validator: checkPhone, trigger: 'blur' }]
}
}
},
methods: {
submit() {
this.$refs.ruleForm.validate().then(() => {
this.isLoading = true
cAction.Infos.postInfo(this.ruleForm)
.then(() => {
this.$alert('提交成功', '信息', { confirmButtonText: '确定', type: 'success' })
this.isLoading = false
})
.catch(() => {
this.isLoading = false
})
})
}
}
}
</script>
<style lang="scss" scoped>
.homepage_message {
position: relative;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
height: calc(100vh - 100px);
min-height: 600px;
.homepage_message-main {
width: 80%;
margin: 0 auto;
h3 {
margin-top: 80px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
span {
display: inline-block;
position: relative;
&::before {
content: '';
position: absolute;
bottom: -4px;
height: 3px;
background: #ffffff;
width: 100%;
}
}
}
h5 {
padding-top: 24px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
opacity: 0.6;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.homepage_message_body {
padding: 63px 0px 0px 0px;
display: flex;
width: 100%;
.body_img {
flex: 1;
padding: 0px 30px;
}
.body_input {
flex: 1;
padding: 0px 30px;
.demo-ruleForm {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.el-input {
max-width: 324px;
}
::v-deep .el-input__inner {
border: 0px;
background: transparent;
border-bottom: 2px solid #fff;
border-radius: 0px;
padding: 0px;
color: #fff;
}
::v-deep .el-button {
width: 132px;
height: 54px;
border-radius: 4px;
.el-icon-loading {
color: #fff !important;
}
}
}
}
}
}
</style>
src/components/home/banner.vue 0 → 100644
浏览文件 @ f04ed8aa
<template>
<div class="home-banner">
<el-carousel arrow="never" class="banner-swiper">
<el-carousel-item v-for="item in bannerList" :key="item.src"><img :src="item.src"/></el-carousel-item>
</el-carousel>
<div class="cover">
<h1>威斯康星协和大学</h1>
<h2>家庭教育硕士</h2>
<p>
围绕“广义家庭教育”进行教学，从家庭系统的视角深度剖析全部家庭元素以及家庭与社会的关系，从根本上理解并解决家庭的问题。
</p>
</div>
<div class="video-box" v-show="isPlaying">
<video ref="video" src="https://webapp-pub.ezijing.com/project/cuw/video.mp4" preload="auto" playsinline></video>
</div>
<div class="button-group">
<div class="button-item"><router-link to="profession">了解更多</router-link></div>
<div class="button-item button-play" :class="{ 'is-playing': isPlaying }" @click="togglePlay">学校视频</div>
</div>
</div>
</template>
<script>
export default {
name: 'HomeBanner',
data() {
return {
isPlaying: false,
bannerList: [
{
src: 'https://webapp-pub.ezijing.com/project/cuw/banner_1.jpg'
},
{
src: 'https://webapp-pub.ezijing.com/project/cuw/banner_2.jpg'
},
{
src: 'https://webapp-pub.ezijing.com/project/cuw/banner_3.jpg'
},
{
src: 'https://webapp-pub.ezijing.com/project/cuw/banner_4.jpg'
}
]
}
},
methods: {
togglePlay() {
this.isPlaying = !this.isPlaying
this.$nextTick(() => {
this.isPlaying ? this.$refs.video.play() : this.$refs.video.pause()
})
}
}
}
</script>
<style lang="scss" scoped>
.home-banner {
position: relative;
height: calc(100vh - 40px);
min-height: 660px;
}
.banner-swiper {
height: 100%;
::v-deep .el-carousel__container {
height: 100%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.video-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 11;
background-color: #000;
video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.button-group {
z-index: 21;
position: absolute;
left: 100px;
bottom: 30%;
display: flex;
.button-item {
width: 132px;
border: 1px solid;
border-radius: 5px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
color: #fff;
line-height: 54px;
text-align: center;
cursor: pointer;
}
.button-item + .button-item {
margin-left: 20px;
}
.button-play {
width: 138px;
padding-right: 20px;
background: #faa634 url('@/assets/images/play.png') no-repeat right 20px center;
border-color: #faa634;
&.is-playing {
background: url('@/assets/images/stop.png') no-repeat right 20px center;
border-color: #fff;
}
}
}
.cover {
position: absolute;
top: 0;
right: 100px;
padding: 0 40px;
width: 434px;
height: 100%;
background: url(https://webapp-pub.ezijing.com/project/cuw/banner_top.jpg) no-repeat center;
background-size: cover;
z-index: 10;
box-sizing: border-box;
padding-top: 25%;
h1 {
font-size: 36px;
color: #fff;
font-weight: 500;
text-align: right;
}
h2 {
margin-top: 16px;
font-size: 26px;
color: #fff;
font-weight: 400;
text-align: right;
}
p {
font-size: 18px;
color: #fff;
line-height: 2;
text-align: justify;
}
}
</style>
src/components/home/school.vue 0 → 100644
浏览文件 @ f04ed8aa
<template>
<div class="home-school">
<div class="info">
<div class="subtitle">
<h2>走进百年名校CUW</h2>
</div>
<p>
美国威斯康星协和大学（Concordia University
Wisconsin，简称CUW）成立于1881年，是一所综合型非营利性的综合型大学。学校位于美国威斯康星州Mequon市，坐落于美国五大湖之一的风光旖旎的密歇根湖畔。CUW是美国著名的协和大学系统（Concordia
University System）的六所大学中排名最高、历史最悠久、规模最大的高校。
</p>
</div>
<div class="card-list">
<div class="card-item">
<img src="https://webapp-pub.ezijing.com/project/cuw/school_01.jpg" />
<div class="card-item__inner">
<h3>总统母校</h3>
<p>
2004年5月，时任美国总统的乔治·沃克·布什先生乘坐总统的空军一号专机抵达威斯康星协和大学，慷慨激昂地发表了他在这所学校的荣誉博士毕业演讲。
</p>
</div>
</div>
<div class="card-item">
<img src="https://webapp-pub.ezijing.com/project/cuw/school_02.jpg" />
<div class="card-item__inner">
<h3>学校构成</h3>
<p>
CUW拥有6大学院，承担70余个本科、硕士和博士专业的教学与科研工作。来自33个国家、42个州的8000余名在校本科生和研究生在此就读，学校文体活动丰富，拥有40余个不同领域的学生组织和30多支体育校队。
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.home-school {
.info {
padding: 50px 100px;
.subtitle {
padding: 20px 0;
text-align: center;
h2 {
display: inline-block;
padding-bottom: 12px;
font-size: 40px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #222222;
line-height: 1;
border-bottom: 3px solid var(--main-color);
}
}
p {
font-size: 20px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #535353;
line-height: 36px;
}
}
}
.card-list {
display: flex;
}
.card-item {
position: relative;
flex: 1;
height: 445px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card-item__inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
padding-top: 250px;
background: rgba(0, 0, 0, 0.52);
h3 {
text-align: center;
font-size: 30px;
font-weight: 500;
line-height: 26px;
padding-bottom: 10px;
}
p {
padding: 0 30px;
font-size: 20px;
line-height: 34px;
}
}
</style>
src/components/layout-register.vue
浏览文件 @ f04ed8aa
......@@ -31,12 +31,12 @@ export default {
.layout-register {
.layout-register-header {
padding: 20px 0px;
color: #fa9e3b;
color: #faa634;
.border {
width: 100%;
height: 2px;
display: inline-block;
background: #fa9e3b;
background: #faa634;
}
}
.layout-register-body {
......
src/components/layout/components/slider.vue deleted 100644 → 0
浏览文件 @ 4540bfec
<template>
<div
class="slider"
:class="{
'ts-slider': navigation && tempRoute.meta && !tempRoute.meta.details,
bg_fff: tempRoute.meta && tempRoute.meta.details
}"
>
<div class="slider-body">
<div class="slider-icon" v-show="tempRoute.meta && !tempRoute.meta.details">
<el-image
class="logo-new-1"
v-if="navigation"
src="https://zws-imgs-pub.ezijing.com/static/public/2a5dca328ca63abcf1c8496180adc485.png"
></el-image>
<el-image class="logo-new-2" v-else :src="require('@/assets/images/logofff.png')"></el-image>
</div>
<div class="slider-icon" v-show="tempRoute.meta && tempRoute.meta.details">
<el-image
class="logo-new-1"
src="https://zws-imgs-pub.ezijing.com/static/public/2a5dca328ca63abcf1c8496180adc485.png"
></el-image>
</div>
<div class="slider-banner">
<div v-for="item in navList" :key="item.path" class="tab-item">
<div class="app-link" :class="{ 'router-link-active': $route.path.includes(item.path) }">
<router-link tag="span" :to="item.path" class="tab-link">{{ item.title }}</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default {
mixins: [dyHeight],
data() {
return {
tempRoute: {},
navList: [
{ title: '首页', path: '/index' },
{ title: '家庭教育硕士', path: '/profession' },
{ title: '报名申请', path: '/my' },
{ title: '最新动态', path: '/news' },
{ title: '联系我们', path: '/contact' }
]
}
},
watch: {
$route: {
immediate: true,
handler() {
this.infoRouer()
}
}
},
methods: {
infoRouer() {
this.tempRoute = Object.assign({}, this.$route)
}
}
}
</script>
<style lang="scss" scoped>
.logo-new-2 {
width: 217px;
}
.logo-new-1 {
width: 221px;
}
.slider {
height: 80px;
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.3);
.slider-body {
width: 80%;
display: flex;
margin: 0 auto;
height: 100%;
justify-content: space-between;
.slider-icon {
flex: 1;
.el-image {
top: 50%;
transform: translateY(-50%);
}
}
.slider-banner {
display: flex;
flex: 2;
.tab-item {
flex: 1;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: flex-end;
.app-link {
color: #fff;
&.router-link-active .tab-link {
color: #fa9e3b !important;
}
}
.tab-link {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
cursor: pointer;
}
}
}
}
}
.ts-slider {
height: 60px;
background: #fff;
.slider-body {
.slider-banner {
.tab-item {
.tab-link {
color: #222222;
}
}
}
}
}
.bg_fff {
background: #fff;
.slider-body {
.slider-banner {
.tab-item {
.tab-link {
color: #222222;
}
}
}
}
}
</style>
src/components/page-footer/index.vue → src/components/layout/footer.vue
浏览文件 @ f04ed8aa
<template>
<div class="homepage_footer">
<div class="flex">
<div class="fo-bg"></div>
<div class="homepage_footer_body">
<div class="footer_lj fot">
<div>
<footer class="footer">
<div class="footer-inner">
<div class="footer-link">
<h4>
<span>学校官网</span>
</h4>
<a href="https://www.ciis.edu" target="_blank"><span class="fo">加州整合大学官网</span></a>
<a href="https://www.cuw.edu" target="_blank">威斯康星协和大学官网</a>
</div>
<div class="footer_cx fot">
<div class="footer-link">
<h4>
<span>学校认证</span>
</h4>
<a href="http://jsj.moe.gov.cn/news/1/170.shtml" target="_blank"><span class="fo">教育涉外监管网</span></a>
<a href="https://www.wscuc.org/institutions/california-institute-integral-studies" target="_blank"
><span class="fo">WASC认证</span></a
<a href="http://jsj.moe.gov.cn/news/1/217.shtml" target="_blank">中国教育部承认院校</a>
<a
href="https://www.hlcommission.org/component/directory/?Itemid=&Action=ShowBasic&instid=1685"
target="_blank"
>美国高等教育认证委员会认证</a
>
</div>
<div class="footer_cx fot">
<div class="footer-link">
<h4>
<span>认证查询</span>
</h4>
<a href="https://www.universities.com/find/california/best/counseling-psychology-degrees" target="_blank"
><span class="fo">2020年加州最佳心理咨询学院排名第1</span></a
<a
href="https://www.usnews.com/best-colleges/concordia-university-wisconsin-3842/overall-rankings"
target="_blank"
>2022年U.S.News美国大学综合排名277</a
>
<a href="https://www.universities.com/find/california/best/counseling-psychology-degrees" target="_blank"
><span class="fo">2020年CIIS临床心理咨询专业排名全美第4</span></a
<a
href="https://thebestschools.org/rankings/25-best-online-masters-educational-administration-degree-programs/"
target="_blank"
>2022年TheBestSchools全美在线教育（教育管理）硕士排名19</a
>
<a href="https://www.greatvaluecolleges.net/by-city/online-colleges-san-francisco-ca/" target="_blank"
><span class="fo">2020年旧金山最佳在线学位项目排名第3</span></a
>
<a href="https://www.online-phd-programs.org/best-online-phd-psychology/" target="_blank"
><span class="fo">2020年心理学在线博士项目全美排名第14</span></a
<a
href="https://blog.cuw.edu/online-masters-in-teaching-and-learning-program-ranked-1-in-the-state/"
target="_blank"
>2014年GetEducated.com全美在线教育（教学）硕士排名20</a
>
</div>
<div class="footer_logo">
<img src="@/assets/images/logo.svg" alt class="ezijing-logo" />
<img src="@/assets/images/logginred.png" alt />
<img src="https://zws-imgs-pub.ezijing.com/pc/base/logo.svg" />
<img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_blue.svg" />
</div>
</div>
</div>
<div class="copyright" style="height: 40px; line-height: 40px; color: #fff; background: #ccc">
<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: #fff; 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: #fff; 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: #fff; text-decoration: none"
>
<p style="font-size: 12px">京ICP备15016866号-1</p>
</a>
</div>
</footer>
<div class="copyright">
<p>
Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司
</p>
<a href="https://tsm.miit.gov.cn/dxxzsp/" target="_blank">
<p>京ICP证150431号</p>
</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" target="_blank">
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
<p>安备 11010802023681号</p>
</a>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
<p>京ICP备15016866号-1</p>
</a>
</div>
</div>
</template>
<script>
export default {}
export default {
name: 'AppFooter'
}
</script>
<style lang="scss" scoped>
.copyright {
height: 40px;
line-height: 40px;
color: #fff;
background: #ccc;
.inner2 {
width: 100%;
justify-content: center;
display: flex;
p {
font-size: 12px;
}
.record {
color: #fff;
align-items: center;
display: flex;
margin-right: 5px;
img {
width: 20px;
height: 20px;
margin: 0 6px;
display: block;
}
}
}
}
.homepage_footer {
min-height: 460px;
.footer {
background-size: cover;
background: #fff;
width: 100%;
.flex {
background: #fff url('~@/assets/images/fotbk.png') no-repeat center center;
.footer-inner {
padding: 80px 0;
margin: 0 auto;
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 460px;
}
.fo-bg {
position: absolute;
height: 100%;
z-index: 6;
width: 100%;
background: url('~@/assets/images/fotbk.png') no-repeat center center;
}
.homepage_footer_body {
width: 80%;
min-height: 460px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.fot {
.footer-link {
display: flex;
z-index: 7;
flex-direction: column;
h4 {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-weight: 600;
color: rgba(34, 34, 34, 1);
margin-bottom: 14px;
position: relative;
......@@ -163,31 +110,43 @@ export default {}
position: absolute;
bottom: -4px;
height: 3px;
background: #fa9e3b;
background: #faa634;
width: 100%;
}
}
}
span {
a {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(34, 34, 34, 1);
}
a {
padding: 20px 0px;
}
}
.footer_logo {
z-index: 7;
width: 180px;
display: flex;
align-items: baseline;
flex-direction: column;
justify-content: space-around;
.ezijing-logo {
width: 187px;
}
}
}
}
.copyright {
height: 40px;
line-height: 40px;
color: #fff;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
img {
max-height: 100%;
}
a {
margin-left: 10px;
display: flex;
align-items: center;
}
}
</style>
src/components/layout/header.vue
浏览文件 @ f04ed8aa
<template>
<header class="app-header">
<section class="app-header-bar">
<div class="inner">
<div class="login">
<template v-if="isLogin">
<div>{{ user.nickname || user.realname }}</div>
<span>|</span>
<div @click="handleLogout">退出</div>
</template>
<template v-else>
<div @click="handleRegister">注册</div>
<span>|</span>
<div @click="handleLogin">登录</div>
</template>
<header class="header" :class="{ 'is-fixed': fixed }">
<HeaderNews />
<div class="header-inner">
<div class="header-main">
<div class="logo">
<router-link to="/">
<img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_white.svg" v-if="fixed" />
<img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_blue.svg" v-else />
</router-link>
</div>
</div>
</section>
<section class="app-header-main">
<div class="hd">
<div class="hd-left">
<a href="/"><img src="../../assets/img/head/ezijing-logo.svg" class="logo" /></a>
<h1 class="title">{{ title }}</h1>
</div>
<div class="hd-right">
<img src="../../assets/img/head/kelley-logo.png" />
</div>
</div>
<div class="bd">
<ul class="nav">
<li v-for="item in navList" :key="item.path">
<nav class="nav">
<div class="nav-item" v-for="item in navList" :key="item.path">
<router-link :to="item.path">{{ item.title }}</router-link>
</li>
</ul>
<div class="search">
<div class="lang">EN</div>
<input type="text" placeholder="Search" class="search-input" />
<div class="search-button">搜索</div>
</div>
</div>
</nav>
</div>
</section>
<vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
</div>
</header>
</template>
<script>
import HeaderNews from './headerNews.vue'
export default {
name: 'AppHeader',
props: { fixed: { type: Boolean, default: false } },
components: { HeaderNews },
data() {
return {
title: '中国未来金融领袖计划',
navList: [
{ title: '首页', path: '/index' },
{ title: '项目介绍', path: '/project' },
{ title: '视频中心', path: '/videoCenter' },
{ title: '招生信息', path: '/recruit' },
{ title: '教学模块', path: '/teaching' },
{ title: '师生风采', path: '/presence' },
{ title: '职业发展', path: '/careerDev' },
{ title: '校友工作', path: '/alumniWork' }
],
isLogin: false,
user: null,
options: {
login: {
account: {
onSuccess: this.loginSuccess
},
phone: {
onSuccess: this.loginSuccess
}
}
}
}
},
computed: {
passport() {
return this.$refs.passport
}
},
watch: {
$route(route) {
if (route.query.needLogin) {
this.handleLogin()
}
}
},
methods: {
handleLogin() {
this.passport.login()
},
handleRegister() {
this.passport.register()
},
handleLogout() {
this.passport.logout()
this.isLogin = false
window.G.UserInfo = {}
this.$router.push('/')
},
onReady(isLogin, user = {}) {
this.isLogin = isLogin
this.user = user
window.G.UserInfo = user
},
loginSuccess(data) {
this.passport.checkLoginStatus((isLogin, user = {}) => {
this.isLogin = isLogin
this.user = user
this.$router.push('/my')
})
{ title: '家庭教育硕士', path: '/profession' },
{ title: '报名申请', path: '/my' },
{ title: '最新动态', path: '/news' },
{ title: '联系我们', path: '/contact' }
]
}
}
}
</script>
<style lang="scss" scoped>
.app-header {
background-color: #fff;
.inner {
max-width: 970px;
margin: 0 auto;
}
}
.app-header-bar {
height: 40px;
background-color: #333;
.login {
float: right;
display: flex;
line-height: 40px;
color: #fff;
div {
font-size: 18px;
text-align: center;
cursor: pointer;
.header {
position: sticky;
top: 0;
width: 100%;
z-index: 100;
&.is-fixed {
.header-inner {
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
}
span {
padding: 0 20px;
.nav {
.nav-item {
color: #fff;
}
}
}
}
.app-header-main {
max-width: 970px;
.header-inner {
width: 100%;
background-color: #fff;
}
.header-main {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
height: 80px;
margin: 0 auto;
.hd {
height: 110px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hd-left {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 156px;
// height: 50px;
}
.title {
margin-left: 20px;
padding: 0 10px;
color: #222;
font-size: 20px;
line-height: 33px;
font-weight: 600;
border-left: 2px solid #333;
}
.bd {
margin-top: -20px;
padding: 10px 0;
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
a {
height: 80%;
}
img {
height: 100%;
}
}
.nav {
flex: 2;
display: flex;
li {
font-size: 15px;
font-weight: 600;
color: #222;
line-height: 20px;
padding: 0 14px;
a {
position: relative;
}
&:first-child {
padding-left: 0;
}
justify-content: flex-end;
.nav-item {
flex: 1;
text-align: right;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000;
}
li + li {
border-left: 1px solid #d7d8d9;
a {
&.router-link-active {
color: var(--main-color);
}
}
}
.router-link-active:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: #bf0927;
}
.search {
display: flex;
align-items: center;
}
.lang {
font-size: 15px;
color: #999;
}
.search-input {
outline: none;
width: 159px;
height: 34px;
border-radius: 4px;
border: 1px solid #ccc;
margin: 0 3px 0 8px;
padding-left: 13px;
font-size: 15px;
color: #999;
}
.search-button {
width: 54px;
height: 34px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 15px;
color: #999;
text-align: center;
line-height: 34px;
cursor: pointer;
}
}
</style>
src/components/layout/components/tab.vue → src/components/layout/headerNews.vue
浏览文件 @ f04ed8aa
<template>
<div class="tab">
<span v-for="(item, index) in listData" :key="index" @click="details(item)">
<div class="header-news">
<span v-for="(item, index) in listData" :key="index" @click="handleClick(item)">
{{ item.created_time | formatDate(item.created_time) }}
{{ item.title }}
</span>
......@@ -11,16 +11,12 @@
import cAction from '@action'
export default {
name: 'tab',
name: 'HeaderNews',
data() {
return {
isloading: false,
loading: false,
listData: [],
quiuse: {
page: 1,
per_page: 1,
project_id: 1021
}
params: { page: 1, per_page: 1, project_id: 1021 }
}
},
filters: {
......@@ -34,38 +30,31 @@ export default {
}
},
methods: {
details(item) {
this.$router.push({
name: 'details-recent-news',
params: { id: item.id }
})
handleClick(item) {
this.$router.push({ name: 'details-recent-news', params: { id: item.id } })
},
setDate() {
this.isloading = true
cAction.News.newsList(this.quiuse)
fetchList() {
this.loading = true
cAction.News.newsList(this.params)
.then(data => {
this.listData = data.map(k => {
k.hover = false
return k
})
this.isloading = false
this.listData = data
this.loading = false
})
.catch(e => {
this.isloading = false
console.log(e)
this.loading = false
})
}
},
created() {
this.setDate()
mounted() {
this.fetchList()
}
}
</script>
<style lang="scss" scoped>
.tab {
.header-news {
height: 40px;
background: #0b5a94;
background: #005596;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
......
src/components/layout/index.vue
浏览文件 @ f04ed8aa
<template>
<div class="layout">
<div class="container">
<div class="header" :class="classes">
<Tab />
<Slider />
</div>
<div class="main">
<router-view></router-view>
<RightAside></RightAside>
</div>
<AppHeader v-bind="$attrs" />
<div class="main">
<router-view></router-view>
</div>
<AppFooter v-if="footer" />
<RightAside />
</div>
</template>
<script>
import Tab from './components/tab.vue'
import Slider from './components/slider.vue'
import RightAside from './components/rightAside'
import AppHeader from './header.vue'
import AppFooter from './footer.vue'
import RightAside from './rightAside'
export default {
props: { fixed: { type: Boolean, default: false } },
components: { Tab, Slider, RightAside },
computed: {
classes() {
return {
'is-fixed': this.fixed
}
}
}
components: { AppHeader, AppFooter, RightAside },
props: { footer: { type: Boolean, default: false } }
}
</script>
<style lang="scss" scoped>
.layout {
height: 100%;
width: 100%;
.container {
height: 100%;
min-height: 100vh;
.main {
position: relative;
.header {
position: sticky;
top: 0;
width: 100%;
padding: 0px;
z-index: 10;
&.is-fixed {
position: fixed;
}
}
.main {
position: relative;
padding: 0px;
width: 100%;
height: 100%;
}
width: 100%;
height: 100%;
}
}
</style>
src/components/slide-list.vue
浏览文件 @ f04ed8aa
......@@ -32,7 +32,7 @@ export default {
background: #fff4eeff;
.slide-list-title {
font-weight: 600;
color: #fa9e3b;
color: #faa634;
}
}
.slide-list {
......@@ -62,7 +62,7 @@ export default {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 3px;
background: #fa9e3b;
background: #faa634;
}
}
}
......
src/pages/contact-us/index.vue
浏览文件 @ f04ed8aa
<template>
<div class="layout_com_page">
<vue-lazy-component>
<div class="contact-banner" :style="{height: heightdy + 'px'}">
<div class="contact-main">
<span class="font-size-24">ezijing</span>
<span class="font-size-40 befo">BEIJING</span>
<span class="font-size-40">清控紫荆（北京）教育科技股份有限公司</span>
<span class="font-size-18">地址：北京市海淀区中关村东路1号院7号楼5层</span>
<span class="font-size-18">电话：010-62790180</span>
</div>
<div class="contact-banner">
<div class="contact-main">
<span class="font-size-24">ezijing</span>
<span class="font-size-40 befo">BEIJING</span>
<span class="font-size-40">清控紫荆（北京）教育科技股份有限公司</span>
<span class="font-size-18">地址：北京市海淀区中关村东路1号院7号楼5层</span>
<span class="font-size-18">电话：010-62790180</span>
</div>
</vue-lazy-component>
<vue-lazy-component>
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/mesbk.png')"
:leavheight=" heightdy - 60"
/>
</vue-lazy-component>
<vue-lazy-component>
<page-footer />
</vue-lazy-component>
</div>
<FormBox />
</div>
</template>
<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
import FormBox from '@/components/formBox'
export default {
name: 'contact-us',
mixins: [dyHeight],
components: {
Leavex,
PageFooter
}
components: { FormBox }
}
</script>
<style lang="scss" scoped>
.contact-banner {
width: 100%;
height: calc(100vh - 40px);
position: relative;
background: url('~@/assets/images/wm.png') no-repeat center center;
background-size: cover;
......
src/pages/homepage/index.vue
浏览文件 @ f04ed8aa
<template>
<div class="layout_com_page">
<vue-lazy-component>
<div class="homepage-banner" :style="{ height: heightdy + 'px' }">
<div class="video-box">
<video
x5-playsinline=""
webkit-playsinline=""
ref="video"
id="myAudio"
style="width: 100%; height: 80%; object-fit: fill"
src="https://zws-imgs-pub.ezijing.com/static/public/54f23971c68517443056d531c6d1f982.mp4"
playsinline
></video>
<div class="video-img" v-if="isShowPlay"></div>
<div class="video-img-pop" v-if="isShowPlay"></div>
</div>
<div class="more">
<div class="more-image">
<div class="more-many" @click="many">了解更多</div>
<div class="more-many ts-bu-stop" @click="stop" v-show="!isShowPlay">
<span>学校视频</span>
<img :src="require('@/assets/images/stop.png')" />
</div>
<div class="more-many ts-bu" @click="isShowPlayClick" v-show="isShowPlay">
<span>学校视频</span>
<img :src="require('@/assets/images/play.png')" />
</div>
</div>
<div class="more-title">
<h5>家庭教育硕士</h5>
<h3>加州整合大学</h3>
</div>
</div>
<div class="home">
<HomeBanner />
<HomeSchool />
<section class="school-top">
<div class="subtitle">
<h2>大学排名与认证</h2>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="color-fff">
<div class="homepage-main" :class="{ 'study-show': hoverCap }" :style="{ 'min-height': heightdy - 60 + 'px' }">
<div class="cap">
<div class="cap-image" ref="cap">
<img :src="require('@/assets/images/mz.png')" alt :class="{ 'cap-image-hover': hoverCap }" />
</div>
<div class="cap-title">
<div class="cap-h3">
<span class="black">学校</span>
<span class="red">介绍</span>
</div>
</div>
<div class="cap-main" ref="counter">
<span
>加州整合大学（California Institute of Integral
Studies）始创于1968年，是一所专注于心理学相关专业的非营利性研究型大学。学校位于美国加州湾区核心——旧金山，坐落在Twitter、Uber、Airbnb和市政府、收容所中间，是链接财富与道德、未来与传统的界限和平衡所在。</span
>
</div>
<ul class="cap-item-box">
<li>
<div class="title">学校构成</div>
<div class="txt">
加州整合大学是全美整合教育研究的创始者和中心，由4个学院共26个专业构成，涵盖了本科、硕士和博士的教学和研究工作。
</div>
</li>
<li>
<div class="title">学校特色</div>
<div class="txt">
绝大多数项目均系围绕心理学理论和临床的细分方向进行专业设置，几十年间，孕育了大批政界、商界、学术界的杰出人才。
</div>
</li>
<li>
<div class="title">学术影响</div>
<div class="txt">
加州整合大学连续15年蝉联美国加州心理咨询师资格考试通过率第1名，每年约有500名专业心理咨询师在这里持证。
</div>
</li>
</ul>
<!-- <div class="cap-xx animate__animated animate__fadeInUp animate__delay-0.2s">
<span>在肯塔基、加利福尼亚、亚利桑那、伊利诺伊和佛罗里达等地共有10个校区。其中主校区坐落于美国“蓝草之州”—肯塔基州（Kentucky）康博斯威尔市，占地面积约2465亩，承担本科、硕士和博士的教学和研究工作。在中国已经与武汉大学、华中科技大学、西南财经大学、延边大学、陕西师范大学等40余所大学建立了合作关系。</span>
</div> -->
<!-- <div class="cap-many animate__animated animate__fadeInUp animate__delay-0.2s">
<div class="cap-many-body">
<div
v-for="(item, index) in capList"
:key="index"
:class="['cap-many-img',item.class]"
>
<img :src="item.img" />
<span class="cap-many-padd">
{{itemValue(item.value)}}
<small>{{item.label}}</small>
</span>
<span class="cap-many-yt">{{item.small}}</span>
</div>
</div>
</div> -->
<div class="cap-more">
<el-button type="primary" size="medium" @click="many">了解更多</el-button>
<el-button type="primary" size="medium" @click="applyConsult">申请咨询</el-button>
</div>
</div>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div
class="homepage-wrapper"
:style="{ 'min-height': heightdy - 60 + 'px' }"
:class="[
{ 'wrapper-show-title': hoverWrapperTitle },
{ 'wrapper-show': hoverWrapperLi01 },
{ 'wrapper-show-a': hoverWrapperLi02 }
]"
>
<div class="homepage-son">
<div class="title" ref="wrapper_title">
<span class="animate__animated animate__flipInY">加州整合大学权威认证</span>
</div>
<div class="ul-wrapper">
<div class="li-wrapper aos-init aos-animatea" ref="wrapper_li_01">
<div class="div-item">
<img src="@/assets/images/tir3.png" alt />
<span>中国教育部承认院校</span>
</div>
<div class="div-item">
<img src="@/assets/images/tir1.png" alt />
<span>美国西部院校协会大学委员会认证</span>
</div>
</div>
<!-- <div class="wrapper-center">
<img src="@/assets/images/logofff.png" alt />
</div> -->
<div class="li-wrapper aos-init aos-animateb rz-new-mar" ref="wrapper_li_02">
<div class="div-item">
<img src="@/assets/images/tir2.png" alt />
<span>2020年旧金山最佳在线学位项目 排名第3</span>
<!-- <span>连续 24 年上榜《美国新闻》全美最佳大学指南</span> -->
</div>
<div class="div-item">
<img src="@/assets/images/tir4.png" alt />
<span>2020年心理学在线博士项目 全美排名第14</span>
</div>
</div>
</div>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="homepage_h_join">
<div class="join_bg"></div>
<div class="text wrap">
<div class="cobo-text">
<div class="cobo-title">
<span>加州整合大学</span>
<span>整合理念</span>
</div>
<el-button @click="applyConsult">申请咨询</el-button>
</div>
<div class="cobo-text">
<h4 class="">——东西方文化的整合</h4>
<h4 class="">——心理学与其他学科之间的整合</h4>
<h4 class="">——个体身体、头脑、心灵、精神面向的整合</h4>
<h4 class="">——心理科学内部理论和临床，以及多种治疗流派的整合</h4>
<!-- <h4 class="no_mar">的学习环境，为学生打造梦想的摇篮，塑造谦卑且具使命感</h4>
<h4>的领导典范，培养具有卓越学术能力的专业人才。</h4>
<div class="cobo-size">
<span
class="cobo-min"
>To foster academic excellence through pre-professional certificates,</span>
<span
class="cobo-min"
>associates, baccalaureate, masters, and doctoral programs through</span>
<span
class="cobo-min"
>traditional, technical and online systems.To provide an environment for</span>
<span
class="cobo-min"
>student success. To uphold the dignity of all persons and value diverse</span>
<span class="cobo-min">perspectives.To model servant leadership through effective</span>
<span class="cobo-min">stewardship of resources.</span>
</div> -->
</div>
</div>
</div>
</vue-lazy-component>
<div ref="leavex">
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/mesbk.png')"
:leavheight="heightdy - 60"
/>
</div>
<vue-lazy-component>
<page-footer />
</vue-lazy-component>
<img src="https://webapp-pub.ezijing.com/project/cuw/top.jpg" />
</section>
<FormBox />
</div>
</template>
<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import { dyHeight } from './mixins/index.js'
import TWEEN from 'tween.js'
import HomeBanner from '@/components/home/banner'
import HomeSchool from '@/components/home/school'
import FormBox from '@/components/formBox'
export default {
name: 'homepage',
mixins: [dyHeight],
components: {
Leavex,
PageFooter
},
name: 'AppHome',
components: { HomeBanner, HomeSchool, FormBox },
data() {
return {
// capList: [
// {
// class: 'cap-many-one',
// img: require('@/assets/images/icon1.png'),
// value: 'animatedNum1',
// label: '个国家',
// small: '生源来自'
// },
// {
// class: 'cap-many-two',
// img: require('@/assets/images/icon2.png'),
// value: 'animatedNum2',
// label: '个',
// small: '学校专业'
// },
// {
// class: 'cap-many-three',
// img: require('@/assets/images/icon3.png'),
// value: 'animatedNum3',
// label: '+ 名',
// small: '全职教员'
// },
// {
// class: 'cap-many-four',
// img: require('@/assets/images/icon4.png'),
// value: 'animatedNum4',
// label: '万+ 名',
// small: '在校学生'
// }
// ],
input: '',
num1: 0,
isShowPlay: true,
animatedNum1: 0,
num2: 0,
animatedNum2: 0,
num3: 0,
animatedNum3: 0,
num4: 0,
animatedNum4: 0,
hoverCap: false,
hoverWrapperTitle: false,
hoverWrapperLi01: false,
hoverWrapperLi02: false
}
},
watch: {
num1: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function() {
vm.animatedNum1 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num2: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function() {
vm.animatedNum2 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num3: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function() {
vm.animatedNum3 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num4: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function() {
vm.animatedNum4 = Math.round((this.tweeningNumber.toFixed(0) / 10000) * 100) / 100
})
.start()
animate()
}
},
methods: {
itemValue(key) {
return this[key]
},
dyScroll(present, scrollTop) {
if (this.$refs.cap && !this.hoverCap) {
const topcap = this.getElementTop(this.$refs.cap)
this.hoverCap = !!(present > topcap + 100)
}
if (this.$refs.wrapper_title && !this.hoverWrapperTitle) {
const topcap = this.getElementTop(this.$refs.wrapper_title)
this.hoverWrapperTitle = !!(present > topcap + 100)
}
if (this.$refs.wrapper_li_01 && !this.hoverWrapperLi01) {
const topcap = this.getElementTop(this.$refs.wrapper_li_01)
this.hoverWrapperLi01 = !!(present > topcap + 100)
}
if (this.$refs.wrapper_li_02 && !this.hoverWrapperLi02) {
const topcap = this.getElementTop(this.$refs.wrapper_li_02)
this.hoverWrapperLi02 = !!(present > topcap + 100)
}
},
setAnimatedNum() {
this.num1 = 52
this.num2 = 110
this.num3 = 700
this.num4 = 12000
},
isShowPlayClick() {
this.isShowPlay = false
this.$refs.video.play()
this.$refs.video.onended = () => {
this.isShowPlay = true
}
},
stop() {
this.isShowPlay = !this.isShowPlay
this.$refs.video.pause()
},
handleScroll() {
this.setAnimatedNum()
},
many() {
this.$router.push({
name: 'major-set'
})
},
applyConsult(state) {
if (!state) {
this.goAssignBlock('leavex', 50)
} else {
setTimeout(() => {
this.goAssignBlock('leavex', 50)
}, 500)
}
},
goAssignBlock(el, speed) {
const windowH = window.innerHeight
const h = this.$refs[el].offsetHeight
const t = this.$refs[el].offsetTop
const top = t - (windowH - h) / 2
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let currentTop = scrollTop
let requestId
function step() {
if (scrollTop < top) {
if (currentTop <= top) {
window.scrollTo(0, currentTop)
requestId = window.requestAnimationFrame(step)
} else {
window.cancelAnimationFrame(requestId)
}
currentTop += speed
} else {
if (top <= currentTop) {
window.scrollTo(0, currentTop - speed)
requestId = window.requestAnimationFrame(step)
} else {
window.cancelAnimationFrame(requestId)
}
currentTop -= speed
}
}
window.requestAnimationFrame(step)
}
},
beforeRouteEnter(to, from, next) {
if (from.name === 'details-recent-news') {
next(vm => vm.applyConsult(true))
} else {
next()
}
return {}
}
}
</script>
<style lang="scss" scoped>
.color-fff {
background: #fff;
}
.homepage-banner {
width: 100%;
.school-top {
position: relative;
background: url('~@/assets/images/home.png') no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
.video-box {
z-index: 2;
img {
width: 100%;
position: relative;
height: 100%;
background: #000;
video {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
vertical-align: baseline;
}
.video-img {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 3;
background: url('~@/assets/images/home.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.video-img-pop {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 4;
}
}
.more {
width: 80%;
z-index: 3;
display: flex;
justify-content: space-between;
margin: 0 auto;
align-items: flex-end;
.subtitle {
position: absolute;
bottom: 30%;
.more-image {
height: 100%;
display: flex;
.more-many {
min-height: 54px;
width: 132px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 40px;
color: #fff;
font-size: 18px;
border: 1px solid;
border-radius: 5px;
cursor: pointer;
color: rgba(255, 255, 255, 1);
font-family: PingFangSC-Regular, PingFang SC;
}
.ts-bu {
width: 138px;
background: #fa9e3b;
border: 0px;
span {
padding-right: 10px;
}
}
.ts-bu-stop {
span {
padding-right: 10px;
}
}
.video-play {
cursor: pointer;
}
}
}
.more-title {
h5 {
font-size: 20px;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: right;
padding-right: 5px;
}
h3 {
font-size: 42px;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
}
}
.homepage-main {
width: 100%;
position: relative;
overflow: hidden;
background: url(https://zws-imgs-pub.ezijing.com/static/public/0b231f6b83983243fd13e2911c371b40.png) no-repeat center
center;
background-size: cover;
display: flex;
justify-content: center;
.cap {
width: 100%;
margin: 0 auto;
padding: 40px 0px 40px 0px;
.cap-image {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.9s;
img {
height: 100%;
width: 70%;
transition: all 0.9s;
}
}
.cap-image-hover {
width: 152px !important;
height: 60px !important;
}
.cap-title {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0px 34px 0px;
.cap-h3 {
display: flex;
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(34, 34, 34, 1);
position: relative;
&::before {
content: '';
position: absolute;
bottom: -4px;
height: 3px;
background: #fa9e3b;
width: 100%;
}
.red {
color: #fa9e3b;
}
.black {
color: #222;
}
}
}
.cap-main {
display: flex;
flex-wrap: wrap;
width: 1000px;
margin: 0 auto;
span {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(34, 34, 34, 1);
}
}
.cap-many {
display: none;
padding: 40px 0px 0px 0px;
.cap-many-body {
display: flex;
width: 100%;
justify-content: center;
.cap-many-img {
display: flex;
flex-direction: column;
align-items: center;
min-width: 250px;
.cap-many-padd {
padding-top: 20px;
color: #af1b40;
display: inline-flex;
font-size: 50px;
align-items: baseline;
justify-content: center;
small {
padding-left: 5px;
font-size: 24px;
}
}
.cap-many-yt {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
letter-spacing: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
}
.cap-xx {
display: none;
flex-wrap: wrap;
width: 80%;
padding-top: 30px;
margin: 0 auto;
span {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
}
.cap-more {
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding-top: 30px;
.el-button {
margin: 0px 52px;
padding: 19px 37px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
}
.study-show {
.cap-many,
.cap-xx {
display: flex !important;
}
}
.wrapper-show {
.aos-animatea {
transform: perspective(2500px) rotateY(0) !important;
}
}
.wrapper-show-title {
.title {
span {
display: inline-block !important;
}
}
}
.wrapper-show-a {
.aos-animateb {
transform: perspective(2500px) rotateY(0) !important;
}
}
.homepage-wrapper {
width: 100%;
position: relative;
background: url('~@/assets/images/tir.png') no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
padding-bottom: 30px;
.homepage-son {
width: 80%;
margin: 0 auto;
position: relative;
.title {
font-weight: 700;
margin: 80px 0 0 0;
height: 40px;
top: 50px;
left: 50%;
padding: 20px 0;
text-align: center;
transform: translateX(-50%);
h2 {
display: inline-block;
padding-bottom: 12px;
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 40px;
position: relative;
text-align: center;
span {
display: none;
position: relative;
&::before {
content: '';
position: absolute;
bottom: -8px;
height: 3px;
background: #ffffff;
width: 100%;
}
}
}
.aos-init {
transition-duration: 1s;
backface-visibility: hidden;
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition-property: transform;
transform: perspective(2500px) rotateY(100deg);
}
.ul-wrapper {
margin: 55px 0 0 0;
.li-wrapper {
display: flex;
justify-content: space-between;
.div-item {
display: flex;
align-items: center;
flex-direction: column;
img {
padding-bottom: 20px;
width: 410px;
}
span {
height: 33px;
font-size: 22px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 33px;
display: inline-block;
text-align: center;
min-width: 460px;
}
}
}
.wrapper-center {
margin: 0px 0px 34px 0px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.homepage_h_join {
position: relative;
padding: 100px 0;
overflow: hidden;
background: #202020;
z-index: 5;
.join_bg {
background: url('~@/assets/images/cfbk.png');
z-index: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
position: absolute;
top: 0px;
left: 0px;
height: 260%;
width: 100%;
background-attachment: fixed;
}
.text {
position: relative;
z-index: 2;
.cobo-text {
flex: 1;
h4 {
width: 486px;
font-size: 22px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
display: flex;
flex-wrap: wrap;
padding-bottom: 11px;
}
.cobo-size {
display: flex;
flex-direction: column;
.cobo-min {
color: #ccccccff;
font-size: 14px;
display: inline-flex;
}
}
.cobo-title {
display: flex;
padding-bottom: 52px;
flex-direction: column;
span {
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
}
::v-deep .el-button {
height: 54px;
color: #af1b40;
width: 132px;
}
}
}
.wrap {
width: 80%;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
}
}
::v-deep input::-webkit-input-placeholder {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
::v-deep input::-moz-input-placeholder {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
::v-deep input::-ms-input-placeholder {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.video-scr {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.no_mar {
padding-bottom: 5px !important;
}
.cap-item-box {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 40px;
li {
position: relative;
width: 320px;
height: 254px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/907e29cdca94fd79c2725cc0b2161028.png);
background-size: 100% 100%;
.title {
position: absolute;
top: 10px;
left: 30px;
color: #fff;
font-size: 18px;
line-height: 1;
border-bottom: 3px solid #fff;
}
.txt {
padding-top: 60px;
width: 260px;
margin: 0 auto;
font-size: 18px;
color: #af1b40;
line-height: 30px;
}
}
}
.rz-new-mar {
margin-top: 60px;
}
.cap-more {
::v-deep .el-button--primary {
background: #fa9e3b;
border: none;
}
}
.demo-ruleForm {
::v-deep .el-button--primary {
background: #fa9e3b;
border: none;
}
}
</style>
src/pages/homepage/mixins/dyHeight.js deleted 100644 → 0
浏览文件 @ 4540bfec
export default {
data() {
return {
heightdy: '',
scrollTop: '',
navigation: false,
ones: true
}
},
methods: {
getElementTop(element) {
if (!element) return
var actualTop = element.offsetTop
var current = element.offsetParent
while (current !== null) {
actualTop += current.offsetTop
current = current.offsetParent
}
return actualTop
},
getHeight() {
const height = document.documentElement
? document.documentElement.clientHeight
: window.innerHeight
this.heightdy = this.isTerminal() === 'Mobile' ? '700' : height
},
watchScroll() {
this.scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
if (this.scrollTop > 0) {
this.navigation = true
} else {
this.navigation = false
}
var present = window.innerHeight + this.scrollTop
var top = this.getElementTop(this.$refs.counter)
if (present > top + 150 && this.ones) {
this.ones = false
if (this.handleScroll) {
this.handleScroll()
}
}
if (this.dyScroll) {
this.dyScroll(present, this.scrollTop)
}
},
isTerminal() {
const detectDeviceType = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop'
return detectDeviceType
}
},
created() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
mounted() {
this.watchScroll()
window.addEventListener('scroll', this.watchScroll, true)
},
destroyed() {
window.removeEventListener('resize', this.getHeight)
window.removeEventListener('scroll', this.watchScroll)
}
}
src/pages/homepage/mixins/index.js deleted 100644 → 0
浏览文件 @ 4540bfec
import dyHeight from './dyHeight.js'
export { dyHeight }
src/pages/letter/index.vue
浏览文件 @ f04ed8aa
......@@ -151,7 +151,7 @@ export default {
}
}
.nav {
background-color: #fa9e3b;
background-color: #faa634;
.title {
font-size: 24px;
font-weight: 600;
......
src/pages/login/index.vue
浏览文件 @ f04ed8aa
......@@ -43,21 +43,6 @@ export default {
min-height: calc(100vh - 120px);
background: #fff;
}
/* 头部 */
.header {
max-width: 1000px;
padding: 15px 0;
margin: 0 auto;
}
.logo {
height: 40px;
margin-left: 20px;
background: url('~@/assets/images/logo.png') no-repeat;
background-size: contain;
}
/* 底部 */
/* 中间部分 */
.main {
position: relative;
}
......@@ -125,7 +110,7 @@ export default {
color: #fff;
}
.main .title .icon {
background: url('~@/assets/images/logofff.png') no-repeat center center;
background: url('https://webapp-pub.ezijing.com/project/cuw/cuw_logo_white.svg') no-repeat center center;
background-size: contain;
width: 166px;
height: 40px;
......
src/pages/major-set/index.vue
浏览文件 @ f04ed8aa
......@@ -232,25 +232,13 @@
</div>
</vue-lazy-component>
<vue-lazy-component>
<div ref="leavex">
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/major-set/mz.png')"
:leavheight="heightdy - 60"
/>
</div>
</vue-lazy-component>
<vue-lazy-component>
<page-footer />
</vue-lazy-component>
<FormBox />
</div>
</template>
<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import FilterJson from './filterType.json'
import FormBox from '@/components/formBox'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
import Vue from 'vue'
......@@ -263,8 +251,7 @@ export default {
components: {
Swiper,
SwiperSlide,
Leavex,
PageFooter
FormBox
},
directives: {
swiper: directive
......@@ -863,16 +850,16 @@ export default {
width: 270px;
height: 84px;
line-height: 84px;
color: #fa9e3b;
color: #faa634;
background: #fff;
border-radius: 4px;
cursor: pointer;
margin: 30px 0px;
border: 2px solid #fa9e3b;
border: 2px solid #faa634;
font-size: 22px;
}
.hover-bt {
background-color: #fa9e3b;
background-color: #faa634;
color: #fff;
}
}
......@@ -910,7 +897,7 @@ export default {
.div-son {
width: 20px;
height: 20px;
background: #fa9e3b;
background: #faa634;
border-radius: 50%;
}
}
......@@ -1127,7 +1114,7 @@ export default {
// -webkit-transform: translateX(-50%);
width: 8px;
height: 8px;
border: 2px solid #fa9e3b;
border: 2px solid #faa634;
border-radius: 50%;
}
}
......@@ -1166,7 +1153,7 @@ export default {
overflow: hidden;
}
.wm-red {
color: #fa9e3b !important;
color: #faa634 !important;
}
.nowrap {
white-space: nowrap;
......
src/pages/recent-news/index.vue
浏览文件 @ f04ed8aa
<template>
<div class="layout_com_page">
<vue-lazy-component>
<div class="layout_com_page_banner recent-news-header" :style="{ height: 364 + 'px' }">
<span>最新动态</span>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="recent-news-body">
<div
v-loading="isloading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
class="recent-news-body-list"
v-for="(item, index) in listData"
:key="index"
@click="details(item)"
@mouseover="item.hover = true"
@mouseleave="item.hover = false"
:class="{ 'riht-bg': (index + 1) % 2 === 0, 'hover-bg': item.hover }"
>
<div class="list" v-if="(index + 1) % 2 !== 0">
<div class="list-time">
<span class="font-size-30">{{ item.created_time | formatDate }}</span>
<span class="font-size-15">{{ item.created_time | formatDate(item.created_time, true) }}</span>
</div>
<img :src="item.photo_uri" />
<div class="list-title">
<span class="font-size-30">{{ item.title }}</span>
<span class="font-size-15">{{ item.summary }}</span>
</div>
<div class="layout_com_page_banner recent-news-header" :style="{ height: 364 + 'px' }">
<span>最新动态</span>
</div>
<div class="recent-news-body">
<div
v-loading="isloading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
class="recent-news-body-list"
v-for="(item, index) in listData"
:key="index"
@click="details(item)"
@mouseover="item.hover = true"
@mouseleave="item.hover = false"
:class="{ 'riht-bg': (index + 1) % 2 === 0, 'hover-bg': item.hover }"
>
<div class="list" v-if="(index + 1) % 2 !== 0">
<div class="list-time">
<span class="font-size-30">{{ item.created_time | formatDate }}</span>
<span class="font-size-15">{{ item.created_time | formatDate(item.created_time, true) }}</span>
</div>
<div class="list" v-else>
<div class="list-title">
<span class="font-size-30">{{ item.title }}</span>
<span class="font-size-15">{{ item.summary }}</span>
</div>
<img :src="item.photo_uri" />
<div class="list-time">
<span class="font-size-30">{{ item.created_time | formatDate }}</span>
<span class="font-size-15">{{ item.created_time | formatDate(item.created_time, true) }}</span>
</div>
<img :src="item.photo_uri" />
<div class="list-title">
<span class="font-size-30">{{ item.title }}</span>
<span class="font-size-15">{{ item.summary }}</span>
</div>
</div>
<div class="list-down">
<span @click="manyList" v-if="!showMany">查看更多</span>
<span @click="manyList" v-else>暂无更多</span>
<img @click="manyList" :src="require('@/assets/images/apply-for/bg_down.png')" />
<div class="list" v-else>
<div class="list-title">
<span class="font-size-30">{{ item.title }}</span>
<span class="font-size-15">{{ item.summary }}</span>
</div>
<img :src="item.photo_uri" />
<div class="list-time">
<span class="font-size-30">{{ item.created_time | formatDate }}</span>
<span class="font-size-15">{{ item.created_time | formatDate(item.created_time, true) }}</span>
</div>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<page-footer />
</vue-lazy-component>
<div class="list-down">
<span @click="manyList" v-if="!showMany">查看更多</span>
<span @click="manyList" v-else>暂无更多</span>
<img @click="manyList" :src="require('@/assets/images/apply-for/bg_down.png')" />
</div>
</div>
</div>
</template>
<script>
import PageFooter from '@/components/page-footer/index.vue'
import cAction from '@action'
export default {
name: 'recent-news',
components: {
PageFooter
},
filters: {
formatDate(data, state = null) {
const date = new Date(data.replace(/-/g, '/'))
......@@ -197,7 +187,7 @@ export default {
align-items: center;
justify-content: center;
background: #fff;
color: #fa9e3b;
color: #faa634;
padding: 20px;
span {
padding: 0px 20px;
......
src/router/routes.js
浏览文件 @ f04ed8aa
......@@ -4,21 +4,21 @@ export const routes = [
{
path: '/index',
component: Layout,
props: { fixed: true },
props: { fixed: true, footer: true },
children: [{ path: '', component: () => import('@/pages/homepage/index.vue'), name: 'home-page' }]
},
// 专业设置
{
path: '/profession',
component: Layout,
props: { fixed: true },
props: { fixed: true, footer: true },
children: [{ name: 'major-set', path: '', component: () => import('@/pages/major-set/index.vue') }]
},
// 最新动态
{
path: '/news',
component: Layout,
props: { fixed: true },
props: { fixed: true, footer: true },
children: [
{ name: 'recent-news', path: '', component: () => import('@/pages/recent-news/index.vue') },
{
......@@ -34,7 +34,7 @@ export const routes = [
name: 'contact-us',
path: '/contact',
component: Layout,
props: { fixed: true },
props: { fixed: true, footer: true },
children: [{ path: '', component: () => import('@/pages/contact-us/index.vue') }]
},
// 在线报名
......
src/style.scss
浏览文件 @ f04ed8aa
......@@ -31,7 +31,7 @@ body {
}
/* 改变主题色变量 */
$--color-primary: #fa9e3b;
$--color-primary: #faa634;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引入element-ui对应scss文件，重新编译 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论