代码提交

src/App.vue

@@ -41,15 +41,13 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 @import "./assets/index.css";
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  /* background: url("./assets/images/bj1.png") no-repeat; */
-  /* background-size: 100% 100%; */
+  /* text-align: center; */
   background: #040f26;
 }
  body{
@@ -62,7 +60,7 @@ export default {
   width: 100%;
   height: 8.6%;
   display: flex;
-  jjustify-content: space-evenly;
+  justify-content: space-evenly;
   .topLeft{
     width: 11%;
     height: 55%;

src/assets/font/font.less

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: maleGod;
+    src: url(./maleGod.otf);
+}

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-
+import '../src/assets/font/font.less'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)

src/view/index.vue

@@ -5,19 +5,32 @@
             <!-- 营业临厅时长 -->
             <div class="business-hall">
                 <div class="title">
+                    <!-- 45.4% -->
+                    <p class='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
 
                 </div>
+                <!-- 两个小版块 -->
+                <div class="hall-box">
+                    <div class="item">
+                        <p class="font">平均办理时长</p>
+                        <p class="hall-time" style="color:#2e81a2">49分钟33秒</p>
+                    </div>
+                    <div class="item">
+                        <p class="font">平均等待时长</p>
+                        <p class="hall-time" style="color:#9c9060">05分钟33秒</p>
+                    </div>
+                </div>
             </div>
             <!-- 客流量 -->
             <div class="passenger-flow">
                 <div class="title">
-
+                    <p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
                 </div>
-            </div >
+            </div>
             <!-- 厅内统计 -->
             <div class='hall-statistics'>
                 <div class="title">
-
+                    <p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
                 </div>
             </div>
         </div>
@@ -26,7 +39,7 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-                   <p  class='titleText'text='缴费情况'>缴费情况</p>
+                   <p  class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
                 </div>
                 <div class="paymentContent">
                     <div class="paymentList" v-for="(item,index) in paymentList">
@@ -44,13 +57,13 @@
             <!-- 业务受理 -->
             <div class="business-acceptance">
                 <div class="title">
-                    <p  class='titleText'text='业务受理'>业务受理</p>
+                    <p  class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-                    <p  class='titleText'text='服务情况'>服务情况</p>
+                    <p  class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
                 </div>
             </div>
         </div>
@@ -80,35 +93,64 @@ data(){
 },
 mounted(){
 
-},
-methods:{
-}
+    },
+    mounted() {
+
+    },
+    methods: {
+    }
 }
 </script>
 
 <style lang="less" scoped>
-.content{
+.content {
     width: 100%;
-     height: 100%;
-     position: relative;
+    height: 100%;
+    position: relative;
 }
-.left-content,.right-content{
+
+.left-content,
+.right-content {
     position: absolute;
     width: 20.6%;
     top: 0;
     height: 100%;
     /* background-color: aqua; */
 }
+
 /* 内容板块背景 */
-.left-content>div,.right-content>div{
+.left-content>div,
+.right-content>div {
     background-image: url(../assets/images/border.png);
     background-size: 100% 100%;
     margin-bottom: 5px;
     padding: 13px;
     box-sizing: border-box;
+    .hall-box{
+        width: 100%;
+        height: 18.6%;
+        display: flex;
+        justify-content: space-between;
+    }
+    .hall-box .item{
+        width: 45%;
+        height: 100%;
+        // background-color: aqua;
+        background-image: url(../assets/images/hall-box.png);
+        .font{
+            font-size: 12px;
+            color: #a5a5af;
+        }
+        .hall-time{
+            font-family: 'maleGod';
+            font-size: 21px;
+        }
+    }
 }
+
 /* 标题的样式 */
-.left-content>div>.title,.right-content>div>.title{
+.left-content>div>.title,
+.right-content>div>.title {
     width: 100%;
     background-image: url(../assets/images/border-title.png);
     height: 30px;
@@ -117,6 +159,9 @@ methods:{
     padding-left: 8%;
     box-sizing: border-box;
     color: #fff;
+    font-family: 'maleGod';
+    align-items: center;
+    letter-spacing: 1px;
 }
 .titleText:before{
         content: attr(text);
@@ -127,15 +172,18 @@ methods:{
     }
 .left-content .business-hall{
     height: 38.2%;
-    
+
 }
-.left-content .passenger-flow{
+
+.left-content .passenger-flow {
     height: 39.7%;
 }
-.left-content .hall-statistics{
+
+.left-content .hall-statistics {
     height: 20.4%;
 }
-.right-content .payment{
+
+.right-content .payment {
     height: 38.3%;
     .paymentContent{
         height: calc(100% - 30px);
@@ -154,16 +202,20 @@ methods:{
         }
     }
 }
-.right-content .business-acceptance{
+
+.right-content .business-acceptance {
     height: 30%;
 }
-.right-content .service{
+
+.right-content .service {
     height: 30%;
 }
-.right-content{
+
+.right-content {
     right: 0;
 }
-.left-content{
+
+.left-content {
     left: 0;
 }
 </style>