You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

163 lines
3.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<view class="bkg">
<u-image width="100%" height="100vh" :src="require('@/static/home-bkg.jpg')"></u-image>
</view>
<view class="content">
<view class="title">
<u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="220rpx" :src="require('@/static/title.png')"></u-image>
</view>
<view class="notice">
恭喜192****1774获得1.99元红包
</view>
<view class="raffle">
<view class="raffle-bkg">
<u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="680rpx" height="924rpx" :src="require('@/static/raffle-phone.png')"></u-image>
</view>
<view class="raffle-box">
<view class="raffle-box__hello">
尊敬的192用户您好
</view>
<view class="raffle-box__times">
剩余抽奖次数<span>{{ '1次' }}</span>
</view>
<view class="raffle-box__turntable">
</view>
<view class="raffle-box__tip">
仅限中国广电苏州地区用户手机号参与活动
</view>
</view>
</view>
<view class="bottom">
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="$refs['popover'].show()"></u-image>
<u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
},
computed: {
}
}
</script>
<style lang="scss">
.bkg {
z-index: -1;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content {
min-height: 100vh;
position: relative;
& .title {
margin-top: 10vh;
}
& .notice {
background: rgba(254, 210, 141, 0.6);
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3,46,63,0.45);
border-radius: 28rpx;
color: #fff;
text-align: center;
margin: .2vh 140rpx 0 140rpx;
}
.raffle {
width: 680rpx;
height: 924rpx;
position: relative;
margin: 2.9vh auto 0 auto;
&-bkg {
z-index: 1;
position: absolute;
}
&-box {
width: 100%;
height: 100%;
z-index: 2;
position: relative;
top: 0;
&__hello {
text-align: center;
font-size: 38rpx;
font-weight: normal;
color: #FFFFFF;
padding-top: 100rpx;
}
&__times {
text-align: center;
font-size: 46rpx;
font-weight: normal;
color: #FFFFFF;
padding-top: 16rpx;
& > span {
color: #FCE534;
}
}
&__turntable {
height: 560rpx;
display: grid;
margin-top: 40rpx;
padding: 0 70rpx;
}
&__tip {
zoom: .9;
font-size: 22rpx;
text-align: center;
color: #F9DAC1;
position: absolute;
left: 0;
right: 0;
bottom: 46rpx;
}
}
}
.bottom {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1.85vh;
}
}
</style>