修改 红人店铺header UI review by hongmo
Showing
9 changed files
with
34 additions
and
18 deletions
@@ -120,7 +120,7 @@ export default class Header extends React.Component { | @@ -120,7 +120,7 @@ export default class Header extends React.Component { | ||
120 | let backgroundImage = data.shopBanner?data.shopBanner.module_data.data[0].pic:'null'; | 120 | let backgroundImage = data.shopBanner?data.shopBanner.module_data.data[0].pic:'null'; |
121 | let brandIcon = getSlicedUrl(data.shop_logo, 60, 60, 2); | 121 | let brandIcon = getSlicedUrl(data.shop_logo, 60, 60, 2); |
122 | let isFav = data.is_addFav; | 122 | let isFav = data.is_addFav; |
123 | - let favImage = isFav?require('../../image/heart_h.png'):require('../../image/heart_n.png'); | 123 | + let favImage = isFav?require('../../image/btn_gz_h.png'):require('../../image/btn_gz_n.png'); |
124 | //下拉图标 | 124 | //下拉图标 |
125 | let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png'); | 125 | let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png'); |
126 | //计算控件高度,图片+标题+简介+下拉图标+20空白 | 126 | //计算控件高度,图片+标题+简介+下拉图标+20空白 |
@@ -141,16 +141,19 @@ export default class Header extends React.Component { | @@ -141,16 +141,19 @@ export default class Header extends React.Component { | ||
141 | url={backgroundImage} | 141 | url={backgroundImage} |
142 | style={{width, height: imageHeigth }} | 142 | style={{width, height: imageHeigth }} |
143 | /> | 143 | /> |
144 | - | ||
145 | - <View style={styles.titleView}> | ||
146 | - <Text style={styles.name} numberOfLines={1}>{brandName}</Text> | 144 | + <View style={styles.maskView}/> |
145 | + <View style={styles.header}> | ||
146 | + <Text style={styles.number} numberOfLines={1}>{numberOfFav}</Text> | ||
147 | <TouchableOpacity activeOpacity={0.5} onPress={() => { | 147 | <TouchableOpacity activeOpacity={0.5} onPress={() => { |
148 | - this.props.onPressCollection && this.props.onPressCollection(isFav); | ||
149 | - }}> | 148 | + this.props.onPressCollection && this.props.onPressCollection(isFav); |
149 | + }}> | ||
150 | <Image source={favImage} style={styles.favImage}/> | 150 | <Image source={favImage} style={styles.favImage}/> |
151 | </TouchableOpacity> | 151 | </TouchableOpacity> |
152 | + </View> | ||
153 | + | ||
154 | + <View style={styles.titleView}> | ||
155 | + <Text style={styles.name} numberOfLines={1}>{brandName}</Text> | ||
152 | </View> | 156 | </View> |
153 | - <Text style={styles.number}>{numberOfFav}</Text> | ||
154 | 157 | ||
155 | <YH_Image | 158 | <YH_Image |
156 | url={brandIcon} | 159 | url={brandIcon} |
@@ -204,30 +207,43 @@ let styles = StyleSheet.create({ | @@ -204,30 +207,43 @@ let styles = StyleSheet.create({ | ||
204 | backgroundColor:'white', | 207 | backgroundColor:'white', |
205 | width: width, | 208 | width: width, |
206 | height: titleHeigth, | 209 | height: titleHeigth, |
207 | - justifyContent:'space-between', | 210 | + }, |
211 | + maskView: { | ||
212 | + width: width, | ||
213 | + height: imageHeigth, | ||
214 | + position: 'absolute', | ||
215 | + marginTop: -imageHeigth, | ||
216 | + backgroundColor: 'rgba(0,0,0,.2)' | ||
217 | + }, | ||
218 | + header: { | ||
219 | + justifyContent: 'flex-end', | ||
220 | + flexDirection: 'row', | ||
221 | + width: width, | ||
222 | + height: 25, | ||
223 | + position: 'absolute', | ||
224 | + marginTop: -35, | ||
225 | + backgroundColor: 'transparent', | ||
208 | }, | 226 | }, |
209 | name: { | 227 | name: { |
210 | marginLeft: 15 + 60 + 15, | 228 | marginLeft: 15 + 60 + 15, |
211 | backgroundColor: 'white', | 229 | backgroundColor: 'white', |
212 | - width: width-85-120, | 230 | + width: width-120, |
213 | marginTop: 22, | 231 | marginTop: 22, |
214 | color: '#444444', | 232 | color: '#444444', |
215 | fontWeight: 'bold', | 233 | fontWeight: 'bold', |
216 | fontSize: 16, | 234 | fontSize: 16, |
217 | }, | 235 | }, |
218 | number: { | 236 | number: { |
219 | - marginTop: - (60 - 22), | ||
220 | - color: '#444444', | 237 | + color: '#ffffff', |
221 | fontSize: 13, | 238 | fontSize: 13, |
222 | - backgroundColor: 'white', | ||
223 | - position: 'absolute', | ||
224 | - marginLeft: width - 15 - 60 - 15 - 17, | 239 | + marginRight: 10, |
240 | + marginTop: 8, | ||
241 | + backgroundColor: 'transparent', | ||
225 | }, | 242 | }, |
226 | favImage: { | 243 | favImage: { |
227 | - width: 17, | ||
228 | - height: 16, | ||
229 | - marginTop: 22, | ||
230 | - backgroundColor: 'white', | 244 | + width: 64, |
245 | + height: 25, | ||
246 | + backgroundColor: 'transparent', | ||
231 | marginRight: 15, | 247 | marginRight: 15, |
232 | }, | 248 | }, |
233 | text: { | 249 | text: { |
js/redPersonBrand/image/btn_gz_h@2x.png
0 → 100644
2.79 KB
js/redPersonBrand/image/btn_gz_h@3x.png
0 → 100644
5.51 KB
js/redPersonBrand/image/btn_gz_n@2x.png
0 → 100644
3.07 KB
js/redPersonBrand/image/btn_gz_n@3x.png
0 → 100644
8.88 KB
1.37 KB
1.64 KB
1.37 KB
1.63 KB
-
Please register or login to post a comment