src/App.vue

@@ -47,7 +47,9 @@ 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='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
+                    <p class="p1">营业厅时长</p>
 
                 </div>
                 <!-- 两个小版块 -->
@@ -24,13 +24,13 @@
             <!-- 客流量 -->
             <div class="passenger-flow">
                 <div class="title">
-                    <p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
+                    <p>客流量</p>
                 </div>
             </div>
             <!-- 厅内统计 -->
             <div class='hall-statistics'>
                 <div class="title">
-                    <p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
+                    <p>厅内统计</p>
                 </div>
             </div>
         </div>
@@ -39,31 +39,19 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-                   <p  class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
+                    <p>缴费情况</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  class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
+                    <p>业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-                    <p  class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
+                    <p>服务情况</p>
                 </div>
             </div>
         </div>
@@ -72,27 +60,11 @@
 
 <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() {
 
@@ -155,22 +127,10 @@ mounted(){
     background-image: url(../assets/images/border-title.png);
     height: 30px;
     background-size: 100% 100%;
-    display: flex;
+    margin-bottom: 10px;
-    padding-left: 8%;
-    box-sizing: border-box;
-    color: #fff;
-    font-family: 'maleGod';
-    align-items: center;
-    letter-spacing: 1px;
 }
-.titleText:before{
+
-        content: attr(text);
+.left-content .business-hall {
-        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%;
 
 }
@@ -185,22 +145,6 @@ mounted(){
 
 .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 {