|
@@ -1,395 +1,450 @@
|
|
|
<template>
|
|
|
- <view class="box">
|
|
|
- <view class="lottery-box">
|
|
|
- <navigator class="my-list" url="/cloud/winningNews/index">
|
|
|
- 我的奖品
|
|
|
- </navigator>
|
|
|
- <image class="bg-image"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp" />
|
|
|
- <view class="lottery" v-if="prizes.length && showPrizes">
|
|
|
- <view>
|
|
|
- <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
|
|
|
- :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="usable-count">
|
|
|
- 您还有<text class="count">{{ usableCount }}</text>抽奖机会
|
|
|
- </view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="lottery-box">
|
|
|
+ <navigator class="my-list" url="/cloud/winningNews/index">
|
|
|
+ 我的奖品
|
|
|
+ </navigator>
|
|
|
+ <image
|
|
|
+ class="bg-image"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp"
|
|
|
+ />
|
|
|
+ <view class="lottery" v-if="prizes.length && showPrizes">
|
|
|
+ <view>
|
|
|
+ <LuckyGrid
|
|
|
+ ref="myLucky"
|
|
|
+ width="590rpx"
|
|
|
+ height="590rpx"
|
|
|
+ :prizes="prizes"
|
|
|
+ :buttons="buttons"
|
|
|
+ :defaultStyle="defaultStyle"
|
|
|
+ @start="startCallBack"
|
|
|
+ @end="endCallBack"
|
|
|
+ />
|
|
|
</view>
|
|
|
- <view class="winners-list" v-if="winningList.length">
|
|
|
- <image class="image"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
|
|
|
- mode="widthFix" />
|
|
|
- <view class="content">
|
|
|
- <view class="title">
|
|
|
- <view class="text">
|
|
|
- 抽奖名单
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <swiper class="swiper" autoplay easing-function="linear" interval="1000" duration="1000" circular vertical
|
|
|
- :display-multiple-items="7">
|
|
|
- <swiper-item v-for="item in winningList" :key="item.sa_awardmxid">
|
|
|
- <view v-if="item.createuserid" class="swiper-item u-line-2">
|
|
|
- {{ item.name ? item.name : '用户' + item.createuserid }} <text
|
|
|
- style="padding: 0 5px;">抽中了</text>{{ item.awardname }}
|
|
|
- </view>
|
|
|
- <view v-else></view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <view class="usable-count">
|
|
|
+ 您还有<text class="count">{{ usableCount }}</text
|
|
|
+ >抽奖机会
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="winners-list" v-if="winningList.length">
|
|
|
+ <image
|
|
|
+ class="image"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
|
|
|
+ mode="widthFix"
|
|
|
+ />
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ <view class="text"> 抽奖名单 </view>
|
|
|
</view>
|
|
|
+ <swiper
|
|
|
+ class="swiper"
|
|
|
+ autoplay
|
|
|
+ easing-function="linear"
|
|
|
+ interval="1000"
|
|
|
+ duration="1000"
|
|
|
+ circular
|
|
|
+ vertical
|
|
|
+ :display-multiple-items="7"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="item in winningList" :key="item.sa_awardmxid">
|
|
|
+ <view v-if="item.createuserid" class="swiper-item u-line-2">
|
|
|
+ {{ item.name ? item.name : "用户" + item.createuserid }}
|
|
|
+ <text style="padding: 0 5px">抽中了</text>{{ item.awardname }}
|
|
|
+ </view>
|
|
|
+ <view v-else></view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'
|
|
|
+import LuckyGrid from "@/components/@lucky-canvas/uni/lucky-grid";
|
|
|
export default {
|
|
|
- components: { LuckyGrid },
|
|
|
- props: {
|
|
|
- sa_awardid: {
|
|
|
- type: [Number || String]
|
|
|
- },
|
|
|
- shareuserid: {
|
|
|
- type: [Number || String]
|
|
|
- }
|
|
|
+ components: { LuckyGrid },
|
|
|
+ props: {
|
|
|
+ detail: {
|
|
|
+ type: Object,
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- prizes: [],
|
|
|
- buttons: [{
|
|
|
- background: 'rgba(0,0,0,0)',
|
|
|
- x: 1, y: 1,
|
|
|
- imgs: [{
|
|
|
- src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp',
|
|
|
- width: '183.34rpx',
|
|
|
- height: '183.34rpx',
|
|
|
- }],
|
|
|
- }],
|
|
|
- defaultStyle: {
|
|
|
- background: '#FFFFFF',
|
|
|
- width: '183.34rpx',
|
|
|
- height: '183.34rpx',
|
|
|
- },
|
|
|
- usableCount: 0,
|
|
|
- loading: false,
|
|
|
- winningList: [],
|
|
|
- tips: '',
|
|
|
- showPrizes: true,
|
|
|
- }
|
|
|
+ sa_awardid: {
|
|
|
+ type: [Number || String],
|
|
|
},
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- console.log("this.sa_awardid", this.sa_awardid)
|
|
|
- try {
|
|
|
- this.$Http.basic({
|
|
|
- "id": 20240514131402,
|
|
|
- content: {
|
|
|
- "sa_awardid": this.sa_awardid,
|
|
|
- "where": {
|
|
|
- "condition": "",
|
|
|
- "type": ""
|
|
|
- }
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("奖品列表", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- let prizes = [
|
|
|
- { index: 0, x: 0, y: 0 },
|
|
|
- { index: 2, x: 2, y: 0 },
|
|
|
- { index: 6, x: 0, y: 2 },
|
|
|
- { index: 4, x: 2, y: 2 },
|
|
|
- { index: 1, x: 1, y: 0 },
|
|
|
- { index: 3, x: 2, y: 1 },
|
|
|
- { index: 5, x: 1, y: 2 },
|
|
|
- { index: 7, x: 0, y: 1 },
|
|
|
- ].map(v => {
|
|
|
- v.borderRadius = '20rpx';
|
|
|
- v.imgs = [{
|
|
|
- src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp',
|
|
|
- width: '50%',
|
|
|
- top: '20%'
|
|
|
- }]
|
|
|
- return v
|
|
|
- })
|
|
|
- res.data.forEach((v, i) => {
|
|
|
- v.imgs = v.attinfos.map(img => {
|
|
|
- return {
|
|
|
- src: img.url,
|
|
|
- width: '50%',
|
|
|
- top: '25%'
|
|
|
- }
|
|
|
- })
|
|
|
- prizes[i] = Object.assign(prizes[i], v);
|
|
|
- });
|
|
|
- this.prizes = prizes.sort((a, b) => {
|
|
|
- return a.index - b.index
|
|
|
- });
|
|
|
- })
|
|
|
- } catch (error) { }
|
|
|
- this.queryAwardCount();
|
|
|
- this.getWinningList();
|
|
|
+ shareuserid: {
|
|
|
+ type: [Number || String],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ prizes: [],
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ background: "rgba(0,0,0,0)",
|
|
|
+ x: 1,
|
|
|
+ y: 1,
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp",
|
|
|
+ width: "183.34rpx",
|
|
|
+ height: "183.34rpx",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- startCallBack() {
|
|
|
- let that = this;
|
|
|
- if (this.tips) return uni.showToast({
|
|
|
- title: this.tips,
|
|
|
- icon: 'none',
|
|
|
- duration: 1500,
|
|
|
- });
|
|
|
- if (this.loading || this.usableCount == 0) return;
|
|
|
- this.loading = true;
|
|
|
- this.$refs.myLucky.play()
|
|
|
- that.$Http.basic({
|
|
|
- "content": {
|
|
|
- "sa_awardid": that.sa_awardid,
|
|
|
- "shareuserid": that.shareuserid,
|
|
|
+ ],
|
|
|
+ defaultStyle: {
|
|
|
+ background: "#FFFFFF",
|
|
|
+ width: "183.34rpx",
|
|
|
+ height: "183.34rpx",
|
|
|
+ },
|
|
|
+ usableCount: 0,
|
|
|
+ loading: false,
|
|
|
+ winningList: [],
|
|
|
+ tips: "",
|
|
|
+ showPrizes: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ console.log("this.sa_awardid", this.sa_awardid);
|
|
|
+ try {
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ id: 20240514131402,
|
|
|
+ content: {
|
|
|
+ sa_awardid: this.sa_awardid,
|
|
|
+ where: {
|
|
|
+ condition: "",
|
|
|
+ type: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("奖品列表", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ let prizes = [
|
|
|
+ { index: 0, x: 0, y: 0 },
|
|
|
+ { index: 2, x: 2, y: 0 },
|
|
|
+ { index: 6, x: 0, y: 2 },
|
|
|
+ { index: 4, x: 2, y: 2 },
|
|
|
+ { index: 1, x: 1, y: 0 },
|
|
|
+ { index: 3, x: 2, y: 1 },
|
|
|
+ { index: 5, x: 1, y: 2 },
|
|
|
+ { index: 7, x: 0, y: 1 },
|
|
|
+ ].map((v) => {
|
|
|
+ v.borderRadius = "20rpx";
|
|
|
+ v.imgs = [
|
|
|
+ {
|
|
|
+ src: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp",
|
|
|
+ width: "50%",
|
|
|
+ top: "20%",
|
|
|
},
|
|
|
- "id": 20240514134002,
|
|
|
- }).then(res => {
|
|
|
- console.log('抽奖结果', res)
|
|
|
- if (this.cutoff(res.msg)) {
|
|
|
- this.showPrizes = false;
|
|
|
- setTimeout(() => {
|
|
|
- this.showPrizes = true;
|
|
|
- })
|
|
|
- that.queryAwardCount();
|
|
|
- that.getWinningList();
|
|
|
- return
|
|
|
+ ];
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ res.data.forEach((v, i) => {
|
|
|
+ v.imgs = v.attinfos.map((img) => {
|
|
|
+ return {
|
|
|
+ src: img.url,
|
|
|
+ width: "50%",
|
|
|
+ top: "25%",
|
|
|
};
|
|
|
- const index = that.prizes.findIndex(v => v.sa_awarditemsid == res.data.sa_awarditemsid);
|
|
|
- that.$refs.myLucky.stop(index)
|
|
|
- that.queryAwardCount();
|
|
|
- that.getWinningList();
|
|
|
- setTimeout(() => {
|
|
|
- that.loading = false;
|
|
|
- that.showWinningResult(res.data, index);
|
|
|
- }, 5000);
|
|
|
- })
|
|
|
- },
|
|
|
- showWinningResult(data, index) {
|
|
|
- console.log("中奖结果", data)
|
|
|
- let that = this;
|
|
|
- uni.showModal({
|
|
|
- title: '恭喜您抽中',
|
|
|
- content: data.awardname,
|
|
|
- showCancel: false,
|
|
|
- confirmText: '选择地址',
|
|
|
- success: function ({ confirm }) {
|
|
|
- if (confirm) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/store/deliveryAddress/index?tips=奖项根据收货信息发放,请选择并提交收货地址'
|
|
|
- })
|
|
|
- that.$Http.selectAddress = (item) => {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: `是否确定选择“${item.address}”作为收货地址?`,
|
|
|
- success: (success) => {
|
|
|
- if (success.confirm) that.$Http.basic({
|
|
|
- id: "2024052910464202",
|
|
|
- content: {
|
|
|
- sa_awardmxid: data.sa_awardmxid,
|
|
|
- name: item.name,
|
|
|
- phonenumber: item.phonenumber,
|
|
|
- province: item.province,
|
|
|
- city: item.city,
|
|
|
- county: item.county,
|
|
|
- address: item.address,
|
|
|
- }
|
|
|
- }).then(s => {
|
|
|
- if (that.cutoff(s.msg, '设置成功', true, '1000')) return;
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.log(err)
|
|
|
- }
|
|
|
+ });
|
|
|
+ prizes[i] = Object.assign(prizes[i], v);
|
|
|
});
|
|
|
- },
|
|
|
- getWinningList() {
|
|
|
- this.$Http.basic({
|
|
|
- "content": {
|
|
|
- "sa_awardid": this.sa_awardid,
|
|
|
- "pageNumber": 1,
|
|
|
- "pageSize": 20
|
|
|
+ this.prizes = prizes.sort((a, b) => {
|
|
|
+ return a.index - b.index;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } catch (error) {}
|
|
|
+ this.queryAwardCount();
|
|
|
+ this.getWinningList();
|
|
|
+ },
|
|
|
+ startCallBack() {
|
|
|
+ let that = this;
|
|
|
+ if (this.detail.begdate > this.formatTime())
|
|
|
+ this.tips = `活动开始时间为“${this.detail.begdate}”敬请期待!`;
|
|
|
+ if (this.detail.enddate < this.formatTime())
|
|
|
+ this.tips = `活动已在“${this.detail.enddate}”结束!`;
|
|
|
+ if (this.tips)
|
|
|
+ return uni.showToast({
|
|
|
+ title: this.tips,
|
|
|
+ icon: "none",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ if (this.loading || this.usableCount == 0) return;
|
|
|
+ this.loading = true;
|
|
|
+ this.$refs.myLucky.play();
|
|
|
+ that.$Http
|
|
|
+ .basic({
|
|
|
+ content: {
|
|
|
+ sa_awardid: that.sa_awardid,
|
|
|
+ shareuserid: that.shareuserid,
|
|
|
+ },
|
|
|
+ id: 20240514134002,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("抽奖结果", res);
|
|
|
+ if (this.cutoff(res.msg)) {
|
|
|
+ this.showPrizes = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showPrizes = true;
|
|
|
+ });
|
|
|
+ that.queryAwardCount();
|
|
|
+ that.getWinningList();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const index = that.prizes.findIndex(
|
|
|
+ (v) => v.sa_awarditemsid == res.data.sa_awarditemsid
|
|
|
+ );
|
|
|
+ that.$refs.myLucky.stop(index);
|
|
|
+ that.queryAwardCount();
|
|
|
+ that.getWinningList();
|
|
|
+ setTimeout(() => {
|
|
|
+ that.loading = false;
|
|
|
+ that.showWinningResult(res.data, index);
|
|
|
+ }, 5000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showWinningResult(data, index) {
|
|
|
+ console.log("中奖结果", data);
|
|
|
+ let that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: "恭喜您抽中",
|
|
|
+ content: data.awardname,
|
|
|
+ showCancel: false,
|
|
|
+ confirmText: "选择地址",
|
|
|
+ success: function ({ confirm }) {
|
|
|
+ if (confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/store/deliveryAddress/index?tips=奖项根据收货信息发放,请选择并提交收货地址",
|
|
|
+ });
|
|
|
+ that.$Http.selectAddress = (item) => {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: `是否确定选择“${item.address}”作为收货地址?`,
|
|
|
+ success: (success) => {
|
|
|
+ if (success.confirm)
|
|
|
+ that.$Http
|
|
|
+ .basic({
|
|
|
+ id: "2024052910464202",
|
|
|
+ content: {
|
|
|
+ sa_awardmxid: data.sa_awardmxid,
|
|
|
+ name: item.name,
|
|
|
+ phonenumber: item.phonenumber,
|
|
|
+ province: item.province,
|
|
|
+ city: item.city,
|
|
|
+ county: item.county,
|
|
|
+ address: item.address,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((s) => {
|
|
|
+ if (that.cutoff(s.msg, "设置成功", true, "1000"))
|
|
|
+ return;
|
|
|
+ });
|
|
|
},
|
|
|
- "id": 20240514133902
|
|
|
- }).then(res => {
|
|
|
- console.log("中奖人员", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- if (res.data.length < 7) {
|
|
|
- let len = res.data.length;
|
|
|
- for (let index = 0; index < (7 - len); index++) {
|
|
|
- res.data.push({})
|
|
|
- }
|
|
|
- }
|
|
|
- this.winningList = res.data;
|
|
|
- })
|
|
|
+ });
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
- queryAwardCount() {
|
|
|
- if (uni.getStorageSync('userMsg').usertype == 99) {
|
|
|
- this.$Http.basic({
|
|
|
- "classname": "sysmanage.develop.datafunction.datafunction",
|
|
|
- "method": "execute",
|
|
|
- "content": {
|
|
|
- "functionname": "queryAwardCount",
|
|
|
- "parameter": {
|
|
|
- "sa_awardid": this.sa_awardid
|
|
|
- }
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("抽奖可用次数", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- this.usableCount = res.data.length ? res.data[0].count : 0;
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.tips = '内部人员不可参与抽奖';
|
|
|
- }
|
|
|
+ fail: (err) => {
|
|
|
+ console.log(err);
|
|
|
},
|
|
|
- endCallBack(prize) {
|
|
|
- console.log("抽到的奖品", prize)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getWinningList() {
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ content: {
|
|
|
+ sa_awardid: this.sa_awardid,
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ id: 20240514133902,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("中奖人员", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ if (res.data.length < 7) {
|
|
|
+ let len = res.data.length;
|
|
|
+ for (let index = 0; index < 7 - len; index++) {
|
|
|
+ res.data.push({});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.winningList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryAwardCount() {
|
|
|
+ if (uni.getStorageSync("userMsg").usertype == 99) {
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "sysmanage.develop.datafunction.datafunction",
|
|
|
+ method: "execute",
|
|
|
+ content: {
|
|
|
+ functionname: "queryAwardCount",
|
|
|
+ parameter: {
|
|
|
+ sa_awardid: this.sa_awardid,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("抽奖可用次数", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.usableCount = res.data.length ? res.data[0].count : 0;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.tips = "内部人员不可参与抽奖";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ endCallBack(prize) {
|
|
|
+ console.log("抽到的奖品", prize);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.box {
|
|
|
- width: 100vw;
|
|
|
- min-height: 100vh;
|
|
|
- background: linear-gradient(90deg, #FE5A46 0%, #F11F46 100%);
|
|
|
-
|
|
|
- .lottery-box {
|
|
|
- position: relative;
|
|
|
- width: 100vw;
|
|
|
- height: 511px;
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(90deg, #fe5a46 0%, #f11f46 100%);
|
|
|
|
|
|
- .my-list {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 0;
|
|
|
- width: 86px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- background: linear-gradient(180deg, #FAD96D 0%, #FFC300 4%, #FFCD2B 16%, #FFDF77 42%, #FFD241 70%, #FFC300 94%, #FC9228 100%);
|
|
|
- border-radius: 0px 20px 20px 0px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- color: #C30D23;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .bg-image {
|
|
|
- position: absolute;
|
|
|
- width: 100vw;
|
|
|
- height: 511px;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
+ .lottery-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 511px;
|
|
|
|
|
|
- .lottery {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- z-index: 2;
|
|
|
- top: 140px;
|
|
|
- }
|
|
|
+ .my-list {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 0;
|
|
|
+ width: 86px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #fad96d 0%,
|
|
|
+ #ffc300 4%,
|
|
|
+ #ffcd2b 16%,
|
|
|
+ #ffdf77 42%,
|
|
|
+ #ffd241 70%,
|
|
|
+ #ffc300 94%,
|
|
|
+ #fc9228 100%
|
|
|
+ );
|
|
|
+ border-radius: 0px 20px 20px 0px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c30d23;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
|
|
|
- .usable-count {
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- width: 100vw;
|
|
|
- text-align: center;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- color: #FFFFFF;
|
|
|
+ .bg-image {
|
|
|
+ position: absolute;
|
|
|
+ width: 100vw;
|
|
|
+ height: 511px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
|
|
|
- .count {
|
|
|
- height: 29px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 20px;
|
|
|
- color: #FAD96D;
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .lottery {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 2;
|
|
|
+ top: 140px;
|
|
|
}
|
|
|
|
|
|
+ .usable-count {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ width: 100vw;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
|
|
|
+ .count {
|
|
|
+ height: 29px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fad96d;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .winners-list {
|
|
|
- width: 100vw;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 20px;
|
|
|
+ .winners-list {
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 20px;
|
|
|
|
|
|
- .image {
|
|
|
- width: 355px;
|
|
|
- }
|
|
|
+ .image {
|
|
|
+ width: 355px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- width: 80px;
|
|
|
- height: 29px;
|
|
|
- margin: 0 auto;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 29px;
|
|
|
+ margin: 0 auto;
|
|
|
|
|
|
- .text {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0;
|
|
|
- width: 80px;
|
|
|
- line-height: 29px;
|
|
|
- text-align: center;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 20px;
|
|
|
- color: #333333;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 80px;
|
|
|
+ line-height: 29px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333333;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .title::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- left: 0;
|
|
|
- width: 80px;
|
|
|
- height: 8px;
|
|
|
- background: #FAD96D;
|
|
|
- border-radius: 5px;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ .title::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 8px;
|
|
|
+ background: #fad96d;
|
|
|
+ border-radius: 5px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- background: #fff;
|
|
|
- padding: 0 15px 20px;
|
|
|
- width: 669.7672675rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ .content {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 15px 20px;
|
|
|
+ width: 669.7672675rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .swiper {
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- margin-top: 20px;
|
|
|
+ .swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- .swiper-item {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|