Skip to content

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

chore: update

上级 4540bfec
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 694 行增加 和 871 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论