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 @@
"pages/index/index",
"pages/detail/detail",
"pages/personal-list/personal-list",
"pages/reward-completed/reward-completed",
"pages/more/more",
"pages/poster-example/poster-example",
"pages/authorize/authorize",
......
......@@ -28,6 +28,7 @@
// text-align: center;
box-sizing: border-box;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
color: #333333;
}
button::after {
......
......@@ -5,12 +5,12 @@
z-index: 91;
color: #ffffff;
$btnSize: 80px;
$btnSize: 100px;
.btn {
width: $btnSize;
height: $btnSize;
margin-bottom: 24px;
margin-bottom: 32px;
border-radius: $btnSize;
display: flex;
justify-content: center;
......@@ -19,6 +19,6 @@
}
.iconfont {
font-size: 48px;
font-size: 64px;
}
}
......
......@@ -11,7 +11,7 @@ Page({
size: 10,
productList: [], // 产品列表
indexInfo: {},
userInfo: {},
userInfo: {}
},
onShareAppMessage() {},
showAuth() {
......
{
"navigationBarTitleText": ""
}
......
......@@ -77,9 +77,9 @@
flex: 1;
.portrait {
width: 72px;
height: 72px;
border-radius: 72px;
width: 92px;
height: 92px;
border-radius: 92px;
}
.desc {
......@@ -95,11 +95,11 @@
}
.name {
font-size: 28px;
font-size: 36px;
}
.num {
font-size: 24px;
font-size: 32px;
color: #8d8d8d;
}
}
......@@ -111,9 +111,9 @@
.btn {
margin-right: 24px;
width: 180px;
height: 68px;
font-size: 24px;
width: 200px;
height: 80px;
font-size: 32px;
background-color: #3ec03c;
border-radius: 8px;
display: flex;
......@@ -148,13 +148,18 @@
.fc-tit {
@extend .bb;
padding: 0 24px;
font-size: 36px;
margin: 0px auto 24px;
}
// 广告
.ad {}
// 装饰物 
.decoration {}
.decoration {
margin: 30px auto 0px;
text-align: center;
}
// 更多推荐
.more {
......@@ -195,4 +200,25 @@
}
}
}
// 返回首页按钮
.index-btn {
margin: 60px auto 0;
width: 320px;
height: 88px;
font-size: 36px;
font-weight: bold;
background-color: #3ec03c;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
.iconfont {
font-size: 48px;
margin-right: 12px;
}
}
}
......
......@@ -31,18 +31,19 @@
<view class="btn btn2">
<span>更多推荐</span>
</view>
<view class="btn">
<!-- <view class="btn">
<span class="t1 iconfont iconhome"></span>
<span>返回首页</span>
</view>
</view> -->
</view>
</view>
<!-- 功能区小标题 -->
<view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
<!-- 广告 -->
<view class="ad"></view>
<!-- 装饰物 -->
<view class="decoration"></view>
<view class="decoration">
<image mode="widthFix" src="../../image/detail/decoration_c1.png" />
</view>
<!-- 更多推荐 -->
<view class="more">
<view class="more-title">-- 更多推荐欣赏 --</view>
......@@ -53,6 +54,11 @@
</view>
</view>
</view>
<!-- 返回首页按钮 -->
<view class="index-btn">
<span class="t1 iconfont iconhome"></span>
<span>返回首页</span>
</view>
</view>
</view>
</view>
......
......@@ -47,13 +47,14 @@
}
.tit {
font-size: 34px;
height: 80px;
line-height: 80px;
color: #ffffff;
@extend .bb;
padding: 0 24px;
position: absolute;
width: 100%;
height: 64px;
line-height: 64px;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.6);
@include border-top-radius(8px);
......@@ -65,7 +66,7 @@
&-func {
@extend .bb;
padding: 24px 24px;
height: 80px;
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -75,30 +76,31 @@
align-items: center;
.portrait {
width: 48px;
height: 48px;
width: 72px;
height: 72px;
border-radius: 48px;
}
.name {
padding-left: 12px;
padding-left: 24px;
font-size: 32px;
@include ellipsis(1);
}
}
.share {
font-size: 24px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
// width: 132px;
height: 48px;
height: 64px;
color: #ffffff;
background-color: #3ec03c;
border-radius: 8px;
margin: 0;
.iconfont {
font-size: 32px;
font-size: 40px;
}
.t1 {
......
......@@ -72,13 +72,14 @@
}
.tit {
font-size: 34px;
height: 80px;
line-height: 80px;
color: #ffffff;
@extend .bb;
padding: 0 24px;
position: absolute;
width: 100%;
height: 64px;
line-height: 64px;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.6);
@include border-top-radius(8px);
......@@ -90,7 +91,7 @@
&-func {
@extend .bb;
padding: 24px 24px;
height: 80px;
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -100,30 +101,31 @@
align-items: center;
.portrait {
width: 48px;
height: 48px;
width: 72px;
height: 72px;
border-radius: 48px;
}
.name {
padding-left: 12px;
padding-left: 24px;
font-size: 32px;
@include ellipsis(1);
}
}
.share {
font-size: 24px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
// width: 132px;
height: 48px;
height: 64px;
color: #ffffff;
background-color: #3ec03c;
border-radius: 8px;
margin: 0;
.iconfont {
font-size: 32px;
font-size: 40px;
}
.t1 {
......
......@@ -3,8 +3,8 @@
<view class="app__bg bg"></view>
<!-- <view class="app__top-shadow"></view> -->
<view class="app__content main">
<view class="top-space"></view>
<view class="personal">
<view class="top-space"></view>
<view class="name">我爱我家 的视频列表</view>
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
</view>
......
import {
getBindtapData
} from '../../utils/util';
let app = getApp();
Page({
data: {
authorizeVisible: false,
total: 0,
page: 1,
size: 10,
productList: [], // 产品列表
indexInfo: {},
userInfo: {}
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {},
/**
* 基础方法
* 授权完毕重拉数据用
*/
initData() {
},
/**
* 到达底部
* 做加载更多操作
*/
onReachBottom() {
return;
if (this.data.dataList.length < this.data.total) {
this.setData({
page: this.data.page + 1
});
// this.queryDataList();
}
},
// 重置页面列表 点击搜索条件时需要
resetPage() {
this.setData({
page: 1,
dataList: []
})
},
/**
* 到个人列表页面
*/
toPersonalList() {
app.router.push({
path: "personalList",
})
},
/**
* 请求DataList
*/
queryDataList() {
return;
return new Promise((resolve, reject) => {
app.post({
sid: false,
url: app.api.dataList,
data: {
page: this.data.page,
size: this.data.size,
},
}).then((result) => {
let dataList = result.list;
dataList = this.data.dataList.concat(dataList);
this.setData({
dataList: dataList,
total: result.total
})
resolve();
})
});
},
/**
* 隐藏蒙层
*/
hideMask() {
this.setData({
productDetailVisible: false,
authorizeVisible: false,
})
},
/**
* 子组件事件
* @param {*} evt
*/
evtcomp(evt) {
let {
name,
data
} = evt.detail;
switch (name) {
// 隐藏蒙层
case "_evt_hide_mask":
this.hideMask();
break;
/**
* 重拉数据已在
*/
case "_evt_auth_complete":
// this.initData();
this.hideMask();
break;
default:
break;
}
},
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.page {
padding-bottom: $pageBottom;
.bgc {}
.bg {}
.main {
.top-space {
height: 36px;
}
.content {
position: relative;
}
}
// 视频详情
.reward {
text-align: center;
.tips {
font-weight: bold;
text-align: center;
display: block;
}
.tips1 {
font-size: 42px;
color: #a44829;
}
.tips2 {
margin: 16px auto 0;
font-size: 38px;
color: #4a4a4a;
}
.vid {
margin: 24px auto 0;
width: 640px;
border-radius: 16px;
}
}
// 功能区，显示用户信息等
.func {
position: relative;
@extend .bb;
padding: 24px 24px;
display: flex;
justify-content: space-between;
align-items: center;
.user {
display: flex;
align-items: center;
flex: 1;
.portrait {
width: 92px;
height: 92px;
border-radius: 92px;
}
.desc {
@extend .bb;
padding-left: 24px;
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
.t1 {
width: 100%;
}
.name {
font-size: 36px;
}
.num {
font-size: 32px;
color: #8d8d8d;
}
}
}
.btn-wrap {
display: flex;
.btn {
margin-right: 24px;
width: 200px;
height: 80px;
font-size: 32px;
background-color: #3ec03c;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
.iconfont {
font-size: 32px;
}
.t1 {
padding: 0 6px;
}
&:last-child {
margin-right: 0;
}
}
.btn2 {
background-color: #fecd9f;
color: #7f776e;
}
}
}
// 功能区小标题
.fc-tit {
@extend .bb;
padding: 0 24px;
font-size: 36px;
margin: 0px auto 24px;
}
// 广告
.ad {}
// 装饰物 
.decoration {
margin: 30px auto 0px;
text-align: center;
}
// 更多推荐
.more {
width: $contentWidth;
margin: 64px auto 0;
&-title {
color: #a2242e;
font-size: 48px;
font-weight: bold;
text-align: center;
}
// 推荐列表
&-list {
margin: 36px auto 0;
&-item {
display: flex;
justify-content: space-between;
border-bottom: solid 2px #dfdfdf;
padding: 24px 0;
.tit {
@extend .bb;
padding: 24px 0;
height: 230px;
flex: 1;
font-size: 36px;
@include ellipsis(4);
}
.poster {
width: 350px;
height: 230px;
border-radius: 8px;
}
}
}
}
// 返回首页按钮
.index-btn {
margin: 60px auto 0;
width: 320px;
height: 88px;
font-size: 36px;
font-weight: bold;
background-color: #3ec03c;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
.iconfont {
font-size: 48px;
margin-right: 12px;
}
}
}
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content">
<!-- 赞赏成功提示 -->
<view class="reward">
<text class="tips tips1">赞赏成功!\n我们将持续为您奉献精彩内容！</text>
<text class="tips tips2">解锁一段隐藏祝福视频，请有缘人观看</text>
<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" />
</view>
<!-- 功能区 -->
<view class="func">
<view bindtap="toPersonalList" class="user">
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
<view class="desc">
<view class="t1 name">我爱我家</view>
<view class="t1 num">280个视频</view>
</view>
</view>
<view class="btn-wrap">
<view class="btn btn2">
<span>更多推荐</span>
</view>
<!-- <view class="btn">
<span class="t1 iconfont iconhome"></span>
<span>返回首页</span>
</view> -->
</view>
</view>
<!-- 功能区小标题 -->
<view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
<!-- 广告 -->
<!-- 装饰物 -->
<view class="decoration">
<image mode="widthFix" src="../../image/detail/decoration_c1.png" />
</view>
<!-- 更多推荐 -->
<view class="more">
<view class="more-title">-- 更多推荐欣赏 --</view>
<view class="more-list">
<view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
<view class="tit">新政策来了！家有小孩的都要过来看看</view>
<image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
</view>
</view>
</view>
<!-- 返回首页按钮 -->
<view class="index-btn">
<span class="t1 iconfont iconhome"></span>
<span>返回首页</span>
</view>
</view>
</view>
</view>
<shortcut></shortcut>
......@@ -2,6 +2,8 @@ const routerPath = {
index: '/pages/index/index',
detail: '/pages/detail/detail',
personalList: '/pages/personal-list/personal-list',
rewardCompleted: '/pages/reward-completed/reward-completed',
authorize: '/pages/authorize/authorize', // 授权
example: '/pages/example/example',
more: '/pages/more/more',
......