|
|
@@ -1,585 +1,588 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="head">
|
|
|
- <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
|
|
|
- <view class="info">
|
|
|
- <view class="title row">
|
|
|
- {{ detail.name }}
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="price">
|
|
|
- ￥{{ detail.price }}
|
|
|
- <span class="text fontPFR">/张明信片</span>
|
|
|
- </view>
|
|
|
- <image @click="$navigateTo('/pages/rule/rule', { type: 3 })" class="button"
|
|
|
- :src="$fileUrl() + '/invite/button1.png'" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <!-- <view class="users">
|
|
|
+ <view class="container">
|
|
|
+ <view class="head">
|
|
|
+ <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title row">
|
|
|
+ {{ detail.name }}
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="price">
|
|
|
+ ￥{{ detail.price }}
|
|
|
+ <span class="text fontPFR">/张明信片</span>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ @click="$navigateTo('/pages/rule/rule', { type: 1 })"
|
|
|
+ class="button"
|
|
|
+ :src="$fileUrl() + '/invite/button1.png'"
|
|
|
+ mode="widthFix"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <!-- <view class="users">
|
|
|
<image class="photo" :style="'left:' + index * 11 + 'px'" :src="$fileUrl() + '/Frame1.png'"
|
|
|
v-for="(item, index) in userList" mode="widthFix"></image>
|
|
|
</view> -->
|
|
|
- <!-- <view class="hot">
|
|
|
+ <!-- <view class="hot">
|
|
|
<image :src="$fileUrl() + /first/hot.png" mode="widthFix"></image>
|
|
|
{{ detail.hotNum }}
|
|
|
</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="box">
|
|
|
- <view class="boxContent">
|
|
|
- <view class="boxLeft">
|
|
|
- <view class="row1">
|
|
|
- <view class="text">连击 × {{combos}}</view>
|
|
|
- <view class="text">
|
|
|
- {{combos}}
|
|
|
- <span class="text1">/300</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="row2">
|
|
|
- <view class="row2content">
|
|
|
- <p>每连击300发未出传说赏，可获得一个宝箱。</p>
|
|
|
- <p>如果中间抽出传说赏，则清空连击次数。</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="boxRiaht">
|
|
|
- <image class="icon" :src="$fileUrl() + '/drawCard_infinite/icon1.png'" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="buttons1">
|
|
|
- <image class="button" @click="tabClick(1)" style="margin-right: 20px"
|
|
|
- :src="$fileUrl() + `/drawCard_infinite/button1${active1 == 1 ? 'A' : ''}.png`" mode="widthFix"></image>
|
|
|
- <image class="button" @click="tabClick(2)"
|
|
|
- :src="$fileUrl() + `/drawCard_infinite/button2${active1 == 2 ? 'A' : ''}.png`" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="prizeList" v-if="active1 == 1">
|
|
|
- <view class="prizeRow" v-for="(item, index) in prizeList">
|
|
|
- <image class="bk" :src="$fileUrl() + '/drawCard_infinite/bk.png'" mode="scaleToFill"></image>
|
|
|
- <view class="prizeRowContent">
|
|
|
- <view class="prizesTitle">
|
|
|
- <span>
|
|
|
- <span style="font-size: 18px; margin-right: 5px; font-weight: 600">
|
|
|
- {{ $selectDictLabel(rewardType, item.type) }}
|
|
|
- </span>
|
|
|
- <span style="font-weight: 600">概率 {{item.probability}}%</span>
|
|
|
- </span>
|
|
|
- <span class="sp">各类别赏中赏概率不代表具体产品中赏概率</span>
|
|
|
- </view>
|
|
|
- <view class="prizesItems">
|
|
|
- <view class="prize" v-for="(item2, index2) in item.prizeList">
|
|
|
- <view class="kaImg">
|
|
|
- <image class="kabk" :src="$fileUrl() + '/drawCard_infinite/kaBk.png'" mode="widthFix">
|
|
|
- </image>
|
|
|
- <image class="img" :src="item2.icon" mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- <view class="kaName">
|
|
|
- {{ item2.name }}
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <span class="priceText">￥{{ detail.price }}</span>
|
|
|
- 参考价
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="winningRecord" v-if="active1 == 2">
|
|
|
- <view class="card" v-for="(item, index) in winningRecordList" :key="index">
|
|
|
- <view class="row">
|
|
|
- <view class="left">
|
|
|
- <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
- <span class="name">{{ item.userName }}</span>
|
|
|
- </view>
|
|
|
- <view class="right text1">
|
|
|
- <span style="margin-right: 5px">{{ item.creatTime }}</span>
|
|
|
- <span>No.{{ item.id }}</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="row" style="margin-top: 10px">
|
|
|
- <view class="left">
|
|
|
- <image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
|
|
|
- <span class="name">{{ item.prizeName }}</span>
|
|
|
- </view>
|
|
|
- <view class="right" style="font-size: 14px">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <noData v-if="winningRecordList.length == 0" />
|
|
|
- </view>
|
|
|
- <view class="buttons2">
|
|
|
- <view class="button" @click="submit(1)">
|
|
|
- <p>一发</p>
|
|
|
- </view>
|
|
|
- <view class="button" @click="submit(3)">
|
|
|
- <p>三发</p>
|
|
|
- </view>
|
|
|
- <view class="button" @click="submit(5)">
|
|
|
- <p>五发</p>
|
|
|
- </view>
|
|
|
- <view class="button" @click="submit(10)">
|
|
|
- <p>十发</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
|
|
|
- <view style="width: 100%; height: 100px;"></view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="boxContent">
|
|
|
+ <view class="boxLeft">
|
|
|
+ <view class="row1">
|
|
|
+ <view class="text">连击 × {{ combos }}</view>
|
|
|
+ <view class="text">
|
|
|
+ {{ combos }}
|
|
|
+ <span class="text1">/300</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row2">
|
|
|
+ <view class="row2content">
|
|
|
+ <p>每连击300发未出传说赏，可获得一个宝箱。</p>
|
|
|
+ <p>如果中间抽出传说赏，则清空连击次数。</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="boxRiaht">
|
|
|
+ <image class="icon" :src="$fileUrl() + '/drawCard_infinite/icon1.png'" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buttons1">
|
|
|
+ <image
|
|
|
+ class="button"
|
|
|
+ @click="tabClick(1)"
|
|
|
+ style="margin-right: 20px"
|
|
|
+ :src="$fileUrl() + `/drawCard_infinite/button1${active1 == 1 ? 'A' : ''}.png`"
|
|
|
+ mode="widthFix"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ class="button"
|
|
|
+ @click="tabClick(2)"
|
|
|
+ :src="$fileUrl() + `/drawCard_infinite/button2${active1 == 2 ? 'A' : ''}.png`"
|
|
|
+ mode="widthFix"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="prizeList" v-if="active1 == 1">
|
|
|
+ <view class="prizeRow" v-for="(item, index) in prizeList">
|
|
|
+ <image class="bk" :src="$fileUrl() + '/drawCard_infinite/bk.png'" mode="scaleToFill"></image>
|
|
|
+ <view class="prizeRowContent">
|
|
|
+ <view class="prizesTitle">
|
|
|
+ <span>
|
|
|
+ <span style="font-size: 18px; margin-right: 5px; font-weight: 600">
|
|
|
+ {{ $selectDictLabel(rewardType, item.type) }}
|
|
|
+ </span>
|
|
|
+ <span style="font-weight: 600">概率 {{ item.probability }}%</span>
|
|
|
+ </span>
|
|
|
+ <span class="sp">各类别赏中赏概率不代表具体产品中赏概率</span>
|
|
|
+ </view>
|
|
|
+ <view class="prizesItems">
|
|
|
+ <view class="prize" v-for="(item2, index2) in item.prizeList">
|
|
|
+ <view class="kaImg">
|
|
|
+ <image class="kabk" :src="$fileUrl() + '/drawCard_infinite/kaBk.png'" mode="widthFix"></image>
|
|
|
+ <image class="img" :src="item2.icon" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="kaName">
|
|
|
+ {{ item2.name }}
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <span class="priceText">￥{{ detail.price }}</span>
|
|
|
+ 参考价
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="winningRecord" v-if="active1 == 2">
|
|
|
+ <view class="card" v-for="(item, index) in winningRecordList" :key="index">
|
|
|
+ <view class="row">
|
|
|
+ <view class="left">
|
|
|
+ <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
+ <span class="name">{{ item.userName }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="right text1">
|
|
|
+ <span style="margin-right: 5px">{{ item.creatTime }}</span>
|
|
|
+ <span>No.{{ item.id }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" style="margin-top: 10px">
|
|
|
+ <view class="left">
|
|
|
+ <image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
|
|
|
+ <span class="name">{{ item.prizeName }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="right" style="font-size: 14px">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <noData v-if="winningRecordList.length == 0" />
|
|
|
+ </view>
|
|
|
+ <view class="buttons2">
|
|
|
+ <view class="button" @click="submit(1)">
|
|
|
+ <p>一发</p>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="submit(3)">
|
|
|
+ <p>三发</p>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="submit(5)">
|
|
|
+ <p>五发</p>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="submit(10)">
|
|
|
+ <p>十发</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
|
|
|
+ <view style="width: 100%; height: 100px"></view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import noData from '@/component/noData.vue'
|
|
|
- import {
|
|
|
- rewardType
|
|
|
- } from '@/utils/commonConfig.js'
|
|
|
- import {
|
|
|
- raffleDetailApi,
|
|
|
- prizeListApi,
|
|
|
- prizeUserListApi,
|
|
|
- combosApi
|
|
|
- } from '@/api/drawCard.js'
|
|
|
-
|
|
|
- import {
|
|
|
- cardType,
|
|
|
- formatSeconds
|
|
|
- } from '@/utils/utils.js'
|
|
|
-
|
|
|
- import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- paymentPopup,
|
|
|
- noData
|
|
|
- },
|
|
|
- onLoad(query) {
|
|
|
- console.log(query, 'query')
|
|
|
- if (query.id) {
|
|
|
- this.raffleId = query.id
|
|
|
- this.init()
|
|
|
- }
|
|
|
- this.paymentSuccess()
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- rewardType: rewardType,
|
|
|
- active1: 1,
|
|
|
- detail: {},
|
|
|
- raffleId: null,
|
|
|
- prizeList: [],
|
|
|
- userIds: [],
|
|
|
- prizeUserList: [],
|
|
|
- winningRecordList: [],
|
|
|
- combos: 0
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- // 获取卡包详情
|
|
|
- this.getDetail()
|
|
|
- this.tabClick(1)
|
|
|
- this.getCombos()
|
|
|
- },
|
|
|
- // 支付成功后回调
|
|
|
- paymentSuccess() {
|
|
|
- let _this = this
|
|
|
- this.getCombos()
|
|
|
- },
|
|
|
- clickDrawCard() {
|
|
|
- this.$refs.paymentPopup.show(this.raffleId, this.selectIndex, this.detail)
|
|
|
- },
|
|
|
- tabClick(index) {
|
|
|
- this.active1 = index
|
|
|
- if (index == 1) {
|
|
|
- //获取奖池
|
|
|
- this.getPrizeList()
|
|
|
- } else if (index == 2) {
|
|
|
- // 获取中奖记录
|
|
|
- this.getPrizeUserList()
|
|
|
- }
|
|
|
- },
|
|
|
- getDetail() {
|
|
|
- let params = {
|
|
|
- raffleId: this.raffleId,
|
|
|
- }
|
|
|
- raffleDetailApi(params).then(res => {
|
|
|
- console.log(res, '详情')
|
|
|
- this.detail = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- getPrizeList() {
|
|
|
- let params = {
|
|
|
- raffleId: this.raffleId,
|
|
|
- }
|
|
|
- prizeListApi(params).then(res => {
|
|
|
- console.log(res, '奖池预览')
|
|
|
- let newArray = res.data
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- if (res.data[i].type == 21) {
|
|
|
- newArray = []
|
|
|
- newArray.push(res.data[i])
|
|
|
- res.data.splice(i, 1)
|
|
|
- newArray.push(...res.data)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- this.prizeList = newArray
|
|
|
- })
|
|
|
- },
|
|
|
- getPrizeUserList() {
|
|
|
- let params = {
|
|
|
- limit: 999,
|
|
|
- page: 1,
|
|
|
- raffleId: this.raffleId,
|
|
|
- }
|
|
|
- prizeUserListApi(params).then(res => {
|
|
|
- this.winningRecordList = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- getCombos() {
|
|
|
- let params = {
|
|
|
- raffleId: this.raffleId,
|
|
|
- }
|
|
|
- combosApi(params).then(res => {
|
|
|
- console.log(res, '连击数')
|
|
|
- this.combos = res.data.combos
|
|
|
- })
|
|
|
- },
|
|
|
- submit(number) {
|
|
|
- this.$refs.paymentPopup.show(this.raffleId, number, this.detail)
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
+import noData from '@/component/noData.vue'
|
|
|
+import { rewardType } from '@/utils/commonConfig.js'
|
|
|
+import { raffleDetailApi, prizeListApi, prizeUserListApi, combosApi } from '@/api/drawCard.js'
|
|
|
+
|
|
|
+import { cardType, formatSeconds } from '@/utils/utils.js'
|
|
|
+
|
|
|
+import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ paymentPopup,
|
|
|
+ noData,
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ console.log(query, 'query')
|
|
|
+ if (query.id) {
|
|
|
+ this.raffleId = query.id
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ this.paymentSuccess()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rewardType: rewardType,
|
|
|
+ active1: 1,
|
|
|
+ detail: {},
|
|
|
+ raffleId: null,
|
|
|
+ prizeList: [],
|
|
|
+ userIds: [],
|
|
|
+ prizeUserList: [],
|
|
|
+ winningRecordList: [],
|
|
|
+ combos: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ // 获取卡包详情
|
|
|
+ this.getDetail()
|
|
|
+ this.tabClick(1)
|
|
|
+ this.getCombos()
|
|
|
+ //
|
|
|
+ },
|
|
|
+ // 支付成功后回调
|
|
|
+ paymentSuccess() {
|
|
|
+ let _this = this
|
|
|
+ this.getCombos()
|
|
|
+ this.tabClick(1)
|
|
|
+ },
|
|
|
+ clickDrawCard() {
|
|
|
+ this.$refs.paymentPopup.show(this.raffleId, this.selectIndex, this.detail)
|
|
|
+ },
|
|
|
+ tabClick(index) {
|
|
|
+ this.active1 = index
|
|
|
+ if (index == 1) {
|
|
|
+ //获取奖池
|
|
|
+ this.getPrizeList()
|
|
|
+ } else if (index == 2) {
|
|
|
+ // 获取中奖记录
|
|
|
+ this.getPrizeUserList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDetail() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.raffleId,
|
|
|
+ }
|
|
|
+ raffleDetailApi(params).then(res => {
|
|
|
+ console.log(res, '详情')
|
|
|
+ this.detail = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPrizeList() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.raffleId,
|
|
|
+ }
|
|
|
+ prizeListApi(params).then(res => {
|
|
|
+ console.log(res, '奖池预览')
|
|
|
+ let newArray = res.data
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].type == 21) {
|
|
|
+ newArray = []
|
|
|
+ newArray.push(res.data[i])
|
|
|
+ res.data.splice(i, 1)
|
|
|
+ newArray.push(...res.data)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.prizeList = newArray
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPrizeUserList() {
|
|
|
+ let params = {
|
|
|
+ limit: 999,
|
|
|
+ page: 1,
|
|
|
+ raffleId: this.raffleId,
|
|
|
+ }
|
|
|
+ prizeUserListApi(params).then(res => {
|
|
|
+ this.winningRecordList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCombos() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.raffleId,
|
|
|
+ }
|
|
|
+ combosApi(params).then(res => {
|
|
|
+ console.log(res, '连击数')
|
|
|
+ this.combos = res.data.combos
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit(number) {
|
|
|
+ this.$refs.paymentPopup.show(this.raffleId, number, this.detail)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .container {
|
|
|
- background: #9ec8f9;
|
|
|
- padding-top: 15px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .head {
|
|
|
- background: #fff;
|
|
|
- border: 10px;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 106px;
|
|
|
- height: 106px;
|
|
|
- border-radius: 5px;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: start;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .row {
|
|
|
- margin: 5px 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #999999;
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 67px;
|
|
|
- }
|
|
|
-
|
|
|
- .hot {
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .users {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .photo {
|
|
|
- position: absolute;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #ff2c43;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box {
|
|
|
- margin: 0 10px 10px 10px;
|
|
|
- padding: 2px;
|
|
|
- background: linear-gradient(90deg, rgba(211, 252, 111, 1), rgba(61, 248, 255, 1));
|
|
|
- box-shadow: 0px 2px 6px 0px rgba(176, 123, 255, 0.3);
|
|
|
- border-radius: 24px;
|
|
|
-
|
|
|
- .boxContent {
|
|
|
- background: linear-gradient(90deg, #a4fcff 0%, #d3fc6e 100%);
|
|
|
- border-radius: 24px;
|
|
|
- opacity: 1;
|
|
|
- display: flex;
|
|
|
- padding: 8px 15px;
|
|
|
-
|
|
|
- .boxLeft {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .row1 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 4px;
|
|
|
-
|
|
|
- .text {
|
|
|
- color: #000000;
|
|
|
- font-weight: 600;
|
|
|
- text-shadow: -2px -1px 0px rgba(255, 255, 255, 1);
|
|
|
- font-family: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .text1 {
|
|
|
- text-shadow: none;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .row2 {
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- height: 12vw;
|
|
|
- border-radius: 6vw;
|
|
|
- background: linear-gradient(90deg, #65c3e5 0%, #b1ff29 100%);
|
|
|
-
|
|
|
- .row2content {
|
|
|
- position: relative;
|
|
|
- top: -3px;
|
|
|
- background: #0d2a2c;
|
|
|
- height: 12vw;
|
|
|
- border-radius: 6vw;
|
|
|
- font-size: 10px;
|
|
|
- color: rgba(255, 255, 255, 0.9);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- padding: 0 13px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .boxRiaht {
|
|
|
- padding-left: 8vw;
|
|
|
- padding-right: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 12vw;
|
|
|
- height: 12vw;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttons1 {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 38vw;
|
|
|
- height: 10vw;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .prizeList {
|
|
|
- .prizeRow {
|
|
|
- position: relative;
|
|
|
- margin: 0 10px 10px 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
-
|
|
|
- .bk {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .prizeRowContent {
|
|
|
- position: relative;
|
|
|
- width: calc(100% - 30px);
|
|
|
- padding: 10px 15px;
|
|
|
- z-index: 2;
|
|
|
-
|
|
|
- .prizesTitle {
|
|
|
- font-size: 12px;
|
|
|
- padding-bottom: 5px;
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .sp {
|
|
|
- color: rgba(255, 255, 255, 0.7);
|
|
|
- padding-top: 8px;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .prizesItems {
|
|
|
- background: #fffbe8;
|
|
|
- display: flex;
|
|
|
- width: calc(100% - 16px);
|
|
|
- padding: 8px;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .prize {
|
|
|
- width: 22vw;
|
|
|
-
|
|
|
- .kaImg {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .kabk {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 70%;
|
|
|
- height: 80%;
|
|
|
- left: 52%;
|
|
|
- top: 50%;
|
|
|
- transform: translateX(-50%) translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .kaName {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- text-align: center;
|
|
|
- font-size: 10px;
|
|
|
- color: #999999;
|
|
|
-
|
|
|
- .priceText {
|
|
|
- color: #ff2c43;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttons2 {
|
|
|
- position: fixed;
|
|
|
- bottom: 10vw;
|
|
|
- display: flex;
|
|
|
- z-index: 4;
|
|
|
- justify-content: space-around;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 13vw;
|
|
|
- height: 13vw;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(270deg, #531DBB 0%, #6E2FE5 100%);
|
|
|
- text-align: center;
|
|
|
- line-height: 13vw;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, 0.25);
|
|
|
- position: relative;
|
|
|
- transform: rotate(45deg);
|
|
|
- font-weight: 600;
|
|
|
-
|
|
|
- p {
|
|
|
- transform: rotate(-45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .winningRecord {
|
|
|
- .card {
|
|
|
- margin: 10px 10px 0 10px;
|
|
|
- border-radius: 8px;
|
|
|
- background: #fff;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .photo {
|
|
|
- margin-right: 5px;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 2px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text1 {
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+.container {
|
|
|
+ background: #9ec8f9;
|
|
|
+ padding-top: 15px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ background: #fff;
|
|
|
+ border: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 106px;
|
|
|
+ height: 106px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: start;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 67px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot {
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .users {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff2c43;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ margin: 0 10px 10px 10px;
|
|
|
+ padding: 2px;
|
|
|
+ background: linear-gradient(90deg, rgba(211, 252, 111, 1), rgba(61, 248, 255, 1));
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(176, 123, 255, 0.3);
|
|
|
+ border-radius: 24px;
|
|
|
+
|
|
|
+ .boxContent {
|
|
|
+ background: linear-gradient(90deg, #a4fcff 0%, #d3fc6e 100%);
|
|
|
+ border-radius: 24px;
|
|
|
+ opacity: 1;
|
|
|
+ display: flex;
|
|
|
+ padding: 8px 15px;
|
|
|
+
|
|
|
+ .boxLeft {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .row1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 600;
|
|
|
+ text-shadow: -2px -1px 0px rgba(255, 255, 255, 1);
|
|
|
+ font-family: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ text-shadow: none;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2 {
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ height: 12vw;
|
|
|
+ border-radius: 6vw;
|
|
|
+ background: linear-gradient(90deg, #65c3e5 0%, #b1ff29 100%);
|
|
|
+
|
|
|
+ .row2content {
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ background: #0d2a2c;
|
|
|
+ height: 12vw;
|
|
|
+ border-radius: 6vw;
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 0 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxRiaht {
|
|
|
+ padding-left: 8vw;
|
|
|
+ padding-right: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 12vw;
|
|
|
+ height: 12vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 38vw;
|
|
|
+ height: 10vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizeList {
|
|
|
+ .prizeRow {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 10px 10px 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+
|
|
|
+ .bk {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizeRowContent {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ padding: 10px 15px;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .prizesTitle {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .sp {
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizesItems {
|
|
|
+ background: #fffbe8;
|
|
|
+ display: flex;
|
|
|
+ width: calc(100% - 16px);
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .prize {
|
|
|
+ width: 22vw;
|
|
|
+
|
|
|
+ .kaImg {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .kabk {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 70%;
|
|
|
+ height: 80%;
|
|
|
+ left: 52%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kaName {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .priceText {
|
|
|
+ color: #ff2c43;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons2 {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10vw;
|
|
|
+ display: flex;
|
|
|
+ z-index: 4;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 13vw;
|
|
|
+ height: 13vw;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(270deg, #531dbb 0%, #6e2fe5 100%);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 13vw;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, 0.25);
|
|
|
+ position: relative;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ p {
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .winningRecord {
|
|
|
+ .card {
|
|
|
+ margin: 10px 10px 0 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
chenrong