1

src/App.vue

@@ -64,6 +64,7 @@ body,html{
   margin:0;
   font-size: 62.5%;
 }
+
 #app {
   height:calc(100vh);
   overflow: hidden;

src/pages/index.vue

@@ -6,13 +6,37 @@
             <img src="@/assets/headerBg.png" alt="">
             <div class="headerText">
                 <div class="title">垃圾转运站大数据管理中心</div>
-                <!-- <div class="time">
+                
+            </div>
+            <div class="time">
                 <img src="@/assets/shijian.png"  alt="">
                 <span>2024-09-09 13:24:13</span>
-                </div> -->
+            </div>
+        </div>
+        <div class="infoContent">
+            <div class="left">
+                <div class="title">
+                    <span>数量统计</span>
+                    <div class="all">全部</div>
+                </div>
+                <div class="totalInfo">
+                    <img src="../assets/leftborder.png" class="border" alt="">
+                    <div class="section">
+                         <div class="sec1">
+                            <img src="../assets/btn.png" alt="">
+                            <div class="peopleNum">
+                                <span>当日出纳</span>
+                                <span>3</span>
+                                <span>人</span>
+                            </div>
+                         </div>
                     </div>
                 </div>
             </div>
+            <div class="center"></div>
+            <div class="right"></div>
+        </div>
+    </div>
 </div>
 </template>
 
@@ -53,6 +77,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@font-face {
+  font-family: "myfont";
+  src: url('../assets/DIN-Condensed-Bold-2.ttf') format('truetype');
+}
 .index{
     background: #010E25;
     border:1px solid blue;
@@ -70,6 +98,9 @@ export default {
     .contentContainer{
         position: relative;
         z-index:1;
+        display: flex;
+        flex-direction: column;
+        height:100%;
         .header{
             border:1px solid red;
             position: relative;
@@ -81,7 +112,10 @@ export default {
             }
             .headerText{
                 position: absolute;
-                border:2px solid pink;
+                top:2.7rem;
+                z-index:2;
+                left:50%;
+                transform: translateX(-50%);
                 .title{
                     font-family: Source Han Sans CN;
                     font-weight: bold;
@@ -89,21 +123,114 @@ export default {
                     color: #FFFFFF;
                     text-shadow: 0px 4px 7px rgba(0,0,1,0.86);
                 }
-                // .time{
+                
-                //     display: flex;
+            }
-                //     align-items: center;
+            .time{
-                //     border:1px solid #fff;
+                position: absolute;
-                //     &>img{
+                z-index:2;
-                //         width: 20px;
+                display: flex;
-                //         height: 20px;
+                align-items: center;
-                //     }
+               
-                //     &>span{
+                top: 2.7rem;
-                //         font-weight: bold;
+                right:2rem;
-                //         font-size: 20px;
+                &>img{
-                //         color: #FFFFFF;
+                    width: 20px;
-                //         margin-left:16px;
+                    height: 20px;
-                //     }
+                }
-                // }
+                &>span{
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #FFFFFF;
+                    margin-left:16px;
+                }
+            }
+        }
+        .infoContent{
+            flex:1;
+            border:2px solid #fff;
+            padding:2rem 0;
+            display: flex;
+            .left{
+                width:28%;
+                flex-shrink: 0;
+                border:1px solid red;
+                display: flex;
+                flex-direction: column;
+                .title{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-left:5.3rem;
+                    span{
+                        font-family: "myfont", sans-serif;
+                        font-weight: bold;
+                        font-size: 2.4rem;
+                        color: #DFEEF3;
+                        background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                    .all{
+                        background: #3F87F6;
+                        border-radius: 0.8rem;
+                        // width: 6rem;
+                        // height: 3.2rem;
+                        padding:0.2rem 1.6rem;
+                        text-align: center;
+                        line-height: 3.2rem;
+                      
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 1.6rem;
+                        color: #DFEEF3;
+                    }
+                }
+                .totalInfo{
+                    flex:1;
+                    border:1px solid red;
+                    position: relative;
+                    // border: 1px solid #fff;
+                    // border-image-source: url("../assets/leftborder.png");
+                    // border-image-slice: 100 235 100 235;
+                    // border-image-width: 100px 220px 100px 220px;
+                    // border-image-repeat: round;
+                    .border{
+                        position: absolute;
+                        width:100%;
+                        height: 100%;
+                        left:0;
+                        top:0;
+                        z-index:0;
+                    }
+                    .section{
+                        position: relative;
+                        z-index:2;
+                        .sec1{
+                            padding:0 1rem;
+                            &>img{
+                                width:100%;
+                            }
+                        }
+                    }
+                }
+                
+                
+            }
+
+
+
+
+
+
+
+            .center{
+                flex:1;
+                border:1px solid blue;
+            }
+            .right{
+                width: 28%;
+                flex-shrink: 0;
+                border:1px solid red
             }
         }