wallet_app/src/views/transaction/jys/index.vue

<template>
    <div class="container">
        <div class="content">
            <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
            <div class="tab-box">
                <div class="tab-text" 
                    v-for="(item,i) in tabList" :key="i" 
                    :class="tabActive == i?'active-text':''"
                    @click="changeTab(i)">{{item}}
                </div>
            </div>
            <div class="information-box">
                <div class="information-ul">
                    <div class="information-title">{{ $t('transaction.CurrentPriceSTT') }}</div>
                    <div class="rate">{{formatToFixed4(WGTLIST.rate)}}</div>
                    <div class="cny">≈CNY {{multiplyAndFormat4(WGTLIST.rate,WGTLIST.cny)}}</div>
                    <div class="balance">{{ $t('transaction.WalletBalanceWGT') }} {{formatToFixed4(WGTLIST.balance)}}</div>
                </div>
                <div class="information-ul">
                    <div class="information-title">{{tabActive == 0?$t('transaction.PurchaseQuantitySTT'):tabActive == 1?$t('transaction.OrderQuantityWGT'):$t('transaction.WalletBalanceWGT')}}</div>
                    <van-field v-model="valueInput" class="rate" :placeholder="`$t('transaction.PleaseEnter')${tabActive == 0?'STT':'WGT'}{{ $t('transaction.Quantity') }}`"/>
                    <div class="cny">≈ {{sttAmount.toFixed(4)}} {{ tabActive == 0 ? 'WGT' : 'STT' }}</div>
                    <div class="balance">{{ $t('transaction.WalletBalanceWGT') }} {{formatToFixed4(STTLIST.balance)}}</div>
                </div>
            </div>
            <van-button class="information-btn" type="primary" size="large" @click="changeBtn">{{tabActive == 0?$t('transaction.BuyWGT'):tabActive == 1?$t('transaction.OrderToSellWGT'):$t('transaction.BookNow')}}</van-button>
            <!-- 广告 -->
            <div class="card-box">
                <div class="card-ul">
                    <div class="card-li" v-for="(item,i) in cardList" :key="i" >{{item}}</div>
                </div>
                <div class="list-ul">
                    <div class="list-li" v-for="item in list" :key="item.id">
                        <div class="list-text">{{formatAddress(item?.seller_address)}}</div>
                        <div class="list-text">{{ formatToFixed4(item?.money) }}</div>
                        <div class="list-text">{{ formatToFixed4(item?.amount) }}</div>
                        <div class="list-text">
                            <div class="list-btn" @click="purchase(item)">{{ $t('transaction.Buy') }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="delegation" v-if="tabActive != 0">
                <div class="delegation-label">
                    <div :class="delegationIndex == 1?'active-label':''" @click="delegationIndex = 1">{{ $t('transaction.CurrentCommission') }}</div>
                    <div :class="delegationIndex == 2?'active-label':''" @click="delegationIndex = 2">{{ $t('transaction.MarketTrading') }}</div>
                </div>
                <div class="delegation-ul">
                    <template v-if="delegationIndex == 1">
                        <div class="delegation-li" v-for="item in entrustMylist">
                            <div>
                                <div class="m4"><text class="cell-label green">{{isSubscribe?$t('transaction.Reservation'):''}}{{ $t('transaction.SellOrder') }}</text>{{ formatAddress(item?.seller_trans_hash) }}</div>
                                <div class="m4 red"><text class="cell-label">{{isSubscribe?$t('transaction.Reservation'):$t('transaction.Entrusted')}}{{ $t('transaction.Value') }}</text>{{formatToFixed4(item?.money)}} STT</div>
                                <div class="m4 blue"><text class="cell-label">{{isSubscribe?$t('transaction.Reservation'):$t('transaction.Entrusted')}}{{ $t('transaction.Quantity') }}</text>{{ formatToFixed4(item?.amount) }} WGT</div>
                                <div><text class="cell-label">{{isSubscribe?$t('transaction.Reservation'):$t('transaction.Entrusted')}}{{ $t('transaction.Time') }}</text>{{item.created_at}}</div>
                            </div>
                            <div class="green text-ri">
                                <div class="m8">{{isSubscribe?$t('transaction.Reservation'):$t('transaction.Current')}}{{ $t('transaction.Price') }} {{ isSubscribe ? formatToFixed4(item.price) : formatToFixed4(WGTLIST.rate) }}</div>
                                <div style="display: flex;justify-content: flex-end;">
                                    <div v-if="isSubscribe" 
                                        class="cell-btn" 
                                        :class="item.status == 'N'?'box-entrust':'box-cancel'" 
                                        @click="collect(item)">{{item.status == 'N'?$t('transaction.UnderCommission'):$t('transaction.Claim')}}
                                    </div>
                                    <div v-else 
                                        class="cell-btn red" 
                                        style="border: 1px solid #FF0000;" @click="changeCancel(item)">{{ $t('transaction.Revoke') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="delegationIndex == 2">
                        <div class="delegation-li" v-for="item in entrustBuylist">
                            <div>
                                <div class="m4"><text class="cell-label">{{ $t('transaction.SalesOrderNumber') }}</text>{{ formatAddress(item?.seller_trans_hash) }}</div>
                                <div class="m4"><text class="cell-label">{{ $t('transaction.PaymentNumber') }}</text>{{ formatAddress(item?.pay_trans_hash) }}</div>
                                <div class="m4 red"><text class="cell-label">{{ $t('transaction.TransactionPrice') }}</text>{{ formatToFixed4(item?.pay_price) }} STT</div>
                                <div><text class="cell-label">{{ $t('transaction.Time') }}</text>{{item.pay_date}}</div>
                            </div>
                            <div class="red text-ri">
                                <div class="m4">WGT</div>
                                <div class="m4">{{ $t('transaction.Value') }} {{ multiplyAndFormat4(item?.pay_price,item?.amount) }} STT</div>
                                <div>{{ $t('transaction.Quantity') }} {{ formatToFixed4(item?.amount) }} WGT</div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            </van-pull-refresh>
        </div>
        <van-popup v-model:show="isShowDetail" position="bottom" round>
            <div class="pop-content">
                <div class="pop-title">
                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
                    <div class="title">{{ $t('transaction.TransactionDetails') }}</div>
                </div>
                <div class="subtitle">{{ $t('transaction.AreYouSureToSubmit') }}</div>
                <div class="address">
                    <div>{{ $t('transaction.TheOtherPartyIsAddress') }}</div>
                    <div class="address-text">{{purchaseInfo.seller_address}}</div>
                </div>
                <div class="pop-btn">
                    <van-button type="default" class="btn cancel" @click="isShowDetail = false">{{ $t('transaction.Cancel') }}</van-button>
                    <van-button type="default" class="btn confirm" @click="purchaseConfirm" :disabled="isPurchaseConfirm">{{ $t('transaction.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
        <van-popup v-model:show="showWallet" position="bottom" round >
            <div class="pop-content">
                <div class="pop-title">
                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
                    <div class="title">{{ $t('me.TransactionDetails') }}</div>
                </div>
                <div class="pop-detail">
                    <div class="pop-detail-cell">
                        <div class="cell-label">{{ $t('transaction.PaymentAddress') }}：</div>
                        <div class="cell-text">{{walletStore.account}}</div>
                    </div>
                    <div class="pop-detail-cell">
                        <div class="cell-label">{{ $t('transaction.ReceivingAddress') }}：</div>
                        <div class="cell-text">{{tabActive==2?'0x4F9b2Bc9d8080Ce7a812419DBDA0FA1C483C5368':'0x632e220EC1420e1c2B0A29a690C7A7eeeD0974e2'}}</div>
                    </div>
                    <div class="pop-detail-cell">
                        <div class="cell-label">{{ $t('transaction.MinerIsfee') }}：</div>
                        <div class="cell-text">{{ gasFee }} ACC</div>
                    </div>
                    <div class="pop-btn-detail">
                        <van-button class="btn-detail" 
                            type="primary" size="large" 
                            color="#4765DD" @click="confirm" :disabled="!gasFee || gasFee === '0.0000' || isConfirm">{{ $t('transaction.Sure') }}
                        </van-button>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model:show="showCX" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">{{ $t('transaction.IsItCertainToBeRevoked') }}</div>
                <div class="pop-btn-password">
                    <van-button type="default" class="btn-password cancel" @click="showCX = false">{{ $t('transaction.Cancel') }}</van-button>
                    <van-button type="default" class="btn-password confirm" @click="popConfirm" :disabled="isPopConfirm">{{ $t('transaction.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { 
    entrustList,entrustMy,subscribeMy,entrustBuy,entrustContractPublisher,   
    contractRevoke,subscribeContractPublisher,
    contractTransfer,subscribeContractReceive,contractBuy } from '@/api/path/jys.api'
import { useWalletStore } from "@/stores/modules/walletStore";
import { showToast } from 'vant';
import wgtsttAbiData from "@/utils/wgtStt.json";
import { AES_CBC_ENCRYPT } from '@/utils/crypto';
import Web3 from "web3";
const walletStore = useWalletStore();
const web3 = new Web3(walletStore.rpcUrl);
let {ciphertext, iv} = AES_CBC_ENCRYPT(walletStore.privateKey);

const tabList = ['閃兌','委託賣出','預約賣出'];
const cardList = ['地址','價值(STT)','數量(WGT)','操作']
const list = ref([])//广告列表
const entrustMylist = ref([])//我的委托列表  或者  预约委托列表
const entrustBuylist = ref([]) //大盘成交列表
const tabActive = ref(1);
const valueInput = ref('');
const delegationIndex = ref(1);
const isSubscribe = ref(false);//false:委托列表  true：预约委托列表
const isShowDetail = ref(false);
const showWallet = ref(false);
const showCX = ref(false);
const activeItem = ref({})//撤销选中的数据
const purchaseInfo = ref({})//购买选中的数据
let STTLIST = walletStore.tokenList[1];
let WGTLIST = walletStore.tokenList[2];
const gasFee = ref(0)
const isPopConfirm = ref(false);
const isPurchaseConfirm = ref(false);
const isConfirm = ref(false);
const loading = ref(false);

const sttAmount = computed(() => {
    const price = Number(WGTLIST.rate)
    const wgt = Number(valueInput.value)
    if (isNaN(price) || isNaN(wgt)) return 0
    return tabActive.value == 0
    ? wgt / price
    : wgt * price
})
// 切换tab
const changeTab = (index) =>{
    tabActive.value = index;
    if(index == 0){
        entrustMylist.value = [];
    }else if(index == 1){
        getentrustMy();
    }else{
        getsubscribeMy();
    }
}
// 获取广告列表
const getentrustList = async () => {
    const res = await entrustList({price:WGTLIST.rate});
    list.value = res.data.data;
}
// 获取我的委托列表
const getentrustMy = async () => {
    const res = await entrustMy({price:WGTLIST.rate,address:walletStore.account});
    isSubscribe.value = false;
    entrustMylist.value = res.data.data;
}
// 获取预约委托列表
const getsubscribeMy = async () => {
    const res = await subscribeMy({price:WGTLIST.rate,address:walletStore.account});
    isSubscribe.value = true;
    entrustMylist.value = res.data.data;
}
// 大盘成交列表
const getentrustBuy = async () => {
    const res = await entrustBuy();
    entrustBuylist.value = res.data.data;
}
// 按钮
const changeBtn = async () => {
    const inputValue = parseFloat(valueInput.value);
    if (!valueInput.value || isNaN(inputValue) || inputValue <= 0) {
        showToast(!valueInput.value || isNaN(inputValue) ? '请输入有效的数量' : '数量必须大于0');
        return;
    }

    const balances = [Number(STTLIST.balance || 0), Number(WGTLIST.balance || 0),Number(WGTLIST.balance || 0)];
    const tokenName = tabActive.value == 0 ? 'STT' : 'WGT';
    if (inputValue > balances[tabActive.value]) {
        showToast(`输入数量不能大于可用${tokenName}数量`);
        return;
    }
    showWallet.value = true;

    // 估算gas费用
    const fee = await estimateGasFee({
        fromAddress: walletStore.account,  // 用户地址
        contractAddress: '0x632e220EC1420e1c2B0A29a690C7A7eeeD0974e2',
        abi: wgtsttAbiData,
        methodName: 'sellerDepositWGT',
        args: web3.utils.toWei(valueInput.value.toString(), 'ether')
    });
    gasFee.value = fee;
}
// 弹框确认
const confirm = () => {
    let params = {
        count:valueInput.value,
        address:walletStore.account,
        key:ciphertext,
        _s:iv
    }
    isConfirm.value = true;
    if(tabActive.value == 0){
        params.amount = valueInput.value;
        getTransfer(params);
    }else if(tabActive.value == 1){
        getPublisher(params);
    }else if(tabActive.value == 2){
        getsubscribePublisher(params);
    }
}
// 闪兑
const getTransfer = async (params) => {
    const res = await contractTransfer(params).finally(() => {isConfirm.value = false});
    if(res.ret){
        showToast('买入成功');
    }else{
        showToast(res.data.message || '买入失败');
    }
    valueInput.value = '';
    showWallet.value = false;
}
// 委托卖出
const getPublisher = async (params) => {
    const res = await entrustContractPublisher(params).finally(() => {isConfirm.value = false});
    if(res.ret){
        showToast('发布成功');
        setTimeout(() => {
            getentrustList();
            getentrustMy();
        }, 1000);
    }else{
        showToast('发布失败');
    }
    valueInput.value = '';
    showWallet.value = false;
}
// 预约卖出
const getsubscribePublisher = async (params) => {
    const res = await subscribeContractPublisher(params).finally(() => {isConfirm.value = false});
    if(res.ret){
        showToast('发布成功');
        setTimeout(() => {
            getsubscribeMy();
        }, 1000);
    }else{
        showToast('发布失败');
    }
    valueInput.value = '';
    showWallet.value = false;
}
// 撤销
const changeCancel = (item) => {
    showCX.value = true;
    activeItem.value = item;
}
// 弹框--撤销确认
const popConfirm = async () => {
    isPopConfirm.value = true;
    let params = {
        id:activeItem.value?.id,
        address:walletStore.account,
        key:ciphertext,
        _s:iv
    }
    const res = await contractRevoke(params).finally(() => {isPopConfirm.value = false});
    if(res.ret){
        showToast('撤销成功');
        setTimeout(() => {
            getentrustList();
            getentrustMy();
        }, 1000);
    }else{
        showToast(res.data.message || '撤销失败');
    }
    showCX.value = false;
}
// 预约委托--领取
const collect = async (item) => {
    if(item.status == 'N') return;
    let params = {
        id:item.id,
        address:walletStore.account,
        key:ciphertext,
        _s:iv
    }
    const res = await subscribeContractReceive(params)
    if(res.ret){
        showToast('领取成功');
        setTimeout(() => {
            getsubscribeMy();
        }, 1000);
    }else{
        showToast(res.data.message || '领取失败');
    }
}
// 买入
const purchase = (item) => {
    isShowDetail.value = true;
    purchaseInfo.value = item;
}
// 弹框--买入确定
const purchaseConfirm = async () => {
    isPurchaseConfirm.value = true;
    let params = {
        id:purchaseInfo.value.id,
        address:walletStore.account,
        seller_address:purchaseInfo.value.seller_address,
        key:ciphertext,
        _s:iv
    }
    const res = await contractBuy(params).finally(() => {isPurchaseConfirm.value = false});
    if(res.ret){
        showToast('买入成功');
        setTimeout(() => {
            getentrustList();
            getentrustMy();
        }, 1000);
    }else{
        showToast('买入失败');
    }
    isShowDetail.value = false;
}
const onRefresh = () => {
  setTimeout(() => {
    gethotTokens();
    loading.value = false;
  }, 1000);
};
// 更新代币数据
const gethotTokens = async () => {
  await walletStore.updateTokenVal()  
}
const formatToFixed4 = (val) => {
    if (val === null || val === undefined || val === '') return '0.0000';
    const num = Number(val);
    if (isNaN(num)) return '0.0000';
    return num.toFixed(4);
}
const multiplyAndFormat4 = (val1, val2) => {
    if (
      val1 === null || val1 === undefined || val1 === '' ||
      val2 === null || val2 === undefined || val2 === ''
    ) {
      return '--';
    }
    const num1 = Number(val1);
    const num2 = Number(val2);
    if (isNaN(num1) || isNaN(num2)) {
      return '--';
    }
    const result = num1 * num2;
    return result.toFixed(4);
}
const formatAddress = (address) => {
    if (!address) return '';
    return address.slice(0, 4) + '...' + address.slice(-6);
};
/**
 * 估算交易的 gas 费用（单位: ETH）
 * @param {Object} params
 * @param {string} params.fromAddress - 发起地址
 * @param {string} params.contractAddress - 合约地址
 * @param {any} abi - 合约 ABI
 * @param {string} methodName - 方法名
 * @param {Array} args - 方法参数数组
 * @returns {Promise<string>} - 返回估算费用（单位：ETH，string 类型）
 */
async function estimateGasFee({ fromAddress, contractAddress, abi, methodName, args }) {
  const contract = new web3.eth.Contract(abi, contractAddress);

  try {
    const gas = await contract.methods[methodName](args).estimateGas({ from: fromAddress });

    const gasPrice = await web3.eth.getGasPrice();
    const fee = BigInt(gas) * BigInt(gasPrice);
    
    return web3.utils.fromWei(fee.toString(), 'ether'); // 返回 ETH 单位的字符串
  } catch (err) {
    console.error('估算 gas 失败:', err);
    return '0';
  }
}
onMounted(async ()=>{
    getentrustList();
    getentrustMy();
    getentrustBuy();
})
</script>

<style lang="less" scoped>
.container{
height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
    .content{
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        .tab-box{
            display: flex;
            align-items: center;
            gap: 12px;
            .tab-text{
                width: calc(100% / 3);
                background: #E9E9E9;
                border-radius: 28px;
                height: 28px;
                line-height: 28px;
                box-sizing: border-box;
                text-align: center;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #8D8D8D;
            }
            .active-text{
                background: @theme-color1;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
        .information-box{
            display: flex;
            gap: 12px;
            margin: 18px 0 16px;
            .information-ul{
                width:calc(100% / 2);
                background-color: #fff;
                border-radius: 8px;
                padding: 12px 16px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                .information-title{
                    font-size: 15px;
                    color: #000000;
                }
                .rate{
                    background: #F1F1FF;
                    border-radius: 4px;
                    height: 28px;
                    line-height: 28px;
                    box-sizing: border-box;
                    padding-left:10px;
                    font-weight: 500;
                    font-size: 12px;
                    color: @theme-color1;
                    margin: 10px 0 2px;
                }
                .cny{
                    font-size: 10px;
                    color: #8D8D8D;
                    margin-bottom: 8px;
                }
                .balance{
                    font-size: 12px;
                    color: #000000;
                }
            }
        }
        .information-btn{
            height: 40px !important;
            line-height: 40px !important;
            background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
            border-radius:50px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            padding: 9px 0;
            box-sizing: border-box;
            color: #fff;
        }
        .card-box{
            background: #F1F1FF;
            border-radius: 12px;
            padding: 10px 0 6px;
            margin: 16px 0;
            height: 195px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .card-ul{
                margin-bottom: 18px;
                display: flex;
                align-items: center;
                .card-li{
                    width: calc(100% / 4);
                    text-align: center;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: @theme-color1;
                }
            }
            .list-ul{
                flex: 1;
                overflow: auto;
                .list-li{
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    .list-text{
                        width: calc(100% / 4);
                        text-align: center;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: @font-color2;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .list-btn{
                        background: @theme-color1;
                        border-radius: 4px;
                        height: 18px;
                        width: 44px;
                        color: #FFFFFF;
                        box-sizing: border-box;
                        line-height: 18px;
                    }
                }
            }
            .list-ul::-webkit-scrollbar{
                width: 0;
            }
        }
        .delegation{
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .delegation-label{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 8px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #000000;
            }
            .active-label{
                font-weight: 500;
                color: #FF0000;
            }
            .delegation-ul{
                flex: 1;
                overflow: auto;
                .delegation-li{
                    border-radius: 8px;
                    border: 1px solid #D8D8D8;
                    padding: 8px 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #8D8D8D;
                    box-sizing: border-box;
                    margin-bottom: 10px;
                    .m4{
                        margin-bottom: 4px;
                    }
                    .m8{
                        margin-bottom: 8px;
                    }
                    .text-ri{
                        text-align: right;
                    }
                    .cell-label{
                        width: 48px;
                        display: inline-block;
                    }
                    .cell-btn{
                        height: 19px;
                        box-sizing: border-box;
                        padding: 2px 10px;
                        border-radius: 4px;
                    }
                    .red{
                        color: #FF0000;
                    }
                    .green{
                        color: #00B42A;
                    }
                    .blue{
                        color: @theme-color1;
                    }
                    .box-entrust{
                        border: 1px solid #aaa;
                        color: #aaa;
                    }
                    .box-cancel{
                        border: 1px solid red;
                        color: red;
                    }
                }
                .delegation-li:last-child{
                    margin-bottom: 0;
                }
            }
            .delegation-ul::-webkit-scrollbar{
                width: 0;
            }
        }
    }
    .pop-content{
        .pop-title{
            padding: 16px;
            border-bottom: 1px solid #F2F2F2;
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            .title{
                flex: 1;
                display: flex;
                justify-content: center;
                position: relative;
                left: -15px;
            }
        }
        .subtitle{
            text-align: center;
            margin: 16px 16px 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #000000;
        }
        .address{
            margin: 0 16px 24px;
            background: #F2F2F2;
            border-radius: 8px;
            border: 1px solid #D8D8D8;
            padding: 14px 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: @font-color2;
            .address-text{
                margin-top: 8px;
                font-size: 12px;
                color: #8D8D8D;
            }
        }
        .pop-btn{
            display: flex;
            justify-content: center;
            margin-bottom: 32px;
            .btn{
                width: 96px;
                height: 32px;
                line-height: 32px;
                padding: 6px 0 !important;
                border-radius: 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                box-sizing:border-box;
            }
            .cancel{
                margin-right: 17px !important;
                border: 1px solid #D8D8D8;
                color: #000 !important;
            }
            .confirm{
                background: @theme-color1;
                color: #FFF;
                font-weight: 500;
            }
        }
        .pop-detail{
            padding: 17px 17px 0;
            .pop-detail-cell{
                display: flex;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #4F4F4F;
                padding: 10px 0;
                border-bottom: 1px solid #F2F2F2;
                .cell-label{
                    width: 76px;
                    flex-shrink: 0;
                }
                .cell-text{
                    word-break: break-word;
                }
            }
            .pop-detail-cell:last-child{
                border-bottom: 0;
            }
            .pop-btn-detail{
                margin-top: 53px;
                margin-bottom: 33px;
                .btn-detail{
                    height: 40px;
                    line-height: 40px;
                    border-radius: 50px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #FFFFFF;
                }
            }
        }
    }
}
:deep(.van-cell){
    padding: 0 0 0 10px !important;
}
:deep(.van-button--primary){
    border: none !important;
}
.pop-content-password{
    padding: 27px 35px 25px 34px;
    .pop-title-password{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        text-align: center;
    }
    .pop-btn-password{
        margin-top: 50px;
        display: flex;
        justify-content: center;
        .btn-password{
            width: 83px;
            height: 29px;
            line-height: 29px;
            padding: 5px 0 !important;
            border-radius: 6px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            box-sizing:border-box;
        }
        .cancel{
            margin-right: 17px !important;
            border: 1px solid #D8D8D8;
            color: #000 !important;
        }
        .confirm{
            background: @theme-color1;
            color: #FFF;
            font-weight: 500;
        }
    }
}
:deep(.van-popup--center) {
    margin: 0 40px !important;
    width: auto !important;
}
:deep(.van-pull-refresh){
    display: flex !important;
    flex-direction: column !important;
    overflow: initial !important;
}
:deep(.van-pull-refresh__track){
    display: flex !important;
    flex-direction: column !important;
}
</style>