大屏首页调整

src/module/databoard/index.vue

 <template>
-  <div class="main">
-    <div class="middle">
-      <display-board class="trade_left" title="营业情况">
-        <div
-          style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
-          <contrast-card :mouseHand="true" v-for="data in yyqk" style="height: 28%;"
-                         @click.native="routerTo('/turnover-detail',paths[data.title])">
-            <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title"
-                                :content="data.amount" :mark="data.unit"/>
-            <div
-              style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
-              <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
-              <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
-              <table-column style="float: left;width: 35%;" :data="data.hb" name="rate"
-                            :cell-style-function="cellStyleFunction"/>
-              <!--              <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'};  if(data.indexOf('+') !== -1){res.color = '#fee064'} res; "/>-->
-            </div>
-          </contrast-card>
-        </div>
+  <div class="container">
+    <div class="left-bar">
+
+      <display-board class="trade_left" title="已开票未收款">
+        <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
       </display-board>
+    </div>
+    <div class="right-container">
+      <div class="right-top">
         <display-board class="trade_middle" title="应收款情况" corner_size="large">
           <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
             <simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
@@ -47,10 +36,7 @@
           </div>
         </display-board>
       </div>
-    <div class="middle">
-      <display-board class="trade_left" title="已开票未收款">
-        <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
-      </display-board>
+      <div class="right-bottom">
         <div class="trade_middle" style="border: none;box-shadow: none;">
           <div style="display: flex; justify-content: space-between; height: 50%;">
             <display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
@@ -123,7 +109,7 @@
                                   content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                   :content="yl.amount+ ' 万元'" />
             </showcase>
-          <showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
+            <showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
               <title-content-mark
                 style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                 content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
@@ -156,6 +142,7 @@
         </display-board>
       </div>
     </div>
+  </div>
 </template>
 <script>
 import DisplayBoard from "./components/container/display-board.vue";
@@ -744,10 +731,62 @@ export default {
   }
 };
 </script>
+<style lang="postcss">
 
-<style scoped>
 #ar_company_list:hover {
   background-color: #19EBFF10;
   transform: scale(101%);
 }
+
+.container {
+  display: flex; /* 使用 Flexbox 布局 */
+  height: 100vh; /* 视口高度 */
+  width: 100%;
+
+  max-width: 100%;
+}
+
+.left-bar {
+  width: 25%; /* 左侧栏宽度 */
+  /*background-color: #f0f0f0; !* 背景色 *!*/
+  /*padding: 10px; !* 内边距 *!*/
+  justify-content: space-around;
+  display: flex;
+  padding: 1rem;
+}
+
+.right-container {
+  flex: 1; /* 剩余空间，右侧的部分 */
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+
+  width: 75%; /* 右侧栏宽度 */
+}
+
+.right-top {
+
+  height: 50%; /* 右上栏高度，设为 50% */
+  justify-content: space-around;
+  display: flex;
+  padding: 1rem;
+}
+
+.right-bottom {
+  height: 50%; /* 右下栏高度，设为 50% */
+  justify-content: space-around;
+  display: flex;
+  padding: 1rem;
+}
+
+.trade_left {
+  width: 100%;
+}
+
+.trade_middle {
+  width: 61%;
+}
+
+.trade_right {
+  width: 33%;
+}
 </style>