DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 商品统计

This commit is contained in:
lzhizhao 2025-10-01 21:58:29 +08:00
parent 59098f53bc
commit 5127607c14
1 changed files with 54 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/modules/datacenter/product-analysis/index.vue
View File

@ -105,20 +105,13 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="product" style="margin-top: 20px">
style=" <div style="font-size: 18px; margin-bottom: 20px">商品排行榜</div>
padding: 10px; <el-row :gutter="20">
border: 1px solid #ccc; <el-col :span="12">
margin-top: 20px; <div class="grid-content">商品访客数TOP</div>
"
>
<div style="font-size: 18px; margin-bottom: 40px">商品排行榜</div>
<el-row style="" type="flex" justify="space-between">
<el-col :span="11"
><div class="grid-content bg-purple">商品访客数TOP</div>
<el-table <el-table
:data="productList.viewPeopleList" :data="productList.viewPeopleList"
border
style="width: 100%" style="width: 100%"
height="35vh" height="35vh"
> >
@ -152,13 +145,13 @@
label="访客数" label="访客数"
width="140" width="140"
> >
</el-table-column> </el-table </el-table-column>
></el-col> </el-table>
<el-col :span="11" </el-col>
><div class="grid-content bg-purple">商品支付转化率TOP</div> <el-col :span="12">
<div class="grid-content">商品支付转化率TOP</div>
<el-table <el-table
:data="productList.payConversionList" :data="productList.payConversionList"
border
style="width: 100%" style="width: 100%"
height="35vh" height="35vh"
> >
@ -196,12 +189,11 @@
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin:20px 0" type="flex" justify="space-between"> <el-row :gutter="20" style="margin-top: 20px">
<el-col :span="11" <el-col :span="12">
><div class="grid-content bg-purple">销售量TOP</div> <div class="grid-content">销售量TOP</div>
<el-table <el-table
:data="productList.saleConutList" :data="productList.saleConutList"
border
style="width: 100%" style="width: 100%"
height="35vh" height="35vh"
> >
@ -235,13 +227,13 @@
label="销售量" label="销售量"
width="140" width="140"
> >
</el-table-column> </el-table </el-table-column>
></el-col> </el-table>
<el-col :span="11" </el-col>
><div class="grid-content bg-purple">销售额TOP</div> <el-col :span="12">
<div class="grid-content">销售额TOP</div>
<el-table <el-table
:data="productList.saleMoneyList" :data="productList.saleMoneyList"
border
style="width: 100%" style="width: 100%"
height="35vh" height="35vh"
> >
@ -279,12 +271,11 @@
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="" type="flex" justify="space-between"> <el-row :gutter="20" style="margin-top: 20px">
<el-col :span="11" <el-col :span="12">
><div class="grid-content bg-purple">回复率TOP</div> <div class="grid-content">回复率TOP</div>
<el-table <el-table
:data="productList.repurchaseList" :data="productList.repurchaseList"
border
style="width: 100%" style="width: 100%"
height="35vh" height="35vh"
> >
@ -318,8 +309,9 @@
label="回复率（%）" label="回复率（%）"
width="140" width="140"
> >
</el-table-column> </el-table </el-table-column>
></el-col> </el-table>
</el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
@ -354,43 +346,48 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.product { .product {
margin-top: 20px; padding: 20px;
padding: 10px; background-color: #f5f7fa;
border: 1px solid #ccc;
} }
.stat-list { .stat-list {
display: flex; display: grid;
align-items: center; grid-template-columns: repeat(3, 1fr);
/* justify-content: space-between; */ gap: 20px;
flex-wrap: wrap; margin-top: 20px;
// margin-top: 20px;
padding: 10px;
// border: 1px solid #ccc;
} }
.stat-item { .stat-item {
width: 25%; background-color: #fff;
margin: 30px 30px; padding: 20px;
display: flex; border-radius: 8px;
align-items: center; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s;
&:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
} }
.stat-icon {
background: rgb(99 152 252);
width: 60px;
height: 60px;
border-radius: 3px;
} }
.stat-right { .stat-right {
margin-left: 12px; font-size: 16px;
font-size: 18px;
} }
.stat-title { .stat-title {
// color: #969696; color: #909399;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 12px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #303133;
&.clickable {
cursor: pointer;
text-decoration: underline;
color: #409eff;
}
} }
.grid-content { .grid-content {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 20px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #303133;
} }
</style> </style>