|
|
|
@ -2,22 +2,57 @@ |
|
|
|
<div class="home-page"> |
|
|
|
<div class="total-data"> |
|
|
|
<p class="p-title">今日数据</p> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in dataList" :key="index"> |
|
|
|
<p>{{ (index === 3 ? MoneyUnit(item.value) : item.value) || 0 }}</p> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<div class="card-parent"> |
|
|
|
<div class="card-info"> |
|
|
|
<div class="card-type-info"> |
|
|
|
<img class="card-type-img" src="../../assets/images/main_icon_cjje.png" /> |
|
|
|
<div class="card-type-name">{{ dataList[3].name }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-content-info"> |
|
|
|
<div class="card-content-num">{{ MoneyUnit(dataList[3].value) }}</div> |
|
|
|
<div class="card-content-unit">{{ dataList[3].unit }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-empty"></div> |
|
|
|
<div class="card-info"> |
|
|
|
<div class="card-type-info"> |
|
|
|
<img class="card-type-img" src="../../assets/images/main_icon_dcldd.png" /> |
|
|
|
<div class="card-type-name">{{ dataList[1].name }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-content-info"> |
|
|
|
<div class="card-content-num">{{ dataList[1].value }}</div> |
|
|
|
<div class="card-content-unit">{{ dataList[1].unit }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-empty"></div> |
|
|
|
<div class="card-info"> |
|
|
|
<div class="card-type-info"> |
|
|
|
<img class="card-type-img" src="../../assets/images/main_icon_shdd.png" /> |
|
|
|
<div class="card-type-name">{{ dataList[2].name }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-content-info"> |
|
|
|
<div class="card-content-num">{{ dataList[2].value }}</div> |
|
|
|
<div class="card-content-unit">{{ dataList[2].unit }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-empty"></div> |
|
|
|
<div class="card-info"> |
|
|
|
<div class="card-type-info"> |
|
|
|
<img class="card-type-img" src="../../assets/images/main_icon_dpfwcs.png" /> |
|
|
|
<div class="card-type-name">{{ dataList[0].name }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-content-info"> |
|
|
|
<div class="card-content-num">{{ dataList[0].value }}</div> |
|
|
|
<div class="card-content-unit">{{ dataList[0].unit }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="sketch_map"> |
|
|
|
<div class="tab_list"> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="(item,index) in tabList" |
|
|
|
:key="index" |
|
|
|
:class="[{'active':item.show}]" |
|
|
|
@click="changeTab(item)" |
|
|
|
>{{ item.name }}</li> |
|
|
|
<li v-for="(item, index) in tabList" :key="index" :class="[{ 'active': item.show }]" @click="changeTab(item)">{{ |
|
|
|
item.name }}</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="echart_list"> |
|
|
|
@ -35,7 +70,7 @@ |
|
|
|
</div> |
|
|
|
<div class="echart_item"> |
|
|
|
<p class="title">热卖商品</p> |
|
|
|
<ul v-if="info.hotSellProducts&&info.hotSellProducts.length"> |
|
|
|
<ul v-if="info.hotSellProducts && info.hotSellProducts.length"> |
|
|
|
<li v-for="(item, index) in info.hotSellProducts" :key="index"> |
|
|
|
<p>{{ index + 1 }}</p> |
|
|
|
<p :title="item.productName">{{ item.productName }}</p> |
|
|
|
@ -66,16 +101,16 @@ export default { |
|
|
|
condition: 1 |
|
|
|
}, |
|
|
|
dataList: [ |
|
|
|
{ name: '店铺访问次数 (次)', value: '', field: 'total' }, |
|
|
|
{ name: '待处理订单 (件)', value: '', field: 'stayOrders' }, |
|
|
|
{ name: '售后订单 (件)', value: '', field: 'stayAfters' }, |
|
|
|
{ name: '成交金额 (万元)', value: '', field: 'money' } |
|
|
|
{ name: '店铺访问次数', value: '', field: 'total', unit: '次' }, |
|
|
|
{ name: '待处理订单', value: '', field: 'stayOrders', unit: '件' }, |
|
|
|
{ name: '售后订单', value: '', field: 'stayAfters', unit: '件' }, |
|
|
|
{ name: '成交金额', value: '', field: 'money', unit: '万元' } |
|
|
|
], |
|
|
|
tabList: [ |
|
|
|
{ name: '最近30天', type: 4, date: '30' }, |
|
|
|
{ name: '最近7天', type: 3, date: '7' }, |
|
|
|
{ name: '昨天', type: 2, date: '1' }, |
|
|
|
{ name: '今天', type: 1, show: true, date: '0' } |
|
|
|
{ name: '今天', type: 1, show: true, date: '0' }, |
|
|
|
{ name: '昨天', type: 2, date: '1' }, |
|
|
|
{ name: '最近7天', type: 3, date: '7' }, |
|
|
|
{ name: '最近30天', type: 4, date: '30' } |
|
|
|
], |
|
|
|
info: {}, |
|
|
|
date: '0', |
|
|
|
@ -92,7 +127,7 @@ export default { |
|
|
|
const d = res.data |
|
|
|
// 小于100元，单位为 元 |
|
|
|
if (d.money < 10000) { |
|
|
|
this.dataList[3].name = '成交金额 (元)' |
|
|
|
this.dataList[3].unit = '元' |
|
|
|
} |
|
|
|
this.dataList.map(item => { |
|
|
|
item.value = d[item.field] |
|
|
|
@ -318,22 +353,104 @@ export default { |
|
|
|
ul { |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
.home-page { |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.total-data { |
|
|
|
.p-title { |
|
|
|
padding-left: 20px; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(51, 51, 51, 1); |
|
|
|
line-height: 50px; |
|
|
|
height: 50px; |
|
|
|
margin: 0; |
|
|
|
font-size: 20px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: bold; |
|
|
|
color: #121F31; |
|
|
|
margin-bottom: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-parent { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
.card-info { |
|
|
|
flex: 1; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 25px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: flex-start; |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
.card-type-info { |
|
|
|
margin-top: 9px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.card-type-img { |
|
|
|
width: 38px; |
|
|
|
height: 38px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-type-name { |
|
|
|
margin-left: 16px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #404F69; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card-content-info { |
|
|
|
margin-top: 22px; |
|
|
|
margin-bottom: 9px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-content: flex-end; |
|
|
|
-webkit-box-pack: center; |
|
|
|
-ms-flex-pack: center; |
|
|
|
justify-content: space-between; |
|
|
|
-webkit-box-align: center; |
|
|
|
-ms-flex-align: center; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.card-content-num { |
|
|
|
font-size: 40px; |
|
|
|
font-family: San Francisco Display; |
|
|
|
font-weight: bold; |
|
|
|
color: #121F31; |
|
|
|
} |
|
|
|
|
|
|
|
.card-content-unit { |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #404F69; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card-empty { |
|
|
|
width: 19px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
ul { |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
padding: 0; |
|
|
|
|
|
|
|
li { |
|
|
|
padding: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
@ -343,82 +460,102 @@ ul { |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
border: 1px solid rgba(224, 229, 235, 1); |
|
|
|
border-radius: 4px; |
|
|
|
margin: 20px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p { |
|
|
|
margin: 0; |
|
|
|
height: 70px; |
|
|
|
line-height: 70px; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
font-size: 48px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
p:nth-child(1) { |
|
|
|
color: #1acda1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
p:nth-child(1) { |
|
|
|
color: #ffae11; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(3) { |
|
|
|
p:nth-child(1) { |
|
|
|
color: #ff7911; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(4) { |
|
|
|
p:nth-child(1) { |
|
|
|
color: #3a68f2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.empty { |
|
|
|
width: 19px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sketch_map { |
|
|
|
height: calc(100% - 260px); |
|
|
|
box-sizing: border-box; |
|
|
|
background: #fff; |
|
|
|
padding: 0 20px; |
|
|
|
padding: 0px; |
|
|
|
|
|
|
|
.tab_list { |
|
|
|
border-bottom: 1px solid #e0e5eb; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
ul { |
|
|
|
overflow: hidden; |
|
|
|
float: right; |
|
|
|
width: 60%; |
|
|
|
float: left; |
|
|
|
width: 100%; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
li { |
|
|
|
padding: 0 20px; |
|
|
|
margin: 0; |
|
|
|
float: right; |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
color: #999999; |
|
|
|
font-size: 18px; |
|
|
|
float: left; |
|
|
|
height: 48px; |
|
|
|
line-height: 48px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #404F64; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
padding-right: 0; |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
color: #3a68f2; |
|
|
|
border-bottom: 3px solid #3a68f2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.echart_list { |
|
|
|
height: calc(100% - 100px); |
|
|
|
|
|
|
|
.echart_item { |
|
|
|
position: relative; |
|
|
|
padding-left: 20px; |
|
|
|
@ -428,34 +565,41 @@ ul { |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
border: 1px solid rgba(224, 229, 235, 1); |
|
|
|
box-shadow: 0px 5px 10px 0px rgba(51, 51, 51, 0.15); |
|
|
|
border-radius: 4px; |
|
|
|
border-radius: 10px; |
|
|
|
float: left; |
|
|
|
|
|
|
|
.echart { |
|
|
|
height: calc(100% - 100px); |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(-n + 2) { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
margin: 0; |
|
|
|
height: 50px; |
|
|
|
line-height: 50px; |
|
|
|
font-size: 18px; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
text-align: center; |
|
|
|
color: #3a68f2; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
ul { |
|
|
|
height: calc(100% - 50px); |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
|
|
|
|
li { |
|
|
|
height: 10%; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
p { |
|
|
|
float: left; |
|
|
|
// text-align: center; |
|
|
|
@ -467,18 +611,22 @@ ul { |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
flex: 6; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(3) { |
|
|
|
flex: 4; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.exportBtn { |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
@ -488,20 +636,23 @@ ul { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.empty { |
|
|
|
height: 450px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
margin: 100px auto 10px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
text-align: center; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.full-size { |
|
|
|
height: 500px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
}</style> |
xh-pan1
2 years ago
