|
|
@@ -1,219 +1,372 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <view class="head">
|
|
|
- <image class="img" :src="detail.prizeIcon" mode="aspectFill"></image>
|
|
|
- <view class="info">
|
|
|
- <view class="title row">
|
|
|
- {{ detail.name }}
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="price">
|
|
|
- ￥{{ detail.price }}
|
|
|
- <span class="text">/张明信片</span>
|
|
|
+<template style="background-color: red">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: scroll;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="first2"
|
|
|
+ :style="{
|
|
|
+ background: 'url(https://file.rongcyl.cn/festatic/bkm/first2/bg.png)',
|
|
|
+ height: 'calc(100vh - 160rpx)',
|
|
|
+ 'background-repeat': 'no-repeat',
|
|
|
+ 'background-position': 'center center',
|
|
|
+ 'background-size': '100% 100%',
|
|
|
+ 'padding-top': safeAreaTop,
|
|
|
+ 'box-sizing': 'border-box',
|
|
|
+ overflow: 'scroll',
|
|
|
+ 'padding-bottom': '160rpx',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="text-white bold text-center mt-2">FIRST赏详情</div>
|
|
|
+ <div class="card relative">
|
|
|
+ <div class="flex pt-3 px-3">
|
|
|
+ <image :src="detail.prizeIcon" style="width: 168rpx; height: 169rpx; border-radius: 8px" mode="aspectFill" />
|
|
|
+ <div class="flex-1 pl-2">
|
|
|
+ <div class="" style="font-weight: 900">{{ detail.name }}</div>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div>
|
|
|
+ <span class="bold" style="color: #ff2c43; font-size: 24rpx">￥</span>
|
|
|
+ <span class="bold" style="color: #ff2c43; font-size: 38rpx">
|
|
|
+ {{ ('' + detail.price).split('.')[0] }}
|
|
|
+ </span>
|
|
|
+ <span class="bold" style="color: #ff2c43; font-size: 28rpx">
|
|
|
+ .{{ ('' + detail.price).split('.')[1] }}
|
|
|
+ </span>
|
|
|
+ <span style="color: #4e504f; font-size: 14px">/张明信片</span>
|
|
|
+ </div>
|
|
|
+ <div class="pt-2">
|
|
|
+ <img
|
|
|
+ @click="$navigateTo('/pages/rule/rule', { type: 5 })"
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/rule.png"
|
|
|
+ style="width: 134rpx; height: 48rpx"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between" style="margin-top: 5px">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
|
|
|
+ style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
|
|
|
+ class="relative right-2"
|
|
|
+ style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
|
|
|
+ class="relative right-4"
|
|
|
+ style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
|
|
|
+ class="relative right-6"
|
|
|
+ style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
|
|
|
+ class="relative right-8"
|
|
|
+ style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img
|
|
|
+ src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/hot.png"
|
|
|
+ class="relative right-2"
|
|
|
+ style="width: 32rpx; height: 32rpx; display: inline-block"
|
|
|
+ />
|
|
|
+ <span style="color: #fc5b20" class="fs11">{{ detail.hotNum }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="absolute left-0 right-0 bottom-6 mx-auto"
|
|
|
+ style="
|
|
|
+ width: 670rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ background: url(https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/notice_c.png) no-repeat
|
|
|
+ center center;
|
|
|
+ background-size: cover;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="absolute top-1 left-2"
|
|
|
+ style="width: 106rpx; height: 28rpx; font-size: 12px; font-weight: 600; color: #ffff00"
|
|
|
+ >
|
|
|
+ {{ lockData.userId ? '锁箱中' : '' }}
|
|
|
</view>
|
|
|
- <image
|
|
|
- @click="$navigateTo('/pages/rule/rule', { type: 5 })"
|
|
|
- class="button"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button1.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <!-- <view class="users">
|
|
|
- <image
|
|
|
- class="photo"
|
|
|
- :style="'left:' + index * 11 + 'px'"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'"
|
|
|
- v-for="(item, index) in userList"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="hot">
|
|
|
- <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/hot.png" mode="widthFix"></image>
|
|
|
- {{ detail.hotNum }}
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="cardList">
|
|
|
- <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk1.png'" mode="widthFix"></image>
|
|
|
- <view class="leftButton" @click="left"></view>
|
|
|
- <view class="rightButton" @click="right"></view>
|
|
|
- <view class="list">
|
|
|
- <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList" @click="clickCard(item)">
|
|
|
- <image
|
|
|
- v-if="item.check"
|
|
|
- class="kaBkActive"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, item) + 'Active.png'"
|
|
|
- mode="heightFix"
|
|
|
- ></image>
|
|
|
- <image
|
|
|
- class="kaBk"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, item) + '.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <numImg class="num" :value="item" :type="2" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="examples">
|
|
|
- <view class="example">
|
|
|
- <image
|
|
|
- class="exampleImg"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 0 }) + '.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType1.png'" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="example">
|
|
|
- <image
|
|
|
- class="exampleImg"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 2 }) + '.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType5.png'" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="example">
|
|
|
- <image
|
|
|
- class="exampleImg"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 1 }) + '.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType4.png'" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="buttons">
|
|
|
- <image
|
|
|
- class="button1"
|
|
|
- @click="toKnapsack"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button6.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <view class="">
|
|
|
- <image
|
|
|
- class="button2"
|
|
|
+ <div class="text-white fs12 mt-5 px-2 pt-1 lockBox">
|
|
|
+ <view class="text" v-if="!lockData.userId">本福袋连续购买10发，即开启保护机制</view>
|
|
|
+ <view class="info" v-else>
|
|
|
+ <image class="photo" :src="lockData.userAvtar" mode="aspectFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">{{ lockData.userName }}</view>
|
|
|
+ <view class="tip">目前已开启自动保护机制</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ 保护倒计时:
|
|
|
+ <span v-if="lockHour != '00'">
|
|
|
+ <span class="time">{{ lockHour }}</span>
|
|
|
+ :
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <span class="time">{{ lockMin }}</span>
|
|
|
+ :
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <span class="time">{{ lockSecond }}</span>
|
|
|
+ </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="absolute left-0 right-0 bottom-1 mx-auto"
|
|
|
+ style="
|
|
|
+ width: 690rpx;
|
|
|
+ height: 12px;
|
|
|
+ background: #4f5150;
|
|
|
+ box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.8);
|
|
|
+ border-radius: 22px 22px 22px 22px;
|
|
|
+ opacity: 1;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="absolute top-1 mx-auto"
|
|
|
+ style="
|
|
|
+ left: 10rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ width: 670rpx;
|
|
|
+ min-height: 890rpx;
|
|
|
+ background: linear-gradient(180deg, #ccd3d9 0%, #ffffff 5%);
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ opacity: 1;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="flex justify-around" style="margin: 10px 0">
|
|
|
+ <img
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab1.png"
|
|
|
+ v-if="tabIndex !== 1"
|
|
|
+ @click="tabIndex = 1"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="tabIndex == 1"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab1a.png"
|
|
|
+ @click="tabIndex = 1"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="tabIndex !== 2"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab2.png"
|
|
|
+ @click="tabIndex = 2"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="tabIndex == 2"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab2a.png"
|
|
|
+ @click="tabIndex = 2"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="tabIndex != 3"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab3.png"
|
|
|
+ @click="tabIndex = 3"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="tabIndex == 3"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/tab3a.png"
|
|
|
+ @click="tabIndex = 3"
|
|
|
+ style="width: 126rpx; height: 32rpx"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="cardList list" style="padding: 10rpx 16rpx 20rpx 16rpx" v-if="tabIndex == 1">
|
|
|
+ <div
|
|
|
+ :class="['flex', 'items-center', 'justify-center', item.status == 0 ? 'c1' : 'c2']"
|
|
|
+ v-for="(item, index) in cardList"
|
|
|
+ @click="clickCard(item)"
|
|
|
+ >
|
|
|
+ <numImg v-if="item.status == 0" class="num" :value="item" :type="2" />
|
|
|
+ <img
|
|
|
+ v-if="item.status == 2"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/gift_a.png"
|
|
|
+ style="width: 60rpx; height: 72rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="item.status == 1"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/lock.png"
|
|
|
+ style="width: 60rpx; height: 60rpx"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ v-if="item.check"
|
|
|
+ class="checkBk"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/imgv2/first/cardCheck.png"
|
|
|
+ mode="widthFix"
|
|
|
+ ></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list pt-4" style="position: relative" v-if="tabIndex == 2">
|
|
|
+ <div v-for="(item, index) in prizeList" :key="index">
|
|
|
+ <div class="titleTip">概率：{{ item.probability }}%(此概率为当前赏级概率)</div>
|
|
|
+ <Title :title="$selectDictLabel(rewardType, item.type).split('赏')[0]" />
|
|
|
+ <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
|
|
|
+ <div
|
|
|
+ v-for="(item2, index2) in item.prizeList"
|
|
|
+ @click="showImg(item2)"
|
|
|
+ :class="['mr-2', item2.leftNum == 0 ? 'grey' : '']"
|
|
|
+ style="width: 168rpx; background-color: #f9f6f2; border-radius: 4px; margin-bottom: 10px"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ :src="item2.icon"
|
|
|
+ mode="aspectFill"
|
|
|
+ style="width: 144rpx; height: 144rpx; border-radius: 5px; margin: auto"
|
|
|
+ />
|
|
|
+ <div class="fs13 pl-2 prizeName">{{ item2.name }}</div>
|
|
|
+ <div style="color: #ea6636" class="pl-2">
|
|
|
+ <span class="fs11">参考价</span>
|
|
|
+ <span class="fs14 bold">{{ detail.price }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list winningRecord" style="padding: 20rpx 0" v-if="tabIndex == 3">
|
|
|
+ <view class="winningRecordCard" v-for="(item, index) in winningRecordList" :key="index">
|
|
|
+ <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
+ <view style="flex: 1">
|
|
|
+ <view class="row">
|
|
|
+ <view class="left">
|
|
|
+ <span class="name">{{ item.userName }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="right text1">
|
|
|
+ <span>{{ item.creatTime }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" style="margin-top: 10px">
|
|
|
+ <view class="left">
|
|
|
+ <image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right" style="font-size: 14px">
|
|
|
+ <view class="name">{{ item.prizeName }}</view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="type">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1</view>
|
|
|
+ <span style="font-size: 12px">No.{{ item.id }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/dots.png"
|
|
|
+ class="absolute mx-auto inline-block left-0 right-0"
|
|
|
+ style="width: 612rpx; height: 24rpx; bottom: -12rpx"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="fixed right-2 bottom-20" style="height: 460rpx">
|
|
|
+ <img
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/fu.png"
|
|
|
+ style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="toKnapsack"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/bag.png"
|
|
|
+ style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="refresh"
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/refresh.png"
|
|
|
+ style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
|
|
|
+ />
|
|
|
+ <button open-type="share" class="share_btn">
|
|
|
+ <img
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/share.png"
|
|
|
+ style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
|
|
|
+ />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="buy items-center">
|
|
|
+ <div class="pica ml-2" style="margin-top: -38rpx">
|
|
|
+ <img src="https://file.rongcyl.cn/festatic/bkm/first2/pica.png" class="w-full h-full" />
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 text-white fs12 ml12 relative bottom-3 pl-3">
|
|
|
+ <span class="inline-block">已选{{ selectIndex.length }}个 合计:</span>
|
|
|
+ <span class="inline-block" style="color: #ea6636">
|
|
|
+ <span class="bold">¥</span>
|
|
|
+ <span class="fs18 bold">{{ (selectIndex.length * detail.price).toFixed(2) }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
@click="submit"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button4.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- <!-- <image class="button2" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/button1.png" mode="widthFix"></image> -->
|
|
|
- </view>
|
|
|
- <image
|
|
|
- @click="toWinningRecord"
|
|
|
- class="button1"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button3.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="lockBox">
|
|
|
- <view class="text" v-if="!lockData.userId">本福袋连续购买10发，即开启保护机制</view>
|
|
|
- <view class="info" v-else>
|
|
|
- <image class="photo" :src="lockData.userAvtar" mode="aspectFill"></image>
|
|
|
- <view class="right">
|
|
|
- <view class="row">
|
|
|
- <view class="name">{{ lockData.userName }}</view>
|
|
|
- <view class="tip">目前已开启自动保护机制</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- 保护倒计时:
|
|
|
- <span v-if="lockHour != '00'">
|
|
|
- <span class="time">{{ lockHour }}</span>
|
|
|
- :
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span class="time">{{ lockMin }}</span>
|
|
|
- :
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span class="time">{{ lockSecond }}</span>
|
|
|
- </span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="prizes">
|
|
|
- <image class="title" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/title.png'" mode="widthFix"></image>
|
|
|
- <view class="prizesList" v-for="(item, index) in prizeList">
|
|
|
- <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk2.png'" mode="scaleToFill"></image>
|
|
|
- <view class="prizesTitle">
|
|
|
- {{ $selectDictLabel(rewardType, item.type) }}
|
|
|
- </view>
|
|
|
- <view class="prizesImgOne" v-if="item.type == 22">
|
|
|
- <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
|
|
|
- <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="prizesImg" v-else>
|
|
|
- <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
|
|
|
- <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image
|
|
|
- class="refresh"
|
|
|
- @click="refresh"
|
|
|
- :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/refresh.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
+ src="https://file.rongcyl.cn/festatic/bkm/first2/bug.png"
|
|
|
+ class="b_btn relative bottom-3 right-2"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
|
|
|
<imgPopup ref="imgPopup" />
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import imgPopup from '@/component/imgPopup.vue'
|
|
|
import { rewardType } from '@/utils/commonConfig.js'
|
|
|
-import { prizePoolStatusApi, drawCardSubmitApi, raffleDetailApi, prizeListApi, getLockInfoApi } from '@/api/drawCard.js'
|
|
|
+import {
|
|
|
+ prizePoolStatusApi,
|
|
|
+ drawCardSubmitApi,
|
|
|
+ raffleDetailApi,
|
|
|
+ prizeListApi,
|
|
|
+ prizeUserListApi,
|
|
|
+ getLockInfoApi,
|
|
|
+} from '@/api/drawCard.js'
|
|
|
import { cardType, formatSeconds } from '@/utils/utils.js'
|
|
|
|
|
|
import numImg from '@/component/numImg.vue'
|
|
|
import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
-
|
|
|
-const { v4: uuidv4 } = require('uuid')
|
|
|
-
|
|
|
+import Title from '@/component/title.vue'
|
|
|
export default {
|
|
|
- components: {
|
|
|
- numImg,
|
|
|
- paymentPopup,
|
|
|
- imgPopup,
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- userId: wx.getStorageSync('userId'),
|
|
|
- uuid: '',
|
|
|
- socketTimer: null,
|
|
|
- lockTimeCountdown: null,
|
|
|
- lockData: null,
|
|
|
- lockTime: '',
|
|
|
- cardType: cardType,
|
|
|
rewardType: rewardType,
|
|
|
+ safeAreaTop: '0px',
|
|
|
+ tabIndex: 1,
|
|
|
params: {
|
|
|
raffleId: '',
|
|
|
- limit: 12,
|
|
|
+ limit: 999,
|
|
|
page: 1,
|
|
|
},
|
|
|
detail: {},
|
|
|
- total: 0,
|
|
|
- userList: 8,
|
|
|
cardList: [],
|
|
|
selectIndex: [],
|
|
|
prizeList: [],
|
|
|
+ winningRecordList: [],
|
|
|
+ userId: wx.getStorageSync('userId'),
|
|
|
+ uuid: '',
|
|
|
+ socketTimer: null,
|
|
|
+ lockTimeCountdown: null,
|
|
|
+ lockData: null,
|
|
|
+ lockTime: '',
|
|
|
}
|
|
|
},
|
|
|
- onLoad(query) {
|
|
|
- if (query.id) {
|
|
|
- this.params.raffleId = query.id
|
|
|
- this.init()
|
|
|
- }
|
|
|
- this.paymentSuccess()
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- this.leave()
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- this.leave()
|
|
|
+ components: {
|
|
|
+ Title,
|
|
|
+ imgPopup,
|
|
|
+ paymentPopup,
|
|
|
+ numImg,
|
|
|
},
|
|
|
computed: {
|
|
|
// 锁箱小时
|
|
|
@@ -238,6 +391,17 @@ export default {
|
|
|
return timeText
|
|
|
},
|
|
|
},
|
|
|
+ onLoad(query) {
|
|
|
+ console.log(query, 'query')
|
|
|
+ if (query.id) {
|
|
|
+ this.params.raffleId = query.id
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ this.paymentSuccess()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getSafeAreaTop()
|
|
|
+ },
|
|
|
methods: {
|
|
|
init() {
|
|
|
// 获取卡牌商品列表
|
|
|
@@ -246,14 +410,13 @@ export default {
|
|
|
this.getDetail()
|
|
|
//获取奖池
|
|
|
this.getPrizeList()
|
|
|
+ // 中奖记录
|
|
|
+ this.getPrizeUserList()
|
|
|
// 初始化锁箱
|
|
|
this.initLock()
|
|
|
// 连接锁箱Socket
|
|
|
this.connectSocket()
|
|
|
},
|
|
|
- showImg(value) {
|
|
|
- this.$refs.imgPopup.show(value)
|
|
|
- },
|
|
|
leave() {
|
|
|
console.log('离开页面')
|
|
|
// 离开页面
|
|
|
@@ -346,41 +509,36 @@ export default {
|
|
|
url: '/pages/knapsack/knapsack',
|
|
|
})
|
|
|
},
|
|
|
- refresh() {
|
|
|
- wx.showLoading()
|
|
|
- setTimeout(function () {
|
|
|
- wx.hideLoading()
|
|
|
- }, 1000)
|
|
|
- this.init()
|
|
|
- this.selectIndex = []
|
|
|
- for (var i = 0; i < this.cardList.length; i++) {
|
|
|
- this.cardList[i].check = false
|
|
|
- }
|
|
|
+ showImg(value) {
|
|
|
+ this.$refs.imgPopup.show(value)
|
|
|
},
|
|
|
- getPrizeList() {
|
|
|
+ getPrizeUserList() {
|
|
|
let params = {
|
|
|
+ limit: 9999,
|
|
|
+ page: 1,
|
|
|
raffleId: this.params.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 == 22) {
|
|
|
- newArray = []
|
|
|
- newArray.push(res.data[i])
|
|
|
- res.data.splice(i, 1)
|
|
|
- newArray.push(...res.data)
|
|
|
- break
|
|
|
- }
|
|
|
+ prizeUserListApi(params).then(res => {
|
|
|
+ this.winningRecordList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCardList() {
|
|
|
+ prizePoolStatusApi(this.params).then(res => {
|
|
|
+ console.log(res, '卡牌分页')
|
|
|
+ for (var i = 0; i < res.data.list.length; i++) {
|
|
|
+ res.data.list[i].check = false
|
|
|
}
|
|
|
- this.prizeList = newArray
|
|
|
+ this.cardList = res.data.list
|
|
|
+ this.selectFormat()
|
|
|
})
|
|
|
},
|
|
|
- toWinningRecord() {
|
|
|
- let params = {
|
|
|
- raffleId: this.params.raffleId,
|
|
|
+ // 标记已经选中卡牌
|
|
|
+ selectFormat() {
|
|
|
+ for (var i = 0; i < this.cardList.length; i++) {
|
|
|
+ if (this.selectIndex.includes(this.cardList[i].number)) {
|
|
|
+ this.cardList[i].check = true
|
|
|
+ }
|
|
|
}
|
|
|
- this.$navigateTo('/pages/winningRecord/winningRecord', params)
|
|
|
},
|
|
|
getDetail() {
|
|
|
let params = {
|
|
|
@@ -391,33 +549,24 @@ export default {
|
|
|
this.detail = res.data
|
|
|
})
|
|
|
},
|
|
|
- submit() {
|
|
|
- // 购买时判断锁箱
|
|
|
- if (this.lockData?.userId && this.userId != this.lockData.userId) {
|
|
|
- wx.showToast({
|
|
|
- title: '锁箱中无法购买。',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.selectIndex.length == 0) {
|
|
|
- wx.showToast({
|
|
|
- title: '请选则要购买的卡牌。',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
+ getPrizeList() {
|
|
|
let params = {
|
|
|
raffleId: this.params.raffleId,
|
|
|
}
|
|
|
- this.$refs.paymentPopup.show(params, this.selectIndex, this.detail)
|
|
|
- },
|
|
|
- // 支付成功后回调
|
|
|
- paymentSuccess() {
|
|
|
- let _this = this
|
|
|
- console.log('刷新抽卡界面')
|
|
|
- // 刷新界面
|
|
|
- _this.refresh()
|
|
|
+ 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
|
|
|
+ })
|
|
|
},
|
|
|
// 选中取消选中卡牌
|
|
|
clickCard(item) {
|
|
|
@@ -432,393 +581,289 @@ export default {
|
|
|
this.selectIndex.splice(index, 1)
|
|
|
}
|
|
|
},
|
|
|
- // 标记已经选中卡牌
|
|
|
- selectFormat() {
|
|
|
- for (var i = 0; i < this.cardList.length; i++) {
|
|
|
- if (this.selectIndex.includes(this.cardList[i].number)) {
|
|
|
- this.cardList[i].check = true
|
|
|
- }
|
|
|
- }
|
|
|
+ // 支付成功后回调
|
|
|
+ paymentSuccess() {
|
|
|
+ let _this = this
|
|
|
+ console.log('刷新抽卡界面')
|
|
|
+ // 刷新界面
|
|
|
+ _this.refresh()
|
|
|
},
|
|
|
- getCardList() {
|
|
|
- prizePoolStatusApi(this.params).then(res => {
|
|
|
- console.log(res, '卡牌分页')
|
|
|
- for (var i = 0; i < res.data.list.length; i++) {
|
|
|
- res.data.list[i].check = false
|
|
|
- }
|
|
|
- this.cardList = res.data.list
|
|
|
- this.selectFormat()
|
|
|
- this.total = res.data.total
|
|
|
+ getSafeAreaTop() {
|
|
|
+ wx.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.safeAreaTop = res.safeArea.top + 'px'
|
|
|
+ },
|
|
|
})
|
|
|
},
|
|
|
- left() {
|
|
|
- console.log('上一页')
|
|
|
- if (this.params.page > 1) {
|
|
|
- this.params.page = this.params.page - 1
|
|
|
+ refresh() {
|
|
|
+ wx.showLoading()
|
|
|
+ setTimeout(function () {
|
|
|
+ wx.hideLoading()
|
|
|
+ }, 1000)
|
|
|
+ this.init()
|
|
|
+ this.selectIndex = []
|
|
|
+ for (var i = 0; i < this.cardList.length; i++) {
|
|
|
+ this.cardList[i].check = false
|
|
|
}
|
|
|
- this.getCardList()
|
|
|
},
|
|
|
- right() {
|
|
|
- console.log('下一页')
|
|
|
- let pages = Math.ceil(this.total / this.params.limit)
|
|
|
- if (this.params.page < pages) {
|
|
|
- this.params.page = this.params.page + 1
|
|
|
+ submit() {
|
|
|
+ if (this.selectIndex.length == 0) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '请选则要购买的卡牌。',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- this.getCardList()
|
|
|
+ let params = {
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ this.$refs.paymentPopup.show(params, this.selectIndex, this.detail)
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.container {
|
|
|
- background: #9ec8f9;
|
|
|
- padding-top: 15px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .refresh {
|
|
|
- position: fixed;
|
|
|
- right: 4px;
|
|
|
- top: 55%;
|
|
|
- width: 45px;
|
|
|
+.first2 {
|
|
|
+ padding-top: v-bind(safeAreaBottom);
|
|
|
+ color: v-bind(color);
|
|
|
+
|
|
|
+ .card {
|
|
|
+ width: 710rpx;
|
|
|
+ margin: auto;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 400rpx;
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
|
|
|
- .head {
|
|
|
- background: #fff;
|
|
|
- border: 10px;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 106px;
|
|
|
- height: 106px;
|
|
|
- border-radius: 5px;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- flex: 1;
|
|
|
+ .c1 {
|
|
|
+ background-image: url(https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk2.png);
|
|
|
+ // width: 96rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: contain;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #999999;
|
|
|
+ .checkBk {
|
|
|
+ position: absolute;
|
|
|
+ width: 105%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .button {
|
|
|
- width: 67px;
|
|
|
- }
|
|
|
+ .c2 {
|
|
|
+ background-image: url(https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk4.png);
|
|
|
+ // width: 96rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: contain;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+ }
|
|
|
|
|
|
- .hot {
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
+ .buy {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ background: #000000;
|
|
|
+ opacity: 1;
|
|
|
+ display: flex;
|
|
|
|
|
|
- image {
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .pica {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
|
|
|
- .users {
|
|
|
- position: relative;
|
|
|
+ .b_btn {
|
|
|
+ width: 232rpx;
|
|
|
+ height: 76rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .photo {
|
|
|
- position: absolute;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.cardList {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
|
+}
|
|
|
|
|
|
- .title {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+.list {
|
|
|
+ // height: calc(100% - 32rpx - 20px - 20px);
|
|
|
+ // overflow: auto;
|
|
|
+}
|
|
|
|
|
|
- .price {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #ff2c43;
|
|
|
+.prizeName {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
|
|
|
- .text {
|
|
|
- color: #999999;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.titleTip {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 42px;
|
|
|
+ padding-left: 25vw;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- .cardList {
|
|
|
+.winningRecord {
|
|
|
+ .winningRecordCard {
|
|
|
margin-top: 10px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .bk {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .leftButton {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- left: 20px;
|
|
|
- height: 40px;
|
|
|
- width: 20px;
|
|
|
- z-index: 5;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f7f0e8;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ // box-shadow: 1px 1px 3px #b7b7b7;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ // flex: 1;
|
|
|
+ margin-right: 8px;
|
|
|
+ width: 10vw;
|
|
|
+ height: 10vw;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
- .rightButton {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- right: 20px;
|
|
|
- height: 40px;
|
|
|
- width: 20px;
|
|
|
- z-index: 5;
|
|
|
- }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .list {
|
|
|
- padding: 35px 40px;
|
|
|
- width: calc(100% - 80px);
|
|
|
- height: calc(100% - 70px);
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
- grid-template-rows: 1fr 1fr 1fr;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: inline-flex;
|
|
|
- justify-content: center;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
- position: relative;
|
|
|
|
|
|
- .kaBkActive {
|
|
|
- height: 132%;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
- .kaBk {
|
|
|
- width: 70%;
|
|
|
- border-radius: 4px;
|
|
|
- z-index: 2;
|
|
|
+ .img {
|
|
|
+ width: 15vw;
|
|
|
+ height: 15vw;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .num {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- z-index: 2;
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 10vw;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .active {
|
|
|
- .kaBk {
|
|
|
- // box-shadow: 0px 1px 6px 3px rgba(255,77,0,0.65);
|
|
|
- }
|
|
|
+ .type {
|
|
|
+ padding: 0 2px;
|
|
|
+ background: #fc5b20;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 11px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
+.share_btn {
|
|
|
+ background-color: transparent;
|
|
|
+ border-width: 0 !important;
|
|
|
+ border-radius: 0;
|
|
|
+ overflow: initial;
|
|
|
+ text-align: start;
|
|
|
+ padding: 0;
|
|
|
+ box-shadow: none !important;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .button1 {
|
|
|
- width: 25vw;
|
|
|
- }
|
|
|
+.lockBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .button2 {
|
|
|
- width: 35vw;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
- .lockBox {
|
|
|
- margin: 10px 20px;
|
|
|
- padding: 10px;
|
|
|
- height: 16vw;
|
|
|
- background: #fff;
|
|
|
- border-radius: 15px;
|
|
|
+ .info {
|
|
|
display: flex;
|
|
|
+ width: 100%;
|
|
|
justify-content: center;
|
|
|
- align-items: center;
|
|
|
- box-shadow: 1px 2px 2px #459bff;
|
|
|
|
|
|
- .text {
|
|
|
- color: #459bff;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
+ .photo {
|
|
|
+ width: 9vw;
|
|
|
+ height: 9vw;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
- .info {
|
|
|
+ .right {
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
- width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
- .photo {
|
|
|
- width: 14vw;
|
|
|
- height: 14vw;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- margin-left: 10px;
|
|
|
- flex: 1;
|
|
|
+ .row {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
|
|
|
- .row {
|
|
|
- width: 100%;
|
|
|
- color: #459bff;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 10px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .time {
|
|
|
- padding: 5px;
|
|
|
- color: #fff;
|
|
|
- background: #459bff;
|
|
|
- margin: 0 8px;
|
|
|
- border-radius: 5px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: #459bff;
|
|
|
- width: 40%;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- font-size: 11px;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- font-weight: 500;
|
|
|
- color: #459bff;
|
|
|
- }
|
|
|
+ .time {
|
|
|
+ padding: 2px;
|
|
|
+ color: #565656;
|
|
|
+ background: #ffff00;
|
|
|
+ margin: 0 8px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .prizes {
|
|
|
- .title {
|
|
|
- width: 103px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .prizesList {
|
|
|
- margin: 20px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- // z-index: 5;
|
|
|
-
|
|
|
- .bk {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
|
|
|
- .prizesTitle {
|
|
|
- position: relative;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- width: 100%;
|
|
|
- margin-left: 1px;
|
|
|
- margin-top: 15px;
|
|
|
- padding-left: 15px;
|
|
|
- color: #fff;
|
|
|
- font-weight: 800;
|
|
|
- background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .prizesImg {
|
|
|
- position: relative;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- margin: 15px;
|
|
|
- white-space: wrap;
|
|
|
- text-align: center;
|
|
|
- // overflow: auto;
|
|
|
-
|
|
|
- .image {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- display: inline-block;
|
|
|
- width: 36vw;
|
|
|
- height: 36vw;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
+ .name {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ width: 40%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .prizesImgOne {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 15px;
|
|
|
-
|
|
|
- .image {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- display: inline-block;
|
|
|
- width: 45vw;
|
|
|
- height: 45vw;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
+ .tip {
|
|
|
+ font-size: 11px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.examples {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 0 10px;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .example {
|
|
|
- width: 14vw;
|
|
|
- margin-right: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .exampleImg {
|
|
|
- width: 13vw;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- transform: translateY(50%);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
chenrong