代码提交

src/view/index.vue

@@ -26,19 +26,31 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-
+                   <p  class='titleText'text='缴费情况'>缴费情况</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='业务受理'>业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-
+                    <p  class='titleText'text='服务情况'>服务情况</p>
                 </div>
             </div>
         </div>
@@ -50,7 +62,20 @@ export default {
 name:'index',
 data(){
     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(){
@@ -61,7 +86,7 @@ methods:{
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 .content{
     width: 100%;
      height: 100%;
@@ -88,7 +113,17 @@ methods:{
     background-image: url(../assets/images/border-title.png);
     height: 30px;
     background-size: 100% 100%;
-    
+    display: flex;
+    padding-left: 8%;
+    box-sizing: border-box;
+    color: #fff;
+}
+.titleText:before{
+        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%;
@@ -102,6 +137,22 @@ methods:{
 }
 .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{
     height: 30%;