panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品销售

Browse Source
master
panqihua 2 years ago
parent e9c13b24e4
commit 78f98e9fd0
1 changed files with 188 additions and 135 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 323
      src/views/index.vue

323
src/views/index.vue
Unescape View File

@ -1,89 +1,118 @@
<template> <template>
<div class="app-container home"> <div class="app-container home">
<div class="title">{{ $route.meta.title }}</div> <div class="title">{{ $route.meta.title }}</div>
<el-card class="today"> <div class="body">
<div class="card-title">今日核心数据</div> <el-card class="today">
<el-row type="flex" class="data"> <div class="card-title">今日核心数据</div>
<el-col> <el-row type="flex" class="data">
<div class="label">新用户</div> <el-col>
<div class="num">569</div> <div class="label">新用户</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div> <div class="num">569</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">新用户</div>
<div class="num">569</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">新用户</div>
<div class="num">569</div>
<div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i></div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">近7日UV</div>
<div class="num">569</div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">近30日UV</div>
<div class="num">569</div>
</el-col>
</el-row>
</el-card>
<el-row :gutter="10" class="order" type="flex">
<el-col :span="14">
<el-card>
<div class="card-title">全部订单</div>
<el-row type="flex" class="all-card" :gutter="10">
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col> </el-col>
<div class="divider"></div> <el-col :span="5">
<el-col> <el-card class="today-order">
<div class="label">新用户</div> <div class="num">569</div>
<div class="num">569</div> <div class="bottom-label">今日订单数</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div> </el-card>
</el-col> </el-col>
<div class="divider"></div> <el-col :span="5">
<el-col> <el-card class="total-income">
<div class="label">新用户</div> <div class="num">569.00</div>
<div class="num">569</div> <div class="bottom-label">今日总收入</div>
<div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i></div> </el-card>
</el-col> </el-col>
<div class="divider"></div> </el-row>
<el-col> <el-row :gutter="10" type="flex" class="bottom">
<div class="label">近7日UV</div> <el-col :span="14">
<div class="num">569</div> <el-card>
<div class="card-title">月销售趋势</div>
</el-card>
</el-col> </el-col>
<div class="divider"></div> <el-col :span="10" class="rank">
<el-col> <el-card>
<div class="label">近30日UV</div> <div class="top">
<div class="num">569</div> <div class="card-title">商品销售TOP5</div>
<el-dropdown class="select-day">
<span class="el-dropdown-link">
近7天<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
</el-dropdown-menu>
</el-dropdown>
</div>
<el-table :data="rankData">
<el-table-column label="排名" type="index" align="center"></el-table-column>
<el-table-column label="商品" prop="name" align="center"></el-table-column>
<el-table-column label="订单数" prop="order" align="center"></el-table-column>
<el-table-column label="销售总额" prop="price" align="center"></el-table-column>
</el-table>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </div>
<el-row :gutter="10" class="order" type="flex">
<el-col :span="14">
<el-card>
<div class="card-title">全部订单</div>
<el-row type="flex" class="all-card" :gutter="10">
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="5">
<el-card class="today-order">
<div class="num">569</div>
<div class="bottom-label">今日订单数</div>
</el-card>
</el-col>
<el-col :span="5">
<el-card class="total-income">
<div class="num">569.00</div>
<div class="bottom-label">今日总收入</div>
</el-card>
</el-col>
</el-row>
</div> </div>
</template> </template>
@ -92,8 +121,14 @@ export default {
name: "Index", name: "Index",
data() { data() {
return { return {
// 版本号 // 商品销售数据
version: "3.8.5" rankData: Array.from(new Array(5).keys()).map(item => {
return {
name: "华为Mate 40 手机",
order: 56,
price: 1555646.00
}
})
}; };
}, },
methods: { methods: {
@ -107,9 +142,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.home { .home {
background-color: #f8f9fd; background-color: #f8f9fd;
height: 100%;
width: 100%;
position: absolute;
&>.title { &>.title {
color: rgba(22, 132, 252, 1); color: rgba(22, 132, 252, 1);
@ -134,81 +166,102 @@ export default {
margin-top: 10px; margin-top: 10px;
} }
&>.today { &>.body {
margin-top: 10px; background-color: #f5f5f5;
&>.today {
margin-top: 10px;
.data { .data {
@for $i from 1 through 4 { @for $i from 1 through 4 {
&>.divider:nth-of-type(#{$i*2}) { &>.divider:nth-of-type(#{$i*2}) {
height: 75%; height: 75%;
width: 1px; width: 1px;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 20% * $i; left: 20% * $i;
}
} }
}
.label { .label {
font-size: 16px; font-size: 16px;
} }
.up { .up {
color: red; color: red;
} }
.down { .down {
color: green; color: green;
} }
.up, .up,
.down { .down {
margin-left: 10px; margin-left: 10px;
} }
.label, .label,
.num, .num,
.bottom-label { .bottom-label {
margin-left: 15%; margin-left: 15%;
}
} }
} }
}
&>.order { &>.order {
margin-top: 10px; margin-top: 10px;
.all-card { .all-card {
.data { .data {
text-align: center; text-align: center;
&>.img { &>.img {
background-color: #e9f2ff; background-color: #e9f2ff;
width: 50%; width: 50%;
/* 设置高度为宽度 */ /* 设置高度为宽度 */
padding-top: 50%; padding-top: 50%;
margin: auto; margin: auto;
border-radius: 10px; border-radius: 10px;
} }
&>.value { &>.value {
font-size: 16px; font-size: 16px;
margin-top: 5px; margin-top: 5px;
}
} }
} }
.today-order,
.total-income {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
} }
.today-order, &>.bottom {
.total-income { margin-top: 10px;
height: 100%;
display: flex; &>.rank {
justify-content: center; .top {
align-items: center; display: flex;
text-align: center; justify-content: space-between;
.select-day {
font-size: 16px;
margin-top: 5px;
}
}
}
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save