<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div @click="zhengchang()">
          <chart-card :loading="loading" total="所有任务" class="suoyou">
          </chart-card>
          <!-- <span class="recent">[近30天]</span> -->
          <div class="numRecent">
            <div style="font-size:35px; color: #3293f6;">{{listBdc.totalNum}}</div>
            <div style="font-size:20px; padding-top:10%; padding-left:3px;">项</div>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div @click="zhengchang(0)">
          <chart-card :loading="loading" total="待办" class="daiban">
          </chart-card>
          <!-- <span class="recent2">[近30天]</span> -->
          <div class="numRecent">
            <div style="font-size:35px; color: #e91111;">{{listBdc.daibanNum}}</div>
            <div style="font-size:20px; padding-top:10%; padding-left:3px;">项</div>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div @click="zhengchang(1)">
          <chart-card :loading="loading" total="进行中" class="jinxing">
          </chart-card>
          <!-- <span class="recent3">[近30天]</span> -->
          <div class="numRecent">
            <div style="font-size:35px; color: #f9c04a;">{{listBdc.jinxingNum}}</div>
            <div style="font-size:20px; padding-top:10%; padding-left:3px;">项</div>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div @click="zhengchang(2)">
          <chart-card :loading="loading" total="已完成" class="wancheng">
          </chart-card>
          <!-- <span class="recent3">[近30天]</span> -->
          <div class="numRecent">
            <div style="font-size:35px; color: #18c679;">{{listBdc.wanchengNum}}</div>
            <div style="font-size:20px; padding-top:10%; padding-left:3px;">项</div>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" class="list">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" :tab="tab" key="1">
            <a-row>
              <a-col :xl="18" :lg="12" :md="12" :sm="24" :xs="24">
                <a-table
                  style="padding-left: 20px;"
                  ref="tableBds"
                  size="small"
                  rowKey="id"
                  :scroll="{ y: 'calc(100vh - 490px)' }"
                  :columns="columnsBds"
                  :loading="loading2"
                  :dataSource="tableDataBds"
                  :pagination="ipagination2"
                  @change="tableChange2">

                  <div slot="taskStatus" slot-scope="text, record">
                    <!-- <span v-if="record.taskStatus ==0" style="color: #e91111;">待办</span>
                    <span v-if="record.taskStatus ==1" style="color: #f9c04a;">进行中</span>
                    <span v-if="record.taskStatus ==2" style="color: #18c679;">完成</span> -->
                    <span v-if="record.taskStatus ==0">待办</span>
                    <span v-if="record.taskStatus ==1">进行中</span>
                    <span v-if="record.taskStatus ==2">完成</span>
                  </div>
                </a-table>
                <!-- <itdm-task-list></itdm-task-list> -->
                <!-- <index-bar title="受理量统计" /> -->
                <!-- <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
                  <template slot="flowRate" slot-scope="text, record">
                    <span style="color: red;">{{ record.flowRate }}小时</span>
                  </template>
                </a-table> -->
              </a-col>
              <a-col :xl="4" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card title="便捷导航" class="daoHang">
                  <div style="margin-bottom: 15px;">
                    <trend flag>
                      <a slot="term" @click="$router.push({path:'/firstIndex'})">首页</a>
                    </trend>
                  </div>
                  <div style="margin-bottom: 15px;">
                    <trend flag>
                      <a slot="term" @click="$router.push({path:'/itdmGongdanMaster/itdmGongdanMasterList'})">拆解工单</a>
                    </trend>
                  </div>
                  <div style="margin-bottom: 15px;">
                    <trend flag>
                      <a slot="term" @click="$router.push({path:'/gongdandetail/itdmGongdanDetailList'})">工单确认</a>
                    </trend>
                  </div>
                  <div>
                    <trend flag>
                      <a slot="term" @click="$router.push({path:'/gongdanshuju/ItdmGongdanShujuList'})">数据确认</a>
                    </trend>
                  </div>
                </a-card>

              </a-col>
            </a-row>
          </a-tab-pane>

        </a-tabs>

      </div>
    </a-card>

  </div>
