{ | { | ||||
"pages": [ | "pages": [ | ||||
"pages/everyday/everyday", | |||||
"pages/star/star", | "pages/star/star", | ||||
"pages/index/index", | "pages/index/index", | ||||
"pages/logs/logs", | "pages/logs/logs", |
padding: 200rpx 0; | padding: 200rpx 0; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
} | } | ||||
image{ | |||||
display: block; | |||||
} | |||||
.showView{ | |||||
position: relative; | |||||
height: calc(100vh - 153rpx); | |||||
background-color: #ffffff | |||||
} |
// pages/everyday/everyday.js | |||||
const app = getApp() | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
imgUrl: app.globalData.urlStatic,//图片路径 | |||||
maskShow: true, | |||||
taskShow: true, | |||||
taskName:'集齐启辰星【大灯】碎片', | |||||
taskImgUrl:'https://www.jiyou-tech.com/2020/496_qichen/static/star/everyday/taskImg1.png', | |||||
isSign:true, | |||||
isShare:false, | |||||
}, | |||||
/** | |||||
* 关闭任务窗 | |||||
*/ | |||||
hiddenTask:function(){ | |||||
this.setData({ | |||||
maskShow: false, | |||||
taskShow: false | |||||
}) | |||||
}, | |||||
/** | |||||
* 签到 | |||||
*/ | |||||
signIn(){ | |||||
this.setData({ | |||||
taskName: '集齐启辰星【大灯】碎片1/4', | |||||
taskImgUrl: 'https://www.jiyou-tech.com/2020/496_qichen/static/star/everyday/taskImg2.png', | |||||
isSign: false, | |||||
isShare: true | |||||
}) | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
} | |||||
}) |
{ | |||||
"usingComponents": {} | |||||
} |
<!--pages/everyday/everyday.wxml--> | |||||
<view id="everyday" class="showView"> | |||||
<image class="showImg" src="{{imgUrl+'/star/everyday/show.jpg'}}"></image> | |||||
<view class="ruleBtn">游戏规则</view> | |||||
<view class="title">集碎片,攒红包</view> | |||||
<view class="menuBox"> | |||||
<image class="menu" src="{{imgUrl+'/star/everyday/menu.png'}}"></image> | |||||
<view class="leftTitle">操控</view> | |||||
<view class="centerTitle">外观模块</view> | |||||
<view class="rightTitle">内饰</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> | |||||
<view class="title">今日任务</view> | |||||
<view class="contentBox"> | |||||
<view class="name">{{taskName}}</view> | |||||
<image class="taskImg" src="{{taskImgUrl}}"></image> | |||||
<view class="btn" wx:if="{{isSign}}" bindtap="signIn">签到解锁</view> | |||||
<view class="btn" wx:if="{{isShare}}">分享再获取一张碎片</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> |
/* pages/everyday/everyday.wxss */ | |||||
.showImg { | |||||
position: relative; | |||||
width: 750rpx; | |||||
height: 616rpx; | |||||
} | |||||
.ruleBtn { | |||||
right: 0; | |||||
top: 180rpx; | |||||
position: absolute; | |||||
width: 153rpx; | |||||
height: 46rpx; | |||||
line-height: 46rpx; | |||||
font-size: 24rpx; | |||||
color: #fff; | |||||
background-color: rgba(35, 24, 21, 0.63); | |||||
border-top-left-radius: 20rpx; | |||||
border-bottom-left-radius: 20rpx; | |||||
padding-left: 20rpx; | |||||
box-sizing: border-box; | |||||
} | |||||
.title { | |||||
height: 110rpx; | |||||
line-height: 110rpx; | |||||
width: 100%; | |||||
text-align: center; | |||||
font-size: 36rpx; | |||||
font-weight: bold; | |||||
} | |||||
.menuBox { | |||||
position: relative; | |||||
width: 535rpx; | |||||
height: 58rpx; | |||||
margin: 0 auto; | |||||
} | |||||
.menu { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.menuBox>view { | |||||
position: absolute; | |||||
bottom: 0; | |||||
font-size: 16rpx; | |||||
text-align: center; | |||||
} | |||||
.menuBox>.leftTitle { | |||||
left: 38rpx; | |||||
width: 54rpx; | |||||
height: 38rpx; | |||||
line-height: 38rpx; | |||||
} | |||||
.menuBox>.centerTitle { | |||||
left: 95rpx; | |||||
width: 345rpx; | |||||
height: 56rpx; | |||||
line-height: 56rpx; | |||||
color: #fff; | |||||
font-size: 29rpx; | |||||
} | |||||
.menuBox>.rightTitle { | |||||
right: 38rpx; | |||||
width: 54rpx; | |||||
height: 38rpx; | |||||
line-height: 38rpx; | |||||
} | |||||
.mask { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
background-color: rgba(0, 0, 0, 0.5); | |||||
} | |||||
.taskBox{ | |||||
position: relative; | |||||
width: 567rpx; | |||||
height: 649rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
.taskBox>.title{ | |||||
height: 77rpx; | |||||
line-height: 77rpx; | |||||
color: #ffffff; | |||||
border-top-left-radius: 20rpx; | |||||
border-top-right-radius: 20rpx; | |||||
background-color: #345486; | |||||
} | |||||
.taskBox>.contentBox{ | |||||
position: relative; | |||||
width: 100%; | |||||
height: calc(100% - 77rpx); | |||||
background-color: #ffffff; | |||||
border-bottom-left-radius: 20rpx; | |||||
border-bottom-right-radius: 20rpx; | |||||
} | |||||
.taskBox>.contentBox>.name{ | |||||
width: 100%; | |||||
height: 107rpx; | |||||
line-height: 107rpx; | |||||
font-size: 33rpx; | |||||
text-align: center; | |||||
padding-top: 38rpx; | |||||
font-weight: bold; | |||||
} | |||||
.taskBox>.contentBox>.taskImg{ | |||||
width: 488rpx; | |||||
height: 268rpx; | |||||
margin: 0 auto; | |||||
border-radius: 19rpx; | |||||
} | |||||
.taskBox>.contentBox>.btn{ | |||||
width: 347rpx; | |||||
height: 62rpx; | |||||
line-height: 62rpx; | |||||
text-align: center; | |||||
color: #ffffff; | |||||
font-size: 28rpx; | |||||
border-radius: 10rpx; | |||||
margin: 42rpx auto 0 auto; | |||||
background-color: #345486; | |||||
} | |||||
.closeBtn { | |||||
background: none; | |||||
border: 2rpx solid #fff; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
text-align: center; | |||||
height: 40rpx; | |||||
line-height: 40rpx; | |||||
width: 40rpx; | |||||
font-size: 30rpx; | |||||
padding: 2rpx; | |||||
position: absolute; | |||||
} | |||||
/* use cross as close button */ | |||||
.closeBtn::before { | |||||
content: "\2716"; | |||||
} |
*/ | */ | ||||
data: { | data: { | ||||
imgUrl: app.globalData.urlStatic,//图片路径 | imgUrl: app.globalData.urlStatic,//图片路径 | ||||
maskShow: false, | |||||
ruleShow:false, | |||||
}, | }, | ||||
/** | /** | ||||
* 显示规则页 | * 显示规则页 | ||||
*/ | */ | ||||
showRule:function(){ | showRule:function(){ | ||||
console.log('显示规则') | |||||
this.setData({ | |||||
maskShow:true, | |||||
ruleShow:true | |||||
}) | |||||
}, | |||||
/** | |||||
* 关闭规则页 | |||||
*/ | |||||
hiddenRule:function(){ | |||||
this.setData({ | |||||
maskShow: false, | |||||
ruleShow: false | |||||
}) | |||||
}, | |||||
/** | |||||
* 每日任务 | |||||
*/ | |||||
everyDay:function(){ | |||||
wx.navigateTo({ | |||||
url:'../everyday/everyday' | |||||
}) | |||||
}, | }, | ||||
/** | /** |
<view class="propagandaBox"></view> | <view class="propagandaBox"></view> | ||||
<view class="btnBox"> | <view class="btnBox"> | ||||
<view class="btn">星探任务</view> | <view class="btn">星探任务</view> | ||||
<view class="btn">每日任务</view> | |||||
<view class="btn" bindtap="everyDay">每日任务</view> | |||||
</view> | |||||
</view> | |||||
<view class="mask" wx:if="{{maskShow}}"> | |||||
<view class="ruleContent"> | |||||
<image class="rule" src="{{imgUrl+'/star/rule.png'}}"></image> | |||||
<text class="closeBtn" style="right:-40rpx;top:-45rpx;" bindtap="hiddenRule"></text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> |
/* pages/star/star.wxss */ | /* pages/star/star.wxss */ | ||||
.showView{ | |||||
height: calc(100vh - 153rpx); | |||||
background-color: #ffffff | |||||
} | |||||
.home{ | |||||
.home { | |||||
position: relative; | position: relative; | ||||
height: 100%; | height: 100%; | ||||
overflow: hidden; | overflow: hidden; | ||||
} | } | ||||
.home>.bg{ | |||||
.home>.bg { | |||||
position: absolute; | position: absolute; | ||||
bottom: 0; | bottom: 0; | ||||
width: 750rpx; | width: 750rpx; | ||||
height: 1353rpx; | height: 1353rpx; | ||||
} | } | ||||
.home>.logo1{ | |||||
.home>.logo1 { | |||||
position: absolute; | position: absolute; | ||||
top: 0; | top: 0; | ||||
left: 60rpx; | left: 60rpx; | ||||
width: 175rpx; | width: 175rpx; | ||||
height: 150rpx; | height: 150rpx; | ||||
} | } | ||||
.home>.logo2{ | |||||
.home>.logo2 { | |||||
position: absolute; | position: absolute; | ||||
top: 46rpx; | top: 46rpx; | ||||
right: 34rpx; | right: 34rpx; | ||||
width: 204rpx; | width: 204rpx; | ||||
height: 40rpx; | height: 40rpx; | ||||
} | } | ||||
.ruleBtn{ | |||||
.ruleBtn { | |||||
position: absolute; | position: absolute; | ||||
width: 153rpx; | width: 153rpx; | ||||
height: 46rpx; | height: 46rpx; | ||||
font-size: 24rpx; | font-size: 24rpx; | ||||
right: 0; | right: 0; | ||||
top: 196rpx; | top: 196rpx; | ||||
color: #ffffff; | |||||
color: #fff; | |||||
background-color: rgba(35, 24, 21, 0.63); | background-color: rgba(35, 24, 21, 0.63); | ||||
border-top-left-radius: 20rpx; | border-top-left-radius: 20rpx; | ||||
border-bottom-left-radius: 20rpx; | border-bottom-left-radius: 20rpx; | ||||
padding-left: 20rpx; | padding-left: 20rpx; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
} | } | ||||
.propagandaBox{ | |||||
.propagandaBox { | |||||
position: absolute; | position: absolute; | ||||
width: 100%; | width: 100%; | ||||
height: 76rpx; | height: 76rpx; | ||||
text-align: center; | text-align: center; | ||||
background-color: rgba(11, 40, 109, 0.79); | background-color: rgba(11, 40, 109, 0.79); | ||||
} | } | ||||
.home>.btnBox{ | |||||
position: absolute; | |||||
width: 100%; | |||||
text-align: center; | |||||
left: 0; | |||||
bottom: 15rpx; | |||||
.home>.btnBox { | |||||
position: absolute; | |||||
width: 100%; | |||||
text-align: center; | |||||
left: 0; | |||||
bottom: 15rpx; | |||||
} | } | ||||
.home>.btnBox>.btn{ | |||||
.home>.btnBox>.btn { | |||||
width: 278rpx; | width: 278rpx; | ||||
height: 47rpx; | |||||
height: 47rpx; | |||||
line-height: 47rpx; | line-height: 47rpx; | ||||
display: inline-block; | display: inline-block; | ||||
background-color: #345489; | background-color: #345489; | ||||
margin: 0 10rpx; | margin: 0 10rpx; | ||||
color: #ffffff; | |||||
color: #fff; | |||||
font-size: 21rpx; | font-size: 21rpx; | ||||
border-radius: 15rpx; | border-radius: 15rpx; | ||||
} | |||||
} | |||||
.mask { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
background-color: rgba(0, 0, 0, 0.5); | |||||
} | |||||
.mask>.ruleContent { | |||||
position: relative; | |||||
width: 562rpx; | |||||
height: 971rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
.mask>.ruleContent>.rule { | |||||
position: relative; | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.closeBtn { | |||||
background: none; | |||||
border: 2rpx solid #fff; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
text-align: center; | |||||
height: 40rpx; | |||||
line-height: 40rpx; | |||||
width: 40rpx; | |||||
font-size: 30rpx; | |||||
padding: 2rpx; | |||||
position: absolute; | |||||
} | |||||
/* use cross as close button */ | |||||
.closeBtn::before { | |||||
content: "\2716"; | |||||
} |