首页样式调整

ant-design-vue-jeecg/src/assets/tms/标题背景.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="171px" height="28px" viewBox="0 0 171 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>标题背景</title>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#33C3FF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#1790FF" stop-opacity="0.24" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-41, -216)">
+            <g id="标题背景" transform="translate(41.5, 216)">
+                <polygon id="矩形" fill="url(#linearGradient-1)" points="0 0 170.5 0 170.5 28 0 28"></polygon>
+                <rect id="矩形" fill="#1790FF" x="0" y="0" width="2" height="28"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

ant-design-vue-jeecg/src/views/dashboard/IndexChart.vue

@@ -1,11 +1,42 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="24">
+    <div class="container">
+         <div class="card">
+            <div class="content">
+              <div class="number">{{ model.planCount }}</div>
+              <div class="description">今日计划入厂数</div>
+            </div>
+            <img src="@/assets/tms/plan.png" class="background-image">
+        </div>
+        <div class="card">
+            <div class="content">
+              <div class="number">{{ model.lineUpCount }}</div>
+              <div class="description">当前排队数</div>
+            </div>
+            <img src="@/assets/tms/line.png" class="background-image">
+        </div>
+        <div class="card">
+            <div class="content">
+              <div class="number">{{ model.inCount }}</div>
+              <div class="description">已入厂</div>
+            </div>
+            <img src="@/assets/tms/in.png" class="background-image">
+        </div>
+        <div class="card">
+            <div class="content">
+              <div class="number">{{ model.outCount }}</div>
+              <div class="description">已离厂</div>
+            </div>
+            <img src="@/assets/tms/out.png" class="background-image">
+        </div>
+      </div>  
+    <!-- <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="今日计划入厂数" :total="model.planCount">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
+          <img style="width: 64px; height: 64px;display: block; margin: 0 auto;" src="@/assets/logo.png"> -->
           <!-- <div>
             <trend flag="up" style="margin-right: 16px;">
               <span slot="term">周同比</span>
@@ -17,35 +48,35 @@
             </trend>
           </div>
           <template slot="footer">日均销售额<span>￥ 234.56</span></template> -->
-        </chart-card>
+        <!-- </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="当前排队数" :total="model.lineUpCount | NumberFormat">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
-          </a-tooltip>
+          </a-tooltip> -->
           <!-- <div>
             <mini-area />
           </div>
           <template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template> -->
-        </chart-card>
+        <!-- </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="已入厂" :total="model.inCount | NumberFormat">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
-          </a-tooltip>
+          </a-tooltip> -->
           <!-- <div>
             <mini-bar :height="40" />
           </div>
           <template slot="footer">转化率 <span>60%</span></template> -->
-        </chart-card>
+        <!-- </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="已离厂" :total="model.outCount">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
-          </a-tooltip>
+          </a-tooltip> -->
           <!-- <div>
             <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
           </div>
@@ -59,9 +90,9 @@
               80%
             </trend>
           </template> -->
-        </chart-card>
+        <!-- </chart-card>
       </a-col>
-    </a-row>
+    </a-row> -->
 
     <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
       <div class="salesCard">
@@ -317,4 +348,56 @@
       }
     }
   }
+
+  .container {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+  }
+
+  .card {
+    position: relative;
+    width: 25%;
+    height: 150px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    z-index: 2; /* 确保内容在背景图像之上 */
+  }
+
+  .number {
+    font-size: 28px;
+    font-weight: bold;
+    color: black;
+  }
+
+  .description {
+    color: #0e83f0;
+    padding: 5px 10px;
+    border-radius: 4px;
+    background-image: url('../imag/title.png');
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1; /* 确保背景图像在内容之下 */
+  }
 </style>