<template>
  <div class="PropertyProcurementDetails padContent ck_detail" v-loading="pageLoad">
    <div style="border-bottom: 1px solid #e2e4eb; padding-bottom: 10px;display:flex;align-items:center;height:50px">
      <span class="pageTitle" style="float: inherit">耗材出库详情</span>
      <el-button @click="backTo" round style="background-color:#2961fe;color:#fff;margin-left:15px" >返回</el-button>
    </div>
    <div
      style="
        margin: 30px 0;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        padding: 20px;
        position: relative;
        
      "
    >
      <el-row
        class="HeaderDiv"
        style="border-bottom: 1px solid #e2e4eb; padding-bottom: 20px"
      >
        <el-col :span="12">
          <p
            class="c11 f14"
            style="padding-top: 12px"
            v-if="GetDetail.StockOutStatus == 1"
          >
            未出库
          </p>
          <p
            class="c11 f14"
            style="padding-top: 12px"
            v-if="GetDetail.StockOutStatus == 2"
          >
            部分出库
          </p>
          <p
            class="c11 f14"
            style="padding-top: 12px"
            v-if="GetDetail.StockOutStatus == 3"
          >
            已出库
          </p>
        </el-col>
        <el-col :span="12">
          <!-- <el-button @click="setStockoutdig=true" round style="float: right;background-color:#2961fe;color:#fff;margin-left:10px" v-if="isSelfCreate" :disabled="GetDetail.AuditStatus == 2">修改状态</el-button>
          <el-button @click="SetStockout" round style="float: right;background-color:#2961fe;color:#fff;" :disabled="GetDetail.AuditStatus != 2||GetDetail.StockOutStatus === 3">出库</el-button> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-row class="zcInfo">
            <el-col :span="12">
              <span>审核状态:</span>
              <span v-if="GetDetail.AuditStatus===1">审核中</span>
              <span v-if="GetDetail.AuditStatus===2">通过</span>
              <span v-if="GetDetail.AuditStatus===3">驳回</span>
            </el-col>
            <el-col :span="12">
              <span>审核备注 :</span>
              <span>{{ GetDetail.AuditRemark }}</span>
            </el-col>
            <el-col :span="12">
              <span>类型 :</span>
              <span v-if="GetDetail.Type===0">不限</span>
              <span v-if="GetDetail.Type===1">主营业务</span>
              <span v-if="GetDetail.Type===2">其他业务</span>
              <span v-if="GetDetail.Type===3">约课订单</span>
            </el-col>
            <el-col :span="12">
              <span>创建人 :</span>
              <span>{{ GetDetail.CreateByName }}</span>
            </el-col>
            <el-col :span="12">
              <span>创建时间 :</span>
              <span>{{ GetDetail.CreateDate }}</span>
            </el-col>
            <el-col :span="12">
              <span>总数量 :</span>
              <span>{{ GetDetail.TotalNumber }}</span>
            </el-col>
            <el-col :span="24">
              <span>备注 :</span>
              <span>{{ GetDetail.Remark }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <p class="f16 c11" style="margin-top: 25px">明细</p>
 
      <table
        style="margin-top: 10px"
        class="myTable noHoverTable"
        border="0"
        cellspacing="0"
        cellpadding="0"
      >
        <thead>
          <th>名称</th>
          <th>班级</th>
          <th>品牌</th>
          <th>分类</th>
          <th>数量</th>
          <th>已出数量</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in GetDetail.DetailList" :key="index">
            <td>{{ item.SuppliesName }}</td>
            <td>{{ item.ClassName }}</td>
            <td>{{ item.BrandName }}</td>
            <td>{{ item.CategoryName }}</td>
            <td>{{ item.Number }}</td>
            <td>{{ item.StockOutNum }}</td>
         
          </tr>

          <tr v-show="GetDetail.DetailList.length == 0">
            <td colspan="4" align="center">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
 
  </div>
</template>

<script>
import {GetSuppliesStockOutApplyForDetail,SuppliesStockOut,GetWareHouse,SetSuppliesStockOutApplyForState} from '../../api/sale/StockOutApplyFor'
export default {
  data() {
    return {
      ApplyForId: 0,
      isSelfCreate:false,//出库单是否是登录人创建
      images: [],
      imageOptions: {
        navbar: false,
        title: false,
      },
      pageLoad: false,
      storeList:[],
      GetDetail: {
        WareHouseId:0,
        DetailList: [
        ],
      },
      uploadImgList: [],
      setStockoutdig:false,
      stateMsg:{
        ApplyForId:0,
        Type:1,
        Remark:"",
      },
      stateOption:[
        {
          id:1,
          name:"取消"
        },
        {
          id:2,
          name:"审核通过"
        },
        {
          id:3,
          name:"审核驳回"
        }
      ]
    };
  },
  created() {
    this.ApplyForId = this.$route.query.Id;
    this.stateMsg.ApplyForId=this.$route.query.Id;
    this.getDetail();
    this.getWareHouse();
    
  },
  mounted() {
  },

  methods: {
    getWareHouse(){
      GetWareHouse({}).then(res=>{
        this.storeList=res.data.data
      })
    },
      inputval(val,maxVal,index){
         this.$forceUpdate();
         if(val>maxVal){
            this.GetDetail.DetailList[index].WaitStockOutNum=maxVal
         }else if(val<0||!val){
             this.GetDetail.DetailList[index].WaitStockOutNum=0
         }
      },
    backTo() {
      // this.$router.push("/sale/SuppliesStockOutApplyForMan");
      this.$router.go(-1);//返回上一层
    },
    getDetail() {
      this.pageLoad = true;
      let that=this
        GetSuppliesStockOutApplyForDetail({ApplyForId:this.ApplyForId}).then(res=>{
            this.pageLoad = false;
            if(res.data.resultCode===1){
            this.GetDetail=res.data.data
            this.GetDetail.DetailList.forEach(item=>{
              item.WaitStockOutNum=item.StockOutNum
            })
            that.isSelf();
            }
        })
    },
    //出库
    SetStockout() {
      let msg = {
        Id: this.GetDetail.Id,
        WareHouseId: this.GetDetail.WareHouseId,
        DetailList: [],
      };
      this.GetDetail.DetailList.map((item) => {
        let obj = {
          Id:item.Id,
          WaitStockOutNum:item.WaitStockOutNum
        };
        msg.DetailList.push(obj);
      });
      SuppliesStockOut(msg).then(res=>{

      })
    
    },
    SetStockoutState(){
      SetSuppliesStockOutApplyForState(this.stateMsg).then(res=>{
        if(res.data.resultCode===1){
          this.Success(res.data.message)
        }else {
          this.Error(res.data.message);
          }
      })
    },
    //判断登录人是否是创建人
    isSelf(){
     let loginId= JSON.parse(localStorage.getItem('loginUserInfo')).data.Id
     if(this.GetDetail.CreateBy===loginId){
       this.isSelfCreate=true
     }else{
       this.isSelfCreate=false
     }
    }
  },
};
</script>

<style>
.pageTitle {
    color: #111111;
    font-size: 30px;
    float: left;
    font-family: muil;
}
.ck_detail{
    margin: 15px 30px;
}
/* .PropertyProcurementDetails ._pp_info ._info_img li:hover ._see_img {
  opacity: 1;
}
.PropertyProcurementDetails ._pp_info ._see_img .icon-sousuo {
  color: #fff !important;
}
.PropertyProcurementDetails ._pp_info ._see_img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 120px;
  text-align: center;
  background-color: rgba(2, 2, 2, 0.4);
  display: inherit;
  opacity: 0;
  left: 0;
  -webkit-transition: all linear 0.4s;
  transition: all linear 0.4s;
}
.PropertyProcurementDetails ._pp_info ._info_img li img {
  width: 100%;
  height: 100%;
}
.PropertyProcurementDetails ._pp_info ._info_img li {
  display: inline-block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.PropertyProcurementDetails ._pp_info ._info_img {
  margin-top: 10px;
}
.PropertyProcurementDetails ._pb_son:last-child::after {
  display: none;
}
.PropertyProcurementDetails .signSpan {
  display: inline-block;
  width: 100px;
  height: 34px;
  line-height: 34px;
  border-radius: 22px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  background: #ffa475;
  color: #fff;
}
.PropertyProcurementDetails {
  position: relative;
} */
/* .PropertyProcurementDetails .zindex {
  z-index: 9999 !important;
  opacity: 1 !important;
}
.PropertyProcurementDetails .signature {
  width: 600px;
  background: #fff;
  padding: 15px;
  border-radius: 20px;
  cursor: pointer;
}
.PropertyProcurementDetails .Sign {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: -500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.PropertyProcurementDetails .Sign .signatureBox {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}
.Sign .canvasBox {
  box-sizing: border-box;
  flex: 1;
}
.PropertyProcurementDetails .Sign canvas {
  border: 1px solid #7d7d7d;
}
.PropertyProcurementDetails .Sign .btnBox {
  padding: 10px;
  text-align: center;
}
.PropertyProcurementDetails .Sign .btnBox button:first-of-type {
  background: transparent;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
} */
/* .PropertyProcurementDetails .Sign .btnBox button:last-of-type {
  background: #71b900;
  color: #fff;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
}
.PropertyProcurementDetails ._textareaNew {
  width: 80%;
  height: 50px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  font-size: 12px;
  color: #333333;
  padding: 12px 14px;
  margin-top: 13px;
  position: relative;
}
.PropertyProcurementDetails ._upload_tips {
  font-size: 12px;
  position: absolute;
  top: 71%;
  width: 100%;
  left: 0;
  text-align: center;
  color: #949494;
}

.PropertyProcurementDetails ._pb_son._none_after::after {
  content: "";
  display: none;
}
.PropertyProcurementDetails .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 143px;
  height: 82px;
  line-height: 82px;
  text-align: center;
}
.PropertyProcurementDetails .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.PropertyProcurementDetails ._delete_img {
  position: absolute;
  top: 0px;
  height: 82px;
  width: 143px;
  line-height: 34px;
  text-align: center;
  background-color: rgba(2, 2, 2, 0.6);
  display: inherit;
  opacity: 0;
  transition: all linear 0.5s;
}
.PropertyProcurementDetails ._delete_img i.iconfont {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #e95252 !important;
  background-color: rgba(251, 251, 251, 0.9);
  margin-top: 26px;
}
.PropertyProcurementDetails ._upload_box ul li {
  float: left;
  height: 82px;
  width: 143px;
  padding: 0px 20px 20px 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
.PropertyProcurementDetails ._upload_box ul li img {
  height: 82px;
  width: 143px;
}
.PropertyProcurementDetails ._upload_box ul li:hover ._delete_img {
  opacity: 1;
}
.PropertyProcurementDetails .button span {
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 22px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  margin-right: 20px;
}
.tongguo {
  background: rgba(0, 210, 214, 1);
  color: #fff;
}
.bohui {
  border: 1px solid rgba(0, 210, 214, 1);
  color: rgba(0, 210, 214, 1);
}
.PropertyProcurementDetails ._zhuan_msg {
  font-size: 12px;
  margin-top: 10px;
  padding-bottom: 10px;
}
.PropertyProcurementDetails ._zhuan_msg span {
  display: inline-block;
  margin-right: 5px;
  color: #696969;
} */
/* .PropertyProcurementDetails ._zhuan_msg span:last-child {
  margin-left: 5px;
}
.PropertyProcurementDetails ._zhuan_msg p:nth-child(2) {
  color: #696969;
}
.PropertyProcurementDetails ._zhuan_msg ._color_green {
  color: #089bab;
}
.PropertyProcurementDetails ._right_content ._name ._n {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
}
.PropertyProcurementDetails ._right_content ._name ._m {
  color: #ffffff;
  font-size: 12px;
  display: inline-block;
  padding: 2px 5px;
  background-color: #e95252;
  margin-left: 5px;
  border-radius: 4px;
}
.PropertyProcurementDetails ._right_content ._name ._sm {
  color: #ffffff;
  font-size: 12px;
  display: inline-block;
  padding: 2px 5px;
  background-color: #ff9600;
  margin-left: 5px;
  border-radius: 4px;
  font-weight: 100;
}
.PropertyProcurementDetails ._right_content ._name ._sn {
  color: #ffffff;
  font-size: 12px;
  display: inline-block;
  padding: 2px 5px;
  background-color: #089bab;
  margin-left: 5px;
  border-radius: 4px;
}
.PropertyProcurementDetails ._right_content ._time,
.PropertyProcurementDetails ._time {
  font-size: 12px;
  color: #666666;
  padding-top: 5px;
}
.PropertyProcurementDetails ._right_content ._pp_info,
.PropertyProcurementDetails ._textarea {
  border-radius: 10px;
  background: rgba(245, 245, 245, 1);
  font-size: 12px;
  color: #333333;
  padding: 12px 14px;
  margin-top: 13px;
  position: relative;
  width: 80%;
}
.PropertyProcurementDetails ._right_content ._pp_info:before {
  display: block;
  content: "";
  border-width: 8px 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent rgba(245, 245, 245, 1) transparent;
  position: absolute;
  left: 10px;
  top: -16px;
}
.PropertyProcurementDetails ._mgt_15 {
  margin-top: 15px;
}
.PropertyProcurementDetails ._more ._right_content .iconfont {
  color: #aaaaaa;
}
.PropertyProcurementDetails ._more ._right_content ._name ._n {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
  padding-left: 3px;
}
.PropertyProcurementDetails ._pb_son {
  position: relative;
  padding-left: 75px;
  min-height: 100px;
  padding-bottom: 10px;
}
.PropertyProcurementDetails ._left_radius {
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  background-color: #089bab;
  color: white;
  font-size: 12px;
  position: absolute;
  left: 15px;
} */
/* .PropertyProcurementDetails ._left_radius_err {
  background-color: #e95252 !important;
}
.PropertyProcurementDetails ._left_radius_sus {
  background-color: #ffa475 !important;
}
.PropertyProcurementDetails ._pb_son::after {
  content: "";
  width: 4px;
  height: 100%;
  background-color: #089bab;
  display: inline-block;
  position: absolute;
  clear: both;
  left: 33px;
  top: 0;
}
.PropertyProcurementDetails ._pb_son._none_after::after {
  content: "";
  display: none;
}
.PropertyProcurementDetails ._pb_son._bohui_after::after {
  background-color: #e95252 !important;
  display: inline-block;
}
.PropertyProcurementDetails ._process_box {
  padding-top: 30px;
  padding-bottom: 40px;
}
.PropertyProcurementDetails ._process {
  margin-top: 20px;
}
.PropertyProcurementDetails .rightDiv .FirstName {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: rgba(40, 202, 204, 0.3);
  color: #089bab;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  font-size: 18px;
}
.PropertyProcurementDetails .stepItem .rightDiv {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 5px 0px rgba(176, 176, 176, 0.1);
  border-radius: 10px;
}
.PropertyProcurementDetails .stepItem ._left_radius {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 2;
} */
/* .PropertyProcurementDetails .stepItem {
  position: relative;
  padding-left: 75px;
  min-height: 100px;
  padding-bottom: 30px;
}
.PropertyProcurementDetails .rizhi {
  font-size: 12px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  text-decoration: underline;
  color: rgba(166, 198, 198, 1);
  position: absolute;
  right: 0;
  cursor: pointer;
}
.PropertyProcurementDetails .allStep li .line {
  width: 57px;
  display: inline-block;
  border-bottom: 1px dashed #ffa475;
  margin: 0 10px;
  position: relative;
  top: -7px;
}
.PropertyProcurementDetails .allStep li {
  display: inline-block;
  font-size: 12px;
  font-family: "Microsoft YaHei";
}
.PropertyProcurementDetails .allStep .circle img {
  width: 100%;
  height: 100%;
}
.PropertyProcurementDetails .allStep .circle .circleSpan {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: rgba(232, 232, 232, 1);
  border-radius: 50%;
}
.PropertyProcurementDetails .allStep .circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
} */
.PropertyProcurementDetails .zcInfo .el-col {
  font-size: 12px;
  margin-top: 20px;
  color: #111111;
}
.PropertyProcurementDetails .zcInfo .el-col>span:nth-child(1) {
  color: #999999;
  display: inline-block;
  width: 85px;
}
.PropertyProcurementDetails .HeaderDiv .underline {
  display: block;
  width: 135px;
  height: 2px;
  position: absolute;
  bottom: 0;
  background: #089bab;
}
.PropertyProcurementDetails .titleSpan {
  position: absolute;
  left: 0;
}
.PropertyProcurementDetails .titleSpan span {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  background: rgba(40, 202, 204, 0.3);
  border-radius: 50%;
  font-size: 20px;
  color: #089bab;
  text-align: center;
}
.PropertyProcurementDetails .StateCol span {
  width: 60px;
  height: 26px;
  line-height: 26px;
  border-radius: 8px;
  display: inline-block;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-family: "Microsoft YaHei";
}
.PropertyProcurementDetails .StateCol .spz {
  background: rgba(114, 184, 255, 1);
}
.PropertyProcurementDetails .StateCol .ytg {
  background: #089bab;
}
.PropertyProcurementDetails .StateCol .wtg {
  background: #ffa475;
}
.routerTitle {
    background: #fff;
    padding: 15px 30px;
    text-align: right;
    border-bottom: 1px solid rgb(226, 228, 235);
    padding-bottom: 10px;
}

.padContent {
    padding: 15px 30px;
    box-sizing: border-box;
}

.chartTitle .el-input__icon {
    line-height: unset;
    color: #fff!important;
}

.el-input__suffix {
    display: table-cell;
    vertical-align: middle;
}

.chartTitle .el-select .el-input__inner {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: #fff;
}

.chaxunSpan {
    width: 90px;
    height: 34px;
    line-height: 34px;
    background: #089bab;
    border-radius: 17px;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-family: "Microsoft YaHei";
}

.addSpan {
    width: 90px;
    height: 34px;
    border: 1px solid #089bab;
    color: #089bab;
    border-radius: 20px;
    line-height: 34px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: "Microsoft YaHei";
    box-sizing: border-box;
}

.pageTitle {
    color: #111111;
    font-size: 30px;
    /*14px;*/
    float: left;
    /*padding-top: 10px;*/
    margin-top: -10px;
    font-family: muil;
    /* font-weight: 600; */
}

/* .roatImg {
    transform: rotate(180deg);
} */


/* chexkbox */

.myTable input[type="checkbox"] {
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 15px;
    position: relative;
}

.myTable input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #B9ECED
}

