base-style

+class Grade {
+    detail(req, res) {
+        res.render('grade/detail', {
+            module: 'activity',
+            page: 'grade-detail',
+            localCss: true
+        });
+    }
+}
+
+module.exports = new Grade();

@@ -59,6 +59,8 @@ const storeHome = require(`${cRoot}/store-home`);
 
 const couponList = require(`${cRoot}/coupon-list`);
 
+const grade = require(`${cRoot}/grade`);
+
 const disableBFCache = require('../../doraemon/middleware/disable-BFCache');
 
 // routers
@@ -312,4 +314,6 @@ router.get('/coupon-list', auth, couponList.index); // 优惠券领取页
 router.get('/coupon-list/receive', couponList.receive); // 个人优惠券领取
 router.get('/coupon-list/receiveAll', couponList.receiveAll); // 全场优惠券领取
 
+router.get('/grade/detail', auth, grade.detail); // 成长值明细
+
 module.exports = router;

+<div class="grade-detail-page">
+    <div id="gradeGraph" class="grade-graph"></div>
+    <div class="grade-detail-area">
+        <div class="box-entry">
+        </div>
+        <hr class="box-entry-line">
+        <div class="grade-bill-box">
+            <div class="grade-level">
+                您当前的会员等级为：银卡会员
+            </div>
+            <div class="grade-bill-title">
+                成长值来源
+            </div>
+            <div class="grade-bill-list">
+                <div class="grade-bill">
+                    <div class="grade-bill-left">
+                        <div class="order">订单22423498</div>
+                        <div class="time">2018-02-22 18:32:32</div>
+                    </div>
+                    <div class="grade-bill-right">
+                        <span>+80</span>
+                    </div>
+                </div>
+                <div class="grade-bill">
+                    <div class="grade-bill-left">
+                        <div class="order">订单22423498</div>
+                        <div class="time">2018-02-22 18:32:32</div>
+                    </div>
+                    <div class="grade-bill-right">
+                        <span>+80</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+import 'activity/grade-detail.page.css';
+import $ from 'yoho-jquery';
+import echarts from 'echarts';
+import Page from 'yoho-page';
+
+
+class GradeDetailPage extends Page {
+    constructor() {
+        super();
+
+        this.view = {
+            gradeGraph: $('#gradeGraph')
+        };
+
+        this.eGadeGraph = echarts.init(this.view.gradeGraph[0]);
+
+        let option = {
+            backgroundColor: '#2d2d2d',
+            grid: {
+                show: false
+            },
+            tooltip: {
+                trigger: 'none'
+            },
+            dataZoom: [{
+                type: 'inside',
+                startValue: '2月',
+                endValue: '5月',
+                zoomOnMouseWheel: false,
+                filterMode: 'none'
+            }],
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                data: [{
+                    value: '1月',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                }, {
+                    value: '2月',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                }, {
+                    value: '3月',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                }, {
+                    value: '4月',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                }, {
+                    value: '5月',
+                    textStyle: {
+                        color: '#000',
+                        fontWeight: 'bold',
+                        fontSize: 18,
+                        backgroundColor: '#fff'
+                    }
+                }, {
+                    value: '6月',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                }]
+            },
+            yAxis: {
+                type: 'value',
+                show: false,
+            },
+            series: [{
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                color: ['#A59075'],
+                symbol: 'circle',
+                symbolSize: 8,
+                type: 'line',
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'top'
+                    }
+                },
+            }]
+        };
+
+        this.eGadeGraph.setOption(option);
+
+        this.eGadeGraph.on('click', event => {
+            console.log('当前是：' + event.name);
+        });
+    }
+}
+
+export default new GradeDetailPage();

+.grade-detail-page {
+    .grade-graph {
+        width: 100%;
+        height: 500px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .grade-detail-area {
+        margin-top: 32px;
+    }
+
+    .box-entry {
+        width: 580px;
+        height: 42px;
+        margin-left: auto;
+        margin-right: auto;
+        background-color: #222;
+        border: 4px solid #000;
+        border-radius: 21px;
+    }
+
+    .box-entry-line {
+        margin-top: -21px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 520px;
+        height: 1px;
+        border: none;
+        border-top: 1px solid #000;
+    }
+
+    .grade-bill-box {
+        margin-top: -12px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 480px;
+        height: 750px;
+        box-shadow: 0 16px 16px 0 #ddd;
+        background: #fff;
+        border: none;
+        padding-top: 32px;
+        color: #444;
+
+        .grade-level {
+            text-align: center;
+        }
+
+        .grade-bill-title {
+            text-align: center;
+            margin-top: 32px;
+        }
+
+        .grade-bill-list > .grade-bill {
+            padding: 5px 16px;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #eee;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .grade-bill-left > .order {
+                font-size: 16px;
+            }
+
+            .grade-bill-left > .time {
+                font-size: 14px;
+                font-weight: 300;
+            }
+
+            .grade-bill-right {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                font-weight: 300;
+                color: #ccc;
+            }
+        }
+    }
+}