Skip to content

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

fix:代码优化

上级 57b79ac1
隐藏空白字符变更
内嵌 并排
正在显示 包含 313 行增加 和 268 行删除
components/home/schoolRanking.vue
浏览文件 @ 11afdcda
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
<div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div> <div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div>
<div class="li-tit1" v-html="$t('home.ranking.item1Tit1')"></div> <div class="li-tit1" v-html="$t('home.ranking.item1Tit1')"></div>
<div class="item"> <div class="item">
<div class="tit"><span class="no">No.</span><span class="num">1</span></div> <div class="tit"><span class="no">2021.No.</span><span class="num">1</span></div>
<div class="p" v-html="$t('home.ranking.item1Txt1')"></div> <div class="p" v-html="$t('home.ranking.item1Txt1')"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="tit"><span class="no">No.</span><span class="num">8</span></div> <div class="tit"><span class="no">2021.No.</span><span class="num">8</span></div>
<div class="p" v-html="$t('home.ranking.item1Txt2')"></div> <div class="p" v-html="$t('home.ranking.item1Txt2')"></div>
</div> </div>
</div> </div>
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
<div class="li-tit1" v-html="$t('home.ranking.item3Tit1')"></div> <div class="li-tit1" v-html="$t('home.ranking.item3Tit1')"></div>
<div class="item"> <div class="item item_two">
<div class="tit"><span class="no">2021.No.</span><span class="num">1</span></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 class="p" v-html="$t('home.ranking.item3Txt1')"></div>
</div> </div>
<div class="item"> <div class="item item_last">
<div class="tit"><span class="no">2021.No.</span><span class="num">7</span></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 class="p" v-html="$t('home.ranking.item3Txt2')"></div>
</div> </div>
...@@ -170,49 +170,63 @@ export default { ...@@ -170,49 +170,63 @@ export default {
} }
} }
.content-mian { .content-mian {
// width: 1000px; // margin: 0 auto;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.li_center { .li_center {
align-self: center; align-self: center;
text-align: center;
} }
.li { .li {
// width: 1.05rem; width: 2.5rem;
margin: auto;
&.mar-t {
// transform: translateY(-0.15rem);
.li-tit {
line-height: 0.15rem;
transform: translateY(0.1rem);
}
}
.li-tit { .li-tit {
text-align: center; text-align: center;
font-size: 0.13rem; font-size: .14rem;
line-height: 100%; line-height: .12rem;
color: #fff; color: #fff;
font-weight: 400;
}
.li-tit1{
font-size: .12rem;
font-weight: 300;
line-height: .12rem;
color: #FFFFFF;
margin-top: .05rem;
text-align: center;
}
.li-tit2{
font-size: .12rem;
font-weight: 500;
line-height: .24rem;
color: #FFFFFF;
opacity: 1;
} }
.item { .item {
.tit { .tit {
padding-top: 0.15rem; padding-top: 12px;
font-size: 0.24rem; color: #FBFBFB;
color: #ffffff;
text-align: center; text-align: center;
margin-bottom: 0.03rem; margin-bottom: 16px;
line-height: 100%; line-height: 20px;
span { .no {
font-size: 0.12rem; font-size: 12px;
}
.num{
font-size: 18px;
} }
} }
.p { .p {
font-size: 0.1rem;
line-height: 0.16rem;
margin-bottom: 0.05rem;
color: #ffffff;
text-align: center; text-align: center;
font-size: 12px;
color: #ffffff;
} }
} }
.item_last{
margin-top: .15rem;
}
.item_two{
margin-top: .10rem;
}
} }
} }
} }
......
pages/apply/relevant.vue
浏览文件 @ 11afdcda
...@@ -4,138 +4,157 @@ ...@@ -4,138 +4,157 @@
<div class="rele-content-box"> <div class="rele-content-box">
<div class="content-box"> <div class="content-box">
<div class="text-content"> <div class="text-content">
<div class="title">{{ $t('apply.con1Tit') }}</div> <div class="title">{{ $t("apply.con1Tit") }}</div>
<div class="con-txt" v-html="$t('apply.con1Txt')"></div> <div class="con-txt" v-html="$t('apply.con1Txt')"></div>
<div class="title mar-t55">{{ $t('apply.con2Tit') }}</div> <div class="title mar-t55">{{ $t("apply.con2Tit") }}</div>
<div class="con-txt" v-html="$t('apply.con2Txt')"></div> <div class="con-txt" v-html="$t('apply.con2Txt')"></div>
<div class="title mar-t55">{{ $t('apply.con3Tit') }}</div> <div class="title mar-t55">{{ $t("apply.con3Tit") }}</div>
<div class="con-txt" v-html="$t('apply.con3Txt')"></div> <div class="con-txt" v-html="$t('apply.con3Txt')"></div>
<div class="title mar-t55">{{ $t('apply.con4Tit') }}</div> <div class="title mar-t55">{{ $t("apply.con4Tit") }}</div>
<div class="apply"> <div class="apply">
<div class="line1"></div> <div class="line1"></div>
<div class="appList" v-for=" (item ,index) in applyLists" :key="index"> <div
<div class="appList_left"> class="appList"
<img :src="item.img" alt=""> v-for="(item, index) in applyLists"
</div> :key="index"
<div class="appList_right"> >
<div class="left"> <div class="appList_left">
<div class="num">{{item.index}}</div> <img :src="item.img" alt="" />
<div class="tit">{{item.tit}}</div>
</div> </div>
<div class="right"> <div class="appList_right">
<ul class="applyItem"> <div class="left">
<li v-for="(item,index) in item.applyItem" :key="index" class="applyItem_nums"> <div class="num">{{ item.index }}</div>
<div class="applyItem_tit" > <div class="tit">{{ item.tit }}</div>
<div class="circle"></div> </div>
<div>{{item.tit}}</div> <div class="right">
<ul class="applyItem">
</div> <li
<ol class="applyItemNum_con"> v-for="(item, index) in item.applyItem"
<li v-for="(item ,index) in item.applyItemNum" :key="index" class="applyItemNum"> :key="index"
<div> {{item.nums}}</div> class="applyItem_nums"
</li> >
</ol> <div class="applyItem_tit">
</li> <div class="circle"></div>
</ul> <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>
</li>
</ol>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from "@/components/appFrame";
export default { export default {
layout: 'normal', layout: "normal",
components: { components: {
appFrame appFrame,
}, },
data() { data() {
return { return {
newsList: [], newsList: [],
frameParams: { frameParams: {
banner: 'https://webapp-pub.ezijing.com/project/caas/apply-relevant_banner.png', banner:
"https://webapp-pub.ezijing.com/project/caas/apply-relevant_banner.png",
slider: [ slider: [
{ {
name: this.$t('menu.recruitChild.apply'), name: this.$t("menu.recruitChild.apply"),
path: '/apply/relevant' path: "/apply/relevant",
}, },
{ {
name: this.$t('menu.recruitChild.cost'), name: this.$t("menu.recruitChild.cost"),
path: '/apply/support' path: "/apply/support",
}, },
{ {
name: this.$t('menu.recruitChild.problem'), name: this.$t("menu.recruitChild.problem"),
path: '/apply/problem' path: "/apply/problem",
} },
] ],
}, },
applyLists:[ applyLists: [
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step01.png', img: "https://webapp-pub.ezijing.com/project/caas/step01.png",
index:this.$t('apply.index1'), index: this.$t("apply.index1"),
tit:this.$t('apply.title1'), tit: this.$t("apply.title1"),
applyItem:[ applyItem: [
{index:this.$t('apply.index1'),tit:this.$t('apply.applyItemTit1'), {
applyItemNum:[ index: this.$t("apply.index1"),
{nums:this.$t('apply.applyItemNum1')}, tit: this.$t("apply.applyItemTit1"),
{nums:this.$t('apply.applyItemNum2')}, applyItemNum: [
{nums:this.$t('apply.applyItemNum3')}, { nums: this.$t("apply.applyItemNum1") },
{nums:this.$t('apply.applyItemNum4')}, { nums: this.$t("apply.applyItemNum2") },
{nums:this.$t('apply.applyItemNum5')}, { nums: this.$t("apply.applyItemNum3") },
{nums:this.$t('apply.applyItemNum6')}, { nums: this.$t("apply.applyItemNum4") },
{nums:this.$t('apply.applyItemNum7')}] { nums: this.$t("apply.applyItemNum5") },
}] { nums: this.$t("apply.applyItemNum6") },
{ nums: this.$t("apply.applyItemNum7") },
],
},
],
}, },
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step02.png', img: "https://webapp-pub.ezijing.com/project/caas/step02.png",
index:this.$t('apply.index2'), index: this.$t("apply.index2"),
tit:this.$t('apply.title2'), tit: this.$t("apply.title2"),
applyItem:[{tit:this.$t('apply.applyItemTit2')}] applyItem: [{ tit: this.$t("apply.applyItemTit2") }],
}, },
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step03.png', img: "https://webapp-pub.ezijing.com/project/caas/step03.png",
index:this.$t('apply.index3'), index: this.$t("apply.index3"),
tit:this.$t('apply.title3'), tit: this.$t("apply.title3"),
applyItem:[{tit:this.$t('apply.applyItemTit31')}, applyItem: [
{tit:this.$t('apply.applyItemTit32')}] { tit: this.$t("apply.applyItemTit31") },
{ tit: this.$t("apply.applyItemTit32") },
],
}, },
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step04.png', img: "https://webapp-pub.ezijing.com/project/caas/step04.png",
index:this.$t('apply.index4'), index: this.$t("apply.index4"),
tit:this.$t('apply.title4'), tit: this.$t("apply.title4"),
applyItem:[{tit:this.$t('apply.applyItemTit4')}] applyItem: [{ tit: this.$t("apply.applyItemTit4") }],
}, },
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step05.png', img: "https://webapp-pub.ezijing.com/project/caas/step05.png",
index:this.$t('apply.index5'), index: this.$t("apply.index5"),
tit:this.$t('apply.title5'), tit: this.$t("apply.title5"),
applyItem:[ applyItem: [
{tit:this.$t('apply.applyItemTit51')}, { tit: this.$t("apply.applyItemTit51") },
{tit:this.$t('apply.applyItemTit52')}] { tit: this.$t("apply.applyItemTit52") },
],
}, },
{ {
img:'https://webapp-pub.ezijing.com/project/caas/step06.png', img: "https://webapp-pub.ezijing.com/project/caas/step06.png",
index:this.$t('apply.index6'), index: this.$t("apply.index6"),
tit:this.$t('apply.title6'), tit: this.$t("apply.title6"),
applyItem:[ applyItem: [
{tit:this.$t('apply.applyItemTit61')}, { tit: this.$t("apply.applyItemTit61") },
{tit:this.$t('apply.applyItemTit62')} { tit: this.$t("apply.applyItemTit62") },
] ],
} },
], ],
} };
}, },
computed: { computed: {
isMobile() { isMobile() {
return this.$store.state.isMobile return this.$store.state.isMobile;
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
...@@ -159,107 +178,114 @@ export default { ...@@ -159,107 +178,114 @@ export default {
margin-top: 55px; margin-top: 55px;
} }
} }
.con-txt { .con-txt {
font-size: 16px; font-size: 16px;
line-height: 34px; line-height: 34px;
color: #424242; color: #424242;
margin-top: 20px; margin-top: 20px;
::v-deep{ ::v-deep {
span{ span {
font-weight: bold; font-weight: bold;
} }
} }
} }
.apply{ .apply {
width: 900px; width: 900px;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
z-index:15; z-index: 15;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
margin-top: 48px; margin-top: 48px;
position: relative; position: relative;
.line1{ .line1 {
width: 1px; width: 1px;
height: 772px; height: 800px;
border: 1px dashed #AA1941; border: 1px dashed #aa1941;
position: absolute; position: absolute;
bottom:110px; bottom: 110px;
left: 40px; left: 60px;
z-index:5; z-index: 5;
} }
} }
.appList{ .appList {
display: flex; display: flex;
justify-content:flex-start; justify-content: flex-start;
position: relative; position: relative;
z-index:10; z-index: 10;
.appList_left{ &:last-child .appList_right {
img{ border-bottom: 0 !important;
width: 80px;
height: 80px;
margin-top: 30px;
} }
.appList_left {
padding-left:20px ;
img {
width: 80px;
height: 80px;
margin-top: 30px;
}
} }
.appList_right{ .appList_right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
min-height:140px; min-height: 140px;
width: 709px; width: 709px;
margin-left: 59px; margin-left: 59px;
.left{ .left {
margin-right: 100px; margin-right: 100px;
margin-top: 35px; margin-top: 35px;
.num{ .num {
font-size: 60px; margin-top: 10px;
line-height: 30px; font-size: 60px;
color: #AA1941; line-height: 30px;
color: #aa1941;
} }
.tit{ .tit {
font-size: 22px; font-size: 22px;
font-weight: 300; font-weight: 300;
line-height: 34px; line-height: 34px;
color: #777; color: #777;
margin-top: 4px; margin-top: 10px;
min-width: 88px; min-width: 88px;
} }
} }
.right{ .right {
width: 709px; width: 709px;
margin-top: 30px; margin-top: 30px;
.applyItem{ margin-bottom: 30px;
display: flex; .applyItem {
align-items:flex-start; display: flex;
flex-direction: column; align-items: flex-start;
.applyItem_nums{ flex-direction: column;
text-indent: 21px; .applyItem_nums {
.applyItem_tit{ text-indent: 7px;
display: flex; .applyItem_tit {
font-size: 16px; display: flex;
font-weight: 300; font-size: 16px;
line-height: 32px; font-weight: 300;
color: #424242; line-height: 32px;
.circle{ color: #424242;
width: 7px; .circle {
height: 7px; width: 7px;
min-width: 7px; height: 7px;
background: #AA1941; min-width: 7px;
border-radius: 50%; background: #aa1941;
margin-top: 12px; border-radius: 50%;
} margin-top: 12px;
} }
.applyItemNum_con{ }
margin-left: 48px; .applyItemNum_con {
font-size: 16px; margin-left: 30px;
font-weight: 300; font-size: 16px;
line-height: 32px; font-weight: 300;
color: #424242; line-height: 32px;
.applyItemNum{ color: #424242;
list-style-type:decimal; .applyItemNum {
} list-style-type: decimal;
} text-indent: 0;
} }
} }
}
}
} }
} }
} }
...@@ -293,109 +319,114 @@ export default { ...@@ -293,109 +319,114 @@ export default {
line-height: 0.24rem; line-height: 0.24rem;
color: #424242; color: #424242;
padding-top: 0.14rem; padding-top: 0.14rem;
::v-deep{ ::v-deep {
span{ span {
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
} }
.apply{ .apply {
width: 4.5rem; width: 4.5rem;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
z-index:15; z-index: 15;
margin-top: .24rem; margin-top: 0.24rem;
.line1{ .line1 {
width: .01rem; width: 0.01rem;
height: 4.5rem; height: 4.5rem;
border: 1px dashed #AA1941; border: 1px dashed #aa1941;
position: absolute; position: absolute;
top:7rem; top: 7rem;
left: .40rem; left: 0.4rem;
z-index:5; z-index: 5;
} }
}
.appList {
display: flex;
position: relative;
z-index: 10;
&:last-child .appList_right {
border-bottom: 0 !important;
}
.appList_left {
padding-left:.01rem;
img {
width: 0.4rem;
height: 0.4rem;
margin-top: 0.15rem;
} }
.appList{ }
display: flex; .appList_right {
position: relative; display: flex;
z-index:10; justify-content: space-between;
.appList_left{ align-items: flex-start;
img{ border-bottom: 1px solid #e6e6e6;
width: .40rem; min-height: 0.7rem;
height: .40rem; width: 3.04rem;
margin-top: .15rem; margin-left: 0.1rem;
.left {
padding-left: 0;
margin-right: 0.1rem;
margin-top: 0.18rem;
.num {
font-size: 0.3rem;
line-height: 0.15rem;
font-weight: normal;
color: #aa1941;
text-align: left;
} }
.tit {
width: 0.5rem;
font-size: 0.11rem;
font-weight: 300;
line-height: 0.17rem;
color: #777;
margin-top: 0.06rem;
text-align: left;
} }
.appList_right{ }
display: flex; .right {
justify-content: space-between; width: 3.5rem;
align-items: flex-start; margin-top: 0.15rem;
border-top: 1px solid #e6e6e6; .applyItem {
min-height:.70rem; .applyItem_nums {
width: 3.04rem; text-indent: 0.11rem;
margin-left: .10rem; .applyItem_tit {
.left{ display: flex;
padding-left: 0; justify-content: flex-start;
margin-right: .10rem; font-size: 0.14rem;
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; font-weight: 300;
line-height: .17rem; line-height: 0.16rem;
color: #777; color: #424242;
margin-top: .02rem; .circle {
text-align: left; min-height: 0.04rem;
min-width: 0.04rem;
height: 0.04rem;
background: #aa1941;
border-radius: 50%;
margin-top: 0.06rem;
}
} }
}
.right{
width: 3.50rem;
margin-top: .15rem; .applyItemNum_con {
.applyItem{ margin-left: 0.3rem;
.applyItem_nums{ font-size: 0.12rem;
text-indent: .11rem; font-weight: 300;
.applyItem_tit{ line-height: 0.16rem;
display: flex; color: #424242;
justify-content: flex-start; .applyItemNum {
font-size: .14rem; list-style-type: decimal;
font-weight: 300; text-indent: 0;
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: .3rem;
font-size: .12rem;
font-weight: 300;
line-height: .16rem;
color: #424242;
.applyItemNum{
list-style-type:decimal;
}
}
}
}
} }
} }
} }
}
}
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论