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

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

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