feat 详情信息对齐

This commit is contained in:
timerzz 2024-09-17 19:52:56 +08:00
parent 92600a0f64
commit 33afcfbe52
2 changed files with 18 additions and 14 deletions

View File

@ -11,24 +11,26 @@
</template> </template>
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-8">
<div class="flex space-x-4 "> <div class="flex space-x-4 ">
<div class="w-50">货号{{provider.pid || '-'}}</div> <div class="w-full">货号{{provider.pid || '-'}}</div>
<!-- <div class="w-50">SpuID: {{provider.spuID || '-'}} </div>--> <!-- <div class="w-50">SpuID: {{provider.spuID || '-'}} </div>-->
<div class="w-50">SkuID: {{provider.skuID || '-'}}</div> <div class="w-full">SkuID: {{provider.skuID || '-'}}</div>
<div>可以购买{{provider.available ? '是':'否'}}</div> <div class="w-full">可以购买{{provider.available ? '是':'否'}}</div>
</div> </div>
<div class="flex space-x-4 items-center"> <div class="flex space-x-4 items-center">
<div class="w-50">当前售价$ {{provider.cost.originalPrice || '-'}}</div> <div class="w-full">当前售价$ {{provider.cost.originalPrice || '-'}}</div>
<a-popover v-if="provider.cost.calMark" trigger="hover"> <a-popover v-if="provider.cost.calMark" trigger="hover">
<template #content> <template #content>
<span class="whitespace-pre"> <span class="whitespace-pre">
{{provider.cost.calMark}} {{provider.cost.calMark}}
</span> </span>
</template> </template>
<div class="w-50">当前到手价 {{provider.cost.finalPrice || '-'}}</div> <div class="w-full">当前到手价 {{provider.cost.finalPrice || '-'}}</div>
</a-popover> </a-popover>
<div class="w-50" v-else>当前到手价 {{provider.cost.finalPrice || '-'}}</div> <div class="w-full" v-else>当前到手价 {{provider.cost.finalPrice || '-'}}</div>
<div class="w-full">
<a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">立即拉取</a-button> <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">立即拉取</a-button>
</div> </div>
</div>
<v-chart class="h-400px w-full" :option="options" /> <v-chart class="h-400px w-full" :option="options" />
</div> </div>
</a-collapse-panel> </a-collapse-panel>

View File

@ -11,9 +11,9 @@
</template> </template>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex space-x-4 justify-between"> <div class="flex space-x-4 justify-between">
<div class="w-50">货号{{seller.pid || '-'}}</div> <div class="w-full">货号{{seller.pid || '-'}}</div>
<div class="w-50">SpuID: {{seller.spuID || '-'}} </div> <div class="w-full">SpuID: {{seller.spuID || '-'}} </div>
<div class="w-100 flex items-center space-x-4"> <div class="w-full flex items-center space-x-4">
<div>SkuID: {{seller.skuID || '-'}} </div> <div>SkuID: {{seller.skuID || '-'}} </div>
<div class="text-red-4 flex items-center space-x-4" v-if="!seller.skuID"> <div class="text-red-4 flex items-center space-x-4" v-if="!seller.skuID">
<div>(未匹配到销售商sku)</div> <div>(未匹配到销售商sku)</div>
@ -22,18 +22,20 @@
</div> </div>
</div> </div>
<div class="flex space-x-4 justify-between"> <div class="flex space-x-4 justify-between">
<div class="w-50">当前售价 {{seller.sell.originalPrice || '-'}}</div> <div class="w-full">当前售价 {{seller.sell.originalPrice || '-'}}</div>
<a-popover v-if="seller.sell.calMark" trigger="hover"> <a-popover v-if="seller.sell.calMark" trigger="hover">
<template #content> <template #content>
<span class="whitespace-pre"> <span class="whitespace-pre">
{{seller.sell.calMark}} {{seller.sell.calMark}}
</span> </span>
</template> </template>
<div class="w-50">当前到手价 {{seller.sell.finalPrice || '-'}}</div> <div class="w-full">当前到手价 {{seller.sell.finalPrice || '-'}}</div>
</a-popover> </a-popover>
<div class="w-50" v-else>当前到手价 {{seller.sell.finalPrice || '-'}}</div> <div class="w-full" v-else>当前到手价 {{seller.sell.finalPrice || '-'}}</div>
<div class="w-full">
<a-button v-if="seller.skuID" type="primary" @click="fetchArticle(seller)" :loading="fetchLoading">立即拉取</a-button> <a-button v-if="seller.skuID" type="primary" @click="fetchArticle(seller)" :loading="fetchLoading">立即拉取</a-button>
</div> </div>
</div>
<v-chart class="h-400px w-full" :option="options" /> <v-chart class="h-400px w-full" :option="options" />
</div> </div>
</a-collapse-panel> </a-collapse-panel>