数据统计-商品销售排行榜

src/views/platform/data_statistics/sales_ranking.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="app-container">
+        <div class="rank">
+            <div class="mx-width">
+                <el-card>
+                    <div class="select">
+                        <span>商品销售数据top20</span>
+
+                        <span v-for="item in dict.type.time_granularity" :key="item.value">{{
+                            item.label
+                        }}</span>
+                    </div>
+                    <el-row type="flex" class="rank-item" v-for="item in 20" :key="item" :gutter="20">
+                        <el-col :span="4" :class="{ 'black': item <= 3, 'gray': item > 3 }">
+                            {{ item }}
+                        </el-col>
+                        <el-col :span="18">
+                            联想笔记本
+                        </el-col>
+                        <el-col :span="2" :offset="3">
+                            99999
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </div>
+            <div class="mx-width">
+                <el-card>
+                    <div class="select">
+                        <span>商品交易金额top20</span>
+
+                        <span v-for="item in dict.type.time_granularity" :key="item.value">{{
+                            item.label
+                        }}</span>
+                    </div>
+                    <el-row type="flex" class="rank-item" v-for="item in 20" :key="item" :gutter="20">
+                        <el-col :span="4" :class="{ 'black': item <= 3, 'gray': item > 3 }">
+                            {{ item }}
+                        </el-col>
+                        <el-col :span="18">
+                            联想笔记本
+                        </el-col>
+                        <el-col :span="2" :offset="3">
+                            ￥99999
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SalesRanking',
+    dicts: ['time_granularity'],
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.rank {
+    display: flex;
+    justify-content: space-around;
+}
+
+.select {
+    display: flex;
+    justify-content: space-between;
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    padding: 0 20px;
+
+}
+
+.mx-width {
+    width: 600px;
+}
+
+.rank-item {
+    margin-top: 30px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    padding: 0 20px;
+
+
+
+    &>div:nth-child(1) {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .black {
+        color: #fff;
+        background-color: rgba(0, 0, 0);
+    }
+
+    .gray {
+        color: #fff;
+        background-color: rgba(190, 190, 190, 1);
+    }
+
+
+    &>div:nth-child(3) {
+        text-align: right;
+    }
+}
+</style>