福利屋
This commit is contained in:
parent
7972cb88d3
commit
a1397f0aa1
|
|
@ -94,7 +94,7 @@
|
||||||
|
|
||||||
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||||||
<view class="tab">
|
<view class="tab">
|
||||||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '购买说明')">
|
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
|
||||||
<text>规则说明</text>
|
<text>规则说明</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,13 @@
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<uni-nav-bar title="签到任务" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
|
<uni-nav-bar title="签到任务" color="#000000" left-icon="left" backgroundColor="transparent" :border="false"
|
||||||
:statusBar="true" :fixed="true" @clickLeft="$c.back()"></uni-nav-bar>
|
:statusBar="true" :fixed="true" @clickLeft="$c.back()"></uni-nav-bar>
|
||||||
|
|
||||||
|
<view class="" style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 56rpx auto 0;">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="page-hd">
|
<view class="page-hd">
|
||||||
<view class="title">签到任务</view>
|
<view class="title">签到任务</view>
|
||||||
|
|
||||||
|
|
@ -77,232 +81,232 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
signData: [],
|
signData: [],
|
||||||
sucData: '',
|
sucData: '',
|
||||||
is_sign: 0
|
is_sign: 0
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
onLoad(options) {
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doSign() {
|
|
||||||
this.req({
|
|
||||||
url: 'sign_add',
|
|
||||||
data: {},
|
|
||||||
success: res => {
|
|
||||||
if (res.status == 1) {
|
|
||||||
this.sucData = res.data
|
|
||||||
|
|
||||||
this.$refs.sucPop.open()
|
|
||||||
|
|
||||||
this.getData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getData() {
|
onLoad(options) {
|
||||||
this.req({
|
this.getData()
|
||||||
url: 'sign',
|
},
|
||||||
data: {},
|
methods: {
|
||||||
success: res => {
|
doSign() {
|
||||||
if (res.status == 1) {
|
this.req({
|
||||||
this.signData = res.data.sign
|
url: 'sign_add',
|
||||||
this.is_sign = res.data.sign.is_sign
|
data: {},
|
||||||
|
success: res => {
|
||||||
|
if (res.status == 1) {
|
||||||
|
this.sucData = res.data
|
||||||
|
|
||||||
|
this.$refs.sucPop.open()
|
||||||
|
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
})
|
},
|
||||||
|
|
||||||
|
getData() {
|
||||||
|
this.req({
|
||||||
|
url: 'sign',
|
||||||
|
data: {},
|
||||||
|
success: res => {
|
||||||
|
if (res.status == 1) {
|
||||||
|
this.signData = res.data.sign
|
||||||
|
this.is_sign = res.data.sign.is_sign
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.content {
|
.content {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 1rpx 0 40rpx;
|
|
||||||
|
|
||||||
.page-hd {
|
|
||||||
padding: 20rpx 30rpx 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 60rpx;
|
|
||||||
font-family: YouSheBiaoTiHei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
text-shadow: 0rpx 0rpx 12rpx rgba(255, 135, 58, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-box {
|
|
||||||
width: 710rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 30rpx 40rpx 40rpx;
|
padding: 1rpx 0 40rpx;
|
||||||
margin: 30rpx auto 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.sign-item {
|
.page-hd {
|
||||||
width: 150rpx;
|
padding: 20rpx 30rpx 0;
|
||||||
height: 165rpx;
|
|
||||||
background: #ff873a;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
justify-content: space-between;
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10rpx;
|
|
||||||
border: 2rpx solid #FFFFFF;
|
|
||||||
|
|
||||||
.day {
|
.title {
|
||||||
font-size: 24rpx;
|
font-size: 60rpx;
|
||||||
font-family: Source Han Sans CN;
|
font-family: YouSheBiaoTiHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #dddddd;
|
color: #ffffff;
|
||||||
|
text-shadow: 0rpx 0rpx 12rpx rgba(255, 135, 58, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 50rpx;
|
width: 40rpx;
|
||||||
height: 50rpx;
|
height: 40rpx;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.num {
|
.sign-box {
|
||||||
font-size: 20rpx;
|
width: 710rpx;
|
||||||
font-family: Source Han Sans CN;
|
box-sizing: border-box;
|
||||||
font-weight: 400;
|
padding: 30rpx 40rpx 40rpx;
|
||||||
color: #FFFFFF;
|
margin: 30rpx auto 0;
|
||||||
}
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
&.act {
|
.sign-item {
|
||||||
position: relative;
|
width: 150rpx;
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '已签';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-family: Alimama ShuHeiTi;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.large {
|
|
||||||
width: 310rpx;
|
|
||||||
height: 165rpx;
|
height: 165rpx;
|
||||||
flex-flow: row nowrap;
|
background: #ff873a;
|
||||||
justify-content: space-around;
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
|
||||||
.item-l {
|
.day {
|
||||||
height: 120rpx;
|
font-size: 24rpx;
|
||||||
display: flex;
|
font-family: Source Han Sans CN;
|
||||||
flex-flow: column nowrap;
|
font-weight: 400;
|
||||||
align-items: center;
|
color: #dddddd;
|
||||||
|
|
||||||
.num {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 120rpx;
|
width: 50rpx;
|
||||||
height: 100rpx;
|
height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
>image:nth-child(1) {
|
.num {
|
||||||
width: 34rpx;
|
font-size: 20rpx;
|
||||||
height: 34rpx;
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.act {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '已签';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10rpx;
|
width: 100%;
|
||||||
bottom: 10rpx;
|
height: 100%;
|
||||||
transform: rotate(-28deg);
|
font-family: Alimama ShuHeiTi;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: 310rpx;
|
||||||
|
height: 165rpx;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-l {
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>image:nth-child(2) {
|
.icon {
|
||||||
width: 72rpx;
|
width: 120rpx;
|
||||||
height: 72rpx;
|
height: 100rpx;
|
||||||
position: absolute;
|
|
||||||
top: 10rpx;
|
>image:nth-child(1) {
|
||||||
right: 10rpx;
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 10rpx;
|
||||||
|
bottom: 10rpx;
|
||||||
|
transform: rotate(-28deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
>image:nth-child(2) {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
right: 10rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.sign-btn {
|
.sign-btn {
|
||||||
margin: 40rpx auto 0;
|
margin: 40rpx auto 0;
|
||||||
width: 400rpx;
|
width: 400rpx;
|
||||||
height: 122rpx;
|
height: 122rpx;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signYes {
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signNo {
|
|
||||||
color: #FFFFFF;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.suc-pop {
|
|
||||||
width: 100vw;
|
|
||||||
height: 642rpx;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
|
|
||||||
.coin-img {
|
|
||||||
width: 345rpx;
|
|
||||||
height: 345rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coin-num {
|
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-family: Source Han Sans CN;
|
font-family: Source Han Sans CN;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #ffffff;
|
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.signYes {
|
||||||
width: 378rpx;
|
color: #FFFFFF;
|
||||||
height: 80rpx;
|
}
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
.signNo {
|
||||||
bottom: 40rpx;
|
color: #FFFFFF;
|
||||||
transform: translate(-50%, 200%);
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.suc-pop {
|
||||||
|
width: 100vw;
|
||||||
|
height: 642rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
.coin-img {
|
||||||
|
width: 345rpx;
|
||||||
|
height: 345rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-num {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
width: 378rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 40rpx;
|
||||||
|
transform: translate(-50%, 200%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
28
pages.json
28
pages.json
|
|
@ -435,6 +435,34 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/infinite/daily_check_in",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/infinite/bonus_house",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/infinite/bonus_house_details",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/infinite/VIP_perks",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
|
|
|
||||||
60
pages/infinite/VIP_perks.vue
Normal file
60
pages/infinite/VIP_perks.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||||
|
<uni-icons type="left" color="#000000"></uni-icons>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title1">VIP福利</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLeft {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
height: 44px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
width: 100%;
|
||||||
|
top: 108rpx;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 34rpx;
|
||||||
|
justify-content: center;
|
||||||
|
color: black;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -2,6 +2,11 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||||
|
<uni-icons type="left" color="#000000"></uni-icons>
|
||||||
|
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="title1">福利</view>
|
<view class="title1">福利</view>
|
||||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||||
<view class="list relative">
|
<view class="list relative">
|
||||||
|
|
@ -75,13 +80,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.current = 0
|
// this.current = 0
|
||||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
// const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||||
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
// if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||||
this.$mp.page.getTabBar().setData({
|
// this.$mp.page.getTabBar().setData({
|
||||||
selected: 1
|
// selected: 1
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
let that = this
|
let that = this
|
||||||
|
|
@ -114,6 +119,18 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.navLeft {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
height: 44px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
.title1 {
|
.title1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 108rpx;
|
top: 108rpx;
|
||||||
|
|
@ -123,7 +140,7 @@
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: black;
|
color: black;
|
||||||
z-index: 100;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeImg {
|
.activeImg {
|
||||||
|
|
|
||||||
325
pages/infinite/bonus_house.vue
Normal file
325
pages/infinite/bonus_house.vue
Normal file
|
|
@ -0,0 +1,325 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||||
|
<uni-icons type="left" color="#000000"></uni-icons>
|
||||||
|
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title1">福利屋</view>
|
||||||
|
|
||||||
|
<view class="" style="height: 232rpx;"></view>
|
||||||
|
|
||||||
|
<view class=""
|
||||||
|
style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 0 auto 0;">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||||||
|
<view class="tab">
|
||||||
|
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
|
||||||
|
<text>规则说明</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
||||||
|
<text>进行中</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-item3 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
|
||||||
|
<text>已结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 进行中 -->
|
||||||
|
<view v-if="tabCur == 1" class=""
|
||||||
|
style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||||
|
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||||
|
<view class="relative" v-for="(item,index) in benefitsData" @click="$c.to({url: '/pages/infinite/bonus_house_details'})"
|
||||||
|
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
|
||||||
|
<text
|
||||||
|
style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>
|
||||||
|
|
||||||
|
<view class="center"
|
||||||
|
style="width: 128rpx; height: 60rpx; background-color: #D8FD24; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||||
|
<text style="font-size: 20rpx; color: #333333; font-weight: 600;">马上参与</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-x="true"
|
||||||
|
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||||
|
<view v-for="(item1,index) in item.GoodsList" class="relative" :key="index1"
|
||||||
|
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||||
|
|
||||||
|
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||||
|
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||||
|
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||||
|
<view class="center"
|
||||||
|
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||||
|
<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class=""
|
||||||
|
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||||
|
</view>
|
||||||
|
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||||
|
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||||
|
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 已结束 -->
|
||||||
|
<view v-else class="" style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||||
|
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||||
|
<view class="relative" v-for="(item,index) in benefitsData"
|
||||||
|
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
|
||||||
|
<text
|
||||||
|
style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>
|
||||||
|
|
||||||
|
<view class="center"
|
||||||
|
style="width: 128rpx; height: 60rpx; background-color: #333333; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||||
|
<text style="font-size: 20rpx; color: #D8FD24; font-weight: 600;">已结束</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-x="true"
|
||||||
|
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||||
|
<view v-for="(item1,index1) in item.GoodsList" class="relative" :key="index1"
|
||||||
|
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||||
|
|
||||||
|
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||||
|
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||||
|
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||||
|
<view class="center"
|
||||||
|
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||||
|
<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class=""
|
||||||
|
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||||
|
</view>
|
||||||
|
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||||
|
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||||
|
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="row center" style="margin-top: 20rpx;">
|
||||||
|
<view class="center" style="width: 220rpx; height: 72rpx; background-color: #333333; border-radius: 16rpx;">
|
||||||
|
<text style="font-size: 24rpx; color: #D8FD24;">我的卡券</text>
|
||||||
|
</view>
|
||||||
|
<view class="center" style="width: 220rpx; height: 72rpx; background-color: #D8FD24; border-radius: 16rpx; margin-left: 38rpx;">
|
||||||
|
<text style="font-size: 24rpx; color: #333333;">赏品记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<rule-pop ref="rulePop"></rule-pop>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabCur: 1,
|
||||||
|
benefitsData: [{
|
||||||
|
title: "新人消费满5元福利屋",
|
||||||
|
tips: "消费返利（所有参与者有机会获得奖励",
|
||||||
|
isOngoing: true, //是否进行中
|
||||||
|
Popularity: 52, //热度
|
||||||
|
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||||
|
GoodsList: [{
|
||||||
|
imgUrl: "", //赏品图
|
||||||
|
num: 1, //数量
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, ],
|
||||||
|
}, {
|
||||||
|
title: "新人消费满10元福利屋",
|
||||||
|
tips: "消费返利（所有参与者有机会获得奖励",
|
||||||
|
isOngoing: true, //是否进行中
|
||||||
|
Popularity: 52, //热度
|
||||||
|
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||||
|
GoodsList: [{
|
||||||
|
imgUrl: "", //赏品图
|
||||||
|
num: 1, //数量
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, ]
|
||||||
|
}, {
|
||||||
|
title: "新人消费满15元福利屋",
|
||||||
|
tips: "消费返利（所有参与者有机会获得奖励",
|
||||||
|
isOngoing: true, //是否进行中
|
||||||
|
Popularity: 52, //热度
|
||||||
|
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||||
|
GoodsList: [{
|
||||||
|
imgUrl: "", //赏品图
|
||||||
|
num: 1, //数量
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
num: 1,
|
||||||
|
}, ]
|
||||||
|
}, ],
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabChange(i) {
|
||||||
|
this.tabCur = i
|
||||||
|
switch (Number(i)) {
|
||||||
|
case 1:
|
||||||
|
this.getData()
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
this.getData()
|
||||||
|
this.subTabChange(this.subTabCur)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLeft {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
height: 44px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
width: 100%;
|
||||||
|
top: 108rpx;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 34rpx;
|
||||||
|
justify-content: center;
|
||||||
|
color: black;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tab-item1 {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
background: url($imgurl + "index/uncheckTab1.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item2 {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
|
||||||
|
&.act {
|
||||||
|
background: url($imgurl + "index/checkTab2.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unact {
|
||||||
|
background: url($imgurl + "index/uncheckTab2.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item3 {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&.act {
|
||||||
|
background: url($imgurl + "index/checkTab3.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unact {
|
||||||
|
background: url($imgurl + "index/uncheckTab3.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
345
pages/infinite/bonus_house_details.vue
Normal file
345
pages/infinite/bonus_house_details.vue
Normal file
|
|
@ -0,0 +1,345 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||||
|
<uni-icons type="left" color="#000000"></uni-icons>
|
||||||
|
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title1">福利屋详情</view>
|
||||||
|
|
||||||
|
<view style="height: 232rpx;">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="relative"
|
||||||
|
style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
|
||||||
|
|
||||||
|
<image style="width: 108rpx; height: 108rpx;position: absolute; left: 24rpx; top: 22rpx;"
|
||||||
|
:src="$img1('checkin/logo2.png')"></image>
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{bonusDetailsData.Title}}</text>
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{bonusDetailsData.Tips}}</text>
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{bonusDetailsData.Time}}</text>
|
||||||
|
|
||||||
|
<view class="row center" style="position: absolute; left: 470rpx; top: 68rpx;">
|
||||||
|
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||||
|
<text
|
||||||
|
style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{bonusDetailsData.Popularity}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<image style="width: 50rpx; height: 50rpx; position: absolute; top: 50rpx; right: 24rpx;"
|
||||||
|
:src="$img1('checkin/ic_share.png')" mode=""></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class=""
|
||||||
|
style="width: 686rpx; height: 1010rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 24rpx auto 0;">
|
||||||
|
|
||||||
|
<view class="tab">
|
||||||
|
<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
|
||||||
|
:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
|
||||||
|
<text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 赏品预览 -->
|
||||||
|
<scroll-view v-if="tabCur==0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||||
|
<view style="height: 60rpx;"></view>
|
||||||
|
<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="grid-container">
|
||||||
|
<view class="grid-item column align-center" v-for="(item,index) in bonusDetailsData.GoodsList"
|
||||||
|
style="">
|
||||||
|
|
||||||
|
<image style="width: 112rpx; height: 112rpx;background-color: #D8D8D8; border-radius: 16rpx;"
|
||||||
|
:src="$img1('checkin/gem2.png')" mode=""></image>
|
||||||
|
|
||||||
|
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{item.Price}}</text>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
|
||||||
|
<scroll-view v-if="tabCur==1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||||
|
<view class="row align-center" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||||
|
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||||
|
|
||||||
|
<view class="center" style="width: 30rpx;">
|
||||||
|
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<image :src="item.Avatar"
|
||||||
|
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||||
|
mode=""></image>
|
||||||
|
|
||||||
|
<view class="column" style="margin-left: 16rpx;">
|
||||||
|
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||||
|
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<scroll-view v-if="tabCur==2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||||
|
<view class="row align-center relative" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||||
|
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||||
|
|
||||||
|
<view class="center" style="width: 30rpx;">
|
||||||
|
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<image :src="item.Avatar"
|
||||||
|
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||||
|
mode=""></image>
|
||||||
|
|
||||||
|
<view class="column" style="margin-left: 16rpx;">
|
||||||
|
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||||
|
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="row center" style="position: absolute; right: 56rpx;">
|
||||||
|
<image v-if="index==0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
|
||||||
|
mode=""></image>
|
||||||
|
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="column align-center"
|
||||||
|
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
|
||||||
|
|
||||||
|
<view class="center"
|
||||||
|
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
|
||||||
|
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：0天06：29：19</text>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabCur: 0,
|
||||||
|
bonusDetailsData: {
|
||||||
|
Title: "新人消费满5元福利屋",
|
||||||
|
Tips: "消费返利（所有参与者有机会获得奖励",
|
||||||
|
Time: "2025-03-10 14:00",
|
||||||
|
Popularity: 52, //热度
|
||||||
|
GoodsList: [{
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, {
|
||||||
|
imgUrl: "",
|
||||||
|
Price: "1000钻石",
|
||||||
|
}, ],
|
||||||
|
PlayerList: [{
|
||||||
|
Avatar: "", //头像
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, {
|
||||||
|
Avatar: "",
|
||||||
|
name: "微信名",
|
||||||
|
time: "2025-03-10 14:00"
|
||||||
|
}, ]
|
||||||
|
},
|
||||||
|
|
||||||
|
tabList: [
|
||||||
|
"赏品预览", "参与人数", "赏品记录"
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
tabChange(i) {
|
||||||
|
this.tabCur = i
|
||||||
|
|
||||||
|
switch (i) {
|
||||||
|
case 0:
|
||||||
|
this.subTabChange(this.subTabCur)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
this.listData = []
|
||||||
|
|
||||||
|
this.mescroll.resetUpScroll()
|
||||||
|
this.mescroll.scrollTo(0, 0)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLeft {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
height: 44px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
width: 100%;
|
||||||
|
top: 108rpx;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 34rpx;
|
||||||
|
justify-content: center;
|
||||||
|
color: black;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 60rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
width: 155rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 25rpx;
|
||||||
|
|
||||||
|
&.act {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 48rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unact {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 134rpx);
|
||||||
|
gap: 24rpx;
|
||||||
|
width: 580rpx;
|
||||||
|
margin: 28rpx auto 0;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
300
pages/infinite/daily_check_in.vue
Normal file
300
pages/infinite/daily_check_in.vue
Normal file
|
|
@ -0,0 +1,300 @@
|
||||||
|
<!-- 每日签到 -->
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||||
|
<uni-icons type="left" color="#000000"></uni-icons>
|
||||||
|
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title1">签到</view>
|
||||||
|
|
||||||
|
<view class="" style="height: 232rpx;"></view>
|
||||||
|
|
||||||
|
<view class=""
|
||||||
|
style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 0 auto 0;">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class=""
|
||||||
|
style="width: 686rpx; height: 838rpx; background-color: #fff; margin: 40rpx auto 0; border-radius: 16rpx;">
|
||||||
|
|
||||||
|
<view class="center" style="padding-top: 24rpx;">
|
||||||
|
<text style="color: #8A8A8A; font-size: 28rpx;">累计签到<text
|
||||||
|
style="color: #96B050;">{{checkinData.TotalCheckins}}</text>天</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 累计签到 -->
|
||||||
|
<view style="width: 100%; overflow: hidden;">
|
||||||
|
<scroll-view class="relative" scroll-x="true"
|
||||||
|
style="white-space: nowrap; margin-left: 58rpx; margin-top: 24rpx;">
|
||||||
|
<view class=""
|
||||||
|
style="width: 100%; height: 4rpx; background-color: #F3F3F3;position: absolute; top: 42rpx; left: 10rpx;">
|
||||||
|
</view>
|
||||||
|
<view class="relative"
|
||||||
|
style="width: 71.7rpx; height: 102rpx;display: inline-block; margin-right: 94rpx;"
|
||||||
|
v-for="(item,index) in checkinData.TotalCheckinList" :key="index">
|
||||||
|
|
||||||
|
<image :src="$img('/static/checkin/Claim.png')"
|
||||||
|
style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>
|
||||||
|
|
||||||
|
<image v-if="item.isClaim" :src="$img('/static/checkin/Claimed.png')"
|
||||||
|
style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>
|
||||||
|
|
||||||
|
<text
|
||||||
|
style="width: 100%; text-align: center; position: absolute; bottom: 0rpx; color: #8A8A8A; font-size: 18rpx;">
|
||||||
|
累计
|
||||||
|
<text style="color: #96B050;">{{item.Days}}</text>
|
||||||
|
天
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 签到列表 -->
|
||||||
|
<view class="justify-center" style="margin-top: 24rpx;">
|
||||||
|
|
||||||
|
<scroll-view scroll-y="true" style="width: 632rpx; height: 600rpx;">
|
||||||
|
<view class="grid-container">
|
||||||
|
<view class="grid-item" v-for="(item,index) in checkinData.CheckinList" style="">
|
||||||
|
|
||||||
|
<image :src="$img('/static/checkin/Claim2.png')">
|
||||||
|
</image>
|
||||||
|
|
||||||
|
<image v-if="item.isExpired && !item.isClaim" style="z-index: 10;"
|
||||||
|
:src="$img('/static/checkin/Expired.png')" mode=""></image>
|
||||||
|
|
||||||
|
<image v-if="item.isExpired && item.isClaim" style="z-index: 10;"
|
||||||
|
:src="$img('/static/checkin/Claimed2.png')" mode=""></image>
|
||||||
|
|
||||||
|
<image v-if="item.isToday" :src="$img('/static/checkin/ClaimBorder.png')" mode="">
|
||||||
|
</image>
|
||||||
|
|
||||||
|
<text class="day">第{{item.Day}}天</text>
|
||||||
|
<text class="reward">{{item.Reward}}</text>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 签到按钮 -->
|
||||||
|
|
||||||
|
<view class="justify-center" style="width: 100%; height: 198rpx; background-color: #fff; margin-top: -10rpx;">
|
||||||
|
|
||||||
|
<view class="align-center column">
|
||||||
|
<view class="center"
|
||||||
|
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; margin-top: 32rpx;">
|
||||||
|
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">每日签到</text>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
style="color: #8A8A8A; font-size: 20rpx; margin-top: 12rpx;">签到条件：{{checkinData.Requirement}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
checkinData: {
|
||||||
|
TotalCheckins: 10, //累计签到天数
|
||||||
|
Requirement: "任意消费100钻石",
|
||||||
|
TotalCheckinList: [{ //累计签到列表
|
||||||
|
isClaim: true, //是否领取
|
||||||
|
Days: 3, //累计天数
|
||||||
|
}, {
|
||||||
|
isClaim: false,
|
||||||
|
Days: 7,
|
||||||
|
}, {
|
||||||
|
isClaim: false,
|
||||||
|
Days: 10,
|
||||||
|
}, {
|
||||||
|
isClaim: false,
|
||||||
|
Days: 15,
|
||||||
|
}, {
|
||||||
|
isClaim: false,
|
||||||
|
Days: 31,
|
||||||
|
}],
|
||||||
|
CheckinList: [ //签到日期
|
||||||
|
{
|
||||||
|
isExpired: true, //是否过期
|
||||||
|
isClaim: false, //是否签到
|
||||||
|
isToday: false, //是否是当天
|
||||||
|
Day: 1, //第几天
|
||||||
|
Reward: "100钻石", //奖励内容
|
||||||
|
},
|
||||||
|
{
|
||||||
|
isExpired: true,
|
||||||
|
isClaim: true,
|
||||||
|
isToday: false,
|
||||||
|
Day: 2,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: true,
|
||||||
|
Day: 3,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 4,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 5,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
}, {
|
||||||
|
isExpired: false,
|
||||||
|
isClaim: false,
|
||||||
|
isToday: false,
|
||||||
|
Day: 6,
|
||||||
|
Reward: "100钻石",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLeft {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
height: 44px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
width: 100%;
|
||||||
|
top: 108rpx;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 34rpx;
|
||||||
|
justify-content: center;
|
||||||
|
color: black;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 140rpx);
|
||||||
|
gap: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 172rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
>image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #96B152;
|
||||||
|
top: 12rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reward {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #96B050;
|
||||||
|
white-space: nowrap;
|
||||||
|
bottom: 10rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,7 +4,13 @@
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="title1">福利</view>
|
<view class="title1">福利</view>
|
||||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||||
|
|
||||||
|
<view class="grid-container" style="width: 100%; padding: 0 32rpx; margin-top: 40rpx;">
|
||||||
|
<view class="grid-item" v-for="(item,index) in list" @click="toPage(item.id)"
|
||||||
|
style=" height: 184rpx; background-color: #D8D8D8;">
|
||||||
|
<text>{{item.name}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -13,10 +19,69 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
list: [{
|
||||||
|
id: 1,
|
||||||
|
name: "每日签到"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "福利屋"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "VIP福利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "口令红包"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "消费补贴"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "周卡月卡"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "积分赏池"
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {
|
||||||
|
|
||||||
|
//跳转页面
|
||||||
|
toPage(id) {
|
||||||
|
|
||||||
|
switch (id) {
|
||||||
|
case 1:
|
||||||
|
this.$c.to({
|
||||||
|
url: '/pages/infinite/daily_check_in'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
this.$c.to({
|
||||||
|
url: '/pages/infinite/bonus_house'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
this.$c.to({
|
||||||
|
url: '/pages/infinite/VIP_perks'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
this.$c.to({
|
||||||
|
url: '/pages/infinite/benefit'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.current = 0
|
this.current = 0
|
||||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||||
|
|
@ -31,6 +96,15 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
/* padding-top: 1rpx; */
|
||||||
|
padding-bottom: 100px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
.title1 {
|
.title1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 108rpx;
|
top: 108rpx;
|
||||||
|
|
@ -43,324 +117,17 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeImg {
|
.grid-container {
|
||||||
position: absolute;
|
display: grid;
|
||||||
width: 32rpx !important;
|
grid-template-columns: repeat(2, 324rpx);
|
||||||
height: 16rpx !important;
|
/* 三列，每列宽度相等 */
|
||||||
bottom: -20rpx;
|
gap: 40rpx 42rpx;
|
||||||
left: 0;
|
/* 网格之间的间隔 */
|
||||||
right: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop {
|
.grid-item {
|
||||||
width: 607rpx;
|
background-color: #f0f0f0;
|
||||||
// height: 904rpx;
|
text-align: center;
|
||||||
padding-top: 70rpx;
|
border-radius: 16rpx;
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.pop_title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-family: zihun152hao-jijiachaojihei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pop_con {
|
|
||||||
padding: 30rpx 40rpx 50rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 42rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translate(-50%, 100%);
|
|
||||||
width: 50rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status_bar {
|
|
||||||
height: var(--status-bar-height);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed {
|
|
||||||
width: 750rpx;
|
|
||||||
padding: 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: fixed;
|
|
||||||
top: 0rpx;
|
|
||||||
z-index: 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left-title {
|
|
||||||
width: 104rpx;
|
|
||||||
height: 33rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image1 {
|
|
||||||
width: 117rpx;
|
|
||||||
height: 46rpx;
|
|
||||||
background: url('https://baoku.languowangluo.cn/newindex/new.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 23rpx;
|
|
||||||
left: 18rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gb_title {
|
|
||||||
width: 118rpx;
|
|
||||||
height: 46rpx;
|
|
||||||
position: absolute;
|
|
||||||
top: 18rpx;
|
|
||||||
right: 18rpx;
|
|
||||||
background: url('https://baoku.languowangluo.cn/newindex/infinite_goods_shang_bao.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qiehuan_left {
|
|
||||||
display: flex;
|
|
||||||
font-family: 'YouSheBiaoTiHei';
|
|
||||||
/* border-top: 2rpx solid #333333; */
|
|
||||||
margin-left: 30rpx;
|
|
||||||
/* text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7); */
|
|
||||||
/* font-family: 'zcq'; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.wzs {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: zihun152hao-jijiachaojihei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #9c9c9c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xzs {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: zihun152hao-jijiachaojihei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
text-shadow: 0 0 10rpx #ba39ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qiehuan_left>view {
|
|
||||||
margin-right: 70rpx;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dibuzhe {
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
// background: #f00;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
/* padding-top:5rpx; */
|
|
||||||
position: absolute;
|
|
||||||
width: calc(100% - 16rpx - 16rpx);
|
|
||||||
left: 16rpx;
|
|
||||||
bottom: 16rpx;
|
|
||||||
height: 74rpx;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 0 0 20rpx 20rpx;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 400rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-left: 22rpx;
|
|
||||||
/* font-family: 'zcq';
|
|
||||||
text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.gb {
|
|
||||||
color: #ffffff;
|
|
||||||
/* font-family: 'zcq';
|
|
||||||
text-shadow: 0px 0px 14rpx red; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-family: zihun152hao-jijiachaojihei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
text-shadow: 0 0 10rpx #22aeff;
|
|
||||||
padding-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items {
|
|
||||||
width: 714rpx;
|
|
||||||
height: 504rpx;
|
|
||||||
padding: 16rpx;
|
|
||||||
margin: 30rpx auto 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .u-tab-item {
|
|
||||||
color: #222222 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.baibei {
|
|
||||||
width: 720rpx;
|
|
||||||
height: 78rpx;
|
|
||||||
/* background: #FFFFFF; */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
/* font-family: 'zcq'; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
/* padding-top: 1rpx; */
|
|
||||||
padding-bottom: 100px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_image {
|
|
||||||
width: 100%;
|
|
||||||
height: 472rpx;
|
|
||||||
// margin: 17rpx auto 0;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_image image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-hd {
|
|
||||||
width: 100%;
|
|
||||||
height: 430rpx;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
padding: 1rpx 30rpx 30rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
width: 330rpx;
|
|
||||||
height: 487rpx;
|
|
||||||
background-color: #F8F8F8;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
// background: url($imgurl+'common/goodsBg.png') no-repeat 0 0 / 100% 100%;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
|
|
||||||
.pic {
|
|
||||||
width: 100%;
|
|
||||||
height: 332rpx;
|
|
||||||
background-color: #E4E4E4;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
||||||
|
|
||||||
.pic-img {
|
|
||||||
// width: 290rpx;
|
|
||||||
// height: 290rpx;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pic-type {
|
|
||||||
padding: 0 21rpx 0 32rpx;
|
|
||||||
height: 44rpx;
|
|
||||||
position: absolute;
|
|
||||||
top: 10rpx;
|
|
||||||
right: 10rpx;
|
|
||||||
|
|
||||||
>text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #111111;
|
|
||||||
text-shadow: 2rpx 2rpx #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pic-new {
|
|
||||||
width: 80rpx;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
top: -10rpx;
|
|
||||||
left: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
padding: 24rpx 26rpx 0;
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hang1 {}
|
|
||||||
|
|
||||||
.hot-num {
|
|
||||||
padding: 10rpx 20rpx 0;
|
|
||||||
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #cccccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-box {
|
|
||||||
padding: 60rpx 20rpx 10rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.price {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 18rpx;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 18rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.num-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.num {
|
|
||||||
font-size: 18rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #6C6C6C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
width: 20rpx;
|
|
||||||
height: 17.56rpx;
|
|
||||||
margin-left: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user