Skip to content

dev / home-with-kids-mp

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

默认提交

1 parent d32de68d
Inline Side-by-side
Showing 7 changed files with 56 additions and 17 deletions
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
12 // 原子类 12 // 原子类
13 @import "assets/scss/utils"; 13 @import "assets/scss/utils";
14 14
15 @import "assets/scss/animate";
16
15 // 图标 17 // 图标
16 // @import 'styles/iconfont.wxss'; 18 // @import 'styles/iconfont.wxss';
17 19
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
29 box-sizing: border-box; 31 box-sizing: border-box;
30 font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0; 32 font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
31 color: #333333; 33 color: #333333;
34 font-size: 36px;
32 } 35 }
33 36
34 button::after { 37 button::after {
...@@ -101,14 +104,42 @@ button { ...@@ -101,14 +104,42 @@ button {
101 .red-p { 104 .red-p {
102 .comp { 105 .comp {
103 bottom: auto; 106 bottom: auto;
104 top: 15%; 107 top: 50%;
105 } 108 }
106 } 109 }
107 110
108 .van-tab { 111 .van-tab {
109 font-size: 32px !important; 112 font-size: 40px !important;
110 font-weight: bold !important; 113 font-weight: bold !important;
111 color: #444444 !important; 114 color: #444444 !important;
115 padding: 0 32px !important;
116 }
117
118
119 .ani-tada {
120 animation: tada 2s infinite;
121 }
122
123 .ani-scl {
124 animation: ani-scal-key 2s infinite;
125 }
126
127 @keyframes ani-scal-key {
128 0% {
129 transform: scale(1);
130 }
131
132 25% {
133 transform: scale(1.1);
134 }
135
136 50% {
137 transform: scale(1);
138 }
139
140 75% {
141 transform: scale(1.1);
142 }
112 } 143 }
113 144
114 145
...@@ -126,6 +157,7 @@ button { ...@@ -126,6 +157,7 @@ button {
126 font-style: normal; 157 font-style: normal;
127 -webkit-font-smoothing: antialiased; 158 -webkit-font-smoothing: antialiased;
128 -moz-osx-font-smoothing: grayscale; 159 -moz-osx-font-smoothing: grayscale;
160 font-weight: normal !important;
129 } 161 }
130 162
131 .iconclose1:before { 163 .iconclose1:before {
......
...@@ -23,4 +23,4 @@ $fontSizeLarger: 44px; ...@@ -23,4 +23,4 @@ $fontSizeLarger: 44px;
23 $colorMain:#3680EB; 23 $colorMain:#3680EB;
24 24
25 $pageBottom:80px; 25 $pageBottom:80px;
26 $contentWidth:690px; 26 $contentWidth:730px;
......
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
3 <span class="iconfont {{typeIconMap[item+''] }}"></span> 3 <span class="iconfont {{typeIconMap[item+''] }}"></span>
4 </view> 4 </view>
5 <view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn"> 5 <view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
6 <image mode="aspectFit" src="../../image/shortcut/red-package.png" class="pics" /> 6 <image mode="aspectFit" src="{{'../../image/shortcut/'+item+'.png'}}" class="pics ani-tada" />
7 </view> 7 </view>
8 </view> 8 </view>
......
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
8 <view class="detail"> 8 <view class="detail">
9 <video objectFit="cover" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" /> 9 <video objectFit="cover" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
10 <view class="btn-wrap"> 10 <view class="btn-wrap">
11 <button open-type="share" class="btn"> 11 <button open-type="share" class=" btn btn2">
12 <span class="t1 iconfont iconplane"></span> 12 <span class="t1 iconfont iconplane"></span>
13 <span class="t1">分享给好友</span> 13 <span class="t1">分享给好友</span>
14 </button> 14 </button>
15 <button open-type="share" class="btn btn2"> 15 <button open-type="share" class="ani-scl btn ">
16 <span class="t1 iconfont iconplane"></span> 16 <span class="t1 iconfont iconplane"></span>
17 <span class="t1">分享到群</span> 17 <span class="t1">分享到群</span>
18 </button> 18 </button>
......
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5 $contentWidth: 670px; 5 $contentWidth: 730px;
6 padding-bottom: $pageBottom; 6 padding-bottom: $pageBottom;
7 7
8 color: #333333; 8 color: #333333;
9 font-size: 24px; 9 font-weight: bold;
10 10
11 .bgc { 11 .bgc {
12 background-color: #efefef; 12 background-color: #efefef;
...@@ -30,12 +30,12 @@ ...@@ -30,12 +30,12 @@
30 30
31 .swiper { 31 .swiper {
32 width: $contentWidth; 32 width: $contentWidth;
33 height: 280px; 33 height: 320px;
34 margin: 0 auto; 34 margin: 0 auto;
35 35
36 .swiper-image { 36 .swiper-image {
37 width: $contentWidth; 37 width: $contentWidth;
38 height: 250px; 38 height: 320px;
39 } 39 }
40 } 40 }
41 41
...@@ -43,15 +43,16 @@ ...@@ -43,15 +43,16 @@
43 position: absolute; 43 position: absolute;
44 bottom: 12px; 44 bottom: 12px;
45 width: 750px; 45 width: 750px;
46 height: 64px; 46 height: 80px;
47 line-height: 64px; 47 line-height: 80px;
48 left: 0; 48 left: 0;
49 right: 0; 49 right: 0;
50 margin: 0 auto; 50 margin: 0 auto;
51 text-align: center; 51 text-align: center;
52 background-color: rgba($color: #000000, $alpha: 0.7); 52 background-color: rgba($color: #000000, $alpha: 0.7);
53 color: #ffffff; 53 color: #ffffff;
54 font-size: 30px; 54 font-size: 36px;
55 font-weight: bold;
55 56
56 } 57 }
57 } 58 }
...@@ -74,6 +75,10 @@ ...@@ -74,6 +75,10 @@
74 width: $contentWidth; 75 width: $contentWidth;
75 background-color: #dddddd; 76 background-color: #dddddd;
76 77
78 .img{
79 width: $contentWidth;
80 }
81
77 .vid { 82 .vid {
78 @include border-top-radius(16px); 83 @include border-top-radius(16px);
79 width: $contentWidth; 84 width: $contentWidth;
...@@ -98,6 +103,7 @@ ...@@ -98,6 +103,7 @@
98 103
99 .iconfont { 104 .iconfont {
100 font-size: 160px; 105 font-size: 160px;
106 font-weight: normal;
101 position: absolute; 107 position: absolute;
102 left: 0; 108 left: 0;
103 right: 0; 109 right: 0;
...@@ -131,6 +137,7 @@ ...@@ -131,6 +137,7 @@
131 .name { 137 .name {
132 padding-left: 24px; 138 padding-left: 24px;
133 font-size: 32px; 139 font-size: 32px;
140
134 @include ellipsis(1); 141 @include ellipsis(1);
135 } 142 }
136 } 143 }
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
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}}"> 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}}">
15 <block wx:for="{{bannerList}}" wx:key="{{index}}"> 15 <block wx:for="{{bannerList}}" wx:key="{{index}}">
16 <swiper-item> 16 <swiper-item>
17 <image class="swiper-image" src="{{item.imageUrl}}" mode="aspectFill" /> 17 <image bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="swiper-image" src="{{item.imageUrl}}" mode="aspectFill" />
18 </swiper-item> 18 </swiper-item>
19 </block> 19 </block>
20 </swiper> 20 </swiper>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
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 <!-- <video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" /> --> 29 <!-- <video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" /> -->
30 <image src="{{item.thumbnail}}" mode="aspectFill" /> 30 <image class="img" src="{{item.thumbnail}}" mode="aspectFill" />
31 <view class="tit">{{item.videoName}}</view> 31 <view class="tit">{{item.videoName}}</view>
32 <span class="iconfont iconicon-test16"></span> 32 <span class="iconfont iconicon-test16"></span>
33 </view> 33 </view>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <image class="portrait" mode="aspectFill" src="{{item.headImage}}" /> 36 <image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
37 <text class="name">{{item.accountName || ""}}</text> 37 <text class="name">{{item.accountName || ""}}</text>
38 </view> 38 </view>
39 <button class="share" open-type="share"> 39 <button class="share ani-scl" open-type="share">
40 <span class="t1 iconfont iconwechat"></span> 40 <span class="t1 iconfont iconwechat"></span>
41 <span class="t1">分享</span> 41 <span class="t1">分享</span>
42 </button> 42 </button>
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 <image class="portrait" mode="aspectFill" src="{{personInfo.headImage}}" /> 23 <image class="portrait" mode="aspectFill" src="{{personInfo.headImage}}" />
24 <text class="name">{{personInfo.accountName || ""}}</text> 24 <text class="name">{{personInfo.accountName || ""}}</text>
25 </view> 25 </view>
26 <button class="share" open-type="share"> 26 <button class="share ani-scl" open-type="share">
27 <span class="t1 iconfont iconwechat"></span> 27 <span class="t1 iconfont iconwechat"></span>
28 <span class="t1">分享</span> 28 <span class="t1">分享</span>
29 </button> 29 </button>
......