From 7b93f37ee75fb694e2fd04288154c308e837b704 Mon Sep 17 00:00:00 2001 From: dongqian <3475123872@qq.com> Date: Fri, 4 Jul 2025 15:07:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E9=A2=98=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AiEmotion.vue | 172 ++++++++++++----------------- src/views/components/marketTemperature.vue | 7 +- 2 files changed, 75 insertions(+), 104 deletions(-) diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index ca207e3..df0ae07 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -1449,21 +1449,30 @@ defineExpose({ .class003 { padding-top: 8%; - padding-left: 10%; + /* padding-left: 10%; */ display: flex; - flex-direction: column; - gap: 1rem; + align-items: center; + justify-content: center; + gap: 25vw; + /* flex-direction: column; */ + /* gap: 1rem; */ +} + + +.img01 { + width: 11vw; + /* height: auto; */ } .div00 { display: flex; - flex-direction: row; - gap: 2%; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; - width: 100%; - box-sizing: border-box; + flex-direction: column; + /* 竖向排列元素 */ + /* margin-left: 15%; */ + gap: 30px; + /* margin-top: -12%; */ + /* width: 100%; */ + /* height: auto; */ } .div00::after { @@ -1476,7 +1485,8 @@ defineExpose({ background-image: url('@/assets/img/AiEmotion/redBorder.png'); background-repeat: no-repeat; background-size: 100% 100%; - width: 35%; + /* width: 50%; */ + width: 30vw; min-width: 200px; min-height: 40px; text-align: center; @@ -1492,7 +1502,8 @@ defineExpose({ background-image: url('@/assets/img/AiEmotion/blueBorder.png'); background-repeat: no-repeat; background-size: 100% 100%; - width: 35%; + /* width: 35%; */ + width: 30vw; min-width: 200px; min-height: 40px; text-align: center; @@ -1732,31 +1743,35 @@ defineExpose({ .class0502 { padding-top: 7%; display: flex; + justify-content: center; + align-items: center; flex-direction: column; /* 竖向排列元素 */ gap: 1rem; - margin-left: 2rem; + /* margin-left: 2rem; */ } .class0601 { padding-top: 5rem; display: flex; + justify-content: center; + align-items: center; flex-direction: column; /* 竖向排列元素 */ gap: 1rem; - margin-left: 2rem; + /* margin-left: 2rem; */ } .img03 { width: 10%; height: auto; - margin-left: 43%; + /* margin-left: 43%; */ } .img04 { width: 10%; height: auto; - margin-left: 43%; + /* margin-left: 43%; */ } .class0701 { @@ -1795,36 +1810,38 @@ defineExpose({ padding-top: 5rem; display: flex; flex-direction: column; + justify-content: center; + align-items: center; /* 竖向排列元素 */ gap: 1rem; - margin-left: 2rem; + /* margin-left: 2rem; */ } .img02 { width: 10%; height: auto; - margin-left: 43%; + /* margin-left: 43%; */ } .title2 { color: white; font-size: 20px; font-weight: bold; - margin-left: 45%; + /* margin-left: 45%; */ } .title3 { color: white; font-size: 20px; font-weight: bold; - margin-left: 44.6%; + /* margin-left: 44.6%; */ } .title4 { color: white; font-size: 20px; font-weight: bold; - margin-left: 44%; + /* margin-left: 44%; */ } .class09 { @@ -1973,9 +1990,10 @@ defineExpose({ .content1 { display: flex; flex-direction: column; + align-items: center; /* 竖向排列元素 */ - gap: 1rem; - margin-left: 10%; + /* gap: 1rem; */ + /* margin-left: 10%; */ } .title1 { @@ -1986,21 +2004,8 @@ defineExpose({ } -.img01 { - width: 10%; - height: auto; -} -.div00 { - display: flex; - flex-direction: column; - /* 竖向排列元素 */ - margin-left: 15%; - gap: 1rem; - margin-top: -12%; - width: 100%; - height: auto; -} + .span02 { font-size: 1.5rem; @@ -2195,23 +2200,6 @@ defineExpose({ padding: 0.6rem; } - .class003 { - padding-top: 6%; - padding-left: 5%; - } - - .div00 { - gap: 1%; - justify-content: center; - } - - .class003 .div01, - .class003 .div02 { - width: 45%; - min-width: 180px; - font-size: 20px; - } - /* 调整图表容器高度 */ .class00 { min-height: 40rem; @@ -2275,7 +2263,7 @@ defineExpose({ background-repeat: no-repeat; background-size: contain; text-align: center; - width:100%; + width: 100%; margin-top: 4%; height: 200px; min-height: 200px; @@ -2341,9 +2329,9 @@ defineExpose({ .img01 { height: auto; - margin-left: 7%; - width: 25%; - margin-top: 10px; + /* margin-left: 7%; */ + width: 15vw; + /* margin-top: 10px; */ } .title1 { @@ -2367,10 +2355,6 @@ defineExpose({ height: auto; } - .class03 .class003 { - padding-top: 3rem; - padding-left: 0rem; - } .class01 { min-height: 100px; @@ -2416,7 +2400,7 @@ defineExpose({ .img02 { width: 25%; height: auto; - margin-left: 32%; + /* margin-left: 32%; */ } .class0401 { @@ -2427,7 +2411,7 @@ defineExpose({ .img04 { width: 25%; height: auto; - margin-left: 33%; + /* margin-left: 33%; */ } .text-container p { @@ -2653,42 +2637,31 @@ defineExpose({ padding: 5%; } + .class003 { + padding-top: 12%; + gap: 20vw; + } + .div00 { display: flex; flex-direction: column; - margin-left: 5rem; + /* margin-left: 5rem; */ gap: 0; - margin-top: -6rem; - width: 100%; + /* margin-top: -6rem; */ + /* width: 100%; */ height: auto; } - .class003 .div01 { - background-repeat: no-repeat; - background-size: 100% 100%; - width: 35%; - min-height: 25px; - float: left; - margin-left: 100px; - text-align: center; - margin-top: 10px; - font-size: 10px; - color: white; - } + .class003 .div01, .class003 .div02 { - background-repeat: no-repeat; - background-size: 100% 100%; - width: 35%; - min-height: 25px; - float: left; - margin-left: 100px; - text-align: center; - margin-top: 10px; - font-size: 10px; - color: white; + /* width: 80%; */ + min-width: 250px; + font-size: 16px; + min-height: 35px; } + .span01 { /* 使用导入的背景图片 */ background-image: url('@/assets/img/AiEmotion/bk01.png'); @@ -2713,25 +2686,12 @@ defineExpose({ padding-top: 10%; } - .class003 { - padding-top: 4%; - padding-left: 2%; - } - .div00 { flex-direction: column; gap: 1rem; align-items: center; } - .class003 .div01, - .class003 .div02 { - width: 80%; - min-width: 250px; - font-size: 16px; - min-height: 35px; - } - .span01 { width: 60%; font-size: 1.2rem; @@ -2766,9 +2726,15 @@ defineExpose({ align-items: center; } + .class003{ + padding-top: 14%; + gap: 30px; + } + .class003 .div01, .class003 .div02 { - width: 90%; + /* width: 90%; */ + width: 10vw; min-width: 200px; font-size: 14px; min-height: 30px; diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index 79e5c13..f4e8df8 100644 --- a/src/views/components/marketTemperature.vue +++ b/src/views/components/marketTemperature.vue @@ -698,7 +698,7 @@ defineExpose({ initChart }); } .market-temperature { - min-height: 100vh; + /* min-height: 100vh; */ /* background-color: rgb(0, 22, 65); */ } @@ -747,6 +747,11 @@ defineExpose({ initChart }); /* 手机端适配样式 */ @media only screen and (max-width: 768px) { + + .container{ + padding-bottom:16% + } + .KlineClass { width: 100%; height: 300px;