Showing
3 changed files
with
75 additions
and
66 deletions
1 | {{#showDownloadApp}} | 1 | {{#showDownloadApp}} |
2 | -<div class="float-layer" id="float-layer-app"> | 2 | +<div class="float-layer hide" id="float-layer-app"> |
3 | <div class="float-layer-left"> | 3 | <div class="float-layer-left"> |
4 | <span class="yoho-icon iconfont"></span> | 4 | <span class="yoho-icon iconfont"></span> |
5 | <p>新用户送惊喜礼包</p> | 5 | <p>新用户送惊喜礼包</p> |
@@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
8 | <i class="close-icon iconfont"></i> | 8 | <i class="close-icon iconfont"></i> |
9 | <div class="circle-rightbottom"></div> | 9 | <div class="circle-rightbottom"></div> |
10 | </a> | 10 | </a> |
11 | - <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho" id="float-layer-btn"> | 11 | + <a href="javascript:void(0);" id="float-layer-btn"> |
12 | 立即下载 | 12 | 立即下载 |
13 | </a> | 13 | </a> |
14 | </div> | 14 | </div> |
@@ -25,7 +25,7 @@ function getQueryString(name) { | @@ -25,7 +25,7 @@ function getQueryString(name) { | ||
25 | } | 25 | } |
26 | 26 | ||
27 | function downLoadApp() { | 27 | function downLoadApp() { |
28 | - var appUrl = 'http://union.yoho.cn/union/downapp.html'; | 28 | + var appUrl = 'http://www.yohoshow.com/about/index/yohobuyqr/'; |
29 | var clickedAt = new Date(); | 29 | var clickedAt = new Date(); |
30 | 30 | ||
31 | setTimeout(function() { | 31 | setTimeout(function() { |
@@ -55,74 +55,83 @@ | @@ -55,74 +55,83 @@ | ||
55 | } | 55 | } |
56 | 56 | ||
57 | .float-layer { | 57 | .float-layer { |
58 | - height: 128px; | ||
59 | - background: rgba(68, 68, 68, 0.95); | ||
60 | - position: fixed; | ||
61 | - width: 100%; | ||
62 | - bottom: 0; | ||
63 | - left: 0; | ||
64 | - z-index: 9999; | ||
65 | - padding: 20px 0; | ||
66 | - .float-layer-left { | ||
67 | - padding-left: 44px; | ||
68 | - overflow: hidden; | ||
69 | - float: left; | ||
70 | - img { | ||
71 | - height: 44px; | ||
72 | - float: left; | ||
73 | - margin-right: 20px; | ||
74 | - } | ||
75 | - p { | ||
76 | - float: left; | ||
77 | - font-size: 32px; | ||
78 | - height: 88px; | ||
79 | - line-height: 88px; | ||
80 | - color: white; | ||
81 | - } | ||
82 | - .yoho-icon { | ||
83 | - float: left; | ||
84 | - margin-right: 10px; | ||
85 | - font-size: 44px; | ||
86 | - line-height: 88px; | ||
87 | - width: 88px; | ||
88 | - height: 88px; | ||
89 | - text-align: center; | ||
90 | - color: #fff; | ||
91 | - border-radius: 20px; | ||
92 | - background-image: linear-gradient(#323232, #0f0f0f); | ||
93 | - } | ||
94 | - } | 58 | + height: 44PX; |
59 | + background: rgba(68, 68, 68, 0.95); | ||
60 | + position: fixed; | ||
61 | + width: 100%; | ||
62 | + bottom: 0; | ||
63 | + left: 0; | ||
64 | + z-index: 9999; | ||
65 | + padding: 10PX 0; | ||
66 | + box-sizing: content-box; | ||
67 | + | ||
68 | + .float-layer-left { | ||
69 | + padding-left: 22PX; | ||
70 | + overflow: hidden; | ||
71 | + float: left; | ||
72 | + | ||
73 | + img { | ||
74 | + height: 44PX; | ||
75 | + float: left; | ||
76 | + margin-right: 10PX; | ||
77 | + } | ||
78 | + | ||
79 | + p { | ||
80 | + float: left; | ||
81 | + font-size: 16PX; | ||
82 | + height: 44PX; | ||
83 | + line-height: 44PX; | ||
84 | + color: white; | ||
85 | + } | ||
86 | + | ||
87 | + .yoho-icon { | ||
88 | + float: left; | ||
89 | + margin-right: 10PX; | ||
90 | + font-size: 22PX; | ||
91 | + line-height: 44PX; | ||
92 | + width: 44PX; | ||
93 | + height: 44PX; | ||
94 | + text-align: center; | ||
95 | + color: #fff; | ||
96 | + border-radius: 10PX; | ||
97 | + background-image: linear-gradient(#323232, #0f0f0f); | ||
98 | + } | ||
99 | + } | ||
100 | + | ||
95 | } | 101 | } |
102 | + | ||
96 | #float-layer-close { | 103 | #float-layer-close { |
97 | - position: absolute; | ||
98 | - left: 0; | ||
99 | - top: 0; | ||
100 | - width: 100px; | ||
101 | - height: 100px; | ||
102 | - .close-icon { | ||
103 | position: absolute; | 104 | position: absolute; |
104 | left: 0; | 105 | left: 0; |
105 | top: 0; | 106 | top: 0; |
106 | - color: #C0C0C0; | ||
107 | - z-index: 2; | ||
108 | - } | 107 | + width: 50PX; |
108 | + height: 50PX; | ||
109 | + | ||
110 | + .close-icon { | ||
111 | + position: absolute; | ||
112 | + left: 0; | ||
113 | + top: 0; | ||
114 | + color: #C0C0C0; | ||
115 | + z-index: 2; | ||
116 | + } | ||
109 | } | 117 | } |
118 | + | ||
110 | #float-layer-btn { | 119 | #float-layer-btn { |
111 | - position: absolute; | ||
112 | - top: 50%; | ||
113 | - right: 15px; | ||
114 | - font-size: 32px; | ||
115 | - padding: 0 10px; | ||
116 | - height: 54px; | ||
117 | - line-height: 54px; | ||
118 | - background: white; | ||
119 | - border-radius: 5px; | ||
120 | - margin-top: -26px; | ||
121 | - -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); | ||
122 | - &:link, | ||
123 | - &:visited, | ||
124 | - &:hover, | ||
125 | - &:actived { | ||
126 | - color: #000; | ||
127 | - } | 120 | + position: absolute; |
121 | + top: 50%; | ||
122 | + right: 15PX; | ||
123 | + font-size: 16PX; | ||
124 | + padding: 0 10PX; | ||
125 | + height: 27PX; | ||
126 | + line-height: 27PX; | ||
127 | + background: white; | ||
128 | + border-radius: 5PX; | ||
129 | + margin-top: -13PX; | ||
130 | + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); | ||
131 | + &:link, | ||
132 | + &:visited, | ||
133 | + &:hover, | ||
134 | + &:actived { | ||
135 | + color: #000; | ||
136 | + } | ||
128 | } | 137 | } |
-
Please register or login to post a comment