订单统计静态页完成

src/App.vue

@@ -612,6 +612,10 @@ input[type="number"] {
   display: flex;
   align-items: center;
 }
+.adffc{
+  display: flex;
+  flex-direction: column;
+}
 .adfacjc{
   display: flex;
   align-items: center;

src/views/modules/statistics/order.vue

@@ -1,17 +1,384 @@
 <template>
     <div class="page">
-        <h3>订单统计</h3>
+        <div class="top adfac">
+            <div class="top-pre">
+                <div class="top-pre-num adfacjb">
+                    <div class="top-pre-num-l">
+                        <p>支付订单数</p>
+                        <p class="n">{{ 24589 }}</p>
+                    </div>
+                    <div class="top-pre-num-r">
+                        <img src="@/assets/images/agent/order_img1.png">
+                    </div>
+                </div>
+                <div class="top-pre-text adfac">
+                    <div class="tn">较上周&nbsp;{{ -1.32 }}%&nbsp;<i class="el-icon-caret-bottom" style="color: #FD4F66;"></i></div>
+                </div>
+            </div>
+            <div class="top-pre">
+                <div class="top-pre-num adfacjb">
+                    <div class="top-pre-num-l">
+                        <p>支付人数</p>
+                        <p class="n">{{ 679 }}</p>
+                    </div>
+                    <div class="top-pre-num-r">
+                        <img src="@/assets/images/agent/order_img2.png">
+                    </div>
+                </div>
+                <div class="top-pre-text adfac">
+                    <div class="tn">较上周&nbsp;{{ +1.32 }}%&nbsp;<i class="el-icon-caret-top" style="color: #33A7A7;"></i></div>
+                </div>
+            </div>
+            <div class="top-pre">
+                <div class="top-pre-num adfacjb">
+                    <div class="top-pre-num-l">
+                        <p>支付金额(元)</p>
+                        <p class="n">{{ 1234567.89 }}</p>
+                    </div>
+                    <div class="top-pre-num-r">
+                        <img src="@/assets/images/agent/order_img3.png">
+                    </div>
+                </div>
+                <div class="top-pre-text adfac">
+                    <div class="tn half">基础版&nbsp;{{ 234 }}</div>
+                    <div class="tn half">专业版&nbsp;{{ 9870 }}</div>
+                </div>
+            </div>
+            <div class="top-pre">
+                <div class="top-pre-num adfacjb">
+                    <div class="top-pre-num-l">
+                        <p>专业版总销量（次数）</p>
+                        <p class="n">{{ 7289 }}</p>
+                    </div>
+                    <div class="top-pre-num-r">
+                        <img src="@/assets/images/agent/order_img4.png">
+                    </div>
+                </div>
+                <div class="top-pre-text adfac">
+                    <div class="tn half">待使用&nbsp;{{ 23 }}</div>
+                    <div class="tn half">已使用&nbsp;{{ 9 }}</div>
+                </div>
+            </div>
+            <div class="top-pre">
+                <div class="top-pre-num adfacjb">
+                    <div class="top-pre-num-l">
+                        <p>基础版总销量（次数）</p>
+                        <p class="n">{{ 4589 }}</p>
+                    </div>
+                    <div class="top-pre-num-r">
+                        <img src="@/assets/images/agent/order_img5.png">
+                    </div>
+                </div>
+                <div class="top-pre-text adfac">
+                    <div class="tn half">待使用&nbsp;{{ 123 }}</div>
+                    <div class="tn half">已使用&nbsp;{{ 19 }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="middle adfacjb">
+            <div class="box adffc">
+                <div class="box-title">订单统计</div>
+                <div class="box-echart">
+                    <div ref="ddtjRef" style="width: 100%; height: 100%;"></div>
+                </div>
+            </div>
+            <div class="box adffc">
+                <div class="box-title">支付人数</div>
+                <div class="box-echart">
+                    <div ref="zfrsRef" style="width: 100%; height: 100%;"></div>
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="date adfac">
+                <div class="date-pre" :class="{'active':didx==1}" @click="changeDate(1)">本周</div>
+                <div class="date-pre" :class="{'active':didx==2}" @click="changeDate(2)">本月</div>
+                <el-select v-model="queryDate" placeholder="自定义时间" @change="changeCusDate" style="width: 167px;">
+                    <el-option label="近10天" value="10"></el-option>
+                </el-select>
+            </div>
+            <div class="box adffc">
+                <div class="box-title">订单金额</div>
+                <div class="box-echart">
+                    <div ref="ddjeRef" style="width: 100%; height: 390px;"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup name="">
-    import { ref, getCurrentInstance } from 'vue'
+  import * as echarts from "echarts";
+    import { ref, getCurrentInstance, onMounted } from 'vue'
     const { proxy } = getCurrentInstance();
     
+    const didx = ref(1)
+    const queryDate = ref('')
+    const ddtjRef = ref(null)
+    const zfrsRef = ref(null)
+    const ddjeRef = ref(null)
+
+    const changeDate = (idx) => {
+        didx.value = idx
+    }
+    const changeCusDate = () => {
+        didx.value = ''
+    }
+
+    const initDdtjEcharts = () => {
+        const ddtjChart = echarts.init(ddtjRef.value)
+        let option = {
+            color: ['#33A7A7'],
+            xAxis: {
+                type: 'category',
+                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            grid: {
+                left: '1%',
+                right: '1%',
+                top: '10%',
+                bottom: '1%',
+                containLabel: true
+            },
+            series: [
+                {
+                data: [450, 700, 550, 820, 500, 900, 450],
+                type: 'line',
+                smooth: true,
+                lineStyle: {
+                    width: 3
+                },
+                showSymbol: false,
+                areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(51,167,167,.1)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(51,167,167,0)'
+                    }
+                    ])
+                },
+                }
+            ]
+        };
+        ddtjChart.setOption(option)
+    }
+    const initZfrsEcharts = () => {
+        const zfrsChart = echarts.init(zfrsRef.value)
+        let option = {
+            color: ['#33A7A7'],
+            xAxis: {
+                type: 'category',
+                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            grid: {
+                left: '1%',
+                right: '1%',
+                top: '10%',
+                bottom: '1%',
+                containLabel: true
+            },
+            series: [
+                {
+                data: [450, 700, 550, 820, 500, 900, 450],
+                type: 'line',
+                smooth: true,
+                lineStyle: {
+                    width: 3
+                },
+                showSymbol: false,
+                areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(51,167,167,.1)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(51,167,167,0)'
+                    }
+                    ])
+                },
+                }
+            ]
+        };
+        zfrsChart.setOption(option)
+    }
+    const initDdjeEcharts = () => {
+        const ddjeChart = echarts.init(ddjeRef.value)
+        let option = {
+            color: ['#33A7A7'],
+            xAxis: {
+                type: 'category',
+                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07','11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            grid: {
+                left: '1%',
+                right: '1%',
+                top: '10%',
+                bottom: '1%',
+                containLabel: true
+            },
+            series: [
+                {
+                data: [450, 700, 550, 820, 500, 900, 440, 450, 700, 550, 820, 500, 900, 440],
+                type: 'line',
+                smooth: true,
+                lineStyle: {
+                    width: 3
+                },
+                showSymbol: false,
+                areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(51,167,167,.1)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(51,167,167,0)'
+                    }
+                    ])
+                },
+                }
+            ]
+        };
+        ddjeChart.setOption(option)
+    }
+
+    onMounted(()=>{
+        initDdtjEcharts()
+        initZfrsEcharts()
+        initDdjeEcharts()
+        proxy.$nextTick(()=>{
+            
+        })
+    })
 </script>
 
 <style scoped lang="scss">
     .page{
         padding: 16px;
+        .top{
+            justify-content: space-between;
+            &-pre{
+                width: calc(20% - 9.6px);
+                background: #FFFFFF;
+                box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.06);
+                border-radius: 6px;
+                padding: 24px 20px;
+                box-sizing: border-box;
+                &-num{
+                    &-l{
+                        p{
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #335368;
+                            line-height: 14px;
+                            &.n{
+                                font-family: DINAlternate, DINAlternate;
+                                font-weight: bold;
+                                font-size: 28px;
+                                color: #002846;
+                                line-height: 28px;
+                                margin-top: 16px;
+                            }
+                        }
+                    }
+                    &-r{
+                        img{
+                            width: 60px;
+                            height: 60px;
+                        }
+                    }
+                }
+                &-text{
+                    margin-top: 16px;
+                    .tn{
+                        width: 100%;
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #667E90;
+                        line-height: 14px;
+                        &.half{
+                            width: 50%;
+                        }
+
+                    }
+                }
+            }
+        }
+        .box{
+            background: #FFFFFF;
+            box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.06);
+            border-radius: 6px;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        .box-title{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #002846;
+            line-height: 16px;
+        }
+        .box-echart{
+            flex: 1;
+            margin-top: 10px;
+        }
+        .middle{
+            margin-top: 16px;
+            .box{
+                width: calc(50% - 6px);
+                height: 390px;
+            }
+        }
+        .bottom{
+            margin-top: 16px;
+            position: relative;
+        }
+
+        .date{
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            &-pre{
+                width: 54px;
+                height: 40px;
+                border-radius: 6px;
+                border: 1px solid #DDE0E6;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #335368;
+                line-height: 40px;
+                text-align: center;
+                margin-right: 16px;
+                cursor: pointer;
+                &.active{
+                    background: rgba(51,167,167,0.08);
+                    border-radius: 6px;
+                    border: 1px solid #33A7A7;
+                    color: #009191;
+                }
+            }
+        }
     }
 </style>

src/views/pages/login.vue

@@ -296,7 +296,7 @@
             .l_btn{
                 margin-top: 48px;
                 height: 60px;
-                background: rgba(131, 52, 120, .4);
+                background: rgba(51,167,167, .4);
                 border-radius: 6px;
                 font-family: PingFang-SC, PingFang-SC;
                 font-weight: bold;
@@ -308,7 +308,7 @@
                 letter-spacing: 1px;
                 cursor: not-allowed;
                 &.active{
-                    background: rgba(131, 52, 120, 1);
+                    background: #33A7A7;
                     cursor: pointer;
                 }
             }