样式调整

src/views/home/widgets/components/StoreData.vue

@@ -20,6 +20,7 @@
                 <el-tab-pane label="访问量" name="access">
                 </el-tab-pane>
                 <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>
             </el-tabs>
         </div>
@@ -45,7 +46,8 @@ export default {
             dateData:['',''],
             dateTab:'',
             resize:'',
-            dateBtn:false
+            dateBtn:false,
+            cardTabNum:0,//排行样式
         }
     },
     methods: {
@@ -78,11 +80,14 @@ export default {
     },
     mounted() {
         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
             }else{
                 this.dateBtn=false
             }
+            this.cardTabNum=width<=470?1:0
         })
         this.resize.observe(this.$refs.storeDataDom)
         
@@ -114,7 +119,6 @@ export default {
     width: 100%;
     background: #fff;
     margin-bottom:16px;
-    min-width:535px;
     border:1px solid #e4e7ed;
     border-radius:4px;
 }
@@ -166,4 +170,8 @@ export default {
     height: 50px;
     line-height: 50px;
 }
+
+::v-deep .el-range-editor.el-input__wrapper{
+    width:245px;
+}
 </style>

src/views/home/widgets/components/allDataFrom.vue

@@ -1,6 +1,6 @@
 <template>
     <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 class="item-text dis-f al-item jus-bet">
                     {{ item.title }}
@@ -162,9 +162,10 @@ export default {
     },
     mounted() {
         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
-            } else if(e[0].contentRect.width < 415){
+            } else if(e[0].contentRect.width < 446){
                 this.resizeDom = 2
             }else{
                 this.resizeDom = 0
@@ -225,8 +226,7 @@ export default {
 }
 
 .card-item {
-    width: 24%;
-    min-width: 246px;
+    width: calc(50% - 8px);
     /* margin-right: 10px; */
 }
 

src/views/home/widgets/components/component/StoreInfo.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="dis-f al-item jus-bet box-pd font">
-        <div class="w-69">
+        <div class="w-65">
             <div style="margin-bottom:20px">
                 {{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
             </div>
             <xEcharts ref="c1" height="254px" :option="payOption"></xEcharts>
         </div>
-        <div class="w-30">
+        <div class="w-35">
             <div style="margin-bottom:20px">
                 {{ dataType === 'sales' ? '门店销售额排名' : '门店访问量排名' }}
             </div>
             <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="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="list-title-text">{{ item.title }}</div>
+                        <div class="list-title-text">{{ item.title }}</div>{{ storeType }}
                         <div>{{ setNumMark(item.num) }}</div>
                     </div>
                 </div>
@@ -40,6 +40,10 @@ export default {
             default: function () {
                 return []
             }
+        },
+        storeType:{
+            type:Number,
+            default:0
         }
     },
     watch: {
@@ -145,12 +149,12 @@ export default {
     font-size: 14px;
 }
 
-.w-69 {
-    width: 69%
+.w-65 {
+    width: 65%
 }
 
-.w-30 {
-    width: 30%
+.w-35 {
+    width: 35%
 }
 
 .w-100 {
@@ -173,6 +177,12 @@ export default {
     border-radius: 50%;
     background: #f5f5f5;
 }
+.list-num-s{
+    width:12px;
+    height:12px;
+    line-height:12px;
+    font-size:10px;
+}
 
 .list-top {
     color: #fff;

src/views/home/widgets/index.vue

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