Showing
7 changed files
with
38 additions
and
20 deletions
@@ -6,10 +6,10 @@ | @@ -6,10 +6,10 @@ | ||
6 | <hr class="box-entry-line"> | 6 | <hr class="box-entry-line"> |
7 | <div class="grade-bill-box"> | 7 | <div class="grade-bill-box"> |
8 | <div class="grade-level"> | 8 | <div class="grade-level"> |
9 | - 您当前的会员等级为:银卡会员 | 9 | + <span>您当前的会员等级为:银卡会员</span> |
10 | </div> | 10 | </div> |
11 | <div class="grade-bill-title"> | 11 | <div class="grade-bill-title"> |
12 | - 成长值来源 | 12 | + <span>成长值来源</span> |
13 | </div> | 13 | </div> |
14 | <div class="grade-bill-list"> | 14 | <div class="grade-bill-list"> |
15 | <div class="grade-bill"> | 15 | <div class="grade-bill"> |
public/img/activity/grade/BG@2x.png
0 → 100644
48.8 KB
public/img/activity/grade/mouthBG@2x.png
0 → 100644
507 Bytes
@@ -3,7 +3,6 @@ import $ from 'yoho-jquery'; | @@ -3,7 +3,6 @@ import $ from 'yoho-jquery'; | ||
3 | import echarts from 'echarts'; | 3 | import echarts from 'echarts'; |
4 | import Page from 'yoho-page'; | 4 | import Page from 'yoho-page'; |
5 | 5 | ||
6 | - | ||
7 | class GradeDetailPage extends Page { | 6 | class GradeDetailPage extends Page { |
8 | constructor() { | 7 | constructor() { |
9 | super(); | 8 | super(); |
@@ -16,16 +15,14 @@ class GradeDetailPage extends Page { | @@ -16,16 +15,14 @@ class GradeDetailPage extends Page { | ||
16 | 15 | ||
17 | let option = { | 16 | let option = { |
18 | backgroundColor: '#2d2d2d', | 17 | backgroundColor: '#2d2d2d', |
19 | - grid: { | ||
20 | - show: false | ||
21 | - }, | ||
22 | tooltip: { | 18 | tooltip: { |
23 | trigger: 'none' | 19 | trigger: 'none' |
24 | }, | 20 | }, |
25 | dataZoom: [{ | 21 | dataZoom: [{ |
26 | type: 'inside', | 22 | type: 'inside', |
27 | startValue: '2月', | 23 | startValue: '2月', |
28 | - endValue: '5月', | 24 | + endValue: '6月', |
25 | + zoomLock: true, | ||
29 | zoomOnMouseWheel: false, | 26 | zoomOnMouseWheel: false, |
30 | filterMode: 'none' | 27 | filterMode: 'none' |
31 | }], | 28 | }], |
@@ -42,48 +39,65 @@ class GradeDetailPage extends Page { | @@ -42,48 +39,65 @@ class GradeDetailPage extends Page { | ||
42 | value: '1月', | 39 | value: '1月', |
43 | textStyle: { | 40 | textStyle: { |
44 | color: '#fff', | 41 | color: '#fff', |
45 | - fontSize: 12 | 42 | + fontSize: 14 |
46 | } | 43 | } |
47 | }, { | 44 | }, { |
48 | value: '2月', | 45 | value: '2月', |
49 | textStyle: { | 46 | textStyle: { |
50 | color: '#fff', | 47 | color: '#fff', |
51 | - fontSize: 12 | 48 | + fontSize: 14 |
52 | } | 49 | } |
53 | }, { | 50 | }, { |
54 | value: '3月', | 51 | value: '3月', |
55 | textStyle: { | 52 | textStyle: { |
56 | color: '#fff', | 53 | color: '#fff', |
57 | - fontSize: 12 | 54 | + fontSize: 14 |
58 | } | 55 | } |
59 | }, { | 56 | }, { |
60 | value: '4月', | 57 | value: '4月', |
61 | textStyle: { | 58 | textStyle: { |
62 | color: '#fff', | 59 | color: '#fff', |
63 | - fontSize: 12 | 60 | + fontSize: 14 |
64 | } | 61 | } |
65 | }, { | 62 | }, { |
66 | value: '5月', | 63 | value: '5月', |
67 | textStyle: { | 64 | textStyle: { |
68 | - color: '#000', | ||
69 | - fontWeight: 'bold', | ||
70 | - fontSize: 18, | ||
71 | - backgroundColor: '#fff' | 65 | + color: '#fff', |
66 | + fontSize: 14 | ||
72 | } | 67 | } |
73 | }, { | 68 | }, { |
74 | value: '6月', | 69 | value: '6月', |
75 | textStyle: { | 70 | textStyle: { |
76 | - color: '#fff', | ||
77 | - fontSize: 12 | 71 | + color: '#000', |
72 | + fontSize: 18, | ||
73 | + backgroundColor: '#fff' | ||
78 | } | 74 | } |
79 | - }] | 75 | + }], |
76 | + | ||
77 | + // axisLabel: { | ||
78 | + // formatter: function(value) { | ||
79 | + // if (value === '6月') { | ||
80 | + // return '{current|6} {current|月}'; | ||
81 | + // } | ||
82 | + // }, | ||
83 | + // rich: { | ||
84 | + // normal: { | ||
85 | + // color: '#fff', | ||
86 | + // fontSize: 14 | ||
87 | + // }, | ||
88 | + // current: { | ||
89 | + // color: '#fff', | ||
90 | + // fontSize: 18 | ||
91 | + // } | ||
92 | + // } | ||
93 | + // } | ||
80 | }, | 94 | }, |
81 | yAxis: { | 95 | yAxis: { |
82 | type: 'value', | 96 | type: 'value', |
83 | show: false, | 97 | show: false, |
84 | }, | 98 | }, |
85 | series: [{ | 99 | series: [{ |
86 | - data: [820, 932, 901, 934, 1290, 1330, 1320], | 100 | + data: [820, 932, 901, 934, 1290, 1330], |
87 | color: ['#A59075'], | 101 | color: ['#A59075'], |
88 | symbol: 'circle', | 102 | symbol: 'circle', |
89 | symbolSize: 8, | 103 | symbolSize: 8, |
@@ -47,8 +47,12 @@ | @@ -47,8 +47,12 @@ | ||
47 | } | 47 | } |
48 | 48 | ||
49 | .grade-bill-title { | 49 | .grade-bill-title { |
50 | - text-align: center; | 50 | + display: flex; |
51 | + align-items: center; | ||
52 | + justify-content: center; | ||
51 | margin-top: 32px; | 53 | margin-top: 32px; |
54 | + height: 60px; | ||
55 | + background-image: resolve("activity/grade/BG@2x.png"); | ||
52 | } | 56 | } |
53 | 57 | ||
54 | .grade-bill-list > .grade-bill { | 58 | .grade-bill-list > .grade-bill { |
public/static/grade/BG@2x.png
0 → 100644
48.8 KB
public/static/grade/mouthBG@2x.png
0 → 100644
507 Bytes
-
Please register or login to post a comment