diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index a185d4c..834b678 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -1461,21 +1461,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 { @@ -1488,7 +1497,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; @@ -1504,7 +1514,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; @@ -1744,31 +1755,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 { @@ -1807,36 +1822,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 { @@ -1985,9 +2002,10 @@ defineExpose({ .content1 { display: flex; flex-direction: column; + align-items: center; /* 竖向排列元素 */ - gap: 1rem; - margin-left: 10%; + /* gap: 1rem; */ + /* margin-left: 10%; */ } .title1 { @@ -1998,21 +2016,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; @@ -2208,23 +2213,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; @@ -2288,7 +2276,7 @@ defineExpose({ background-repeat: no-repeat; background-size: contain; text-align: center; - width:100%; + width: 100%; margin-top: 4%; height: 200px; min-height: 200px; @@ -2354,9 +2342,9 @@ defineExpose({ .img01 { height: auto; - margin-left: 7%; - width: 25%; - margin-top: 10px; + /* margin-left: 7%; */ + width: 15vw; + /* margin-top: 10px; */ } .title1 { @@ -2380,10 +2368,6 @@ defineExpose({ height: auto; } - .class03 .class003 { - padding-top: 3rem; - padding-left: 0rem; - } .class01 { min-height: 100px; @@ -2429,7 +2413,7 @@ defineExpose({ .img02 { width: 25%; height: auto; - margin-left: 32%; + /* margin-left: 32%; */ } .class0401 { @@ -2440,7 +2424,7 @@ defineExpose({ .img04 { width: 25%; height: auto; - margin-left: 33%; + /* margin-left: 33%; */ } .text-container p { @@ -2666,42 +2650,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'); @@ -2726,25 +2699,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; @@ -2779,9 +2739,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/emotionDecod.vue b/src/views/components/emotionDecod.vue index 3b8fd3a..a7abc74 100644 --- a/src/views/components/emotionDecod.vue +++ b/src/views/components/emotionDecod.vue @@ -251,7 +251,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { shadowOffsetX: 2, shadowOffsetY: 2, }, - bottom: "10%", // 下移数据缩放滑块 + bottom: window.innerWidth > 768 ? "10%" : "5%", // 下移数据缩放滑块 }, { show: !1, @@ -457,7 +457,7 @@ onBeforeUnmount(() => { width: 100%; height: 800px; margin: 0; - top: 5rem; + /* top: 5rem; */ box-sizing: border-box; overflow: hidden; } @@ -468,7 +468,7 @@ onBeforeUnmount(() => { width: 100%; height: 400px; margin: 0; - top: 5rem; + /* top: 5rem; */ } .qxjmqbox { diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index 79e5c13..b7aaee0 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); */ } @@ -707,13 +707,17 @@ defineExpose({ initChart }); /* padding: 20px; */ max-width: 80vw; padding-bottom: 10%; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; } .border3 { margin-top: 40px; border-radius: 8px; padding: 20px; - margin-left: 0; + /* margin-left: 0; */ width: 100%; height: 100%; box-sizing: border-box; @@ -725,7 +729,7 @@ defineExpose({ initChart }); border-radius: 8px; padding: 20px; width: 80%; - margin-left: 8%; + /* margin-left: 8%; */ height: 48vw; overflow: visible; } @@ -747,6 +751,11 @@ defineExpose({ initChart }); /* 手机端适配样式 */ @media only screen and (max-width: 768px) { + + .container{ + padding-bottom:16% + } + .KlineClass { width: 100%; height: 300px; @@ -786,8 +795,8 @@ defineExpose({ initChart }); .border3 { margin-top: 25px; border-radius: 8px; - padding: 20px; - margin-left: -13px; + padding: 10px 0px; + /* margin-left: -13px; */ width: 100%; height: 100%; }