diff --git a/assets/css/business/news/index.scss b/assets/css/business/news/index.scss index 9eb6a79..6718b81 100644 --- a/assets/css/business/news/index.scss +++ b/assets/css/business/news/index.scss @@ -19,12 +19,13 @@ .news-title:hover { color: #f08519; } - .news-title-active{ + + .news-title-active { color: #f08519; } .news-title-line { - width:1px; + width: 1px; height: 36px; background-color: #999999; margin: 0 30px; @@ -33,71 +34,71 @@ } // 新闻内容盒子 -.news-container-box { +.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-big-box { - width: 105%; - display: flex; - // justify-content: center; - // flex-wrap: wrap; +.news-cover-box { + overflow: hidden; + margin-right: 20px; + height: 100%; + width: 25%; + object-fit: cover; - - .news-box { - padding: 20px; - transition: 0.4s; - - .news-s-box { - height: 450px; - border-radius: 10px; - transition: 0.4s; - padding: 20px; - cursor: pointer; - - .jump { - text-decoration: dashed; - color: black; - } - - &:hover { - box-shadow: 0 0 15px 10px rgb(227, 225, 225); - } - - .news-img-box { - width: 100%; - height: 70%; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .news-content-box { - width: 100%; - height: 30%; - display: flex; - flex-direction: column; - justify-content: space-around; - margin-top: 10px; - - .news-content-title { - font-size: 25px; - font-weight: bold; - } - - .news-content-line { - width: 100%; - height: 1px; - background: rgba(204, 204, 204, 1); - } - } - } - } + 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栏 diff --git a/pages/news/[idx]-[page].vue b/pages/news/[idx]-[page].vue index 5ba9419..640a8ef 100644 --- a/pages/news/[idx]-[page].vue +++ b/pages/news/[idx]-[page].vue @@ -1,6 +1,6 @@