gold-vue/src/views/moneyManage/refundDetail/refundCharge.vue

<!-- 各地负责人 -->
<template>
    <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
        <div class="condition">
            <div class="item1">
                <el-text size="large" style="width:4vw;">精网号</el-text>
                <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">客户姓名</el-text>
                <el-input v-model="searchForm.name" placeholder="请输入客户姓名" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">所属地区</el-text>
                <el-input v-model="searchForm.markets" placeholder="请输入所属地区" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">产品名称</el-text>
                <el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;" />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">订单状态</el-text>
                <el-select v-model="searchForm.statuses" style="width:9vw;">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="condition">
            <div class="item2">
                <el-text size="large" style="width:4vw;">付款币种</el-text>
                <el-select v-model="searchForm.paymentCurrency" style="width:9vw;">
                    <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="item2">
                <el-text size="large" style="width:4vw;">支付方式</el-text>
                <el-select v-model="searchForm.payType" style="width:9vw;">
                    <el-option v-for="item in channelOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="item2" style="width: 28.5vw;">
                <el-text size="large" style="width:4vw;">付款时间</el-text>
                <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间"
                    end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange"
                    :disabled-date="disabledDate" />
            </div>
            <div>
                <el-button type="primary" @click="getRefund">查询</el-button>
                <!-- <el-button type="warning">导出excel</el-button>
                <el-button type="primary">查看导出列表</el-button> -->
                <el-button type="success" @click="reset">重置</el-button>
            </div>
        </div>
    </el-card>

    <el-card style="margin-top: 0.5vh;background-color: rgb(231,244,253);">
        <el-table :data="tableData" style="height:64vh;width:82vw">
            <el-table-column type="index" label="序号" width="60" fixed="left" />
            <el-table-column prop="name" label="Homily ID" width="120" fixed="left" />
            <el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip />
            <el-table-column prop="market" label="所属地区" width="120" />
            <el-table-column prop="goodsName" label="产品名称" width="120" />
            <el-table-column prop="goodNum" label="产品数量" width="120" />
            <el-table-column prop="refundType" label="退款方式" width="120">
                <template #default="scope">
                    {{ scope.row.refundType === 1 ? '部分退款' : '全部退款' }}
                </template>
            </el-table-column>
            <el-table-column prop="areaServise" label="提交人" width="120" />
            <el-table-column prop="refundReason" label="退款理由" width="120" />
            <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
            <el-table-column prop="status" label="订单状态" width="120">
                <template #default="scope">
                    {{
                        [20, 30, 40].includes(scope.row.status) ? '审核中' :
                            [22, 32].includes(scope.row.status) ? '审核驳回' :
                                scope.row.status === 41 ? '退款完成' : scope.row.status
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" fixed="right" width="100px">
                <template #default="scope">
                    <div class="operation">
                        <el-button v-if="scope.row.status === 20" type="primary" text @click="showAudit(scope.row)">
                            审核
                        </el-button>
                        <el-button v-else type="primary" text @click="showStep(scope.row)">
                            查看进度
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
            style="margin-top: 1vh;"></el-pagination>
    </el-card>

    <el-dialog v-model="showAudit2" title="审核" class="audit2" width="35vw" overflow draggable>
        <div class="top">
            <el-button @click="" class="smallTitle" size="small">退款申请信息</el-button>
            <div class="top-item">
                <el-text style="width:4vw;" size="small">退款类型</el-text>
                <el-input v-model="auditRow.refundModel" placeholder="请输入退款类型" size="small" style="width:10vw;"
                    clearable></el-input>
            </div>
            <div class="top-item">
                <el-text style="width:4vw;" size="small">退款金额</el-text>
                <el-input v-model="auditRow.paymentAmount" placeholder="请输入退款金额" size="small" style="width:10vw;"
                    clearable></el-input>
            </div>
            <div class="top-item">
                <el-text style="width:4vw;" size="small">退款备注</el-text>
                <el-input v-model="auditRow.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;"
                    :rows="3" maxlength="100" show-word-limit type="textarea" />
            </div>
        </div>
        <el-button @click="" class="smallTitle" size="small">原订单信息</el-button>
        <div class="center">
            <div class="center-left">
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">精网号</el-text>
                    <el-input v-model="auditRow.jwcode" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">所属地区</el-text>
                    <el-input v-model="auditRow.marketName" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">产品名称</el-text>
                    <el-input v-model="auditRow.goodsName" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">付款金额</el-text>
                    <el-input v-model="auditRow.paymentAmount" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">到账金额</el-text>
                    <el-input v-model="auditRow.receivedAmount" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;" size="small">支付方式</el-text>
                    <el-input v-model="auditRow.payType" size="small" style="width:10vw;" disabled />
                </div>
                <div class="center-item">
                    <el-text style="width:4vw;">转账凭证</el-text>
                    <img v-if="auditRow.voucher" :src="auditRow.voucher"
                        style="width: 80px; height: 80px; object-fit: cover;">
                    <div v-else>
                        无转账凭证
                    </div>
                </div>
            </div>
            <div class="center-right">
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">客户姓名</el-text>
                    <el-input v-model="auditRow.name" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">活动名称</el-text>
                    <el-input v-model="auditRow.activity" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">付款币种</el-text>
                    <el-input v-model="auditRow.paymentCurrency" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">到账币种</el-text>
                    <el-input v-model="auditRow.receivedCurrency" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">手续费</el-text>
                    <el-input v-model="auditRow.handlingCharge" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">付款时间</el-text>
                    <el-input v-model="auditRow.payTime" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">提交人</el-text>
                    <el-input v-model="auditRow.submitterName" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">到账时间</el-text>
                    <el-input v-model="auditRow.receiveTime" size="small" style="width:10vw;" disabled />
                </div>
                <div class="right-item">
                    <el-text style="width:4vw;" size="small">备注</el-text>
                    <el-input v-model="auditRow.remark" size="small" style="width:10vw;" :row="3" maxlength="100"
                        type="textarea" show-word-limit disabled />
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-button class="smallTitle" size="small" v-show="showReject">驳回信息</el-button>
            <div class="bottom-item" v-show="showReject">
                <el-text style="width:4vw;" size="small">驳回备注</el-text>
                <el-input v-model="addForm.remark" placeholder="请输入驳回备注" size="small" style="width:10vw;" :row="3"
                    maxlength="100" type="textarea" show-word-limit clearable />
            </div>
            <div style="text-align: center;" v-show="!showReject">
                <el-button type="default" @click="showReject = true">驳回</el-button>
                <el-button type="primary" @click="handlePass">通过</el-button>
            </div>
            <div style="text-align: center;" v-show="showReject">
                <el-button type="default" @click="hideReject">取消</el-button>
                <el-button type="primary" @click="handleReject">确定</el-button>
            </div>
        </div>
    </el-dialog>

    <el-dialog v-model="showSteps" title="唉！！！" overflow draggable width="1206px" height="506px" :style="{
        backgroundImage: 'url(/src/assets/images/背景图.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    }">
        <div class="steps">
            <div class="steps-content">
                <el-steps :active="currentStep" align-center>

                    <el-step title="提交人">
                        <template #title>
                            <div>提交人<br>{{ submitterName }}</div>
                        </template>
                        <template #icon>
                            <img v-if="currentStep === 1" src="@/assets/images/待审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep > 1" src="@/assets/images/已审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                        </template>
                    </el-step>

                    <el-step>
                        <template #title>
                            <div>地区财务<br>{{ areaFinance }}</div>
                        </template>
                        <template #icon>
                            <img v-if="currentStep < 2" src="@/assets/images/还没传到.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep === 2" src="@/assets/images/待审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep > 2" src="@/assets/images/已审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                        </template>
                    </el-step>

                    <el-step>
                        <template #title>
                            <div>地区负责人<br>{{ areaCharge }}</div>
                        </template>
                        <template #icon>
                            <img v-if="currentStep < 3" src="@/assets/images/还没传到.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep === 3" src="@/assets/images/待审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep > 3" src="@/assets/images/已审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                        </template>
                    </el-step>

                    <el-step>
                        <template #title>
                            <div>总部财务<br>{{ headFinance }}</div>
                        </template>
                        <template #icon>
                            <img v-if="currentStep < 4" src="@/assets/images/还没传到.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep === 4" src="@/assets/images/待审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep > 4" src="@/assets/images/已审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                        </template>
                    </el-step>

                    <el-step>
                        <template #title>
                            <div>指定执行人<br>{{ executor }}</div>
                        </template>
                        <template #icon>
                            <img v-if="currentStep < 5" src="@/assets/images/还没传到.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                            <img v-if="currentStep === 5" src="@/assets/images/待审核.png" alt="步骤图标"
                                style="width: 30px; height: 30px;">
                        </template>
                    </el-step>
                </el-steps>
            </div>
            <div class="steps-btn">
                <el-button type="primary" @click="showSteps = false">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload'
import { useAdminStore } from "@/store/index.js"
import { storeToRefs } from "pinia"
import dayjs from 'dayjs'
const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
import { permissionMapping, findMenuById, hasMenuPermission } from "@/utils/menuTreePermission.js"

const currentStep = ref(0)// 进度图
const searchForm = ref({
    jwcode: '',
    markets: []
})
const addForm = ref({
    remark: ''
})
const showReject = ref(false)
const auditRow = ref({})// 审核回显
const dateRange = ref([])
const pagination = ref({
    pageNum: 1,
    pageSize: 50,
    total: 0
})
const showAudit2 = ref(false)
const tableData = ref([])
const showSteps = ref(false)
const submitterName = ref('')// 提交人
const areaFinance = ref('')// 地区财务
const areaCharge = ref('')// 地区负责人
const headFinance = ref('')// 总部财务
const executor = ref('')// 指定执行人
const uploadRef = ref(null)
const currencies = ref([
    {
        value: '新币',
        label: '新币'
    },
    {
        value: '港币',
        label: '港币'
    },
    {
        value: '马币',
        label: '马币'
    },
    {
        value: '加币',
        label: '加币'
    },
    {
        value: '泰铢',
        label: '泰铢'
    },
    {
        value: '越南盾',
        label: '越南盾'
    }
])
const channelOptions = ref([{
    value: '银行转账',
    label: '银行转账'
},
{
    value: '现金',
    label: '现金'
},
{
    value: '支票',
    label: '支票'
},
{
    value: '刷卡',
    label: '刷卡'
},
{
    value: 'Grabpay',
    label: 'Grabpay'
},
{
    value: 'Nets',
    label: 'Nets'
},
{
    value: 'PayPal',
    label: 'PayPal'
},
{
    value: 'Stripe-链接收款',
    label: 'Stripe-链接收款'
},
{
    value: 'Ipay88-链接收款',
    label: 'Ipay88-链接收款'
},
{
    value: 'PaymentAsia-链接收款',
    label: 'PaymentAsia-链接收款'
},
{
    value: 'Stripe-Link平台',
    label: 'Stripe-Link平台'
},
{
    value: 'PaymentAsia-Link平台',
    label: 'PaymentAsia-Link平台'
},
{
    value: 'FirstData-Link平台-Link平台',
    label: 'FirstData-Link平台-Link平台'
},
{
    value: 'IOS-Link平台',
    label: 'IOS-Link平台'
},
{
    value: 'Ipay88-Link平台',
    label: 'Ipay88-Link平台'
}
])
const statusList = ref([
    {
        value: 20,
        label: '待审核',
    },
    {
        value: '审核通过',
        label: '审核通过'
    },
    {
        value: '审核驳回',
        label: '审核驳回'
    },
    {
        value: 41,
        label: '退款完成'
    }
])
// 查全部
const getRefund = async function () {
    if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeShow)) {
        ElMessage.error('无此权限')
        return
    }
    try {
        searchForm.value.statuses = [20, 22, 30, 32, 40, 41] // 看不到进度没到这里的
        if (searchForm.value.statuses === '审核通过') {
            statuses = [30, 40]
        } else if (searchForm.value.statuses === '审核驳回') {
            statuses = [22, 32]
        }
        const params = {
            pageNum: pagination.value.pageNum,
            pageSize: pagination.value.pageSize,
            cashRecordDone: {
                jwcode: searchForm.value.jwcode,//精网号
                name: searchForm.value.name,//姓名
                markets: searchForm.value.markets,//地区
                goodsName: searchForm.value.goodsName,//商品名
                statuses: searchForm.value.statuses,//10：地区财务待审核；12：地区财务驳回；
                // 20：地区负责人待审核；22：地区负责人驳回；
                // 30：总部财务待审核；32：总部财务驳回；
                // 40：执行人待处理；41：执行人已处理，退款完成；
                paymentCurrency: searchForm.value.paymentCurrency,//付款币种
                payType: searchForm.value.payType,//支付方式
                startTime: dateRange.value && dateRange.value[0] ? moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : "",
                endtime: dateRange.value && dateRange.value[1] ? moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : "",
                adminId: adminData.value.id
            }
        }

        const result = await API({
            url: '/Money/select',
            method: 'POST',
            data: params
        })

        tableData.value = result.data.list || []
    } catch (error) {
        ElMessage.error(error.message || '查询失败')
    }
}
// 审核通过
const handlePass = async function () {
    if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeAudit)) {
        ElMessage.error('无此权限')
        return
    }
    try {
        const params = {
            id: auditRow.value.id,
            status: 30,
            rejectReason: addForm.value.remark,
            areaCharge: adminData.value.adminName,
            auditId: auditRow.value.auditId
        }
        const result = await API({
            url: '/Money/review',
            data: params
        })
        if (result.code === 200) {
            ElMessage.success('审核通过')
            showAudit2.value = false
            getRefund()
        }
    } catch (error) {
        ElMessage.error(error.message || '审核失败')
    }
}
// 审核驳回
const handleReject = async function () {
    if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeAudit)) {
        ElMessage.error('无此权限')
        return
    }
    try {
        const params = {
            id: auditRow.value.id,
            status: 22,
            rejectReason: addForm.value.remark,
            areaCharge: adminData.value.adminName,
            auditId: auditRow.value.auditId
        }
        const result = await API({
            url: '/Money/review',
            data: params
        })
        if (result.code === 200) {
            ElMessage.success('审核驳回')
            showAudit.value = false
            getRefund()
        }
    } catch (error) {
        ElMessage.error(error.message || '审核失败')
    }
}
const showStep = function (row) {
    if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeProgShow)) {
        ElMessage.error('无此权限');
        return;
    }
    console.log("row", row)
    currentStep.value = 1;
    if (row.status === 41) {
        executor.value = row.executorName
        currentStep.value = 6;
    } else {
        if (row.areaServise !== null && row.areaServise !== '') {
            submitterName.value = row.areaServise
            console.log(submitterName.value)
            currentStep.value = 2;
        }
        if (row.areaFinance !== null && row.areaFinance !== '') {
            areaFinance.value = row.areaFinance
            console.log(areaFinance.value)
            currentStep.value = 3;
        }
        if (row.areaCharge !== null && row.areaCharge !== '') {
            areaCharge.value = row.areaCharge
            console.log(areaCharge.value)
            currentStep.value = 4;
        }
        if (row.headFinance !== null && row.headFinance !== '') {
            headFinance.value = row.headFinance
            console.log(headFinance.value)
            currentStep.value = 5;
        }
    }
    console.log("当前步骤：", currentStep.value);
    showSteps.value = true;
}
const productList = [
    {
        "value": "金币产品",
        "label": "金币产品",
        "children": [
            {
                "value": "金币充值",
                "label": "金币充值",
            }
        ]
    },
    {
        "value": "软件产品",
        "label": "软件产品",
        "children": [
            {
                "value": "美股",
                "label": "美股",
                "children": [
                    {
                        "value": "美股软件",
                        "label": "美股软件"
                    }
                ]
            },
            {
                "value": "港股",
                "label": "港股",
                "children": [
                    {
                        "value": "港股软件",
                        "label": "港股软件"
                    }
                ]
            },
            {
                "value": "A股",
                "label": "A股",
                "children": [
                    {
                        "value": "A股软件",
                        "label": "A股软件"
                    }
                ]
            },
            {
                "value": "新加坡股",
                "label": "新加坡股",
                "children": [
                    {
                        "value": "新加坡股软件",
                        "label": "新加坡股软件"
                    }
                ]
            },
            {
                "value": "马股",
                "label": "马股",
                "children": [
                    {
                        "value": "马股软件",
                        "label": "马股软件"
                    }
                ]
            },
            {
                "value": "日本股",
                "label": "日本股",
                "children": [
                    {
                        "value": "日本股软件",
                        "label": "日本股软件"
                    }
                ]
            },
            {
                "value": "泰股",
                "label": "泰股",
                "children": [
                    {
                        "value": "泰股软件",
                        "label": "泰股软件"
                    }
                ]
            },
            {
                "value": "越南股",
                "label": "越南股",
                "children": [
                    {
                        "value": "越南股软件",
                        "label": "越南股软件"
                    }
                ]
            },
            {
                "value": "印尼股",
                "label": "印尼股",
                "children": [
                    {
                        "value": "印尼股软件",
                        "label": "印尼股软件"
                    }
                ]
            },
            {
                "value": "韩国股",
                "label": "韩国股",
                "children": [
                    {
                        "value": "韩国股软件",
                        "label": "韩国股软件"
                    }
                ]
            },
            {
                "value": "台湾股",
                "label": "台湾股",
                "children": [
                    {
                        "value": "台湾股软件",
                        "label": "台湾股软件"
                    }
                ]
            }
        ]
    },

]
const hideReject = function () {
    showReject.value = false
    addForm.value.remark = ''
}
const reset = function () {
    searchForm.value = {
        jwcode: ''
    }
    dateRange.value = []
    getRefund()
}
const showAudit = function (row) {
    auditRow.value = row
    showAudit2.value = true
}
onMounted(() => {
    console.log('???????????????????', adminData.value)
    getRefund()
})
</script>
<style scoped lang="scss">
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
:deep(.el-table__body td) {
    background-color: #F3FAFE !important;
}

