system-phone 3.1.1 → 3.1.4

package/src/components/screen/WorkOrderRightDownItem.vue

@@ -1,103 +1,103 @@
-<template>
-    <div class="down-item-base">
-      <div class="item-left">
-        <div class="item-sign"></div>
-        <div class="item-content" :style="{'background-image': 'linear-gradient(to right, rgba('+contentBg[0]+','+contentBg[1]+ ','+contentBg[2]+'), rgba(0,65,146,0))'}">
-          <div class="title">{{downItemData.title}}</div>
-          <div class="number">{{downItemData.number}}</div>
-        </div>
-      </div>
-      <div class="item-right">
-        <div class="name">{{downItemData.name}}</div>
-        <div class="percentage">{{downItemData.percentage}}</div>
-      </div>
-    </div>
-</template>
-
-<script>
-    export default {
-      title: "WorkOrderRightDownItem",
-      props:{
-        downItemData:{
-          type:Object,
-          default:{
-            title:'月度工单量',
-            number:145784,
-            name:'日环比',
-            percentage:'+44.18%'
-          }
-        },
-        contentBg:{
-          type: Array,
-          default: [9,40,115]
-        }
-      }
-    }
-</script>
-
-<style lang="less" scoped>
-  .down-item-base{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    .item-left{
-      width: 55%;
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      .item-sign{
-        width: 1%;
-        height: 100%;
-        background: #00FFE5;
-      }
-     .item-content{
-       width: 99%;
-       height: 100%;
-       background-image: linear-gradient(to right, rgb(67,51,77), rgba(0,65,146,0));
-       display: flex;
-       flex-direction: row;
-       justify-content: center;
-       align-items: center;
-       color: #fff;
-       .title{
-         font-size: vw(14);
-         margin-left: 2%;
-         width: 49%;
-         height: 60%;
-       }
-       .number{
-         width: 49%;
-         height: 60%;
-         font-size: vw(16);
-       }
-     }
-    }
-    .item-right{
-      width: 45%;
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      align-items: center;
-      .name{
-        font-size: vw(14);
-        width: 46%;
-        height: 60%;
-        text-align: right;
-        color: #fff;
-      }
-      .percentage{
-        font-size: vw(16);
-        text-align: left;
-        width: 46%;
-        height: 60%;
-        color: #ff5777;
-      }
-    }
-  }
-</style>
+<template>
+    <div class="down-item-base">
+      <div class="item-left">
+        <div class="item-sign"></div>
+        <div class="item-content" :style="{'background-image': 'linear-gradient(to right, rgba('+contentBg[0]+','+contentBg[1]+ ','+contentBg[2]+'), rgba(0,65,146,0))'}">
+          <div class="title">{{downItemData.title}}</div>
+          <div class="number">{{downItemData.number}}</div>
+        </div>
+      </div>
+      <div class="item-right">
+        <div class="name">{{downItemData.name}}</div>
+        <div class="percentage">{{downItemData.percentage}}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "WorkOrderRightDownItem",
+      props:{
+        downItemData:{
+          type:Object,
+          default:{
+            title:'月度工单量',
+            number:145784,
+            name:'日环比',
+            percentage:'+44.18%'
+          }
+        },
+        contentBg:{
+          type: Array,
+          default: [9,40,115]
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .down-item-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    .item-left{
+      width: 55%;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .item-sign{
+        width: 1%;
+        height: 100%;
+        background: #00FFE5;
+      }
+     .item-content{
+       width: 99%;
+       height: 100%;
+       background-image: linear-gradient(to right, rgb(67,51,77), rgba(0,65,146,0));
+       display: flex;
+       flex-direction: row;
+       justify-content: center;
+       align-items: center;
+       color: #fff;
+       .title{
+         font-size: vw(14);
+         margin-left: 2%;
+         width: 49%;
+         height: 60%;
+       }
+       .number{
+         width: 49%;
+         height: 60%;
+         font-size: vw(16);
+       }
+     }
+    }
+    .item-right{
+      width: 45%;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      .name{
+        font-size: vw(14);
+        width: 46%;
+        height: 60%;
+        text-align: right;
+        color: #fff;
+      }
+      .percentage{
+        font-size: vw(16);
+        text-align: left;
+        width: 46%;
+        height: 60%;
+        color: #ff5777;
+      }
+    }
+  }
+</style>

package/src/components/screen/WorkOrderRightItem.vue

@@ -1,115 +1,115 @@
-<template>
-    <div class="right-item-base">
-      <div class="title">{{dealData.title}}</div>
-      <div class="number" v-if="dealData.title !== '完成率'">{{dealData.number}}</div>
-      <div class="number" v-if="dealData.title === '完成率'" :style="{'color': color}">{{dealData.number}}%</div>
-      <div class="icon" :style="{'background':'url('+ dealIcon +') no-repeat','background-size':'100% 100%'}"></div>
-    </div>
-</template>
-
-<script>
-    export default {
-      title: "WorkOrderRightItem",
-      props:{
-        dealIcon:{
-          default:require('src/assets/images/客服待处理.png')
-        },
-        dealData:{
-          type:Object,
-          default:{
-            title:'待处理',
-            number:65
-          }
-        },
-        color:{
-          type:String,
-          default:'#fff'
-        }
-      }
-    }
-</script>
-
-<style lang="less" scoped>
-  .right-item-base{
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to top, rgb(13,40,106), rgba(0,65,146,0));
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    text-align: center;
-    color: #fff;
-    .title{
-      font-size: vw(14);
-      width: 100%;
-      height: 20%;
-    }
-    .number{
-      font-size: vw(16);
-      width: 100%;
-      height: 20%;
-    }
-    .icon{
-      width: 30%;
-      height: 17%;
-      background: url("/src/assets/images/客服待处理.png") no-repeat;
-      background-size: 100% 100%;
-    }
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      content: "";
-      width: vw(10);
-      height: vh(10);
-      border-top: vw(2) solid #02a6b5;
-      border-right: vw(2) solid #02a6b5;
-    }
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      content: "";
-      width: vw(10);
-      height: vh(10);
-      border-bottom: vw(2) solid #02a6b5;
-      border-left: vw(2) solid #02a6b5;
-    }
-  }
-  .work-order-right{
-    width: 49.3%;
-    height: 100%;
-    background: rgba(255,255,255,.05);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    .right-up{
-      width: 90%;
-      height: 44%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      .up-item{
-        width: 23%;
-        height: 90%;
-      }
-    }
-    .right-down{
-      width: 90%;
-      height: 40%;
-      margin-bottom: 4%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      .down-item{
-        width: 100%;
-        height: 25%;
-      }
-    }
-  }
-</style>
+<template>
+    <div class="right-item-base">
+      <div class="title">{{dealData.title}}</div>
+      <div class="number" v-if="dealData.title !== '完成率'">{{dealData.number}}</div>
+      <div class="number" v-if="dealData.title === '完成率'" :style="{'color': color}">{{dealData.number}}%</div>
+      <div class="icon" :style="{'background':'url('+ dealIcon +') no-repeat','background-size':'100% 100%'}"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "WorkOrderRightItem",
+      props:{
+        dealIcon:{
+          default:require('src/assets/images/客服待处理.png')
+        },
+        dealData:{
+          type:Object,
+          default:{
+            title:'待处理',
+            number:65
+          }
+        },
+        color:{
+          type:String,
+          default:'#fff'
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .right-item-base{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to top, rgb(13,40,106), rgba(0,65,146,0));
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    .title{
+      font-size: vw(14);
+      width: 100%;
+      height: 20%;
+    }
+    .number{
+      font-size: vw(16);
+      width: 100%;
+      height: 20%;
+    }
+    .icon{
+      width: 30%;
+      height: 17%;
+      background: url("/src/assets/images/客服待处理.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      content: "";
+      width: vw(10);
+      height: vh(10);
+      border-top: vw(2) solid #02a6b5;
+      border-right: vw(2) solid #02a6b5;
+    }
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      content: "";
+      width: vw(10);
+      height: vh(10);
+      border-bottom: vw(2) solid #02a6b5;
+      border-left: vw(2) solid #02a6b5;
+    }
+  }
+  .work-order-right{
+    width: 49.3%;
+    height: 100%;
+    background: rgba(255,255,255,.05);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .right-up{
+      width: 90%;
+      height: 44%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .up-item{
+        width: 23%;
+        height: 90%;
+      }
+    }
+    .right-down{
+      width: 90%;
+      height: 40%;
+      margin-bottom: 4%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .down-item{
+        width: 100%;
+        height: 25%;
+      }
+    }
+  }
+</style>