| { | { | ||||
| "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"; | |||||
| } |