首页排版 引入字体及echarts

src/assets/css/index.css

@@ -34,11 +34,10 @@ body {
     background-size: cover;
     /* 行高是字体1.15倍 */
     line-height: 1.15;
-    height: 100vh;
+    /* height: 100vh; */
     min-height: 600px;
 }
 
-
 header {
     position: relative;
     /* height: 1.25rem; */
@@ -54,7 +53,9 @@ header {
     min-width: 1024px;
     max-width: 1920px;
     padding: 0.125rem 0.125rem 0;
-    height: calc(100vh - 1.125rem)
+    height: calc(100vh - 1.125rem);
+    color: #fff;
+    min-height: 650px;
 }
 
 .mainbox .column {
@@ -103,8 +104,11 @@ header {
     height: 3.875rem;
     border: 1px solid rgba(25, 186, 139, 0.17);
     /* background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png); */
-    padding: 0 .225rem 0.5rem;
+    padding: 0 .275rem 0.2rem;
     margin-bottom: .225rem;
+    padding-top: .825rem;
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 .panel.statisTop {
@@ -310,4 +314,114 @@ header {
 }
 
 
+/* 首页样式 */
+
+p {
+    margin: 0;
+}
+
+.mb-10 {
+    margin-bottom: .1875rem;
+}
+
+.text-blue {
+    color: #0DF4FE
+}
+
+.text-yellow {
+    color: #FEB70D
+}
+
+.text-orange {
+    color: #FE5C0D
+}
+
+.statisSec ul {
+    display: flex;
+    width: 100%;
+    /* width: calc(100% - .75rem); */
+    margin: 0 auto;
+    text-align: center;
+    background-size: 100% 100%;
+    margin-bottom: 0.2rem;
+}
+
+.statisSec .statisTop ul {
+    height: 29%;
+}
+
+.statisSec ul li {
+    flex: 1;
+    font-size: 0.2125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.statisSec ul li div p:first-child {
+    margin-bottom: .06rem
+}
+
+.num {
+    font-size: .35rem;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
+}
+
+.statisTop {
+    background-image: url(../images/statisTop-bg.png);
+}
+
+.statisTop>ul:first-child {
+    background-image: url(../images/statisTop1.png)
+}
+
+.statisTop>ul:nth-child(2) {
+    background-image: url(../images/statisTop2.png)
+}
+
+.statisTop>ul:nth-child(3) {
+    background-image: url(../images/statisTop3.png)
+}
+
+.statisBottom {
+    background-image: url(../images/statisTop-bg.png);
+}
+
+.statisSec .statisBottom ul {
+    height: 100%;
+}
+
+.statisSec .statisBottom ul li {
+    position: relative;
+    background-size: 100% 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url(../images/bg-blue.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(2) {
+    background-image: url(../images/bg-yellow.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(3) {
+    background-image: url(../images/bg-orange.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(2) {
+    margin: 0 .125rem;
+}
+
+.statisSec .statisBottom .num {
+    font-size: .3rem
+}
+
+.timeEle {
+    position: absolute;
+    width: 100%;
+    line-height: 2.4;
+    /* background: #30cfff61; */
+    bottom: 0
+}
+
+
 /* ming end */

src/assets/fonts/font.css

@@ -0,0 +1,12 @@
+@font-face {
+    font-family: "impact";
+    src: url('impact.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+/* @font-face {
+    font-family: electronicFont;
+    src: url('DS-DIGIT.TTF')
+} */

src/main.js

@@ -18,6 +18,13 @@ app.use(Antd).mount('#app');
 //引入rem字体配置
 import '@/assets/js/flexible.js';
 
+//  引入字体样式
+import '@/assets/fonts/font.css';
+
+
+import * as echarts from 'echarts'
+app.use(echarts);
+
 
 /*路由守卫*/
 router.beforeEach((to, from, next) => {
@@ -57,6 +64,6 @@ router.beforeEach((to, from, next) => {
     //     }
     // } else {
     //     //路由的next必须存在,否则无法进入下一页
-        next();
+    next();
     // }
 })

src/views/home/components/pieChart.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>dsds</div>
+</template>

src/views/home/components/statisBottom.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="panel statisBottom">
+    <ul>
+      <li style="">
+        <div>
+          <p><span class="num text-blue">1564.26</span></p>
+          <p class="mb-10">(kW)</p>
+          
+          
+        </div>
+        <p  class="timeEle">日用电量</p>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-yellow">156445.89</span></p>
+          <p class="mb-10">(kW)</p>
+          
+        </div>
+        <p class="timeEle">月用电量</p>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-orange">4521564.63</span></p>
+           <p class="mb-10">(kW)</p>
+        </div>
+        <p class="timeEle">年用电量</p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "statisTop",
+  components: {},
+  methods: {
+    // Site_details(){
+    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
+    // }
+  },
+};
+</script>
+
+<style>
+</style>

src/views/home/components/statisTop.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="panel statisTop">
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-orange">135</span> 条</p>
+          <p>告警总数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-orange">50</span> 条</p>
+          <p>未处理告警数</p>
+        </div>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-blue">100</span> 个</p>
+          <p>总站点数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-blue">1000</span> kW</p>
+          <p>总实时负荷</p>
+        </div>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-yellow">36</span> 名</p>
+          <p>运维人员</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-yellow">8</span> 名</p>
+          <p>电力人员</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "statisTop",
+  components: {},
+  methods: {
+    // Site_details(){
+    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
+    // }
+  },
+};
+</script>
+
+<style>
+
+
+</style>

src/views/home/index.vue

@@ -2,20 +2,16 @@
   <div>
     <section class="mainbox">
       <div class="topBox">
-        <div class="column">
-          <div class="panel statisTop">
-            <h2>
-              柱状图-就业行业 <a href="javascript:;">2019</a>
-              <a href="javacript:;"> 2020</a>
-            </h2>
-            <div class="chart"></div>
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel statisBottom">
+        <div class="column statisSec">
+
+          <statis-top></statis-top>
+          <statis-bottom></statis-bottom>
+          
+          <!-- <div class="panel statisBottom">
             <h2>折线图-人员变化</h2>
             <div class="chart"></div>
             <div class="panel-footer"></div>
-          </div>
+          </div> -->
           <!-- <div class="panel pie">
           <h2>饼形图-年龄分布</h2>
           <div class="chart"></div>
@@ -27,9 +23,7 @@
         </div>
         <div class="column">
           <div class="panel deviceSum">
-            <h2>柱状图-技能掌握</h2>
-            <div class="chart"></div>
-            <div class="panel-footer"></div>
+            <pie-chart></pie-chart>
           </div>
           <div class="panel line1 operStatus">
             <h2>折线图-播放量</h2>
@@ -52,9 +46,12 @@
   </div>
 </template>
 <script>
+import statisTop from "./components/statisTop";
+import statisBottom from "./components/statisBottom";
+import pieChart from "./components/pieChart";
 export default {
   name: "index",
-  components: {},
+  components: {statisTop,statisBottom,pieChart},
   methods:{
     Site_details(){
       this.$router.push({ path: '/Site_details'});//, query: { title: title }