样式调整

This commit is contained in:
luJianJun 2023-08-30 18:02:54 +08:00
parent 6f728e6c4c
commit dbd5effd76
4 changed files with 35 additions and 17 deletions

View File

@ -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>

View File

@ -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; */
} }

View File

@ -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;

View File

@ -113,7 +113,7 @@
comp.disabled = true comp.disabled = true
} }
} }
console.log(allCompsList) // console.log(allCompsList)
return allCompsList return allCompsList
}, },
myCompsList(){ myCompsList(){