/*导航风格1*/ .menuStyle1 { width: 100%; height: 130px; background: #1C5468; .componentBorder { border-left: 2px dashed #999; border-right: 2px dashed #999; } .menuBoxBg { width: 1200px; height: 130px; background: #1C5468; margin: 0 auto; display: flex; align-items: center; justify-content: center; .menuBox { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; div { width: 12.5%; cursor: pointer; box-sizing: border-box; font-size: 14px; height: 22px; line-height: 22px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: #fff; background: #1C5468; border-right: #002D41 1px solid; border-left: #29799D 1px solid; margin-bottom: 15px; /* 当是第17个及以后的div时去掉margin-bottom */ &:nth-child(n+17) { margin-bottom: 0; } /* 每行的第一个(第1、9、17...个)去掉左边框 */ &:nth-child(8n+1) { border-left: none; } /* 每行的最后一个(第8、16、24...个)去掉右边框 */ &:nth-child(8n) { border-right: none; } /* 最后一行的最后一个(如果总数不是8的倍数)去掉右边框 */ &:last-child { border-right: none; } a { color: #fff; } } } } .menuSectorInputBox { display: flex; align-items: center; justify-content: space-between; font-size: 14px; width: 80%; margin: 0 auto; border-top: none; height: 50px; .menuSectorInputBoxItem { padding: 0 10px; input { margin-right: 10px; } .el-select { margin-right: 10px; } } } .componentMenuBorder { border: 2px dashed #999; } } /*导航风格2*/ .menuStyle2 { width: 100%; height: 130px; background: #A91B33; .componentBorder { border-left: 2px dashed #999; border-right: 2px dashed #999; } .menuBoxBg { width: 1200px; height: 130px; background: #A91B33; margin: 0 auto; display: flex; align-items: center; justify-content: center; .menuBox { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; div { width: 12.5%; cursor: pointer; box-sizing: border-box; font-size: 14px; height: 22px; line-height: 22px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: #fff; background: #A91B33; border-right: #88172A 1px solid; border-left: #DE3350 1px solid; margin-bottom: 15px; /* 当是第17个及以后的div时去掉margin-bottom */ &:nth-child(n+17) { margin-bottom: 0; } /* 每行的第一个(第1、9、17...个)去掉左边框 */ &:nth-child(8n+1) { border-left: none; } /* 每行的最后一个(第8、16、24...个)去掉右边框 */ &:nth-child(8n) { border-right: none; } /* 最后一行的最后一个(如果总数不是8的倍数)去掉右边框 */ &:last-child { border-right: none; } } } } .menuSectorInputBox { display: flex; align-items: center; justify-content: space-between; font-size: 14px; width: 80%; margin: 0 auto; border-top: none; height: 50px; .menuSectorInputBoxItem { padding: 0 10px; input { margin-right: 10px; } .el-select { margin-right: 10px; } } } .componentMenuBorder { border: 2px dashed #999; } }