Skip to content

E
ElectricitySheep
Commit 633e56ed authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改1千2

parent 6bef4dc6
Show whitespace changes
Inline Side-by-side
Showing with 672 additions and 635 deletions
src/components/zanIndex.vue
View file @ 633e56ed
<style>
.zanTotalTop{
padding:18px 20px;
.zanTotalTop {
padding: 18px 20px;
background: #fff;
border-bottom:1px solid #EBEEF5;
border-bottom: 1px solid #EBEEF5;
}
.zanIndex_Second{
.zanIndex_Second {
background-color: #fff;
position: relative;
padding-bottom: 50px;
margin: 10px 0;
border: 1px solid #EBEEF5;
}
.searchDiv{
display:flex;
.searchDiv {
display: flex;
flex-direction: row;
padding:15px;
padding: 15px;
overflow: hidden;
}
.searchDiv .el-date-editor .el-range-separator{
width:6%;
.searchDiv .el-date-editor .el-range-separator {
width: 6%;
}
.zanIndex .el-input__inner{
height:32px;
.zanIndex .el-input__inner {
height: 32px;
line-height: 32px;
padding:0 10px;
padding: 0 10px;
}
.zanIndex .el-input__icon {
line-height: 32px;
}
.searchDiv>div{
margin-right:5px;
.searchDiv>div {
margin-right: 5px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-scroll{
width:120px;
margin-left:30px;
.zanIndex .zanIndex_Second .el-tabs__nav-scroll {
width: 120px;
margin-left: 30px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
content: "";
position: absolute;
......@@ -44,87 +52,105 @@
height: 2px;
background-color: #E4E7ED;
z-index: 1;
height:1px;
height: 1px;
}
.zanIndex .el-tabs__item{
height:32px;
.zanIndex .el-tabs__item {
height: 32px;
line-height: 32px;
}
.zanIndex .clean{
.zanIndex .clean {
color: #92959B;
margin-left: 30px;
cursor: pointer;
font-size: 15px;
}
.searchDiv>div:last-child{
height:32px;
.searchDiv>div:last-child {
height: 32px;
line-height: 32px;
}
.num-info{
.num-info {
display: flex;
width: 100%;
height: 60px;
font-size: 28px;
color: #303133;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.num-info .num-info-item {
text-align: center;
width: 20%;
border-left: 1px dashed #EFF1F7;
}
.zanIndexThrid{
.zanIndexThrid {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius:4px;
border-radius: 4px;
overflow: hidden;
}
.el-card_header{
.el-card_header {
position: relative;
padding: 18px 20px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tab-pay {
position: absolute;
bottom: -15px;
right: 50px;
}
.tab-pay .el-tabs__item {
height: 56px;
line-height: 56px;
}
.el-tabs__nav-wrap::after{
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.zanIndex .el-card__body{
padding:20px;
.zanIndex .el-card__body {
padding: 20px;
}
.pay-info {
padding: 40px 0;
display: flex;
justify-content: space-between;
}
.pay-info .pay-info-item.active {
border: 1px solid #3399FF;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.pay-info .pay-info-item {
padding-top: 45px;
width: 22%;
......@@ -137,20 +163,24 @@
position: relative;
cursor: pointer;
}
.pay-info .pay-info-item.active img {
position: absolute;
top: 0;
left: 0;
display: block;
}
.pay-info .pay-info-item img {
display: none;
}
.zantable-area{
.zantable-area {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.zantable-area .el-card {
width: 49.5%;
color: #303133;
......@@ -162,37 +192,45 @@
border-radius: 4px;
overflow: hidden;
}
.el-zanIndex_btmheader{
.el-zanIndex_btmheader {
padding: 14px 20px;
}
.el-zanIndex_btmheader span{
.el-zanIndex_btmheader span {
/* float:left; */
height: 32px;
line-height: 32px;
}
.ZexportBtn{
padding:0 10px;
float:right;
.ZexportBtn {
padding: 0 10px;
float: right;
}
.table_Inner{
padding:20px;
.table_Inner {
padding: 20px;
}
.rankIng{
padding:0 10px;
.rankIng {
padding: 0 10px;
text-align: center;
}
.table_Inner table th{
.table_Inner table th {
background: rgb(243, 245, 246);
color:rgb(48, 49, 51);
padding-left:10px;
border-bottom:1px solid #EBEEF5;
color: rgb(48, 49, 51);
padding-left: 10px;
border-bottom: 1px solid #EBEEF5;
}
.text-omit {
width: 380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table_Inner .el-table .cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
......@@ -200,26 +238,32 @@
word-break: break-all;
line-height: 23px;
}
.table_Inner .el-table_1_column_1{
.table_Inner .el-table_1_column_1 {
text-align: center;
}
.table_Inner .el-table_1_column_2{
padding-left:0;
.table_Inner .el-table_1_column_2 {
padding-left: 0;
}
.table2 .is-leaf:first-child{
.table2 .is-leaf:first-child {
text-align: center;
}
.Zheader_image{
.Zheader_image {
width: 32px;
height: 32px;
margin-right: 10px;
float: left;
}
.Zheader_image img{
width:100%;
height:100%;
.Zheader_image img {
width: 100%;
height: 100%;
}
.nameList{
.nameList {
height: 32px;
line-height: 32px;
display: inline-block;
......@@ -228,26 +272,31 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.zantable-area .el-table__row{
height:63px;
.zantable-area .el-table__row {
height: 63px;
}
.echarts-title {
color: #92959B;
display: flex;
font-size: 16px;
margin-left: 45px;
}
.echarts-title-item {
margin-right: 45px;
display: flex;
align-items: center;
}
.echarts-title-item .echarts-title-icon {
height: 16px;
width: 16px;
margin-right: 10px;
background-color: #3399ff;
}
</style>
<template>
<div class="zanIndex">
......@@ -269,13 +318,8 @@
</el-select>
</div>
<div style="margin-right:50px;">
<el-date-picker
class="indataPicker"
type="daterange"
v-model="searchMsg.dateArr"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
<el-date-picker class="indataPicker" type="daterange" v-model="searchMsg.dateArr" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
......@@ -331,22 +375,22 @@
<div class="el-card__body">
<div class="pay-info">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
<img src="../assets/img/active.png" alt=""/>
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付订单数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt=""/>
<img src="../assets/img/active.png" alt="" />
<div>5456.00</div>
<div class="info-item-name">支付金额</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt=""/>
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付人数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt=""/>
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付件数</div>
</div>
......@@ -382,15 +426,13 @@
</div>
<div class="table_Inner">
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="排名"
width="120">
<el-table-column label="排名" width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
......@@ -398,32 +440,21 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="商品"
width="400">
<el-table-column prop="name" label="商品" width="400">
<template slot-scope="scope">
<div class="text-omit">
{{scope.row.name}}
</div>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="销售额"
sortable
width="150">
<el-table-column prop="sales" label="销售额" sortable width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="销量"
width="150">
<el-table-column prop="Numer" sortable label="销量" width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
......@@ -440,15 +471,13 @@
</div>
<div class="table_Inner table2">
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="排名"
width="120">
<el-table-column label="排名" width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
......@@ -456,33 +485,22 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="用户"
width="400">
<el-table-column prop="name" label="用户" width="400">
<template slot-scope="scope">
<div class="Zheader_image">
<img src="../assets/img/id-card.png" alt=""/>
<img src="../assets/img/id-card.png" alt="" />
</div>
<span class="nameList">印象日本地接～谢军</span>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="支付金额"
sortable
width="150">
<el-table-column prop="sales" label="支付金额" sortable width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="支付件数"
width="150">
<el-table-column prop="Numer" sortable label="支付件数" width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
......@@ -500,101 +518,96 @@
export default {
data() {
return {
activeName:'first',
activeSell:'first',
activeName: 'first',
activeSell: 'first',
//过滤支付订单数
isShowOrder:true,
isShowOrder: true,
//过滤支付金额
isShowMoney:true,
isShowMoney: true,
//过滤支付人数
isShowPay:true,
isShowPay: true,
//过滤支付件数
isShowPayNum:true,
isShowPayNum: true,
searchMsg: {
plat:0,
plat2:0,
dateArr:[]
plat: 0,
plat2: 0,
dateArr: []
},
//商品购买力data
tableData:[{
tableData: [{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23450.00',
Numer:'109',
Numer: '109',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23440.00',
Numer:'108',
Numer: '108',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23420.00',
Numer:'105',
},{
Numer: '105',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
},{
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
Numer: '107',
}]
};
},
created() {
},
created() {},
methods: {
handleClick(){
},
handleClick() {},
//数字加0
getNumber(num){
let str='';
if(num<10){
str = '0'+num
}else{
str=num;
getNumber(num) {
let str = '';
if (num < 10) {
str = '0' + num
} else {
str = num;
}
return str;
},
//过滤支付订单数
filterOrder(){
this.isShowOrder=!this.isShowOrder;
filterOrder() {
this.isShowOrder = !this.isShowOrder;
},
//过滤支付金额
filterMoney(){
this.isShowMoney=!this.isShowMoney
filterMoney() {
this.isShowMoney = !this.isShowMoney
},
//过滤支付人数
filterPay(){
this.isShowPay=!this.isShowPay
filterPay() {
this.isShowPay = !this.isShowPay
},
//过滤支付件数
filterPayNum(){
this.isShowPayNum=!this.isShowPayNum
filterPayNum() {
this.isShowPayNum = !this.isShowPayNum
},
//初始化图标
initMap(){
initMap() {
var myChart = this.$echarts.init(this.$refs.myecharts);
var option = {
title: {
......@@ -615,24 +628,23 @@
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
            axisLine:{ //y轴
show:false,
axisLine: { //y轴
show: false,
},
axisLabel : {
formatter: function(){
axisLabel: {
formatter: function () {
return "";
}
},
type: 'value',
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
show: true //隐藏或显示
}
},
series: [
{
series: [{
name: '支付订单数',
type: 'line',
stack: '总量',
......@@ -657,15 +669,40 @@
name: '支付件数',
type: 'line',
stack: '总量',
color:'rgb(255, 133, 133)',
color: 'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option, true);
},
TestMall() {
this.apipost("/api/Mall/GetHome", {
MiniAppId: "wxacd9f8cc3480d29e"
}, res => {
console.log("TestMall", res.data.data);
if (res.data.resultCode == 1) {
} else {
this.Info(res.data.message);
}
})
},
TestCenter() {
this.apipost("/api/Mall/GetUserCenter", {
MiniAppId: "wxacd9f8cc3480d29e"
}, res => {
console.log("TestCenter", res.data.data);
if (res.data.resultCode == 1) {
} else {
this.Info(res.data.message);
}
})
},
},
mounted() {
this.TestMall();
this.initMap();
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment