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 @@
<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 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>
<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>
</div>
......@@ -30,11 +30,11 @@
<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="p" v-html="$t('home.ranking.item3Txt1')"></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="p" v-html="$t('home.ranking.item3Txt2')"></div>
</div>
......@@ -170,49 +170,63 @@ export default {
}
}
.content-mian {
// width: 1000px;
margin: 0 auto;
// margin: 0 auto;
display: flex;
justify-content: space-between;
.li_center {
align-self: center;
text-align: center;
}
.li {
// width: 1.05rem;
margin: auto;
&.mar-t {
// transform: translateY(-0.15rem);
.li-tit {
line-height: 0.15rem;
transform: translateY(0.1rem);
}
}
width: 2.5rem;
.li-tit {
text-align: center;
font-size: 0.13rem;
line-height: 100%;
font-size: .14rem;
line-height: .12rem;
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 {
.tit {
padding-top: 0.15rem;
font-size: 0.24rem;
color: #ffffff;
padding-top: 12px;
color: #FBFBFB;
text-align: center;
margin-bottom: 0.03rem;
line-height: 100%;
span {
font-size: 0.12rem;
margin-bottom: 16px;
line-height: 20px;
.no {
font-size: 12px;
}
.num{
font-size: 18px;
}
}
.p {
font-size: 0.1rem;
line-height: 0.16rem;
margin-bottom: 0.05rem;
color: #ffffff;
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 @@
<div class="rele-content-box">
<div class="content-box">
<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="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="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="title mar-t55">{{ $t('apply.con4Tit') }}</div>
<div class="title mar-t55">{{ $t("apply.con4Tit") }}</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 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="right">
<ul class="applyItem">
<li v-for="(item,index) in item.applyItem" :key="index" class="applyItem_nums">
<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>
</li>
</ol>
</li>
</ul>
<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">
<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>
</li>
</ol>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
import appFrame from "@/components/appFrame";
export default {
layout: 'normal',
layout: "normal",
components: {
appFrame
appFrame,
},
data() {
return {
newsList: [],
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: [
{
name: this.$t('menu.recruitChild.apply'),
path: '/apply/relevant'
name: this.$t("menu.recruitChild.apply"),
path: "/apply/relevant",
},
{
name: this.$t('menu.recruitChild.cost'),
path: '/apply/support'
name: this.$t("menu.recruitChild.cost"),
path: "/apply/support",
},
{
name: this.$t('menu.recruitChild.problem'),
path: '/apply/problem'
}
]
name: this.$t("menu.recruitChild.problem"),
path: "/apply/problem",
},
],
},
applyLists:[
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:[
{nums:this.$t('apply.applyItemNum1')},
{nums:this.$t('apply.applyItemNum2')},
{nums:this.$t('apply.applyItemNum3')},
{nums:this.$t('apply.applyItemNum4')},
{nums:this.$t('apply.applyItemNum5')},
{nums:this.$t('apply.applyItemNum6')},
{nums:this.$t('apply.applyItemNum7')}]
}]
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: [
{ nums: this.$t("apply.applyItemNum1") },
{ nums: this.$t("apply.applyItemNum2") },
{ nums: this.$t("apply.applyItemNum3") },
{ nums: this.$t("apply.applyItemNum4") },
{ 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',
index:this.$t('apply.index2'),
tit:this.$t('apply.title2'),
applyItem:[{tit:this.$t('apply.applyItemTit2')}]
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") }],
},
{
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')}]
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") },
],
},
{
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')}]
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") }],
},
{
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')}]
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") },
],
},
{
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')}
]
}
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") },
],
},
],
}
};
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
return this.$store.state.isMobile;
},
},
};
</script>
<style lang="scss" scoped>
.is-pc {
......@@ -159,107 +178,114 @@ export default {
margin-top: 55px;
}
}
.con-txt {
.con-txt {
font-size: 16px;
line-height: 34px;
color: #424242;
margin-top: 20px;
::v-deep{
span{
::v-deep {
span {
font-weight: bold;
}
}
}
.apply{
.apply {
width: 900px;
border-top: 1px solid #e6e6e6;
z-index:15;
z-index: 15;
border-bottom: 1px solid #e6e6e6;
margin-top: 48px;
position: relative;
.line1{
.line1 {
width: 1px;
height: 772px;
border: 1px dashed #AA1941;
height: 800px;
border: 1px dashed #aa1941;
position: absolute;
bottom:110px;
left: 40px;
z-index:5;
}
bottom: 110px;
left: 60px;
z-index: 5;
}
}
.appList{
.appList {
display: flex;
justify-content:flex-start;
justify-content: flex-start;
position: relative;
z-index:10;
.appList_left{
img{
width: 80px;
height: 80px;
margin-top: 30px;
z-index: 10;
&:last-child .appList_right {
border-bottom: 0 !important;
}
.appList_left {
padding-left:20px ;
img {
width: 80px;
height: 80px;
margin-top: 30px;
}
}
.appList_right{
.appList_right {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-top: 1px solid #e6e6e6;
min-height:140px;
border-bottom: 1px solid #e6e6e6;
min-height: 140px;
width: 709px;
margin-left: 59px;
.left{
.left {
margin-right: 100px;
margin-top: 35px;
.num{
font-size: 60px;
line-height: 30px;
color: #AA1941;
.num {
margin-top: 10px;
font-size: 60px;
line-height: 30px;
color: #aa1941;
}
.tit{
.tit {
font-size: 22px;
font-weight: 300;
line-height: 34px;
color: #777;
margin-top: 4px;
margin-top: 10px;
min-width: 88px;
}
}
.right{
.right {
width: 709px;
margin-top: 30px;
.applyItem{
display: flex;
align-items:flex-start;
flex-direction: column;
.applyItem_nums{
text-indent: 21px;
.applyItem_tit{
display: flex;
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;
}
}
}
}
margin-bottom: 30px;
.applyItem {
display: flex;
align-items: flex-start;
flex-direction: column;
.applyItem_nums {
text-indent: 7px;
.applyItem_tit {
display: flex;
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: 30px;
font-size: 16px;
font-weight: 300;
line-height: 32px;
color: #424242;
.applyItemNum {
list-style-type: decimal;
text-indent: 0;
}
}
}
}
}
}
}
......@@ -293,109 +319,114 @@ export default {
line-height: 0.24rem;
color: #424242;
padding-top: 0.14rem;
::v-deep{
span{
::v-deep {
span {
font-weight: bold;
}
}
}
}
}
.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;
}
.apply {
width: 4.5rem;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
z-index: 15;
margin-top: 0.24rem;
.line1 {
width: 0.01rem;
height: 4.5rem;
border: 1px dashed #aa1941;
position: absolute;
top: 7rem;
left: 0.4rem;
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;
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-bottom: 1px solid #e6e6e6;
min-height: 0.7rem;
width: 3.04rem;
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;
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;
}
.right {
width: 3.5rem;
margin-top: 0.15rem;
.applyItem {
.applyItem_nums {
text-indent: 0.11rem;
.applyItem_tit {
display: flex;
justify-content: flex-start;
font-size: 0.14rem;
font-weight: 300;
line-height: .17rem;
color: #777;
margin-top: .02rem;
text-align: left;
line-height: 0.16rem;
color: #424242;
.circle {
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;
.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: .3rem;
font-size: .12rem;
font-weight: 300;
line-height: .16rem;
color: #424242;
.applyItemNum{
list-style-type:decimal;
}
}
}
}
.applyItemNum_con {
margin-left: 0.3rem;
font-size: 0.12rem;
font-weight: 300;
line-height: 0.16rem;
color: #424242;
.applyItemNum {
list-style-type: decimal;
text-indent: 0;
}
}
}
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论