<template>
    <div>
              <el-dialog :append-to-body="true" fullscreen :visible.sync="viewDialog" title="" center>
               <el-card class="box-card" shadow="nerver">
                    <div slot="header" class="clearfix">
                      <span class="topClass">基本信息</span>
                    </div>

                    <el-row type="flex" class="row-bg">
                       <el-col :span="8" class="flex_text">
                         　　标题 : <span class="flex_name"> {{bidInfo.tenderTitle}}</span>
                       </el-col>
                         <el-col :span="8" class="flex_text">
                         　　状态 : <span class="flex_name"> <el-tag effect="plain" v-if="bidInfo.status ==1">进行中</el-tag>
                                <el-tag effect="plain" v-if="bidInfo.status ==2" type="info">已结束</el-tag>
                                <el-tag effect="plain" v-if="bidInfo.status ==3" type="danger">已作废</el-tag>
                                <el-tag effect="plain" v-if="bidInfo.status ==4" type="warning">未开始</el-tag>
                                </span>
                       </el-col>
                         <el-col :span="8" class="flex_text">
                         招标类型 :  <span class="flex_name"><el-tag v-if="bidInfo.tenderType == 1"  >物流</el-tag>
                                    <el-tag v-if="bidInfo.tenderType == 2" >原料</el-tag>
                                    <el-tag v-if="bidInfo.tenderType == 3" >销售</el-tag>
                                    <el-tag v-if="bidInfo.tenderType == 4" >加工承揽</el-tag>
                                    </span>
                       </el-col>
                    </el-row>
                     <el-row type="flex" class="row-bg">
                       <el-col :span="8" class="flex_text">
                         招标规则 : <span class="flex_name">    <el-tag v-if="bidInfo.tenderRule == 1" type="success" effect="plain">价低者得</el-tag>
          <el-tag v-if="bidInfo.tenderRule == 2" effect="plain" >价高者得</el-tag></span>
                       </el-col>
                         <el-col :span="8" class="flex_text">
                         开始时间 : <span class="flex_name"> {{bidInfo.startTime}} </span>
                       </el-col>
                         <el-col :span="8" class="flex_text">
                         截止时间 :  <span class="flex_name">{{bidInfo.endTime}}
                                    </span>
                       </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                       <el-col :span="24" class="flex_text">
                         　　 备注：<span class="flex_name">{{bidInfo.tenderRemark}}</span>
                       </el-col>
                    </el-row>
                  </el-card>

 
                    <el-card class="box-card" shadow="nerver">
                       <div slot="header" class="clearfix">
                          <span class="topClass"> 所有标的</span>
                        </div>
                          <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                                <el-tab-pane label="标的详情" name="first">
                              <div slot="header" class="clearfix">
                                <span class="topClass">投的详情</span>
                              </div>
                                      <div class="head-container" style="margin: 30px 0 10px 0;">
                                        <span style="fontSize:13px">货物名称</span>
                                          <el-input
                                            v-model="param.goodsName"
                                            clearable
                                            placeholder="请输入货物名称"
                                            style="width: 200px;"
                                            size="small"
                                            class="filter-item"
                                            @keyup.enter.native="getParam"
                                            @clear="getParam"
                                          />
                                      <span style="fontSize:13px;marginLeft:30px">始发地</span>
                                          <el-input
                                            v-model="param.departureName"
                                            clearable
                                            placeholder="请输入始发地"
                                            style="width: 200px;"
                                            size="small"
                                            class="filter-item"
                                            @keyup.enter.native="getParam"
                                            @clear="getParam"
                                          />
                        
                                      <span style="fontSize:13px;marginLeft:30px;">目的地</span>
                                          <el-input
                                            v-model="param.destinationName"
                                            clearable
                                            placeholder="请输入货物名称"
                                            style="width: 200px;"
                                            size="small"
                                            class="filter-item"
                                            @keyup.enter.native="getParam"
                                            @clear="getParam"
                                          />
                                          <!-- 搜索 -->
                                          <span style="fontSize:13px;marginLeft:30px;">是否投标</span>
                                          <el-select v-model="param.logisticsIsTender" size="small"  @keyup.enter.native="getParam" @clear="getParam" clearable placeholder="请选择">
                                            <el-option  label="未投标" value="0"> </el-option>
                                            <el-option  label="有投标" value="1"> </el-option>
                                          </el-select>
                                      <el-button class="filter-item" style="marginLeft:20px;marginBottom:20px" size="small" type="primary" icon="el-icon-search" plain @click="getParam">搜索</el-button>
                                      <div style="height:20px"></div>
                                      <el-table center :data="Paramdata"  :header-cell-style="{ background: '#f5f7fa', }" border v-loading="tableLoading" stripe style="width: 100%;">

                                        <el-table-column prop="goodsName" fixed="left" label="货品名称" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="goodsNumber"  label="数量（吨）" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="departureName"  label="始发地" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="destinationName" label="目的地" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="predictDistance" label="预估运输距离（公里/海里）" width="128" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="transportUnitPrice" label="运输单价含税价（元/吨）"  width="120" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="appendix" label="附件" align="center" width="100">
                                            <template slot-scope="scope">
                                                <el-link v-if="scope.row.receiptPathUrl" :href="'http://view.officeapps.live.com/op/view.aspx?src='+scope.row.receiptPathUrl" type="primary" target="_target"><i class="el-icon-view"></i> 查看</el-link>
                                            </template>
                                          </el-table-column>
                                            <el-table-column label="状态" align="center" width="100">
                                        <template slot-scope="scope">
                                          <el-tag effect="plain" v-if="scope.row.status ==1">进行中</el-tag>
                                          <el-tag effect="plain" v-if="scope.row.status ==2" type="info">已结束</el-tag>
                                          <el-tag effect="plain" v-if="scope.row.status ==3" type="danger">已作废</el-tag>
                                          <el-tag effect="plain" v-if="scope.row.status ==4" type="warning">未开始</el-tag>
                                        </template>
                                      </el-table-column>
                                        <el-table-column prop="logisticsIsTender" label="是否投标" :show-overflow-tooltip="true" align="center" >
                                          <template slot-scope="scope">
                                            <el-tag v-if="scope.row.logisticsIsTender == 0" type="info">未投标</el-tag>
                                            <el-tag v-if="scope.row.logisticsIsTender == 1" type="warning">有投标</el-tag>
                                          </template>
                                        </el-table-column>
                                        <el-table-column prop="tenderLogisticsRule" label="中标规则" :show-overflow-tooltip="true" align="center" >
                                          <template slot-scope="scope">
                                            <el-tag v-if="scope.row.tenderLogisticsRule == 1" type="success" effect="plain">价低者得</el-tag>
                                            <el-tag v-if="scope.row.tenderLogisticsRule == 2" effect="plain" >价高者得</el-tag>
                                          </template>
                                        </el-table-column>
                                        <el-table-column prop="startTime" label="投标起始时间" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="endTime" label="投标结束时间" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true" align="center" />
                                        <el-table-column prop="logisticsRemark" label="备注" :show-overflow-tooltip="true" align="center" />
                                  
                                      </el-table>
                                      <div class="pagination">
                                        <el-pagination
                                          :current-page.sync="param.current"
                                          :page-size="param.size"
                                          layout="total, sizes, prev, pager, next, jumper"
                                          :total="total1"
                                          :page-sizes="[10, 20, 30, 50]"
                                          background
                                          @size-change="handleSizeChangeParam"
                                          @current-change="handleCurrentChangeParam"
                                        />
                                      </div>
                              <div style="height:60px"></div>
                                </div>
                                </el-tab-pane>
                                <el-tab-pane label="投标详情" name="second">
                                    <!-- <el-card class="box-card" shadow="nerver"> -->
                                      <!-- <div slot="header" class="clearfix">
                                        <span class="topClass">投标详情</span>
                                      </div> -->
                                              <ckTable ref="ckTable" @change="costPlannedAmountChange($event)"></ckTable>
                                    <!-- </el-card> -->
                                </el-tab-pane>

                          </el-tabs>
                    </el-card>

                  <!-- <el-card class="box-card" shadow="nerver">
                    <div slot="header" class="clearfix">
                      <span class="topClass">投标详情</span>
                    </div>
                  <ckTable ref="ckTable"  @change="costPlannedAmountChange($event)"></ckTable>
                   </el-card> -->

                       <div slot="footer" class="paginationParam">
                    <!-- <el-button @click="viewDialog = false">取消</el-button> -->
                    <el-button :loading="loading" type="primary" @click="viewDialog = false">返回</el-button>
                    <!-- <el-button :loading="loading" type="primary" @click="viewDialog = false">确认</el-button> -->
                  </div>
                  <el-dialog :title="goodsName" width="90%" center :visible.sync="dialogTableVisible" append-to-body>
                               <ckDialog ref="ckDialog"></ckDialog>
                          </el-dialog>

          </el-dialog>

    </div>
