<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" :style="{ marginBottom: '16px' }">
      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
        <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="topSpan topSpanh">
            <div class="topSpanLeft topSpanLeftPad1">
                <img class="topImg"  src="@/assets/totalPayment.png"/>
            </div>
            <div  class="topSpanRight topSpanRightMar1" >
              <span class="fontType1">付款总金额</span>
              <div style="display: flex;flex-direction: row">
                <span class="fontType2">
                  <countTo :startVal='totalPayment.startVal' :endVal='totalPayment.endVal' :duration='duration' :decimals="decimals"></countTo>
                  <span class="fontTypeSpan">元</span>
                </span>
                <template v-if="addPayment>0">
                  <h1 class="fontTypeAdd animated animate__bounceOutUp">+{{addPayment}}</h1>
                </template>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
        <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="topSpan topSpanh">
            <div class="topSpanLeft topSpanLeftPad1">
              <img class="topImg"  src="@/assets/totalUser.png"/>
            </div>
            <div  class="topSpanRight topSpanRightMar1" >
              <span class="fontType1">用户人数</span>
              <div style="display: flex;flex-direction: row">
                <span class="fontType2">
                  <countTo :startVal='totalUser.startUserVal' :endVal='totalUser.endUserVal' :duration='duration'></countTo>
                  <span class="fontTypeSpan">人</span>
                </span>
                <template v-if="addUser>0">
                  <h1 class="fontTypeAdd animated animate__bounceOutUp">+{{addUser}}</h1>
                </template>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
        <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="topSpan topSpanh">
            <div class="topSpanLeft topSpanLeftPad1">
              <img class="topImg"   src="@/assets/totalCompany.png"/>
            </div>
            <div  class="topSpanRight topSpanRightMar1" >
              <span class="fontType1">合作企业</span>
              <div style="display: flex;flex-direction: row">
                <span class="fontType2">
                  <countTo :startVal='totalCompany.startCompanyVal' :endVal='totalCompany.endCompanyVal' :duration='duration'></countTo>
                  <span class="fontTypeSpan">家</span>
                </span>
                <!--<template v-if="addCompany>0">-->
                  <!--<h1 class="fontTypeAdd animated animate__bounceOutUp">+{{addCompany}}</h1>-->
                <!--</template>-->
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" :style="{ marginBottom: '16px' }">
      <a-col :span="24" :sm="24" :md="12" :xl="12" class="ant-col-padding">
        <a-card :bordered="false" :style="{ marginTop: '0px' ,height: '409px'}" class="animate__animated animate__bounceInLeft animate__slow">
          <a-row  :style="{ marginBottom: '30px'}">
            <a-col :span="6">
              <div class="topSpanLeft topSpanLeftPad3 topSpanMiddle">
                <span class="fontType3">{{weekTotalPayment}}</span>
                <span class="fontType1">本周付款总额</span>
              </div>
            </a-col>
            <a-col :span="2">
            </a-col>
            <a-col :span="6">
              <div class="topSpanLeft topSpanLeftPad3 topSpanMiddle">
                <span class="fontType3">{{monthTotalPayment}}</span>
                <span class="fontType1">本月付款总额</span>
              </div>
            </a-col>
            <a-col :span="2">
            </a-col>
            <a-col :span="6">
              <div class="topSpanLeft topSpanLeftPad3 topSpanMiddle">
                <span class="fontType3">{{yearTotalPayment}}</span>
                <span class="fontType1">本年付款总额</span>
              </div>
            </a-col>
            <a-col :span="2">
            </a-col>
          </a-row>
          <SmoothLineAndArea :dataSource="chartData.payData" :yaxisText="'当月付款总额'" :padding="smoothPadding"></SmoothLineAndArea>
        </a-card>
      </a-col>

      <a-col :span="24" :sm="24" :md="12" :xl="4" class="ant-col-padding">
        <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="total">
            <div class="topSpan topSpanHeight">
              <div class="topSpanLeft topSpanLeftPad2" style="width: 40%">
                <a-progress type="circle" :percent="currentWeek.percent" :width="percentWidth.width" strokeColor="#6A66F6" :strokeWidth="10">
                  <template #format="percent">
                    <span style="color: #6A66F6;font-size: 20px">{{ percent }}%</span>
                  </template>
                </a-progress>
              </div>
              <div  class="topSpanRight topSpanRightMar2" style="width: 60%;">
                <div class="topSpanRightMar3">
                  <span class="fontType1">本周新增用户</span>
                  <span class="fontType3">+{{weekAddUser}}</span>
                </div>
              </div>
            </div>

            <div class="topSpan topSpanHeight">
              <div class="topSpanLeft topSpanLeftPad2" style="width: 60%;align-items: flex-start">
                <div class="topSpanRightMar3">
                  <span class="fontType1">用户环比增长率</span>
                  <span class="fontType3">+{{weekAddUserPercent}}</span>
                </div>
              </div>
              <div  class="topSpanRight topSpanRightMar2" style="width: 40%">
                <img class="middleImg" src="@/assets/bar.png"/>
              </div>
            </div>
          </div>
        </a-card>

        <a-card :bordered="false" :style="{ marginTop: '15px' }" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="topSpan topSpanHeightElse">
            <div class="topSpanLeft topSpanLeftPad2" style="width: 40%">
              <a-progress type="circle" :percent="currentMonth.percent" :width="percentWidth.width" strokeColor="#6A66F6" :strokeWidth="10">
                <template #format="percent">
                  <span style="color: #6A66F6;font-size: 20px">{{ percent }}%</span>
                </template>
              </a-progress>
            </div>
            <div  class="topSpanRight topSpanRightMar2" style="width: 60%">
              <div class="topSpanRightMar3">
                <span class="fontType1">本月新增用户</span>
                <span class="fontType3">+{{monthAddUser}}</span>
              </div>
            </div>
          </div>
        </a-card>

      </a-col>

      <a-col :span="24" :sm="24" :md="12" :xl="8" class="ant-col-padding">
        <a-card :bordered="false" :style="{ marginTop: '0px',height: '409px'}" class="animate__animated animate__bounceInLeft animate__slow">
          <p style="font-size: 14px;color: #212327;margin: 20px 0 0 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;">月度新增用户量对比图</p>
          <bar :dataSource="chartData.monthUserData" :yaxisText="'当月用户量'" :height="340" :barColor="barColor" :padding="barPadding"/>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" >
      <a-col :span="24" :sm="24" :md="12" :xl="4" class="ant-col-padding">
        <a-card :bordered="false" :style="{ marginTop: '0px'}" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="bottomSpan bottomSpanHeight">
            <div class="bottomSpanLeft">
              <img class="bottomImg"  src="@/assets/requireNum.png"/>
            </div>
            <div  class="bottomSpanRight bottomSpanHeightN" >
              <span class="fontType1">本月发包量</span>
              <span class="fontType3">{{monthRequire}}</span>
            </div>
          </div>
        </a-card>

        <a-card :bordered="false" :style="{marginTop: '15px' }" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="bottomSpan bottomSpanHeight">
            <div class="bottomSpanLeft">
              <img class="bottomImg"  src="@/assets/requireNum.png"/>
            </div>
            <div  class="bottomSpanRight bottomSpanHeightN" >
              <span class="fontType1">本年发包量</span>
              <span class="fontType3">{{yearRequire}}</span>
            </div>
          </div>
        </a-card>

      </a-col>

      <a-col :span="24" :sm="24" :md="12" :xl="8" class="ant-col-padding">
        <a-card :bordered="false" :style="{ marginTop: '0px',height: '269px' }" class="animate__animated animate__bounceInLeft animate__slow">
          <p style="font-size: 14px;color: #212327;margin: 20px 0 0 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;">半年度订单数据</p>
          <BaseBar :dataSource="chartData.monthOrderData" :yaxisText="'当月订单量'" :height="218" :barColor="baseBarColor" :padding="baseBarPadding"></BaseBar>
        </a-card>
      </a-col>

      <a-col :span="24" :sm="24" :md="12" :xl="3" class="ant-col-padding">
        <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="bottomSpan bottomSpanHW">
            <div class="bottomSpannext">
              <span class="fontType1">本周订单量</span>
              <span class="fontType3">{{weekOrder}}</span>
            </div>
            <div class="bottomSpannext">
              <span class="fontType1">本月订单量</span>
              <span class="fontType3">{{monthOrder}}</span>
            </div>
            <div class="bottomSpannext">
              <span class="fontType1">本年订单量</span>
              <span class="fontType3">{{yearOrder}}</span>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="24" :sm="24" :md="12" :xl="9" class="ant-col-padding">
        <a-card :bordered="false" :style="{ marginTop: '0px',height: '269px'}" class="animate__animated animate__bounceInLeft animate__slow">
          <div class="bottomCompany">
            <span class="title">合作企业名称</span>
            <span class="date">注册时间</span>
            <span class="address">注册地点</span>
          </div>
          <template v-if="chartData.companyData.length >0">
            <vue-seamless :data="chartData.companyData" class="seamless-warp" :class-option="seamlessOption">
              <ul class="warp">
                <li v-for="item in chartData.companyData" class="item">
                  <span class="title" v-text="item.companyName"></span>
                  <span class="date" v-text="item.createTime"></span>
                  <span class="address" v-text="item.provinceCityCountry"></span>
                </li>
              </ul>
            </vue-seamless>
          </template>
          <template v-else>
            <a-empty />
          </template>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
  import store from '@/store/'
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import { httpAction ,getAction,putAction} from '@/api/manage'
  import Trend from '@/components/Trend'
  import SmoothLineAndArea from '@/components/chart/SmoothLineAndArea'
  import countTo from 'vue-count-to';
  import BaseBar from '@/components/chart/BaseBar'
  import vueSeamless from 'vue-seamless-scroll'

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo,
      SmoothLineAndArea,
      countTo,
      BaseBar,
      vueSeamless
    },
    data() {
      return {
        weekAddUser:0,
        weekAddUserPercent:0,
        monthAddUser:0,
        addPayment:0,
        addUser:0,
        addCompany:0,
        weekTotalPayment:0.00,
        monthTotalPayment:0.00,
        yearTotalPayment:0.00,
        sumUser:0,
        sumOrder:0,
        sumPayment:0,
        sumPaymentComplete:0,
        monthRequire: 0,
        yearRequire:0,
        weekOrder:0,
        monthOrder:0,
        yearOrder:0,
        loading: true,
        center: null,
        websock: null,
        totalPayment:{
          startVal: 0,
          endVal: 0
        },
        totalUser:{
          startUserVal: 0,
          endUserVal: 0
        },
        totalCompany:{
          startCompanyVal: 0,
          endCompanyVal: 0
        },
        chartData:{
          payData:[],
          monthUserData: [],
          monthOrderData:[],
          companyData:[],
        },
        currentWeek:{
          percent: 0,
        },
        currentMonth:{
          percent: 0,
        },
        paymentType: 1,//月份区间(1：前6个月；2：前前6个月)
        duration: 1000,
        decimals: 2,
        timeOut: 1000,
        timeOut1: 500,
        seamlessOption:{
          step: 1, // 数值越大速度滚动越快
        },
        smoothPadding: ['10', '30', '50', '60'],
        barColor: [[ 'l(90) 0:#7D5DF4 1:#5673F8']],
        baseBarColor: [[ 'l(90) 0:#7D5DF4 1:#5673F8']],
        barPadding: ['20', '30', '50', '30'],
        baseBarPadding: ['20', '38', '20', '38'],
        percentWidth: {width: (window.innerWidth * 0.054)},
        url:{
          getIndexTopTotalpayment: '/wisdom/hlwPaymentDetail/getIndexTopTotalpayment',
          getIndexTopTotalUser:'/wisdom/hlwPaymentDetail/getIndexTopTotalUser',
          getIndexTopTotalCompany:'/wisdom/hlwPaymentDetail/getIndexTopTotalCompany',
          getIndexMiddleThreePaymentInfo:'/wisdom/hlwPaymentDetail/getIndexMiddleThreePaymentInfo',
          getIndexMiddlePaymentChartInfo:'/wisdom/hlwPaymentDetail/getIndexMiddlePaymentChartInfo',
          getIndexUserInfo:'/wisdom/hlwPaymentDetail/getIndexUserInfo',
          getIndexMiddleUserInfo:'/wisdom/hlwPaymentDetail/getIndexMiddleUserInfo',
          getIndexBottomInfo:'/wisdom/hlwPaymentDetail/getIndexBottomInfo',
          getRandomPaymentInfo:'/wisdom/hlwPaymentDetail/getRandomPaymentInfo',
        }
      }
    },
    created() {
      this.getIndexTopTotalpayment();
      this.getIndexMiddleThreePaymentInfo();
      this.getIndexMiddlePaymentChartInfo();
      this.getIndexTopTotalUser();
      this.getIndexUserInfo();
      this.getIndexMiddleUserInfo();
      this.getIndexTopTotalCompany();
      this.getIndexBottomInfo();
      this.getRandomPaymentInfo();
    },
    mounted() {
      //初始化webSocket
      this.initWebSocket();
      //定时器begin
      //顶部信息-1分钟轮询一次
      this.topInfoTimer = setInterval(()=>{
        this.getIndexTopTotalpayment();
      },1000 * 60 * 1)
      //付款信息-30s轮询一次
      this.paymentTimer = setInterval(()=>{
        this.getRandomPaymentInfo();
      },1000 * 30)
      //付款图表信息-30s轮询一次
      this.paymentChartTimer = setInterval(()=>{
        this.getIndexMiddlePaymentChartInfo();
      },1000 * 30)
      //定时器end
    },
    destroyed(){
      //页面销毁清除定时器
      clearInterval(this.topInfoTimer);
      clearInterval(this.paymentTimer);
      clearInterval(this.paymentChartTimer);
    },
    methods: {

      //获取首页（付款金额）
      getIndexTopTotalpayment(){
        getAction(this.url.getIndexTopTotalpayment, {beforeTotalNetpayment:this.totalPayment.endVal}).then((res) => {
          if (res.success) {
            this.totalPayment.startVal=this.totalPayment.endVal;
            this.totalPayment.endVal= res.result[0];
            this.addPayment=res.result[1];
            //2s后清除
            setTimeout(()=>{
              this.addPayment= 0 ;
            },2000)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },
      //获取首页（用户人数）
      getIndexTopTotalUser(){
        getAction(this.url.getIndexTopTotalUser, {beforeTotalUser:this.totalUser.endUserVal}).then((res) => {
          if (res.success) {
            this.totalUser.startUserVal=this.totalUser.endUserVal;
            this.totalUser.endUserVal=res.result[0];
            this.addUser=res.result[1];
            //2s后清除
            setTimeout(()=>{
              this.addUser= 0 ;
            },2000)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },
      //获取首页（合作企业）
      getIndexTopTotalCompany(){
        getAction(this.url.getIndexTopTotalCompany, {beforeTotalCompany:this.totalCompany.endCompanyVal}).then((res) => {
          if (res.success) {
            this.totalCompany.startCompanyVal=this.totalCompany.endCompanyVal;
            this.totalCompany.endCompanyVal=res.result[0];
            this.addCompany=res.result[1];
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //获取首页中间付款数据所需数据
      getIndexMiddleThreePaymentInfo(){
        getAction(this.url.getIndexMiddleThreePaymentInfo, {}).then((res) => {
          if (res.success) {
            this.weekTotalPayment=res.result[0];
            this.monthTotalPayment=res.result[1];
            this.yearTotalPayment=res.result[2];
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //获取首页中间付款图表所需数据
      getIndexMiddlePaymentChartInfo(){
        getAction(this.url.getIndexMiddlePaymentChartInfo, {type: this.paymentType}).then((res) => {
          if (res.success) {
            this.chartData.payData = res.result[0];
            this.paymentType = this.paymentType === 1 ? 2 : 1
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },


      //获取首页中间新增用户(周、月)及占比
      getIndexUserInfo(){
        getAction(this.url.getIndexUserInfo, {}).then((res) => {
          if (res.success) {
            this.weekAddUser=res.result[0];
            this.weekAddUserPercent=res.result[4];
            this.monthAddUser=res.result[2];
            if(res.result[1] === 0){
              this.currentWeek.percent = 0;
            }else{
              let myTimer = setInterval(()=>{
                let percent = this.currentWeek.percent + 1;
                // 停止定时器
                if (percent > res.result[1]) {
                  clearInterval(myTimer);
                  return;
                }
                this.currentWeek.percent = percent;
              },10)
            }
            if(res.result[3] === 0){
              this.currentMonth.percent = 0;
            }else{
              let myTimer1 = setInterval(()=>{
                let percent = this.currentMonth.percent+1;
                // 停止定时器
                if (percent > res.result[3]) {
                  clearInterval(myTimer1);
                  return;
                }
                this.currentMonth.percent = percent;
              },10)
            }

          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //获取首页中间新增用户图表所需数据
      getIndexMiddleUserInfo(){
        getAction(this.url.getIndexMiddleUserInfo, {}).then((res) => {
          if (res.success) {
            this.chartData.monthUserData = res.result;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //获取首页底部数据
      getIndexBottomInfo(){
        getAction(this.url.getIndexBottomInfo, {}).then((res) => {
          if (res.success) {
            this.monthRequire=res.result[0];
            this.yearRequire=res.result[1];
            this.weekOrder=res.result[2];
            this.monthOrder=res.result[3];
            this.yearOrder=res.result[4];
            this.chartData.monthOrderData = res.result[5];
            this.chartData.companyData = res.result[6];

          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //获取首页随机付款单信息
      getRandomPaymentInfo(){
        const that = this;
        getAction(this.url.getRandomPaymentInfo, {}).then((res) => {
          if (res.success) {
            var message = '付款单'+res.result.paymentCode
            var description = '共发放' + res.result.totalUser + '人，合计金额' + res.result.payment+'元';
            that.$notification['success']({
              message: message,
              description: description,
              placement: 'bottomRight',
              bottom: '40px',
              style: {
                padding: '20px',
              },
            });
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      },

      //写在最后，如有问题，随时移除
      //webSocket连接begin
      initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        var userId = store.getters.userInfo.id;
        var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
        console.log(url);
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnerror: function (e) {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },
      websocketOnmessage: function (e) {
        console.log("-----接收消息-------",e.data);
        var data = eval("(" + e.data + ")"); //解析对象
        if(data.cmd == "topic"){
          //系统通知

        }else if(data.cmd == "user"){
          //用户消息
          var message = data.msgTitle;
          var description = data.msgTxt;
          this.$notification['success']({
            message: message,
            description: description,
            placement: 'bottomRight',
            bottom: '40px',
            style: {
              padding: '20px',
            },
          });
        }
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      websocketSend(text) { // 数据发送
        try {
          this.websock.send(text);
        } catch (err) {
          console.log("send failed (" + err.code + ")");
        }
      },
      reconnect() {
        var that = this;
        if(that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
      //webSocket连接end
    }
  }
</script>

<style lang="less" scoped>

  /deep/ .ant-card{
    border-radius: 4px;
  }

  /deep/ .ant-card-body{
    padding: 0;
  }

  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

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

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

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: center;
    width: 100%;


    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }

   .total{
     height:246px;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   .topSpanHeight{
       height: 123px;
    }
   .topSpanHeightElse{
     height: 148px;
   }

  .topSpan{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
 .topSpanMiddle{
   margin-top: 29px;
 }
  .fontType1{
    height: 20px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6D7883;
    line-height: 20px;
  }

  .fontType2{
    height: 45px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #212327;
    line-height: 45px;
  }
  .fontType3{
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #212327;
    line-height: 33px;

  }
  .fontTypeSpan{
    margin-left: 0px;
    padding-left: 0px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #212327;
    line-height: 20px;

  }
  .fontTypeAdd{
    margin-left: 10px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #6346ED;
    line-height: 20px;


  }

  .topImg{
    height: 56px;
    width: 56px;
  }
  .topSpanh{
    height:100px;
  }

  .topSpanLeft{
    display: flex;
    flex-direction: column;
    justify-content:center;
  }
  .topSpanLeftPad1{
    padding-left: 30px;
  }
  .topSpanLeftPad2{
     padding-left: 16px;
  }
  .topSpanLeftPad3{
    padding-left:20px;
   align-items: center;
  }
  .topSpanRightMar1{
    margin-left: 20px;
  }
  .topSpanRightMar2{
    margin-right: 16px;
    align-items: flex-end;
  }
  .topSpanRightMar3{
    display: flex;
    flex-direction: column;
    text-align: center
  }
  .topSpanRight{
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .middleImg{
    height: 50px;
    width: 60px;
  }

  .bottomSpan{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bottomImg{
    height: 20px;
    width: 20px;
  }
  .bottomSpanHeight{
    height: 127px;
  }
  .bottomSpanHeightN{
    margin-top: 10px;
  }
  .bottomSpanLeft{
    height: 44px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
    padding-top: 24px;
  }

  .bottomSpanRight{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bottomSpannext{
    height: 33.3%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 20px;
  }

  .bottomSpanHW{
    height: 269px;
  }

  .bottomCompany{
    height: 60px;
    display: flex;
    align-items: center;
    .title{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #212327;
      width: 50%;
      padding-left: 20px;
    }
    .date{
      font-size: 14px;
      font-family: PingFang
      SC-Regular, PingFang SC;
      font-weight: 600;
      width: 30%;
      color: #212327;
    }
    .address{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #212327;
      width: 20%;
    }
  }
  .seamless-warp {
    height: 187px;
    overflow: hidden;
    .warp{
      padding-left: 0;
      margin-bottom: 0;
    }
    .item{
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #E2E7EC;
      border-bottom-style:dotted;
    }
    .title{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7883;
      width: 50%;
      padding-left: 20px;
      padding-right: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .date{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      width: 30%;
      color: #6D7883;
    }
    .address{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7883;
      width: 20%;
    }
  }
  //动画
  .animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  .animate__animated {
    -webkit-animation-duration: 1.5s;
    animate-duration: 1.5s;
    .animate__slow{

    }
  }
  .ant-col-padding {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

</style>