提交 5c165e3d authored 作者: lihuihui's avatar lihuihui

首页pc h5 合并

上级 0c808a16
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
</div> </div>
</div> </div>
</div> </div>
<template v-if="!isMobile">
<div class="prev-button"></div> <div class="prev-button"></div>
<div class="next-button"></div> <div class="next-button"></div>
</template>
</div> </div>
</template> </template>
<script> <script>
...@@ -45,6 +47,9 @@ export default { ...@@ -45,6 +47,9 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
mounted() {}, mounted() {},
......
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="common-content-box"> <div class="common-content-box">
<m-title :data="titleParams" class="m-title"/> <card :title="$t('home.problem.title')">
<template #header-aside><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template>
<div class="content-mian"> <div class="content-mian">
<app-link :item="{ path: '/news/hot' }"> <app-link :item="{ path: '/news/hot' }">
<div class="list-box"> <div class="list-box">
<ul> <ul>
<li> <li v-for="(item, index) in problem.itemLeft" :key="index">
<div class="icon"></div> <div class="icon"></div>
<div class="text">Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同?</div> <div class="text">{{ item }}</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目是上课形式是怎么样?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目学制多久?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">能否顺利毕业拿到证书呢?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">本项目是在职还是全职?</div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div> <div class="icon"></div>
<div class="text">如何申请Kelley商学院金融学硕士?</div> <div class="text">{{ item }}</div>
</li>
<li>
<div class="icon"></div>
<div class="text">大概流程是什么?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">需要提交哪些材料?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">美国印第安纳大学Kelley商学院金融学硕士的学费是多少?</div>
</li>
<li>
<div class="icon"></div>
<div class="text">学费可以分期吗?</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -59,34 +29,52 @@ ...@@ -59,34 +29,52 @@
<div class="btn">在线留言</div> <div class="btn">在线留言</div>
</div> </div>
</div> </div>
</card>
</div>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'commonProblem', name: 'commonProblem',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data () { data () {
return { return {
titleParams: { problem: {
name: this.$t('home.problem.title'), itemLeft: [
more: { 'Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同?',
path: '/apply/problem' '本项目是上课形式是怎么样?',
} '本项目学制多久?',
'能否顺利毕业拿到证书呢?',
'本项目是在职还是全职?'
],
itemRight: [
'如何申请Kelley商学院金融学硕士?',
'大概流程是什么?',
'需要提交哪些材料?',
'美国印第安纳大学Kelley商学院金融学硕士的学费是多少?',
'学费可以分期吗?'
]
}, },
textarea: '' textarea: ''
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.common-content-box{ .is-pc{
.common-content-box{
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 77px; padding-top: 77px;
...@@ -160,5 +148,74 @@ export default { ...@@ -160,5 +148,74 @@ export default {
} }
} }
} }
}
}
.is-h5{
.common-content-box{
.content-mian{
.msg-box{
padding-top: .2rem;
box-sizing: border-box;
::v-deep{
.el-textarea__inner{
background: none;
resize:none;
}
}
input{
height: .29rem;
border: .01rem solid rgba(153, 153, 153, .2);
margin-top: .05rem;
outline: none;
width: 100%;
background: none;
padding-left: .2rem;
box-sizing: border-box;
font-size: 0.1rem;
color: #999999;
}
.btn{
height: 0.24rem;
background: #AA1941;
font-size: 0.12rem;
text-align: center;
color: #FFFFFF;
margin-top: .1rem;
line-height: .24rem;
}
}
.list-box{
ul{
li{
display: flex;
align-items: center;
padding: 0.04rem 0 0.04rem 0;
&:nth-child(even){
.text{
background: none;
}
}
.icon{
width: 0.04rem;
height: 0.04rem;
background: #AA1941;
border-radius: 50%;
}
.text{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: .12rem;
color: #666666;
padding-left: .02rem;
width: 100%;
background: rgba(153, 153, 153, .2);
margin-left: .07rem;
}
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="news-content-box"> <div class="news-content-box">
<m-title :data="titleParams" /> <card :title="$t('home.news.title')">
<template #header-aside><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template>
<div class="content-box" v-if="Object.keys(listData.first).length"> <div class="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left"> <div class="news-left">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<img :src="listData.first.web_img_uri" alt="" /> <img :src="listData.first.web_img_uri" alt="" />
<div class="mantle-box"> <div class="mantle-box">
<div class="tit">{{ listData.first.title }}</div> <div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div> <div class="con-txt">{{ listData.first.abstract }}</div>
</div> </div>
</app-link> </app-link>
...@@ -21,15 +23,17 @@ ...@@ -21,15 +23,17 @@
</li> </li>
</ul> </ul>
</div> </div>
</card>
</div>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'news', name: 'news',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
async fetch() { async fetch() {
...@@ -42,7 +46,7 @@ export default { ...@@ -42,7 +46,7 @@ export default {
return { return {
data: [], data: [],
titleParams: { titleParams: {
name: this.$t('home.news.title'), name: '最新动态',
more: { more: {
path: '/news/hot' path: '/news/hot'
} }
...@@ -53,6 +57,9 @@ export default { ...@@ -53,6 +57,9 @@ export default {
listData() { listData() {
const [first = {}, ...list] = this.data const [first = {}, ...list] = this.data
return { first, list: list || [] } return { first, list: list || [] }
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
methods: { methods: {
...@@ -65,7 +72,8 @@ export default { ...@@ -65,7 +72,8 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news-content-box { .is-pc{
.news-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 65px; padding-top: 65px;
...@@ -149,5 +157,72 @@ export default { ...@@ -149,5 +157,72 @@ export default {
} }
} }
} }
}
}
.is-h5{
.news-content-box{
.content-box{
// height: 2.18rem;
position: relative;
img{
width: 100%;
height: 100%;
display: block;
}
.news-left{
position: relative;
}
.mantle-box{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(8, 8, 8, 0.45);
padding-bottom: .14rem;
.con-txt{
font-size: 0.12rem;
font-weight: bold;
line-height: 0.17rem;
color: #FFFFFF;
padding: .14rem .32rem 0 .19rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
.news-right{
li{
margin-top: .1rem;
padding: .13rem .14rem .11rem .12rem;
background: #fff;
.time{
font-size: 0.1rem;
line-height: 100%;
color: #AB0A3D;
}
.news-r-title{
font-size: 0.14rem;
color: #333333;
margin-top: .1rem;
line-height: 0.21rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.del{
font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
} }
</style> </style>
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<template v-if="!isMobile">
<div class="alumni-content max-width"> <div class="alumni-content max-width">
<m-title :data="titleParams" class="m-title" /> <card :title="$t('home.course.title')">
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
...@@ -13,26 +15,41 @@ ...@@ -13,26 +15,41 @@
</div> </div>
</div> </div>
</div> </div>
</card>
</div>
</template>
<template v-else>
<card :title="$t('home.course.title')">
<van-swipe class="my-swipe" :loop="true" :autoplay="5000" :show-indicators="false">
<template v-for="(item, index) in listData">
<van-swipe-item :key="index">
<div class="case">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" class="case-pic" />
<p class="case-title">{{ item.title }}</p>
</app-link>
</div>
</van-swipe-item>
</template>
</van-swipe>
</card>
</template>
</div> </div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'openClass', name: 'openClass',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data() { data() {
const _this = this const _this = this
return { return {
titleParams: {
name: this.$t('home.course.title')
},
isScale: false, isScale: false,
listData: [], listData: [],
// 轮播图配置信息, 更多请参考 swiper.js 中文网,上面很详细。
swiperOption: { swiperOption: {
observer: true, observer: true,
observeParents: true, observeParents: true,
...@@ -58,13 +75,13 @@ export default { ...@@ -58,13 +75,13 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
created() {}, created() {},
mounted() { mounted() {
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
}
}, },
methods: { methods: {
swiperStop() { swiperStop() {
...@@ -77,11 +94,13 @@ export default { ...@@ -77,11 +94,13 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.max-width { .is-pc{
.max-width {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.alumni-content { .alumni-content {
padding-top: 89px; padding-top: 89px;
.title-content { .title-content {
display: flex; display: flex;
...@@ -143,8 +162,29 @@ export default { ...@@ -143,8 +162,29 @@ export default {
margin-top: 0; margin-top: 0;
} }
} }
}
} }
.scale { .is-h5{
transform: scale(0.85); .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> </style>
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="presence-content-box"> <div class="presence-content-box">
<m-title :data="titleParams" class="m-title" /> <card :title="$t('home.presence.title')" class="card-style">
<template #header-aside><nuxt-link to="/alumni/sharing">{{ $t('viewMore') }}</nuxt-link></template>
</card>
<div class="content-mian"> <div class="content-mian">
<div class="banner-box" @mouseenter="swiperStop" @mouseleave="swiperStart"> <van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <template v-for="(item, index) in listData">
<div class="swiper-wrapper"> <van-swipe-item :key="index">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" /> <img :src="item.web_img_uri" />
</app-link> </app-link>
</div> </van-swipe-item>
</div> </template>
<div class="swiper-pagination swiper-pagination-bullets"></div> </van-swipe>
</div> <div class="form-box">
</div> <div class="title-box">
<div class="enroll-box"> <div class="bt" v-html="$t('home.presence.tips1')"></div>
<div class="left-content">
<div class="tit" v-html="$t('home.presence.tips1')"></div>
<div class="tips">{{ $t('home.presence.tips2') }}</div> <div class="tips">{{ $t('home.presence.tips2') }}</div>
</div> </div>
<div class="right-content"> <div class="form">
<div class="li"> <div class="li">
<el-select v-model="form.years" :placeholder="$t('home.presence.yearsholder')"> <el-select v-model="form.years" :placeholder="$t('home.presence.yearsholder')">
<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
...@@ -43,16 +43,17 @@ ...@@ -43,16 +43,17 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import mTitle from '@/components/home/moduleTitle' import Card from '@/components/Card'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
import { postNes } from '@/api' import { postNes } from '@/api'
export default { export default {
name: 'presence', name: 'presence',
components: { components: {
mTitle, Card,
AppLink AppLink
}, },
data() { data() {
...@@ -98,7 +99,6 @@ export default { ...@@ -98,7 +99,6 @@ export default {
degree: '', degree: '',
name: '', name: '',
phone: '', phone: '',
// channel: 19960,
project_id: process.env.newProjectId project_id: process.env.newProjectId
}, },
value: '', value: '',
...@@ -109,19 +109,6 @@ export default { ...@@ -109,19 +109,6 @@ export default {
} }
}, },
listData: [], listData: [],
swiperOption: {
speed: 400,
// autoplay: true,
delay: 3000,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'vertical',
height: 500
// autoHeight: true
}
} }
}, },
async fetch() { async fetch() {
...@@ -131,6 +118,9 @@ export default { ...@@ -131,6 +118,9 @@ export default {
computed: { computed: {
swiper() { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
} }
}, },
mounted() {}, mounted() {},
...@@ -173,7 +163,12 @@ export default { ...@@ -173,7 +163,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.presence-content-box { .is-pc{
.card-style{
width: 1200px;
margin: 0 auto;
}
.presence-content-box {
padding-top: 80px; padding-top: 80px;
.m-title { .m-title {
width: 1200px; width: 1200px;
...@@ -181,16 +176,15 @@ export default { ...@@ -181,16 +176,15 @@ export default {
} }
.content-mian { .content-mian {
padding-top: 24px; padding-top: 24px;
.banner-box { .my-swipe{
height: 500px; height: 500px;
overflow: hidden; img{
img {
width: 100%; width: 100%;
height: 520px; height: 100%;
display: block; display: block;
} }
} }
.enroll-box { .form-box {
width: 1200px; width: 1200px;
height: 540px; height: 540px;
margin: 80px auto 0; margin: 80px auto 0;
...@@ -198,13 +192,13 @@ export default { ...@@ -198,13 +192,13 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left-content { .title-box {
width: 592px; width: 592px;
height: 223px; height: 223px;
background: rgba(170, 25, 65, 0.63); background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 127px; margin-top: 127px;
.tit { .bt {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
line-height: 58px; line-height: 58px;
...@@ -220,7 +214,7 @@ export default { ...@@ -220,7 +214,7 @@ export default {
text-align: center; text-align: center;
} }
} }
.right-content { .form {
width: 401px; width: 401px;
height: 382px; height: 382px;
background: #ffffff; background: #ffffff;
...@@ -249,5 +243,82 @@ export default { ...@@ -249,5 +243,82 @@ export default {
} }
} }
} }
}
}
.is-h5{
.card-width{
width: 100%;
margin: 0;
::v-deep{
.card-hd{
margin: 0.2rem 0.15rem;
}
}
}
.presence-content-box{
.my-swipe{
height: 1.58rem;
img{
width: 100%;
height: 100%;
display: block;
}
}
.form-box{
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/home-presen-bg-new1.png) center;
background-size: cover;
padding-top: .18rem;
box-sizing: border-box;
margin-top: .27rem;
padding-bottom: .05rem;
.title-box{
width: 3.75rem;
height: 1.2rem;
background: rgba(170, 25, 65, .63);
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.07);
.bt{
text-align: center;
font-size: 0.26rem;
// font-weight: bold;
line-height: 0.31rem;
color: #FFFFFF;
text-align: center;
padding-top: .16rem;
}
.tips{
font-size: 0.1rem;
line-height: 0.12rem;
color: #FFFFFF;
text-align: center;
padding-top: .1rem;
}
}
.form{
width: 2.7rem;
background: #FFFFFF;
margin: .2rem auto;
padding: .25rem .2rem;
box-sizing: border-box;
.li{
margin-bottom: .2rem;
}
::v-deep {
.el-select {
width: 100%;
height: 100%;
}
}
.btn {
font-size: .12rem;
line-height: .16rem;
color: #ffffff;
background: #aa1941;
border-radius: .02rem;
text-align: center;
cursor: pointer;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
...@@ -15,12 +15,10 @@ ...@@ -15,12 +15,10 @@
</template> </template>
<script> <script>
import Card from '@/components/Card' import Card from '@/components/Card'
import mTitle from '@/components/home/moduleTitle'
import AppLink from '@/components/Link' import AppLink from '@/components/Link'
export default { export default {
name: 'projectFeatures', name: 'projectFeatures',
components: { components: {
mTitle,
AppLink, AppLink,
Card Card
}, },
......
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="ranking-content-box"> <div class="ranking-content-box">
<div class="title"> <div class="title">
<div class="line"></div> <div class="line"></div>
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
<div class="p" v-html="$t('home.ranking.item2Txt1')"></div> <div class="p" v-html="$t('home.ranking.item2Txt1')"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="tit"><span>No.</span>1</div> <div class="tit" style="padding-top: .32rem;"><span>No.</span>1</div>
<div class="p" v-html="$t('home.ranking.item2Txt2')"></div> <div class="p" v-html="$t('home.ranking.item2Txt2')"></div>
</div> </div>
</div> </div>
...@@ -41,14 +42,21 @@ ...@@ -41,14 +42,21 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'schoolRanking' name: 'schoolRanking',
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ranking-content-box{ .is-pc{
.ranking-content-box{
margin-top: 57px; margin-top: 57px;
width: 100%; width: 100%;
height: 680px; height: 680px;
...@@ -116,5 +124,78 @@ export default { ...@@ -116,5 +124,78 @@ export default {
} }
} }
} }
}
}
.is-h5{
.ranking-content-box{
margin-top: .2rem;
width: 100%;
min-height: 2.84rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/home-ranking-bg.png) center;
background-size: cover;
padding: 0 .1rem;
box-sizing: border-box;
.title{
width: 3.41rem;
display: flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
padding: .27rem 0 .26rem;
.line{
width: 1rem;
height: .01rem;
background: #FFFFFF;
}
.name{
font-size: 0.17rem;
font-weight: bold;
line-height: 0.33rem;
color: #FFFFFF;
}
}
.content-mian{
// width: 1000px;
// margin: 0 auto;
display: flex;
justify-content: space-between;
.li{
width: 1.05rem;
&.mar-t{
transform: translateY(-.15rem);
.li-tit{
line-height: 0.15rem;
transform: translateY(.1rem);
}
}
.li-tit{
text-align: center;
font-size: 0.13rem;
line-height: 100%;
color: #fff;
}
.item{
.tit{
padding-top: .15rem;
font-size: 0.24rem;
color: #FFFFFF;
text-align: center;
margin-bottom: .03rem;
line-height: 100%;
span{
font-size: .12rem;
}
}
.p{
font-size: 0.1rem;
line-height: 0.16rem;
margin-bottom: .05rem;
color: #FFFFFF;
text-align: center;
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
...@@ -56,6 +56,6 @@ export default { ...@@ -56,6 +56,6 @@ export default {
<style> <style>
.container { .container {
width: 100%; width: 100%;
padding-bottom: 100px; padding-bottom: 50px;
} }
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论