大屏当日订单量跳转

src/module/databoard/index.vue

 <template>
-  <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 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="right-container">
-      <div class="right-top">
+      </display-board>
       <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%">
@@ -36,7 +47,10 @@
         </div>
       </display-board>
     </div>
-      <div class="right-bottom">
+    <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="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')">
@@ -109,7 +123,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+' 万吨'"
@@ -142,7 +156,6 @@
       </display-board>
     </div>
   </div>
-  </div>
 </template>
 <script>
 import DisplayBoard from "./components/container/display-board.vue";
@@ -731,62 +744,10 @@ 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>