.myTable input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #089bab;
    color: #089bab;
    font-size: 18px;
    font-family: "PingFangR";
}


/* myTable */

.myTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei"!important;
    min-width:1280px;
}

.myTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "muil";
    font-size: 14px;
}

.myTable thead tr {
    background: transparent!important;
}


/* .myTable .hoverSpan1{
    left: -20px;
}
.myTable .hoverSpan2{
    right: -20px;
} */

.myTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
}

.miniTable tr td {
    padding: 6px 0 6px 20px!important;
}

.myTable tbody tr {
    background: #fff;
    border-bottom: 1px solid #F8FAFB;
    cursor: pointer;
}

.myTable tbody tr:last-child {
    border-bottom: none;
}

.noHoverTable tr {
    border-bottom: none!important;
}

.noHoverTable tr:nth-child(even) {
    background: #fff!important;
}

.myTable tr:nth-child(even) {
    background: #F6F9FB;
}

.myTable tbody .trNobottom:first-child {
    border-top: none!important;
}

.myTable .trNobottom {
    border-top: 1px solid #E2E4EB!important;
    border-bottom: none!important;
}

.myTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
}

.noHoverTable tbody tr:hover {
    box-shadow: 0 0 0 transparent!important;
}

.myTable tbody tr:hover .commonStyle {
    /* display: block; */
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
}

