Skip to content

P
project-www-h5
提交 28cc719e authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 0847735c
隐藏空白字符变更
内嵌 并排
正在显示 包含 579 行增加 和 24 行删除
components/Card.vue
浏览文件 @ 28cc719e
......@@ -22,6 +22,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.card-hd__title {
flex: 1;
......
components/Header.vue
浏览文件 @ 28cc719e
<template>
<header class="main-header">
<nuxt-link to="/" class="logo"></nuxt-link>
<div class="search"></div>
<div class="menu"></div>
</header>
<div>
<header class="main-header">
<nuxt-link to="/" class="logo"></nuxt-link>
<div class="search"></div>
<div class="menu"></div>
</header>
<app-menu></app-menu>
</div>
</template>
<script>
import AppMenu from '@/components/Menu'
export default {
components: { AppMenu }
}
</script>
<style lang="scss">
.main-header {
position: relative;
display: flex;
align-items: center;
padding: 0.16rem 0.15rem 0.2rem;
background-color: #fff;
border-top: 10px solid #aa1941;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
.logo {
flex: 1;
background: url('~/assets/images/logo.png') no-repeat;
......
components/Menu.vue 0 → 100644
浏览文件 @ 28cc719e
<template>
<nav class="app-menu">
<ul>
<tree-item :item="item" v-for="(item, index) in list" :key="index" class="first"></tree-item>
</ul>
</nav>
</template>
<script>
import TreeItem from '@/components/TreeItem'
export default {
components: { TreeItem },
data() {
return {
list: [
{
name: '关于紫荆',
path: '/about/introduce',
children: [
{
name: '紫荆简介',
path: '/about/introduce'
},
{
name: '文化理念',
path: '/about/culture'
},
{
name: '新闻中心',
path: '/about/news'
},
{
name: '联系我们',
path: '/about/contact'
}
]
},
{
name: '学位教育',
children: [
{
name: '本科',
children: [
{
name: '海外留学SHMS',
path: '',
pathType: 3
}
]
},
{
name: '硕士',
children: [
{
name: '金融硕士MSF',
path: 'https://kelley.ezijing.com',
pathType: 1
},
{
name: '教育学硕士Med（早教-蒙台梭利）',
path: 'https://cu.ezijing.com',
pathType: 1
},
{
name: '应用心理学MAP',
path: 'https://ciis.ezijing.com',
pathType: 1
},
{
name: '未来金融领袖计划',
path: 'https://cfflp.ezijing.com',
pathType: 1
}
]
},
{
name: 'MBA',
children: [
{
name: '通用MBA',
pathType: 3
},
{
name: '金融MBA',
path: 'https://sofia.ezijing.com',
pathType: 1
},
{
name: '酒店与旅游工商管理MBA',
path: 'https://shms.ezijing.com',
pathType: 1
}
]
},
{
name: '博士',
children: [
{
name: '心理学博士DBA（即将推出）',
pathType: 3
},
{
name: '工商管理学博士EDD（即将推出）',
pathType: 3
}
]
}
]
},
{
name: '教育服务',
children: [
{
name: '1+x',
children: [
{
name: '金融产品数字化营销证书',
path: 'http://x.ezijing.com',
pathType: 1
},
{
name: '数字金融客户服务证书',
pathType: 3
},
{
name: '酒店及旅游业的数字化营销证书',
pathType: 3
},
{
name: '青少年儿童心理以及行为指导证书',
pathType: 3
}
]
},
{
name: '专业共建',
pathType: 3
},
{
name: '校企合作',
pathType: 3
},
{
name: '产业学院',
pathType: 3
},
{
name: '双高建设',
pathType: 3
},
{
name: '在线教育解决方案',
children: [
{
name: '产品技术',
pathType: 3
},
{
name: '技术支持',
pathType: 3
},
{
name: '联合运营',
pathType: 3
}
]
}
]
},
{
name: '校友会',
path: '/alumnus',
children: [
{
name: '校友会',
path: '/alumnus'
}
]
},
{
name: '我要报名'
}
]
}
}
}
</script>
<style lang="scss">
.app-menu {
// position: fixed;
// left: 0;
// right: 0;
// top: 0.62rem;
// bottom: 0;
background-color: #fff;
// z-index: 100;
padding: 0 0.15rem;
.first > .cell .cell-title {
font-size: 0.14rem;
font-weight: bold;
}
.first > .tree-item-group {
padding: 0;
}
}
</style>
components/Search.vue 0 → 100644
浏览文件 @ 28cc719e
<template>
<div></div>
</template>
<script>
export default {}
</script>
components/TreeItem.vue 0 → 100644
浏览文件 @ 28cc719e
<template>
<li class="tree-item">
<div class="cell" :class="{ bold: isFolder }" @click="toggle">
<div class="cell-title">
{{ item.name }}
</div>
<div class="cell-icon" v-if="isFolder">
<van-icon name="arrow-up" v-if="isOpen" />
<van-icon name="arrow-down" v-else />
</div>
</div>
<ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
<tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
</ul>
</li>
</template>
<script>
export default {
props: {
item: Object
},
data: function () {
return {
isOpen: false
}
},
computed: {
isFolder: function () {
return this.item.children && this.item.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen
}
}
}
}
</script>
<style lang="scss">
.tree-item {
.cell {
display: flex;
align-items: center;
height: 0.52rem;
border-bottom: 1px solid #999;
}
.cell-title {
flex: 1;
font-size: 0.13rem;
font-weight: 400;
color: #333;
}
.cell-icon {
font-size: 0.14rem;
}
.tree-item-group {
padding-left: 0.1rem;
}
}
</style>
components/home/Banner.vue
浏览文件 @ 28cc719e
......@@ -22,9 +22,11 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.banner-img {
display: block;
width: 100%;
height: 1.51rem;
object-fit: cover;
}
</style>
components/home/Case.vue
浏览文件 @ 28cc719e
<template>
<card title="教育服务案例"></card>
<card title="教育服务案例">
<div class="case">
<img src="/images/home_case_banner.png" class="case-pic" />
<p class="case-title">“数字化实训系统新实践”—走进深职院智慧教室现场</p>
</div>
</card>
</template>
<script>
......@@ -8,3 +13,27 @@ export default {
components: { Card }
}
</script>
<style lang="scss" scoped>
.case {
position: relative;
}
.case-pic {
display: block;
width: 100%;
height: 1.17rem;
object-fit: cover;
}
.case-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.24rem;
padding: 0 0.1rem;
font-size: 0.1rem;
line-height: 0.24rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
components/home/Class.vue
浏览文件 @ 28cc719e
<template>
<card title="公开课">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<img src="/images/home_class_banner.png" class="class-banner" />
<div class="list">
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="list-item-hd">
<h3 class="list-item__title">{{ item.title }}</h3>
</div>
<div class="list-item-bd">
<p class="list-item__content">{{ item.descriptio }}</p>
</div>
<div class="list-item-ft">
<span class="list-item__date">{{ formatDate(item.created_time) }}</span>
<span class="list-item__view">{{ item.count }}</span>
<span class="list-item__btn">免费学习</span>
</div>
</div>
</div>
</card>
</template>
<script>
import Card from '@/components/Card'
export default {
components: { Card }
components: { Card },
data() {
return {
list: []
}
},
fetch() {
this.list = [
{
title: '发现注意力的秘密—儿童心理发展系列课第一课',
descriptio: '孩子为什么那么粗心？ 为什么玩游戏就聚精会神？ 为什么学习却三心二意？ 孩子为什么那么粗心？......',
created_time: '2020-01-22 14:41:08',
count: 36023
},
{
title: '发现注意力的秘密—儿童心理发展系列课第一课',
descriptio: '孩子为什么那么粗心？ 为什么玩游戏就聚精会神？ 为什么学习却三心二意？ 孩子为什么那么粗心？......',
created_time: '2020-01-22 14:41:08',
count: 36023
}
]
},
methods: {
// 2020-01-22
formatDate(value) {
const date = new Date(value)
return date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.class-banner {
display: block;
width: 100%;
height: 1.17rem;
margin-bottom: 0.09rem;
object-fit: cover;
}
.list-item {
padding: 0.14rem 0.1rem;
margin-bottom: 0.09rem;
background-color: #fff;
}
.list-item-hd {
}
.list-item__title {
font-size: 0.14rem;
color: #333;
}
.list-item-bd {
padding: 0.1rem 0;
}
.list-item__content {
font-size: 0.11rem;
color: #666;
line-height: 0.2rem;
}
.list-item-ft {
display: flex;
color: #a8a8a8;
}
.list-item__date {
font-size: 0.1rem;
}
.list-item__view {
flex: 1;
font-size: 0.1rem;
padding-left: 0.14rem;
}
.list-item__btn {
min-width: 0.56rem;
height: 0.16rem;
padding: 0 0.08rem;
font-size: 0.1rem;
line-height: 0.16rem;
color: #fff;
background-color: #aa1941;
text-align: center;
border-radius: 0.03rem;
cursor: pointer;
}
</style>
components/home/Degree.vue
浏览文件 @ 28cc719e
......@@ -120,7 +120,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.degree {
margin: 0.2rem 0.16rem;
}
......
components/home/Post.vue
浏览文件 @ 28cc719e
......@@ -11,10 +11,10 @@
</div>
</div>
<div class="list">
<div class="list-item" v-for="(item, index) in futureList" :key="index">
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="list-item__date">
<p>{{ formatMD(item.created_time) }}</p>
<p>{{ formatYY(item.created_time) }}</p>
<p class="t1">{{ formatMD(item.created_time) }}</p>
<p class="t2">{{ formatYY(item.created_time) }}</p>
</div>
<div class="list-item__title">{{ item.title }}</div>
</div>
......@@ -47,7 +47,7 @@ export default {
// 2021
formatYY(value) {
const date = new Date(value)
return date.getMonth() + 1 + '月' + date.getDate() + '日'
return date.getFullYear()
},
// 2/14
formatMD(value) {
......@@ -58,3 +58,73 @@ export default {
fetch() {}
}
</script>
<style lang="scss" scoped>
.future {
display: flex;
align-items: center;
background-color: #fff;
padding: 0.15rem 0.22rem;
}
.future-left {
width: 0.75rem;
font-size: 0.15rem;
color: #424242;
text-align: center;
}
.future-right {
flex: 1;
padding-left: 0.28rem;
}
.future-item {
display: flex;
align-items: center;
padding: 0.15rem 0;
}
.future-item + .future-item {
border-top: 1px solid #999;
}
.future-item__title {
flex: 1;
font-size: 0.1rem;
text-align: center;
}
.future-item__date {
width: 0.8rem;
font-size: 0.15rem;
color: #aa1941;
text-align: center;
}
.list-item {
display: flex;
align-items: center;
padding: 0.13rem 0;
border-bottom: 1px solid #e3e3e3;
}
.list-item__date {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 0 0 0.7rem;
height: 0.54rem;
color: #fff;
background-color: #aa1941;
border-radius: 0.04rem;
.t1 {
font-size: 0.16rem;
opacity: 0.8;
}
.t2 {
font-size: 0.13rem;
opacity: 0.8;
}
}
.list-item__title {
margin-left: 0.13rem;
font-size: 0.13rem;
color: #424242;
line-height: 0.26rem;
}
</style>
components/home/Publish.vue
浏览文件 @ 28cc719e
<template>
<card title="校长寄语">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe class="my-swipe" :autoplay="3000" :vertical="true" indicator-color="white">
<template v-for="(item, index) in list">
<van-swipe-item :key="index"><img :src="item.src" class="banner-img" /></van-swipe-item>
</template>
</van-swipe> -->
</van-swipe>
</card>
</template>
<script>
import Card from '@/components/Card'
export default {
components: { Card }
components: { Card },
data() {
return {
list: []
}
},
fetch() {
this.list = [
{ src: '/images/home_publish_banner.png', href: '' },
{ src: '/images/home_publish_banner.png', href: '' }
]
}
}
</script>
<style lang="scss" scoped>
.my-swipe {
height: 1.36rem;
}
.banner-img {
display: block;
width: 100%;
height: 1.36rem;
object-fit: cover;
}
::v-deep .van-swipe__indicators--vertical {
left: auto;
right: 0;
}
</style>
components/home/Service.vue
浏览文件 @ 28cc719e
......@@ -40,7 +40,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.service {
margin: 0.2rem 0.16rem;
}
......
components/home/Story.vue
浏览文件 @ 28cc719e
<template>
<card title="校友故事">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<p class="tips">You are What you together， 结识5000+ 同样优秀的人！</p>
<van-swipe class="my-swipe" :loop="false" :show-indicators="false">
<template v-for="(item, index) in list">
<van-swipe-item :key="index"><img :src="item.src" class="banner-img" /></van-swipe-item>
</template>
</van-swipe>
</card>
</template>
<script>
import Card from '@/components/Card'
export default {
components: { Card }
components: { Card },
data() {
return {
list: []
}
},
fetch() {
this.list = [
{ src: '/images/banner.png', href: '' },
{ src: '/images/banner.png', href: '' }
]
}
}
</script>
<style lang="scss" scoped>
.tips {
font-size: 0.1rem;
font-weight: 500;
color: #424242;
margin-bottom: 0.1rem;
}
.banner-img {
display: block;
width: 100%;
height: 1.51rem;
object-fit: cover;
}
</style>
layouts/default.vue
浏览文件 @ 28cc719e
......@@ -21,11 +21,13 @@ export default {
}
body {
font-size: 14px;
color: #424242;
background-color: #f9f8f8;
}
.main-layout {
max-width: 750px;
margin: 0 auto;
overflow: hidden;
}
a {
color: currentColor;
......
nuxt.config.js
浏览文件 @ 28cc719e
let config = {}
if (process.env.NODE_ENV === 'production') {
config = {
server: { port: 2048, host: '0.0.0.0', timing: false }
}
}
export default {
server: {
port: 2048, // default: 3000
host: '0.0.0.0', // default: localhost,
timing: false
},
...config,
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: '紫荆教育-在线MBA课程-MBA在线课程-专业金融在线教育品牌',
......
pages/index.vue
浏览文件 @ 28cc719e
<template>
<div>
<div class="home">
<banner />
<degree />
<service />
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论