170 lines
4.2 KiB
Vue
170 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="signin">
|
|
<view class="bold-700 title">每日签到</view>
|
|
<view class="day">
|
|
<text class="lg">已经连续签到</text>
|
|
<text class="">1天</text>
|
|
</view>
|
|
<view class="row-between u-m-t-32 u-m-l-24 u-m-r-24">
|
|
<view class="sigin-day expire column-center">
|
|
<view class="date mt10">第一天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_gray.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x20</view>
|
|
</view>
|
|
|
|
<view class="sigin-day normal column-center">
|
|
<view class="date mt10">第二天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x40</view>
|
|
</view>
|
|
|
|
<view class="sigin-day normal column-center">
|
|
<view class="date mt10">第三天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x60</view>
|
|
</view>
|
|
|
|
<view class="sigin-day normal column-center">
|
|
<view class="date mt10">第四天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x80</view>
|
|
</view>
|
|
|
|
<view class="sigin-day normal column-center">
|
|
<view class="date mt10">第五天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x100</view>
|
|
</view>
|
|
|
|
<view class="sigin-day normal column-center">
|
|
<view class="date mt10">第六天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x120</view>
|
|
</view>
|
|
|
|
<view class="sigin-day last column-center">
|
|
<view class="date mt10">第七天</view>
|
|
<view class="mt10">
|
|
<u-image :src="cloudPath + 'img/icon_signin_white.png'" width="30" height="30"></u-image>
|
|
</view>
|
|
<view class="points mt10">x140</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-26 signin-btn">
|
|
签到
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-white ad row-between u-padding-left-20 u-padding-right-20">
|
|
<view class="row">
|
|
<view>
|
|
<u-image :src="cloudPath + 'img/red-packet.png'" width="90" height="90"></u-image>
|
|
</view>
|
|
<view class="ml20">
|
|
<view class="bold-600 xs">看广告获取积分</view>
|
|
<view class="text-AE xxs u-m-t-12">每日观看5分钟最高可领取376金币</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, width: '120rpx', height: '60rpx', fontSize: '28rpx'}" :plain="true" :hair-line="false" shape="circle">看广告</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.signin {
|
|
height: 570rpx;
|
|
margin: 24rpx 20rpx 0;
|
|
background-image: url(http://jianbing-media.stnav.com/frontend/img/signin-bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
padding-top: 70rpx;
|
|
}
|
|
|
|
.day {
|
|
margin-top: 72rpx;
|
|
margin-left: 24rpx;
|
|
|
|
& > text:first-child {
|
|
color: #141414;
|
|
}
|
|
|
|
& > text:last-child {
|
|
color: #099DF1;
|
|
font-size: 40rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
|
|
.expire {
|
|
background-color: #eee;
|
|
color: #AFAFAF;
|
|
}
|
|
|
|
.normal {
|
|
background-color: #F5F5F4;
|
|
}
|
|
|
|
.last {
|
|
background: linear-gradient( 137deg, #099DF1 0%, #7BC7F2 100%);
|
|
}
|
|
|
|
.sigin-day {
|
|
width: 80rpx;
|
|
height: 150rpx;
|
|
border-radius: 40rpx;
|
|
padding: 8rpx;
|
|
|
|
.date,
|
|
.points {
|
|
white-space: nowrap;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.signin-btn {
|
|
background-color: #099DF1;
|
|
border-radius: 48rpx;
|
|
color: #fff;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
margin: 0 120rpx;
|
|
}
|
|
}
|
|
|
|
.ad {
|
|
height: 140rpx;
|
|
margin: 36rpx 20rpx;
|
|
border-radius: 18rpx;
|
|
|
|
.text-AE {
|
|
color: #AEAEAE;
|
|
}
|
|
}
|
|
</style> |