Skip to content

dev / home-with-kids-mp

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

默认提交

1 parent be65ff3c
Expand all
Inline Side-by-side
Showing 8 changed files with 98 additions and 64 deletions
...@@ -40,8 +40,7 @@ ...@@ -40,8 +40,7 @@
40 } 40 }
41 41
42 .shadow { 42 .shadow {
43 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10); 43 box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.6);
44 border-radius: 8px;
45 } 44 }
46 45
47 .linear { 46 .linear {
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 .detail { 22 .detail {
23 position: relative; 23 position: relative;
24 width: 100%; 24 width: 100%;
25 height: 944px; 25 // height: 944px;
26 background-color: #333333; 26 background-color: #333333;
27 text-align: center; 27 text-align: center;
28 28
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
32 // padding-top: 20px; 32 // padding-top: 20px;
33 width: 100%; 33 width: 100%;
34 height: 720px; 34 height: 720px;
35 // background-color: wheat;
36 35
37 .vid { 36 .vid {
38 text-align: center; 37 text-align: center;
...@@ -40,12 +39,16 @@ ...@@ -40,12 +39,16 @@
40 height: 100%; 39 height: 100%;
41 } 40 }
42 } 41 }
42 }
43 43
44 .share {
45 position: relative;
46 width: 100%;
47 padding: 24px auto;
44 48
45 .btn-wrap { 49 .btn-wrap {
46 position: absolute; 50 padding: 24px 0;
47 color: #ffffff; 51 color: #ffffff;
48 // margin: 40px auto 0;
49 bottom: 64px; 52 bottom: 64px;
50 left: 0; 53 left: 0;
51 right: 0; 54 right: 0;
...@@ -128,8 +131,9 @@ ...@@ -128,8 +131,9 @@
128 display: flex; 131 display: flex;
129 132
130 .btn { 133 .btn {
131 margin-right: 24px; 134 // margin-right: 24px;
132 width: 200px; 135 margin: 0 0;
136 width: 240px;
133 height: 80px; 137 height: 80px;
134 font-size: 32px; 138 font-size: 32px;
135 background-color: #3ec03c; 139 background-color: #3ec03c;
...@@ -159,6 +163,7 @@ ...@@ -159,6 +163,7 @@
159 } 163 }
160 164
161 165
166
162 } 167 }
163 168
164 } 169 }
...@@ -168,7 +173,7 @@ ...@@ -168,7 +173,7 @@
168 @extend .bb; 173 @extend .bb;
169 padding: 0 24px; 174 padding: 0 24px;
170 font-size: 36px; 175 font-size: 36px;
171 margin: 0px auto 24px; 176 margin: 24px auto 0px;
172 } 177 }
173 178
174 // 广告 179 // 广告
...@@ -204,16 +209,16 @@ ...@@ -204,16 +209,16 @@
204 209
205 .tit { 210 .tit {
206 @extend .bb; 211 @extend .bb;
207 padding: 24px 0; 212 padding: 8px 0;
208 height: 230px; 213 height: 180px;
209 flex: 1; 214 flex: 1;
210 font-size: 36px; 215 font-size: 40px;
211 @include ellipsis(4); 216 @include ellipsis(3);
212 } 217 }
213 218
214 .poster { 219 .poster {
215 width: 350px; 220 width: 350px;
216 height: 230px; 221 height: 180px;
217 border-radius: 8px; 222 border-radius: 8px;
218 } 223 }
219 } 224 }
......
...@@ -9,8 +9,10 @@ ...@@ -9,8 +9,10 @@
9 <view class="vid-wrap"> 9 <view class="vid-wrap">
10 <video objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" /> 10 <video objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
11 </view> 11 </view>
12 </view>
13 <div class="share">
12 <view class="btn-wrap"> 14 <view class="btn-wrap">
13 <button open-type="share" class="ani-scl btn btn2"> 15 <button open-type="share" class=" btn btn2">
14 <span class="t1 iconfont iconplane"></span> 16 <span class="t1 iconfont iconplane"></span>
15 <span class="t1">分享给好友</span> 17 <span class="t1">分享给好友</span>
16 </button> 18 </button>
...@@ -19,7 +21,9 @@ ...@@ -19,7 +21,9 @@
19 <span class="t1">分享到群</span> 21 <span class="t1">分享到群</span>
20 </button> 22 </button>
21 </view> 23 </view>
22 </view> 24 </div>
25 <!-- 功能区小标题 -->
26 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
23 <!-- 功能区 --> 27 <!-- 功能区 -->
24 <view class="func"> 28 <view class="func">
25 <view bindtap="toPersonalList" class="user"> 29 <view bindtap="toPersonalList" class="user">
...@@ -30,17 +34,12 @@ ...@@ -30,17 +34,12 @@
30 </view> 34 </view>
31 </view> 35 </view>
32 <view class="btn-wrap"> 36 <view class="btn-wrap">
33 <view class="btn btn2"> 37 <view bindtap="toIndex" class="index-btn btn">
34 <span>更多推荐</span>
35 </view>
36 <!-- <view class="btn">
37 <span class="t1 iconfont iconhome"></span> 38 <span class="t1 iconfont iconhome"></span>
38 <span>返回首页</span> 39 <span>回到首页</span>
39 </view> --> 40 </view>
40 </view> 41 </view>
41 </view> 42 </view>
42 <!-- 功能区小标题 -->
43 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
44 <!-- 广告 --> 43 <!-- 广告 -->
45 <!-- 装饰物 --> 44 <!-- 装饰物 -->
46 <view class="decoration"> 45 <view class="decoration">
......
...@@ -19,23 +19,18 @@ ...@@ -19,23 +19,18 @@
19 height: 0px; 19 height: 0px;
20 } 20 }
21 21
22 .content {
23 position: relative;
24 padding-top: 24px;
25
26 }
27
28 .banner { 22 .banner {
29 position: relative; 23 position: relative;
24 line-height: 140px;
30 25
31 .swiper { 26 .swiper {
32 width: $contentWidth; 27 width: 750px;
33 height: 320px; 28 height: 280px;
34 margin: 0 auto; 29 margin: 0 auto;
35 30
36 .swiper-image { 31 .swiper-image {
37 width: $contentWidth; 32 width: 750px;
38 height: 320px; 33 height: 280px;
39 } 34 }
40 } 35 }
41 36
...@@ -57,12 +52,21 @@ ...@@ -57,12 +52,21 @@
57 } 52 }
58 } 53 }
59 54
55 .content {
56 position: relative;
57 padding-top: 10px;
58
59 }
60
60 .list { 61 .list {
61 position: relative; 62 position: relative;
62 margin: 0 auto; 63 margin: 0 auto;
63 width: $contentWidth; 64 width: $contentWidth;
64 65
65 &-item { 66 &-item {
67 // @extend .shadow;
68 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.6);
69 @include border-top-radius(16px);
66 position: relative; 70 position: relative;
67 background-color: #ffffff; 71 background-color: #ffffff;
68 border-radius: 16px; 72 border-radius: 16px;
...@@ -75,8 +79,10 @@ ...@@ -75,8 +79,10 @@
75 width: $contentWidth; 79 width: $contentWidth;
76 background-color: #dddddd; 80 background-color: #dddddd;
77 81
78 .img{ 82 .img {
79 width: $contentWidth; 83 width: $contentWidth;
84 height: 320px;
85 @include border-top-radius(16px);
80 } 86 }
81 87
82 .vid { 88 .vid {
...@@ -86,7 +92,7 @@ ...@@ -86,7 +92,7 @@
86 } 92 }
87 93
88 .tit { 94 .tit {
89 font-size: 34px; 95 font-size: 40px;
90 height: 80px; 96 height: 80px;
91 line-height: 80px; 97 line-height: 80px;
92 color: #ffffff; 98 color: #ffffff;
...@@ -95,31 +101,40 @@ ...@@ -95,31 +101,40 @@
95 position: absolute; 101 position: absolute;
96 width: 100%; 102 width: 100%;
97 bottom: 0; 103 bottom: 0;
98 background-color: rgba($color: #000000, $alpha: 0.6); 104 background-color: rgba($color: #000000, $alpha: 0.5);
99 @include border-top-radius(8px); 105 @include border-top-radius(8px);
100 @include ellipsis(1); 106 @include ellipsis(1);
101 107
102 } 108 }
103 109
104 .iconfont { 110 .play {
105 font-size: 160px; 111 @extend .fcc;
112 width: 132px;
113 height: 132px;
114 border-radius: 132px;
106 font-weight: normal; 115 font-weight: normal;
107 position: absolute; 116 position: absolute;
108 left: 0; 117 left: 0;
109 right: 0; 118 right: 0;
110 top: 160px; 119 top: 72px;
111 margin: 0 auto; 120 margin: 0 auto;
112 text-align: center; 121 text-align: center;
113 font-weight: bold; 122 font-weight: bold;
114 // color: #efefef; 123 background-color: rgba($color: #000000, $alpha: 0.7);
124
125 .iconfont {
126 font-size: 48px;
115 color: #ffffff; 127 color: #ffffff;
128 margin-left: 12px;
116 } 129 }
117 } 130 }
118 131
132 }
133
119 &-func { 134 &-func {
120 @extend .bb; 135 @extend .bb;
121 padding: 24px 24px; 136 padding: 12px 24px;
122 height: 120px; 137 // height: 120px;
123 display: flex; 138 display: flex;
124 justify-content: space-between; 139 justify-content: space-between;
125 align-items: center; 140 align-items: center;
...@@ -176,4 +191,3 @@ ...@@ -176,4 +191,3 @@
176 border-width: 0; 191 border-width: 0;
177 } 192 }
178 } 193 }
179
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 <van-tab wx:for="{{tabList}}" wx:key="{{index}}" title="{{item.tabName}}"></van-tab> 9 <van-tab wx:for="{{tabList}}" wx:key="{{index}}" title="{{item.tabName}}"></van-tab>
10 </van-tabs> 10 </van-tabs>
11 </van-sticky> 11 </van-sticky>
12 <view class="content">
13 <view class="banner" wx:if="{{bannerList && bannerList.length>0}}"> 12 <view class="banner" wx:if="{{bannerList && bannerList.length>0}}">
14 <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}}"> 13 <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}}">
15 <block wx:for="{{bannerList}}" wx:key="{{index}}"> 14 <block wx:for="{{bannerList}}" wx:key="{{index}}">
...@@ -23,19 +22,22 @@ ...@@ -23,19 +22,22 @@
23 </view> 22 </view>
24 <!-- <view class="tit">名字</view> --> 23 <!-- <view class="tit">名字</view> -->
25 </view> 24 </view>
25 <view class="content">
26 <view class="list"> 26 <view class="list">
27 <view wx:for="{{dataList}}" wx:key="index" class="list-item"> 27 <view wx:for="{{dataList}}" wx:key="index" class="list-item">
28 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video"> 28 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
29 <image class="img" src="{{item.thumbnail}}" mode="aspectFill" /> 29 <image class="img" src="{{item.thumbnail}}" mode="aspectFill" />
30 <view class="tit">{{item.videoName}}</view> 30 <view class="tit">{{item.videoName}}</view>
31 <span class="iconfont iconicon-test16"></span> 31 <div class="play">
32 <span class="iconfont iconplay"></span>
33 </div>
32 </view> 34 </view>
33 <view class="list-item-func"> 35 <view class="list-item-func">
34 <view bindtap="toPersonalList" data-data="{{item}}" data-index="{{index}}" class="user"> 36 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="user">
35 <image class="portrait" mode="aspectFill" src="{{item.headImage}}" /> 37 <image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
36 <text class="name">{{item.accountName || ""}}</text> 38 <text class="name">{{item.accountName || ""}}</text>
37 </view> 39 </view>
38 <button class="share ani-scl" open-type="share"> 40 <button class="share" open-type="share">
39 <span class="t1 iconfont iconwechat"></span> 41 <span class="t1 iconfont iconwechat"></span>
40 <span class="t1">分享</span> 42 <span class="t1">分享</span>
41 </button> 43 </button>
......
...@@ -54,6 +54,9 @@ ...@@ -54,6 +54,9 @@
54 width: $contentWidth; 54 width: $contentWidth;
55 55
56 &-item { 56 &-item {
57 // @extend .shadow;
58 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.6);
59 @include border-top-radius(16px);
57 position: relative; 60 position: relative;
58 background-color: #ffffff; 61 background-color: #ffffff;
59 border-radius: 16px; 62 border-radius: 16px;
...@@ -66,8 +69,10 @@ ...@@ -66,8 +69,10 @@
66 width: $contentWidth; 69 width: $contentWidth;
67 background-color: #dddddd; 70 background-color: #dddddd;
68 71
69 .img{ 72 .img {
70 width: $contentWidth; 73 width: $contentWidth;
74 height: 320px;
75 @include border-top-radius(16px);
71 } 76 }
72 77
73 .vid { 78 .vid {
...@@ -77,7 +82,7 @@ ...@@ -77,7 +82,7 @@
77 } 82 }
78 83
79 .tit { 84 .tit {
80 font-size: 34px; 85 font-size: 40px;
81 height: 80px; 86 height: 80px;
82 line-height: 80px; 87 line-height: 80px;
83 color: #ffffff; 88 color: #ffffff;
...@@ -86,31 +91,40 @@ ...@@ -86,31 +91,40 @@
86 position: absolute; 91 position: absolute;
87 width: 100%; 92 width: 100%;
88 bottom: 0; 93 bottom: 0;
89 background-color: rgba($color: #000000, $alpha: 0.6); 94 background-color: rgba($color: #000000, $alpha: 0.5);
90 @include border-top-radius(8px); 95 @include border-top-radius(8px);
91 @include ellipsis(1); 96 @include ellipsis(1);
92 97
93 } 98 }
94 99
95 .iconfont { 100 .play {
96 font-size: 160px; 101 @extend .fcc;
102 width: 132px;
103 height: 132px;
104 border-radius: 132px;
97 font-weight: normal; 105 font-weight: normal;
98 position: absolute; 106 position: absolute;
99 left: 0; 107 left: 0;
100 right: 0; 108 right: 0;
101 top: 160px; 109 top: 72px;
102 margin: 0 auto; 110 margin: 0 auto;
103 text-align: center; 111 text-align: center;
104 font-weight: bold; 112 font-weight: bold;
105 // color: #efefef; 113 background-color: rgba($color: #000000, $alpha: 0.7);
114
115 .iconfont {
116 font-size: 48px;
106 color: #ffffff; 117 color: #ffffff;
118 margin-left: 12px;
119 }
107 } 120 }
121
108 } 122 }
109 123
110 &-func { 124 &-func {
111 @extend .bb; 125 @extend .bb;
112 padding: 24px 24px; 126 padding: 12px 24px;
113 height: 120px; 127 // height: 120px;
114 display: flex; 128 display: flex;
115 justify-content: space-between; 129 justify-content: space-between;
116 align-items: center; 130 align-items: center;
......
...@@ -12,17 +12,18 @@ ...@@ -12,17 +12,18 @@
12 <view class="list"> 12 <view class="list">
13 <view wx:for="{{dataList}}" wx:key="index" class="list-item"> 13 <view wx:for="{{dataList}}" wx:key="index" class="list-item">
14 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video"> 14 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
15 <view class="tit">{{item.videoName}}</view> --> 15 <image class="img" src="{{item.thumbnail}}" mode="aspectFill" />
16 <image src="{{item.thumbnail}}" mode="aspectFill" />
17 <view class="tit">{{item.videoName}}</view> 16 <view class="tit">{{item.videoName}}</view>
18 <span class="iconfont iconicon-test16"></span> 17 <div class="play">
18 <span class="iconfont iconplay"></span>
19 </div>
19 </view> 20 </view>
20 <view class="list-item-func"> 21 <view class="list-item-func">
21 <view class="user"> 22 <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="user">
22 <image class="portrait" mode="aspectFill" src="{{personInfo.headImage}}" /> 23 <image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
23 <text class="name">{{personInfo.accountName || ""}}</text> 24 <text class="name">{{item.accountName || ""}}</text>
24 </view> 25 </view>
25 <button class="share ani-scl" open-type="share"> 26 <button class="share" open-type="share">
26 <span class="t1 iconfont iconwechat"></span> 27 <span class="t1 iconfont iconwechat"></span>
27 <span class="t1">分享</span> 28 <span class="t1">分享</span>
28 </button> 29 </button>
......