Authored by Zhang

样式修改 二维码模糊

@@ -4,19 +4,13 @@ @@ -4,19 +4,13 @@
4 <div class="describe"> 4 <div class="describe">
5 {{{activityDescribe}}} 5 {{{activityDescribe}}}
6 </div> 6 </div>
7 - <div class="title">  
8 - <span class="en-title">INVITATION QR CODE</span>  
9 - <span class="ch-title">方法一:扫描邀请二维码</span>  
10 - </div> 7 + <div class="title"></div>
11 <div class="code-outer"> 8 <div class="code-outer">
12 <div class="code-qr" qr-data="{{url}}"></div> 9 <div class="code-qr" qr-data="{{url}}"></div>
13 </div> 10 </div>
14 </div> 11 </div>
15 <div class="invite-code invitation"> 12 <div class="invite-code invitation">
16 - <div class="title color">  
17 - <span class="en-title">INVITATION CODE</span>  
18 - <span class="ch-title">方法二:使用邀请码</span>  
19 - </div> 13 + <div class="title"></div>
20 <div class="code-content"> 14 <div class="code-content">
21 <div class="invite-content"> 15 <div class="invite-content">
22 <span class="code">{{inviteCode}}</span> 16 <span class="code">{{inviteCode}}</span>
@@ -28,10 +22,7 @@ @@ -28,10 +22,7 @@
28 </div> 22 </div>
29 </div> 23 </div>
30 <div class="invite-link invitation"> 24 <div class="invite-link invitation">
31 - <div class="title color">  
32 - <span class="en-title">INVITATION LINK</span>  
33 - <span class="ch-title">方法三:使用邀请链接</span>  
34 - </div> 25 + <div class="title"></div>
35 <div class="code-content"> 26 <div class="code-content">
36 <div class="invite-content"> 27 <div class="invite-content">
37 <span class="code">{{url}}</span> 28 <span class="code">{{url}}</span>
@@ -11,11 +11,10 @@ @@ -11,11 +11,10 @@
11 </div> 11 </div>
12 <p class="detail"> 12 <p class="detail">
13 {{{activityRuleDesc}}} 13 {{{activityRuleDesc}}}
14 - {{!-- <span class="more">更多免责条款>></span> --}}  
15 </p> 14 </p>
16 </div> 15 </div>
17 <div class="reward-list"> 16 <div class="reward-list">
18 - <div class="list-item"> 17 + <div class="list-item list-title">
19 <span>我邀请的好友</span> 18 <span>我邀请的好友</span>
20 <span>首单购物金额</span> 19 <span>首单购物金额</span>
21 <span>我的奖励</span> 20 <span>我的奖励</span>
@@ -21,9 +21,9 @@ setTimeout(function() { @@ -21,9 +21,9 @@ setTimeout(function() {
21 width = $('.code-qr').css('width'); 21 width = $('.code-qr').css('width');
22 22
23 $('.code-qr').qrcode({ 23 $('.code-qr').qrcode({
24 - render: 'canvas', // 显示方式,canvas,image和div 24 + render: 'image', // 显示方式,canvas,image和div
25 text: text, // 二维码的内容 25 text: text, // 二维码的内容
26 - size: parseInt(width, 10), // 大小 26 + size: parseInt(width, 10) * 10, // 大小
27 ecLevel: 'L', // 纠错级别 27 ecLevel: 'L', // 纠错级别
28 background: '#fff' 28 background: '#fff'
29 }); 29 });
@@ -11,21 +11,20 @@ @@ -11,21 +11,20 @@
11 width: 100%; 11 width: 100%;
12 text-align: center; 12 text-align: center;
13 font-size: 38px; 13 font-size: 38px;
14 - margin: 30px auto; 14 + margin: 33px auto;
15 font-family: SourceHanSansCN; 15 font-family: SourceHanSansCN;
16 transform: rotate(-2.3deg); 16 transform: rotate(-2.3deg);
17 font-weight: 700; 17 font-weight: 700;
18 font-style: oblique; 18 font-style: oblique;
19 color: #000; 19 color: #000;
20 - line-height: 54px;  
21 - margin-left: 12px; 20 + line-height: 58px;
  21 + margin-left: 13px;
22 } 22 }
23 23
24 .code-outer { 24 .code-outer {
25 width: 140px; 25 width: 140px;
26 height: 140px; 26 height: 140px;
27 - border: 2px solid #000;  
28 - padding: 8px; 27 + padding: 10px;
29 background-color: #fff; 28 background-color: #fff;
30 margin: 16px 0 0 308px; 29 margin: 16px 0 0 308px;
31 } 30 }
@@ -37,27 +36,7 @@ @@ -37,27 +36,7 @@
37 } 36 }
38 37
39 .title { 38 .title {
40 - color: #fff;  
41 - font-family: SourceHanSansCN;  
42 - font-size: 23px;  
43 - width: 100%;  
44 -  
45 - .ch-title {  
46 - display: block;  
47 - line-height: 34px;  
48 - text-align: center;  
49 - font-weight: 700;  
50 - }  
51 -  
52 - .en-title {  
53 - font-size: 25px;  
54 - font-family: Avenir;  
55 - font-weight: 700;  
56 - display: block;  
57 - line-height: 34px;  
58 - text-align: center;  
59 - font-style: oblique;  
60 - } 39 + height: 60px;
61 } 40 }
62 41
63 .invitation { 42 .invitation {
@@ -128,7 +107,27 @@ @@ -128,7 +107,27 @@
128 } 107 }
129 } 108 }
130 109
131 - .color {  
132 - color: #000; 110 + .my-code {
  111 + .title {
  112 + background-image: resolve("activity/expand-new/invite-1.png");
  113 + background-size: 100%;
  114 + background-repeat: no-repeat;
  115 + }
  116 + }
  117 +
  118 + .invite-code {
  119 + .title {
  120 + background-image: resolve("activity/expand-new/invite-2.png");
  121 + background-size: 100%;
  122 + background-repeat: no-repeat;
  123 + }
  124 + }
  125 +
  126 + .invite-link {
  127 + .title {
  128 + background-image: resolve("activity/expand-new/invite-3.png");
  129 + background-size: 100%;
  130 + background-repeat: no-repeat;
  131 + }
133 } 132 }
134 } 133 }
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 height: 94px; 4 height: 94px;
5 line-height: 94px; 5 line-height: 94px;
6 padding: 0 30px; 6 padding: 0 30px;
  7 + font-weight: 700;
7 8
8 .state { 9 .state {
9 float: right; 10 float: right;
@@ -66,6 +67,10 @@ @@ -66,6 +67,10 @@
66 background-color: #fff; 67 background-color: #fff;
67 } 68 }
68 69
  70 + .list-title {
  71 + font-weight: 700;
  72 + }
  73 +
69 a { 74 a {
70 overflow: hidden; 75 overflow: hidden;
71 width: 100%; 76 width: 100%;