qgb-process 0.2.3 → 0.2.7

package/src/components/ComAduitNew.vue

@@ -1,477 +1,477 @@
-<template>
-  <div
-    class="exam-add-edit"
-  >
-    <div class="exam-detail">
-      <div class="detail-left">
-        <div class="exmAndapproInfo">
-          <p class="title">审批日志</p>
-        </div>
-        <div
-          class="logItem"
-          v-for="(item,ins) in approvalDialogData"
-          :key="ins"
-          :class="[{'aposolid' : ins!=approvalDialogData.length-1&&(item.nodeStatus==1||item.nodeStatus==4||item.nodeStatus==2)},{'dashed' : ins!=approvalDialogData.length-1&&(item.nodeStatus!=1||item.nodeStatus!=4||item.nodeStatus==2)},{'ii':(approvalDialogData.length-1 - ins) == 1 &&(approvalDialogData[approvalDialogData.length -1].nodeType  == 'END')}]"
-        >
-          <!-- 用户图像 -->
-          <div
-            class="userPic"
-            v-if="item.nodeDetail"
-          >
-            <img
-              :src="item.nodeDetail[0].icon "
-              class="userPicBig"
-              style="margin-left: -1px;"
-              v-if="item.nodeDetail[0].icon&&item.nodeDetail.length==1&&item.nodeType!='CC_EVENT'&&item.nodeType!='START'"
-            />
-            <img
-              src="@/assets/img/sta2.png"
-              class="userPicBig"
-              style="    margin-left: 3px;"
-              v-else-if="item.nodeDetail.length>1&&item.nodeType!='CC_EVENT'&&item.nodeType!='START'"
-            />
-            <img
-              v-else-if="item.nodeType=='CC_EVENT'"
-              src="@/assets/img/sta3.png"
-              class="userPicBig"
-            />
-            <img
-              v-else-if="item.nodeType=='START'"
-              src="@/assets/img/sta1.png"
-              class="userPicBig"
-            />
-            <div
-              class="usernameBig"
-              style="display: flex;justify-content: center;align-items: center;"
-              v-else
-            >{{item.nodeDetail[0].name | userNameFilter}}</div>
-
-            <img
-              v-if="item.nodeStatus==1 &&item.nodeType!='CC_EVENT'"
-              src="@/assets/img/sucess.png"
-              class="status"
-            />
-            <!-- 拒绝抄送后 -->
-            <img
-              v-if="(item.nodeStatus!=0 &&item.nodeStatus!=-1)&&item.nodeType=='CC_EVENT'"
-              src="@/assets/img/sucess.png"
-              class="status"
-            />
-            <img
-              v-if="(item.nodeStatus==-1||item.nodeStatus==0)&&item.nodeType"
-              src="@/assets/img/wait.png"
-              class="status"
-            />
-            <img
-              v-if="(item.nodeStatus==2||item.nodeStatus==4)"
-              src="@/assets/img/erro.png"
-              class="status"
-            />
-          </div>
-          <!-- 审批 -->
-          <div
-            class="logItemInfo"
-            v-if="item.nodeType!='CC_EVENT'&&item.nodeStatus!=-1 && item.nodeType !='END' "
-          >
-            <h1 style="font-weight: 400;">{{item.nodeName=='发起申请'?'发起申请':item.nodeName=='抄送人'?'抄送人':'审批人'}}</h1>
-            <div
-              class="procontent"
-              v-for="(items,ind) in item.nodeDetail"
-              :key="ind"
-            >
-              <div class="aproItem">
-                <div
-                  class="aproItem_img"
-                  v-if="item.nodeDetail.length>1"
-                >
-                  <img
-                    :src="item.nodeDetail[ind].icon"
-                    class="aproPic"
-                    v-if="item.nodeDetail[ind].icon"
-                  />
-                  <div
-                    class="aproname"
-                    v-else
-                  >{{item.nodeDetail[ind].name | userNameFilter}}</div>
-                </div>
-                <div class="logtop">
-                  <span style="display:flex;align-items: center; font-size: 14px;  "><span style="text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; line-height: 30px;">{{items.name}}</span>
-                    <span v-if="item.nodeStatus==2&&items.approveStatus==-1 ||item.nodeStatus==4"></span><span
-                      :style="{'color': aprovecolor(items.approveStatus)}"
-                      v-else
-                    >{{items.approveStatus | aprovestatue}}</span></span>
-                  <span style="display:flex;align-items: center;font-size: 14px;margin-right: 30px;">{{items.approvalTime}}</span>
-                </div>
-                <div class="aproItem_cont">
-                  <div
-                    v-if="items.reason&&items.reason.length>5"
-                    class="delivereason"
-                  >{{items.reason}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 审批待通过 -->
-          <div
-            class="logItemInfo"
-            v-if="item.nodeType!='CC_EVENT'&&item.nodeStatus==-1"
-          >
-            <h1 style="font-weight: 400;">审批人</h1>
-            <div class="logtop">
-              <span style="margin-right:30px">{{item.nodeDetail[0].approvalTime}}</span>
-            </div>
-            <div
-              class="aproItem"
-              v-if="item.nodeDetail.length == 1"
-              style="margin-top:-11px"
-            >
-              <div
-                class=" carbon"
-                v-for="(itemc,indc) in item.nodeDetail"
-                :key="indc"
-              >
-                <!-- <img :src="item.nodeDetail[indc].icon" class="aproPic"  v-if="item.nodeDetail[indc].icon"/>
-                         <div class="aproname"  v-else>{{item.nodeDetail[indc].name | userNameFilter}}</div > -->
-                <div class="carbonname">{{itemc.name}}</div>
-              </div>
-            </div>
-            <div
-              class="aproItem"
-              v-if="item.nodeDetail.length > 1"
-            >
-              <div
-                class=" carbon"
-                v-for="(itemc,indc) in item.nodeDetail"
-                :key="indc"
-              >
-                <img
-                  :src="item.nodeDetail[indc].icon"
-                  class="aproPic"
-                  v-if="item.nodeDetail[indc].icon"
-                />
-                <div
-                  class="aproname"
-                  v-else
-                >{{item.nodeDetail[indc].name | userNameFilter}}</div>
-                <div class="carbonname">{{itemc.name}}</div>
-              </div>
-            </div>
-          </div>
-          <!-- 抄送人节点 -->
-          <div
-            class="logItemInfo"
-            v-if="item.nodeType=='CC_EVENT'"
-          >
-            <h1 style="font-weight: 400;">抄送人</h1>
-            <div>
-              <div class="logtop">
-                <span v-if="item.nodeStatus==1">已抄送{{item.nodeDetail.length}}人 </span>
-                <span v-else>抄送{{item.nodeDetail.length}}人 </span>
-                <span style="margin-right:30px">{{item.nodeTime}}</span>
-              </div>
-              <div class="aproItem ">
-                <div
-                  class=" carbon"
-                  v-for="(itemc,indc) in item.nodeDetail"
-                  :key="indc"
-                >
-                  <img
-                    :src="item.nodeDetail[indc].icon"
-                    class="aproPic"
-                    v-if="item.nodeDetail[indc].icon"
-                  />
-                  <div
-                    class="aproname"
-                    v-else
-                  >{{item.nodeDetail[indc].name | userNameFilter}}</div>
-                  <div class="carbonname">{{itemc.name}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import apiApprove from "@/api/ApiExAndapp";
-export default {
-  name: "ApprovalLog",
-  props: {},
-  components: {},
-  data() {
-    return {
-      approvalDialogData: []
-    };
-  },
-  computed: {},
-  filters: {
-    aprovestatue(val) {
-      switch (val) {
-        case -1:
-          return "(审批中)";
-        case 0:
-          return "(已拒绝)";
-        case 2:
-          return "(已拒绝)";
-        case 3:
-          return "";
-        case 1:
-          return "(已同意)";
-        default:
-          break;
-      }
-    },
-    userNameFilter(val) {
-      if (val) {
-        if (val.length >= 2) {
-          const result = val.indexOf(" (已转交");
-          if (result == -1) {
-            return val.substring(val.length - 2);
-          } else {
-            const val1 = val.split(" (已转交")[0];
-            if (val1.length >= 2) {
-              return val1.substring(val1.length - 2);
-            } else {
-              return val1;
-            }
-          }
-        } else {
-          return val;
-        }
-      }
-    }
-  },
-  watch: {},
-  mounted() {
-    this.queryOptLogApp();
-  },
-  methods: {
-    async queryOptLogApp() {
-      console.log(11111);
-
-      const res = await apiApprove.queryOptLogApp({
-        id: this.$route.query.auditId
-      });
-      console.log("res1111", res.data);
-      if (res.data.code == 200) {
-        if (res.data.data && res.data.data.length !== 0) {
-          this.approvalDialogData = res.data.data;
-        }
-      } else {
-      }
-    },
-    aprovecolor(val) {
-      switch (val) {
-        case -1:
-          return "#0286DF";
-        case 0:
-          return "#E84E1C";
-        case 2:
-          return "#E84E1C";
-        case 3:
-          return "";
-        case 1:
-          return "#57B583";
-        default:
-          break;
-      }
-    }
-  }
-};
-</script>
-<style lang="scss">
-.exam-add-edit {
-  border-left: 1px solid #ccc;
-}
-.exam-add-edit .el-tabs__header {
-  margin: 0;
-}
-.exam-add-edit {
-  margin-right: 15px;
-}
-</style>
-<style scoped lang="scss" rel="stylesheet/scss">
-.aproItem {
-  margin-top: 5px;
-}
-.exam-detail {
-  margin-top: 15px;
-  display: flex;
-  // border: 1px solid #e4e7ed;
-  border-top: 0;
-
-  .detail-left {
-    padding-left: 20px;
-  }
-  .exmAndapproInfo {
-    .title {
-      margin: 0;
-      /*padding: 20px 0 20px 20px;*/
-      /*border-bottom: 1px solid #E4E7ED;*/
-      font-size: 16px;
-      color: #333333;
-      font-weight: 700;
-      font-size: 18px;
-      padding: 0 0 12px 3px;
-      position: relative;
-    }
-    margin: 0;
-    font-size: 14px;
-    color: #666666;
-    // padding: 20px 0 0 0;
-  }
-}
-.logItem {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 10px;
-  // height: 10px ;
-}
-.aposolid::before {
-  content: "";
-  display: block;
-  // border: 2px solid  rgb(0, 149, 248);
-  border: 1.5px solid #dddddd;
-
-  background: #dddddd;
-  left: 23px;
-  top: 51px;
-  margin-bottom: 50px;
-  position: relative;
-}
-.dashed::before {
-  content: "";
-  display: block;
-  left: 23px;
-  top: 51px;
-  position: relative;
-  margin-bottom: 47px;
-  // margin-bottom: 30px;
-
-  // border: 2px dashed  rgb(0, 149, 248);
-  border: 1.5px dashed #dddddd;
-}
-.ii::before {
-  border: none;
-}
-/* 用户头像 */
-.userPic {
-  // margin-left: -5px;
-  width: 44px;
-  height: 44px;
-  position: relative;
-}
-.userPic .status {
-  border: 1px solid #ffffff;
-  background: #fff;
-  height: 15px;
-  width: 15px;
-  display: block;
-  text-align: center;
-  border-radius: 21.3333px;
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
-.userPicBig,
-.usernameBig {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-}
-.usernameBig {
-  line-height: 130px;
-  text-align: center;
-  font-size: 14px;
-  color: #fff;
-  background: #0286df;
-}
-.logItemInfo {
-  margin-left: 15px;
-  margin-top: -14px;
-  flex: 1;
-  min-width: 313px;
-  // margin-top: 60px;
-}
-.logItemInfo h1 {
-  font-size: 17px;
-  // font-weight: bold;
-  margin-bottom: 10px;
-  color: #606266;
-}
-.logItemInfo div {
-  color: #999;
-}
-.logtop {
-  margin-right: 100px;
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-  margin: 0 0 0px 0;
-}
-.logItemInfo .delivereason,
-.logItemInfo .aporeason {
-  text-align: initial;
-  word-break: break-all;
-  color: #212121;
-}
-.delivereason {
-  // padding-left: 45px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.aproItem {
-  display: flex;
-  flex-wrap: wrap;
-  text-align: center;
-}
-.aproItem_cont {
-  width: 100%;
-}
-.aproPic,
-.aproname {
-  font-size: 12px;
-  width: 34px;
-  height: 34px;
-  border-radius: 5px;
-  margin-top: 10px;
-}
-.aproname {
-  // margin-top: 0!important;
-  display: inline-block;
-  line-height: 90px;
-  text-align: center;
-  /* font-size: 16px; */
-  color: #fff !important;
-  background: #0286df;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.carbon {
-  margin-right: 30px;
-  text-align: -webkit-center;
-}
-.carbonname {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  width: 45px;
-  text-align: center;
-  overflow: hidden;
-  font-size: 14px;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-}
-.aproItem_img {
-  margin-right: 15px;
-}
-.procontent {
-  margin-bottom: 20px;
-}
-</style>
+<template>
+  <div
+    class="exam-add-edit"
+  >
+    <div class="exam-detail">
+      <div class="detail-left">
+        <div class="exmAndapproInfo">
+          <p class="title">审批日志</p>
+        </div>
+        <div
+          class="logItem"
+          v-for="(item,ins) in approvalDialogData"
+          :key="ins"
+          :class="[{'aposolid' : ins!=approvalDialogData.length-1&&(item.nodeStatus==1||item.nodeStatus==4||item.nodeStatus==2)},{'dashed' : ins!=approvalDialogData.length-1&&(item.nodeStatus!=1||item.nodeStatus!=4||item.nodeStatus==2)},{'ii':(approvalDialogData.length-1 - ins) == 1 &&(approvalDialogData[approvalDialogData.length -1].nodeType  == 'END')}]"
+        >
+          <!-- 用户图像 -->
+          <div
+            class="userPic"
+            v-if="item.nodeDetail"
+          >
+            <img
+              :src="item.nodeDetail[0].icon "
+              class="userPicBig"
+              style="margin-left: -1px;"
+              v-if="item.nodeDetail[0].icon&&item.nodeDetail.length==1&&item.nodeType!='CC_EVENT'&&item.nodeType!='START'"
+            />
+            <img
+              src="@/assets/img/sta2.png"
+              class="userPicBig"
+              style="    margin-left: 3px;"
+              v-else-if="item.nodeDetail.length>1&&item.nodeType!='CC_EVENT'&&item.nodeType!='START'"
+            />
+            <img
+              v-else-if="item.nodeType=='CC_EVENT'"
+              src="@/assets/img/sta3.png"
+              class="userPicBig"
+            />
+            <img
+              v-else-if="item.nodeType=='START'"
+              src="@/assets/img/sta1.png"
+              class="userPicBig"
+            />
+            <div
+              class="usernameBig"
+              style="display: flex;justify-content: center;align-items: center;"
+              v-else
+            >{{item.nodeDetail[0].name | userNameFilter}}</div>
+
+            <img
+              v-if="item.nodeStatus==1 &&item.nodeType!='CC_EVENT'"
+              src="@/assets/img/sucess.png"
+              class="status"
+            />
+            <!-- 拒绝抄送后 -->
+            <img
+              v-if="(item.nodeStatus!=0 &&item.nodeStatus!=-1)&&item.nodeType=='CC_EVENT'"
+              src="@/assets/img/sucess.png"
+              class="status"
+            />
+            <img
+              v-if="(item.nodeStatus==-1||item.nodeStatus==0)&&item.nodeType"
+              src="@/assets/img/wait.png"
+              class="status"
+            />
+            <img
+              v-if="(item.nodeStatus==2||item.nodeStatus==4)"
+              src="@/assets/img/erro.png"
+              class="status"
+            />
+          </div>
+          <!-- 审批 -->
+          <div
+            class="logItemInfo"
+            v-if="item.nodeType!='CC_EVENT'&&item.nodeStatus!=-1 && item.nodeType !='END' "
+          >
+            <h1 style="font-weight: 400;">{{item.nodeName=='发起申请'?'发起申请':item.nodeName=='抄送人'?'抄送人':'审批人'}}</h1>
+            <div
+              class="procontent"
+              v-for="(items,ind) in item.nodeDetail"
+              :key="ind"
+            >
+              <div class="aproItem">
+                <div
+                  class="aproItem_img"
+                  v-if="item.nodeDetail.length>1"
+                >
+                  <img
+                    :src="item.nodeDetail[ind].icon"
+                    class="aproPic"
+                    v-if="item.nodeDetail[ind].icon"
+                  />
+                  <div
+                    class="aproname"
+                    v-else
+                  >{{item.nodeDetail[ind].name | userNameFilter}}</div>
+                </div>
+                <div class="logtop">
+                  <span style="display:flex;align-items: center; font-size: 14px;  "><span style="text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; line-height: 30px;">{{items.name}}</span>
+                    <span v-if="item.nodeStatus==2&&items.approveStatus==-1 ||item.nodeStatus==4"></span><span
+                      :style="{'color': aprovecolor(items.approveStatus)}"
+                      v-else
+                    >{{items.approveStatus | aprovestatue}}</span></span>
+                  <span style="display:flex;align-items: center;font-size: 14px;margin-right: 30px;">{{items.approvalTime}}</span>
+                </div>
+                <div class="aproItem_cont">
+                  <div
+                    v-if="items.reason&&items.reason.length>5"
+                    class="delivereason"
+                  >{{items.reason}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 审批待通过 -->
+          <div
+            class="logItemInfo"
+            v-if="item.nodeType!='CC_EVENT'&&item.nodeStatus==-1"
+          >
+            <h1 style="font-weight: 400;">审批人</h1>
+            <div class="logtop">
+              <span style="margin-right:30px">{{item.nodeDetail[0].approvalTime}}</span>
+            </div>
+            <div
+              class="aproItem"
+              v-if="item.nodeDetail.length == 1"
+              style="margin-top:-11px"
+            >
+              <div
+                class=" carbon"
+                v-for="(itemc,indc) in item.nodeDetail"
+                :key="indc"
+              >
+                <!-- <img :src="item.nodeDetail[indc].icon" class="aproPic"  v-if="item.nodeDetail[indc].icon"/>
+                         <div class="aproname"  v-else>{{item.nodeDetail[indc].name | userNameFilter}}</div > -->
+                <div class="carbonname">{{itemc.name}}</div>
+              </div>
+            </div>
+            <div
+              class="aproItem"
+              v-if="item.nodeDetail.length > 1"
+            >
+              <div
+                class=" carbon"
+                v-for="(itemc,indc) in item.nodeDetail"
+                :key="indc"
+              >
+                <img
+                  :src="item.nodeDetail[indc].icon"
+                  class="aproPic"
+                  v-if="item.nodeDetail[indc].icon"
+                />
+                <div
+                  class="aproname"
+                  v-else
+                >{{item.nodeDetail[indc].name | userNameFilter}}</div>
+                <div class="carbonname">{{itemc.name}}</div>
+              </div>
+            </div>
+          </div>
+          <!-- 抄送人节点 -->
+          <div
+            class="logItemInfo"
+            v-if="item.nodeType=='CC_EVENT'"
+          >
+            <h1 style="font-weight: 400;">抄送人</h1>
+            <div>
+              <div class="logtop">
+                <span v-if="item.nodeStatus==1">已抄送{{item.nodeDetail.length}}人 </span>
+                <span v-else>抄送{{item.nodeDetail.length}}人 </span>
+                <span style="margin-right:30px">{{item.nodeTime}}</span>
+              </div>
+              <div class="aproItem ">
+                <div
+                  class=" carbon"
+                  v-for="(itemc,indc) in item.nodeDetail"
+                  :key="indc"
+                >
+                  <img
+                    :src="item.nodeDetail[indc].icon"
+                    class="aproPic"
+                    v-if="item.nodeDetail[indc].icon"
+                  />
+                  <div
+                    class="aproname"
+                    v-else
+                  >{{item.nodeDetail[indc].name | userNameFilter}}</div>
+                  <div class="carbonname">{{itemc.name}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import apiApprove from "@/api/ApiExAndapp";
+export default {
+  name: "ApprovalLog",
+  props: {},
+  components: {},
+  data() {
+    return {
+      approvalDialogData: []
+    };
+  },
+  computed: {},
+  filters: {
+    aprovestatue(val) {
+      switch (val) {
+        case -1:
+          return "(审批中)";
+        case 0:
+          return "(已拒绝)";
+        case 2:
+          return "(已拒绝)";
+        case 3:
+          return "";
+        case 1:
+          return "(已同意)";
+        default:
+          break;
+      }
+    },
+    userNameFilter(val) {
+      if (val) {
+        if (val.length >= 2) {
+          const result = val.indexOf(" (已转交");
+          if (result == -1) {
+            return val.substring(val.length - 2);
+          } else {
+            const val1 = val.split(" (已转交")[0];
+            if (val1.length >= 2) {
+              return val1.substring(val1.length - 2);
+            } else {
+              return val1;
+            }
+          }
+        } else {
+          return val;
+        }
+      }
+    }
+  },
+  watch: {},
+  mounted() {
+    this.queryOptLogApp();
+  },
+  methods: {
+    async queryOptLogApp() {
+      console.log(11111);
+
+      const res = await apiApprove.queryOptLogApp({
+        id: this.$route.query.auditId
+      });
+      console.log("res1111", res.data);
+      if (res.data.code == 200) {
+        if (res.data.data && res.data.data.length !== 0) {
+          this.approvalDialogData = res.data.data;
+        }
+      } else {
+      }
+    },
+    aprovecolor(val) {
+      switch (val) {
+        case -1:
+          return "#0286DF";
+        case 0:
+          return "#E84E1C";
+        case 2:
+          return "#E84E1C";
+        case 3:
+          return "";
+        case 1:
+          return "#57B583";
+        default:
+          break;
+      }
+    }
+  }
+};
+</script>
+<style lang="scss">
+.exam-add-edit {
+  border-left: 1px solid #ccc;
+}
+.exam-add-edit .el-tabs__header {
+  margin: 0;
+}
+.exam-add-edit {
+  margin-right: 15px;
+}
+</style>
+<style scoped lang="scss" rel="stylesheet/scss">
+.aproItem {
+  margin-top: 5px;
+}
+.exam-detail {
+  margin-top: 15px;
+  display: flex;
+  // border: 1px solid #e4e7ed;
+  border-top: 0;
+
+  .detail-left {
+    padding-left: 20px;
+  }
+  .exmAndapproInfo {
+    .title {
+      margin: 0;
+      /*padding: 20px 0 20px 20px;*/
+      /*border-bottom: 1px solid #E4E7ED;*/
+      font-size: 16px;
+      color: #333333;
+      font-weight: 700;
+      font-size: 18px;
+      padding: 0 0 12px 3px;
+      position: relative;
+    }
+    margin: 0;
+    font-size: 14px;
+    color: #666666;
+    // padding: 20px 0 0 0;
+  }
+}
+.logItem {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  // height: 10px ;
+}
+.aposolid::before {
+  content: "";
+  display: block;
+  // border: 2px solid  rgb(0, 149, 248);
+  border: 1.5px solid #dddddd;
+
+  background: #dddddd;
+  left: 23px;
+  top: 51px;
+  margin-bottom: 50px;
+  position: relative;
+}
+.dashed::before {
+  content: "";
+  display: block;
+  left: 23px;
+  top: 51px;
+  position: relative;
+  margin-bottom: 47px;
+  // margin-bottom: 30px;
+
+  // border: 2px dashed  rgb(0, 149, 248);
+  border: 1.5px dashed #dddddd;
+}
+.ii::before {
+  border: none;
+}
+/* 用户头像 */
+.userPic {
+  // margin-left: -5px;
+  width: 44px;
+  height: 44px;
+  position: relative;
+}
+.userPic .status {
+  border: 1px solid #ffffff;
+  background: #fff;
+  height: 15px;
+  width: 15px;
+  display: block;
+  text-align: center;
+  border-radius: 21.3333px;
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+.userPicBig,
+.usernameBig {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+}
+.usernameBig {
+  line-height: 130px;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+  background: #0286df;
+}
+.logItemInfo {
+  margin-left: 15px;
+  margin-top: -14px;
+  flex: 1;
+  min-width: 313px;
+  // margin-top: 60px;
+}
+.logItemInfo h1 {
+  font-size: 17px;
+  // font-weight: bold;
+  margin-bottom: 10px;
+  color: #606266;
+}
+.logItemInfo div {
+  color: #999;
+}
+.logtop {
+  margin-right: 100px;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  margin: 0 0 0px 0;
+}
+.logItemInfo .delivereason,
+.logItemInfo .aporeason {
+  text-align: initial;
+  word-break: break-all;
+  color: #212121;
+}
+.delivereason {
+  // padding-left: 45px;
+  margin-top: 5px;
+  font-size: 14px;
+}
+.aproItem {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+}
+.aproItem_cont {
+  width: 100%;
+}
+.aproPic,
+.aproname {
+  font-size: 12px;
+  width: 34px;
+  height: 34px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+.aproname {
+  // margin-top: 0!important;
+  display: inline-block;
+  line-height: 90px;
+  text-align: center;
+  /* font-size: 16px; */
+  color: #fff !important;
+  background: #0286df;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.carbon {
+  margin-right: 30px;
+  text-align: -webkit-center;
+}
+.carbonname {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  width: 45px;
+  text-align: center;
+  overflow: hidden;
+  font-size: 14px;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+}
+.aproItem_img {
+  margin-right: 15px;
+}
+.procontent {
+  margin-bottom: 20px;
+}
+</style>