基础版本
Showing
14 changed files
with
209 additions
and
7 deletions
1 | { | 1 | { |
2 | "pages": [ | 2 | "pages": [ |
3 | "pages/gift-shop/gift-shop", | ||
3 | "pages/index/index", | 4 | "pages/index/index", |
4 | "pages/authorize/authorize", | 5 | "pages/authorize/authorize", |
5 | "pages/register/register", | 6 | "pages/register/register", |
6 | "pages/scan-result/scan-result", | 7 | "pages/scan-result/scan-result", |
7 | "pages/integral-detail/integral-detail", | 8 | "pages/integral-detail/integral-detail", |
8 | "pages/gift-shop/gift-shop", | ||
9 | "pages/gift-detail/gift-detail", | 9 | "pages/gift-detail/gift-detail", |
10 | "pages/address-management/address-management", | 10 | "pages/address-management/address-management", |
11 | "pages/address-edit/address-edit", | 11 | "pages/address-edit/address-edit", |
... | @@ -34,7 +34,8 @@ | ... | @@ -34,7 +34,8 @@ |
34 | "selectedColor": "#3680EB", | 34 | "selectedColor": "#3680EB", |
35 | "borderStyle": "black", | 35 | "borderStyle": "black", |
36 | "backgroundColor": "#ffffff", | 36 | "backgroundColor": "#ffffff", |
37 | "list": [{ | 37 | "list": [ |
38 | { | ||
38 | "pagePath": "pages/index/index", | 39 | "pagePath": "pages/index/index", |
39 | "iconPath": "image/tabbar/scan_bar.png", | 40 | "iconPath": "image/tabbar/scan_bar.png", |
40 | "selectedIconPath": "image/tabbar/scan_bar_selected.png", | 41 | "selectedIconPath": "image/tabbar/scan_bar_selected.png", | ... | ... |
1 | .demo-item{} |
1 | <view class="demo-item">demo-item</view> |
src/image/icon/icon_filter_down.png
0 → 100644
227 Bytes
src/image/icon/icon_filter_down_on.png
0 → 100644
191 Bytes
src/image/icon/icon_filter_up.png
0 → 100644
158 Bytes
src/image/icon/icon_filter_up_on.png
0 → 100644
223 Bytes
src/image/icon/icon_search.png
0 → 100644
1.33 KB
1 | @import '../../assets/scss/mixins'; | 1 | @import '../../assets/scss/mixins'; |
2 | @import '../../assets/scss/utils'; | 2 | @import '../../assets/scss/utils'; |
3 | 3 | ||
4 | $contentWidth:690px; | ||
5 | |||
4 | .page { | 6 | .page { |
5 | .bgc {} | 7 | .bgc { |
8 | background: #F8F8F8; | ||
9 | } | ||
6 | 10 | ||
7 | .bg {} | 11 | .bg {} |
8 | 12 | ||
9 | .main { | 13 | .main { |
14 | .top { | ||
15 | position: absolute; | ||
16 | width: 750px; | ||
17 | height: 110px; | ||
18 | background-color: #fff; | ||
19 | |||
20 | &-wrap { | ||
21 | position: relative; | ||
22 | width: $contentWidth; | ||
23 | height: 110px; | ||
24 | margin: 0 auto; | ||
25 | display: flex; | ||
26 | justify-content: space-between; | ||
27 | align-items: center; | ||
28 | } | ||
29 | |||
30 | .search { | ||
31 | width: 540px; | ||
32 | height: 76px; | ||
33 | background: #F8F8F8; | ||
34 | border-radius: 8px; | ||
35 | @extend .fcc; | ||
36 | |||
37 | .ipt { | ||
38 | font-size: 28px; | ||
39 | letter-spacing: 0; | ||
40 | @extend .bb; | ||
41 | padding: 0 20px; | ||
42 | width: 540px; | ||
43 | } | ||
44 | |||
45 | .icon { | ||
46 | width: 36px; | ||
47 | height: 36px; | ||
48 | margin-right: 20px; | ||
49 | } | ||
50 | } | ||
51 | |||
52 | .filter { | ||
53 | font-size: 28px; | ||
54 | color: #3680EB; | ||
55 | letter-spacing: 0; | ||
56 | @extend .fcc; | ||
57 | |||
58 | .icon-wrap { | ||
59 | margin-left: 4px; | ||
60 | |||
61 | .icon { | ||
62 | width: 12px; | ||
63 | height: 12px; | ||
64 | display: block; | ||
65 | margin: 4px 0; | ||
66 | } | ||
67 | } | ||
68 | } | ||
69 | } | ||
70 | |||
10 | .top-space { | 71 | .top-space { |
11 | height: 0px; | 72 | height: 116px; |
12 | } | 73 | } |
13 | 74 | ||
14 | .content { | 75 | .content { |
15 | position: relative; | 76 | position: relative; |
77 | |||
78 | .product { | ||
79 | width: $contentWidth; | ||
80 | margin: 0 auto; | ||
81 | |||
82 | &-item { | ||
83 | background: #fff; | ||
84 | width: $contentWidth; | ||
85 | height: 260px; | ||
86 | margin: 20px 0; | ||
87 | box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10); | ||
88 | border-radius: 8px; | ||
89 | @extend .bb; | ||
90 | padding: 30px; | ||
91 | display: flex; | ||
92 | justify-content: space-between; | ||
93 | |||
94 | .image-wrap { | ||
95 | width: 200px; | ||
96 | height: 200px; | ||
97 | .img {} | ||
98 | } | ||
99 | |||
100 | .cont { | ||
101 | position: relative; | ||
102 | flex: 1; | ||
103 | |||
104 | .name { | ||
105 | font-size: 32px; | ||
106 | color: #333333; | ||
107 | } | ||
108 | |||
109 | .desc { | ||
110 | font-size: 24px; | ||
111 | color: #999999; | ||
112 | margin-top: 12px; | ||
113 | } | ||
114 | |||
115 | .integral { | ||
116 | position: absolute; | ||
117 | bottom: 0; | ||
118 | left: 0; | ||
119 | font-size: 24px; | ||
120 | color: #FF7900; | ||
121 | } | ||
122 | |||
123 | .btn { | ||
124 | position: absolute; | ||
125 | bottom: 0; | ||
126 | right: 0; | ||
127 | |||
128 | width: 140px; | ||
129 | height: 64px; | ||
130 | line-height: 64px; | ||
131 | text-align: center; | ||
132 | color: #fff; | ||
133 | border-radius: 8px; | ||
134 | background: #3680EB; | ||
135 | font-size: 28px; | ||
136 | } | ||
137 | } | ||
138 | } | ||
139 | } | ||
16 | } | 140 | } |
17 | } | 141 | } |
18 | } | 142 | } | ... | ... |
... | @@ -2,7 +2,62 @@ | ... | @@ -2,7 +2,62 @@ |
2 | <view class="app__bgc bgc"></view> | 2 | <view class="app__bgc bgc"></view> |
3 | <view class="app__bg bg"></view> | 3 | <view class="app__bg bg"></view> |
4 | <view class="app__content main"> | 4 | <view class="app__content main"> |
5 | <view class="top"> | ||
6 | <div class="top-wrap"> | ||
7 | <view class="search"> | ||
8 | <input class="ipt" placeholder="输入关键字搜索" /> | ||
9 | <image class="icon" mode="aspectFit" src="../../image/icon/icon_search.png" /> | ||
10 | </view> | ||
11 | <view class="filter"> | ||
12 | 积分排序 | ||
13 | <view wx:if="{{1>0}}" class="icon-wrap"> | ||
14 | <image class="icon up" src="../../image/icon/icon_filter_up_on.png" mode="widthFix" /> | ||
15 | <image class="icon down" src="../../image/icon/icon_filter_down.png" mode="widthFix" /> | ||
16 | </view> | ||
17 | <view wx:else class="icon-wrap"> | ||
18 | <image class="icon up" src="../../image/icon/icon_filter_up.png" mode="widthFix" /> | ||
19 | <image class="icon down" src="../../image/icon/icon_filter_down_on.png" mode="widthFix" /> | ||
20 | </view> | ||
21 | </view> | ||
22 | </div> | ||
23 | </view> | ||
5 | <view class="top-space"></view> | 24 | <view class="top-space"></view> |
6 | <view class="content"></view> | 25 | <view class="content"> |
26 | <view class="product"> | ||
27 | <view class="product-item"> | ||
28 | <view class="image-wrap"> | ||
29 | <!-- <image /> --> | ||
30 | </view> | ||
31 | <view class="cont"> | ||
32 | <view class="name">某东购物卡200元</view> | ||
33 | <view class="desc">可在xx超市使用,可够买xxx</view> | ||
34 | <view class="integral">消耗积分:3000分</view> | ||
35 | <view class="btn">查看</view> | ||
36 | </view> | ||
37 | </view> | ||
38 | <view class="product-item"> | ||
39 | <view class="image-wrap"> | ||
40 | <!-- <image /> --> | ||
41 | </view> | ||
42 | <view class="cont"> | ||
43 | <view class="name">某东购物卡200元</view> | ||
44 | <view class="desc">可在xx超市使用,可够买xxx</view> | ||
45 | <view class="integral">消耗积分:3000分</view> | ||
46 | <view class="btn">查看</view> | ||
47 | </view> | ||
48 | </view> | ||
49 | <view class="product-item"> | ||
50 | <view class="image-wrap"> | ||
51 | <!-- <image /> --> | ||
52 | </view> | ||
53 | <view class="cont"> | ||
54 | <view class="name">某东购物卡200元</view> | ||
55 | <view class="desc">可在xx超市使用,可够买xxx</view> | ||
56 | <view class="integral">消耗积分:3000分</view> | ||
57 | <view class="btn">查看</view> | ||
58 | </view> | ||
59 | </view> | ||
60 | </view> | ||
61 | </view> | ||
7 | </view> | 62 | </view> |
8 | </view> | 63 | </view> | ... | ... |
-
Please register or sign in to post a comment