#newList { width: 100%; height: 100%; background: url("../assets/partTwo/bg_two.png") center no-repeat; background-size: cover; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; &::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: url("../assets/mask/mask.png") center no-repeat; background-size: cover; } a { text-decoration: none; } .newsListContainer { font-family: Microsoft YaHei, 微软雅黑, Microsoft JhengHei, 华文细黑, STHeiti, MingLiu; // background: rgba(0, 0, 0, 0.6); position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 80%; z-index: 2; } .listNav { display: flex; justify-content: space-around; font-size: 24px; padding: 0; margin-top: 16px; color: #fff9e9; width: 60%; margin: 0 auto; .item { &.listNavActived, &:hover { position: relative; &::after { content: ""; width: 116px; height: 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background: url("../assets/partTwo/new_active.png") center no-repeat; background-size: contain; } } cursor: pointer; margin-right: 32px; } } .listContent { margin: 34px 0; width: 100%; min-height: 384px; .listItem { width: 100%; display: flex; align-items: center; padding: 30px 0 10px; border-bottom: 1px solid #bda0c4; color: #fff9e9; cursor: pointer; } .pic { font-size: 18px; padding: 2px 10px; font-family: "Microsoft Yahei"; text-align: center; color: #fff9e9; font-size: 14px; background: #7db6e3; border-radius: 5px; position: relative; } .notice { background: #dd3580; } .activity { background: #dfb078; } .trends { background: #c56be1; } .title { color: #fff9e9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; width: 82%; margin-left: 10px; } .date { font-size: 12px; position: absolute; right: 0px; color: #fff9e9; } .none { font-size: 24px; color: #fff9e9; text-align: center; margin-top: 50px; } } } .nav_btn { width: 128px; height: 116px; position: fixed; top: 46px; left: 0; z-index: 2; }