代码提交

src/App.vue

@@ -47,9 +47,7 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  /* text-align: center; */
-  /* background: url("./assets/images/bj1.png") no-repeat; */
-  /* background-size: 100% 100%; */
   background: #040f26;
 }
  body{

src/view/index.vue

@@ -6,7 +6,7 @@
             <div class="business-hall">
                 <div class="title">
                     <!-- 45.4% -->
-                    <p class="p1">营业厅时长</p>
+                    <p class='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
 
                 </div>
                 <!-- 两个小版块 -->
@@ -24,13 +24,13 @@
             <!-- 客流量 -->
             <div class="passenger-flow">
                 <div class="title">
-                    <p>客流量</p>
+                    <p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
                 </div>
             </div>
             <!-- 厅内统计 -->
             <div class='hall-statistics'>
                 <div class="title">
-                    <p>厅内统计</p>
+                    <p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
                 </div>
             </div>
         </div>
@@ -39,19 +39,31 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-                    <p>缴费情况</p>
+                   <p  class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
+                </div>
+                <div class="paymentContent">
+                    <div class="paymentList" v-for="(item,index) in paymentList">
+                        <div class="listOne">
+                            <img src="../assets/images/paymentYuan.png" style="width:18px;height:18px"/>
+                        <div>{{item.count}}</div>
+                        </div>
+                        <div>
+                            <div>{{item.name}}</div>
+                           <div>{{item.per}}</div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- 业务受理 -->
             <div class="business-acceptance">
                 <div class="title">
-                    <p>业务受理</p>
+                    <p  class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-                    <p>服务情况</p>
+                    <p  class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
                 </div>
             </div>
         </div>
@@ -60,11 +72,27 @@
 
 <script>
 export default {
-    name: 'index',
+name:'index',
-    data() {
+data(){
-        return {
+    return{
-
+        paymentList:[
+            {
+                count:'9786笔',
+                name:'环比',
+                per:'88.33%',
+                color:'rgb(29,150,213)'
+        },
+        {
+                count:'144.53万元',
+                name:'环比',
+                per:'86.24%',
+                color:'rgb(244,214,45)'
         }
+        ]
+    }
+},
+mounted(){
+
     },
     mounted() {
 
@@ -127,10 +155,22 @@ export default {
     background-image: url(../assets/images/border-title.png);
     height: 30px;
     background-size: 100% 100%;
-    margin-bottom: 10px;
+    display: flex;
+    padding-left: 8%;
+    box-sizing: border-box;
+    color: #fff;
+    font-family: 'maleGod';
+    align-items: center;
+    letter-spacing: 1px;
 }
-
+.titleText:before{
-.left-content .business-hall {
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(163, 227, 245);
+        -webkit-mask:linear-gradient(to top, rgb(163, 227, 245), transparent );
+    }
+.left-content .business-hall{
     height: 38.2%;
 
 }
@@ -145,6 +185,22 @@ export default {
 
 .right-content .payment {
     height: 38.3%;
+    .paymentContent{
+        height: calc(100% - 30px);
+        .paymentList{
+            width:100% ;
+            height: 38px;
+            background: url("../assets/images/payment.png") no-repeat;
+            background-size: 100% 100%;
+            .listOne{
+                height: 100%;
+                width: 28%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+            }
+        }
+    }
 }
 
 .right-content .business-acceptance {