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

1.厂商-首页

Browse Source
master
panqihua 2 years ago
parent c3d5873d22
commit b8673a1d1e
1 changed files with 388 additions and 3 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. 391
      src/views/manufacturer/index.vue

391
src/views/manufacturer/index.vue
Unescape View File

@ -1,15 +1,400 @@
<template>
<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>
</template>
<script>
import echarts from '@/plugins/echarts'
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>
<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>

Write Preview
Loading…
Cancel
Save