From 3a918cc9a8146d1dad694e18bf316c37c5b0451e Mon Sep 17 00:00:00 2001 From: chutingting Date: Thu, 11 Jan 2024 01:25:30 +0800 Subject: [PATCH] edit css --- src/views/article/details.vue | 10 +++++----- src/views/article/list.vue | 10 +++++----- src/views/information/index.vue | 11 ++++++----- src/views/metadaily/index.vue | 15 ++++++++------- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/views/article/details.vue b/src/views/article/details.vue index 3f79d5c..973e082 100644 --- a/src/views/article/details.vue +++ b/src/views/article/details.vue @@ -137,13 +137,13 @@ export default { display: flex; justify-content: center; .content { - width: 70%; + width: 1200px; margin: 50px 0 50px 0; display: flex; justify-content: space-between; .list { - padding: 10px; - width: 76%; + padding: 30px; + width: 820px; background-color: #FFFFFF; .article { display: flex; @@ -190,14 +190,14 @@ export default { } } .right { - width: 21%; + width: 300px; display: flex; justify-content: space-between; flex-direction: column; .rtop, .rbottom { background-color: #FFFFFF; - height: 49%; width: 100%; + margin-bottom: 20px; .title { background-image: url('../../assets/airtlctl.png'); background-position: 0 0; /* 调整这些值来改变显示的部分 */ diff --git a/src/views/article/list.vue b/src/views/article/list.vue index 9b9643b..67c081e 100644 --- a/src/views/article/list.vue +++ b/src/views/article/list.vue @@ -148,13 +148,13 @@ export default { display: flex; justify-content: center; .content { - width: 70%; + width: 1200px; margin: 50px 0 50px 0; display: flex; justify-content: space-between; .list { - padding: 10px; - width: 76%; + padding: 30px; + width: 820px; background-color: #FFFFFF; .article { display: flex; @@ -201,13 +201,13 @@ export default { } } .right { - width: 21%; + width: 300px; display: flex; justify-content: space-between; flex-direction: column; .rtop, .rbottom { background-color: #FFFFFF; - height: 49%; + margin-bottom: 20px; width: 100%; .title { background-image: url('../../assets/airtlctl.png'); diff --git a/src/views/information/index.vue b/src/views/information/index.vue index 843c728..881cdc4 100644 --- a/src/views/information/index.vue +++ b/src/views/information/index.vue @@ -281,7 +281,7 @@ export default { justify-content: center; align-items: center; img { - width: 90%; + width: 560px; } .newsTitle{ position: absolute; @@ -303,6 +303,7 @@ export default { flex-direction: column; align-items: center; flex: 1; + margin-left: 35px; #htitle { display: flex; justify-content: space-between; @@ -338,7 +339,6 @@ export default { } #hotList { height: 76%; - width: 90%; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -394,19 +394,20 @@ export default { display: flex; justify-content: center; align-items: center; + margin-left: 20px; img { - width: 90%; + width: 560px; } .newsTitle{ position: absolute; bottom: 5%; - left: 5%; + left: 0; display: inline-block; font-size: 18px; font-weight: bold; color: #FFFFFF; line-height: 48px; - width: 90%; + width: 100%; background-color: #0000007e; } } diff --git a/src/views/metadaily/index.vue b/src/views/metadaily/index.vue index 5d13291..e34055a 100644 --- a/src/views/metadaily/index.vue +++ b/src/views/metadaily/index.vue @@ -282,19 +282,19 @@ export default { justify-content: center; align-items: center; img { - width: 90%; + width: 560px; //height: 90%; } .newsTitle{ position: absolute; bottom: 5%; - left: 5%; + left: 0; display: inline-block; font-size: 18px; font-weight: bold; color: #FFFFFF; line-height: 48px; - width: 90%; + width: 100%; background-color: #0000007e; } } @@ -305,6 +305,7 @@ export default { flex-direction: column; align-items: center; flex: 1; + margin-left: 35px; #htitle { display: flex; justify-content: space-between; @@ -341,7 +342,6 @@ export default { #hotList { //height: 90%; height: 76%; - width: 90%; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -396,20 +396,21 @@ export default { display: flex; justify-content: center; align-items: center; + margin-left: 20px; img { - width: 90%; + width: 560px; //height: 90%; } .newsTitle{ position: absolute; bottom: 5%; - left: 5%; + left: 0; display: inline-block; font-size: 18px; font-weight: bold; color: #FFFFFF; line-height: 48px; - width: 90%; + width: 100%; background-color: #0000007e; } }