panqihua
2 years ago
parent
c3d5873d22
commit
b8673a1d1e
@ -1,15 +1,400 @@ |
|||||||
<template> |
<template> |
||||||
<div class="app-container"> |
<div class="app-container"> |
||||||
厂商首页 |
<div class="renew-tip"> |
||||||
|
<span class="tip">您的账号还剩4天即将到期，到期后讲影响正常使用，请尽快续费</span> |
||||||
|
<a href="#" class="renew">立即续费</a> |
||||||
|
</div> |
||||||
|
<el-row class="mt" :gutter="20"> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-card> |
||||||
|
<div class="title">数据汇总</div> |
||||||
|
<el-row type="flex" class="sum mt" justify="space-between"> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="value">131344</div> |
||||||
|
<div class="label">总销售数量</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="value">131344</div> |
||||||
|
<div class="label">建议零售价销售额</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="value">131344</div> |
||||||
|
<div class="percent">环比：<i class="el-icon-top"></i>12.3%</div> |
||||||
|
<div class="percent">周同比：<i class="el-icon-down"></i>12.3%</div> |
||||||
|
<div class="label">销售数量</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="value">1313443.00</div> |
||||||
|
<div class="percent">环比：<i class="el-icon-top"></i>12.3%</div> |
||||||
|
<div class="percent">周同比：<i class="el-icon-down"></i>12.3%</div> |
||||||
|
<div class="label">建议零售价销售量</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="title mt-5">快捷入口</div> |
||||||
|
<el-row type="flex" class="shortcut mt"> |
||||||
|
<el-col :span="4"> |
||||||
|
<div>20</div> |
||||||
|
<div>待授权经销商</div> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="4" class="ml20"> |
||||||
|
<div>20</div> |
||||||
|
<div>待授权直营门店</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4" class="ml20"> |
||||||
|
<div>20</div> |
||||||
|
<div>我的经销商</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4" class="ml20"> |
||||||
|
<div>20</div> |
||||||
|
<div>我的直营门店</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="title mt">销售数据</div> |
||||||
|
<div ref="chart" class="chart"></div> |
||||||
|
<el-row class="title mt" type="flex" justify="space-between"> |
||||||
|
<el-col>商品销售排行榜top5</el-col> |
||||||
|
<el-col class="query"> |
||||||
|
<span class="active">今日</span> |
||||||
|
<span>昨日</span> |
||||||
|
<span>本周</span> |
||||||
|
<span>上周</span> |
||||||
|
<span>本月</span> |
||||||
|
<span>上月</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" class="rank-item mt-3" v-for="item in 5" :key="item"> |
||||||
|
<el-col :span="3"> |
||||||
|
<div class="circle" :class="{default:item>3}">{{ item }}</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5">联想笔记本</el-col> |
||||||
|
<el-col :offset="12" class="num">99999</el-col> |
||||||
|
</el-row> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-card class="time"> |
||||||
|
<div><span class="address">郑州市</span><span class="week ml20">星期六</span></div> |
||||||
|
<div class="mt10 date">公历：2022年12月31日</div> |
||||||
|
<div class="mt10 date">农历：2022年11月30日</div> |
||||||
|
</el-card> |
||||||
|
<el-card class="info mt10"> |
||||||
|
<el-row type="flex"> |
||||||
|
<el-col class="title">用户信息</el-col> |
||||||
|
<el-col class="status">审核中</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="name mt10"> |
||||||
|
<el-avatar :size="50" src="http://www.dummyimage.com/50x50"></el-avatar> |
||||||
|
|
||||||
|
<div class="content ml10"> |
||||||
|
<span>张三</span> |
||||||
|
<span>厂商名称</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="text-center mt10">到期时间</div> |
||||||
|
<div class="text-center mt10">2022-12-31 10:38</div> |
||||||
|
<div class="text-center mt10"> |
||||||
|
<el-button round>购买</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-card> |
||||||
|
<el-card class="notice mt10"> |
||||||
|
<el-row type="flex"> |
||||||
|
<el-col class="title">系统通知</el-col> |
||||||
|
<el-col class="all">全部<i class="el-icon-arrow-right"></i></el-col> |
||||||
|
</el-row> |
||||||
|
<template v-for="item in 2"> |
||||||
|
<div class="item"> |
||||||
|
<div class="time mt10">2021-12-12 10:30</div> |
||||||
|
<el-row class="content mt10"> |
||||||
|
<el-col :span="4"> |
||||||
|
<img src="http://www.dummyimage.com/50x50"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="20" class="right"> |
||||||
|
<div> |
||||||
|
<span class="title">祈福的历史</span> |
||||||
|
<div class="status"></div> |
||||||
|
</div> |
||||||
|
<div class="content">{{ '1'.repeat(50) }}</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<el-divider/> |
||||||
|
</template> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import echarts from '@/plugins/echarts' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'index.vue' |
name: 'index.vue', |
||||||
|
mounted() { |
||||||
|
this.initChart() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initChart() { |
||||||
|
let myChart = echarts.init(this.$refs.chart) |
||||||
|
let option |
||||||
|
|
||||||
|
option = { |
||||||
|
legend: {}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: Array.from(new Array(5).keys()).map(item => `${item + 1}月`) |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
show: true, |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '数量', |
||||||
|
data: Array.from(new Array(5).keys()).map(item => Math.round(Math.random() * 500)), |
||||||
|
type: 'line' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '金额', |
||||||
|
data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)), |
||||||
|
type: 'line' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
option && myChart.setOption(option) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped lang="scss"> |
||||||
|
$circle-radius: 25px; |
||||||
|
.notice { |
||||||
|
padding-bottom: 100px; |
||||||
|
|
||||||
|
.all { |
||||||
|
text-align: right; |
||||||
|
color: rgba(154, 154, 154, 1); |
||||||
|
font-size: 14px; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
& > .time { |
||||||
|
color: rgba(168, 168, 168, 1); |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
& > .content { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
|
||||||
|
& > .right { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
|
||||||
|
.title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
color: rgba(174, 174, 174, 1); |
||||||
|
font-size: 12px; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
overflow-x: hidden; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.title, .content { |
||||||
|
padding: 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
|
||||||
|
.status { |
||||||
|
color: rgba(22, 132, 252, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
|
||||||
|
display: flex; |
||||||
|
|
||||||
|
& > .content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time { |
||||||
|
.address, .week { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 16px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.date { |
||||||
|
color: rgba(154, 154, 154, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mt-3 { |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.rank-item { |
||||||
|
align-items: center; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
|
||||||
|
|
||||||
|
.circle { |
||||||
|
background-color: #000; |
||||||
|
color: white; |
||||||
|
border-radius: 50%; |
||||||
|
width: $circle-radius; |
||||||
|
height: $circle-radius; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.circle.default { |
||||||
|
background-color: rgba(190, 190, 190, 1); |
||||||
|
} |
||||||
|
|
||||||
|
& > .num { |
||||||
|
text-align: right; |
||||||
|
padding-right: 10%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.query { |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
& > span { |
||||||
|
margin-right: 10px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
& > span.active { |
||||||
|
color: blue; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.chart { |
||||||
|
height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.shortcut { |
||||||
|
& > div { |
||||||
|
border-radius: 4px; |
||||||
|
background-color: rgba(239, 239, 239, 1); |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
font-family: Roboto; |
||||||
|
padding: 10px 0; |
||||||
|
height: 75px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mt { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-5 { |
||||||
|
margin-top: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml20 { |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 16px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.sum { |
||||||
|
& > div { |
||||||
|
background-color: #efefef; |
||||||
|
text-align: center; |
||||||
|
height: 120px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
padding: 10px 0; |
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
|
||||||
|
& > .value { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
& > .label { |
||||||
|
color: rgba(108, 108, 108, 1); |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.renew-tip { |
||||||
|
border-radius: 4px; |
||||||
|
background-color: rgba(255, 51, 51, 0.15); |
||||||
|
padding: 20px; |
||||||
|
|
||||||
|
|
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
|
||||||
|
& > .tip { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
} |
||||||
|
|
||||||
|
& > .renew { |
||||||
|
margin-left: 20px; |
||||||
|
color: blue; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue