<template>
  <div class="securityFund">
    <el-card class="box-card">
      <div class="header">
        <i class="el-icon-warning" style="color: #F1914E; "></i>
        这里展示您保证金的交保、退保、补缴、扣除等记录，保证金并不是向云仓付费，而是作为专项资产在您的账户中。保证金余额不支持直接提现，当退出相应服务后可申请退还保证金！
      </div>
      <div class="securityFund-title">
        <i class="title-icon"></i>
        保证金
      </div>
      <div class="securityFund-content">
        <div style="display: flex; align-items: center;" v-if="isPay">
          <span><i class="el-icon-success" style="color: #67c23a; font-size: 26px;"></i></span>
          <span style="margin: 0 20px 0 5px; font-size: 16px;">已缴纳保证金</span>
          <span>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</span>
        </div>
        <div style="display: flex; align-items: center;" v-if="!isPay">
          <span><i class="el-icon-error" style="color: red; font-size: 26px;"></i></span>
          <span style="margin: 0 20px 0 5px; font-size: 16px;">未缴纳保证金</span>
          <span>根据您的商品所在类目，需缴纳【{{ getFixed(cate_bond - bond) }}元】保证金，您还未缴纳！保证金用于您的信用保障和消费者的权益保护，如果您有违约责任，平台将根据规定扣除您一定比例的保证金。</span>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 50px;">
          <div style="width: 33%; text-align: center; border-right: 2px solid #E8E7E7;">
            <div>保证金余额</div>
            <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥{{ getFixed(bond) }}</div>
          </div>
          <div style="width: 33%; text-align: center; border-right: 2px solid #E8E7E7;">
            <div>冻结金额</div>
            <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥{{ getFixed(frozen_bond) }}</div>
          </div>
          <div style="width: 33%; text-align: center; display: flex; justify-content: center; align-items: flex-end;">
            <div>
              <div>初始应缴</div>
              <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥{{ getFixed(cate_bond) }}</div>
            </div>
            <div style="padding: 6px 0 6px 10px; cursor: pointer;" class="desc" @click="limitDialog = true">【保证金额度说明】</div>
            <div style="padding: 6px 0; cursor: pointer;" class="desc" @click="ruleDialog = true">【保证金扣减说明】</div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 50px; width: 100%;">
          <el-button type="primary" size="mini" style="width: 80px;" @click="payDialog = true" :disabled="!isPay || bond >= cate_bond || !isShowPay">充值</el-button>
          <el-button size="mini" style="width: 80px;" @click="cancellationDialog = true" :disabled="bond <= 0">申请退保</el-button>
        </div>
      </div>
      <div class="flowList">
        <div>
          <div class="flow-title">交易流水</div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 10px;"
          >
          <el-table-column
            align="center"
            label="流水单号"
            >
            <template slot-scope="scope">
              {{ scope.row.sn }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="完成时间"
            >
            <template slot-scope="scope">
              {{ formatter(scope.row.updated_time) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="变动类型"
            >
            <template slot-scope="scope">
              <div>
                {{ scope.row.type == 1 ? '增加' : '减少' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="变动金额"
            >
            <template slot-scope="scope">
              <div>
                {{ getFixed(scope.row.money) }}元
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="explain"
            label="变动说明"
            >
          </el-table-column>
        </el-table>
        <div class="footer_pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 40, 60, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 充值弹框 -->
    <el-dialog
      title="缴纳保证金"
      :visible.sync="payDialog"
      :destroy-on-close="true"
      width="35%"
      center
      :close-on-click-modal="false" 
      append-to-body
      @close="initData"
    >
      <div>
        <div class="header" style="text-align: center; font-size: 12px; line-height: 20px;">
          根据您的商品所在类目，需缴纳{{ getFixed(cate_bond - bond) }}元保证金，【不支持个人转账】
        </div>
        <el-form ref="payForm" :model="payForm" label-width="110px" style="margin-top: 20px;">
          <el-form-item label="应缴纳额度：">
            <el-input v-model="payForm.money" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="缴纳方式：">
            <el-radio v-model="payRadio" label="1" v-if="isShowPay1">线下转账</el-radio>
            <el-radio v-model="payRadio" label="2" v-if="isShowPay2">支付宝</el-radio>
          </el-form-item>
          <div v-if="payRadio == 1">
            <el-form-item label="开户名称：">
              <el-input v-model="payForm.name" placeholder="北京胜天半子科技有限公司" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="开户银行：">
              <el-input v-model="payForm.bank" placeholder="招商银行北京分行丰台科技园支行" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="银行账号：">
              <el-input v-model="payForm.bankNum" placeholder="110945259110901" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="汇款凭证：">
              <el-upload
                class="avatar-uploader"
                action=""
                list-type="picture-card"
                :http-request="uploadLogo"
                :before-upload="beforeUpLogo"
                :file-list="ruleFormdialogLogo"
                :limit="2"
                :on-exceed="limitCount1"
                :before-remove="beforeRemoveLogo"
                :on-remove="removeLogo"
                :on-preview="handleMainImgLogo"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <span>最多上传2张，支持png/jpg，大小不超过500KB</span>
            </el-form-item>
            <el-form-item label="汇款公户名称：">
              <el-input v-model="payForm.account" placeholder=" 请输入您汇款的账户名称"></el-input>
            </el-form-item>
          </div>
          <div v-if="payRadio == 2">
            <el-form-item label="">
              <div style="background: rgba(58, 160, 255, .05); padding: 20px;">
                <div>温馨提示：</div>
                <div>不支持信用卡方式充值</div>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div style="text-align: right;">
          <el-button type="primary" @click="onSubmit(1)" v-if="payRadio == 1">提交</el-button>
          <el-button type="primary" @click="onSubmit(2)" v-if="payRadio == 2">立即付款</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 申请退保 -->
    <el-dialog
      title="申请退保"
      :visible.sync="cancellationDialog"
      :destroy-on-close="true"
      width="38%"
      center
      :close-on-click-modal="false" 
      append-to-body
      @close="cancellationinitData"
    >
      <div v-if="!isSubmit">
        <div class="header" style="text-align: center; font-size: 12px; line-height: 20px;">
          <div>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</div>
          <div>如果您意向停止合作，可在线提交申请，退保后双方自动解约，您的店铺将被关闭，商品将被下架，请知悉！</div>
        </div>
        <el-form ref="cancellationForm" :model="cancellationForm" label-width="110px" style="margin-top: 20px;">
          <el-form-item label="退保金额：">
            <el-input v-model="cancellationForm.money" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="退保至：">
            <el-select v-model="cancellationForm.account" placeholder="请选择退保的账户" style="width: 100%;">
              <el-option :label="item.bank_name" :value="item.id" v-for="item in optionAcount" :key="item.id"/>
            </el-select>
            <div style="font-size: 12px; color: #FF4D4F;">选择您的提现账户，如果没有请在【资产】页面当中添加</div>
          </el-form-item>
          <el-form-item label="短信验证码：">
            <el-input v-model="cancellationForm.code" style="width: 70%;" :placeholder="`请输入手机${getTel(emergency_tel)}的验证码`" oninput="value = value.replace(/[^\d]/g, '')"></el-input>
            <el-button @click="getCode" v-if="isAccountCode">获取短信验证码</el-button>
            <el-button style="width: 109px" :disabled="true" v-if="!isAccountCode">倒计时 {{ accountCountDown }}
              S
            </el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button type="primary" @click="submitCancellation">提交</el-button>
        </div>
      </div>
      <!-- 提交成功提示 -->
      <div style="text-align: center;" v-if="isSubmit">
        <div><i class="el-icon-success" style="color: #67c23a; font-size: 34px;"></i></div>
        <div style="margin: 10px 0 30px;">申请已提交，工作人员将与您联系，请注意来电</div>
        <div style="background: rgba(58, 160, 255, .05); padding: 20px; line-height: 30px;">
          <div>感谢您使用云仓！</div>
          <div>您的退保申请已提交，工作人员将与您取得联系核实情况，大约需要1-3个工作日，请您耐心等待。</div>
          <div>在此过程中请确保您的全部订单已发货、无售后订单、账户余额已全部提现！</div>
          <div>如果您有其它的问题，可以拔打我们的服务电话与我们联系！</div>
          <!-- <div>服务电话：<span style="color: #3AA0FF;">4000-188-199</span></div> -->
        </div>
      </div>
    </el-dialog>

    <!-- 保证金扣款说明 -->
    <el-dialog
      style="margin-top: 200px;"
      title="扣减规则"
      :visible.sync="ruleDialog"
      :destroy-on-close="true"
      width="35%"
      center
      :close-on-click-modal="false" 
      append-to-body
    >
      <div>
        <div style="background: rgba(58, 160, 255, .05); padding: 20px; line-height: 24px;">
          <div>1、订单延迟发货，延迟0-24小时不作处罚，延迟24-72小时，扣除该订单金额的10%作为处罚，超过72小时扣除该订单金额的50%作为处罚</div>
        </div>
      </div>
    </el-dialog>

    <!-- 保证金额度说明 -->
    <el-dialog
      style="margin-top: 200px;"
      title="各类目保证金收取标准"
      :visible.sync="limitDialog"
      :destroy-on-close="true"
      width="70%"
      center
      :close-on-click-modal="false" 
      append-to-body
    >
      <div style="height: 500px; overflow-y: auto;">
        <el-table
          :data="bondByCateList"
          tooltip-effect="dark"
          style="width: 100%;"
          >
          <el-table-column
            align="center"
            label="序号"
            width="55">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="一级类目"
            >
            <template slot-scope="scope">
              {{ scope.row.cate_name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="保证金额度（元）"
            >
            <template slot-scope="scope">
              {{ getFixed(scope.row.bond) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="额度说明"
            >
            <template slot-scope="scope">
              <div>
                采取就高原则，取类目保证金最大值
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px;">
          <el-button type="primary" @click="limitDialog = false">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisibleLogo" class="dialog-img-spe">
      <img width="100%" :src="dialogImageLogo" alt=""/>
    </el-dialog>
  </div>
</template>

<script>
  import { UploadImg } from '@/api/module/goods'
  import { shopInfo, bondDetail, addBond, bondByCate, accountList, bondApply, payDetails, applyDetail, sendMobile } from '@/api/securityFund';
  // import { getTelphoneCode } from '@/api/module/settings'
  import { dateFormat } from '@/utils'
  
  export default {
    data() {
      return {
        bond: 0, // 保证金金额
        frozen_bond: 0, // 冻结金额
        cate_bond: 0, // 初始应缴
        payRadio: '1',
        isPay: true, // 是否需要缴纳保证金
        isSubmit: false,
        cancellationDialog: false,
        ruleDialog: false,
        limitDialog: false,
        payDialog: false,
        payForm: {
          money: '',
          name: '北京胜天半子科技有限公司',
          bank: '招商银行北京分行丰台科技园支行',
          bankNum: '110945259110901',
          account: ''
        },
        cancellationForm: {
          money: '',
          account: '',
          code: ''
        },
        currentPage: 1,
        pageSize: 20,
        total: 0,
        tableData: [],
        ruleFormdialogLogo: [],  // 汇款凭证
        dialogVisibleLogo: false,
        dialogImageLogo: '',
        optionAcount: [],
        bondByCateList: [],
        seller_id: '',
        emergency_tel: '',
        isAccountCode: true,
        timer: null,
        accountCountDown: 60,
        isShowPay1: true,
        isShowPay2: true,
        isShowPay: true
      }
    },
    mounted() {
      this.getShopInfo()
      this.getBondDetail()
      this.getbondByCate()
      this.getPayDetails()
    },
    methods: {
      formatter(time) {
        return dateFormat(time * 1000, 'Y-m-d H:i:s')
      },
      // 处理金额
      getFixed(value) {
        let data = 0
        if (value) {
          data = (value / 100).toFixed(2)
        }
        return data
      },
      getTel(val) {
        let tel = ''
        tel = val.substring(0, 3) + '****' + val.substring(7, val.length) 
        return tel
      },
      // 获取支付账户
      getPayDetails() {
        payDetails().then(res => {
          if (res.code == 1) {
            if (res.data) {           
              // 线下转账-是否开启 0关闭 1开启
              if (res.data.BankSettings.is_bank_open) {
                this.isShowPay1 = true
              } else {
                this.isShowPay1 = false
                this.payRadio = '2'
              }

              // 支付宝--是否开启 0关闭 1开启
              if (res.data.AlipaySettings.is_alipay_open) {
                this.isShowPay2 = true
              } else {
                this.isShowPay2 = false
                this.payRadio = '1'
              }

              this.payForm.name = res.data.BankSettings.bank_account_name
              this.payForm.bank = res.data.BankSettings.bank_name + res.data.BankSettings.bank_branch_name
              this.payForm.bankNum = res.data.BankSettings.bank_account_sn

            } else { // 没有设置支付账户
              this.isShowPay = false
            }
          }
        })
      },
      // 获取账户列表
      getAccountList() {
        let params = {
          page: 1,
          limit: 100,
          seller_id: this.seller_id
        }
        accountList(params).then(res => {
          if (res.code == 1) {
            this.optionAcount = res.data.data
          }
        })
      },
      // 保证金额度说明
      getbondByCate() {
        bondByCate().then(res => {
          if (res.code == 1) {
            this.bondByCateList = res.data
          }
        })
      },
      // 获取店铺信息
      getShopInfo() {
        shopInfo().then(res => {
          if (res.code == 1) {
            this.bond = res.data.bond || 0
            this.frozen_bond = res.data.frozen_bond || 0
            this.cate_bond = res.data.cate_bond || 0
            this.seller_id = res.data.seller_id
            this.emergency_tel = sessionStorage.getItem('iphone')
            this.cancellationForm.money = this.getFixed(this.bond)

            this.payForm.money = this.getFixed(this.cate_bond - this.bond)

            // 是否需要缴纳保证金 0关闭 1打开
            if (res.data.is_take_bond == 1) {
              this.isPay = true
            } else {
              this.isPay = false
            }

            this.getAccountList()
          }
        })
      },
      // 获取交易流水
      getBondDetail() {
        let params = {
          page: this.currentPage,
          limit: this.pageSize
        }
        bondDetail(params).then(res => {
          if (res.code == 1) {
            this.tableData = res.data.data
            this.total = res.data.count
          }
        })
      },
      initData() {
        this.ruleFormdialogLogo = []
        this.payForm.account = ''
      },
      // 充值保证金
      getAddBond(type) {
        let imgArr = []
        this.ruleFormdialogLogo.map(item => {
          imgArr.push(item.url)
        })

        let params 
        if (type == 1) {
          params = {
            recharge_type: 1,
            voucher: imgArr || undefined,
            remitting_public_account: this.payForm.account || undefined
          }
        } else {
          params = {
            recharge_type: 2
          }
        }
        
        addBond(params).then(res => {
          if (res.code == 1) {
            if (type == 1) {
              this.$message({
                type: 'success',
                message: '提交成功'
              })
              this.payDialog = false
              this.getShopInfo()
            } else {
              // 支付宝支付
              window.open(res.data.pay_url, '_blank')
              this.$confirm('请在支付宝充值页面进行充值。充值完成后，请回到此页面，根据您的情况，点击下方的按钮','充值',{
                confirmButtonText: '充值成功',
                cancelButtonText: '充值失败',
                type: 'warning'
              }).then(async () => {
                let payResult = await applyDetail({ id: res.data.id })
                if(payResult.code === 1) {
                  if (payResult.data.audit_status == 1) {
                    this.$message({type: 'success', message: '充值成功！'})
                  } else {
                    this.$message({type: 'error', message: '充值失败！'})
                  }
                  this.payDialog = false
                  this.getShopInfo()
                }
              }).catch((err)=> {});
            }
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      },
      // 提交凭证
      onSubmit(type) {
        if (type == 1) {
          if (!this.ruleFormdialogLogo.length) {
            this.$message({
              type: 'warning',
              message: '请上传汇款凭证'
            })
            return
          }
          
          let isNull = this.payForm.account.replace(/\s+/g, '')
          if (isNull === '') {
            this.$message({
              type: 'warning',
              message: '请输入汇款的账户名称'
            })
            return
          }
          this.getAddBond(1)
        } else {
          this.getAddBond(2)
        }
      },
      // 获取短信验证码
      getCode() {
        const TIME_COUNT = 60;
        
        if (!this.timer) {
          this.accountCountDown = TIME_COUNT;
          this.isAccountCode = false;
          this.timer = setInterval(() => {
            if (this.accountCountDown > 0 && this.accountCountDown <= TIME_COUNT) {
              this.accountCountDown--;
            } else {
              this.isAccountCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }

        // 获取验证码
        sendMobile().then(res => {
          if(res.code == 1) {
            this.$message({type:"success",message: '验证码发送成功'})
          }else {
            this.$message({type:"error",message: '验证码发送失败'})
          }
        });
      },
      // 清空申请退保数据
      cancellationinitData() {
        this.cancellationForm.account = ''
        this.cancellationForm.code = ''
        if (this.isSubmit) {
          this.isSubmit = false
          this.getShopInfo()
        }
      },
      // 申请退保
      submitCancellation() {
        if (!this.cancellationForm.account) {
          this.$message({
            type: 'warning',
            message: '请选择退保的账户'
          })
          return
        }
        if (!this.cancellationForm.code) {
          this.$message({
            type: 'warning',
            message: '请输入短信验证码'
          })
          return
        }
        
        let params = {
          money: this.cancellationForm.money * 10 * 10,
          bank_id: this.cancellationForm.account,
          code: this.cancellationForm.code
        }
        bondApply(params).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'warning',
              message: '提交成功'
            })
            this.isSubmit = true
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })

      },
      // 商品主图 数量限制
      limitCount1(files, fileList) {
        this.$message({message: '最多上传2张图片', type: 'warning'});
      },
      // 顶部logo 大小格式样式校验
      beforeUpLogo(file, fileList) {
        if (file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持png/png格式',
            type: "warning"
          });
          return false;
        }
        let isImgSize = (file.size / 1024 ) > 500;
        if (isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500k',
            type: "warning"
          });
          return false;
        }
        // 图片宽高尺寸限制
        // return new Promise(function (resolve, reject) {
        //   let _URL = window.URL || window.webkitURL;
        //   let img = new Image();
        //   img.onload = function () {
        //     // 图片是否是正方形 宽高比为 1
        //     let valid = img.width <= 108 && img.height <= 108;
        //     valid ? resolve() : reject();
        //   }
        //   img.src = _URL.createObjectURL(file);
        // }).then(() => {
        //   return file;
        // }, () => {
        //   this.$message({
        //     message: '界面logo最大尺寸为108*108像素，请重新选择!',
        //     type: 'warning'
        //   });
        //   return Promise.reject();
        // });
      },
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },
      // 上传顶部logo
      uploadLogo(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2}
          UploadImg(data).then(res => {
            if (res && res.code == 1) {
              this.ruleFormdialogLogo.push({url: res.data.image_url})
              this.$message({message: '上传成功', type: 'success'});
            } else {
              this.ruleFormdialogLogo = [];
              this.$message({message: '上传失败，请重新上传', type: 'error'});
            }
          })
        });
      },
      // 顶部logo 删除移除前
      beforeRemoveLogo(file, fileList) {
        if (file.status === "success") {
          return new Promise((res, rej) => {
            this.$confirm(`是否删除此图片`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              return res();
            }).catch(() => {
              this.$message({
                type: 'success',
                message: '取消删除!'
              });
              return rej();
            });
          });
        }
      },
      // 顶部logo删除
      removeLogo(file) {
        if (file.status === "success") {
          for (let i = 0; i < this.ruleFormdialogLogo.length; i++) {
            if (file.uid === this.ruleFormdialogLogo[i].uid) {
              this.ruleFormdialogLogo.splice(i, 1);
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      },
      // 顶部logo 预览
      handleMainImgLogo(file) {
        this.dialogImageLogo = file.url;
        this.dialogVisibleLogo = true;
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getBondDetail()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getBondDetail()
      }
    }
  }
</script>

<style scoped>
  .securityFund {
    height: 100%;
    overflow-y: auto;
  }
  .securityFund .box-card {
    margin: 20px;
  }
  .header {
    border: 1px solid #F1914E; 
    background: #FFF5ED; 
    padding: 10px; 
    font-size: 14px;
    margin: 10px auto;
  }
  .securityFund-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    color: #333;
    border-bottom: 2px solid #F6F6F8;
    padding-bottom: 10px;
    margin-top: 40px;
  }
  .title-icon {
    display: inline-block; 
    width: 3px; 
    height: 15px; 
    background: #3AA0FF; 
    margin-right: 5px;
  }
  .securityFund-content {
    background: #F8FBFD;
    height: 300px;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    padding: 30px;
    margin-top: 30px;
  }
  .flowList {
    margin-top: 20px;
  }
  .flow-title {
    width: 80px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    background: #3AA0FF; 
    border-radius: 2px; 
    display: inline-block; 
    color: #fff; 
    font-size: 14px;
  }
  .footer_pagination {
    text-align: center;
    margin-top: 20px;
  }
  .desc:hover {
    color: #3AA0FF;
  }
</style>