Skip to content

P
project-online-pc
提交 5c165e3d authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

首页pc h5 合并

上级 0c808a16
显示空白字符变更
内嵌 并排
正在显示 包含 441 行增加 和 111 行删除
components/home/banner.vue
浏览文件 @ 5c165e3d
......@@ -14,8 +14,10 @@
</div>
</div>
</div>
<template v-if="!isMobile">
<div class="prev-button"></div>
<div class="next-button"></div>
</template>
</div>
</template>
<script>
......@@ -45,6 +47,9 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
mounted() {},
......
components/home/commonProblem.vue
浏览文件 @ 5c165e3d
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<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">
<app-link :item="{ path: '/news/hot' }">
<div class="list-box">
<ul>
<li>
<li v-for="(item, index) in problem.itemLeft" :key="index">
<div class="icon"></div>
<div class="text">Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？</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>
<div class="text">{{ item }}</div>
</li>
</ul>
<ul>
<li>
<li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div>
<div class="text">如何申请Kelley商学院金融学硕士？</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>
<div class="text">{{ item }}</div>
</li>
</ul>
</div>
......@@ -59,34 +29,52 @@
<div class="btn">在线留言</div>
</div>
</div>
</card>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'commonProblem',
components: {
mTitle,
Card,
AppLink
},
data () {
return {
titleParams: {
name: this.$t('home.problem.title'),
more: {
path: '/apply/problem'
}
problem: {
itemLeft: [
'Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？',
'本项目是上课形式是怎么样？',
'本项目学制多久？',
'能否顺利毕业拿到证书呢？',
'本项目是在职还是全职？'
],
itemRight: [
'如何申请Kelley商学院金融学硕士？',
'大概流程是什么？',
'需要提交哪些材料？',
'美国印第安纳大学Kelley商学院金融学硕士的学费是多少？',
'学费可以分期吗？'
]
},
textarea: ''
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.common-content-box{
.is-pc{
.common-content-box{
width: 1200px;
margin: 0 auto;
padding-top: 77px;
......@@ -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>
\ No newline at end of file
components/home/news.vue
浏览文件 @ 5c165e3d
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<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="news-left">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<img :src="listData.first.web_img_uri" alt="" />
<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>
</app-link>
......@@ -21,15 +23,17 @@
</li>
</ul>
</div>
</card>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'news',
components: {
mTitle,
Card,
AppLink
},
async fetch() {
......@@ -42,7 +46,7 @@ export default {
return {
data: [],
titleParams: {
name: this.$t('home.news.title'),
name: '最新动态',
more: {
path: '/news/hot'
}
......@@ -53,6 +57,9 @@ export default {
listData() {
const [first = {}, ...list] = this.data
return { first, list: list || [] }
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
......@@ -65,7 +72,8 @@ export default {
}
</script>
<style lang="scss" scoped>
.news-content-box {
.is-pc{
.news-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 65px;
......@@ -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>
components/home/openClass.vue
浏览文件 @ 5c165e3d
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<template v-if="!isMobile">
<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 v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
......@@ -13,26 +15,41 @@
</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>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'openClass',
components: {
mTitle,
Card,
AppLink
},
data() {
const _this = this
return {
titleParams: {
name: this.$t('home.course.title')
},
isScale: false,
listData: [],
// 轮播图配置信息, 更多请参考 swiper.js 中文网，上面很详细。
swiperOption: {
observer: true,
observeParents: true,
......@@ -58,13 +75,13 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
created() {},
mounted() {
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
}
},
methods: {
swiperStop() {
......@@ -77,11 +94,13 @@ export default {
}
</script>
<style lang="scss" scoped>
.max-width {
.is-pc{
.max-width {
width: 1200px;
margin: 0 auto;
}
.alumni-content {
}
.alumni-content {
padding-top: 89px;
.title-content {
display: flex;
......@@ -143,8 +162,29 @@ export default {
margin-top: 0;
}
}
}
}
.scale {
transform: scale(0.85);
.is-h5{
.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/presence.vue
浏览文件 @ 5c165e3d
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<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="banner-box" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<template v-for="(item, index) in listData">
<van-swipe-item :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" />
</app-link>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</div>
<div class="enroll-box">
<div class="left-content">
<div class="tit" v-html="$t('home.presence.tips1')"></div>
</van-swipe-item>
</template>
</van-swipe>
<div class="form-box">
<div class="title-box">
<div class="bt" v-html="$t('home.presence.tips1')"></div>
<div class="tips">{{ $t('home.presence.tips2') }}</div>
</div>
<div class="right-content">
<div class="form">
<div class="li">
<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">
......@@ -43,16 +43,17 @@
</div>
</div>
</div>
</div>
</template>
<script>
import mTitle from '@/components/home/moduleTitle'
import Card from '@/components/Card'
import AppLink from '@/components/Link'
import { postNes } from '@/api'
export default {
name: 'presence',
components: {
mTitle,
Card,
AppLink
},
data() {
......@@ -98,7 +99,6 @@ export default {
degree: '',
name: '',
phone: '',
// channel: 19960,
project_id: process.env.newProjectId
},
value: '',
......@@ -109,19 +109,6 @@ export default {
}
},
listData: [],
swiperOption: {
speed: 400,
// autoplay: true,
delay: 3000,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'vertical',
height: 500
// autoHeight: true
}
}
},
async fetch() {
......@@ -131,6 +118,9 @@ export default {
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
mounted() {},
......@@ -173,7 +163,12 @@ export default {
</script>
<style lang="scss" scoped>
.presence-content-box {
.is-pc{
.card-style{
width: 1200px;
margin: 0 auto;
}
.presence-content-box {
padding-top: 80px;
.m-title {
width: 1200px;
......@@ -181,16 +176,15 @@ export default {
}
.content-mian {
padding-top: 24px;
.banner-box {
.my-swipe{
height: 500px;
overflow: hidden;
img {
img{
width: 100%;
height: 520px;
height: 100%;
display: block;
}
}
.enroll-box {
.form-box {
width: 1200px;
height: 540px;
margin: 80px auto 0;
......@@ -198,13 +192,13 @@ export default {
background-size: 100% 100%;
display: flex;
justify-content: space-between;
.left-content {
.title-box {
width: 592px;
height: 223px;
background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 127px;
.tit {
.bt {
font-size: 48px;
font-weight: bold;
line-height: 58px;
......@@ -220,7 +214,7 @@ export default {
text-align: center;
}
}
.right-content {
.form {
width: 401px;
height: 382px;
background: #ffffff;
......@@ -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>
\ No newline at end of file
components/home/projectFeatures.vue
浏览文件 @ 5c165e3d
......@@ -15,12 +15,10 @@
</template>
<script>
import Card from '@/components/Card'
import mTitle from '@/components/home/moduleTitle'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
mTitle,
AppLink,
Card
},
......
components/home/schoolRanking.vue
浏览文件 @ 5c165e3d
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="ranking-content-box">
<div class="title">
<div class="line"></div>
......@@ -24,7 +25,7 @@
<div class="p" v-html="$t('home.ranking.item2Txt1')"></div>
</div>
<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>
</div>
......@@ -41,14 +42,21 @@
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'schoolRanking'
name: 'schoolRanking',
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.ranking-content-box{
.is-pc{
.ranking-content-box{
margin-top: 57px;
width: 100%;
height: 680px;
......@@ -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>
\ No newline at end of file
pages/index.vue
浏览文件 @ 5c165e3d
......@@ -56,6 +56,6 @@ export default {
<style>
.container {
width: 100%;
padding-bottom: 100px;
padding-bottom: 50px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论