适配不同的屏幕

142b2cf4 · Tippi.Rao · e0ccc500 · 142b2cf4 · 142b2cf4 · 142b2cf4
Commit 142b2cf4 authored Jun 02, 2023 by Tippi.Rao
--- a/report-multi.css
+++ b/report-multi.css
--- a/report-multi.html
+++ b/report-multi.html
--- a/report.css
+++ b/report.css
--- a/report.html
+++ b/report.html
@@ -107,7 +107,9 @@
          </div>
        </div>
        <div class="invest-wrapper-content invest-wrapper-content-right">
-          <div class="invest-wrapper-left-bracket-big">
+          <div
+            class="invest-wrapper-left-bracket-middle invest-wrapper-left-bracket-big"
+          >
            <img src="./assets/bracket-left-big.png" />
          </div>
          <div class="invest-wrapper-content-first-text">
@@ -128,7 +130,9 @@
          <!--负数-->
          <div class="invest-wrapper-content-green-triangle"></div>
          <!--end-->
-          <div class="invest-wrapper-right-bracket-big">
+          <div
+            class="invest-wrapper-right-bracket-middle invest-wrapper-right-bracket-big"
+          >
            <img src="./assets/bracket-right-big.png" />
          </div>
        </div>
@@ -354,10 +358,10 @@
          <div class="bottom-right"></div>
          <div class="operator-wrapper-content-box-title">水电费单</div>

-          <div class="operator-wrapper-content-box-progress">
+          <div class="electricity-box-progress">
            <div class="pie-chart-area repair-require-info">
              <img src="./assets/electricity-icon.png" />
-              <div class="repair-require-info-text"><span>3.09</span>万元</div>
+              <div class="electricity-info-text"><span>3.09</span>万元</div>
            </div>
            <div class="chart-desc">
              <div class="bar-data">
@@ -426,6 +430,7 @@
      </div>
    </div>
    <script type="text/javascript">
+      var myChart, myChart2;
      $(function () {
        var percent = parseInt($(".mask :first-child").text());
        console.log("percent==", percent);
@@ -487,7 +492,7 @@

        var chartDom = document.getElementById("repair-require");
        console.log("chartDom==", chartDom);
-        var myChart = echarts.init(chartDom);
+        myChart = echarts.init(chartDom);
        var option;

        option = {
@@ -533,7 +538,7 @@

        var chartDom2 = document.getElementById("contract");
        console.log("chartDom==", chartDom2);
-        var myChart = echarts.init(chartDom2);
+        myChart2 = echarts.init(chartDom2);
        var option;

        option = {
@@ -576,7 +581,12 @@
          ],
        };

-        option && myChart.setOption(option);
+        option && myChart2.setOption(option);
+
+        window.onresize = function () {
+          myChart.resize();
+          myChart2.resize();
+        };
      });
    </script>
  </body>

--- a/test.html
+++ b/test.html
+<html>
+  <head>
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+      }
+      .wrapper {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        justify-content: space-between;
+      }
+      .a {
+        width: 460px;
+        height: 100px;
+        background: red;
+      }
+      .b {
+        width: 1000px;
+        height: 100px;
+        background: green;
+      }
+      .c {
+        width: 460px;
+        height: 100px;
+        background: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="a">
+        <div>
+          22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
+        </div>
+      </div>
+      <div class="b">b</div>
+      <div class="c">
+        <div>
+          22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
+        </div>
+      </div>
+    </div>
+  </body>
+</html>