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 @@
</div>
</div>
</div>
<div class="prev-button"></div>
<div class="next-button"></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="common-content-box">
<m-title :data="titleParams" class="m-title"/>
<div class="content-mian">
<app-link :item="{ path: '/news/hot' }">
<div class="list-box">
<ul>
<li>
<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>
</li>
</ul>
<ul>
<li>
<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 :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="common-content-box">
<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 v-for="(item, index) in problem.itemLeft" :key="index">
<div class="icon"></div>
<div class="text">{{ item }}</div>
</li>
</ul>
<ul>
<li v-for="(item, index) in problem.itemRight" :key="index">
<div class="icon"></div>
<div class="text">{{ item }}</div>
</li>
</ul>
</div>
</app-link>
<div class="msg-box">
<el-input
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</div>
</div>
</div>
</app-link>
<div class="msg-box">
<el-input
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</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{
width: 1200px;
margin: 0 auto;
padding-top: 77px;
.content-mian{
padding-top: 50px;
.msg-box{
padding-top: 40px;
box-sizing: border-box;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
::v-deep{
.el-textarea__inner{
background: none;
resize:none;
.is-pc{
.common-content-box{
width: 1200px;
margin: 0 auto;
padding-top: 77px;
.content-mian{
padding-top: 50px;
.msg-box{
padding-top: 40px;
box-sizing: border-box;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
::v-deep{
.el-textarea__inner{
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{
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;
.list-box{
display: flex;
justify-content: space-between;
ul{
&:nth-child(2){
margin-left: 8px;
}
li{
display: flex;
align-items: center;
width: 600px;
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;
ul{
&:nth-child(2){
margin-left: 8px;
}
}
.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;
}
}
li{
display: flex;
align-items: center;
width: 600px;
height: 25px;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(even){
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{
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>
<div class="news-content-box">
<m-title :data="titleParams" />
<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="con-txt">{{ listData.first.abstract }}</div>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="news-content-box">
<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" v-if="!isMobile">{{ listData.first.title }}</div>
<div class="con-txt">{{ listData.first.abstract }}</div>
</div>
</app-link>
</div>
</app-link>
</div>
<ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="news-r-title">{{ item.title }}</div>
<div class="del">{{ item.abstract }}</div>
</app-link>
</li>
</ul>
<ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="news-r-title">{{ item.title }}</div>
<div class="del">{{ item.abstract }}</div>
</app-link>
</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,86 +72,154 @@ export default {
}
</script>
<style lang="scss" scoped>
.news-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 65px;
.content-box {
display: flex;
justify-content: space-between;
padding-top: 26px;
.news-left {
width: 780px;
height: 500px;
.is-pc{
.news-content-box {
width: 1200px;
margin: 0 auto;
padding-top: 65px;
.content-box {
display: flex;
justify-content: space-between;
padding-top: 26px;
.news-left {
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;
img {
img{
width: 100%;
height: 100%;
display: block;
}
.mantle-box {
.news-left{
position: relative;
}
.mantle-box{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
padding: 30px 37px;
.tit {
font-size: 24px;
background: rgba(8, 8, 8, 0.45);
padding-bottom: .14rem;
.con-txt{
font-size: 0.12rem;
font-weight: bold;
line-height: 100%;
color: #ffffff;
width: 696px;
line-height: 0.17rem;
color: #FFFFFF;
padding: .14rem .32rem 0 .19rem;
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;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
.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;
.news-right{
li{
margin-top: .1rem;
padding: .13rem .14rem .11rem .12rem;
background: #fff;
.time{
font-size: 0.1rem;
line-height: 100%;
color: #8e1e22;
color: #AB0A3D;
}
.news-r-title {
font-size: 22px;
font-weight: bold;
line-height: 30px;
.news-r-title{
font-size: 0.14rem;
color: #333333;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: .1rem;
line-height: 0.21rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.del {
width: 350px;
.del{
font-size: 0.11rem;
line-height: 0.2rem;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 100%;
color: #999999;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
......
components/home/openClass.vue
浏览文件 @ 5c165e3d
<template>
<div class="alumni-content max-width">
<m-title :data="titleParams" class="m-title" />
<div class="swiper-content" @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">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<template v-if="!isMobile">
<div class="alumni-content max-width">
<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">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }">
<img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
</div>
</div>
</div>
</div>
</div>
</card>
</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>
</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,74 +94,97 @@ export default {
}
</script>
<style lang="scss" scoped>
.max-width {
width: 1200px;
margin: 0 auto;
}
.alumni-content {
padding-top: 89px;
.title-content {
display: flex;
.left-title {
.is-pc{
.max-width {
width: 1200px;
margin: 0 auto;
}
.alumni-content {
padding-top: 89px;
.title-content {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
.left-title {
display: flex;
.line {
width: 6px;
height: 34px;
background: #aa1941;
}
.text {
font-size: 34px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-left: 9px;
}
}
}
}
.small-tit {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-top: 12px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 360px;
height: 230px;
margin-top: 10px;
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
color: #fefefe;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.small-tit {
font-size: 24px;
font-weight: bold;
line-height: 34px;
color: #424242;
margin-top: 12px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 360px;
height: 230px;
margin-top: 10px;
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
color: #fefefe;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
.swiper-slide-active {
width: 438px;
height: 246px;
margin-top: 0;
}
}
.swiper-slide-active {
width: 438px;
height: 246px;
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/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="ranking-content-box">
<div class="title">
<div class="line"></div>
<div class="name">{{ $t('home.ranking.title') }}</div>
<div class="line"></div>
</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 :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="ranking-content-box">
<div class="title">
<div class="line"></div>
<div class="name">{{ $t('home.ranking.title') }}</div>
<div class="line"></div>
</div>
<div class="li">
<div class="li-tit" v-html="$t('home.ranking.item2Tit')"></div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item2Txt1')"></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 class="item">
<div class="tit"><span>No.</span>1</div>
<div class="p" v-html="$t('home.ranking.item2Txt2')"></div>
</div>
</div>
<div class="li mar-t">
<div class="li-tit" v-html="$t('home.ranking.item3Tit')"></div>
<div class="item">
<div class="tit"><span>No.</span>11</div>
<div class="p" v-html="$t('home.ranking.item3Txt1')"></div>
<div class="li">
<div class="li-tit" v-html="$t('home.ranking.item2Tit')"></div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item2Txt1')"></div>
</div>
<div class="item">
<div class="tit" style="padding-top: .32rem;"><span>No.</span>1</div>
<div class="p" v-html="$t('home.ranking.item2Txt2')"></div>
</div>
</div>
<div class="item">
<div class="tit"><span>No.</span>21</div>
<div class="p" v-html="$t('home.ranking.item3Txt2')"></div>
<div class="li mar-t">
<div class="li-tit" v-html="$t('home.ranking.item3Tit')"></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>
......@@ -44,74 +46,153 @@
</template>
<script>
export default {
name: 'schoolRanking'
name: 'schoolRanking',
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.ranking-content-box{
margin-top: 57px;
width: 100%;
height: 680px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-ranking-bg.png) center;
background-size: cover;
.title{
width: 996px;
display: flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
padding: 108px 0 100px;
.line{
width: 369px;
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);
}
.is-pc{
.ranking-content-box{
margin-top: 57px;
width: 100%;
height: 680px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-ranking-bg.png) center;
background-size: cover;
.title{
width: 996px;
display: flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
padding: 108px 0 100px;
.line{
width: 369px;
height: 1px;
background: #FFFFFF;
}
.li-tit{
text-align: center;
font-size: 30px;
.name{
font-size: 36px;
font-weight: bold;
line-height: 100%;
color: #fff;
color: #FFFFFF;
}
.item{
.tit{
padding-top: 46px;
font-size: 48px;
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{
text-align: center;
margin-bottom: 15px;
font-size: 30px;
line-height: 100%;
span{
font-size: 24px;
color: #fff;
}
.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;
font-size: 16px;
line-height: 30px;
color: #FFFFFF;
// margin-bottom: 11px;
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;
}
}
}
}
......
pages/index.vue
浏览文件 @ 5c165e3d
......@@ -56,6 +56,6 @@ export default {
<style>
.container {
width: 100%;
padding-bottom: 100px;
padding-bottom: 50px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论