Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
c23b19a3 by simon
Options

默认提交

1 parent 8a3e6a31
Inline Side-by-side
Showing 5 changed files with 244 additions and 21 deletions
1 @import '../../assets/scss/mixins'; 1 // @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 // 用户头像
5 .portrait {
6 position: relative;
7 margin: 24px auto;
8 text-align: center;
9 width: 216px;
10 @extend .fcc;
11
12 &-inner {
13 width: 167px;
14 }
15
16 &-border {
17 width: 216px;
18 position: absolute;
19 }
20 }
21
22
4 .page { 23 .page {
24 padding-bottom: 200px;
25
5 .bgc {} 26 .bgc {}
6 27
7 .bg { 28 .bg {
29 position: fixed;
8 background: url('https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/jyes/assets/oss/blessing-bg.png') no-repeat center; 30 background: url('https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/jyes/assets/oss/blessing-bg.png') no-repeat center;
31 // height: auto;
32 // padding-bottom: 80px;
9 } 33 }
10 34
11 .main { 35 .main {
36 position: relative;
12 37
13 // 顶部背景 38 // 顶部背景
14 .top-bg { 39 .top-bg {
...@@ -17,8 +42,6 @@ ...@@ -17,8 +42,6 @@
17 } 42 }
18 43
19 .top-space { 44 .top-space {
20 // height: 136px;
21 // height: 202px;
22 height: 200px; 45 height: 200px;
23 } 46 }
24 47
...@@ -40,22 +63,8 @@ ...@@ -40,22 +63,8 @@
40 text-align: center; 63 text-align: center;
41 color: #fee085; 64 color: #fee085;
42 65
43 // 用户头像
44 .portrait { 66 .portrait {
45 position: relative;
46 margin: 24px auto 0; 67 margin: 24px auto 0;
47 text-align: center;
48 width: 216px;
49 @extend .fcc;
50
51 &-inner {
52 width: 167px;
53 }
54
55 &-border {
56 width: 216px;
57 position: absolute;
58 }
59 } 68 }
60 69
61 // 用户名称 70 // 用户名称
...@@ -78,9 +87,175 @@ ...@@ -78,9 +87,175 @@
78 margin: 0 0 12px 12px; 87 margin: 0 0 12px 12px;
79 } 88 }
80 } 89 }
90
91 // 编辑页面
92 .edit {
93 margin: 24px auto 0;
94 display: flex;
95 justify-content: center;
96 align-items: flex-end;
97
98 .tt {
99 font-size: 42px;
100 }
101
102 .t2 {
103 margin-left: 42px;
104 }
105 }
106
107 // 用户组
108 .group {
109 width: 650px;
110 display: flex;
111 justify-content: center;
112 flex-wrap: wrap;
113 margin: 36px auto 0;
114
115 //
116 &-item {
117 width: 33.33%;
118 text-align: center;
119 margin: 0 auto 32px;
120
121 &-portrait {
122 margin: 0 auto;
123 width: 145px;
124 height: 145px;
125 border-radius: 145px;
126 border-image-slice: 1;
127 border-width: 4px;
128 border-image-source: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
129 background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
130 }
131
132 &-name {
133 margin: 4px auto 0;
134 font-size: 36px;
135 font-weight: 500;
136 text-align: center;
137 color: #ff8752;
138 display: flex;
139 justify-content: center;
140 align-items: flex-end;
141 }
142 }
143 }
144
145 //查看更多
146 .more {
147 @extend .fcc;
148 font-size: 36px;
149 font-weight: 500;
150 text-align: center;
151 color: #e16e6e;
152
153 .icon-down {
154 width: 32px;
155 margin-top: 6px;
156 margin-left: 10px;
157 }
158 }
159
160 // 句子
161 .sentence {
162 margin: 64px auto 0;
163 }
164 }
165
166 // 尾部
167 .tail {
168
169 // 尾部头像
170 .portrait {
171 margin: 72px auto 0;
172 }
173
174 // 用户名称
175 .name {
176 margin: 24px auto 0;
177 text-align: center;
178
179 .tt {
180 font-size: 48px;
181 font-weight: 500;
182 text-align: center;
183 color: #fee085;
184 margin-top: 48px;
185 }
186 }
187
188 // 按钮组
189 &-btn-wrap {
190 display: flex;
191 justify-content: flex-end;
192 flex-wrap: wrap;
193 margin: 64px auto 0;
194
195 &-item {
196 width: 100%;
197 }
198
199 // 分享团队图片
200 .blessing-share-group-btn {
201 width: 370px;
202 margin-right: 20px;
203 }
204
205 // 选择更多祝福模板
206 .more-template {
207 font-size: 36px;
208 color: #dfa244;
209 text-align: right;
210 margin-right: 40px;
211 margin-top: 24px;
212
213 .t1 {
214 text-decoration: underline;
215 }
216 }
217 }
218
219 }
220
221 }
222
223 // fix底部
224 .bottom {
225 position: fixed;
226 bottom: 0;
227 width: 100%;
228
229 .bottom-bg {
230 width: 750px;
231 height: 160px;
232 position: absolute;
233 bottom: 0;
81 } 234 }
82 235
236 .btn-wrap {
237 width: 100%;
238 position: relative;
239 display: flex;
240 justify-content: center;
241 margin: 24px auto;
242
243 .btn {
244 margin: 0 22px;
245 @include btc(290px, 76px);
246 color: #fee085;
247 font-size: 36px;
248 border-radius: 8px;
249 box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
250 background-image: linear-gradient(to top, #b41d36, #bb2634);
251 }
83 252
253 .btn2 {
254 color: #940023;
255 box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
256 background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
257 }
258 }
84 } 259 }
85 } 260 }
86 } 261 }
......
...@@ -20,11 +20,59 @@ ...@@ -20,11 +20,59 @@
20 <view class="tt">姓名</view> 20 <view class="tt">姓名</view>
21 <image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" /> 21 <image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
22 </view> 22 </view>
23 <!-- <view class="edit"> 23 <!-- 编辑 -->
24 <view class="tt t1"></view> 24 <view class="edit">
25 <view class="tt t1">携家人</view>
25 <image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" /> 26 <image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
26 <view class="tt t2"></view> 27 <view class="tt t2">2人</view>
27 </view> --> 28 </view>
29 <!-- 用户组 -->
30 <view class="group">
31 <view wx:for="{{6}}" class="group-item">
32 <view class="group-item-portrait"></view>
33 <view class="group-item-name">
34 <view class="t1">李四</view>
35 <image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
36 </view>
37 </view>
38 </view>
39 <!-- 更多 -->
40 <view class="more">
41 查看更多
42 <image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" />
43 </view>
44 <!-- 自定义句子 -->
45 <view class="sentence">给您拜年啦！</view>
46 </view>
47 <!-- 尾部内容 -->
48 <view class="tail">
49 <!-- 尾部头像 -->
50 <view class="portrait">
51 <image class="portrait-inner" mode="widthFix" src="../../image/blessing/portrait.png" />
52 <image class="portrait-border" mode="widthFix" src="../../image/blessing/portrait-border.png" />
53 </view>
54 <view class="name">
55 <view class="tt t1">滴水</view>
56 <view class="tt t2">祝你数年大吉</view>
57 </view>
58 <!-- 按钮组 -->
59 <view class="tail-btn-wrap">
60 <!-- 分享团队图片 -->
61 <!-- <view class="share"></view> -->
62 <image mode="widthFix" class="tail-btn-wrap-item blessing-share-group-btn" src="../../image/blessing/blessing-share-group-btn.png" />
63 <!-- 选择更多祝福模板 -->
64 <view class="tail-btn-wrap-item more-template">
65 <span class="t1">选择更多祝福模版</span>
66 >>
67 </view>
68 </view>
69 </view>
70 </view>
71 <view class="bottom">
72 <image class="bottom-bg" mode="scaleToFill" src="../../image/blessing/blessing-bottom.png" />
73 <view class="btn-wrap">
74 <view class="btn btn1">定制我的祝福</view>
75 <view class="btn btn2">祝福送朋友</view>
28 </view> 76 </view>
29 </view> 77 </view>
30 </view> 78 </view>
......