Skip to content

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

update

上级 b00876d6
显示空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 15 行删除
components/Card.vue 0 → 100644
浏览文件 @ 0c808a16
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="card">
<div class="card-hd">
<div class="card-hd__title">{{ title }}</div>
<div class="card-hd__aside"><slot name="header-aside"></slot></div>
</div>
<div class="card-bd"><slot /></div>
</div>
</div>
</template>
<script>
export default {
props: { title: String },
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss">
.is-pc{
.card {
// margin: 0.2rem 0.15rem;
}
.card-hd {
display: flex;
align-items: center;
justify-content: space-between;
// margin-bottom: 0.15rem;
}
.card-hd__title {
flex: 1;
border-left: 7px solid #aa1941;
padding-left: 20px;
font-size: 32px;
font-weight: bold;
line-height: 1;
}
.card-hd__aside {
font-size: 16px;
color: #9b9b9b;
cursor: pointer;
}
.card-bd {
}
}
.is-h5{
.card {
margin: 0.2rem 0.15rem;
}
.card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.card-hd__title {
flex: 1;
border-left: 0.03rem solid #aa1941;
padding-left: 0.05rem;
font-size: 0.17rem;
font-weight: bold;
line-height: 1;
}
.card-hd__aside {
font-size: 0.1rem;
color: #9b9b9b;
}
.card-bd {
}
}
</style>
components/home/projectFeatures.vue
浏览文件 @ 0c808a16
<template>
<div class="service-content max-width-center">
<m-title :data="titleParams"/>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<card :title="$t('home.project.title')">
<ul class="nav-content">
<li v-for="(item, index) in data" :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="icon">
<img :src="item.iconActive" alt="" class="icon-active">
<li v-for="(item, index) in data" :key="index">
<img :src="item.icon" class="icon">
<img v-if="!isMobile" :src="item.iconActive" class="icon-active">
<div class="text" v-html="item.text"></div>
</li>
</ul>
</card>
</div>
</div>
</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
AppLink,
Card
},
data() {
return {
......@@ -28,27 +33,27 @@ export default {
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon1.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s1.png',
text: this.$t('home.project.itemT1'), path: '', pathType: 0
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT1')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon2.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s2.png',
text: this.$t('home.project.itemT2'), path: '', pathType: 0
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT2')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon3.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s3.png',
text: this.$t('home.project.itemT3'), path: '', pathType: 0
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT3')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon4.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s4.png',
text: this.$t('home.project.itemT4'), path: '', pathType: 0
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT4') : this.$t('home.project.pc.itemT4')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon5.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s5.png',
text: this.$t('home.project.itemT5'), path: '', pathType: 0
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT5') : this.$t('home.project.pc.itemT5')
}
]
}
......@@ -61,12 +66,21 @@ export default {
}
window.open(path)
}
},
mounted() {
console.log(this.isMobile)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.service-content{
.is-pc{
.service-content{
padding-top: 68px;
.nav-content{
display: flex;
......@@ -113,9 +127,39 @@ export default {
}
}
}
}
.max-width-center{
}
.max-width-center{
width: 1212px;
margin: 0 auto;
}
}
.is-h5{
.service-content{
ul{
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
li{
min-width: .78rem;
background: #FFFFFF;
margin-right: .10rem;
padding-top: .11rem;
img{
width: .4rem;
height: .4rem;
display: block;
margin: 0 auto;
}
.text{
font-size: .1rem;
line-height: .16rem;
color: #666666;
padding-top: .05rem;
text-align: center;
padding-bottom: .1rem;
}
}
}
}
</style>
langs/en-US.js
浏览文件 @ 0c808a16
......@@ -37,11 +37,20 @@ export default {
home: {
project: {
title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '科学成熟的<br />在线<br />教育模式',
itemT4: '无需联考<br />快速入门<br />的学习体验',
itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌',
itemT3: '科学成熟的<br />在线教育模式',
itemT4: '无需联考、快速入门<br />的学习体验',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
},
ranking: {
title: '学校排名',
......
langs/zh-CN.js
浏览文件 @ 0c808a16
......@@ -37,11 +37,20 @@ export default {
home: {
project: {
title: '项目特色',
h5: {
itemT1: '全方位的<br />金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线<br />教育品牌',
itemT3: '科学成熟的<br />在线<br />教育模式',
itemT4: '无需联考<br />快速入门<br />的学习体验',
itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
},
pc: {
itemT1: '全方位的金融职业<br />教育课程体系',
itemT2: '专业金融<br />在线教育品牌',
itemT3: '科学成熟的<br />在线教育模式',
itemT4: '无需联考、快速入门<br />的学习体验',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程',
itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
}
},
ranking: {
title: '学校排名',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论