.top-header { height: 17rem; width: 100%; position: relative; overflow: hidden; } .top-header.mh { height: 12.52rem; } .top-header.lh { height: 9.1rem; } .top-header-outline { width: 100%; height: 1.5rem; padding: 0 1rem; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 9; background-color: rgba(255, 255, 255, .8); } /* .top-header-outline.isLeave { color: #FFFFFF; } */ .top-header-outline .logo { width: 4.5rem; height: 1.08rem; position: relative; } .top-header-outline .logo img { width: 100%; height: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .top-header-outline .title { height: 1.5rem; line-height: 1.5rem; color: #121212; min-width: 1.92rem; padding: 0 0.2rem; font-size: 0.25rem; text-align: center; letter-spacing: 3px; transition: background-color .6s; font-family: FangZheng_JIAN; cursor: pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top-header-outline .title a { color: #121212; text-decoration:none; display: inline-block; width: 100%; height: 100%; } .top-header-outline .title:hover { background-color: #04DE80; color: #FFFFFF; } .top-header-outline .title:hover a { color: #FFFFFF; } .top-header-outline .title.active, .top-header-outline .title.active a { color: #FFFFFF; background-color: #04DE80; } .top-header .ivu-carousel { width: 100%; height: 17rem; position: absolute; top: 0; left: 0; } .top-header .ivu-carousel-list .ivu-carousel-item img { height: 17rem; width: 100%; object-fit: cover; } .top-header .millde-height { position: absolute; top: 0; left: 0; height: 12.52rem; width: 100%; object-fit: cover; } .top-header .low-height { position: absolute; top: 0; left: 0; height: 9.1rem; width: 100%; object-fit: cover; }