From 0e2ab39068c6a49ab133feb76fbc0ce4609e3c16 Mon Sep 17 00:00:00 2001 From: chutingting Date: Wed, 10 Jan 2024 22:28:30 +0800 Subject: [PATCH] edit css --- src/views/information/index.vue | 58 ++++++++++-------- src/views/metadaily/index.vue | 105 ++++++++++++++++++++++---------- 2 files changed, 105 insertions(+), 58 deletions(-) diff --git a/src/views/information/index.vue b/src/views/information/index.vue index 081be44..129ebf9 100644 --- a/src/views/information/index.vue +++ b/src/views/information/index.vue @@ -166,8 +166,9 @@ export default { for (const iter of data.list) { this.carouselList.push({ src: iter.image, - title: iter.link, - subtitle: iter.link + title: iter.title, + subtitle: iter.subtitle, + link: iter.link }) } } @@ -259,6 +260,7 @@ export default { align-items: center; flex-direction: column; justify-content: center; + padding-bottom: 30px; .content { width: 1200px; height: 90%; @@ -270,18 +272,16 @@ export default { } .top { min-height: 470px; - margin-bottom: 40px; background-color: #FFFFFF; display: flex; #imgtxt { - width: 55%; + width: 560px; position: relative; display: flex; justify-content: center; align-items: center; img { width: 90%; - height: 90%; } .newsTitle{ position: absolute; @@ -337,7 +337,7 @@ export default { } } #hotList { - height: 90%; + height: 76%; width: 90%; display: flex; flex-wrap: wrap; @@ -348,15 +348,22 @@ export default { flex-direction: column; align-items: center; justify-content: center; - width: 45%; + width: 150px; + margin-right: 39px; img { - width: 140px; - height: 110px; + width: 150px; + height: 112px; + border-radius: 10px; } a { font-size: 14px; font-weight: 400; color: #010101; + margin-top: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 150px; // line-height: 48px; } } @@ -374,8 +381,7 @@ export default { .content { margin-top: 20px; .top { - min-height: 470px; - margin-bottom: 40px; + margin-bottom: 30px; background-color: #FFFFFF; display: flex; background-image: url('../../assets/hotTopLeft.png'); @@ -383,14 +389,13 @@ export default { background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ background-repeat: no-repeat; #imgtxt { - width: 55%; + width: 560px; position: relative; display: flex; justify-content: center; align-items: center; img { width: 90%; - height: 90%; } .newsTitle{ position: absolute; @@ -410,7 +415,7 @@ export default { } #daliay { - height: 700px; + height: 625px; .top { // justify-content: space-between; background-color: #00000000 !important; @@ -449,7 +454,6 @@ export default { } #wk { - height: 700px; .content { background-color: #FFFFFF; display: flex; @@ -461,6 +465,7 @@ export default { justify-content: space-between; align-items: center; width: 93%; + margin-bottom: 20px; .tle { z-index: 9; font-size: 26px; @@ -489,24 +494,19 @@ export default { } } #hotList { - height: 90%; - width: 95%; display: flex; flex-wrap: wrap; - justify-content: space-between; align-items: center; .list { display: flex; - width: 50%; - align-items: center; justify-content: center; - + width: 500px; + margin: 0 40px 34px 33px; .txt { display: flex; flex-direction: column; - margin-left: 10px; + margin-left: 22px; align-items: center; - justify-content: space-between; width: 60%; .title { text-align: left; @@ -514,10 +514,8 @@ export default { font-size: 18px; font-weight: bold; color: #010101; - line-height: 48px; } .subtitle{ - height: 90%; display: inline-block; text-align: left; width: 100%; @@ -525,11 +523,17 @@ export default { font-weight: 400; color: #000000; line-height: 24px; + margin-top: 10px; + display: -webkit-box; /* Safari */ + -webkit-line-clamp: 3; /* Safari and Chrome */ + -webkit-box-orient: vertical; /* Safari and Chrome */ + overflow: hidden; } } img { - width: 160px; - height: 110px; + width: 200px; + height: 150px; + border-radius: 10px; } } } diff --git a/src/views/metadaily/index.vue b/src/views/metadaily/index.vue index 878a51e..8781071 100644 --- a/src/views/metadaily/index.vue +++ b/src/views/metadaily/index.vue @@ -1,5 +1,5 @@