.myTable tbody tr:hover td {
    border-radius: 0!important;
}

.myTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
}

.myTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
}

.myTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
}

.myTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
}

.borderTable tbody tr:first-child td:first-child {
    border-radius: 0!important;
}

.borderTable tbody tr:first-child td:last-child {
    border-radius: 0!important;
}


/* 合并无圆角 */

.noHoverTable tbody tr:first-child td:first-child {
    /* border-radius:0!important; */
}

.noHoverTable tbody tr:first-child td:last-child {
    /* border-radius:0!important; */
}

.noHoverTable tbody tr:last-child td:first-child {
    border-radius: 0!important;
}

.noHoverTable tbody tr:last-child td:last-child {
    border-radius: 0!important;
}

.myTable tr td {
    position: relative;
    padding: 11px 0 11px 20px;
}

.f12 {
    font-size: 12px;
    font-family: "Microsoft YaHei"!important;
}

.f14 {
    font-size: 14px;
}
.f16 {
    font-size: 16px;
}

.f20 {
    font-size: 20px;
}

.f22 {
    font-size: 39px;
    font-family: muil;
    font-weight: 500;
}

.f40 {
    font-size: 40px;
}

.c11 {
    color: #111111;
}

.c99 {
    color: #999999;
}

.cd6 {
    color: #089bab;
}

