Skip to content

P
project-www-h5
提交 3d8847fd authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

开发页面

上级 20135616
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 503 行增加 和 4 行删除
components/Menu.vue
浏览文件 @ 3d8847fd
......@@ -64,10 +64,10 @@ export default {
{ name: '青少年儿童心理以及行为指导证书', onClick: this.showTips }
]
},
{ name: '专业共建', onClick: this.showTips },
{ name: '校企合作', onClick: this.showTips },
{ name: '产业学院', onClick: this.showTips },
{ name: '双高建设', onClick: this.showTips },
{ name: '专业共建', path: '/services/major' },
{ name: '产业学院', path: '/services/college' },
{ name: '新职业', path: '/services/job' },
{ name: '高质量实习就业服务', path: '/services/employment' },
{
name: '在线教育解决方案',
children: [
......
pages/services/college.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<tabs :list="navList" @tabChange="tabChange"></tabs>
<template v-if="showModule === 0">
<div class="module-1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-1.png">
<div class="width-con">
<img style="margin:.26rem 0 .07rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-3.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-4.png">
<img style="width: 1.82rem;margin:.27rem 0 .15rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-text.png" alt="">
<div class="layout-con">
<div class="lay-con__left">
<div class="lay-l__top">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i1.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i1-t1.png">
</div>
<div class="lay-l__bottom">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i2.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i2-t2.png">
</div>
</div>
<div class="lay-con__right">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i3.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i3-t3.png">
</div>
</div>
<img style="margin:.15rem 0 .17rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-5.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-6.png">
<img style="margin:.3rem 0 .4rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-7.png">
</div>
</div>
</template>
<template v-if="showModule === 1">
<div class="module-2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-1.png">
<div class="width-con">
<img style="margin: .31rem 0 .24rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-3.png">
<div class="title">目标岗位群</div>
<college-item :data="m2Data"/>
</div>
</div>
</template>
<template v-if="showModule === 2">
<div class="module-3">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-1.png">
<div class="width-con">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-2.png">
<img style="margin-top:.1rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-3.png">
<div class="title">目标岗位群</div>
<college-item :data="m3Data1"/>
<college-item :data="m3Data2" style="margin:.1rem 0 .2rem"/>
</div>
</div>
</template>
</div>
</template>
<script>
import collegeItem from './components/collegeItem'
import tabs from './components/tab'
export default {
components: { tabs, collegeItem },
data() {
return {
navList: ['现代产业学院', '数字金融', '国际品牌管理与数字运营'],
showModule: 0,
m2Data: {
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l1.png',
text: '数字化营销'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l2.png',
text: '数字化运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l3.png',
text: '智能投顾'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l4.png',
text: '风险管理'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l5.png',
text: '金融数据分析'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l6.png',
text: '财务会计'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l7.png',
text: '金融建模'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l8.png',
text: '投资分析'
},
]
},
m3Data1: {
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-i1n.png'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i2.png',
text: '文案策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i3.png',
text: '营销策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i4.png',
text: '渠道管理'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i5.png',
text: '广告策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i6.png',
text: '媒体公共'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i7.png',
text: '品牌管理运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i8.png',
text: '产品设计'
}
]
},
m3Data2: {
height: '.98rem',
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-i2n.png'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i8.png',
text: '互联网运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i9.png',
text: '网站运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i10.png',
text: '电商运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i11.png',
text: '新媒体运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i12.png',
text: '活动策划运营'
}
]
}
}
},
methods: {
tabChange(index) {
this.showModule = index
}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
.module-1{
.layout-con{
display: flex;
.lay-con__left{
width: 1.25rem;
margin-right: .03rem;
.lay-l__top{
height: .73rem;
position: relative;
margin-bottom: .03rem;
.img-text{
width: .85rem;
position: absolute;
bottom: .08rem;
left: .07rem;
}
}
.lay-l__bottom{
height: .73rem;
position: relative;
.img-text{
width: .6rem;
position: absolute;
bottom: .04rem;
left: .07rem;
}
}
}
.lay-con__right{
position: relative;
width: 2.15rem;
height: 1.48rem;
.img-text{
width: 1rem;
position: absolute;
bottom: .08rem;
left: .11rem;
}
}
}
}
.module-2{
.title{
margin: .32rem 0 .06rem;
font-size: .14rem;
line-height: 100%;
color: #424242;
}
}
.module-3{
.title{
font-size: .14rem;
color: #424242;
line-height: 100%;
margin: .3rem 0 .1rem;
}
}
</style>
\ No newline at end of file
pages/services/components/collegeItem.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<ul>
<li v-for="(item, index) in data.list" :key="index" :style="getStyle(data.height)">
<img :src="item.img" alt="">
<div class="pop" v-if="item.text">
<div class="text">{{ item.text }}</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
methods: {
getStyle(s) {
return s ? `height:${s}` : 'height:1.31rem'
}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
height: 100%;
display: block;
}
ul{
display: flex;
flex-wrap: wrap;
li{
width: 1.68rem;
height: 1.31rem;
position: relative;
margin-bottom: .04rem;
margin-right: .04rem;
&:nth-child(even){
margin-right: 0;
}
.pop{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.29);
.text{
position: absolute;
bottom: .15rem;
left: .1rem;
font-size: .14rem;
line-height: 100%;
color: #FFFFFF;
}
}
}
}
</style>
pages/services/components/majorTab.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<ul class="tab-btn__box">
<li @click="tabChange(index)" :class="index === tabIndex && 'active'" v-for="(item, index) in data.tab" :key="index">
<div class="num">0{{ index + 1 }}</div>
<div class="text">{{ item }}</div>
</li>
</ul>
<ul class="tab-content__box">
<li :class="index === tabIndex && 'active'" v-for="(item, index) in data.content" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
data() {
return {
tabIndex: 0
}
},
methods: {
tabChange(index) {
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.tab-btn__box{
display: flex;
justify-content: space-between;
li{
width: 1.1rem;
height: .75rem;
background: #FBFBFB;
position: relative;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
&.active{
background: #fff;
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: .04rem;
background: #AA1941;
}
}
.num{
font-size: .18rem;
font-weight: normal;
line-height: 100%;
color: #AA1941;
text-align: center;
padding-top: .17rem;
}
.text{
font-size: .1rem;
line-height: 100%;
color: #424242;
margin-top: .1rem;
text-align: center;
}
}
}
.tab-content__box{
width: 100%;
li{
font-size: .12rem;
line-height: .24rem;
color: #333333;
padding: .32rem .21rem;
background: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
margin-top: .15rem;
display: none;
&.active{
display: block;
}
}
}
</style>
pages/services/components/tab.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<nav>
<ul class="app-tab-nav">
<li
v-for="(item, index) in list"
:key="index"
:class="{ 'is-active': index === activeIndex }"
@click="tabChange(index)"
>
<div>{{ item }}</div>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: { list: { type: Array, default: () => [] }, active: { type: String } },
data() {
return {
activeIndex: 0
}
},
mounted() {
console.log(this.list)
},
methods: {
tabChange(index) {
this.activeIndex = index
this.$emit('tabChange', index)
}
}
}
</script>
<style lang="scss">
.app-tab-nav {
display: flex;
overflow: scroll;
&::-webkit-scrollbar{
display: none;
}
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
div{
white-space: nowrap;
cursor: pointer;
}
}
}
</style>
pages/services/employment.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<img style="margin-top: .14rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-1.png">
<div class="width-con">
<img style="margin:.3rem 0 .2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-3.png">
<img style="margin:0.3rem 0" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-4.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
</style>
pages/services/job.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<img style="margin-top: .14rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-1.png">
<div class="width-con">
<img style="margin:.25rem 0 .08rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-2.png">
<img style="margin:0 0 .2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-3.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
</style>
pages/services/major.vue 0 → 100644
浏览文件 @ 3d8847fd
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论