@@ -8,5 +8,6 @@ image{ | |||
.showView{ | |||
position: relative; | |||
height: calc(100vh - 153rpx); | |||
background-color: #ffffff | |||
background-color: #ffffff; | |||
overflow: scroll; | |||
} |
@@ -7,12 +7,14 @@ Page({ | |||
*/ | |||
data: { | |||
imgUrl: app.globalData.urlStatic,//图片路径 | |||
maskShow: true, | |||
taskShow: true, | |||
maskShow: false, | |||
taskShow: false, | |||
taskName:'集齐启辰星【大灯】碎片', | |||
taskImgUrl:'https://www.jiyou-tech.com/2020/496_qichen/static/star/everyday/taskImg1.png', | |||
isSign:true, | |||
isShare:false, | |||
picturlList: ['picturePuzzle1', 'picturePuzzle1','picturePuzzle1'], | |||
picturlCurrent:0, | |||
}, | |||
/** | |||
* 关闭任务窗 | |||
@@ -34,6 +36,27 @@ Page({ | |||
isShare: true | |||
}) | |||
}, | |||
/** | |||
* 下个碎片 | |||
*/ | |||
nextPicturl(){ | |||
var max = this.data.picturlList.length-1; | |||
var current = this.data.picturlCurrent + 1; | |||
if (current <= max){ | |||
this.setData({ | |||
picturlCurrent: current | |||
}) | |||
} | |||
}, | |||
//上一个碎片 | |||
prevPicturl(){ | |||
var current = this.data.picturlCurrent - 1; | |||
if (current >= 0) { | |||
this.setData({ | |||
picturlCurrent: current | |||
}) | |||
} | |||
}, | |||
/** | |||
* 生命周期函数--监听页面加载 |
@@ -1,3 +1,5 @@ | |||
{ | |||
"usingComponents": {} | |||
"usingComponents": { | |||
"tabBar": "../component/tabBar/index" | |||
} | |||
} |
@@ -9,6 +9,23 @@ | |||
<view class="centerTitle">外观模块</view> | |||
<view class="rightTitle">内饰</view> | |||
</view> | |||
<view class="swiperBox"> | |||
<swiper current="{{picturlCurrent}}"> | |||
<block wx:for="{{picturlList}}" wx:key="*this"> | |||
<swiper-item> | |||
<view class="fragmentBox"> | |||
<image class="fragmentComplete" src="{{imgUrl+'/star/everyday/'+item+'.png'}}"></image> | |||
</view> | |||
</swiper-item> | |||
</block> | |||
</swiper> | |||
<image class="arrowBtn" style="left:-30rpx;" src="{{imgUrl+'/star/everyday/arrowLeftBtn.png'}}" bindtap="prevPicturl"></image> | |||
<image class="arrowBtn" style="right:-30rpx;" src="{{imgUrl+'/star/everyday/arrowRightBtn.png'}}" bindtap="nextPicturl"></image> | |||
</view> | |||
<view class="btnBox"> | |||
<view class="btn" style="margin-right:20rpx;">星探任务</view> | |||
<view class="btn select" style="margin-left:20rpx;">每日任务</view> | |||
</view> | |||
<view class="mask" wx:if="{{maskShow}}"> | |||
<view class="taskBox" wx:if="{{taskShow}}"> | |||
<text class="closeBtn" style="right:-35rpx;top:-50rpx;" bindtap="hiddenTask"></text> | |||
@@ -21,4 +38,5 @@ | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<tabBar></tabBar> |
@@ -72,6 +72,57 @@ | |||
height: 38rpx; | |||
line-height: 38rpx; | |||
} | |||
.swiperBox{ | |||
position: relative; | |||
width: 615rpx; | |||
height: 424rpx; | |||
margin: 24rpx auto 0 auto; | |||
} | |||
.swiperBox>swiper{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.swiperBox>.arrowBtn{ | |||
position: absolute; | |||
width: 13rpx; | |||
height: 29rpx; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
} | |||
.fragmentBox{ | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 26rpx; | |||
} | |||
.fragmentBox>.fragmentComplete{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.btnBox{ | |||
position: relative; | |||
width: 615rpx; | |||
height: 49rpx; | |||
text-align: center; | |||
margin: 48rpx auto 0 auto; | |||
} | |||
.btnBox>.btn{ | |||
display: inline-block; | |||
width: 279rpx; | |||
height: 100%; | |||
line-height: 49rpx; | |||
text-align: center; | |||
border: 1rpx solid #345489; | |||
box-sizing: border-box; | |||
font-size: 21rpx; | |||
color: #333333; | |||
border-radius: 15rpx; | |||
} | |||
.btnBox>.btn.select{ | |||
background-color: #345489; | |||
color: #ffffff; | |||
} | |||
.mask { | |||
position: absolute; |
@@ -1,3 +1,5 @@ | |||
{ | |||
"usingComponents": {} | |||
"usingComponents": { | |||
"tabBar": "../component/tabBar/index" | |||
} | |||
} |
@@ -17,4 +17,5 @@ | |||
<text class="closeBtn" style="right:-40rpx;top:-45rpx;" bindtap="hiddenRule"></text> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<tabBar></tabBar> |