代码提交

src/App.vue

@@ -31,7 +31,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 @import "./assets/index.css";
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

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="p1">营业厅时长</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>客流量</p>
+                </div>
             </div>
-            </div >
             <!-- 厅内统计 -->
             <div class='hall-statistics'>
                 <div class="title">
-
+                    <p>厅内统计</p>
                 </div>
             </div>
         </div>
@@ -26,19 +39,19 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-
+                    <p>缴费情况</p>
                 </div>
             </div>
             <!-- 业务受理 -->
             <div class="business-acceptance">
                 <div class="title">
-
+                    <p>业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-
+                    <p>服务情况</p>
                 </div>
             </div>
         </div>
@@ -47,72 +60,106 @@
 
 <script>
 export default {
-name:'index',
+    name: 'index',
-data(){
+    data() {
-    return{
+        return {
 
         }
-},
+    },
-mounted(){
+    mounted() {
 
-},
+    },
-methods:{
+    methods: {
-}
+    }
 }
 </script>
 
-<style>
+<style lang="less" scoped>
-.content{
+.content {
     width: 100%;
     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;
     background-size: 100% 100%;
-    
+    margin-bottom: 10px;
 }
-.left-content .business-hall{
+
+.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%;
 }
-.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>