Skip to content

P
project-online-pc
提交 068aa843 authored 作者: matian's avatar matian
浏览文件
操作

fix:页面优化

上级 c0afe980
显示空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 54 行删除
.DS_Store
浏览文件 @ 068aa843
No preview for this file type
components/home/schoolRanking.vue
浏览文件 @ 068aa843
......@@ -9,29 +9,33 @@
<div class="content-mian">
<div class="li">
<div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div>
<div class="li-tit1" v-html="$t('home.ranking.item1Tit1')"></div>
<div class="item">
<div class="tit"><span>No.</span>1</div>
<div class="tit"><span class="no">No.</span><span class="num">1</span></div>
<div class="p" v-html="$t('home.ranking.item1Txt1')"></div>
</div>
<div class="item">
<div class="tit"><span>No.</span>8</div>
<div class="tit"><span class="no">No.</span><span class="num">8</span></div>
<div class="p" v-html="$t('home.ranking.item1Txt2')"></div>
</div>
</div>
<div class="li li_center">
<!-- <div class="li-tit" v-html="$t('home.ranking.item2Tit11')"></div> -->
<div class="li-tit" v-html="$t('home.ranking.item2Tit12')"></div>
<div class="li-tit" v-html="$t('home.ranking.item2Tit13')"></div>
<div class="li-tit" v-html="$t('home.ranking.item2Tit14')"></div>
<div class="li-tit2" v-html="$t('home.ranking.item2Tit12')"></div>
<div class="li-tit2" v-html="$t('home.ranking.item2Tit13')"></div>
<div class="li-tit2" v-html="$t('home.ranking.item2Tit14')"></div>
</div>
<div class="li mar-t">
<div class="li-tit" v-html="$t('home.ranking.item3Tit')"></div>
<div class="li-tit1" v-html="$t('home.ranking.item3Tit1')"></div>
<div class="item">
<div class="tit"><span>No.</span>1</div>
<div class="tit"><span class="no">2021.No.</span><span class="num">1</span></div>
<div class="p" v-html="$t('home.ranking.item3Txt1')"></div>
</div>
<div class="item">
<div class="tit"><span>No.</span>7</div>
<div class="tit"><span class="no">2021.No.</span><span class="num">7</span></div>
<div class="p" v-html="$t('home.ranking.item3Txt2')"></div>
</div>
</div>
......@@ -82,7 +86,11 @@ export default {
display: flex;
justify-content: space-between;
.li_center {
align-self: center;
// align-self: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.li {
// width: 250px;
......@@ -90,25 +98,42 @@ export default {
.li-tit {
text-align: center;
font-size: 30px;
line-height: 1.5;
line-height: 24px;
color: #fff;
font-weight: 400;
}
.li-tit1{
font-size: 28px;
font-weight: 300;
line-height: 24px;
color: #FFFFFF;
margin-top: 11px;
}
.li-tit2{
font-size: 28px;
font-weight: 500;
line-height: 70px;
color: #FFFFFF;
opacity: 1;
}
.item {
.tit {
padding-top: 46px;
font-size: 48px;
line-height: 100%;
color: #ffffff;
color: #FBFBFB;
text-align: center;
margin-bottom: 15px;
span {
line-height: 34px;
.no {
font-size: 24px;
}
.num{
font-size: 48px;
}
}
.p {
text-align: center;
font-size: 16px;
line-height: 30px;
line-height: 24px;
color: #ffffff;
}
}
......
langs/en-US.js
浏览文件 @ 068aa843
......@@ -54,9 +54,12 @@ export default {
},
ranking: {
title: '学校排名',
item1Tit: '瑞士美食艺术管理大学 <br/>Culinary Arts Academy Switzerland',
item1Tit: '瑞士美食艺术管理大学 <br/>',
item1Tit1:'CULINARY ARTS ACADEMY SWITZERLAND',
// item2Tit: 'KELLEY 商学院',
item3Tit: '瑞士恺撒里兹大学 <br/>César Ritz Collage Switzerland',
item3Tit: '瑞士恺撒里兹大学 ',
item3Tit1: 'CÉSAR RITZ COLLAGE SWITZERLAND',
item1Txt1: '唯一进入全球款待业与休闲专业排名的美食艺术院校<br/>【2021年QS排名】',
item1Txt2: '全休款待业与休闲管理院校<br/>【2021年QS排名】',
item2Tit11: '顶尖双校合作项目',
......
langs/zh-CN.js
浏览文件 @ 068aa843
......@@ -54,9 +54,11 @@ export default {
},
ranking: {
title: '学校排名',
item1Tit: '瑞士美食艺术管理大学 <br/>Culinary Arts Academy Switzerland',
item1Tit: '瑞士美食艺术管理大学 ',
item1Tit1:'CULINARY ARTS ACADEMY SWITZERLAND',
// item2Tit: 'KELLEY 商学院',
item3Tit: '瑞士恺撒里兹大学 <br/>César Ritz Collage Switzerland',
item3Tit: '瑞士恺撒里兹大学',
item3Tit1: 'CÉSAR RITZ COLLAGE SWITZERLAND',
item1Txt1: '唯一进入全球款待业与休闲专业排名的美食艺术院校<br/>【2021年QS排名】',
item1Txt2: '全休款待业与休闲管理院校<br/>【2021年QS排名】',
item2Tit11: '顶尖双校合作项目',
......
pages/alumni/outstanding.vue
浏览文件 @ 068aa843
......@@ -139,14 +139,17 @@ export default {
margin-bottom: 40px;
h2 {
font-size: 22px;
text-align: center;
color: #aa1941;
text-align: left;
color: #333;
line-height: 34px;
font-weight: 500;
}
p {
margin-top: 20px;
margin-top: 22px;
font-size: 16px;
line-height: 1.5;
color: #424242;
line-height: 27px;
color: #707070;
font-weight: 300;
}
}
.is-pc {
......
pages/apply/relevant.vue
浏览文件 @ 068aa843
......@@ -11,13 +11,25 @@
<div class="title mar-t55">{{ $t('apply.con3Tit') }}</div>
<div class="con-txt" v-html="$t('apply.con3Txt')"></div>
<div class="title mar-t55">{{ $t('apply.con4Tit') }}</div>
<div class="applyList con-txt">
<ul style="margin-top:15px;">
<li v-for="(item,index) in applyList" :key="index" style="margin-top:15px">
<div class="applyList_tit"><span>{{item.index}}</span> {{item.title}}</div>
<div class="apply">
<div class="line1"></div>
<div class="appList" v-for=" (item ,index) in applyLists" :key="index">
<div class="appList_left">
<img :src="item.img" alt="">
</div>
<div class="appList_right">
<div class="left">
<div class="num">{{item.index}}</div>
<div class="tit">{{item.tit}}</div>
</div>
<div class="right">
<ul class="applyItem">
<li v-for="(item,index) in item.applyItem" :key="index" class="applyItem_nums">
<div class="applyItem_tit">{{item.tit}}</div>
<div class="applyItem_tit" >
<div class="circle"></div>
<div>{{item.tit}}</div>
</div>
<ol class="applyItemNum_con">
<li v-for="(item ,index) in item.applyItemNum" :key="index" class="applyItemNum">
<div> {{item.nums}}</div>
......@@ -25,8 +37,9 @@
</ol>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -61,9 +74,11 @@ export default {
}
]
},
applyList:[
{ index:this.$t('apply.index1'),
title:this.$t('apply.title1'),
applyLists:[
{
img:'https://webapp-pub.ezijing.com/project/caas/step01.png',
index:this.$t('apply.index1'),
tit:this.$t('apply.title1'),
applyItem:[
{index:this.$t('apply.index1'),tit:this.$t('apply.applyItemTit1'),
applyItemNum:[
......@@ -76,33 +91,44 @@ export default {
{nums:this.$t('apply.applyItemNum7')}]
}]
},
{ index:this.$t('apply.index2'),
title:this.$t('apply.title2'),
{
img:'https://webapp-pub.ezijing.com/project/caas/step02.png',
index:this.$t('apply.index2'),
tit:this.$t('apply.title2'),
applyItem:[{tit:this.$t('apply.applyItemTit2')}]
},
{ index:this.$t('apply.index3'),
title:this.$t('apply.title3'),
{
img:'https://webapp-pub.ezijing.com/project/caas/step03.png',
index:this.$t('apply.index3'),
tit:this.$t('apply.title3'),
applyItem:[{tit:this.$t('apply.applyItemTit31')},
{tit:this.$t('apply.applyItemTit32')}]
},
{ index:this.$t('apply.index4'),
title:this.$t('apply.title4'),
{
img:'https://webapp-pub.ezijing.com/project/caas/step04.png',
index:this.$t('apply.index4'),
tit:this.$t('apply.title4'),
applyItem:[{tit:this.$t('apply.applyItemTit4')}]
},
{ index:this.$t('apply.index5'),
title:this.$t('apply.title5'),
{
img:'https://webapp-pub.ezijing.com/project/caas/step05.png',
index:this.$t('apply.index5'),
tit:this.$t('apply.title5'),
applyItem:[
{tit:this.$t('apply.applyItemTit51')},
{tit:this.$t('apply.applyItemTit52')}]
},
{ index:this.$t('apply.index6'),
title:this.$t('apply.title6'),
{
img:'https://webapp-pub.ezijing.com/project/caas/step06.png',
index:this.$t('apply.index6'),
tit:this.$t('apply.title6'),
applyItem:[
{tit:this.$t('apply.applyItemTit61')},
{tit:this.$t('apply.applyItemTit62')}]
}
{tit:this.$t('apply.applyItemTit62')}
]
}
],
}
},
computed: {
isMobile() {
......@@ -144,27 +170,103 @@ export default {
}
}
}
.applyList{
margin-left: 20px;
.apply{
width: 900px;
border-top: 1px solid #e6e6e6;
z-index:15;
border-bottom: 1px solid #e6e6e6;
margin-top: 48px;
position: relative;
.line1{
width: 1px;
height: 772px;
border: 1px dashed #AA1941;
position: absolute;
bottom:110px;
left: 40px;
z-index:5;
}
}
.appList{
display: flex;
justify-content: flex-start;
.applyList_tit{
margin-left: -23px;
span{
padding-right: 20px;
justify-content:flex-start;
position: relative;
z-index:10;
.appList_left{
img{
width: 80px;
height: 80px;
margin-top: 30px;
}
}
.appList_right{
display: flex;
justify-content: space-between;
align-items: flex-start;
border-top: 1px solid #e6e6e6;
min-height:140px;
width: 709px;
margin-left: 59px;
.left{
padding-left: 0;
margin-right: 100px;
margin-top: 35px;
.num{
font-size: 60px;
line-height: 30px;
color: #AA1941;
text-align: left;
}
.tit{
font-size: 22px;
font-weight: 300;
line-height: 34px;
color: #777;
margin-top: 4px;
text-align: left;
}
}
.right{
width: 700px;
text-align: left;
display: flex;
align-self: center;
margin-left: 0;
.applyItem{
display: flex;
align-items:flex-start;
flex-direction: column;
.applyItem_nums{
list-style-type: disc;
text-indent: 21px;
.applyItem_tit{
display: flex;
justify-content: center;
// align-self: center;
font-size: 16px;
font-weight: 300;
line-height: 32px;
color: #424242;
.circle{
width: 7px;
height: 7px;
min-width: 7px;
background: #AA1941;
border-radius: 50%;
margin-top: 12px;
}
}
.applyItemNum_con{
margin-left: 48px;
font-size: 16px;
font-weight: 300;
line-height: 32px;
color: #424242;
.applyItemNum{
list-style-type:decimal;
}
}
}
}
}
}
}
......@@ -206,6 +308,101 @@ export default {
}
}
}
.apply{
width: 4.5rem;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
z-index:15;
margin-top: .24rem;
.line1{
width: .01rem;
height: 4.5rem;
border: 1px dashed #AA1941;
position: absolute;
top:7rem;
left: .40rem;
z-index:5;
}
}
.appList{
display: flex;
position: relative;
z-index:10;
.appList_left{
img{
width: .40rem;
height: .40rem;
margin-top: .15rem;
}
}
.appList_right{
display: flex;
justify-content: space-between;
align-items: flex-start;
border-top: 1px solid #e6e6e6;
min-height:.70rem;
width: 3.04rem;
margin-left: .10rem;
.left{
padding-left: 0;
margin-right: .10rem;
margin-top: .18rem;
.num{
font-size: .30rem;
line-height: .15rem;
font-weight: normal;
color: #AA1941;
text-align: left;
}
.tit{
width: .50rem;
font-size: .11rem;
font-weight: 300;
line-height: .17rem;
color: #777;
margin-top: .02rem;
text-align: left;
}
}
.right{
width: 3.50rem;
margin-top: .15rem;
.applyItem{
.applyItem_nums{
text-indent: .11rem;
.applyItem_tit{
display: flex;
justify-content: flex-start;
font-size: .14rem;
font-weight: 300;
line-height: .16rem;
color: #424242;
.circle{
min-height: .04rem;
min-width: .04rem;
height: .04rem;
background: #AA1941;
border-radius: 50%;
margin-top: .06rem;
}
}
.applyItemNum_con{
margin-left: .50rem;
font-size: .12rem;
font-weight: 300;
line-height: .16rem;
color: #424242;
.applyItemNum{
list-style-type:decimal;
}
}
}
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论