修改

src/components/zanIndex.vue

@@ -11,14 +11,142 @@
         margin: 10px 0;
         border: 1px solid #EBEEF5;
     }
+    .searchDiv{
+        display:flex;
+        flex-direction: row;
+        padding:15px;
+    }
+    .zanIndex .el-input__inner{
+        height:32px;
+        line-height: 32px;
+        padding:0 10px;
+    }
+    .zanIndex .el-input__icon {
+        line-height: 32px;
+    }
+    .searchDiv>div{
+        margin-right:5px;
+    }
+    .zanIndex .el-tabs__nav-scroll{
+        width:120px;
+        margin-left:30px;
+    }
+    .zanIndex .el-tabs__nav-wrap::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #E4E7ED;
+        z-index: 1;
+        height:1px;
+    }
+    .zanIndex .el-tabs__item{
+        height:32px;
+        line-height: 32px;
+    }
+    .zanIndex .clean{
+        color: #92959B;
+        margin-left: 30px;
+        cursor: pointer;
+        font-size: 15px;
+    }
+    .searchDiv>div:last-child{
+        height:32px;
+        line-height: 32px;
+    }
+    .number_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;
+    }
 </style>
 <template>
     <div class="zanIndex">
         <div class="zanTotalTop">数据概况</div>
         <div class="zanIndex_Second">
-            <div class="selectDiv">
-
+            <div class="searchDiv">
+                <div>
+                    <el-select v-model="searchMsg.plat" class="w120">
+                        <el-option label="全部平台" :value='0'></el-option>
+                        <el-option label="微信" :value='1'></el-option>
+                        <el-option label="支付宝" :value='2'></el-option>
+                        <el-option label="抖音/头条" :value='3'></el-option>
+                        <el-option label="百度" :value='4'></el-option>
+                    </el-select>
+                </div>
+                <div>
+                    <el-select v-model="searchMsg.plat2" filterable class="w160">
+                        <el-option label="全部" :value='0'></el-option>
+                    </el-select>
+                </div>
+                <div style="margin-right:50px;">
+                     <el-date-picker
+                        class="indataPicker"
+                        v-model="dateArr"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+                    </el-date-picker>
+                </div>
+                <div>
+                    <el-tabs v-model="activeName" @tab-click="handleClick">
+                        <el-tab-pane label="7日" name="first"></el-tab-pane>
+                        <el-tab-pane label="30日" name="second"></el-tab-pane>
+                    </el-tabs>
+                </div>
+                <div>
+                    <span class="clean">清空筛选</span>
+                </div>
+            </div>
+            <div class="num-info">
+                <div class="num-info-item">
+                    <div>1094</div>
+                    <div class="info-item-name">
+                        <span>用户数</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName:'first',
+        searchMsg: {
+            plat:0,
+            plat2:0,
+            dateArr:''
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+        handleClick(){
+
+        }
+    },
+    mounted() {
+
+    }
+  };
+
+</script>
\ No newline at end of file