样式调整
This commit is contained in:
parent
6f728e6c4c
commit
dbd5effd76
@ -20,6 +20,7 @@
|
|||||||
<el-tab-pane label="访问量" name="access">
|
<el-tab-pane label="访问量" name="access">
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<storeInfo ref="c1" :data-type="activeName"
|
<storeInfo ref="c1" :data-type="activeName"
|
||||||
|
:storeType="cardTabNum"
|
||||||
:list-data="activeName==='access'?[900, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 600, 1100]:[952, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 658, 1165]"></storeInfo>
|
:list-data="activeName==='access'?[900, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 600, 1100]:[952, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 658, 1165]"></storeInfo>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@ -45,7 +46,8 @@ export default {
|
|||||||
dateData:['',''],
|
dateData:['',''],
|
||||||
dateTab:'',
|
dateTab:'',
|
||||||
resize:'',
|
resize:'',
|
||||||
dateBtn:false
|
dateBtn:false,
|
||||||
|
cardTabNum:0,//排行样式
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -78,11 +80,14 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.resize=new ResizeObserver((e)=>{
|
this.resize=new ResizeObserver((e)=>{
|
||||||
if(e[0].contentRect.width<850){
|
let width=e[0].contentRect.width
|
||||||
|
console.log(width)
|
||||||
|
if(width<850){
|
||||||
this.dateBtn=true
|
this.dateBtn=true
|
||||||
}else{
|
}else{
|
||||||
this.dateBtn=false
|
this.dateBtn=false
|
||||||
}
|
}
|
||||||
|
this.cardTabNum=width<=470?1:0
|
||||||
})
|
})
|
||||||
this.resize.observe(this.$refs.storeDataDom)
|
this.resize.observe(this.$refs.storeDataDom)
|
||||||
|
|
||||||
@ -114,7 +119,6 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin-bottom:16px;
|
margin-bottom:16px;
|
||||||
min-width:535px;
|
|
||||||
border:1px solid #e4e7ed;
|
border:1px solid #e4e7ed;
|
||||||
border-radius:4px;
|
border-radius:4px;
|
||||||
}
|
}
|
||||||
@ -166,4 +170,8 @@ export default {
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .el-range-editor.el-input__wrapper{
|
||||||
|
width:245px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card-box" :class="{'jus-bet':!resizeDom}" ref="reizeCardDom">
|
<div class="card-box" :class="{'jus-bet':!resizeDom}" ref="reizeCardDom">
|
||||||
<el-card shadow="hover" class="card-item" :class="[resizeDom===1?'w-49':resizeDom===2?'w-100':'',{'mg-l-15':resizeDom===1&&!((i+1)%2)}]" v-for="(item, i) in list" :key="i">
|
<el-card shadow="hover" class="card-item" :class="[resizeDom===2?'w-100':'',{'mg-l-15':resizeDom===1&&!((i+1)%2)}]" v-for="(item, i) in list" :key="i">
|
||||||
<div>
|
<div>
|
||||||
<div class="item-text dis-f al-item jus-bet">
|
<div class="item-text dis-f al-item jus-bet">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
@ -162,9 +162,10 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.resize = new ResizeObserver((e) => {
|
this.resize = new ResizeObserver((e) => {
|
||||||
if (e[0].contentRect.width <= 1000&&e[0].contentRect.width>=415) {
|
console.log(e[0].contentRect.width)
|
||||||
|
if (e[0].contentRect.width <= 1000&&e[0].contentRect.width>=446) {
|
||||||
this.resizeDom = 1
|
this.resizeDom = 1
|
||||||
} else if(e[0].contentRect.width < 415){
|
} else if(e[0].contentRect.width < 446){
|
||||||
this.resizeDom = 2
|
this.resizeDom = 2
|
||||||
}else{
|
}else{
|
||||||
this.resizeDom = 0
|
this.resizeDom = 0
|
||||||
@ -225,8 +226,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
width: 24%;
|
width: calc(50% - 8px);
|
||||||
min-width: 246px;
|
|
||||||
/* margin-right: 10px; */
|
/* margin-right: 10px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,20 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dis-f al-item jus-bet box-pd font">
|
<div class="dis-f al-item jus-bet box-pd font">
|
||||||
<div class="w-69">
|
<div class="w-65">
|
||||||
<div style="margin-bottom:20px">
|
<div style="margin-bottom:20px">
|
||||||
{{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
|
{{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
|
||||||
</div>
|
</div>
|
||||||
<xEcharts ref="c1" height="254px" :option="payOption"></xEcharts>
|
<xEcharts ref="c1" height="254px" :option="payOption"></xEcharts>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-30">
|
<div class="w-35">
|
||||||
<div style="margin-bottom:20px">
|
<div style="margin-bottom:20px">
|
||||||
{{ dataType === 'sales' ? '门店销售额排名' : '门店访问量排名' }}
|
{{ dataType === 'sales' ? '门店销售额排名' : '门店访问量排名' }}
|
||||||
</div>
|
</div>
|
||||||
<div style="height:254px;">
|
<div style="height:254px;">
|
||||||
<div class="dis-f al-item w-100 mg-t-16" v-for="(item, i) in list" :key="i">
|
<div class="dis-f al-item w-100 mg-t-16" v-for="(item, i) in list" :key="i">
|
||||||
<div class="list-num" :class="{ 'list-top': i < 3 }">{{ i + 1 }}</div>
|
<div class="list-num" :class="[{ 'list-top': i < 3 },{'list-num-s':storeType}]">{{ i + 1 }}</div>
|
||||||
<div class="dis-f al-item" style="flex: 1;justify-content: space-between;">
|
<div class="dis-f al-item" style="flex: 1;justify-content: space-between;">
|
||||||
<div class="list-title-text">{{ item.title }}</div>
|
<div class="list-title-text">{{ item.title }}</div>{{ storeType }}
|
||||||
<div>{{ setNumMark(item.num) }}</div>
|
<div>{{ setNumMark(item.num) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,6 +40,10 @@ export default {
|
|||||||
default: function () {
|
default: function () {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
storeType:{
|
||||||
|
type:Number,
|
||||||
|
default:0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -145,12 +149,12 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-69 {
|
.w-65 {
|
||||||
width: 69%
|
width: 65%
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-30 {
|
.w-35 {
|
||||||
width: 30%
|
width: 35%
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-100 {
|
.w-100 {
|
||||||
@ -173,6 +177,12 @@ export default {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
.list-num-s{
|
||||||
|
width:12px;
|
||||||
|
height:12px;
|
||||||
|
line-height:12px;
|
||||||
|
font-size:10px;
|
||||||
|
}
|
||||||
|
|
||||||
.list-top {
|
.list-top {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -113,7 +113,7 @@
|
|||||||
comp.disabled = true
|
comp.disabled = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(allCompsList)
|
// console.log(allCompsList)
|
||||||
return allCompsList
|
return allCompsList
|
||||||
},
|
},
|
||||||
myCompsList(){
|
myCompsList(){
|
||||||
|
Loading…
Reference in New Issue
Block a user