|
|
@ -14,10 +14,11 @@ |
|
|
|
'content-right': index % 2 === 1, |
|
|
|
'content-right': index % 2 === 1, |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="content" |
|
|
|
class="content" |
|
|
|
|
|
|
|
style="width: 66%;" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="card-header"> |
|
|
|
<div class="card-header"> |
|
|
|
<span class="headername">{{ item.headername }}</span> |
|
|
|
<span class="headername">{{ item.headername }}</span> |
|
|
|
<router-link :to="{ path: getRouterLink(item.id) }" class="alltext">全部内容</router-link> |
|
|
|
<router-link :to="{ path: getRouterLink(item.id) }" class="alltext">查看全部<i class="el-icon-arrow-right"></i></router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="headercontent">{{ item.content }}</div> |
|
|
|
<div class="headercontent">{{ item.content }}</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
@ -72,7 +73,7 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
@import '../../assets/reset.css'; |
|
|
|
@import '../../assets/reset.css'; |
|
|
|
.header { |
|
|
|
.header { |
|
|
@ -85,24 +86,26 @@ export default { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
height: 380px; |
|
|
|
height: 380px; |
|
|
|
flex-direction: row-reverse; |
|
|
|
flex-direction: row-reverse; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
margin-bottom: 20px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.card-header { |
|
|
|
.card-header { |
|
|
|
height: 50px; |
|
|
|
height: 50px; |
|
|
|
|
|
|
|
margin-bottom: 45px; |
|
|
|
} |
|
|
|
} |
|
|
|
.headercontent { |
|
|
|
.headercontent { |
|
|
|
height: 208px; |
|
|
|
color: #9E9E9E; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
color: #302e2e; |
|
|
|
height: 125px; |
|
|
|
line-height: 20px; |
|
|
|
line-height: 25px; |
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
.content { |
|
|
|
.content { |
|
|
|
flex: 7; |
|
|
|
flex: 7; |
|
|
|
order: 2; |
|
|
|
order: 2; |
|
|
|
margin: 0 15px; |
|
|
|
/*margin: 0 15px;*/ |
|
|
|
padding: 20px; |
|
|
|
padding: 80px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.headername { |
|
|
|
.headername { |
|
|
@ -119,6 +122,11 @@ export default { |
|
|
|
font-weight: 400; |
|
|
|
font-weight: 400; |
|
|
|
color: #d9d9d9; |
|
|
|
color: #d9d9d9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-icon-arrow-right{ |
|
|
|
|
|
|
|
margin-left: 14px; |
|
|
|
|
|
|
|
font-size: 8px;color: #d9d9d9; |
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-image { |
|
|
|
.el-image { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
@ -132,10 +140,15 @@ export default { |
|
|
|
height: 380px; |
|
|
|
height: 380px; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
width: 32.5%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bigbox:nth-child(even) .content { |
|
|
|
.bigbox:nth-child(even) .content { |
|
|
|
order: 1; |
|
|
|
order: 1; |
|
|
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.bigbox:nth-child(odd) .content { |
|
|
|
|
|
|
|
margin-right:20px |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bigbox:nth-child(even) .image { |
|
|
|
.bigbox:nth-child(even) .image { |
|
|
|