开票通知模块css代码优化

src/styles/mixin.scss

@@ -59,6 +59,10 @@
     color: $col;
     opacity: $alpha;
 }
+@mixin bgcolorOpa($col,$alpha){
+    background: $col;
+    opacity: $alpha;
+}
 @mixin radiusSizing($rad){
     border-radius: $rad;
     box-sizing: border-box;

src/views/index/invoicingDetail.vue

@@ -56,10 +56,7 @@ export default {
           pageSize:this.pageSize,
          ...this.form,
         })
-        // if(res.code=== 200){
         this.detailList=res.data
-        // }
-        // console.log("resssss",res)
       }
   }
 }
@@ -75,22 +72,19 @@ export default {
   height: 46px;
 }
 .contentWrap{
-  width: 100%;
-  height: 400px;
+  @include wh(100%,400px);
   margin-left: 27px;
   .item{
     width: 100%;
     @include all-height(47px);
     .itemContent{
       margin-left: 5px;
-      @include fontWeightSize(400,13px);
       color: #323643;
+      @include fontWeightSize(400,13px);
     }
     .line{
-      width: 100%;
-      height: 1px;
-      background: #E9E9EA;
-      opacity: 0.6;
+      @include wh(100%,1px);
+      @include bgcolorOpa(#E9E9EA,0.6);
     }
   }
 }

src/views/index/toDoList.vue

@@ -1,7 +1,6 @@
 <template>
-  <div v-if="show"
-       style="width:100%;height:100%;background-color: #FAFAFA;display: flex;align-items: center;justify-content: center">
-    <img src="@/assets/empty.png" style="width:100%;">
+  <div class="empty" v-if="show">
+    <img src="@/assets/empty.png" >
   </div>
   <div class="wrap" v-else>
     <ul id="dataList" class="dataList">
@@ -62,7 +61,14 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
-
+.empty{
+  @include wh(100%,100%);
+  background-color: #FAFAFA;
+  @include flexTwoCenter;
+  img{
+    width: 100%;
+  }
+}
 .wrap {
   @include wh(100%, 100%);
   box-sizing: border-box;

src/views/index/workOrderDetail.vue

@@ -114,15 +114,13 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 .wrap{
-  width: 100%;
-  height: 100%;
+  @include wh(100%,100%);
   background-color: #F4F5F7;
   overflow-y: auto;
 }
 .common{
   background: #FFFFFF;
-  border-radius: 6px;
-  box-sizing: border-box;
+  @include radiusSizing(6px);
   padding: 11px 17px 15px 24px;
 }
 .fontColor{
@@ -144,7 +142,6 @@ export default {
     .rightContent{
       height: 189px;
       width: calc(100% - 60px);
-      //@include wh(90px,189px);
     }
   }
 }
@@ -152,9 +149,7 @@ export default {
   @include wh(100%,356px);
   margin-bottom: 30px;
   .item{
-    display: flex;
-    align-items: center;
-    //line-height: 27px;
+    @include flexCenter;
   }
   .infoContent{
     .leftTitle{
@@ -169,8 +164,7 @@ export default {
 
     .vehicleRemark{
       @include fontWeightSize(400,11px);
-      opacity: 0.55;
-      color: #121212;
+      @include colorOpa(#121212,0.55);
       line-height: 14px;
       flex: 1;
     }
@@ -181,9 +175,8 @@ export default {
 }
 .title{
   @include fontWeightSize(bold,14px);
-  color: #323643;
+  @include colorOpa(#323643,0.6);
   line-height: 20px;
-  opacity: .6;
 }
 .line{
   @include wh(100%,2px);