<!--发票-->
<template>
  <div class="app-center">
    <el-button style="float: left ;margin-left: 5px"  size="mini"  type="primary" @click="printLocally()"  plain>打印交班单</el-button>

    <div  id="report" ref="report"  class="box-center">
      <div class="box-title">
        交班统计
      </div>
      <div class="box-ge">
        <div class="input-box">
          <div>油站名称:</div>
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.storeName : '未知油站' }}</div>
        </div>
        <div class="input-box">
          <div>收银员:</div>
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.realName : '未知姓名' }}</div>
        </div>
        <div class="input-box">
          <div>交班方式:</div>
          <div>门店统一交班</div>
        </div>
        <div class="input-box">
          <div>开始时间:</div>
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.startTime : '/--/' }}</div>

        </div>
        <div class="input-box">
          <div>结束时间:</div>
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.endTime : '/--/' }}</div>

        </div>
      </div>
      <div class="box-ge">
        <div class="input-box">
          <div>当前版本:</div>
          <div>V1.0.1</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">订单汇总</div>
        <div class="input-hui">
          <div>类型</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>油品订单(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>油品订单(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>油品订单(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilPaid : '0' }}</div>

        </div>
<!--        <div class="input-box">-->
<!--          <div>油品优惠(实收)</div>-->
<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilDiacount : '0' }}</div>-->

<!--        </div>-->
        <!--        <div class="input-box">-->
        <!--          <div>抹零总额(实收)</div>-->
        <!--          <div>￥2164.55</div>-->
        <!--        </div>-->

        <el-divider></el-divider>
        <!--       六个一条线 -->
        <div class="input-box">
          <div>会员储值(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardOrder : '0' }}</div>

        </div>
<!--        <div class="input-box">-->
<!--          <div>会员储值(退款)</div>-->
<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardRefund : '0' }}</div>-->

<!--        </div>-->
        <div class="input-box">
          <div>会员储值(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardPaid : '0' }}</div>

        </div>
        <div class="input-box">
          <div>储值赠送(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftOrder : '0' }}</div>

        </div>
<!--        <div class="input-box">-->
<!--          <div>储值赠送(退款)</div>-->
<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftRefund : '0' }}</div>-->

<!--        </div>-->
        <div class="input-box">
          <div>储值赠送(实际)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftPaid : '0' }}</div>

        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>存油储值(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelOrder : '0' }}</div>

        </div>
<!--        <div class="input-box">-->
<!--          <div>存油储值(退款)</div>-->
<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelRefund : '0' }}</div>-->

