123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- /*导航风格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;
- }
- }
|