Skip to content

P
project-www-pc
提交 6a7048de authored 作者: lhh's avatar lhh
浏览文件
操作

update

上级 9a90689b
隐藏空白字符变更
内嵌 并排
正在显示 包含 222 行增加 和 67 行删除
components/home/abroadStudy.vue
浏览文件 @ 6a7048de
......@@ -4,6 +4,34 @@
<nuxt-link to="/studyAbroad">{{ $t('home.abroad.title') }}</nuxt-link>
</template>
<div class="box-row">
<div class="box-l">
<div class="box-red_title">学历项目</div>
<div class="box-l_master" v-for="item in abroadList">
<div class="box-col__title" style="margin-top: 35px;">{{ item.title }}</div>
<div class="box-l_list">
<div class="box-l_item" v-for="cItem in item.children">
<div class="box-item_title">{{ cItem.title }}</div>
<img :src="cItem.img" class="box-item_logo" />
<div class="box-item_btns">
<a :href="btn.href" v-for="btn in cItem.btn" target="_blank">
<div class="box-item_btn" v-html="btn.name"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-r">
<div class="box-red_title">非学历项目</div>
<div class="box-block" style="margin: 75px 0 30px;">
<div class="btn">交换生项目</div>
</div>
<div class="box-block">
<div class="btn">交换生项目</div>
</div>
</div>
</div>
<!-- <div class="box-row">
<div class="box-col" v-for="(col, index) in abroadList" :key="index">
<div class="box-col__title">{{ col.title }}</div>
<ul class="box-wrap">
......@@ -17,7 +45,7 @@
</li>
</ul>
</div>
</div>
</div> -->
</AppCard>
</template>
......@@ -29,51 +57,95 @@ export default {
return {
abroadList: [
{
title: this.$t('home.degree.tabBtn1'),
title: '硕士',
children: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
desc: this.$t('home.abroad.sbu'),
href: 'https://sbu-plus.ezijing.com/'
title: '雪城大学',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m1.png',
btn: [
{ name: '计算机工程', href: 'https://syracuse-plus.ezijing.com/' },
{ name: '计算机科学', href: 'https://syracuse-plus.ezijing.com/' },
{ name: '电气工程', href: 'https://syracuse-plus.ezijing.com/' }
]
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
desc: this.$t('home.abroad.sit'),
href: 'https://sit-plus.ezijing.com/'
title: '纽约州立大学石溪分校',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m2.png',
btn: [{ name: '金融学硕士', href: 'https://sbu-plus.ezijing.com/' }]
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/depaul.png',
desc: '德保罗大学<br/>金融学硕士<br/>保研项目',
href: 'https://depaul-plus.ezijing.com/'
title: '斯蒂文斯理工学院',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m3.png',
btn: [{ name: '工程管理硕士', href: 'https://sit-plus.ezijing.com/' }]
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/xc-94.png',
desc: '雪城大学<br/>电气工程MSEE<br/>计算机科学MSCS<br/>计算机工程MSCE<br/>保研项目',
href: 'https://syracuse-plus.ezijing.com/'
title: '德保罗大学',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m4.png',
btn: [
{ name: '金融学硕士', href: 'https://depaul-plus.ezijing.com/' },
{ name: '北理工金融学硕士', href: 'https://depaul-plus.ezijing.com/' }
]
}
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/umiami.png',
// desc: '迈阿密大学<br/>技术管理MSMT<br/>软件工程MSSE<br/>保研项目',
// href: 'https://umiami-plus.ezijing.com/'
// }
]
},
{
title: this.$t('home.abroad.tabBtn2'),
title: '博士',
children: [
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
// desc: this.$t('home.abroad.cbu_online'),
// href: 'https://cbu-online.ezijing.com/'
// },
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
desc: this.$t('home.abroad.cbu_plus'),
href: 'https://cbu-plus.ezijing.com/'
title: '加州浸会大学',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/d1.png',
btn: [{ name: '全日制<br />工商管理博士DBA', href: 'https://cbu-plus.ezijing.com/' }]
}
]
}
]
// abroadList: [
// {
// title: this.$t('home.degree.tabBtn1'),
// children: [
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
// desc: this.$t('home.abroad.sbu'),
// href: 'https://sbu-plus.ezijing.com/'
// },
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
// desc: this.$t('home.abroad.sit'),
// href: 'https://sit-plus.ezijing.com/'
// },
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/depaul.png',
// desc: '德保罗大学<br/>金融学硕士<br/>保研项目',
// href: 'https://depaul-plus.ezijing.com/'
// },
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/xc-94.png',
// desc: '雪城大学<br/>电气工程MSEE<br/>计算机科学MSCS<br/>计算机工程MSCE<br/>保研项目',
// href: 'https://syracuse-plus.ezijing.com/'
// }
// // {
// // img: 'https://webapp-pub.ezijing.com/www/pc/home/umiami.png',
// // desc: '迈阿密大学<br/>技术管理MSMT<br/>软件工程MSSE<br/>保研项目',
// // href: 'https://umiami-plus.ezijing.com/'
// // }
// ]
// },
// {
// title: this.$t('home.abroad.tabBtn2'),
// children: [
// // {
// // img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
// // desc: this.$t('home.abroad.cbu_online'),
// // href: 'https://cbu-online.ezijing.com/'
// // },
// {
// img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
// desc: this.$t('home.abroad.cbu_plus'),
// href: 'https://cbu-plus.ezijing.com/'
// }
// ]
// }
// ]
}
}
}
......@@ -81,25 +153,108 @@ export default {
<style lang="scss" scoped>
.box-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
column-gap: 100px;
}
.box-col {
position: relative;
}
.box-col:nth-child(even) {
&::before {
position: absolute;
top: 42px;
bottom: 0;
left: -50px;
content: '';
width: 0;
border: 1px dashed #c4c4c4;
display: flex;
justify-content: space-between;
.box-l {
width: 810px;
}
.box-r {
width: 300px;
.box-block {
width: 300px;
height: 106px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
.btn {
min-width: 120px;
// line-height: 30px;
padding: 6px 0;
text-align: center;
font-size: 12px;
color: #333333;
border: 1px solid #d5d5d5;
cursor: pointer;
&:hover {
background-color: #aa1941;
border: 1px solid #aa1941;
color: #fff;
}
}
}
}
.box-red_title {
line-height: 35px;
background-color: #aa1941;
font-size: 18px;
text-align: center;
color: #fff;
font-weight: bold;
}
.box-l_list {
display: flex;
flex-wrap: wrap;
margin-right: -30px;
}
.box-l_item {
margin-bottom: 30px;
min-width: 180px;
// height: 230px;
background-color: #fff;
margin-right: 30px;
padding: 10px 15px 0;
.box-item_title {
font-size: 12px;
font-weight: bold;
color: #333333;
line-height: 100%;
margin-bottom: 10px;
text-align: center;
}
.box-item_btns {
width: 150px;
border-top: 1px dashed #f47524;
margin-top: 10px;
padding-top: 10px;
height: 140px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.box-item_btn {
min-width: 120px;
// line-height: 30px;
padding: 6px 0;
margin-bottom: 8px;
text-align: center;
font-size: 12px;
color: #333333;
border: 1px solid #d5d5d5;
cursor: pointer;
&:hover {
background-color: #aa1941;
border: 1px solid #aa1941;
color: #fff;
}
}
}
}
}
// .box-col {
// position: relative;
// }
// .box-col:nth-child(even) {
// &::before {
// position: absolute;
// top: 42px;
// bottom: 0;
// left: -50px;
// content: '';
// width: 0;
// border: 1px dashed #c4c4c4;
// }
// }
.box-col__title {
padding-left: 10px;
margin-bottom: 26px;
......@@ -107,26 +262,26 @@ export default {
line-height: 1;
border-left: 1px solid var(--main-color);
}
.box-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.box-inner {
display: flex;
align-items: center;
padding: 10px;
&:hover {
color: #fff;
background-color: var(--main-color);
}
.box-pic {
width: 120px;
height: 80px;
}
.box-desc {
flex: 1;
text-align: center;
}
}
// .box-wrap {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: 20px;
// }
// .box-inner {
// display: flex;
// align-items: center;
// padding: 10px;
// &:hover {
// color: #fff;
// background-color: var(--main-color);
// }
// .box-pic {
// width: 120px;
// height: 80px;
// }
// .box-desc {
// flex: 1;
// text-align: center;
// }
// }
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论