手机端适配

src/views/AiEmotion.vue

@@ -321,7 +321,7 @@ function renderCharts(data) {
         // 深拷贝数据避免污染原始数据
         const clonedData = JSON.parse(JSON.stringify(data));
         console.log('已深拷贝数据，避免污染原始数据');
-        
+
         // 渲染股市温度计图表
         if (marketTemperatureRef.value && clonedData.GSWDJ) {
           console.log("开始渲染股市温度计图表");
@@ -384,8 +384,8 @@ onMounted(() => {
 
 <style scoped>
 .class003 {
-  padding-top: 7rem;
-  padding-left: 12rem;
+  padding-top: 8%;
+  padding-left: 10%;
 }
 
 .class003 .div02 {
@@ -395,8 +395,8 @@ onMounted(() => {
   width: 35%;
   min-height: 40px;
   float: left;
-  margin-left: 100px;
-  margin-top: 30px;
+  margin-left: 9%;
+  margin-top: 2%;
   text-align: center;
   font-size: 24px;
   color: white;
@@ -409,9 +409,8 @@ onMounted(() => {
   width: 35%;
   min-height: 40px;
   float: left;
-  margin-left: 100px;
+  margin-left: 9%;
   text-align: center;
-  margin-top: 10px;
   font-size: 24px;
   color: white;
 }
@@ -450,10 +449,9 @@ onMounted(() => {
 .bk-image {
   background-image: url("@/assets/img/AiEmotion/bk03.png");
   background-size: 100% 100%;
-  /* background-position: center; */
   background-repeat: no-repeat;
   width: 95%;
-  height: 30rem;
+  height: auto;
   margin: 0 auto;
   margin-top: 20px;
 }
@@ -461,22 +459,15 @@ onMounted(() => {
 /* 最后文字的颜色 */
 .text-container {
   position: relative;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: white;
-  /* 设置文字颜色 */
   text-align: left;
-  /* 文字居中对齐 */
-  padding: 20px;
+  padding: 3%;
 }
 
 .text-container p {
-  margin: 10px 0;
-  /* 设置段落间距 */
+  margin: 0 auto;
   font-size: 40px;
-  /* 设置字体大小 */
-  margin-left: 50px;
+  margin-left: 10%;
 }
 
 .class07 {
@@ -503,6 +494,8 @@ onMounted(() => {
 .class0702 {
   margin: 0 auto;
   width: fit-content;
+  margin-top: 2%;
+  margin-bottom: 1%;
 }
 
 /* .class0503 {
@@ -514,11 +507,6 @@ onMounted(() => {
   margin: 0 auto;
 }
 
-.class0601 {
-  padding-top: 5rem;
-  text-align: center;
-  padding-bottom: 6rem;
-}
 
 .class0603 {
   min-width: 100%;
@@ -527,8 +515,7 @@ onMounted(() => {
 }
 
 .class0502 {
-  padding-top: 5rem;
-  text-align: center;
+  padding-top: 7%;
   display: flex;
   flex-direction: column;
   /* 竖向排列元素 */
@@ -538,7 +525,6 @@ onMounted(() => {
 
 .class0601 {
   padding-top: 5rem;
-  text-align: center;
   display: flex;
   flex-direction: column;
   /* 竖向排列元素 */
@@ -547,15 +533,15 @@ onMounted(() => {
 }
 
 .img03 {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 40rem;
+  width: 10%;
+  height: auto;
+  margin-left: 43%;
 }
 
 .img04 {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 40rem;
+  width: 10%;
+  height: auto;
+  margin-left: 43%;
 }
 
 .class0701 {
@@ -566,26 +552,32 @@ onMounted(() => {
 .class0501 {
   margin: 0 auto;
   width: fit-content;
+  margin-top: 2%;
+  margin-bottom: 1%;
 }
 
 .class0403 {
   margin: 0 auto;
   width: fit-content;
+  margin-top: 2%;
+  margin-bottom: 1%;
 }
 
 .class0301 {
   margin: 0 auto;
   width: fit-content;
+  margin-top: 2%;
+  margin-bottom: 1%;
 }
 
 .class0201 {
   margin: 0 auto;
   width: fit-content;
+  margin-bottom: 1%;
 }
 
 .class0401 {
   padding-top: 5rem;
-  text-align: center;
   display: flex;
   flex-direction: column;
   /* 竖向排列元素 */
@@ -594,30 +586,30 @@ onMounted(() => {
 }
 
 .img02 {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 40rem;
+  width: 10%;
+  height: auto;
+  margin-left: 43%;
 }
 
 .title2 {
   color: white;
-  font-size: 2rem;
+  font-size: 30px;
   font-weight: bold;
-  margin-left: -4rem;
+  margin-left: 42%;
 }
 
 .title3 {
   color: white;
-  font-size: 2rem;
+  font-size: 30px;
   font-weight: bold;
-  margin-left: -4rem;
+  margin-left: 41%;
 }
 
 .title4 {
   color: white;
   font-size: 2rem;
   font-weight: bold;
-  margin-left: -4rem;
+  margin-left: 41.5%;
 }
 
 .class09 {
@@ -628,10 +620,10 @@ onMounted(() => {
 .scaled-img {
   transform: scale(2.5);
   text-align: center;
+  margin-top: 8%;
 }
 
 .lz-img {
-  margin-bottom: 10rem;
   text-align: center;
   padding-top: 70px;
 }
@@ -734,31 +726,31 @@ onMounted(() => {
   flex-direction: column;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  margin-left: 10%;
 }
 
 .title1 {
   color: white;
-  font-size: 2.5rem;
+  font-size: 30px;
   font-weight: bold;
-  margin-left: -1rem;
+  margin-left: 0%;
 
 }
 
 .img01 {
-  width: 10rem;
-  height: 10rem;
+  width: 10%;
+  height: auto;
 }
 
 .div00 {
   display: flex;
   flex-direction: column;
   /* 竖向排列元素 */
-  margin-left: 30rem;
+  margin-left: 37%;
   gap: 1rem;
-  margin-top: -10rem;
-  width: 70rem;
-  height: 10rem;
+  margin-top: -12%;
+  width: 100%;
+  height: auto;
 }
 
 .span02 {
@@ -789,13 +781,12 @@ onMounted(() => {
 }
 
 .class01 {
-  width: 90%;
+  width: 100%;
   /* 固定容器宽度 */
   min-height: 100px;
   /* 设置最小高度，确保初始显示 */
   height: auto;
   /* 高度根据内容动态变化 */
-  padding: 40px;
   /* 添加内边距，确保内容与边界有间距 */
   box-sizing: border-box;
   /* 包括内边距在宽度和高度计算中 */
@@ -888,6 +879,37 @@ onMounted(() => {
 
 /* 手机端适配样式 */
 @media only screen and (max-width: 768px) {
+  .title4 {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    margin-left: 28%;
+  }
+
+  .class0603 {
+    min-width: 100%;
+    margin-top: 25%;
+  }
+
+  .scaled-img {
+    transform: scale(1.5);
+    text-align: center;
+    margin-top: 6%;
+  }
+
+  .title3 {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    margin-left: 30%;
+  }
+
+  .title2 {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    margin-left: 30%;
+  }
 
   /* 图片样式 */
   .golden-wheel img {
@@ -961,8 +983,9 @@ onMounted(() => {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 132%;
-    margin-left: -45px;
+    width: 100%;
+    /* margin-left: -45px; */
+    height: auto;
   }
 
   .class03 .class003 {
@@ -975,36 +998,29 @@ onMounted(() => {
     height: auto;
     box-sizing: border-box;
     background-color: #5e81a7;
-    margin: 0 auto;
     margin-bottom: 10rem;
   }
 
   .class04 {
-    width: 126%;
-    /* min-height: 51rem; */
-    margin-left: -39px;
+    width: 100%;
+    height: auto;
     min-height: 38rem;
+    /* min-height: 51rem; */
+    /* margin-left: -39px; */
+    /* min-height: 38rem; */
   }
 
   .class02 .container img {
     width: 68%;
     height: auto;
-    margin-top: -15px;
-    margin-left: -2rem;
-  }
-
-
-  .title2,
-  .title3,
-  .title4 {
-    font-size: 10px;
-    margin-left: -3rem;
+    margin-top: 5%;
+    margin-left: 0%;
   }
 
   .img02 {
     width: 25%;
     height: auto;
-    margin-left: 6rem;
+    margin-left: 32%;
   }
 
   .class0401 {
@@ -1015,20 +1031,21 @@ onMounted(() => {
   .img04 {
     width: 25%;
     height: auto;
-    margin-left: 6rem;
+    margin-left: 33%;
   }
 
   .text-container p {
-    font-size: 10px;
+    font-size: 20px;
   }
 
   .lz-img {
-    margin-bottom: 3rem;
-    padding-top: 20px;
+    margin-bottom: 0;
+    padding-top: 0;
 
     img {
-      width: 45%;
+      width: 30%;
       height: auto;
+      margin-top: 5%;
     }
   }
 
@@ -1045,41 +1062,37 @@ onMounted(() => {
   .bk-image {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 126%;
-    height: 15rem;
+    width: 100%;
+    height: auto;
     margin: 0 auto;
     margin-top: 0px;
-    margin-left: -40px;
+    margin-left: 0;
   }
 
   .class05 {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 127%;
+    width: 100%;
     height: auto;
     min-height: 45rem;
-    margin-left: -41px;
   }
 
   .class06 {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 127%;
+    width: 100%;
     height: auto;
     min-height: 32rem;
     margin: 0 auto;
-    margin-left: -41px;
-
   }
 
   .text-container {
     position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
     color: white;
     text-align: left;
-    padding: 20px;
+    padding: 5%;
   }
 
   .div00 {
@@ -1118,13 +1131,6 @@ onMounted(() => {
     color: white;
   }
 
-  /* 
-    .container {
-        max-width: 80vw;
-        width: 100%;
-        height: auto;
-    } */
-
   .span01 {
     /* 使用导入的背景图片 */
     background-size: 100% 100%;
@@ -1137,16 +1143,16 @@ onMounted(() => {
     /* 添加内边距以显示内容 */
     color: #fff;
     /* 设置文字颜色以确保可读性 */
-    font-size: 13px;
+    font-size: 14px;
     /* 增加字体大小以便更清晰显示股票名称 */
     text-align: center;
     transform: translate(-50%, -50%);
-    margin-left: -5rem;
+    margin-left: 33%;
   }
 
   .class0502,
   .class0601 {
-    padding-top: 3rem;
+    padding-top: 10%;
   }
 }
 </style>

src/views/components/emotionDecod.vue

@@ -181,7 +181,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         data: [0, 1, 2, 3], // 倒序显示
         axisLine: { lineStyle: { color: "#8392A5" } },
         axisLabel: {
-          show: true, // 显示刻度标签
+          show: false, // 显示刻度标签
           color: "#fff", // 白色文字
           backgroundColor: "transparent",
           fontSize: 12,

src/views/components/marketTemperature.vue

@@ -163,13 +163,13 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
     console.error('initChart: raw, klineDataRawValue or WDRLValue is undefined')
     return
   }
-  
+
   // 如果已存在图表实例，先销毁
   if (chartInstance) {
     chartInstance.dispose()
     chartInstance = null
   }
-  
+
   // 处理 K 线图数据
   const klineData = klineDataRawValue.map(item => {
     const open = item[1]
@@ -333,9 +333,9 @@ defineExpose({ initChart })
 
 .container {
   margin: 0 auto;
-  padding: 20px;
+  /* padding: 20px; */
   max-width: 80vw;
-  padding-bottom: 7rem;
+  padding-bottom: 10%;
 }
 
 .border3 {
@@ -352,7 +352,7 @@ defineExpose({ initChart })
   border-radius: 8px;
   padding: 20px;
   width: 80%;
-  margin-left: 7rem;
+  margin-left: 8%;
 }
 
 /* 手机端适配样式 */
@@ -366,8 +366,8 @@ defineExpose({ initChart })
     margin-top: 0px;
     border-radius: 8px;
     padding: 0px;
-    width: 108%;
-    margin-left: -8px;
+    width: 100%;
+    margin-left: 0%;
     height: auto;
   }
 
@@ -397,6 +397,7 @@ defineExpose({ initChart })
   .WDRL_data {
     font-size: 3vw;
   }
+
   .el-table .cell {
     box-sizing: border-box;
     line-height: 23px;
@@ -406,6 +407,6 @@ defineExpose({ initChart })
     text-overflow: ellipsis;
     white-space: normal;
     text-align: center;
-}
+  }
 }
 </style>