导航栏样式修改+专业概况

dev_2307
暖暖 1 year ago
parent 0dbff4c2a5
commit 2fc58203d9
  1. 12
      ant-design-vue-jeecg/src/views/cms/components/HeaderView.vue
  2. 31
      ant-design-vue-jeecg/src/views/cms/pages/professionalSummary/professionalSummary.vue

@ -74,20 +74,16 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> <style scoped lang="less">
.header { .header {
width: 1920px; width: 100%;
height: 365px; height: 365px;
// background: #2080f7; // background: #2080f7;
position: relative; position: relative;
padding: 0 100px;
.navBox { .navBox {
height: 118px; height: 118px;
width: 1620px;
margin: 0 auto;
// img {
// /*width: 200px;*/
// /*height: 59px;*/
// }
.d-flex { .d-flex {
width: 1080px; width: 67%;
min-width: 1030px;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
a { a {

@ -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 {

Loading…
Cancel
Save