.bold {
    /* font-family: "PingFangR" */
    font-family: "MUIL";
    font-weight: 600;
}

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}

.basefix:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
}

.cred {
    color: #F56C6C;
}


/* 头部切换 */

.ChangeTable {
    float: left;
}

.ChangeTable .spanActive {
    color: #fff!important;
    background: #089bab!important;
    box-shadow: 0px 5px 6px 0px rgba(28, 162, 164, 0.4);
}

.ChangeTable span {
    display: inline-block;
    width: 100px;
    text-align: center;
    height: 34px;
    line-height: 34px;
    background: #e2e4e8;
    border-radius: 8px;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    cursor: pointer;
    margin-left: 20px;
    color: #B8C4C4;
}

.ColorSpan {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-family: "Microsoft YaHei";
}

.huangSpan {
    background: #FFE4D5;
    color: #FFA87C;
}

.greenSpan {
    background: #BEEFF0;
    color: #089bab;
}

.purpleSpan {
    background: #D7D6FF;
    color: #7B78FF;
}

.buleSpan {
    background: #D4EAFF;
    color: #73B8FF;
}

.redSpan {
    background: #FFD6D5;
    color: #FF7874;
}

.dialogI {
    width: 4px;
    height: 4px;
    background: rgba(255, 164, 117, 1);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: -2px;
}

