Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
9b2edcb6 by simon
Options

默认提交

1 parent 4f2b2e5e
Inline Side-by-side
Showing 16 changed files with 470 additions and 39 deletions
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 "pages/index/index", 3 "pages/index/index",
4 "pages/detail/detail", 4 "pages/detail/detail",
5 "pages/personal-list/personal-list", 5 "pages/personal-list/personal-list",
6 "pages/reward-completed/reward-completed",
6 "pages/more/more", 7 "pages/more/more",
7 "pages/poster-example/poster-example", 8 "pages/poster-example/poster-example",
8 "pages/authorize/authorize", 9 "pages/authorize/authorize",
......
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
28 // text-align: center; 28 // text-align: center;
29 box-sizing: border-box; 29 box-sizing: border-box;
30 font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0; 30 font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
31 color: #333333;
31 } 32 }
32 33
33 button::after { 34 button::after {
......
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
5 z-index: 91; 5 z-index: 91;
6 color: #ffffff; 6 color: #ffffff;
7 7
8 $btnSize: 80px; 8 $btnSize: 100px;
9 9
10 .btn { 10 .btn {
11 width: $btnSize; 11 width: $btnSize;
12 height: $btnSize; 12 height: $btnSize;
13 margin-bottom: 24px; 13 margin-bottom: 32px;
14 border-radius: $btnSize; 14 border-radius: $btnSize;
15 display: flex; 15 display: flex;
16 justify-content: center; 16 justify-content: center;
...@@ -19,6 +19,6 @@ ...@@ -19,6 +19,6 @@
19 } 19 }
20 20
21 .iconfont { 21 .iconfont {
22 font-size: 48px; 22 font-size: 64px;
23 } 23 }
24 } 24 }
......
...@@ -11,7 +11,7 @@ Page({ ...@@ -11,7 +11,7 @@ Page({
11 size: 10, 11 size: 10,
12 productList: [], // 产品列表 12 productList: [], // 产品列表
13 indexInfo: {}, 13 indexInfo: {},
14 userInfo: {}, 14 userInfo: {}
15 }, 15 },
16 onShareAppMessage() {}, 16 onShareAppMessage() {},
17 showAuth() { 17 showAuth() {
......
1 { 1 {
2 "navigationBarTitleText": ""
3 } 2 }
......
...@@ -77,9 +77,9 @@ ...@@ -77,9 +77,9 @@
77 flex: 1; 77 flex: 1;
78 78
79 .portrait { 79 .portrait {
80 width: 72px; 80 width: 92px;
81 height: 72px; 81 height: 92px;
82 border-radius: 72px; 82 border-radius: 92px;
83 } 83 }
84 84
85 .desc { 85 .desc {
...@@ -95,11 +95,11 @@ ...@@ -95,11 +95,11 @@
95 } 95 }
96 96
97 .name { 97 .name {
98 font-size: 28px; 98 font-size: 36px;
99 } 99 }
100 100
101 .num { 101 .num {
102 font-size: 24px; 102 font-size: 32px;
103 color: #8d8d8d; 103 color: #8d8d8d;
104 } 104 }
105 } 105 }
...@@ -111,9 +111,9 @@ ...@@ -111,9 +111,9 @@
111 111
112 .btn { 112 .btn {
113 margin-right: 24px; 113 margin-right: 24px;
114 width: 180px; 114 width: 200px;
115 height: 68px; 115 height: 80px;
116 font-size: 24px; 116 font-size: 32px;
117 background-color: #3ec03c; 117 background-color: #3ec03c;
118 border-radius: 8px; 118 border-radius: 8px;
119 display: flex; 119 display: flex;
...@@ -148,13 +148,18 @@ ...@@ -148,13 +148,18 @@
148 .fc-tit { 148 .fc-tit {
149 @extend .bb; 149 @extend .bb;
150 padding: 0 24px; 150 padding: 0 24px;
151 font-size: 36px;
152 margin: 0px auto 24px;
151 } 153 }
152 154
153 // 广告 155 // 广告
154 .ad {} 156 .ad {}
155 157
156 // 装饰物  158 // 装饰物 
157 .decoration {} 159 .decoration {
160 margin: 30px auto 0px;
161 text-align: center;
162 }
158 163
159 // 更多推荐 164 // 更多推荐
160 .more { 165 .more {
...@@ -195,4 +200,25 @@ ...@@ -195,4 +200,25 @@
195 } 200 }
196 } 201 }
197 } 202 }
203
204
205 // 返回首页按钮
206 .index-btn {
207 margin: 60px auto 0;
208 width: 320px;
209 height: 88px;
210 font-size: 36px;
211 font-weight: bold;
212 background-color: #3ec03c;
213 border-radius: 8px;
214 display: flex;
215 justify-content: center;
216 align-items: center;
217 color: #ffffff;
218
219 .iconfont {
220 font-size: 48px;
221 margin-right: 12px;
222 }
223 }
198 } 224 }
......
...@@ -31,18 +31,19 @@ ...@@ -31,18 +31,19 @@
31 <view class="btn btn2"> 31 <view class="btn btn2">
32 <span>更多推荐</span> 32 <span>更多推荐</span>
33 </view> 33 </view>
34 <view class="btn"> 34 <!-- <view class="btn">
35 <span class="t1 iconfont iconhome"></span> 35 <span class="t1 iconfont iconhome"></span>
36 <span>返回首页</span> 36 <span>返回首页</span>
37 </view> 37 </view> -->
38 </view> 38 </view>
39 </view> 39 </view>
40 <!-- 功能区小标题 --> 40 <!-- 功能区小标题 -->
41 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view> 41 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
42 <!-- 广告 --> 42 <!-- 广告 -->
43 <view class="ad"></view>
44 <!-- 装饰物 --> 43 <!-- 装饰物 -->
45 <view class="decoration"></view> 44 <view class="decoration">
45 <image mode="widthFix" src="../../image/detail/decoration_c1.png" />
46 </view>
46 <!-- 更多推荐 --> 47 <!-- 更多推荐 -->
47 <view class="more"> 48 <view class="more">
48 <view class="more-title">-- 更多推荐欣赏 --</view> 49 <view class="more-title">-- 更多推荐欣赏 --</view>
...@@ -53,6 +54,11 @@ ...@@ -53,6 +54,11 @@
53 </view> 54 </view>
54 </view> 55 </view>
55 </view> 56 </view>
57 <!-- 返回首页按钮 -->
58 <view class="index-btn">
59 <span class="t1 iconfont iconhome"></span>
60 <span>返回首页</span>
61 </view>
56 </view> 62 </view>
57 </view> 63 </view>
58 </view> 64 </view>
......
...@@ -47,13 +47,14 @@ ...@@ -47,13 +47,14 @@
47 } 47 }
48 48
49 .tit { 49 .tit {
50 font-size: 34px;
51 height: 80px;
52 line-height: 80px;
50 color: #ffffff; 53 color: #ffffff;
51 @extend .bb; 54 @extend .bb;
52 padding: 0 24px; 55 padding: 0 24px;
53 position: absolute; 56 position: absolute;
54 width: 100%; 57 width: 100%;
55 height: 64px;
56 line-height: 64px;
57 bottom: 0; 58 bottom: 0;
58 background-color: rgba($color: #000000, $alpha: 0.6); 59 background-color: rgba($color: #000000, $alpha: 0.6);
59 @include border-top-radius(8px); 60 @include border-top-radius(8px);
...@@ -65,7 +66,7 @@ ...@@ -65,7 +66,7 @@
65 &-func { 66 &-func {
66 @extend .bb; 67 @extend .bb;
67 padding: 24px 24px; 68 padding: 24px 24px;
68 height: 80px; 69 height: 120px;
69 display: flex; 70 display: flex;
70 justify-content: space-between; 71 justify-content: space-between;
71 align-items: center; 72 align-items: center;
...@@ -75,30 +76,31 @@ ...@@ -75,30 +76,31 @@
75 align-items: center; 76 align-items: center;
76 77
77 .portrait { 78 .portrait {
78 width: 48px; 79 width: 72px;
79 height: 48px; 80 height: 72px;
80 border-radius: 48px; 81 border-radius: 48px;
81 } 82 }
82 83
83 .name { 84 .name {
84 padding-left: 12px; 85 padding-left: 24px;
86 font-size: 32px;
87 @include ellipsis(1);
85 } 88 }
86 } 89 }
87 90
88 .share { 91 .share {
89 font-size: 24px; 92 font-size: 30px;
90 display: flex; 93 display: flex;
91 justify-content: center; 94 justify-content: center;
92 align-items: center; 95 align-items: center;
93 // width: 132px; 96 height: 64px;
94 height: 48px;
95 color: #ffffff; 97 color: #ffffff;
96 background-color: #3ec03c; 98 background-color: #3ec03c;
97 border-radius: 8px; 99 border-radius: 8px;
98 margin: 0; 100 margin: 0;
99 101
100 .iconfont { 102 .iconfont {
101 font-size: 32px; 103 font-size: 40px;
102 } 104 }
103 105
104 .t1 { 106 .t1 {
......
...@@ -72,13 +72,14 @@ ...@@ -72,13 +72,14 @@
72 } 72 }
73 73
74 .tit { 74 .tit {
75 font-size: 34px;
76 height: 80px;
77 line-height: 80px;
75 color: #ffffff; 78 color: #ffffff;
76 @extend .bb; 79 @extend .bb;
77 padding: 0 24px; 80 padding: 0 24px;
78 position: absolute; 81 position: absolute;
79 width: 100%; 82 width: 100%;
80 height: 64px;
81 line-height: 64px;
82 bottom: 0; 83 bottom: 0;
83 background-color: rgba($color: #000000, $alpha: 0.6); 84 background-color: rgba($color: #000000, $alpha: 0.6);
84 @include border-top-radius(8px); 85 @include border-top-radius(8px);
...@@ -90,7 +91,7 @@ ...@@ -90,7 +91,7 @@
90 &-func { 91 &-func {
91 @extend .bb; 92 @extend .bb;
92 padding: 24px 24px; 93 padding: 24px 24px;
93 height: 80px; 94 height: 120px;
94 display: flex; 95 display: flex;
95 justify-content: space-between; 96 justify-content: space-between;
96 align-items: center; 97 align-items: center;
...@@ -100,30 +101,31 @@ ...@@ -100,30 +101,31 @@
100 align-items: center; 101 align-items: center;
101 102
102 .portrait { 103 .portrait {
103 width: 48px; 104 width: 72px;
104 height: 48px; 105 height: 72px;
105 border-radius: 48px; 106 border-radius: 48px;
106 } 107 }
107 108
108 .name { 109 .name {
109 padding-left: 12px; 110 padding-left: 24px;
111 font-size: 32px;
112 @include ellipsis(1);
110 } 113 }
111 } 114 }
112 115
113 .share { 116 .share {
114 font-size: 24px; 117 font-size: 30px;
115 display: flex; 118 display: flex;
116 justify-content: center; 119 justify-content: center;
117 align-items: center; 120 align-items: center;
118 // width: 132px; 121 height: 64px;
119 height: 48px;
120 color: #ffffff; 122 color: #ffffff;
121 background-color: #3ec03c; 123 background-color: #3ec03c;
122 border-radius: 8px; 124 border-radius: 8px;
123 margin: 0; 125 margin: 0;
124 126
125 .iconfont { 127 .iconfont {
126 font-size: 32px; 128 font-size: 40px;
127 } 129 }
128 130
129 .t1 { 131 .t1 {
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg"></view>
4 <!-- <view class="app__top-shadow"></view> --> 4 <!-- <view class="app__top-shadow"></view> -->
5 <view class="app__content main"> 5 <view class="app__content main">
6 <view class="top-space"></view>
7 <view class="personal"> 6 <view class="personal">
7 <view class="top-space"></view>
8 <view class="name">我爱我家 的视频列表</view> 8 <view class="name">我爱我家 的视频列表</view>
9 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> 9 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
10 </view> 10 </view>
......
1 import {
2 getBindtapData
3 } from '../../utils/util';
4
5 let app = getApp();
6 Page({
7 data: {
8 authorizeVisible: false,
9 total: 0,
10 page: 1,
11 size: 10,
12 productList: [], // 产品列表
13 indexInfo: {},
14 userInfo: {}
15 },
16 onShareAppMessage() {},
17 showAuth() {
18 this.setData({
19 authorizeVisible: true
20 })
21 },
22 onLoad(options) {},
23
24 /**
25 * 基础方法
26 * 授权完毕重拉数据用
27 */
28 initData() {
29
30 },
31 /**
32 * 到达底部
33 * 做加载更多操作
34 */
35 onReachBottom() {
36 return;
37 if (this.data.dataList.length < this.data.total) {
38 this.setData({
39 page: this.data.page + 1
40 });
41 // this.queryDataList();
42 }
43 },
44
45 // 重置页面列表 点击搜索条件时需要
46 resetPage() {
47 this.setData({
48 page: 1,
49 dataList: []
50 })
51 },
52
53
54 /**
55 * 到个人列表页面
56 */
57 toPersonalList() {
58 app.router.push({
59 path: "personalList",
60 })
61 },
62
63 /**
64 * 请求DataList
65 */
66 queryDataList() {
67 return;
68 return new Promise((resolve, reject) => {
69 app.post({
70 sid: false,
71 url: app.api.dataList,
72 data: {
73 page: this.data.page,
74 size: this.data.size,
75 },
76 }).then((result) => {
77 let dataList = result.list;
78 dataList = this.data.dataList.concat(dataList);
79 this.setData({
80 dataList: dataList,
81 total: result.total
82 })
83 resolve();
84 })
85 });
86 },
87
88 /**
89 * 隐藏蒙层
90 */
91 hideMask() {
92 this.setData({
93 productDetailVisible: false,
94 authorizeVisible: false,
95 })
96 },
97 /**
98 * 子组件事件
99 * @param {*} evt
100 */
101 evtcomp(evt) {
102 let {
103 name,
104 data
105 } = evt.detail;
106 switch (name) {
107
108 // 隐藏蒙层
109 case "_evt_hide_mask":
110 this.hideMask();
111 break;
112
113 /**
114 * 重拉数据已在
115 */
116 case "_evt_auth_complete":
117 // this.initData();
118 this.hideMask();
119 break;
120
121 default:
122 break;
123 }
124 },
125 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .page {
5 padding-bottom: $pageBottom;
6
7 .bgc {}
8
9 .bg {}
10
11 .main {
12 .top-space {
13 height: 36px;
14 }
15
16 .content {
17 position: relative;
18 }
19 }
20
21 // 视频详情
22 .reward {
23 text-align: center;
24
25 .tips {
26 font-weight: bold;
27 text-align: center;
28 display: block;
29 }
30
31 .tips1 {
32 font-size: 42px;
33 color: #a44829;
34 }
35
36 .tips2 {
37 margin: 16px auto 0;
38 font-size: 38px;
39 color: #4a4a4a;
40 }
41
42 .vid {
43 margin: 24px auto 0;
44 width: 640px;
45 border-radius: 16px;
46 }
47 }
48
49
50 // 功能区，显示用户信息等
51 .func {
52 position: relative;
53 @extend .bb;
54 padding: 24px 24px;
55 display: flex;
56 justify-content: space-between;
57 align-items: center;
58
59 .user {
60 display: flex;
61 align-items: center;
62 flex: 1;
63
64 .portrait {
65 width: 92px;
66 height: 92px;
67 border-radius: 92px;
68 }
69
70 .desc {
71 @extend .bb;
72 padding-left: 24px;
73 display: flex;
74 align-items: center;
75 align-content: center;
76 flex-wrap: wrap;
77
78 .t1 {
79 width: 100%;
80 }
81
82 .name {
83 font-size: 36px;
84 }
85
86 .num {
87 font-size: 32px;
88 color: #8d8d8d;
89 }
90 }
91
92 }
93
94 .btn-wrap {
95 display: flex;
96
97 .btn {
98 margin-right: 24px;
99 width: 200px;
100 height: 80px;
101 font-size: 32px;
102 background-color: #3ec03c;
103 border-radius: 8px;
104 display: flex;
105 justify-content: center;
106 align-items: center;
107 color: #ffffff;
108
109 .iconfont {
110 font-size: 32px;
111 }
112
113 .t1 {
114 padding: 0 6px;
115 }
116
117 &:last-child {
118 margin-right: 0;
119 }
120 }
121
122 .btn2 {
123 background-color: #fecd9f;
124 color: #7f776e;
125 }
126
127
128 }
129
130 }
131
132 // 功能区小标题
133 .fc-tit {
134 @extend .bb;
135 padding: 0 24px;
136 font-size: 36px;
137 margin: 0px auto 24px;
138 }
139
140 // 广告
141 .ad {}
142
143 // 装饰物 
144 .decoration {
145 margin: 30px auto 0px;
146 text-align: center;
147 }
148
149 // 更多推荐
150 .more {
151 width: $contentWidth;
152 margin: 64px auto 0;
153
154 &-title {
155 color: #a2242e;
156 font-size: 48px;
157 font-weight: bold;
158 text-align: center;
159 }
160
161 // 推荐列表
162 &-list {
163 margin: 36px auto 0;
164
165 &-item {
166 display: flex;
167 justify-content: space-between;
168 border-bottom: solid 2px #dfdfdf;
169 padding: 24px 0;
170
171 .tit {
172 @extend .bb;
173 padding: 24px 0;
174 height: 230px;
175 flex: 1;
176 font-size: 36px;
177 @include ellipsis(4);
178 }
179
180 .poster {
181 width: 350px;
182 height: 230px;
183 border-radius: 8px;
184 }
185 }
186 }
187 }
188
189 // 返回首页按钮
190 .index-btn {
191 margin: 60px auto 0;
192 width: 320px;
193 height: 88px;
194 font-size: 36px;
195 font-weight: bold;
196 background-color: #3ec03c;
197 border-radius: 8px;
198 display: flex;
199 justify-content: center;
200 align-items: center;
201 color: #ffffff;
202
203 .iconfont {
204 font-size: 48px;
205 margin-right: 12px;
206 }
207 }
208 }
1 <view class="page">
2 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view>
4 <view class="app__content main">
5 <view class="top-space"></view>
6 <view class="content">
7 <!-- 赞赏成功提示 -->
8 <view class="reward">
9 <text class="tips tips1">赞赏成功!\n我们将持续为您奉献精彩内容！</text>
10 <text class="tips tips2">解锁一段隐藏祝福视频，请有缘人观看</text>
11 <video objectFit="cover" class="vid" poster="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
12 </view>
13 <!-- 功能区 -->
14 <view class="func">
15 <view bindtap="toPersonalList" class="user">
16 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
17 <view class="desc">
18 <view class="t1 name">我爱我家</view>
19 <view class="t1 num">280个视频</view>
20 </view>
21 </view>
22 <view class="btn-wrap">
23 <view class="btn btn2">
24 <span>更多推荐</span>
25 </view>
26 <!-- <view class="btn">
27 <span class="t1 iconfont iconhome"></span>
28 <span>返回首页</span>
29 </view> -->
30 </view>
31 </view>
32 <!-- 功能区小标题 -->
33 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
34 <!-- 广告 -->
35 <!-- 装饰物 -->
36 <view class="decoration">
37 <image mode="widthFix" src="../../image/detail/decoration_c1.png" />
38 </view>
39 <!-- 更多推荐 -->
40 <view class="more">
41 <view class="more-title">-- 更多推荐欣赏 --</view>
42 <view class="more-list">
43 <view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
44 <view class="tit">新政策来了！家有小孩的都要过来看看</view>
45 <image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
46 </view>
47 </view>
48 </view>
49 <!-- 返回首页按钮 -->
50 <view class="index-btn">
51 <span class="t1 iconfont iconhome"></span>
52 <span>返回首页</span>
53 </view>
54 </view>
55 </view>
56 </view>
57 <shortcut></shortcut>
...@@ -2,6 +2,8 @@ const routerPath = { ...@@ -2,6 +2,8 @@ const routerPath = {
2 index: '/pages/index/index', 2 index: '/pages/index/index',
3 detail: '/pages/detail/detail', 3 detail: '/pages/detail/detail',
4 personalList: '/pages/personal-list/personal-list', 4 personalList: '/pages/personal-list/personal-list',
5 rewardCompleted: '/pages/reward-completed/reward-completed',
6
5 authorize: '/pages/authorize/authorize', // 授权 7 authorize: '/pages/authorize/authorize', // 授权
6 example: '/pages/example/example', 8 example: '/pages/example/example',
7 more: '/pages/more/more', 9 more: '/pages/more/more',
......