|
|
|
@ -15,7 +15,7 @@ |
|
|
|
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;" |
|
|
|
placeholder="请选择产品名称" clearable /> |
|
|
|
</div> |
|
|
|
<div class="item1"> |
|
|
|
<div class="item1" v-if="adminData.markets === '总部'"> |
|
|
|
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|
|
|
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" placeholder="请选择所属地区" |
|
|
|
clearable @change="handleMarketChange" /> |
|
|
|
@ -23,7 +23,7 @@ |
|
|
|
<div class="item1"> |
|
|
|
<el-text size="large" style="width:4vw;">订单状态</el-text> |
|
|
|
<el-select v-model="searchForm.statuses" style="width:9vw;" placeholder="请选择订单状态" clearable> |
|
|
|
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" /> |
|
|
|
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -80,9 +80,9 @@ |
|
|
|
<template #default="scope"> |
|
|
|
{{ |
|
|
|
[30].includes(scope.row.status) ? '待审核' : |
|
|
|
[40].includes(scope.row.status) ? '审核通过' : |
|
|
|
scope.row.status === 32 ? '已驳回' : |
|
|
|
scope.row.status === 41 ? '退款成功' : scope.row.status |
|
|
|
[40].includes(scope.row.status) ? '审核通过' : |
|
|
|
scope.row.status === 32 ? '已驳回' : |
|
|
|
scope.row.status === 41 ? '退款成功' : scope.row.status |
|
|
|
}} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
@ -116,9 +116,17 @@ |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="top-item"> |
|
|
|
<el-text style="width:4vw;" size="small">永久金币</el-text> |
|
|
|
<el-input v-model="auditRow.permanentGold" size="small" style="width:10vw;" disabled /> 个 |
|
|
|
</div> |
|
|
|
<div class="top-item"> |
|
|
|
<el-text style="width:4vw;" size="small">免费金币</el-text> |
|
|
|
<el-input v-model="auditRow.freeGold" size="small" style="width:10vw;" disabled /> 个 |
|
|
|
</div> |
|
|
|
<div class="top-item"> |
|
|
|
<el-text style="width:4vw;" size="small">退款理由</el-text> |
|
|
|
<el-input v-model="auditRow.refundReason" size="small" style="width:10vw;" |
|
|
|
:rows="3" maxlength="100" show-word-limit type="textarea" disabled /> |
|
|
|
<el-input v-model="auditRow.refundReason" size="small" style="width:10vw;" :rows="3" maxlength="100" |
|
|
|
show-word-limit type="textarea" disabled /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-button @click="" class="smallTitle" size="small">原订单信息</el-button> |
|
|
|
@ -128,7 +136,7 @@ |
|
|
|
<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.goodsName" size="small" style="width:10vw;" disabled /> |
|
|
|
@ -138,20 +146,20 @@ |
|
|
|
<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.paymentAmount" size="small" style="width:10vw;" disabled /> |
|
|
|
<el-text style="width:4vw;" size="small">付款币种</el-text> |
|
|
|
<el-input v-model="auditRow.paymentCurrency" 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 /> |
|
|
|
<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.payType" size="small" style="width:10vw;" disabled /> |
|
|
|
<el-text style="width:4vw;" size="small">付款时间</el-text> |
|
|
|
<el-input v-model="auditRow.payTime" 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" |
|
|
|
<img v-if="auditRow.payVoucher" :src="auditRow.payVoucher" |
|
|
|
style="width: 80px; height: 80px; object-fit: cover;"> |
|
|
|
<div v-else> |
|
|
|
无转账凭证 |
|
|
|
@ -168,28 +176,28 @@ |
|
|
|
<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 /> |
|
|
|
<el-text style="width:4vw;" size="small">支付方式</el-text> |
|
|
|
<el-input v-model="auditRow.payType" 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 /> |
|
|
|
<el-text style="width:4vw;" size="small">到账金额</el-text> |
|
|
|
<el-input v-model="auditRow.receivedAmount" 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 /> |
|
|
|
<el-text style="width:4vw;" size="small">到账时间</el-text> |
|
|
|
<el-input v-model="auditRow.receivedTime" 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.submitter" size="small" style="width:10vw;" disabled /> |
|
|
|
<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.receivedTime" size="small" style="width:10vw;" disabled /> |
|
|
|
<el-text style="width:4vw;" size="small">提交人</el-text> |
|
|
|
<el-input v-model="auditRow.submitter" size="small" style="width:10vw;" disabled /> |
|
|
|
</div> |
|
|
|
<div class="right-item"> |
|
|
|
<el-text style="width:4vw;" size="small">备注</el-text> |
|
|
|
@ -267,7 +275,8 @@ |
|
|
|
<template #icon> |
|
|
|
<img v-if="currentStep === 4" src="@/assets/images/refund-rejected.png" alt="已驳回"> |
|
|
|
<img v-else-if="currentStep === 3" src="@/assets/images/refund-approving.png" alt="待审核"> |
|
|
|
<img v-else-if="currentStep > 3 && currentStep != 4" src="@/assets/images/refund-approved.png" alt="已审核"> |
|
|
|
<img v-else-if="currentStep > 3 && currentStep != 4" |
|
|
|
src="@/assets/images/refund-approved.png" alt="已审核"> |
|
|
|
<img v-else-if="currentStep < 3" src="@/assets/images/refund-waiting.png" alt="未开始"> |
|
|
|
</template> |
|
|
|
</el-step> |
|
|
|
@ -281,7 +290,8 @@ |
|
|
|
<template #icon> |
|
|
|
<img v-if="currentStep === 6" src="@/assets/images/refund-rejected.png" alt="已驳回"> |
|
|
|
<img v-else-if="currentStep === 5" src="@/assets/images/refund-approving.png" alt="待审核"> |
|
|
|
<img v-else-if="currentStep > 5 && currentStep != 6" src="@/assets/images/refund-approved.png" alt="已审核"> |
|
|
|
<img v-else-if="currentStep > 5 && currentStep != 6" |
|
|
|
src="@/assets/images/refund-approved.png" alt="已审核"> |
|
|
|
<img v-else-if="currentStep < 5" src="@/assets/images/refund-waiting.png" alt="未开始"> |
|
|
|
</template> |
|
|
|
</el-step> |
|
|
|
@ -307,35 +317,35 @@ |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="exportListVisible" title="导出列表" width="80%"> |
|
|
|
<el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading"> |
|
|
|
<el-table-column prop="fileName" label="文件名" /> |
|
|
|
<el-table-column prop="state" label="状态"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'"> |
|
|
|
{{ getTagText(scope.row.state) }} |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="createTime" label="创建时间"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="primary" size="small" @click="downloadExportFile(scope.row)" |
|
|
|
:disabled="scope.row.state !== 2"> |
|
|
|
下载 |
|
|
|
</el-button> |
|
|
|
<el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading"> |
|
|
|
<el-table-column prop="fileName" label="文件名" /> |
|
|
|
<el-table-column prop="state" label="状态"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'"> |
|
|
|
{{ getTagText(scope.row.state) }} |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="createTime" label="创建时间"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="primary" size="small" @click="downloadExportFile(scope.row)" |
|
|
|
:disabled="scope.row.state !== 2"> |
|
|
|
下载 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button text @click="exportListVisible = false">关闭</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button text @click="exportListVisible = false">关闭</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
import BackgroundSvg from '@/assets/images/refund-progress.png' |
|
|
|
@ -352,6 +362,18 @@ import { permissionMapping, findMenuById, hasMenuPermission } from "@/utils/menu |
|
|
|
import moment from 'moment' |
|
|
|
import { productList } from '@/views/moneyManage/receiveDetail/utils/staticData.js' |
|
|
|
|
|
|
|
const startsWith1 = (mainStr, prefix) => { |
|
|
|
// 处理前缀为空字符串的情况(空字符串是所有字符串的前缀) |
|
|
|
if (prefix === '') { |
|
|
|
return true; |
|
|
|
} |
|
|
|
// 处理主字符串长度小于前缀长度的情况 |
|
|
|
if (mainStr.length < prefix.length) { |
|
|
|
return false; |
|
|
|
} |
|
|
|
// 比较主字符串开头与前缀相同长度的部分 |
|
|
|
return mainStr.substring(0, prefix.length) === prefix; |
|
|
|
} |
|
|
|
const currentStep = ref(0)// 进度图 |
|
|
|
const searchForm = ref({ |
|
|
|
jwcode: '', |
|
|
|
@ -521,6 +543,10 @@ const getRefund = async function () { |
|
|
|
statusParam.value = [30, 32, 40, 41] |
|
|
|
} |
|
|
|
|
|
|
|
if (searchForm.value.goodsName) { |
|
|
|
searchForm.value.goodsName = searchForm.value.goodsName[searchForm.value.goodsName.length - 1] |
|
|
|
} |
|
|
|
|
|
|
|
const params = { |
|
|
|
pageNum: pagination.value.pageNum, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
@ -528,7 +554,7 @@ const getRefund = async function () { |
|
|
|
jwcode: searchForm.value.jwcode, |
|
|
|
name: searchForm.value.name, |
|
|
|
markets: searchForm.value.markets, |
|
|
|
goodsNames: searchForm.value.goodsName, |
|
|
|
goodsName: searchForm.value.goodsName, |
|
|
|
statuses: statusParam.value, |
|
|
|
paymentCurrency: searchForm.value.paymentCurrency, |
|
|
|
payType: searchForm.value.payType, |
|
|
|
@ -648,103 +674,107 @@ const hideReject = function () { |
|
|
|
} |
|
|
|
const exportExcel = async function () { |
|
|
|
const statusParam = ref([30, 32, 40, 41])// 默认:看不到进度没到这里的 |
|
|
|
if (searchForm.value.statuses === '待审核') { |
|
|
|
statusParam.value = [30] |
|
|
|
} else if (searchForm.value.statuses === '审核通过') { |
|
|
|
statusParam.value = [40] |
|
|
|
} else if (searchForm.value.statuses === '已驳回') { |
|
|
|
statusParam.value = [32] |
|
|
|
} else if (searchForm.value.statuses === '退款成功') { |
|
|
|
statusParam.value = [41] |
|
|
|
} else { |
|
|
|
statusParam.value = [30, 32, 40, 41] |
|
|
|
} |
|
|
|
if (searchForm.value.statuses === '待审核') { |
|
|
|
statusParam.value = [30] |
|
|
|
} else if (searchForm.value.statuses === '审核通过') { |
|
|
|
statusParam.value = [40] |
|
|
|
} else if (searchForm.value.statuses === '已驳回') { |
|
|
|
statusParam.value = [32] |
|
|
|
} else if (searchForm.value.statuses === '退款成功') { |
|
|
|
statusParam.value = [41] |
|
|
|
} else { |
|
|
|
statusParam.value = [30, 32, 40, 41] |
|
|
|
} |
|
|
|
|
|
|
|
const params = { |
|
|
|
pageNum: pagination.value.pageNum, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
cashRecordDTO: { |
|
|
|
jwcode: searchForm.value.jwcode, |
|
|
|
name: searchForm.value.name, |
|
|
|
markets: searchForm.value.markets, |
|
|
|
goodsNames: searchForm.value.goodsName, |
|
|
|
statuses: statusParam.value, |
|
|
|
paymentCurrency: searchForm.value.paymentCurrency, |
|
|
|
payType: searchForm.value.payType, |
|
|
|
startTime: dateRange.value && dateRange.value[0] ? dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : "", |
|
|
|
endTime: dateRange.value && dateRange.value[1] ? dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : "", |
|
|
|
adminId: adminData.value.id |
|
|
|
} |
|
|
|
if (searchForm.value.goodsName) { |
|
|
|
searchForm.value.goodsName = searchForm.value.goodsName[searchForm.value.goodsName.length - 1] |
|
|
|
} |
|
|
|
|
|
|
|
const params = { |
|
|
|
pageNum: pagination.value.pageNum, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
cashRecordDTO: { |
|
|
|
jwcode: searchForm.value.jwcode, |
|
|
|
name: searchForm.value.name, |
|
|
|
markets: searchForm.value.markets, |
|
|
|
goodsName: searchForm.value.goodsName, |
|
|
|
statuses: statusParam.value, |
|
|
|
paymentCurrency: searchForm.value.paymentCurrency, |
|
|
|
payType: searchForm.value.payType, |
|
|
|
startTime: dateRange.value && dateRange.value[0] ? dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : "", |
|
|
|
endTime: dateRange.value && dateRange.value[1] ? dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : "", |
|
|
|
adminId: adminData.value.id |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const res = await API({ url: '/export/exportFinance', data: params }) |
|
|
|
if (res.code === 200) { |
|
|
|
ElMessage.success('导出成功') |
|
|
|
}else{ |
|
|
|
ElMessage.error(res.msg || '导出失败') |
|
|
|
} |
|
|
|
const res = await API({ url: '/export/exportFinance', data: params }) |
|
|
|
if (res.code === 200) { |
|
|
|
ElMessage.success('导出成功') |
|
|
|
} else { |
|
|
|
ElMessage.error(res.msg || '导出失败') |
|
|
|
} |
|
|
|
} |
|
|
|
const openExportList = () => { |
|
|
|
getExportList() |
|
|
|
exportListVisible.value = true |
|
|
|
getExportList() |
|
|
|
exportListVisible.value = true |
|
|
|
} |
|
|
|
const getExportList = async () => { |
|
|
|
exportListLoading.value = true |
|
|
|
try { |
|
|
|
const result = await API({ url: '/export/export' }) |
|
|
|
if (result.code === 200) { |
|
|
|
const filteredData = result.data.filter(item => { |
|
|
|
return item.type === 12 |
|
|
|
}) |
|
|
|
exportList.value = filteredData |
|
|
|
} else { |
|
|
|
ElMessage.error(result.msg || '获取导出列表失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取导出列表出错:', error) |
|
|
|
ElMessage.error('获取导出列表失败,请稍后重试') |
|
|
|
} finally { |
|
|
|
exportListLoading.value = false |
|
|
|
} |
|
|
|
exportListLoading.value = true |
|
|
|
try { |
|
|
|
const result = await API({ url: '/export/export' }) |
|
|
|
if (result.code === 200) { |
|
|
|
const filteredData = result.data.filter(item => { |
|
|
|
return item.type === 12 |
|
|
|
}) |
|
|
|
exportList.value = filteredData |
|
|
|
} else { |
|
|
|
ElMessage.error(result.msg || '获取导出列表失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取导出列表出错:', error) |
|
|
|
ElMessage.error('获取导出列表失败,请稍后重试') |
|
|
|
} finally { |
|
|
|
exportListLoading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
const downloadExportFile = (item) => { |
|
|
|
if (item.state === 2) { |
|
|
|
const link = document.createElement('a') |
|
|
|
link.href = item.url |
|
|
|
link.download = item.fileName |
|
|
|
link.click() |
|
|
|
} else { |
|
|
|
ElMessage.warning('文件还在导出中,请稍后再试') |
|
|
|
} |
|
|
|
if (item.state === 2) { |
|
|
|
const link = document.createElement('a') |
|
|
|
link.href = item.url |
|
|
|
link.download = item.fileName |
|
|
|
link.click() |
|
|
|
} else { |
|
|
|
ElMessage.warning('文件还在导出中,请稍后再试') |
|
|
|
} |
|
|
|
} |
|
|
|
const getTagType = (state) => { |
|
|
|
switch (state) { |
|
|
|
case 0: |
|
|
|
return 'info'; |
|
|
|
case 1: |
|
|
|
return 'primary'; |
|
|
|
case 2: |
|
|
|
return 'success'; |
|
|
|
case 3: |
|
|
|
return 'danger'; |
|
|
|
default: |
|
|
|
return 'info'; |
|
|
|
} |
|
|
|
switch (state) { |
|
|
|
case 0: |
|
|
|
return 'info'; |
|
|
|
case 1: |
|
|
|
return 'primary'; |
|
|
|
case 2: |
|
|
|
return 'success'; |
|
|
|
case 3: |
|
|
|
return 'danger'; |
|
|
|
default: |
|
|
|
return 'info'; |
|
|
|
} |
|
|
|
} |
|
|
|
//根据状态返回对应的标签文案 |
|
|
|
const getTagText = (state) => { |
|
|
|
switch (state) { |
|
|
|
case 0: |
|
|
|
return '待执行'; |
|
|
|
case 1: |
|
|
|
return '执行中'; |
|
|
|
case 2: |
|
|
|
return '执行完成'; |
|
|
|
case 3: |
|
|
|
return '执行出错'; |
|
|
|
default: |
|
|
|
return '未知状态'; |
|
|
|
} |
|
|
|
switch (state) { |
|
|
|
case 0: |
|
|
|
return '待执行'; |
|
|
|
case 1: |
|
|
|
return '执行中'; |
|
|
|
case 2: |
|
|
|
return '执行完成'; |
|
|
|
case 3: |
|
|
|
return '执行出错'; |
|
|
|
default: |
|
|
|
return '未知状态'; |
|
|
|
} |
|
|
|
} |
|
|
|
const reset = function () { |
|
|
|
searchForm.value = { |
|
|
|
@ -798,6 +828,14 @@ const disabledDate = (time) => { |
|
|
|
const limitDate = new Date(2025, 0, 1); |
|
|
|
return time.getTime() < limitDate.getTime(); |
|
|
|
} |
|
|
|
const handlePageSizeChange = function (val) { |
|
|
|
pagination.value.pageSize = val |
|
|
|
getRefund() |
|
|
|
} |
|
|
|
const handleCurrentChange = function (val) { |
|
|
|
pagination.value.pageNum = val |
|
|
|
getRefund() |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
console.log('???????????????????', adminData.value) |
|
|
|
getRefund() |
|
|
|
@ -855,7 +893,7 @@ onMounted(() => { |
|
|
|
|
|
|
|
.top { |
|
|
|
width: 30vw; |
|
|
|
height: 17vh; |
|
|
|
height: 22vh; |
|
|
|
|
|
|
|
.top-item { |
|
|
|
display: flex; |
|
|
|
|