<template>
<div class="box bgc
3 sku-sale-rank">
<!-- TODO: 分辨大怎么展示问UI -->
<div class="header">
<div class="title">
商品热榜<span class="sub-title">{{ start }} ~ {{ end }}</span>
</div>
</div>
<div class="body">
<el-row v-for="
(item, index
) in skuSaleRank" :key="index">
<el-col :span="5">
<div :class="&#
39;top top&#
39; +
(index + 1
)">
{{ index + 1 }}
</div>
</el-col>
<el-col :span="1
3">
<div class="sku-name" :title="item.skuName">
{{ item.skuName }}
</div>
</el-col>
<el-col :span="6">
<div class="count">{{ item.count }}单</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import dayjs from "dayjs";
// 定义变量
const skuSaleRank = ref
([
{
skuId: "0",
skuName: "可口可乐",
count: 9,
amount: 0,
},
{
skuId: "0",
skuName: "营养快线",
count: 8,
amount: 0,
},
{
skuId: "0",
skuName: "阿萨姆奶茶",
count: 6,
amount: 0,
},
{
skuId: "0",
skuName: "星巴克摩卡味",
count: 2,
amount: 0,
},
{
skuId: "0",
skuName: "美汁源果粒橙",
count: 1,
amount: 0,
},
{
skuId: "0",
skuName: "怡宝",
count: 1,
amount: 0,
},
]
);
const start = dayjs
().startOf
("month"
).format
("YYYY.MM.DD"
);
const end = dayjs
().endOf
("day"
).format
("YYYY.MM.DD"
);
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.sku-sale-rank {
display: flex;
flex-direction: column;
height: calc
((100vh - 120px
) * 0.6
);
min-height: 5
38px;
background: #ffffff;
border-radius: 20px;
.body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 20px;
.top {
display: inline-block;
width: 16px;
height: 20px;
margin-left: 10px;
background: url
("@/assets/user-task-stats/top.png"
);
text-align: center;
font-size: 12px;
font-weight: normal;
color: #e9b499;
line-height: 14px;
}
.top1 {
width: 21px;
height: 20px;
background: url
("@/assets/user-task-stats/top1.png"
);
color: #8e5900;
}
.top2 {
width: 21px;
height: 20px;
background: url
("@/assets/user-task-stats/top2.png"
);
color: #494949;
}
.top
3 {
width: 21px;
height: 20px;
background: url
("@/assets/user-task-stats/top
3.png"
);
color: #cf6d
3d;
}
.sku-name {
height: 20px;
font-size: 14px;
font-weight: 500;
color: $--color-text-primary;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.count {
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #
737589;
line-height: 20px;
text-align: right;
}
}
}
</style>
基于后端接口export function getTopSelling
() {
return request
({
url: "/manage/order/top-selling",
method: "get",
}
);
}改造前端代码，使其调用接口动态获取数据而不是写死
本文介绍了在CentOS 7上使用Docker搭建Maven私服Nexus3的过程，并着重解决了遇到的初始密码错误的问题。通过查找/nexus-data/admin.password文件获取正确密码，成功登录Maven私服。
最低0.47元/天 解锁文章
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
