Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
4fe4fc23 by simon
Options

默认提交

1 parent be65ff3c master
Expand all
Inline Side-by-side
Showing 8 changed files with 98 additions and 64 deletions
......@@ -40,8 +40,7 @@
}
.shadow {
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.6);
}
.linear {
......
......@@ -22,7 +22,7 @@
.detail {
position: relative;
width: 100%;
height: 944px;
// height: 944px;
background-color: #333333;
text-align: center;
......@@ -32,7 +32,6 @@
// padding-top: 20px;
width: 100%;
height: 720px;
// background-color: wheat;
.vid {
text-align: center;
......@@ -40,12 +39,16 @@
height: 100%;
}
}
}
.share {
position: relative;
width: 100%;
padding: 24px auto;
.btn-wrap {
position: absolute;
padding: 24px 0;
color: #ffffff;
// margin: 40px auto 0;
bottom: 64px;
left: 0;
right: 0;
......@@ -128,8 +131,9 @@
display: flex;
.btn {
margin-right: 24px;
width: 200px;
// margin-right: 24px;
margin: 0 0;
width: 240px;
height: 80px;
font-size: 32px;
background-color: #3ec03c;
......@@ -159,6 +163,7 @@
}
}
}
......@@ -168,7 +173,7 @@
@extend .bb;
padding: 0 24px;
font-size: 36px;
margin: 0px auto 24px;
margin: 24px auto 0px;
}
// 广告
......@@ -204,16 +209,16 @@
.tit {
@extend .bb;
padding: 24px 0;
height: 230px;
padding: 8px 0;
height: 180px;
flex: 1;
font-size: 36px;
@include ellipsis(4);
font-size: 40px;
@include ellipsis(3);
}
.poster {
width: 350px;
height: 230px;
height: 180px;
border-radius: 8px;
}
}
......
......@@ -9,8 +9,10 @@
<view class="vid-wrap">
<video objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
</view>
</view>
<div class="share">
<view class="btn-wrap">
<button open-type="share" class="ani-scl btn btn2">
<button open-type="share" class=" btn btn2">
<span class="t1 iconfont iconplane"></span>
<span class="t1">分享给好友</span>
</button>
......@@ -19,7 +21,9 @@
<span class="t1">分享到群</span>
</button>
</view>
</view>
</div>
<!-- 功能区小标题 -->
<view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
<!-- 功能区 -->
<view class="func">
<view bindtap="toPersonalList" class="user">
......@@ -30,17 +34,12 @@
</view>
</view>
<view class="btn-wrap">
<view class="btn btn2">
<span>更多推荐</span>
</view>
<!-- <view class="btn">
<view bindtap="toIndex" class="index-btn btn">
<span class="t1 iconfont iconhome"></span>
<span>返回首页</span>
</view> -->
<span>回到首页</span>
</view>
</view>
</view>
<!-- 功能区小标题 -->
<view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
<!-- 广告 -->
<!-- 装饰物 -->
<view class="decoration">
......
......@@ -19,23 +19,18 @@
height: 0px;
}
.content {
position: relative;
padding-top: 24px;
}
.banner {
position: relative;
line-height: 140px;
.swiper {
width: $contentWidth;
height: 320px;
width: 750px;
height: 280px;
margin: 0 auto;
.swiper-image {
width: $contentWidth;
height: 320px;
width: 750px;
height: 280px;
}
}
......@@ -57,12 +52,21 @@
}
}
.content {
position: relative;
padding-top: 10px;
}
.list {
position: relative;
margin: 0 auto;
width: $contentWidth;
&-item {
// @extend .shadow;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.6);
@include border-top-radius(16px);
position: relative;
background-color: #ffffff;
border-radius: 16px;
......@@ -75,8 +79,10 @@
width: $contentWidth;
background-color: #dddddd;
.img{
.img {
width: $contentWidth;
height: 320px;
@include border-top-radius(16px);
}
.vid {
......@@ -86,7 +92,7 @@
}
.tit {
font-size: 34px;
font-size: 40px;
height: 80px;
line-height: 80px;
color: #ffffff;
......@@ -95,31 +101,40 @@
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.6);
background-color: rgba($color: #000000, $alpha: 0.5);
@include border-top-radius(8px);
@include ellipsis(1);
}
.iconfont {
font-size: 160px;
.play {
@extend .fcc;
width: 132px;
height: 132px;
border-radius: 132px;
font-weight: normal;
position: absolute;
left: 0;
right: 0;
top: 160px;
top: 72px;
margin: 0 auto;
text-align: center;
font-weight: bold;
// color: #efefef;
background-color: rgba($color: #000000, $alpha: 0.7);
.iconfont {
font-size: 48px;
color: #ffffff;
margin-left: 12px;
}
}
}
&-func {
@extend .bb;
padding: 24px 24px;
height: 120px;
padding: 12px 24px;
// height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -176,4 +191,3 @@
border-width: 0;
}
}
......
......@@ -9,7 +9,6 @@
<van-tab wx:for="{{tabList}}" wx:key="{{index}}" title="{{item.tabName}}"></van-tab>
</van-tabs>
</van-sticky>
<view class="content">
<view class="banner" wx:if="{{bannerList && bannerList.length>0}}">
<swiper bindchange="onBannerChangeHandler" class="swiper" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(255,255,255,1)" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
<block wx:for="{{bannerList}}" wx:key="{{index}}">
......@@ -23,19 +22,22 @@
</view>
<!-- <view class="tit">名字</view> -->
</view>
<view class="content">
<view class="list">
<view wx:for="{{dataList}}" wx:key="index" class="list-item">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
<image class="img" src="{{item.thumbnail}}" mode="aspectFill" />
<view class="tit">{{item.videoName}}</view>
<span class="iconfont iconicon-test16"></span>
<div class="play">
<span class="iconfont iconplay"></span>
</div>
</view>
<view class="list-item-func">
<view bindtap="toPersonalList" data-data="{{item}}" data-index="{{index}}" class="user">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="user">
<image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
<text class="name">{{item.accountName || ""}}</text>
</view>
<button class="share ani-scl" open-type="share">
<button class="share" open-type="share">
<span class="t1 iconfont iconwechat"></span>
<span class="t1">分享</span>
</button>
......
......@@ -54,6 +54,9 @@
width: $contentWidth;
&-item {
// @extend .shadow;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.6);
@include border-top-radius(16px);
position: relative;
background-color: #ffffff;
border-radius: 16px;
......@@ -66,8 +69,10 @@
width: $contentWidth;
background-color: #dddddd;
.img{
.img {
width: $contentWidth;
height: 320px;
@include border-top-radius(16px);
}
.vid {
......@@ -77,7 +82,7 @@
}
.tit {
font-size: 34px;
font-size: 40px;
height: 80px;
line-height: 80px;
color: #ffffff;
......@@ -86,31 +91,40 @@
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.6);
background-color: rgba($color: #000000, $alpha: 0.5);
@include border-top-radius(8px);
@include ellipsis(1);
}
.iconfont {
font-size: 160px;
.play {
@extend .fcc;
width: 132px;
height: 132px;
border-radius: 132px;
font-weight: normal;
position: absolute;
left: 0;
right: 0;
top: 160px;
top: 72px;
margin: 0 auto;
text-align: center;
font-weight: bold;
// color: #efefef;
background-color: rgba($color: #000000, $alpha: 0.7);
.iconfont {
font-size: 48px;
color: #ffffff;
margin-left: 12px;
}
}
}
&-func {
@extend .bb;
padding: 24px 24px;
height: 120px;
padding: 12px 24px;
// height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
......
......@@ -12,17 +12,18 @@
<view class="list">
<view wx:for="{{dataList}}" wx:key="index" class="list-item">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
<view class="tit">{{item.videoName}}</view> -->
<image src="{{item.thumbnail}}" mode="aspectFill" />
<image class="img" src="{{item.thumbnail}}" mode="aspectFill" />
<view class="tit">{{item.videoName}}</view>
<span class="iconfont iconicon-test16"></span>
<div class="play">
<span class="iconfont iconplay"></span>
</div>
</view>
<view class="list-item-func">
<view class="user">
<image class="portrait" mode="aspectFill" src="{{personInfo.headImage}}" />
<text class="name">{{personInfo.accountName || ""}}</text>
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="user">
<image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
<text class="name">{{item.accountName || ""}}</text>
</view>
<button class="share ani-scl" open-type="share">
<button class="share" open-type="share">
<span class="t1 iconfont iconwechat"></span>
<span class="t1">分享</span>
</button>
......