</template>


<script>
import { getTableList, getQueryId, getQueryAdd, getQueryEdit, getQueryDelete, loadCustomer,apiFile,getSaleId } from '@/api/bid'
import { Notification, MessageBox } from 'element-ui'

export default {
   components:{

  },
  data() {
    const checkTel = (rule, value, callback) => {
      console.log(this.form.fileUrl)
      console.log(value, 'value')
      if (this.form.fileUrl == null || this.form.fileUrl == '') {
        callback(new Error('请选择附件'))
        console.log('没过')
      } else {
        callback()
        console.log('过')
      }
    }
    return {
      showType:false,
      form: {
        tenderType:"",
        tenderRule:"",
        fileUrl:""
      },
      applyDateStart:[],
      data: [],
      fileList: [],
      fileData:{},
      BASE_API: process.env.BASE_API,
      dialog: false,
      delLoading: false,
      viewDialog: false,
      loading: false,
      isAdd: false,
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总数量
      rules: {
        tenderTitle: [
          { required: true, message: '标题不为空', trigger: 'blur' }
        ],
        tenderRule: [
          { required: true, message: '请选择招标规则', trigger: 'blur' }
        ],
        tenderType: [
          { required: true, message: '请选择投标类型', trigger: 'blur' }
        ],
        fileUrl: [
          { validator: checkTel, trigger: 'change' }
        ],
        // startTime: [
        //   { type:"array",required: true, message: '发布时间不为空', trigger: 'blur' }
        // ]
      },
      tenderType:[
        {id:1,name:"物流",value:"logistics"},
        {id:2,name:"原料",value:"raw"},
        {id:3,name:"销售",value:"sale"},
        {id:4,name:"加工承揽",value:"processing"},
      ],
      tenderRule:[
        {id:1,name:"价低者得"},
        {id:2,name:"价高者得"},

      ],
      queryTypeOptions: [
        { key: 'name', display_name: '字典名称' },
        { key: 'remark', display_name: '描述' }
      ],
      query: {
        type: '',
        value: '',
        tenderRule:"",
        tenderType:"",
        startTime:"",
        endTime:""
      },
      param: {
        current: 1,
        size: 10
      },
      total1: 0,
      Paramdata: [],
      bidDate: [],
      buton: false,
      fileUrl:"",
      tableLoading:false,
      dialogTableVisible:false,
      goodsName:"",
      activeName:"first",
      bidInfo:{},
      saleViewDialog:false,
    }
  },
  created() {
    this.getDictData()
  },
  methods: {
     // 投标详情 向父元素传递数据
    costPlannedAmountChange(val){
      console.log(val)
 
      this.dialogTableVisible = true
      setTimeout(() => {
        this.goodsName = val.goodsName
       this.$refs.ckDialog.priceData = val
      this.$refs.ckDialog.getTenantList()
        console.log(this.$refs.ckDialog)
      }, 300);
    },
    onApplyDate(){
      let startTime
      let endTime
            if(this.applyDateStart != null){
              this.query.startTime =this.applyDateStart[0]
              this.query.endTime = this.applyDateStart[1]
            }else{
              this.query.startTime =""
              this.query.endTime =""
            }
      this.handleFind()
    },
    onShowType(){
      console.log(this.form.tenderType+"this.form.tenderType ")
      console.log(this.form.tenderRule+"this.form.tenderRule")
        if(this.form.tenderType ==undefined ||  this.form.tenderRule == undefined){
          this.showType = false
        }else{
          this.showType = true
        }
    },
    onTenderType(value,index){
      console.log(value)
      // let value= ""
      this.onShowType()
      let tenderType =this.tenderType
      // id减一得到下标
      let data = tenderType[value - 1].value
      apiFile(data).then((res)=>{
        console.log(res)
        this.fileUrl = res.data.data.path
      })

    },
    // 发布时间
    oncustom() {
      console.log(this.bidDate)
      if (this.bidDate != null) {
        this.form.startTime = this.bidDate[0]
        this.form.endTime = this.bidDate[1]
      }
    },
    onClear() {
      this.bidDate = []
      console.log(this.form)
    },
    // 下载
    onLoad(row) {
      // const params = new URLSearchParams()
      // params.append('path', row)
      const a = document.createElement('a')
      // a.href= /bidding/load
      const url = window.location.origin + process.env.BASE_API + '/bidding/load?path=' + encodeURIComponent(row)
      a.href = url
      a.click()
    },
    // 搜索
    handleFind: function() {
      this.currentPage = 1
      this.getDictData()
    },
    // 获取详情
    getDictData: function() {
      this.loading = true

      const params = new URLSearchParams()
      params.append('current', this.currentPage)
      params.append('size', this.pageSize)
      params.append('tenderType', this.query.tenderType)
      params.append('tenderTitle', this.query.value)
      params.append('tenderRule', this.query.tenderRule)
      params.append('startTime',this.query.startTime )
      params.append('endTime', this.query.endTime)

      // const data = {
      //   page: this.currentPage,
      //   size: this.pageSize,
      //   title: this.query.value
      // }

      getTableList(params).then(res => {
        console.log(res)
        // this.data = res.data.data.records
        let data = res.data.data.records
        console.log(new Date().valueOf(),"当前时间")
        data.map((res)=>{
          // 开始时间
          let startTime = res.startTime
          // 投标结束时间
          let endTime = res.endTime

          const date = new Date(startTime)
          const modify = new Date(endTime)

          const start = date.valueOf()         //开始时间
          const end = modify.valueOf()        //投标结束时间
          const time = new Date().valueOf()   //当前时间
          console.log(start,"start")
          console.log(end,"end")
         if(res.isInvalid == 2){
             res.status = 3
            console.log("作废了")
          }else if(time < start){
            res.status = 4
            console.log("当前时间小于开始时间，未开始")
          }else if(time > start && time < end){
            res.status = 1
            console.log("当前时间大于开始时间并且小于投标结束时间，进行中")
          }else if(time > end){
            res.status = 2
            console.log("当前时间大于投标结束时间，已结束")
          }

          return res
        })
        this.data = data
        this.total = res.data.data.total
        this.loading = false
      })
    },
    // 点击时候
    handleUpload(){
      console.log("我被固定了")
      if(this.form.tenderType ==undefined ||  this.form.tenderRule == undefined){
       this.$message({
          message: '请先选择招标类型和招标规则',
          type: 'warning'
        });
      }
      // return false
    },
    // 文件移除的时候
    handleRemove(file, fileList) {
      this.form.fileUrl = ''
      console.log(file, fileList, this.fileList, '移出')
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      console.log(file, fileList, '上传')
      if (file.response) {
        console.log(file.response, 'file')
        if (file.response.code == '200') {
          this.form.fileUrl = file.response.data.filePath
          this.form.tenderParentId = file.response.data.tenderParentId
        } else {
          Notification.error({
            title: file.response.msg,
            duration: 1000
          })
          this.fileList = []
        }
      }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file, 'file21')
      // 判断添加 还是 编辑
      let officeUrl
      if(this.isAdd){
        officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+file.response.data.filePath
      }else{
        officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+this.form.fileUrl
      }
// 在新窗口打开编码后 的链接
window.open(officeUrl,'_target')
      // window.location.href = file.url
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个附件，本次选择了 ${files.length} 个文件`)
    },
    hanndleErr(err, files, fileList) {
      console.log(err, 'err')
      console.log(files, 'err')
      console.log(fileList, 'err')
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
      onFile(){
        // let url = "https://fire-development.oss-cn-beijing.aliyuncs.com/bid/dev/客户批量上传模板.xlsx"
      if(this.form.tenderType ==undefined ||  this.form.tenderRule == undefined){
       this.$message({
          message: '请先选择招标类型和招标规则',
          type: 'warning'
        });
      }else{
        window.open(this.fileUrl, '_self');
      }
    },

    // 字典名称提交动作
    doSubmit() {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
          if (this.isAdd) {
            // 新增字典
            this.buton = true
            getQueryAdd(this.form).then((res) => {
              if (res.data.code === 200) {
                this.dialog = false
                this.getDictData()
                this.buton = false
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }

              this.$refs['form'].resetFields()
            }).catch(err => {
              this.buton = false
            })
          } else {
            // 更新
            getQueryEdit(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.getDictData()
            })
          }
        }
      })
    },
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday
    },
    // 添加字典
    handleAdd: function() {
      this.isAdd = true
      this.form = {}
      const end = new Date()
      const start = new Date()
      end.setTime(start.getTime() + 3600 * 1000 * 24 * 1)
      console.log(this.formatDate(end))
      this.form.startTime = this.formatDate(start) + ' 00:00:00'
      this.form.endTime = this.formatDate(end) + ' 15:00:00'
      this.bidDate = [this.form.startTime, this.form.endTime]
      this.form.fileUrl = null
      this.fileList = []
      // 添加弹框中的附件，进来要隐藏
      this.showType = false
      this.dialog = true
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
    },
    // 编辑字典
    handleEdit: function(row) {
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
      const data = JSON.parse(JSON.stringify(row))
      this.form = data
      this.bidDate = [data.startTime, data.endTime]
      // this.form.
      // let name = data.appendix.lastIndexOf('/') ;
      if (data.fileUrl) {
        let name = data.fileUrl.split('/')
        name = name.pop()
        // let name = data.appendix.replace(/(.*\/)*([^.]+).*/ig, "$2");
        this.fileList = [{ name: name, url: data.fileUrl }]
      }
      // 编辑弹框中的附件，进来要展示
      this.showType = true
      this.dialog = true
      this.isAdd = false
      // 下载模板类型
      let tenderValue = this.tenderType[data.tenderType-1].value
       apiFile(tenderValue).then((res)=>{
        console.log(res)
        this.fileUrl = res.data.data.path
      })
      console.log(data)
    },
     handleClick(row,val){
      console.log(row,val)
      if(row.name == "second"){
       this.$refs.ckTable.tenderParentId = this.param.tenderParentId
        this.$refs.ckTable.getTenantList()
      }
    },
    // 详情
    handleView(row) {
      this.param.tenderParentId = row.tenderParentId
      this.bidInfo = row
      this.param.current = 1
      this.getParam()

         setTimeout(() => {
        console.log(this.$refs.ckTable.tenderParentId,"1234")
       this.$refs.ckTable.tenderParentId = row.tenderParentId
        this.$refs.ckTable.getTenantList()
      }, 300);
      let tenderType = row.tenderType
      if(tenderType == 1){
        this.viewDialog = true
         this.getParam()
        console.log("物流")
      }else if(tenderType == 3){
        this.saleViewDialog = true
        console.log("销售")
      }
    },
    getParam(tenderParentId) {
      const data = this.param
      this.tableLoading = true
      // getSaleId
      // this.
      getQueryId(data).then((res) => {
        console.log(res.data.data.records, '')
        let data = res.data.data.records
         data.map((res)=>{
          // 开始时间
          let startTime = res.startTime
          // 投标结束时间
          let endTime = res.endTime

          const date = new Date(startTime)
          const modify = new Date(endTime)

          const start = date.valueOf()         //开始时间
          const end = modify.valueOf()        //投标结束时间
          const time = new Date().valueOf()   //当前时间
          console.log(start,"start")
          console.log(end,"end")
         if(res.isInvalid == 2){
             res.status = 3
            console.log("作废了")
          }else if(time < start){
            res.status = 4
            console.log("当前时间小于开始时间，未开始")
          }else if(time > start && time < end){
            res.status = 1
            console.log("当前时间大于开始时间并且小于投标结束时间，进行中")
          }else if(time > end){
            res.status = 2
            console.log("当前时间大于投标结束时间，已结束")
          }

          return res
        })
        this.Paramdata = data
        this.tableLoading = false
        this.total1 = res.data.data.total
      })
    },
    // 删除操作
    subDelete(tenderParentId,tenderType) {
      // const data = {
      //   id: val
      // }
      getQueryDelete(tenderType,tenderParentId).then(res => {
        if (res.data.code === 200) {
          this.$message({ message: '已作废', type: 'success' })
          this.getDictData()
        }
      }).catch(err => {
        console.log(err.response.data.message)
      })
      this.$refs[tenderParentId].doClose()
    },
    // 换页
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getDictData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDictData()
    },
    handleCurrentChangeParam(val) {
      this.param.current = val
      this.getParam()
    },
    handleSizeChangeParam(val) {
      this.param.size = val
      this.getParam()
    }
  }
}
</script>

<style scoped  lang="scss">
/* 去掉上传附件时候的过度效果 */
  ::v-deep .el-upload-list__item{transition: none !important;}
   ::v-deep .el-textarea__inner{
  padding-bottom: 36px;
}
.padding /deep/ .el-input--medium .el-input__inner {
    padding-right: 56px;
}
/deep/ .el-upload-list__item-name {
  width: 150px;
}
.ckTable{
        width: 100%;
        border: #eee;
        text-align: center;
        tr,td{
        border: 0.5px solid#dfe6ec;
        line-height: 23px;
        }
    }
.paginationParam{
  // bottom: 0;
  // left: 0;
  line-height: 80px;
  width: 100%;
  // left: 45%;
  // text-align: right;
  z-index: 999;
  background: #fff;
}
/deep/ .el-tabs__item{
  font-size: 16px !important;
  // padding: 35px  ;
}
.el-card {
  border: 0px solid #fff;
}
.clearfix {
    line-height: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #409EFF;
}
/deep/.el-dialog.is-fullscreen {

    background-color: #f5f7f9;
}
.box-card{
  margin-bottom: 20px;
  .row-bg{
  padding: 15px 40px 0 40px;
  .flex_text{
    line-height: 50px;
    color: #8C8C8C;
    font-size: 14px;
    // border:1px solid red;
    // font-weight: 600;
  }
  .flex_name{
    font-size: 14px;
    padding-left: 25px;
    color: #575757;
    font-weight: 550;
  }
}
}
/deep/ .el-card__body{
  padding: 20px 0;
}
/deep/.el-tabs__nav-wrap::after {

    background-color: #dfe4ed00;  
}
</style>
