Skip to content

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

首页pc h5 合并

上级 0c808a16
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 645 行增加 和 389 行删除
components/home/banner.vue
浏览文件 @ 5c165e3d
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="prev-button"></div> <template v-if="!isMobile">
<div class="next-button"></div> <div class="prev-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() {},
......
components/home/commonProblem.vue
浏览文件 @ 5c165e3d
<template> <template>
<div class="common-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<m-title :data="titleParams" class="m-title"/> <div class="common-content-box">
<div class="content-mian"> <card :title="$t('home.problem.title')">
<app-link :item="{ path: '/news/hot' }"> <template #header-aside><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template>
<div class="list-box"> <div class="content-mian">
<ul> <app-link :item="{ path: '/news/hot' }">
<li> <div class="list-box">
<div class="icon"></div> <ul>
<div class="text">Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？</div> <li v-for="(item, index) in problem.itemLeft" :key="index">
</li> <div class="icon"></div>
<li> <div class="text">{{ item }}</div>
<div class="icon"></div> </li>
<div class="text">本项目是上课形式是怎么样？</div> </ul>
</li> <ul>
<li> <li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div> <div class="icon"></div>
<div class="text">本项目学制多久？</div> <div class="text">{{ item }}</div>
</li> </li>
<li> </ul>
<div class="icon"></div> </div>
<div class="text">能否顺利毕业拿到证书呢？</div> </app-link>
</li> <div class="msg-box">
<li> <el-input
<div class="icon"></div> type="textarea"
<div class="text">本项目是在职还是全职？</div> placeholder="请输入内容"
</li> v-model="textarea">
</ul> </el-input>
<ul> <div class="btn">在线留言</div>
<li> </div>
<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>
</li>
</ul>
</div> </div>
</app-link> </card>
<div class="msg-box">
<el-input
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</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'
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{
width: 1200px; .common-content-box{
margin: 0 auto; width: 1200px;
padding-top: 77px; margin: 0 auto;
.content-mian{ padding-top: 77px;
padding-top: 50px; .content-mian{
.msg-box{ padding-top: 50px;
padding-top: 40px; .msg-box{
box-sizing: border-box; padding-top: 40px;
height: 56px; box-sizing: border-box;
display: flex; height: 56px;
align-items: center; display: flex;
justify-content: space-between; align-items: center;
::v-deep{ justify-content: space-between;
.el-textarea__inner{ ::v-deep{
background: none; .el-textarea__inner{
resize:none; background: none;
resize:none;
}
}
.btn{
width: 136px;
height: 36px;
background: #AA1941;
opacity: 1;
border-radius: 4px;
font-size: 18px;
line-height: 36px;
text-align: center;
color: #FFFFFF;
margin-left: 57px;
cursor: pointer;
} }
} }
.btn{ .list-box{
width: 136px; display: flex;
height: 36px; justify-content: space-between;
background: #AA1941; ul{
opacity: 1; &:nth-child(2){
border-radius: 4px; margin-left: 8px;
font-size: 18px; }
line-height: 36px; li{
text-align: center; display: flex;
color: #FFFFFF; align-items: center;
margin-left: 57px; width: 600px;
cursor: pointer; height: 25px;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(even){
.text{
background: none;
}
}
.icon{
width: 7px;
height: 7px;
background: #AA1941;
border-radius: 50%;
}
.text{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #666666;
padding-left: 4px;
width: 570px;
background: rgba(153, 153, 153, .2);
margin-left: 15px;
}
}
}
} }
} }
.list-box{ }
display: flex; }
justify-content: space-between; .is-h5{
ul{ .common-content-box{
&:nth-child(2){ .content-mian{
margin-left: 8px; .msg-box{
padding-top: .2rem;
box-sizing: border-box;
::v-deep{
.el-textarea__inner{
background: none;
resize:none;
}
} }
li{ input{
display: flex; height: .29rem;
align-items: center; border: .01rem solid rgba(153, 153, 153, .2);
width: 600px; margin-top: .05rem;
height: 25px; outline: none;
margin-bottom: 10px; width: 100%;
cursor: pointer; background: none;
&:nth-child(even){ 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{ .text{
background: none; 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;
} }
} }
.icon{
width: 7px;
height: 7px;
background: #AA1941;
border-radius: 50%;
}
.text{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #666666;
padding-left: 4px;
width: 570px;
background: rgba(153, 153, 153, .2);
margin-left: 15px;
}
} }
} }
} }
......
components/home/news.vue
浏览文件 @ 5c165e3d
<template> <template>
<div class="news-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<m-title :data="titleParams" /> <div class="news-content-box">
<div class="content-box" v-if="Object.keys(listData.first).length"> <card :title="$t('home.news.title')">
<div class="news-left"> <template #header-aside><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template>
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <div class="content-box" v-if="Object.keys(listData.first).length">
<img :src="listData.first.web_img_uri" alt="" /> <div class="news-left">
<div class="mantle-box"> <app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<div class="tit">{{ listData.first.title }}</div> <img :src="listData.first.web_img_uri" alt="" />
<div class="con-txt">{{ listData.first.abstract }}</div> <div class="mantle-box">
<div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div>
</div>
</app-link>
</div> </div>
</app-link> <ul class="news-right">
</div> <li v-for="(item, index) in listData.list" :key="index">
<ul class="news-right"> <app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<li v-for="(item, index) in listData.list" :key="index"> <div class="time">{{ formatDate(item.start_time) }}</div>
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <div class="news-r-title">{{ item.title }}</div>
<div class="time">{{ formatDate(item.start_time) }}</div> <div class="del">{{ item.abstract }}</div>
<div class="news-r-title">{{ item.title }}</div> </app-link>
<div class="del">{{ item.abstract }}</div> </li>
</app-link> </ul>
</li> </div>
</ul> </card>
</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'
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,86 +72,154 @@ export default { ...@@ -65,86 +72,154 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news-content-box { .is-pc{
width: 1200px; .news-content-box {
margin: 0 auto; width: 1200px;
padding-top: 65px; margin: 0 auto;
.content-box { padding-top: 65px;
display: flex; .content-box {
justify-content: space-between; display: flex;
padding-top: 26px; justify-content: space-between;
.news-left { padding-top: 26px;
width: 780px; .news-left {
height: 500px; width: 780px;
height: 500px;
position: relative;
img {
width: 100%;
height: 100%;
display: block;
}
.mantle-box {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
padding: 30px 37px;
.tit {
font-size: 24px;
font-weight: bold;
line-height: 100%;
color: #ffffff;
width: 696px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.con-txt {
width: 461px;
font-size: 14px;
line-height: 24px;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 10px;
}
}
}
.news-right {
li {
width: 366px;
border-bottom: 1px solid #e3e3e3;
padding-bottom: 19px;
margin-bottom: 30px;
cursor: pointer;
.time {
font-size: 16px;
font-weight: normal;
line-height: 100%;
color: #8e1e22;
}
.news-r-title {
font-size: 22px;
font-weight: bold;
line-height: 30px;
color: #333333;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.del {
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 100%;
color: #999999;
margin-top: 15px;
}
}
}
}
}
}
.is-h5{
.news-content-box{
.content-box{
// height: 2.18rem;
position: relative; position: relative;
img { img{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
.mantle-box { .news-left{
position: relative;
}
.mantle-box{
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(0, 0, 0, 0.2); background: rgba(8, 8, 8, 0.45);
padding: 30px 37px; padding-bottom: .14rem;
.tit { .con-txt{
font-size: 24px; font-size: 0.12rem;
font-weight: bold; font-weight: bold;
line-height: 100%; line-height: 0.17rem;
color: #ffffff; color: #FFFFFF;
width: 696px; padding: .14rem .32rem 0 .19rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box;
white-space: nowrap; -webkit-box-orient: vertical;
} -webkit-line-clamp: 2;
.con-txt {
width: 461px;
font-size: 14px;
line-height: 24px;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 10px;
} }
} }
} }
.news-right { .news-right{
li { li{
width: 366px; margin-top: .1rem;
border-bottom: 1px solid #e3e3e3; padding: .13rem .14rem .11rem .12rem;
padding-bottom: 19px; background: #fff;
margin-bottom: 30px; .time{
cursor: pointer; font-size: 0.1rem;
.time {
font-size: 16px;
font-weight: normal;
line-height: 100%; line-height: 100%;
color: #8e1e22; color: #AB0A3D;
} }
.news-r-title { .news-r-title{
font-size: 22px; font-size: 0.14rem;
font-weight: bold;
line-height: 30px;
color: #333333; color: #333333;
margin-top: 15px; margin-top: .1rem;
display: -webkit-box; line-height: 0.21rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.del { .del{
width: 350px; font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box;
white-space: nowrap; -webkit-box-orient: vertical;
font-size: 14px; -webkit-line-clamp: 2;
line-height: 100%;
color: #999999;
margin-top: 15px;
} }
} }
} }
......
components/home/openClass.vue
浏览文件 @ 5c165e3d
<template> <template>
<div class="alumni-content max-width"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<m-title :data="titleParams" class="m-title" /> <template v-if="!isMobile">
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="alumni-content max-width">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <card :title="$t('home.course.title')">
<div class="swiper-wrapper"> <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <div class="swiper-wrapper">
<img :src="item.web_img_uri" /> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<div class="text">{{ item.title }}</div> <app-link :item="{ news: { data: item, path: '/news/hot' } }">
</app-link> <img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
</div>
</div>
</div>
</div> </div>
</div> </card>
</div> </div>
</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,74 +94,97 @@ export default { ...@@ -77,74 +94,97 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.max-width { .is-pc{
width: 1200px;
margin: 0 auto; .max-width {
} width: 1200px;
.alumni-content { margin: 0 auto;
padding-top: 89px; }
.title-content { .alumni-content {
display: flex; padding-top: 89px;
.left-title { .title-content {
display: flex; display: flex;
.line { .left-title {
width: 6px; display: flex;
height: 34px; .line {
background: #aa1941; width: 6px;
} height: 34px;
.text { background: #aa1941;
font-size: 34px; }
font-weight: bold; .text {
line-height: 34px; font-size: 34px;
color: #424242; font-weight: bold;
margin-left: 9px; line-height: 34px;
color: #424242;
margin-left: 9px;
}
} }
} }
} .small-tit {
.small-tit { font-size: 24px;
font-size: 24px; font-weight: bold;
font-weight: bold; line-height: 34px;
line-height: 34px; color: #424242;
color: #424242; margin-top: 12px;
margin-top: 12px; }
} .swiper-content {
.swiper-content { padding-top: 37px;
padding-top: 37px; // width: 100%;
// width: 100%; .swiper-slide {
.swiper-slide { position: relative;
position: relative; width: 360px;
width: 360px; height: 230px;
height: 230px; margin-top: 10px;
margin-top: 10px; .text {
.text { position: absolute;
position: absolute; bottom: 0;
bottom: 0; left: 0;
left: 0; width: 100%;
width: 100%; height: 40px;
height: 40px; line-height: 40px;
line-height: 40px; background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.5); padding: 0 20px;
padding: 0 20px; box-sizing: border-box;
box-sizing: border-box; font-size: 20px;
font-size: 20px; color: #fefefe;
color: #fefefe; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap; }
img {
width: 100%;
height: 100%;
}
} }
img { .swiper-slide-active {
width: 100%; width: 438px;
height: 100%; height: 246px;
margin-top: 0;
} }
} }
.swiper-slide-active {
width: 438px;
height: 246px;
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>
components/home/projectFeatures.vue
浏览文件 @ 5c165e3d
...@@ -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
}, },
......
components/home/schoolRanking.vue
浏览文件 @ 5c165e3d
<template> <template>
<div class="ranking-content-box"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="title"> <div class="ranking-content-box">
<div class="line"></div> <div class="title">
<div class="name">{{ $t('home.ranking.title') }}</div> <div class="line"></div>
<div class="line"></div> <div class="name">{{ $t('home.ranking.title') }}</div>
</div> <div class="line"></div>
<div class="content-mian">
<div class="li">
<div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div>
<div class="item">
<div class="tit"><span>No.</span>11</div>
<div class="p" v-html="$t('home.ranking.item1Txt1')"></div>
</div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item1Txt2')"></div>
</div>
</div> </div>
<div class="li"> <div class="content-mian">
<div class="li-tit" v-html="$t('home.ranking.item2Tit')"></div> <div class="li">
<div class="item"> <div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div>
<div class="tit"><span>No.</span>21</div> <div class="item">
<div class="p" v-html="$t('home.ranking.item2Txt1')"></div> <div class="tit"><span>No.</span>11</div>
<div class="p" v-html="$t('home.ranking.item1Txt1')"></div>
</div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item1Txt2')"></div>
</div>
</div> </div>
<div class="item"> <div class="li">
<div class="tit"><span>No.</span>1</div> <div class="li-tit" v-html="$t('home.ranking.item2Tit')"></div>
<div class="p" v-html="$t('home.ranking.item2Txt2')"></div> <div class="item">
</div> <div class="tit"><span>No.</span>21</div>
</div> <div class="p" v-html="$t('home.ranking.item2Txt1')"></div>
<div class="li mar-t"> </div>
<div class="li-tit" v-html="$t('home.ranking.item3Tit')"></div> <div class="item">
<div class="item"> <div class="tit" style="padding-top: .32rem;"><span>No.</span>1</div>
<div class="tit"><span>No.</span>11</div> <div class="p" v-html="$t('home.ranking.item2Txt2')"></div>
<div class="p" v-html="$t('home.ranking.item3Txt1')"></div> </div>
</div> </div>
<div class="item"> <div class="li mar-t">
<div class="tit"><span>No.</span>21</div> <div class="li-tit" v-html="$t('home.ranking.item3Tit')"></div>
<div class="p" v-html="$t('home.ranking.item3Txt2')"></div> <div class="item">
<div class="tit"><span>No.</span>11</div>
<div class="p" v-html="$t('home.ranking.item3Txt1')"></div>
</div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item3Txt2')"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,74 +46,153 @@ ...@@ -44,74 +46,153 @@
</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{
margin-top: 57px; .ranking-content-box{
width: 100%; margin-top: 57px;
height: 680px; width: 100%;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-ranking-bg.png) center; height: 680px;
background-size: cover; background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-ranking-bg.png) center;
.title{ background-size: cover;
width: 996px; .title{
display: flex; width: 996px;
margin: 0 auto; display: flex;
justify-content: space-between; margin: 0 auto;
align-items: center; justify-content: space-between;
padding: 108px 0 100px; align-items: center;
.line{ padding: 108px 0 100px;
width: 369px; .line{
height: 1px; width: 369px;
background: #FFFFFF; height: 1px;
} background: #FFFFFF;
.name{
font-size: 36px;
font-weight: bold;
line-height: 100%;
color: #FFFFFF;
}
}
.content-mian{
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
.li{
width: 250px;
&.mar-t{
transform: translateY(-35px);
.li-tit{
line-height: 34px;
transform: translateY(20px);
}
} }
.li-tit{ .name{
text-align: center; font-size: 36px;
font-size: 30px; font-weight: bold;
line-height: 100%; line-height: 100%;
color: #fff; color: #FFFFFF;
} }
.item{ }
.tit{ .content-mian{
padding-top: 46px; width: 1000px;
font-size: 48px; margin: 0 auto;
line-height: 100%; display: flex;
color: #FFFFFF; justify-content: space-between;
.li{
width: 250px;
&.mar-t{
transform: translateY(-35px);
.li-tit{
line-height: 34px;
transform: translateY(20px);
}
}
.li-tit{
text-align: center; text-align: center;
margin-bottom: 15px; font-size: 30px;
line-height: 100%; line-height: 100%;
span{ color: #fff;
font-size: 24px; }
.item{
.tit{
padding-top: 46px;
font-size: 48px;
line-height: 100%;
color: #FFFFFF;
text-align: center;
margin-bottom: 15px;
line-height: 100%;
span{
font-size: 24px;
}
}
.p{
text-align: center;
font-size: 16px;
line-height: 30px;
color: #FFFFFF;
// margin-bottom: 11px;
}
}
}
}
}
}
.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);
} }
} }
.p{ .li-tit{
text-align: center; text-align: center;
font-size: 16px; font-size: 0.13rem;
line-height: 30px; line-height: 100%;
color: #FFFFFF; color: #fff;
// margin-bottom: 11px; }
.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;
}
} }
} }
} }
......
pages/index.vue
浏览文件 @ 5c165e3d
...@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论