:deep(.el-table__header th) {
    background-color: #F3FAFE !important;
}

.condition {
    width: 82vw;
    display: flex;
    align-items: center;
    height: 4vh;

    .item1 {
        width: 18%;
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
        margin-right: 0.5vw;
    }

    .item2 {
        width: 18%;
        display: flex;
        align-items: center;
        margin-right: 0.5vw;
    }
}

.audit1 {
    height: 47vh;

    .audit-item {
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
    }
}

.audit2 {
    display: flex;
    justify-content: center;


    .top {
        width: 30vw;
        height: 17vh;

        .top-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }
    }

    .smallTitle {
        background-color: white;
        color: rgb(64, 158, 255);
        border-color: rgb(64, 158, 255);
        margin-bottom: 0.5vh;
    }

    .center {
        display: flex;
        width: 30vw;
        height: 35vh;

        .dialog-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }

        .center-left {
            width: 60%;
            height: 35vh;

            .image {
                width: 4vw !important;
                height: 4vw !important;
            }

            :deep(.el-upload--picture-card) {
                width: 4vw !important;
                height: 4vw !important;
                padding: 0 !important;
            }

            .center-item {
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
            }
        }

        .center-right {
            height: 35vh;

            .right-item {
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
            }
        }
    }

    .bottom {
        width: 30vw;
        height: 5vh;

        .bottom-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }
    }
}

.steps {
    .steps-content {
        padding-top: 15vw;
    }

    .steps-status {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .steps-btn {
        height: 15vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>