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
@import '../../assets/scss/mixins';
// @import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
// 用户头像
.portrait {
position: relative;
margin: 24px auto;
text-align: center;
width: 216px;
@extend .fcc;
&-inner {
width: 167px;
}
&-border {
width: 216px;
position: absolute;
}
}
.page {
padding-bottom: 200px;
.bgc {}
.bg {
position: fixed;
background: url('https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/jyes/assets/oss/blessing-bg.png') no-repeat center;
// height: auto;
// padding-bottom: 80px;
}
.main {
position: relative;
// 顶部背景
.top-bg {
......@@ -17,8 +42,6 @@
}
.top-space {
// height: 136px;
// height: 202px;
height: 200px;
}
......@@ -40,22 +63,8 @@
text-align: center;
color: #fee085;
// 用户头像
.portrait {
position: relative;
margin: 24px auto 0;
text-align: center;
width: 216px;
@extend .fcc;
&-inner {
width: 167px;
}
&-border {
width: 216px;
position: absolute;
}
}
// 用户名称
......@@ -78,9 +87,175 @@
margin: 0 0 12px 12px;
}
}
// 编辑页面
.edit {
margin: 24px auto 0;
display: flex;
justify-content: center;
align-items: flex-end;
.tt {
font-size: 42px;
}
.t2 {
margin-left: 42px;
}
}
// 用户组
.group {
width: 650px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 36px auto 0;
//
&-item {
width: 33.33%;
text-align: center;
margin: 0 auto 32px;
&-portrait {
margin: 0 auto;
width: 145px;
height: 145px;
border-radius: 145px;
border-image-slice: 1;
border-width: 4px;
border-image-source: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
}
&-name {
margin: 4px auto 0;
font-size: 36px;
font-weight: 500;
text-align: center;
color: #ff8752;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
}
//查看更多
.more {
@extend .fcc;
font-size: 36px;
font-weight: 500;
text-align: center;
color: #e16e6e;
.icon-down {
width: 32px;
margin-top: 6px;
margin-left: 10px;
}
}
// 句子
.sentence {
margin: 64px auto 0;
}
}
// 尾部
.tail {
// 尾部头像
.portrait {
margin: 72px auto 0;
}
// 用户名称
.name {
margin: 24px auto 0;
text-align: center;
.tt {
font-size: 48px;
font-weight: 500;
text-align: center;
color: #fee085;
margin-top: 48px;
}
}
// 按钮组
&-btn-wrap {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin: 64px auto 0;
&-item {
width: 100%;
}
// 分享团队图片
.blessing-share-group-btn {
width: 370px;
margin-right: 20px;
}
// 选择更多祝福模板
.more-template {
font-size: 36px;
color: #dfa244;
text-align: right;
margin-right: 40px;
margin-top: 24px;
.t1 {
text-decoration: underline;
}
}
}
}
}
// fix底部
.bottom {
position: fixed;
bottom: 0;
width: 100%;
.bottom-bg {
width: 750px;
height: 160px;
position: absolute;
bottom: 0;
}
.btn-wrap {
width: 100%;
position: relative;
display: flex;
justify-content: center;
margin: 24px auto;
.btn {
margin: 0 22px;
@include btc(290px, 76px);
color: #fee085;
font-size: 36px;
border-radius: 8px;
box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
background-image: linear-gradient(to top, #b41d36, #bb2634);
}
.btn2 {
color: #940023;
box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
}
}
}
}
}
......
......@@ -20,11 +20,59 @@
<view class="tt">姓名</view>
<image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
</view>
<!-- <view class="edit">
<view class="tt t1"></view>
<!-- 编辑 -->
<view class="edit">
<view class="tt t1">携家人</view>
<image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
<view class="tt t2"></view>
</view> -->
<view class="tt t2">2人</view>
</view>
<!-- 用户组 -->
<view class="group">
<view wx:for="{{6}}" class="group-item">
<view class="group-item-portrait"></view>
<view class="group-item-name">
<view class="t1">李四</view>
<image class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
</view>
</view>
</view>
<!-- 更多 -->
<view class="more">
查看更多
<image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" />
</view>
<!-- 自定义句子 -->
<view class="sentence">给您拜年啦！</view>
</view>
<!-- 尾部内容 -->
<view class="tail">
<!-- 尾部头像 -->
<view class="portrait">
<image class="portrait-inner" mode="widthFix" src="../../image/blessing/portrait.png" />
<image class="portrait-border" mode="widthFix" src="../../image/blessing/portrait-border.png" />
</view>
<view class="name">
<view class="tt t1">滴水</view>
<view class="tt t2">祝你数年大吉</view>
</view>
<!-- 按钮组 -->
<view class="tail-btn-wrap">
<!-- 分享团队图片 -->
<!-- <view class="share"></view> -->
<image mode="widthFix" class="tail-btn-wrap-item blessing-share-group-btn" src="../../image/blessing/blessing-share-group-btn.png" />
<!-- 选择更多祝福模板 -->
<view class="tail-btn-wrap-item more-template">
<span class="t1">选择更多祝福模版</span>
>>
</view>
</view>
</view>
</view>
<view class="bottom">
<image class="bottom-bg" mode="scaleToFill" src="../../image/blessing/blessing-bottom.png" />
<view class="btn-wrap">
<view class="btn btn1">定制我的祝福</view>
<view class="btn btn2">祝福送朋友</view>
</view>
</view>
</view>
......