stage：发薪统计

src/views/payStatistics/index.vue

+<template>
+    <div class="app-container payStatistics">
+        <el-form label-position="right">
+            <el-row :gutter="12">
+                <el-col :span="8">
+                    <el-form-item label-width="85px" label="统计时间">
+                        <el-date-picker value-format="yyyy-MM-dd" v-model="value1" type="daterange" range-separator="至"
+                            start-placeholder="开始日期" end-placeholder="结束日期">
+                        </el-date-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label-width="100px" label="代理商名称">
+                        <el-input placeholder="请输入代理商名称"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label-width="85px" label="代理商号">
+                        <el-input placeholder="请输入代理商号"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search">查询</el-button>
+                        <el-button type="info" icon="el-icon-refresh">重置</el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <!-- 统计部份 -->
+        <div class="statisticsMain">
+            <div class="statistics_item">
+                <div class="statistics_item_title">成交金额</div>
+                <div class="statistics_item_content">7757851</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">成交笔数</div>
+                <div class="statistics_item_content">24243</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">失败笔数</div>
+                <div class="statistics_item_content">125</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">失败率</div>
+                <div class="statistics_item_content">4%</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">服务费金额</div>
+                <div class="statistics_item_content">4429871</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">代理商佣金</div>
+                <div class="statistics_item_content">228304</div>
+            </div>
+            <div class="statistics_item">
+                <div class="statistics_item_title">代理商数</div>
+                <div class="statistics_item_content">5</div>
+            </div>
+        </div>
+        <!-- 表格部分 -->
+        <el-table :data="tableData" border show-summary style="width: 100%;margin-top:28px"
+            height="calc(100vh - 360px)">
+            <el-table-column type="index" width="55" label="序号"></el-table-column>
+            <el-table-column prop="id" label="代理商号" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="代理商名称">
+            </el-table-column>
+            <el-table-column prop="amount1" sortable label="商户数">
+            </el-table-column>
+            <el-table-column prop="amount2" sortable label="成交笔数">
+            </el-table-column>
+            <el-table-column prop="amount3" sortable label="成交金额">
+            </el-table-column>
+            <el-table-column prop="amount4" sortable label="失败笔数">
+            </el-table-column>
+            <el-table-column prop="amount5" sortable label="服务费金额">
+            </el-table-column>
+            <el-table-column prop="amount6" sortable label="代理商佣金">
+            </el-table-column>
+            <!-- <el-table-column prop="amount3" sortable label="操作">
+            </el-table-column> -->
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'payStatistics',
+    data() {
+        return {
+            value1: null,
+            tableData: [{
+                id: '12987122',
+                name: '赵老师',
+                amount1: '2',
+                amount2: '1289',
+                amount3: 762321,
+                amount4: 8,
+                amount5: 498482,
+                amount6: 16078
+            }, {
+                id: '12987123',
+                name: '洪老师',
+                amount1: '4',
+                amount2: '4089',
+                amount3: 1209781,
+                amount4: 23,
+                amount5: 672313,
+                amount6: 25789
+            }, {
+                id: '12987124',
+                name: '李老师',
+                amount1: '3',
+                amount2: '2609',
+                amount3: 928324,
+                amount4: 16,
+                amount5: 178341,
+                amount6: 18964
+            }, {
+                id: '12987125',
+                name: '赵老师',
+                amount1: '6',
+                amount2: '10233',
+                amount3: 2983983,
+                amount4: 43,
+                amount5: 1597834,
+                amount6: 98739
+            }, {
+                id: '12987126',
+                name: '马老师',
+                amount1: '5',
+                amount2: '6023',
+                amount3: 1873442,
+                amount4: 35,
+                amount5: 1482901,
+                amount6: 68734
+            }]
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.payStatistics ::v-deep {
+    .statisticsMain {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        margin-top: 22px;
+
+        .statistics_item {
+            width: calc(14% - 12px);
+            padding: 20px;
+            background-color: #fafafa;
+            border-radius: 6px;
+
+            .statistics_item_title {
+                font-size: 16px;
+                font-weight: 600;
+                color: #000;
+                text-align: center;
+                line-height: 32px;
+            }
+
+            .statistics_item_content {
+                font-size: 16px;
+                font-weight: 400;
+                color: #666;
+                text-align: center;
+                line-height: 26px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file