</template>

<script>

  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniArea from '@/components/chart/MiniArea'
  import IndexBar from '@/components/chart/IndexBar'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'
  import Trend from '@/components/Trend'
  import {listBdc, listBdc2} from '@/api/api'
import ItdmTaskList from '../module-iTDM/itdmFirstPage/ItdmTaskList.vue'

  const jhjgData = [
    { type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
    { type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
    { type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
  ]

  const jhjgFields=[
    '1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'
  ]

  const xljgData = [
    {type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
    {type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
    {type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},

    {type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
    {type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
    {type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},

    {type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
    {type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
    {type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},

    {type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
    {type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
    {type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
  ]
  const xljgFields=["房管","税务","不动产"]

  const dataCol1 = [{
    title: '业务号',
    align:"center",
    dataIndex: 'reBizCode'
  },{
    title: '业务类型',
    align:"center",
    dataIndex: 'type'
  },{
    title: '受理人',
    align:"center",
    dataIndex: 'acceptBy'
  },{
    title: '受理时间',
    align:"center",
    dataIndex: 'acceptDate'
  },{
    title: '当前节点',
    align:"center",
    dataIndex: 'curNode'
  },{
    title: '办理时长',
    align:"center",
    dataIndex: 'flowRate',
    scopedSlots: { customRender: 'flowRate' }
  }];
  const dataSource1=[
    {reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
    {reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
    {reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
    {reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
    {reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
    {reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
    {reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
    {reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
    {reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
    {reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
    {reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
  ]

  const dataCol2 = [{
    title: '业务号',
    align:"center",
    dataIndex: 'reBizCode'
  },{
    title: '受理人',
    align:"center",
    dataIndex: 'acceptBy'
  },{
    title: '发起时间',
    align:"center",
    dataIndex: 'acceptDate'
  },{
    title: '当前节点',
    align:"center",
    dataIndex: 'curNode'
  },{
    title: '超时时间',
    align:"center",
    dataIndex: 'flowRate',
    scopedSlots: { customRender: 'flowRate' }
  }];
  const dataSource2=[
    {reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
    {reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
    {reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
    {reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
    {reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
    {reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
    {reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
    {reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
    {reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
    {reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
    {reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
  ]

  export default {
    name: "IndexBdc",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      DashChartDemo,
      BarMultid,
      IndexBar,
      Trend,
        ItdmTaskList
    },
    data() {
      return {

        path: 'ws://localhost:8080/itdmServer/itdmWebsocket/list2',
        // path: 'ws://192.168.2.244:8080/itdmServer/itdmWebsocket/list3',
        socket: '',


        loading: true,
        loading2: false,
        listBdc: {},
        cardCount:{
          sll:100,
          bjl:87,
          isll:15,
          ibjl:9
        },

        todaySll:60,
        todayBjl:54,
        todayISll:13,
        todayIBjl:7,

        chartData:{
          sll:[],
          bjl:[],
          isll:[],
          ibjl:[]
        },
        jhjgFields,
        jhjgData,

        xljgData,
        xljgFields,

        diskInfo:[
          {name:"C盘",restPPT:7},
          {name:"D盘",restPPT:5}
        ],

        registerTypeList:[{
          text:"业务受理"
        },{
          text:"业务管理"
        },{
          text:"文件管理"
        },{
          text:"信息查询"
        }],

        dataSource1:[],
        dataSource2:[],
        columns:dataCol1,
        columns2:dataCol2,
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,

        },
        ipagination2:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          // showSizeChanger: true,
          total: 0,
        },
        indexRegisterType:"转移登记",
        indexBottomTab:"1",
        // 任务列表
        columnsBds: [
          { title:'委托单位', align:"center", dataIndex: 'weituoClient' },
          { title:'委托编号', align:"center", dataIndex: 'weituoNo' },
          { title:'内容', align:"center", dataIndex: 'taskContent' },
          { title:'待办角色', align:"center", dataIndex: 'taskRole' },
          { title:'待办人员', align:"center", dataIndex: 'taskUser' },
          { title:'任务状态', align:"center", dataIndex: 'taskStatus', scopedSlots: { customRender: 'taskStatus' } },
          // { title:'关联委托id', align:"center", dataIndex: 'weituoId_dictText' },
        ],
        tableDataBds: [],
        tab: '所有任务',
        queryParam: {
          taskStatus: '',
        },

      }
    },
    created() {
      this.init()

      this.getListBdc()
      this.zhengchang()
      // this.loadDataSource1()
      // this.loadDataSource2()
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    destroyed () {
      // 销毁监听
      this.socket.close()
    },
    methods:{
      // 获取首页数据
      getListBdc(){
        listBdc().then( res => {
          console.log(11111,res)
          this.listBdc = res
        })
      },
      // 获取首页列表
      zhengchang(num){
        console.log(num)
        this.loading2 = true
        if (num == undefined) {
          this.tab = '所有任务'
          this.queryParam.taskStatus = ''
        }
        if (num == 0) {
          this.tab = '待办'
          this.queryParam.taskStatus = 0
        }
        if (num == 1) {
          this.tab = '进行中'
          this.queryParam.taskStatus = 1
        }
        if (num == 2) {
          this.tab = '完成'
          this.queryParam.taskStatus = 2
        }
        listBdc2(this.queryParam).then( res => {
          console.log(2222,res)
          this.tableDataBds = res.result
          this.loading2 = false
        })
      },
      goPage(){
        this.$message.success("根据业务自行处理跳转页面!")
      },
      changeRegisterType(e){
        this.indexRegisterType = e.target.value
        if(this.indexBottomTab=="1"){
          this.loadDataSource1()
        }else{
          this.loadDataSource2()
        }
      },
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        // this.queryTimeoutInfo()
      },
      tableChange2(pagination){
        this.ipagination2.current = pagination.current
        this.ipagination2.pageSize = pagination.pageSize
        // this.queryNodeTimeoutInfo()
        this.zhengchang(num)
      },
      getFlowRateNumber(value){
        return Number(value)
      },
      getPercentFormat(value){
        if(value==100){
          return "超时"
        }else{
          return value+"%"
        }
      },
      getPercentColor(value){
        let p = Number(value)
        if(p>=90 && p<100){
          return 'rgb(244, 240, 89)'
        }else if(p>=100){
          return 'red'
        }else{
          return 'rgb(16, 142, 233)'
        }
      },

      loadDataSource1(){
        this.dataSource1 = dataSource1.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item.type==this.indexRegisterType
        })
      },
      loadDataSource2(){
        this.dataSource2 = dataSource2.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item.type==this.indexRegisterType
        })
      },


      // websocket
      init: function () {
        if(typeof(WebSocket) === "undefined"){
            alert("您的浏览器不支持socket")
        }else{
          // 实例化socket
          this.socket = new WebSocket(this.path)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          // 监听销毁
          this.socket.onclose = this.close
        }
      },
      open: function () {
          console.log("socket连接成功")
      },
      error: function () {
          console.log("连接错误")
      },
      getMessage: function (msg) {
        var wsData = JSON.parse(msg.data)
        console.log(wsData)
        for (var i = 0; i < wsData.length; i++) {
          console.log(11111122222,wsData[i].name)
          if (wsData[i].name == '打开大屏') {
            // console.log('打开大屏',wsData[i].data)

            // let routeDate = this.$router.resolve({path: '/itdmScreen/itdmScreenIndex'})
            // window.open(routerDate.href,'_blank')
            // this.$router.push({path: '/itdmScreen/itdmScreenIndex'})
            if (wsData[i].data == 1) {
              let routeData = this.$router.resolve({
              path: '/itdmScreen/itdmScreenIndex',
              name: 'itdmScreen',
              component: () => import(/* webpackChunkName: "user" */ '@/views/module-iTDM/itdmScreen/itdmScreenIndex.vue')
              });
              window.open(routeData.href, '_blank');

            }
          }
          if (wsData[i].name == '委托登记') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/weituo/itdmWeituoInfoList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '委托审核') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/weituoshenhe/ItdmWeituoshenheInfoList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '委托查询') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/weituochaxun/ItdmWeituoYangpinList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '委托结项') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/weituojiexiang'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '计划排期') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmTestPlan/itdmTestPlanList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '拆解工单') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmGongdanMaster/itdmGongdanMasterList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '工单查询') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmGongdanDetail/ItdmGongdanDetailList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '条码打印') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/tiaomadayin'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '工单确认') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/gongdandetail/itdmGongdanDetailList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '数据确认') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/gongdanshuju/ItdmGongdanShujuList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '模板管理') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/moban/itdmMobanList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '报告生成') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/baogao/itdmBaogaoList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '运行时间') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmDeviceRun/itdmDeviceRunList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '报警统计') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmAlarmTotal/itdmAlarmTotalList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '历史报警') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmAlarm/itdmAlarmList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '设备数据') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmDevicedata/itdmDeviceDataList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '环境数据') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/itdmEnvironmentData/itdmEnvironmentData'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '流程设计') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/ActivitiList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '流程部署') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/ActivitiFileList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '常用流程') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/ActivitiCommonModel'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '我的代办') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/ActivitiDaibanList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '历史记录') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/ActivitiHisList'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '自定义表单') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/activiti/CustomForm'})
              this.socket.close()
            }
          }
          if (wsData[i].name == '表单查询') {
            if (wsData[i].data == 1) {
              this.$router.push({path: '/views/customform/CustomFormList'})
              this.socket.close()
            }
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
::v-deep .total{
    width: 50%;
  }
  .recent{
    position: absolute;
    top: 25%;
    left: 42%;
  }
  .recent2{
    position: absolute;
    top: 25%;
    left: 26%;
  }
  .recent3{
    position: absolute;
    top: 25%;
    left: 34%;
  }
  .numRecent{
    height: 30%;
    width: 40%;
    // background-color: aquamarine;
    position: absolute;
    top: 12%;
    right: 10%;
    display: flex;
    justify-content: flex-end;
  }
  .daoHang {
    width: 300px;
    height: 240px;
    border-radius: 5px;
    margin-left: 40px;
  }
  ::v-deep .ant-card{
    border-radius: 10px !important;
    padding-bottom: 20px;
  }
  ::v-deep .ant-card-head{
    background-color: #c2e6ff85;
    border-radius: 10px !important;
    font-size: 20px;
  }
  .suoyou{
    box-shadow: 0 10px 15px  rgba(212, 211, 212, 0.445);
  }
  .daiban{
    background-color: rgb(255, 246, 246);
    box-shadow: 0 10px 15px  rgba(255, 208, 208, 0.552);
  }
  // .daiban:hover {
	// 	// box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 盒子悬浮时阴影 */
  //   // box-shadow: 0 10px 15px  rgba(255, 182, 182, 0.552);
	// }
  .jinxing{
    background-color: rgb(255, 253, 244);
    box-shadow: 0 10px 15px  rgba(254, 233, 189, 0.552);
  }
  .wancheng{
    background-color: rgb(250, 253, 244);
    box-shadow: 0 10px 15px  rgba(194, 228, 205, 0.515);
  }
  // .list {
  //   height: 480px;
  // }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item{
      margin-left:60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item{
      margin-left:20px;
    }
    .width-hidden4{
      display:none
    }
  }
  .list-content-item{
    span{line-height: 20px;}
  }
  .list-content-item{
    p{margin-top: 4px;margin-bottom:0;line-height:22px;}
  }
  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }
  .anty-list-cust {
    .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
  }


</style>