正在显示
9 个修改的文件
包含
490 行增加
和
5 行删除
img/goods_1.png
0 → 100644
59.2 KB
@@ -2,7 +2,153 @@ | @@ -2,7 +2,153 @@ | ||
2 | <view class='container'> | 2 | <view class='container'> |
3 | <view class='mid'> | 3 | <view class='mid'> |
4 | <view class='mid_item'> | 4 | <view class='mid_item'> |
5 | - | 5 | + <!-- 顶部 --> |
6 | + <view class='mid_item_top'> | ||
7 | + <!-- 左边 --> | ||
8 | + <view class='mid_item_top_left'> | ||
9 | + <view class='top_left_pic'> | ||
10 | + <image src='../../../img/goods_1.png'></image> | ||
11 | + </view> | ||
12 | + <view class='top_left_text'> | ||
13 | + 距结束23时59分 | ||
14 | + </view> | ||
15 | + </view> | ||
16 | + <!-- 右边 --> | ||
17 | + <view class='mid_item_top_right'> | ||
18 | + <!-- 右上 --> | ||
19 | + <view class='right_top'> | ||
20 | + <view class='right_top_lef'> | ||
21 | + 纯进口有机菜花 | ||
22 | + </view> | ||
23 | + <view class='right_top_rig'> | ||
24 | + 产地:智力 | ||
25 | + </view> | ||
26 | + </view> | ||
27 | + <!-- 右中1 --> | ||
28 | + <view class='right_mid'> | ||
29 | + <view class='right_mid_lef'> | ||
30 | + <view class='right_mid_lef_color'></view> | ||
31 | + </view> | ||
32 | + <view class='right_mid_rig'> | ||
33 | + 42% | ||
34 | + </view> | ||
35 | + </view> | ||
36 | + <!-- 右中2 --> | ||
37 | + <view class='right_text'> | ||
38 | + 已拼300份,目标500份 | ||
39 | + </view> | ||
40 | + <!-- 右下 --> | ||
41 | + <view class='right_bottom'> | ||
42 | + <!-- 右下左 --> | ||
43 | + <view class='right_bottom_lef'> | ||
44 | + <span class='RBM'>¥</span> | ||
45 | + <span class='number'>52/</span> | ||
46 | + <span class='text'>1磅1份</span> | ||
47 | + </view> | ||
48 | + <!-- 右下中 --> | ||
49 | + <view class='right_bottom_mid'> | ||
50 | + <view class='right_bottom_mid_t'> | ||
51 | + 40mm-50m | ||
52 | + </view> | ||
53 | + <view class='right_bottom_mid_b'> | ||
54 | + 番茄果径 | ||
55 | + </view> | ||
56 | + </view> | ||
57 | + <!-- 右下右 --> | ||
58 | + <view class='right_bottom_rig'> | ||
59 | + 立即参团 | ||
60 | + </view> | ||
61 | + </view> | ||
62 | + </view> | ||
63 | + | ||
64 | + | ||
65 | + </view> | ||
66 | + <view class='mid_item_bottom'> | ||
67 | + <view class='mid_item_bottom_left'> | ||
68 | + 经典推荐 | ||
69 | + </view> | ||
70 | + <!-- 竖线 --> | ||
71 | + <view class='mid_line'></view> | ||
72 | + <!-- 底部文本 --> | ||
73 | + <view class='mid_item_bottom_bot'> | ||
74 | + 智利进口,绿色健康,硕大饱满 | ||
75 | + </view> | ||
76 | + </view> | ||
77 | + </view> | ||
78 | + | ||
79 | + <view class='mid_item'> | ||
80 | + <!-- 顶部 --> | ||
81 | + <view class='mid_item_top'> | ||
82 | + <!-- 左边 --> | ||
83 | + <view class='mid_item_top_left'> | ||
84 | + <view class='top_left_pic'> | ||
85 | + <image src='../../../img/goods_1.png'></image> | ||
86 | + </view> | ||
87 | + <view class='top_left_text'> | ||
88 | + 距结束2时22分 | ||
89 | + </view> | ||
90 | + </view> | ||
91 | + <!-- 右边 --> | ||
92 | + <view class='mid_item_top_right'> | ||
93 | + <!-- 右上 --> | ||
94 | + <view class='right_top'> | ||
95 | + <view class='right_top_lef'> | ||
96 | + 纯进口有机菜花 | ||
97 | + </view> | ||
98 | + <view class='right_top_rig'> | ||
99 | + 产地:智力 | ||
100 | + </view> | ||
101 | + </view> | ||
102 | + <!-- 右中1 --> | ||
103 | + <view class='right_mid'> | ||
104 | + <view class='right_mid_lef'> | ||
105 | + <view class='right_mid_lef_color'></view> | ||
106 | + </view> | ||
107 | + <view class='right_mid_rig'> | ||
108 | + 42% | ||
109 | + </view> | ||
110 | + </view> | ||
111 | + <!-- 右中2 --> | ||
112 | + <view class='right_text'> | ||
113 | + 已拼300份,目标500份 | ||
114 | + </view> | ||
115 | + <!-- 右下 --> | ||
116 | + <view class='right_bottom'> | ||
117 | + <!-- 右下左 --> | ||
118 | + <view class='right_bottom_lef'> | ||
119 | + <span class='RBM'>¥</span> | ||
120 | + <span class='number'>52/</span> | ||
121 | + <span class='text'>1磅1份</span> | ||
122 | + </view> | ||
123 | + <!-- 右下中 --> | ||
124 | + <view class='right_bottom_mid'> | ||
125 | + <view class='right_bottom_mid_t'> | ||
126 | + 40mm-50m | ||
127 | + </view> | ||
128 | + <view class='right_bottom_mid_b'> | ||
129 | + 番茄果径 | ||
130 | + </view> | ||
131 | + </view> | ||
132 | + <!-- 右下右 --> | ||
133 | + <view class='right_bottom_rig'> | ||
134 | + 立即参团 | ||
135 | + </view> | ||
136 | + </view> | ||
137 | + </view> | ||
138 | + | ||
139 | + | ||
140 | + </view> | ||
141 | + <view class='mid_item_bottom'> | ||
142 | + <view class='mid_item_bottom_left'> | ||
143 | + 经典推荐 | ||
144 | + </view> | ||
145 | + <!-- 竖线 --> | ||
146 | + <view class='mid_line'></view> | ||
147 | + <!-- 底部文本 --> | ||
148 | + <view class='mid_item_bottom_bot'> | ||
149 | + 智利进口,绿色健康,硕大饱满 | ||
150 | + </view> | ||
151 | + </view> | ||
6 | </view> | 152 | </view> |
7 | </view> | 153 | </view> |
8 | </view> | 154 | </view> |
@@ -6,14 +6,202 @@ | @@ -6,14 +6,202 @@ | ||
6 | flex-flow: column; | 6 | flex-flow: column; |
7 | } | 7 | } |
8 | .mid{ | 8 | .mid{ |
9 | - margin-top: 32rpx; | 9 | + margin-top: 16rpx; |
10 | display: flex; | 10 | display: flex; |
11 | + flex-flow: column; | ||
11 | } | 12 | } |
12 | .mid_item{ | 13 | .mid_item{ |
14 | + margin-top: 16rpx; | ||
13 | width:688rpx; | 15 | width:688rpx; |
14 | - height:400rpx; | 16 | + /* height:400rpx; */ |
15 | background:rgba(249,250,252,1); | 17 | background:rgba(249,250,252,1); |
16 | opacity:1; | 18 | opacity:1; |
17 | border-radius:8rpx; | 19 | border-radius:8rpx; |
18 | display: flex; | 20 | display: flex; |
21 | + align-items: center; | ||
22 | + flex-flow: column; | ||
23 | + box-sizing: border-box; | ||
24 | + padding: 52rpx 16rpx 48rpx; | ||
25 | +} | ||
26 | +.mid_item_top{ | ||
27 | + display: flex; | ||
28 | + width: 100%; | ||
29 | +} | ||
30 | +.mid_item_top_left{ | ||
31 | + width:208rpx; | ||
32 | + height:208rpx; | ||
33 | + /* background:rgba(250,250,250,1); */ | ||
34 | + opacity:1; | ||
35 | + display: flex; | ||
36 | + flex-flow: column; | ||
37 | +} | ||
38 | +.top_left_pic{ | ||
39 | + width: 208rpx; | ||
40 | + height: 160rpx; | ||
41 | + display: flex; | ||
42 | +} | ||
43 | +.top_left_pic image{ | ||
44 | + width: 100%; | ||
45 | + height: 100%; | ||
46 | +} | ||
47 | +.top_left_text{ | ||
48 | + height:48rpx; | ||
49 | + background:rgba(251,4,4,1); | ||
50 | + opacity:0.2; | ||
51 | + text-align: center; | ||
52 | + font-size:24rpx; | ||
53 | + font-family:PingFang SC; | ||
54 | + font-weight:400; | ||
55 | + line-height:48rpx; | ||
56 | + color:rgba(255,255,255,1); | ||
57 | +} | ||
58 | +.mid_item_top_right{ | ||
59 | + width: 100%; | ||
60 | + margin-left: 14rpx; | ||
61 | +} | ||
62 | +.right_top{ | ||
63 | + display: flex; | ||
64 | + align-items: center; | ||
65 | + justify-content: space-between; | ||
66 | + margin-top: 20rpx; | ||
67 | +} | ||
68 | +.right_top_lef{ | ||
69 | + | ||
70 | + font-size:32rpx; | ||
71 | + font-family:PingFang SC; | ||
72 | + font-weight:600; | ||
73 | + color:rgba(51,51,51,1); | ||
74 | + opacity:1; | ||
75 | +} | ||
76 | +.right_top_rig{ | ||
77 | + | ||
78 | + font-size:22rpx; | ||
79 | + font-family:PingFang SC; | ||
80 | + font-weight:400; | ||
81 | + line-height:32rpx; | ||
82 | + color:rgba(204,204,204,1); | ||
83 | + opacity:1; | ||
84 | +} | ||
85 | +.right_mid{ | ||
86 | + margin-top: 16rpx; | ||
87 | + display: flex; | ||
88 | + align-items: center; | ||
89 | +} | ||
90 | +.right_mid_lef{ | ||
91 | + width:288rpx; | ||
92 | + height:16rpx; | ||
93 | + background:rgba(236,236,236,1); | ||
94 | + opacity:1; | ||
95 | + border-radius:8rpx; | ||
96 | +} | ||
97 | +.right_mid_lef_color{ | ||
98 | + width:206rpx; | ||
99 | + height:16rpx; | ||
100 | + background:rgba(181,222,150,1); | ||
101 | + opacity:1; | ||
102 | + border-radius:8rpx; | ||
103 | +} | ||
104 | +.right_mid_rig{ | ||
105 | + margin-left: 16rpx; | ||
106 | + font-size:24rpx; | ||
107 | + font-family:PingFang SC; | ||
108 | + font-weight:400; | ||
109 | + line-height:34rpx; | ||
110 | + color:rgba(181,222,150,1); | ||
111 | + opacity:1; | ||
112 | +} | ||
113 | +.right_text{ | ||
114 | + margin-top: 14rpx; | ||
115 | + font-size:22rpx; | ||
116 | + font-family:PingFang SC; | ||
117 | + font-weight:400; | ||
118 | + color:rgba(204,204,204,1); | ||
119 | + opacity:1; | ||
120 | +} | ||
121 | +.right_bottom{ | ||
122 | + display: flex; | ||
123 | + align-items: center; | ||
124 | + justify-content: space-between; | ||
125 | +} | ||
126 | +.RBM{ | ||
127 | + font-size: 22rpx; | ||
128 | + color: #ff0000; | ||
129 | +} | ||
130 | +.number{ | ||
131 | + font-size: 30rpx; | ||
132 | + color: #ff0000; | ||
133 | +} | ||
134 | +.text{ | ||
135 | + | ||
136 | + font-size:22rpx; | ||
137 | + font-family:PingFang SC; | ||
138 | + font-weight:400; | ||
139 | + line-height:32rpx; | ||
140 | + color:rgba(204,204,204,1); | ||
141 | + opacity:1; | ||
142 | +} | ||
143 | +.right_bottom_mid_t{ | ||
144 | + | ||
145 | + font-size:22rpx; | ||
146 | + font-family:PingFang SC; | ||
147 | + font-weight:400; | ||
148 | + color:rgba(51,51,51,1); | ||
149 | + opacity:1; | ||
150 | +} | ||
151 | +.right_bottom_mid_b{ | ||
152 | + font-size:18rpx; | ||
153 | + font-family:PingFang SC; | ||
154 | + font-weight:400; | ||
155 | + color:rgba(153,153,153,1); | ||
156 | + opacity:1; | ||
157 | +} | ||
158 | +.right_bottom_rig{ | ||
159 | + width:144rpx; | ||
160 | + height:48rpx; | ||
161 | + line-height: 48rpx; | ||
162 | + background:rgba(249,150,20,1); | ||
163 | + box-shadow:0rpx 2rpx 12rpx rgba(255,145,0,0.16); | ||
164 | + opacity:1; | ||
165 | + border-radius:24rpx; | ||
166 | + | ||
167 | + text-align: center; | ||
168 | + font-size:26rpx; | ||
169 | + font-family:PingFang SC; | ||
170 | + font-weight:400; | ||
171 | + color:rgba(255,255,255,1); | ||
172 | +} | ||
173 | +.mid_item_bottom{ | ||
174 | + margin-top: 32rpx; | ||
175 | + width:640rpx; | ||
176 | + height:80rpx; | ||
177 | + background:rgba(181,222,150,0.1); | ||
178 | + border-radius:16rpx; | ||
179 | + display: flex; | ||
180 | + align-items: center; | ||
181 | + box-sizing: border-box; | ||
182 | + padding: 0 32rpx; | ||
183 | +} | ||
184 | +.mid_item_bottom_left{ | ||
185 | + font-size:30rpx; | ||
186 | + font-family:汉真广标; | ||
187 | + font-weight:400; | ||
188 | + color:rgba(110,172,61,1); | ||
189 | + opacity:1; | ||
190 | + | ||
191 | +} | ||
192 | +.mid_line{ | ||
193 | + margin: 0 36rpx; | ||
194 | + width:2rpx; | ||
195 | + height:60rpx; | ||
196 | + background:rgba(181,222,150,1); | ||
197 | + opacity:1; | ||
198 | + border-radius:4rpx; | ||
199 | +} | ||
200 | +.mid_item_bottom_bot{ | ||
201 | + | ||
202 | + font-size:24rpx; | ||
203 | + font-family:PingFang SC; | ||
204 | + font-weight:400; | ||
205 | + color:rgba(153,153,153,1); | ||
206 | + opacity:1; | ||
19 | } | 207 | } |
pages/mine/myOrder/myOrder.js
0 → 100644
1 | +Page({ | ||
2 | + | ||
3 | + /** | ||
4 | + * 页面的初始数据 | ||
5 | + */ | ||
6 | + data: { | ||
7 | + navbar: [{ | ||
8 | + name: '全部' | ||
9 | + }, | ||
10 | + { | ||
11 | + name: '待付款' | ||
12 | + }, | ||
13 | + { | ||
14 | + name: '待拼团' | ||
15 | + }, | ||
16 | + { | ||
17 | + name: '代发货' | ||
18 | + }, | ||
19 | + { | ||
20 | + name: '待完成' | ||
21 | + }], | ||
22 | + currentTab: 0, | ||
23 | + }, | ||
24 | + | ||
25 | + /** | ||
26 | + * 生命周期函数--监听页面加载 | ||
27 | + */ | ||
28 | + onLoad: function (options) { | ||
29 | + | ||
30 | + }, | ||
31 | + navbarTap: function (e) { | ||
32 | + console.log(88) | ||
33 | + let that = this; | ||
34 | + this.setData({ | ||
35 | + currentTab: e.currentTarget.dataset.idx, | ||
36 | + }) | ||
37 | + }, | ||
38 | + /** | ||
39 | + * 生命周期函数--监听页面初次渲染完成 | ||
40 | + */ | ||
41 | + onReady: function () { | ||
42 | + | ||
43 | + }, | ||
44 | + | ||
45 | + /** | ||
46 | + * 生命周期函数--监听页面显示 | ||
47 | + */ | ||
48 | + onShow: function () { | ||
49 | + | ||
50 | + }, | ||
51 | + | ||
52 | + /** | ||
53 | + * 生命周期函数--监听页面隐藏 | ||
54 | + */ | ||
55 | + onHide: function () { | ||
56 | + | ||
57 | + }, | ||
58 | + | ||
59 | + /** | ||
60 | + * 生命周期函数--监听页面卸载 | ||
61 | + */ | ||
62 | + onUnload: function () { | ||
63 | + | ||
64 | + }, | ||
65 | + | ||
66 | + /** | ||
67 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
68 | + */ | ||
69 | + onPullDownRefresh: function () { | ||
70 | + | ||
71 | + }, | ||
72 | + | ||
73 | + /** | ||
74 | + * 页面上拉触底事件的处理函数 | ||
75 | + */ | ||
76 | + onReachBottom: function () { | ||
77 | + | ||
78 | + }, | ||
79 | + | ||
80 | + /** | ||
81 | + * 用户点击右上角分享 | ||
82 | + */ | ||
83 | + onShareAppMessage: function () { | ||
84 | + | ||
85 | + } | ||
86 | +}) |
pages/mine/myOrder/myOrder.json
0 → 100644
pages/mine/myOrder/myOrder.wxml
0 → 100644
1 | + | ||
2 | +<view class='container'> | ||
3 | + <!-- 顶部菜单栏 --> | ||
4 | + <!-- <view class='top'> | ||
5 | + <view class='top_item'></view> | ||
6 | + </view> --> | ||
7 | + | ||
8 | + <view class="nav mainindex_nav top"> | ||
9 | +<view wx:for="{{navbar}}" data-idx="{{index}}" class="nav_item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap" data-categoryid="{{item.id}}">{{item.name}} | ||
10 | + </view> | ||
11 | + </view> | ||
12 | + | ||
13 | + | ||
14 | +</view> |
pages/mine/myOrder/myOrder.wxss
0 → 100644
1 | +.container{ | ||
2 | + width: 750rpx; | ||
3 | + display: flex; | ||
4 | + flex-flow: column; | ||
5 | +} | ||
6 | +.top{ | ||
7 | + width: 750rpx; | ||
8 | + height: 80rpx; | ||
9 | + background: #6EAC3D; | ||
10 | + | ||
11 | + display: flex; | ||
12 | + align-items: center; | ||
13 | + font-size:28rpx; | ||
14 | + font-family:PingFang SC; | ||
15 | + font-weight:600; | ||
16 | + color:rgba(255,255,255,0.5); | ||
17 | + opacity:1; | ||
18 | + overflow-x: scroll; | ||
19 | +} | ||
20 | +.nav_item{ | ||
21 | + width: 200rpx; | ||
22 | + text-align: center; | ||
23 | +} | ||
24 | +.active{ | ||
25 | + color: #FFFFFF; | ||
26 | + position: relative; | ||
27 | +} | ||
28 | +.active:before{ | ||
29 | + content: ""; | ||
30 | + width:48rpx; | ||
31 | + height:4rpx; | ||
32 | + background:rgba(255,255,255,1); | ||
33 | + opacity:1; | ||
34 | + position: absolute; | ||
35 | + left: 0; | ||
36 | + right: 0; | ||
37 | + bottom: -20rpx; | ||
38 | + margin: 0 auto; | ||
39 | +} |
@@ -37,7 +37,7 @@ | @@ -37,7 +37,7 @@ | ||
37 | "list": [] | 37 | "list": [] |
38 | }, | 38 | }, |
39 | "miniprogram": { | 39 | "miniprogram": { |
40 | - "current": 3, | 40 | + "current": 4, |
41 | "list": [ | 41 | "list": [ |
42 | { | 42 | { |
43 | "id": -1, | 43 | "id": -1, |
@@ -64,6 +64,13 @@ | @@ -64,6 +64,13 @@ | ||
64 | "id": -1, | 64 | "id": -1, |
65 | "name": "收藏", | 65 | "name": "收藏", |
66 | "pathName": "pages/mine/collect/collect", | 66 | "pathName": "pages/mine/collect/collect", |
67 | + "query": "", | ||
68 | + "scene": null | ||
69 | + }, | ||
70 | + { | ||
71 | + "id": -1, | ||
72 | + "name": "我的订单", | ||
73 | + "pathName": "pages/mine/myOrder/myOrder", | ||
67 | "scene": null | 74 | "scene": null |
68 | } | 75 | } |
69 | ] | 76 | ] |
-
请 注册 或 登录 后发表评论