Skip to content

P
project-online-old
提交 9389ff8f authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

测试百度快照

上级 58ed3c98
显示空白字符变更
内嵌 并排
正在显示 包含 522 行增加 和 0 行删除
src/pages/homepage/index.vue
浏览文件 @ 9389ff8f
......@@ -38,6 +38,11 @@
>
<div class="cap">
<div class="cap-image" ref="cap">
<img
:src="require('@/assets/images/baidu-snapshot.png')"
alt
class="baidu-snapshot"
/>
<img
:src="require('@/assets/images/mz.png')"
alt
......@@ -384,6 +389,14 @@ export default {
</script>
<style lang="scss" scoped>
.baidu-snapshot{
width: 100px !important;
height: auto !important;
position: fixed;
top: 0;
left: 0;
opacity: 0.000001;
}
.homepage-banner {
width: 100%;
position: relative;
......
src/pages/project/index.vue 0 → 100644
浏览文件 @ 9389ff8f
<template>
<div>
<div class="modul1">
<ul class="tap-btn">
<li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">项目背景</li>
<li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">项目特色</li>
</ul>
</div>
<div class="tap-item-box">
<div class="t-item2 con970" v-show="showIndex === 1">
<news :data="newsData"></news>
</div>
<div class="t-item3" v-show="showIndex === 2">
<div class="new-style">
<div class="top-cont">
<div class="left">
<div class="txt">
项目设计以学术导师+实践导师双导师制，以国际前沿+金融实操为内容设计导向，融多元培养手段为一体，旨在立足全球视野，扎根本土实践，从产业到金融，从学习到就业一站式、无缝衔接人才培养计划。
</div>
</div>
<ul>
<template v-for="(item, index) in projectFeatures">
<li :key="index">
<div class="dis-b">
<div class="d"></div>
<div class="txt">{{ item.title }}</div>
</div>
<div class="dis-n">
<div class="title">{{ item.title }}</div>
<div class="txt" v-html="item.text"></div>
</div>
</li>
</template>
</ul>
</div>
</div>
<div class="content">
<div class="title">面向人群</div>
<div class="txt-box">
<div class="pp1">1.全日制本硕就读于中国985大学</div>
<div class="pp1">2.在读全日制硕士研究生研一、研二的学生</div>
<div class="pp1">3.本硕就读专业背景为非金融/财经类专业</div>
</div>
</div>
<div class="zs-cont">
<img class="new-img" src="https://zws-imgs-pub.ezijing.com/static/public/5a12d8046451cb9ad751aa6af19b18c2.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
components: {
news
},
data() {
return {
projectFeatures: [
{
title: '项目学制',
text: '学制18个月'
},
{
title: '授课方式',
text: '线上：紫荆/KELLEY商学院学习平台 线下：北京、上海、深圳'
},
{
title: '课程语言',
text: '中方课程为五道口教授和业界金融专家中文授课<br/>美方课程为美国印第安纳大学Kelley商学院教授英文授课'
},
{
title: '招生人数',
text: '2021年计划招收中国大陆地区考生200人'
},
{
title: '主要上课地点',
text: '线上：紫荆/KELLEY商学院学习平台<br/>线下：北京、上海、深圳'
},
{
title: '开学日期',
text: '每年6月、11月'
},
{
title: '获得证书',
text: '清控紫荆教育结业证书<br/>Kelley商学院学位证书'
}
],
newsData: [],
showIndex: 1
}
},
mounted() {
this.getData()
},
methods: {
tap(n) {
this.showIndex = n
},
getData() {
const requestType = [
{
name: '紫荆教育',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
},
{
name: 'Kelley商学院',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
},
{
name: '联合培养背景',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
}
]
requestType.map((item, index) => {
this.request(item, index)
})
},
request(item, index) {
cAction.reportAction.getContent(item.name).then(json => {
this.newsData.push({
id: index,
title: item.name,
content: json === null ? '' : json[0].content,
image: item.image
})
this.newsData = this.newsData.sort((a, b) => a.id - b.id)
}).catch(e => { this.$message.error(e.message) }).finally(() => {})
}
}
}
</script>
<style lang="scss" scoped>
.con970{
width: 970px;
margin: 0 auto;
}
.modul1{
position: relative;
width: 100%;
height: 190px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
background-size: cover;
.tap-btn{
width: 970px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
display: flex;
li{
width: 128px;
height: 36px;
background: #BF0927;
margin-right: 2px;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
&.active{
color: #BF0927;
background: #fff;
}
}
}
}
.tap-item-box{
.t-item1{
li{
border-bottom: 1px solid #CCCCCC;
padding: 30px 0 40px;
display: flex;
.info{
.img{
background: #F5F7F8;
padding: 21px;
img{
width: 178px;
height: 248px;
display: block;
}
}
p{
width: 100%;
color: #000;
font-size: 14px;
line-height: 30px;
margin: 0;
text-align: center;
&.name{
font-size: 24px;
font-weight: bold;
}
}
}
.msg{
margin-left: 30px;
.title{
font-size: 23px;
color: #000;
line-height: 32px;
}
p{
margin-top: 28px;
line-height: 30px;
color: #000;
font-size: 14px;
}
}
}
}
.new-items{
display: flex;
}
.child-tabs{
width: 670px;
margin-bottom: 40px;
}
.t-item2{
// display: flex;
padding: 60px 0;
.article{
width: 670px;
.title{
line-height: 100%;
font-size: 23px;
font-weight: bold;
}
.t2{
line-height: 25px;
font-size: 18px;
font-weight: bold;
margin-top: 5px;
}
.txt{
padding-top: 30px;
p{
line-height: 30px;
font-size: 14px;
color: #000;
// text-indent: 2em;
&.martop{
margin-top: 30px;
}
}
}
}
.right-img{
position: relative;
margin-left: auto;
}
.photo{
position: relative;
z-index: 9;
width: 235px;
height: 300px;
display: flex;
position: relative;
}
.line{
position: absolute;
top: 35px;
right: 35px;
width: 213px;
height: 280px;
border: 1px solid #979797;
}
}
.t-item3{
padding-top: 60px;
position: relative;
.t1{
line-height: 32px;
font-size: 23px;
font-weight: bold;
}
.t2{
margin-top: 5px;
line-height: 25px;
font-size: 18px;
font-weight: bold;
padding-bottom: 30px;
}
.new-img{
width: 891px;
margin: 0 auto 60px auto;
display: block;
// position: absolute;
// top: 60px;
// left: 50%;
// -webkit-transform: translateX(-50%);
}
ul{
li{
padding: 40px 0;
.con970{
overflow: hidden;
}
img{
display: block;
width: 140px;
height: 140px;
float: left;
}
.wenb{
float: left;
width: 510px;
.title{
font-size: 18px;
font-weight: bold;
color: #262626;
line-height: 25px;
margin-bottom: 25px;
}
p{
margin-bottom: 10px;
font-size: 14px;
color: #2B2B2B;
line-height: 20px;
}
}
&.type-l{
background: #F3F3F3;
img{
margin-right: 60px;
}
}
&.type-r{
.con970{
justify-content: right;
}
img{
float: right;
}
.wenb{
text-align: right;
margin-right: 60px;
float: right;
}
}
}
}
}
}
.new-style{
padding-bottom: 60px;
.top-cont{
width: 970px;
margin: 0 auto;
display: flex;
.left{
width: 434px;
height: 496px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9ca050bb75b08a232433f570bcac652d.png);
background-size: 100% 100%;
.txt{
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
line-height: 29px;
width: 353px;
margin: 180px auto 0;
text-indent: 2em;
}
}
ul{
margin-left: auto;
li{
transition: all .5s;
width: 464px;
height: 50px;
background: #F1F2F3;
padding: 0;
margin-bottom: 14px;
&.br{
&:hover{
height: 163px;
}
}
&:hover{
height: 143px;
background: #D83C56;
.dis-b{
display: none;
}
.dis-n{
display: block;
}
}
.dis-b{
display: flex;
align-items: center;
height: 100%;
.d{
width: 8px;
height: 8px;
background: #BF0927;
margin-left: 30px;
border-radius: 50%;
}
.txt{
font-size: 18px;
color: #BF0927;
line-height: 25px;
margin-left: 10px;
}
}
}
}
}
.dis-n{
margin-left: 50px;
display: none;
.title{
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
line-height: 33px;
padding-top: 30px;
margin-bottom: 36px;
}
.txt{
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 20px;
}
}
}
.content{
position: relative;
width: 100%;
height: 350px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/3ec70f7e95c722cc38d5b38749768b87.png);
background-size: 100% 100%;
.title{
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
line-height: 33px;
padding-top: 60px;
text-align: center;
}
.p1{
text-align: center;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
}
.box-cont{
width: 1000px;
height: 155px;
border: 1px solid rgba(216,60,86,.5);
// border: 1px solid #D83C56;
margin: 35px auto 0;
position: relative;
.le-tj{
position: absolute;
top: 0;
left: 0;
width: 198px;
height: 155px;
background: rgba(255,255,255,.2);
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
line-height: 155px;
text-align: center;
}
// .txt-box{
// position: absolute;
// top: 0;
// left: 50%;
// -webkit-transform: translateX(-50%);
// padding-top: 33px;
// .pp1{
// font-size: 14px;
// font-weight: bold;
// color: #FFFFFF;
// line-height: 20px;
// margin-bottom: 15px;
// }
// }
}
.txt-box{
position: absolute;
top: 30%;
left: 50%;
-webkit-transform: translateX(-50%);
padding-top: 33px;
.pp1{
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
line-height: 20px;
margin-bottom: 30px;
}
}
}
.zs-cont{
padding-top: 60px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论