.underline {
    text-decoration: underline;
    cursor: pointer;
}

.dialogul {
    position: relative;
    left: 0;
}

.dialogul li {
    display: inline-block;
    min-width: 204px;
    height: 50px;
    line-height: 50px;
    background: rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 6px 14px 0px rgba(176, 176, 176, 0.1);
    box-shadow: 0px 6px 14px 0px rgba(176, 176, 176, 0.1);
    border-radius: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.dialogul li .el-input__inner {
    border: none!important;
    outline: none!important;
    color: #111111;
    padding-left: 15px!important;
}

.text1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.backTo {
    width: 80px;
    height: 34px;
    line-height: 34px;
    background: #089bab;
    border-radius: 17px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    display: inline-block;
    margin-left: 15px;
    cursor: pointer;
}


/* 日志 */

.detailsIT_Journal .InfoChangeLog {
    height: auto;
    max-height: 220px;
    background-color: #FFFFFF;
}

.detailsIT_Journal .changLogList {
    padding-left: 20px;
    max-height: 180px;
    overflow: auto;
}

.detailsIT_Journal .changLogList_l {
    border-left: 1px solid #E9E9E9;
    position: relative;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
}

.detailsIT_Journal ._radius_green {
    background-color: #47BF8C;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -4px;
    top: 19px;
}

.detailsIT_Journal .changLog_time {
    color: #666666;
    font-size: 12px;
    display: inline-block;
    padding-right: 10px
}

.zcSpanQuery {
    position: absolute;
    right: 50px;
    top: -60px;
    display: inline-block;
    width: 75px;
    height: 32px;
    line-height: 32px;
    background: #089bab;
    border-radius: 17px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    display: inline-block;
    margin-left: 15px;
    cursor: pointer;
}

.vue-treeselect__placeholder {
    color: #111111!important;
}


/* borderTable */

.borderTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei"!important;
}

.borderTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "PingFangR";
}

.borderTable thead tr {
    background: transparent!important;
}

.borderTable .hoverSpan1 {
    left: -20px;
}

.borderTable .hoverSpan2 {
    right: -20px;
}

.borderTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
}

.borderTable tr {
    background: #fff;
    cursor: pointer;
}

.borderTable tr:nth-child(even) {
    /* background:#F6F9FB!important; */
}


/* .borderTable .trNobottom{
    border-top:  4px solid #F8FAFB!important;
    border-bottom:none!important;
} */

.borderTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
}

.borderTable tbody tr:hover .commonStyle {
    display: block;
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
}

.borderTable tbody tr:hover td {
    border-radius: 0!important;
}

.borderTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
}

.borderTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
}

.borderTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
}

.borderTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
}

.borderTable tr td {
    position: relative;
    padding: 11px 0 11px 20px;
    border: 1px solid #E2E4EB;
}

.tableMoreUl {
    background: #F6F9FB;
    width: 100%;
    font-size: 12px;
}

.tableMoreUl li {
    border-bottom: 1px solid #E2E4EB;
    padding: 12px;
}

.tableMoreUl li span {
    display: inline-block;
    width: 22%;
}

.tableMoreUl li:last-child {
    border-bottom: none;
}

.el-textarea__inner {
    border: none!important;
    outline: none!important;
}

.myTable tbody .noData td {
    border-radius: 0!important;
}
.lastTdLeft{
    border-radius: 0 0 0 20px!important;
}
.lastTdRight{
    border-radius: 0 0 20px 0!important;
}
</style>
