Skip to content

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

chore: update

上级 4540bfec
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 629 行增加 和 806 行删除
src/assets/css/reset.css
浏览文件 @ f04ed8aa
@charset "utf-8";
/*！--CSS重置和样式初始化(参考Normalize.css) ~ v1.0--*/
body, body,
h1, h1,
h2, h2,
...@@ -18,6 +14,10 @@ dd, ...@@ -18,6 +14,10 @@ dd,
ul, ul,
ol, ol,
li, li,
pre,
form,
fieldset,
legend,
button, button,
input, input,
textarea, textarea,
...@@ -26,169 +26,56 @@ td { ...@@ -26,169 +26,56 @@ td {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
table {
html { border-collapse: collapse;
-webkit-touch-callout: none; border-spacing: 0;
-webkit-text-size-adjust: 100%;
}
body {
font-style: normal;
font-family: '\5FAE\8F6F\96C5\9ED1', Helvetica, sans-serif;
} }
h1,
h2,
h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 100%; font-size: 100%;
} }
ul, ul,
ol { ol,
li {
list-style: none; list-style: none;
} }
em,
a { i {
text-decoration: none; font-style: normal;
background-color: transparent;
}
a:hover,
a:active {
outline-width: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} }
strong,
hr { b {
border: 0; font-weight: normal;
height: 1px;
} }
img { img {
border-style: none; border: none;
}
img:not([src]) {
display: none;
}
svg:not(:root) {
overflow: hidden;
} }
input, input,
textarea, img {
button, vertical-align: middle;
}
a { a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: inherit;
text-decoration: none;
} }
button,
input, input,
button,
select, select,
textarea { textarea {
font-size: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none; -webkit-appearance: none;
border: 0; border: 0;
} border-radius: 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;
font: inherit; font: inherit;
} }
textarea:focus {
.clear:after { outline: 0;
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;
} }
:root { :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 { ...@@ -31,12 +31,12 @@ export default {
.layout-register { .layout-register {
.layout-register-header { .layout-register-header {
padding: 20px 0px; padding: 20px 0px;
color: #fa9e3b; color: #faa634;
.border { .border {
width: 100%; width: 100%;
height: 2px; height: 2px;
display: inline-block; display: inline-block;
background: #fa9e3b; background: #faa634;
} }
} }
.layout-register-body { .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> <template>
<div class="homepage_footer"> <div>
<div class="flex"> <footer class="footer">
<div class="fo-bg"></div> <div class="footer-inner">
<div class="homepage_footer_body"> <div class="footer-link">
<div class="footer_lj fot">
<h4> <h4>
<span>学校官网</span> <span>学校官网</span>
</h4> </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>
<div class="footer_cx fot"> <div class="footer-link">
<h4> <h4>
<span>学校认证</span> <span>学校认证</span>
</h4> </h4>
<a href="http://jsj.moe.gov.cn/news/1/170.shtml" target="_blank"><span class="fo">教育涉外监管网</span></a> <a href="http://jsj.moe.gov.cn/news/1/217.shtml" target="_blank">中国教育部承认院校</a>
<a href="https://www.wscuc.org/institutions/california-institute-integral-studies" target="_blank" <a
><span class="fo">WASC认证</span></a href="https://www.hlcommission.org/component/directory/?Itemid=&Action=ShowBasic&instid=1685"
target="_blank"
>美国高等教育认证委员会认证</a
> >
</div> </div>
<div class="footer_cx fot"> <div class="footer-link">
<h4> <h4>
<span>认证查询</span> <span>认证查询</span>
</h4> </h4>
<a href="https://www.universities.com/find/california/best/counseling-psychology-degrees" target="_blank" <a
><span class="fo">2020年加州最佳心理咨询学院排名第1</span></a href="https://www.usnews.com/best-colleges/concordia-university-wisconsin-3842/overall-rankings"
> target="_blank"
<a href="https://www.universities.com/find/california/best/counseling-psychology-degrees" target="_blank" >2022年U.S.News美国大学综合排名277</a
><span class="fo">2020年CIIS临床心理咨询专业排名全美第4</span></a
> >
<a href="https://www.greatvaluecolleges.net/by-city/online-colleges-san-francisco-ca/" target="_blank" <a
><span class="fo">2020年旧金山最佳在线学位项目排名第3</span></a href="https://thebestschools.org/rankings/25-best-online-masters-educational-administration-degree-programs/"
target="_blank"
>2022年TheBestSchools全美在线教育（教育管理）硕士排名19</a
> >
<a href="https://www.online-phd-programs.org/best-online-phd-psychology/" target="_blank" <a
><span class="fo">2020年心理学在线博士项目全美排名第14</span></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>
<div class="footer_logo"> <div class="footer_logo">
<img src="@/assets/images/logo.svg" alt class="ezijing-logo" /> <img src="https://zws-imgs-pub.ezijing.com/pc/base/logo.svg" />
<img src="@/assets/images/logginred.png" alt /> <img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_blue.svg" />
</div> </div>
</div> </div>
</div> </footer>
<div class="copyright" style="height: 40px; line-height: 40px; color: #fff; background: #ccc"> <div class="copyright">
<div class="inner" style="width: 100%; justify-content: center; display: flex"> <p>
<p style="font-size: 12px">
Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司 Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司
</p> </p>
<a <a href="https://tsm.miit.gov.cn/dxxzsp/" target="_blank">
target="_blank" <p>京ICP证150431号</p>
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>
<a <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" target="_blank">
target="_blank" <img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
class="record" <p>安备 11010802023681号</p>
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>
<a <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
target="_blank" <p>京ICP备15016866号-1</p>
href="https://beian.miit.gov.cn/#/Integrated/index"
style="color: #fff; text-decoration: none"
>
<p style="font-size: 12px">京ICP备15016866号-1</p>
</a> </a>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default {} export default {
name: 'AppFooter'
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.copyright { .footer {
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;
background-size: cover; background-size: cover;
background: #fff; background: #fff url('~@/assets/images/fotbk.png') no-repeat center center;
width: 100%; .footer-inner {
.flex { padding: 80px 0;
margin: 0 auto; 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%; width: 80%;
min-height: 460px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box;
.fot { .footer-link {
display: flex; display: flex;
z-index: 7; z-index: 7;
flex-direction: column; flex-direction: column;
h4 { h4 {
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 600;
color: rgba(34, 34, 34, 1); color: rgba(34, 34, 34, 1);
margin-bottom: 14px; margin-bottom: 14px;
position: relative; position: relative;
...@@ -163,31 +110,43 @@ export default {} ...@@ -163,31 +110,43 @@ export default {}
position: absolute; position: absolute;
bottom: -4px; bottom: -4px;
height: 3px; height: 3px;
background: #fa9e3b; background: #faa634;
width: 100%; width: 100%;
} }
} }
} }
span { a {
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: rgba(34, 34, 34, 1); color: rgba(34, 34, 34, 1);
}
a {
padding: 20px 0px; padding: 20px 0px;
} }
} }
.footer_logo { .footer_logo {
z-index: 7; width: 180px;
display: flex; display: flex;
align-items: baseline;
flex-direction: column; flex-direction: column;
justify-content: space-around; 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> </style>
src/components/layout/header.vue
浏览文件 @ f04ed8aa
<template> <template>
<header class="app-header"> <header class="header" :class="{ 'is-fixed': fixed }">
<section class="app-header-bar"> <HeaderNews />
<div class="inner"> <div class="header-inner">
<div class="login"> <div class="header-main">
<template v-if="isLogin"> <div class="logo">
<div>{{ user.nickname || user.realname }}</div> <router-link to="/">
<span>|</span> <img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_white.svg" v-if="fixed" />
<div @click="handleLogout">退出</div> <img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_blue.svg" v-else />
</template> </router-link>
<template v-else>
<div @click="handleRegister">注册</div>
<span>|</span>
<div @click="handleLogin">登录</div>
</template>
</div> </div>
</div> <nav class="nav">
</section> <div class="nav-item" v-for="item in navList" :key="item.path">
<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">
<router-link :to="item.path">{{ item.title }}</router-link> <router-link :to="item.path">{{ item.title }}</router-link>
</li> </div>
</ul> </nav>
<div class="search">
<div class="lang">EN</div>
<input type="text" placeholder="Search" class="search-input" />
<div class="search-button">搜索</div>
</div> </div>
</div> </div>
</section>
<vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
</header> </header>
</template> </template>
<script> <script>
import HeaderNews from './headerNews.vue'
export default { export default {
name: 'AppHeader',
props: { fixed: { type: Boolean, default: false } },
components: { HeaderNews },
data() { data() {
return { return {
title: '中国未来金融领袖计划',
navList: [ navList: [
{ title: '首页', path: '/index' }, { title: '首页', path: '/index' },
{ title: '项目介绍', path: '/project' }, { title: '家庭教育硕士', path: '/profession' },
{ title: '视频中心', path: '/videoCenter' }, { title: '报名申请', path: '/my' },
{ title: '招生信息', path: '/recruit' }, { title: '最新动态', path: '/news' },
{ title: '教学模块', path: '/teaching' }, { title: '联系我们', path: '/contact' }
{ 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')
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-header { .header {
background-color: #fff; position: sticky;
.inner { top: 0;
max-width: 970px; width: 100%;
margin: 0 auto; z-index: 100;
&.is-fixed {
.header-inner {
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
} }
} .nav {
.app-header-bar { .nav-item {
height: 40px;
background-color: #333;
.login {
float: right;
display: flex;
line-height: 40px;
color: #fff; color: #fff;
div {
font-size: 18px;
text-align: center;
cursor: pointer;
} }
span {
padding: 0 20px;
} }
} }
} }
.app-header-main { .header-inner {
max-width: 970px; width: 100%;
margin: 0 auto; background-color: #fff;
.hd { }
height: 110px; .header-main {
display: flex;
justify-content: space-between;
align-items: center;
}
.hd-left {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
} justify-content: space-between;
width: 80%;
height: 80px;
margin: 0 auto;
.logo { .logo {
width: 156px; flex: 1;
// height: 50px; height: 100%;
}
.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;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
li {
font-size: 15px;
font-weight: 600;
color: #222;
line-height: 20px;
padding: 0 14px;
a { a {
position: relative; height: 80%;
}
&:first-child {
padding-left: 0;
} }
img {
height: 100%;
} }
li + li {
border-left: 1px solid #d7d8d9;
} }
} .nav {
.router-link-active:after { flex: 2;
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: #bf0927;
}
.search {
display: flex; display: flex;
align-items: center; 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;
} }
.lang { a {
font-size: 15px; &.router-link-active {
color: #999; color: var(--main-color);
} }
.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> </style>
src/components/layout/components/tab.vue → src/components/layout/headerNews.vue
浏览文件 @ f04ed8aa
<template> <template>
<div class="tab"> <div class="header-news">
<span v-for="(item, index) in listData" :key="index" @click="details(item)"> <span v-for="(item, index) in listData" :key="index" @click="handleClick(item)">
{{ item.created_time | formatDate(item.created_time) }} {{ item.created_time | formatDate(item.created_time) }}
{{ item.title }} {{ item.title }}
</span> </span>
...@@ -11,16 +11,12 @@ ...@@ -11,16 +11,12 @@
import cAction from '@action' import cAction from '@action'
export default { export default {
name: 'tab', name: 'HeaderNews',
data() { data() {
return { return {
isloading: false, loading: false,
listData: [], listData: [],
quiuse: { params: { page: 1, per_page: 1, project_id: 1021 }
page: 1,
per_page: 1,
project_id: 1021
}
} }
}, },
filters: { filters: {
...@@ -34,38 +30,31 @@ export default { ...@@ -34,38 +30,31 @@ export default {
} }
}, },
methods: { methods: {
details(item) { handleClick(item) {
this.$router.push({ this.$router.push({ name: 'details-recent-news', params: { id: item.id } })
name: 'details-recent-news',
params: { id: item.id }
})
}, },
setDate() { fetchList() {
this.isloading = true this.loading = true
cAction.News.newsList(this.quiuse) cAction.News.newsList(this.params)
.then(data => { .then(data => {
this.listData = data.map(k => { this.listData = data
k.hover = false this.loading = false
return k
})
this.isloading = false
}) })
.catch(e => { .catch(e => {
this.isloading = false this.loading = false
console.log(e)
}) })
} }
}, },
created() { mounted() {
this.setDate() this.fetchList()
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab { .header-news {
height: 40px; height: 40px;
background: #0b5a94; background: #005596;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
......
src/components/layout/index.vue
浏览文件 @ f04ed8aa
<template> <template>
<div class="layout"> <div class="layout">
<div class="container"> <AppHeader v-bind="$attrs" />
<div class="header" :class="classes">
<Tab />
<Slider />
</div>
<div class="main"> <div class="main">
<router-view></router-view> <router-view></router-view>
<RightAside></RightAside>
</div>
</div> </div>
<AppFooter v-if="footer" />
<RightAside />
</div> </div>
</template> </template>
<script> <script>
import Tab from './components/tab.vue' import AppHeader from './header.vue'
import Slider from './components/slider.vue' import AppFooter from './footer.vue'
import RightAside from './components/rightAside' import RightAside from './rightAside'
export default { export default {
props: { fixed: { type: Boolean, default: false } }, components: { AppHeader, AppFooter, RightAside },
components: { Tab, Slider, RightAside }, props: { footer: { type: Boolean, default: false } }
computed: {
classes() {
return {
'is-fixed': this.fixed
}
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.layout { .layout {
height: 100%; min-height: 100vh;
width: 100%;
.container {
height: 100%;
position: relative;
.header {
position: sticky;
top: 0;
width: 100%;
padding: 0px;
z-index: 10;
&.is-fixed {
position: fixed;
}
}
.main { .main {
position: relative; position: relative;
padding: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
}
} }
</style> </style>
src/components/slide-list.vue
浏览文件 @ f04ed8aa
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
background: #fff4eeff; background: #fff4eeff;
.slide-list-title { .slide-list-title {
font-weight: 600; font-weight: 600;
color: #fa9e3b; color: #faa634;
} }
} }
.slide-list { .slide-list {
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
width: 3px; width: 3px;
background: #fa9e3b; background: #faa634;
} }
} }
} }
......
src/pages/contact-us/index.vue
浏览文件 @ f04ed8aa
<template> <template>
<div class="layout_com_page"> <div class="layout_com_page">
<vue-lazy-component> <div class="contact-banner">
<div class="contact-banner" :style="{height: heightdy + 'px'}">
<div class="contact-main"> <div class="contact-main">
<span class="font-size-24">ezijing</span> <span class="font-size-24">ezijing</span>
<span class="font-size-40 befo">BEIJING</span> <span class="font-size-40 befo">BEIJING</span>
...@@ -10,36 +9,21 @@ ...@@ -10,36 +9,21 @@
<span class="font-size-18">电话：010-62790180</span> <span class="font-size-18">电话：010-62790180</span>
</div> </div>
</div> </div>
</vue-lazy-component> <FormBox />
<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> </div>
</template> </template>
<script> <script>
import Leavex from '@/components/leavex/index.vue' import FormBox from '@/components/formBox'
import PageFooter from '@/components/page-footer/index.vue'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default { export default {
name: 'contact-us', name: 'contact-us',
mixins: [dyHeight], components: { FormBox }
components: {
Leavex,
PageFooter
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.contact-banner { .contact-banner {
width: 100%; height: calc(100vh - 40px);
position: relative; position: relative;
background: url('~@/assets/images/wm.png') no-repeat center center; background: url('~@/assets/images/wm.png') no-repeat center center;
background-size: cover; background-size: cover;
......
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 { ...@@ -151,7 +151,7 @@ export default {
} }
} }
.nav { .nav {
background-color: #fa9e3b; background-color: #faa634;
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
......
src/pages/login/index.vue
浏览文件 @ f04ed8aa
...@@ -43,21 +43,6 @@ export default { ...@@ -43,21 +43,6 @@ export default {
min-height: calc(100vh - 120px); min-height: calc(100vh - 120px);
background: #fff; 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 { .main {
position: relative; position: relative;
} }
...@@ -125,7 +110,7 @@ export default { ...@@ -125,7 +110,7 @@ export default {
color: #fff; color: #fff;
} }
.main .title .icon { .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; background-size: contain;
width: 166px; width: 166px;
height: 40px; height: 40px;
......
src/pages/major-set/index.vue
浏览文件 @ f04ed8aa
...@@ -232,25 +232,13 @@ ...@@ -232,25 +232,13 @@
</div> </div>
</vue-lazy-component> </vue-lazy-component>
<vue-lazy-component> <FormBox />
<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>
</div> </div>
</template> </template>
<script> <script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import FilterJson from './filterType.json' import FilterJson from './filterType.json'
import FormBox from '@/components/formBox'
import { dyHeight } from '@/pages/homepage/mixins/index.js' import { dyHeight } from '@/pages/homepage/mixins/index.js'
import Vue from 'vue' import Vue from 'vue'
...@@ -263,8 +251,7 @@ export default { ...@@ -263,8 +251,7 @@ export default {
components: { components: {
Swiper, Swiper,
SwiperSlide, SwiperSlide,
Leavex, FormBox
PageFooter
}, },
directives: { directives: {
swiper: directive swiper: directive
...@@ -863,16 +850,16 @@ export default { ...@@ -863,16 +850,16 @@ export default {
width: 270px; width: 270px;
height: 84px; height: 84px;
line-height: 84px; line-height: 84px;
color: #fa9e3b; color: #faa634;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
margin: 30px 0px; margin: 30px 0px;
border: 2px solid #fa9e3b; border: 2px solid #faa634;
font-size: 22px; font-size: 22px;
} }
.hover-bt { .hover-bt {
background-color: #fa9e3b; background-color: #faa634;
color: #fff; color: #fff;
} }
} }
...@@ -910,7 +897,7 @@ export default { ...@@ -910,7 +897,7 @@ export default {
.div-son { .div-son {
width: 20px; width: 20px;
height: 20px; height: 20px;
background: #fa9e3b; background: #faa634;
border-radius: 50%; border-radius: 50%;
} }
} }
...@@ -1127,7 +1114,7 @@ export default { ...@@ -1127,7 +1114,7 @@ export default {
// -webkit-transform: translateX(-50%); // -webkit-transform: translateX(-50%);
width: 8px; width: 8px;
height: 8px; height: 8px;
border: 2px solid #fa9e3b; border: 2px solid #faa634;
border-radius: 50%; border-radius: 50%;
} }
} }
...@@ -1166,7 +1153,7 @@ export default { ...@@ -1166,7 +1153,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.wm-red { .wm-red {
color: #fa9e3b !important; color: #faa634 !important;
} }
.nowrap { .nowrap {
white-space: nowrap; white-space: nowrap;
......
src/pages/recent-news/index.vue
浏览文件 @ f04ed8aa
<template> <template>
<div class="layout_com_page"> <div class="layout_com_page">
<vue-lazy-component>
<div class="layout_com_page_banner recent-news-header" :style="{ height: 364 + 'px' }"> <div class="layout_com_page_banner recent-news-header" :style="{ height: 364 + 'px' }">
<span>最新动态</span> <span>最新动态</span>
</div> </div>
</vue-lazy-component>
<vue-lazy-component>
<div class="recent-news-body"> <div class="recent-news-body">
<div <div
v-loading="isloading" v-loading="isloading"
...@@ -48,22 +45,15 @@ ...@@ -48,22 +45,15 @@
<img @click="manyList" :src="require('@/assets/images/apply-for/bg_down.png')" /> <img @click="manyList" :src="require('@/assets/images/apply-for/bg_down.png')" />
</div> </div>
</div> </div>
</vue-lazy-component>
<vue-lazy-component>
<page-footer />
</vue-lazy-component>
</div> </div>
</template> </template>
<script> <script>
import PageFooter from '@/components/page-footer/index.vue'
import cAction from '@action' import cAction from '@action'
export default { export default {
name: 'recent-news', name: 'recent-news',
components: {
PageFooter
},
filters: { filters: {
formatDate(data, state = null) { formatDate(data, state = null) {
const date = new Date(data.replace(/-/g, '/')) const date = new Date(data.replace(/-/g, '/'))
...@@ -197,7 +187,7 @@ export default { ...@@ -197,7 +187,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #fff; background: #fff;
color: #fa9e3b; color: #faa634;
padding: 20px; padding: 20px;
span { span {
padding: 0px 20px; padding: 0px 20px;
......
src/router/routes.js
浏览文件 @ f04ed8aa
...@@ -4,21 +4,21 @@ export const routes = [ ...@@ -4,21 +4,21 @@ export const routes = [
{ {
path: '/index', path: '/index',
component: Layout, component: Layout,
props: { fixed: true }, props: { fixed: true, footer: true },
children: [{ path: '', component: () => import('@/pages/homepage/index.vue'), name: 'home-page' }] children: [{ path: '', component: () => import('@/pages/homepage/index.vue'), name: 'home-page' }]
}, },
// 专业设置 // 专业设置
{ {
path: '/profession', path: '/profession',
component: Layout, component: Layout,
props: { fixed: true }, props: { fixed: true, footer: true },
children: [{ name: 'major-set', path: '', component: () => import('@/pages/major-set/index.vue') }] children: [{ name: 'major-set', path: '', component: () => import('@/pages/major-set/index.vue') }]
}, },
// 最新动态 // 最新动态
{ {
path: '/news', path: '/news',
component: Layout, component: Layout,
props: { fixed: true }, props: { fixed: true, footer: true },
children: [ children: [
{ name: 'recent-news', path: '', component: () => import('@/pages/recent-news/index.vue') }, { name: 'recent-news', path: '', component: () => import('@/pages/recent-news/index.vue') },
{ {
...@@ -34,7 +34,7 @@ export const routes = [ ...@@ -34,7 +34,7 @@ export const routes = [
name: 'contact-us', name: 'contact-us',
path: '/contact', path: '/contact',
component: Layout, component: Layout,
props: { fixed: true }, props: { fixed: true, footer: true },
children: [{ path: '', component: () => import('@/pages/contact-us/index.vue') }] children: [{ path: '', component: () => import('@/pages/contact-us/index.vue') }]
}, },
// 在线报名 // 在线报名
......
src/style.scss
浏览文件 @ f04ed8aa
...@@ -31,7 +31,7 @@ body { ...@@ -31,7 +31,7 @@ body {
} }
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: #fa9e3b; $--color-primary: #faa634;
/* 改变 icon 字体路径变量，必需 */ /* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引入element-ui对应scss文件，重新编译 */ /* 引入element-ui对应scss文件，重新编译 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论