提交 13d2bdd3 authored 作者: matian's avatar matian

Auto stash before merge of "v3" and "origin/v3"

上级 cc6a31d8
......@@ -17,6 +17,7 @@ export default {
<style lang="scss">
.card {
margin: 0.2rem 0.15rem;
// padding: 0 0.21rem 0 0.21rem;
}
.card-hd {
display: flex;
......
......@@ -189,7 +189,8 @@ export default {
children: [
{ name: this.$t('menu.alumniChild.alumni'), path: '/alumnus' },
{ name: this.$t('menu.alumniChild.alumniZijinghua'), path: '/alumnus/flower' },
{ name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story' }
{ name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story' },
{ name: this.$t('menu.alumniChild.roadmap'), path: '/roadmap' }
// { name: '校友风采', path: '/alumnus/style' }
]
}
......
......@@ -23,10 +23,22 @@ export default {
</script>
<style lang="scss">
.project-list {
padding-bottom: 70px;
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
}
.project-item {
margin-top: 0.1rem;
display: flex;
background-color: #fff;
img {
width: 100%;
}
&:hover {
box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
}
}
</style>
......@@ -11,7 +11,8 @@ export default {
list: [
{ name: this.$t('menu.alumniChild.alumni'), path: '/alumnus', value: '1' },
{ name: this.$t('menu.alumniChild.alumniZijinghua'), path: '/alumnus/flower', value: '2' },
{ name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story', value: '3' }
{ name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story', value: '3' },
{ name: this.$t('menu.alumniChild.roadmap'), path: '/roadmap', value: '3' },
]
}
}
......
......@@ -79,7 +79,8 @@ export default {
alumniChild: {
alumni: '校友会',
alumniZijinghua: '紫荆花计划',
alumniStory: '校友故事'
alumniStory: '校友故事',
roadmap: '终身学习'
}
},
home: {
......
......@@ -46,10 +46,10 @@ export default {
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['vant/lib/index.css', 'swiper/css/swiper.css', '@/assets/css/base.css'],
css: ['vant/lib/index.css', 'swiper/css/swiper.css', '@/assets/css/base.css', 'element-ui/lib/theme-chalk/index.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['@/plugins/i18n', '@/plugins/axios', '@/plugins/vant', { src: '@/plugins/swiper' }],
plugins: ['@/plugins/i18n', '@/plugins/axios', '@/plugins/vant', '@/plugins/element-ui', { src: '@/plugins/swiper' }],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
......
差异被折叠。
......@@ -13,6 +13,7 @@
"axios": "^0.21.1",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.11.0",
"element-ui": "^2.15.8",
"nuxt": "^2.15.3",
"qs": "^6.10.1",
"swiper": "^5.4.5",
......
<template>
<div>
<div class="banner">
<div v-if="roadList && roadList.length">
<div v-for="(item, index) in roadList" :key="index" class="roadList">
<el-popover
title="我的项目"
width="146"
trigger="click"
popper-class="popover"
:placement="item.position"
v-model="item.isShow"
visible-arrow="true"
>
<div>
<!-- 我的项目 -->
<div v-for="(it, indexItem) in item.projectList" :key="indexItem" class="project_name">
<AppLink :data="it">
{{ it.name }}
</AppLink>
</div>
<!-- 未来可选项目 -->
<div class="line"></div>
<div class="el-popover__title">未来可选目标:</div>
<div v-for="(it, indexItem) in item.checkList" :key="indexItem" class="project_name">{{ it.name }}</div>
</div>
<div slot="reference" class="roadList_con">
<img :src="item.icon" alt="" />
<div class="title">{{ item.title }}</div>
</div>
</el-popover>
</div>
</div>
<div class="homeList" v-if="homeList && homeList.length">
<div class="homeList_con" v-for="(itemRoad, index) in homeList" :key="index">
<el-popover trigger="click" popper-class="popover" :placement="itemRoad.position" v-model="itemRoad.isShow">
<div>
<!-- 我的项目 -->
<div v-for="(it, indexItem) in itemRoad.itemList" :key="indexItem" class="project_name">
{{ it.name }}
</div>
</div>
<div slot="reference" class="homeList_con_item">
<img :src="itemRoad.icon" alt="" />
<div class="title">{{ itemRoad.title }}</div>
</div>
</el-popover>
</div>
</div>
</div>
<div class="content">
<div class="content_top">
<div class="top_title">
在线国际学位
</div>
<div class="top_more">查看更多+</div>
</div>
<div class="content_bottom">
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img1.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img2.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img3.png" alt="" />
</div>
</div>
<div class="content content1">
<div class="content_top">
<div class="top_title">
留学中心
</div>
<div class="top_more">查看更多+</div>
</div>
<div class="content_bottom">
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img4.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img5.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/h5/lifeLearning/img6.png" alt="" />
</div>
</div>
</div>
</template>
<script>
import { roadMapList, homeList } from '@/utils/roadMap.js'
import AppLink from '@/components/Link.vue'
export default {
components: { AppLink },
date() {
return {
roadList: [],
homeList: []
}
},
created() {
this.roadList = roadMapList
this.homeList = homeList
console.log(this.roadList)
},
mounted() {
this.$nextTick(() => {
this.roadList.map(item => {
console.log(item.title, 'title')
if (item.title === '职业教育') {
item.isShow = true
}
})
})
}
}
</script>
<style lang="scss">
.el-popover.popover {
background: rgba(255, 255, 255, 0.39);
.el-popover__title {
font-weight: 400;
color: #ffffff;
font-size: 0.09rem;
}
.project_name {
font-size: 0.11rem;
font-weight: bold;
color: #ffffff;
cursor: pointer;
}
.line {
width: 1.41rem;
border: 1px dashed #ccc;
margin: 0.1rem 0 0.1rem 0;
}
}
.banner {
width: 100%;
height: 6.31rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/lifeLearning/banner.png);
// background-color: #ccc;
background-size: 100% 100%;
position: relative;
.roadList {
height: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
.roadList_con {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title {
font-size: 0.14rem;
font-weight: 500;
color: #ffffff;
}
}
.roadList:nth-child(1) {
position: absolute;
z-index: 100000;
top: 0.35rem;
left: 50%;
transform: translateX(-50%);
img {
width: 0.2rem;
}
}
.roadList:nth-child(2) {
position: absolute;
z-index: 100000;
top: 1.43rem;
left: 50%;
transform: translateX(-50%);
img {
width: 0.21rem;
}
}
.roadList:nth-child(3) {
position: absolute;
z-index: 100000;
top: 2.5rem;
left: 50%;
transform: translateX(-50%);
img {
width: 0.32rem;
}
}
.roadList:nth-child(4) {
position: absolute;
z-index: 100000;
top: 3.57rem;
left: 50%;
transform: translateX(-50%);
img {
width: 0.25rem;
}
}
.roadList:nth-child(5) {
position: absolute;
z-index: 100000;
top: 4.44rem;
left: 50%;
transform: translateX(-50%);
img {
width: 0.19rem;
}
}
.homeList {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 5.35rem;
left: 50%;
transform: translateX(-50%);
width: 70%;
.homeList_con {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.project_name {
font-size: 0.11rem;
font-weight: bold;
color: #ffffff;
cursor: pointer;
}
.homeList_con_item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title {
font-size: 0.14rem;
font-weight: 500;
color: #ffffff;
}
img {
width: 0.4rem;
height: 100%;
}
}
}
}
}
.content {
padding: 0.28rem 0.21rem 0 0.21rem;
.content_top {
display: flex;
justify-content: space-between;
align-items: center;
.top_title {
font-size: 0.17rem;
font-weight: bold;
color: #424242;
}
.top_more {
font-size: 0.1rem;
font-weight: 300;
color: #9b9b9b;
}
}
.content_bottom {
width: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.content1 {
margin-bottom: 0.28rem;
}
</style>
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })
export const roadMapList = [
{
position: 'left',
isShow: false,
icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon5.png',
title: '博士',
projectList: [
{
name: '工商管理博士DBA',
href: ''
}
],
checkList: [
{
name: '暂无',
href: ''
}
]
},
{
position: 'right',
isShow: false,
icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon4.png',
title: '硕士',
projectList: [
{
name: '金融硕士MSF',
href: ''
},
{
name: '教育学硕士MED',
href: ''
},
{
name: '应用心理学MAP',
href: ''
}
],
checkList: [
{
name: '在线国际学位',
href: ''
},
{
name: '工商管理博士DBA',
href: ''
}
]
},
{
position: 'right-end',
isShow: false,
icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon3.png',
title: '在线国际学位',
projectList: [
{
name: '数字领导力方向MBA',
href: ''
},
{
name: '酒店和旅游方向MBA',
href: ''
},
{
name: '餐饮管理方向MBA',
href: ''
}
],
checkList: [
{
name: '工商管理博士DBA',
href: ''
}
]
},
{
isShow: false,
position: 'right',
icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon2.png',
title: '本科',
projectList: [
{
name: '紫荆数字经济产业学院',
href: ''
},
{
name: '国际大一(1+3)即将推出',
href: ''
}
],
checkList: [
{
name: '在线国际学位',
href: ''
},
{
name: '硕士(国际留学)',
href: ''
}
]
},
{
isShow: false,
position: 'left',
icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon1.png',
title: '职业教育',
projectList: [
{
name: '紫荆数字经济产业学院',
href: 'https://www.baidu.com/'
}
],
checkList: [
{
name: '在线国际学位',
href: ''
},
{
name: '硕士(国际留学)',
href: ''
}
]
}
]
export const homeList = [
{
position: 'top',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/lifeLearning/icon6.png',
isShow: false,
title: '职业证书',
itemList: [
{
name: '1+X',
href: ''
},
{
name: '私人财富风险管理顾问(PRP)',
href: ''
},
{
name: '高管培训-数字创新管理',
href: ''
},
{
name: '互联网营销师',
href: ''
},
{
name: '工业机器人系统操作员',
href: ''
},
{
name: '大数据技术人员',
href: ''
}
]
},
{
position: 'right-start',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/lifeLearning/icon6.png',
isShow: false,
title: '实习就业',
itemList: [
{
name: '敬请期待',
href: ''
}
]
},
{
position: 'top-start',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/lifeLearning/icon6.png',
isShow: false,
title: '企业培训',
itemList: [
{
name: '敬请期待',
href: ''
}
]
}
]
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论