// 新闻类型 .news-titile-pos-box { width: 100%; display: flex; justify-content: center; margin: 50px 0; .news-title-box { display: flex; align-items: center; .news-title { font-size: 24px; font-weight: bold; cursor: pointer; transition: .4s; } .news-title:hover { color: #f08519; } .news-title-active { color: #f08519; } .news-title-line { width: 1px; height: 36px; background-color: #999999; margin: 0 30px; } } } // 新闻内容盒子 .news-contianer { margin: 0px auto; height: 300px; width: 80%; display: flex; align-items: center; padding: 10px 35px; transition: .4s; cursor: pointer; margin-bottom: 35px; } .news-contianer:hover { box-shadow: 0 0 15px 1px #e5e4e4; } .news-content-box { height: 65%; width: 100%; display: flex; overflow: hidden; } .news-cover-box { overflow: hidden; margin-right: 20px; height: 100%; width: 25%; object-fit: cover; img { height: 100%; width: 100%; object-fit: cover; } } .news-content-right-box { width: 70%; } .news-title { font-weight: normal; font-size: 18px; letter-spacing: 1px; color: rgb(51, 51, 51); } .news-time { font-size: 14px; color: rgb(153, 153, 153); margin: 15px 0px; } .news-intro { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 24px; color: rgb(102, 102, 102); width: 100%; text-align: justify; line-height: 22px; } // ted栏 .Top_navigation { display: flex; justify-content: center; z-index: 9; position: relative; } // 分页 .page-box { width: 100%; display: flex; justify-content: center; .page { margin-bottom: 80px; } } .news-content-sublevel { display: flex; justify-content: space-between; } .jump { text-decoration: dashed; color: black; } .btn-box { position: relative; } .btn-box{ position: relative; } %test { position: absolute; content: ''; transition: all .5s; } .press-button { position: absolute; right: 0; cursor: pointer; display: inline-block; padding: 20px 40px; color: white; transform: translate(0, 0); vertical-align: middle; font-family: 'Rubik One', sans-serif; text-decoration: none; font-size: 20px; transition: all .5s; background-color: #3498db; &::before { @extend %test; bottom: -15px; height: 15px; width: 100%; left: 8px; transform: skewX(45deg); background-color: darken(#3498db, 20%); } &::after { @extend %test; right: -15px; height: 100%; width: 15px; bottom: -8px; transform: skewY(45deg); background-color: darken(#3498db, 30%); } &:active { margin-left: 10px; margin-top: 10px; &::before { bottom: -5px; height: 5px; left: 3px; } &::after { right: -5px; width: 5px; bottom: -3px; } } }