<!--        </div>-->
        <div class="input-box">
          <div>存油储值(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelPaid : '0' }}</div>

        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>普通收款(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>普通收款(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>普通收款(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsPaid : '0' }}</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">退款汇总</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>退款金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('all')" v-if="item.refundAmount > 0">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.refundAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box" >
          <div>合计</div>
          <div>￥{{refundAggregateTotal}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">实收汇总</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('all')" v-if="item.paidAmount > 0">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalTotalOfActualReceipts}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">油品订单</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('oil')">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalOilOrders}}</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">商品订单</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('goods')">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalOfProductOrders}}</div>
        </div>
      </div>
      <!--      <div class="box-ge">-->
      <!--        <div class="boloicon">普通订单</div>-->
      <!--        <div class="input-hui">-->
      <!--          <div>支付方式</div>-->
      <!--          <div>金额</div>-->
      <!--        </div>-->
      <!--        <div class="input-box" v-for="item in paymentAggregation('goods')">-->
      <!--          <div>{{calculateThePaymentMethod(item.payType)}}</div>-->
      <!--          <div>￥{{item.paidAmount}}</div>-->
      <!--        </div>-->
      <!--        <el-divider></el-divider>-->
      <!--        <div class="input-box">-->
      <!--          <div>合计</div>-->
      <!--          <div>￥0.00</div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="box-ge">
        <div class="boloicon">会员储值</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('fg')">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalMemberStoredValue}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">积分商城</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in paymentAggregation('point')" v-if="item.paidAmount>0">
          <div>{{calculateThePaymentMethod(item.payType)}}</div>
          <div>￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{pointsMallStatistics}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">油号统计</div>
        <div class="input-hui-frou">
          <div>油号</div>
          <div>笔数</div>
          <div>升数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou" v-for="item in oilNumberStatistics()">
          <div>{{item.oilName}}</div>
          <div>{{item.numberOfDeals}}</div>
          <div>{{item.oilNum}}</div>
          <div style="text-align: right">￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalOilNumberStatistics}}</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">优惠统计</div>
        <div class="input-hui">
          <div>油品</div>
          <div>金额</div>
        </div>
        <div class="input-box" v-for="item in oilNumberStatistics()">
          <div>{{item.oilName}}</div>
          <div>{{item.paidDiscount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{discountStatisticsTotal}}</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">油枪统计</div>
        <div class="input-hui-frou">
          <div>油号</div>
          <div>笔数</div>
          <div>升数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou" v-for="item in greaseGunStatistics()">
          <div>{{item.gunName}}</div>
          <div>{{item.numberOfDeals}}</div>
          <div>{{item.oilNum}}</div>
          <div style="text-align: right">￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalOfOilGunStatistics}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">员工统计</div>
        <div class="input-hui-frou">
          <div>员工姓名</div>
          <div>笔数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou" v-for="item in employeeStatistics()">
          <div>{{item.name}}</div>
          <div>{{item.numberOfDeals}}</div>
          <div style="text-align: right">￥{{item.paidAmount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{totalOfEmployeeStatistics}}</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">挂账统计</div>
        <el-divider>挂账详情</el-divider>
        <div class="input-hui-frou">
          <div>挂账单位</div>
          <div>笔数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou" v-for="item in billingDetails()">
          <div>{{item.name}}</div>
          <div>{{item.numberOfDeals}}</div>
          <div style="text-align: right">￥{{item.amount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{statisticsOfAccountDetails}}</div>
        </div>


        <el-divider>归还详情</el-divider>
        <div class="input-hui-frou">
          <div>挂账单位</div>
          <div>笔数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou" v-for="item in returnedToTheAccount()">
          <div>{{item.name}}</div>
          <div>{{item.numberOfDeals}}</div>
          <div style="text-align: right">￥{{item.amount}}</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥{{postedAccountReturnStatistics}}</div>
        </div>
      </div>


    </div>
    <div style="width: 100%; height: 100px"></div>
  </div>
</template>

<script>
import { printGetHandoverReport} from "@/api/handover/handover";
import BigNumber from "bignumber.js";
import {getLodop} from "@/api/LodopFuncs";

    export default {
      name: "HandoverOnly",
      props: {
        recordData:''
      },
      data() {
        return {
          handoverList : {},
        }
      },
      created() {
        console.log("12312231",this.recordData)

        // this.handoverList = JSON.parse(this.recordData)
        this.getHandover();
      },
      methods: {
        printLocally() {
          printGetHandoverReport(this.handoverList).then(res=>{

          })
        },
        getHandover() {
          getHandoverApi().then(res=>{
            this.handoverList = res.data;
            console.log("this.handoverList",this.handoverList)
          })
        },

        printLocally1() {
          // const printHTML = document.querySelector('#report').innerHTML
          // // 将打印的区域赋值，进行打印
          // window.document.body.innerHTML = printHTML
          // window.print() // 调用window打印方法
          // window.location.reload() // 打印完成后重新加载页面
          //初始化打印函数
          let LODOP = getLodop(); // 初始化打印
          LODOP.PRINT_INIT();
          var bodyStyle = `<style>
            .input-box{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 5px 0px;
              }
             .box-ge{
                border-bottom: 1px solid #000000 ;
                box-sizing: border-box;
                padding: 10px;
              }
              .box-title{
                font-size: 18px;
                text-align: center;
                align-items: center;
                margin-top: 15px;
              }
              .input-hui{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 15px 0px;
                background: #b2b2b2;
                box-sizing: border-box;
                padding: 5px 0px;
              }
              .input-hui-frou{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 15px 0px;
                background: #b2b2b2;
                box-sizing: border-box;
                padding: 5px 0px;
                div{
                  width: 25%;
                  text-align: left;
                }
              }
              .input-box-frou{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 5px 0px;
                div{
                  width: 25%;
                  text-align: left;
                }
              }
            </style>
            `
          var fromHtml = bodyStyle+this.$refs.report.innerHTML


          LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);

          LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true);

          // LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
          // let preview = LODOP.PREVIEW();
          // console.log("preview",preview);
          LODOP.PRINT();
        },

        getList(){
        getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
          this.dataList = res.data.records
          this.total = res.data.total

          })
        },

        // 交班记录
        recording() {
          this.$router.push({
            path:'/HandoverDetails',
            query:{
              id:9
            }
          });
        },


        paymentAggregation(flag) {
          let count = [];
          if (this.handoverList && this.handoverList.paymentAggregation) {
            this.handoverList.paymentAggregation.forEach(res=> {
              if (flag == 'fg') {
                if (res.flag == "card" || res.flag == "fuel") {
                  let flag2 = false;
                  count.forEach(coun => {
                    if (res.payType === coun.payType) {
                      coun.paidAmount += res.paidAmount;
                      flag2 = true;
                    }
                  });
                  if (!flag2) {
                    // 创建新的对象，以防修改原始数据
                    let newRes = { ...res };
                    count.push(newRes);
                  }
                }
              }else if (res.flag == flag) {
                count.push(res)
              }
            })
          }
          return count;
        },

        calculateThePaymentMethod(payType) {
          switch (payType) {
            case 'ALIPAY':
              return '支付宝'
              break;
            case 'WECHAT':
              return '微信'
              break;
            case 'UNIONPAY':
              return '银联二维码'
              break;
            case 'CASH':
              return '现金'
              break;
            case 'balance':
              return '余额'
              break;
            case 'oilCard':
              return '油卡'
              break;
          }
          return '未知'
        },
        oilNumberStatistics() {
          let count = [];
          if (this.handoverList && this.handoverList.oilNumberStatistics) {
            return this.handoverList.oilNumberStatistics
          }
          return count;
        },
        greaseGunStatistics() {
          let count = [];
          if (this.handoverList && this.handoverList.greaseGunStatistics) {
            return this.handoverList.greaseGunStatistics
          }
          return count;
        },
        employeeStatistics() {
          console.log("this.employeeStatistics",this.handoverList.employeeStatistics)
          let count = [];
          if (this.handoverList && this.handoverList.employeeStatistics) {
            return this.handoverList.employeeStatistics
          }
          return count;
        },
        billingDetails() {
          let count = [];
          if (this.handoverList && this.handoverList.billingDetails) {
            return this.handoverList.billingDetails
          }
          return count;
        },
        returnedToTheAccount() {
          let count = [];
          if (this.handoverList && this.handoverList.returnedToTheAccount) {
            return this.handoverList.returnedToTheAccount
          }
          return count;
        },
        shift() {
          this.$confirm('交班并退出系统, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let recordData = this.handoverList
            let handoverRecord = {
              startTime:this.handoverList.baseInfo.endTime,
              recordData:JSON.stringify(recordData),
              type:0,
              status:0,
            }
            addHandoverApi(handoverRecord).then(res=>{

              console.log("")
            })
            //
            // this.$message({
            //   type: 'success',
            //   message: '删除成功!'
            // });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消交班'
            });
          });
        }
      },
      computed:{
        //退款汇总合计
        refundAggregateTotal() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "all"){
                num = num.plus(new BigNumber(res.refundAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        //实收汇总合计
        totalTotalOfActualReceipts() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "all") {
                num = num.plus(new BigNumber(res.paidAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        //油品订单合计
        totalOilOrders() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "oil") {
                num = num.plus(new BigNumber(res.paidAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        //商品订单合计
        totalOfProductOrders() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "goods") {
                num = num.plus(new BigNumber(res.paidAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        //会员储值合计
        totalMemberStoredValue() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "card" || res.flag == "fuel") {
                num = num.plus(new BigNumber(res.paidAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        // 积分商城统计
        pointsMallStatistics() {
          if (this.handoverList && this.handoverList.paymentAggregation) {
            let num = new BigNumber(0);
            this.handoverList.paymentAggregation.forEach(res => {
              if (res.flag == "point") {
                num = num.plus(new BigNumber(res.paidAmount));
              }
            });
            return Number(num.toString()); // 转换为数字
          }
          return 0.00;
        },
        //油号统计合计
        totalOilNumberStatistics() {
          if (this.handoverList && this.handoverList.oilNumberStatistics) {
            let num = new BigNumber(0);
            this.handoverList.oilNumberStatistics.forEach(res=>{
              num = num.plus(new BigNumber(res.paidAmount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        },
        //优惠统计合计
        discountStatisticsTotal() {
          if (this.handoverList && this.handoverList.oilNumberStatistics) {
            let num = new BigNumber(0);
            this.handoverList.oilNumberStatistics.forEach(res=>{
              num = num.plus(new BigNumber(res.paidDiscount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        },
        //油枪统计合计
        totalOfOilGunStatistics() {
          if (this.handoverList && this.handoverList.greaseGunStatistics) {
            let num = new BigNumber(0);
            this.handoverList.greaseGunStatistics.forEach(res=>{
              num = num.plus(new BigNumber(res.paidAmount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        },
        //员工统计合计
        totalOfEmployeeStatistics() {
          if (this.handoverList && this.handoverList.employeeStatistics) {
            let num = new BigNumber(0);
            this.handoverList.employeeStatistics.forEach(res=>{
              num = num.plus(new BigNumber(res.paidAmount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        },
        // 挂账详情统计
        statisticsOfAccountDetails(){
          if (this.handoverList && this.handoverList.billingDetails) {
            let num = new BigNumber(0);
            this.handoverList.billingDetails.forEach(res=>{
              num = num.plus(new BigNumber(res.amount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        },
        // 挂账归还统计
        postedAccountReturnStatistics(){
          if (this.handoverList && this.handoverList.returnedToTheAccount) {
            let num = new BigNumber(0);
            this.handoverList.returnedToTheAccount.forEach(res=>{
              num = num.plus(new BigNumber(res.amount));
            })
            return Number(num.toString()); // 转换为数字
          }
          return 0;
        }
      }

    }
</script>

<style scoped lang="scss">
  .app-center{
    width: 100%;

    box-sizing: border-box;
    padding: 10px;
  }
  .box-center{
    width: 508px;
    height: 85vh;
    background-color: white;
    margin: 10px auto;
    box-sizing: border-box;
    overflow: auto;
  }
  .box-ge{
    border-bottom: 1px solid #ececec ;
    box-sizing: border-box;
    padding: 10px;
  }
  .box-title{
    font-size: 18px;
    text-align: center;
    align-items: center;
    margin-top: 15px;
  }
  .input-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 5px 0px;
  }
  .input-box-frou{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 5px 0px;
    div{
      width: 25%;
      text-align: left;
    }
  }
  .input-hui{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 5px 0px;
  }
  .input-hui-frou{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 5px 0px;
    div{
      width: 25%;
      text-align: left;
    }
  }
  .boloicon{
    font-weight: bold;
    margin: 10px 0px;
  }
  .app-bottom{
    position: fixed;
    bottom: 0px;
    height: 100px;
    width: 90%;
  }
  .bottom-xz{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .anniu{
    width: 100px;
    height: 40px;
    background: #00afff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50px;
    margin: 0px 15px;
    cursor: pointer;
  }
  .anniu-lv{
    background: #1ab394;
    width: 100px;
    height: 40px;

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50px;
    margin: 0px 15px;
    cursor: pointer;
  }

</style>
