no message

pages/drawCard_infinite/drawCard_infinite.vue

@@ -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>