2509 lines
50 KiB
Vue
2509 lines
50 KiB
Vue
<template>
|
||
<view class="content minHeight100">
|
||
<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
|
||
<uni-icons type="left" color="#000000"></uni-icons>
|
||
<!-- <view class="" style="color: #000000; margin-left: 240rpx;">
|
||
{{$c.detailPageTitle((pageData && pageData.goods) || '')}}
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="center relative" style="z-index: 10;" :style="{ top: $sys().statusBarHeight + 'px' }">
|
||
<text class="" style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "")
|
||
}}</text>
|
||
</view>
|
||
|
||
|
||
<view class="header relative" v-if="pageData && pageData.goods"
|
||
:style="{ background: 'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%' }">
|
||
<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
|
||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
|
||
<view class="header-suoxiang center"
|
||
v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
|
||
<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
|
||
<view class="hidden ml10">{{ pageData.lock_info.goods_lock_user_nickname }}</view>
|
||
<image class="ml20" :src="$img1('index/suoxinag.png')" mode="aspectFit"></image>
|
||
<view class="ml30">倒计时：{{ secNum }}S</view>
|
||
</view>
|
||
<view class="header-title center"
|
||
:style="{ background: 'url(' + $img1('common/chouTitle.png') + ') no-repeat 0 0 / 100% 100%' }">
|
||
<text>
|
||
<template></template>
|
||
</text>
|
||
<text>
|
||
<template>￥</template>
|
||
<template>{{ pageData.goods.price }}</template>
|
||
</text>
|
||
<text>
|
||
<template>/抽</template>
|
||
</text>
|
||
</view>
|
||
<view class="header-canyu row align-center">
|
||
<view class="header-canyu-imgs flex">
|
||
<image v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i" :style="{ 'z-index': i }"
|
||
:src="item" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="header-canyu-num mt10">{{ pageData.goods.join_count }}次参与</view>
|
||
</view>
|
||
|
||
|
||
<view class="header-shoucang justify-center" style=" flex-direction: column; margin-right: 48rpx;"
|
||
@tap="toggleCollect">
|
||
<image :src="pageData.goods.collection_is ? $img1('index/sc1.png') : $img1('index/sc2.png')"></image>
|
||
<text>收藏</text>
|
||
</view>
|
||
|
||
<view
|
||
style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));">
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class=""
|
||
style="display: flex; flex-direction: row; margin-left: 108rpx; margin-top: 26rpx; margin-bottom: 20rpx;">
|
||
<view class="" style="width: 160rpx; height: 92rpx;">
|
||
<image style="width: 160rpx; height: 92rpx;" @click="$refs.rulePop.getRule(pageData.danye_id, '购买说明')"
|
||
:src="$img1('common/gzsm.png')">
|
||
</image>
|
||
</view>
|
||
<view class="" style="margin-left: 26rpx;" @tap="tabChange(1)">
|
||
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/spyl1.png')">
|
||
</image>
|
||
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/spyl2.png')">
|
||
</image>
|
||
</view>
|
||
<view class="" style="margin-left: 26rpx;" @tap="tabChange(2)">
|
||
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/zsjl22.png')">
|
||
</image>
|
||
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/zsjl12.png')">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="lingzhu center" v-if="bossCardData && bossCardData.king_user">
|
||
<view class="lingzhu-img relative ml30">
|
||
<image :src="bossCardData.king_user.headimg" mode="aspectFill"></image>
|
||
<image :src="$img1('index/king.png')"></image>
|
||
</view>
|
||
<view class="lingzhu-content ml30 flex-1">
|
||
<view class="">{{ bossCardData.king_user.nickname }}</view>
|
||
<view class="">
|
||
第
|
||
<text>{{ bossCardData.king_user.count }}</text>
|
||
发晋升领主
|
||
已占领
|
||
<text>{{ bossCardData.king_user.z_nums }}</text>
|
||
发
|
||
</view>
|
||
</view>
|
||
<view class="flex ml40 mr30" @click="open('bossPop')">
|
||
<text style="font-size: 20rpx; color: #999999;">查看更多 ></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="pageData && pageData.goods.rage_is == 1" class="angry">
|
||
<view class="icon flex">
|
||
<image class="img100" src="/static/common/cardIcon.png" lazy-load></image>
|
||
</view>
|
||
<view class="ang-info">
|
||
<view class="ang-num">怒气值:{{ pageData.goods.user_rage }}</view>
|
||
<view class="progress">
|
||
<cmd-progress :percent="pageData.goods.user_rage_schedule" :show-info="false"
|
||
stroke-color="#FFFFFF;" stroke-shape="round" :strokeWidth="8"></cmd-progress>
|
||
</view>
|
||
<view class="tip">
|
||
{{ pageData.goods.item_card_info }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 商品预览 -->
|
||
<view v-if="tabCur == 1 && pageData" class="list" style="padding: 30rpx 20rpx 0;">
|
||
<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
|
||
<view class="list-title common_bg align-center">
|
||
<view class="align-center">
|
||
<image style="width: 56rpx; height: 56rpx;" :src="item.shang_imgurl"></image>
|
||
<text class="ml20" style="color: #999999;">{{ item.pro }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="goods-list justify-center">
|
||
<template v-for="(a, b) in item.goods_list">
|
||
<detail-list-item :item="a" @click="previewDetail(item, a)" :key="b">
|
||
<template #content>
|
||
<view class="item-info">
|
||
<view class="item-title hang1">
|
||
<text>{{ a.title }}</text>
|
||
</view>
|
||
<view class="item-price hang1">
|
||
<text>售价:<text style="font-size: 22rpx;">{{ a.price }}</text></text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</detail-list-item>
|
||
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 中赏记录 -->
|
||
<template v-if="tabCur == 2">
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
|
||
:up="upOption">
|
||
<scroll-view class="sub-tab" scroll-x>
|
||
<view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i"
|
||
:class="{ act: subTabCur == i }" @click="subTabChange(i)">
|
||
{{ item.shang_title }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="log-list">
|
||
<view class="log-item br10" v-for="(a, b) in logList" :key="b">
|
||
<view class="avatar">
|
||
<image :src="a.user_info && a.user_info.headimg" style="width:80rpx; height: 80rpx;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class="info">
|
||
<view class="name hang1">
|
||
{{ a.user_info && a.user_info.nickname }}
|
||
</view>
|
||
|
||
<view class="time">{{ a.addtime }}</view>
|
||
</view>
|
||
|
||
<view class="prize">
|
||
<view class="pic flex">
|
||
<image class="img100" :src="a.goodslist_imgurl"></image>
|
||
</view>
|
||
<view class="align-end column">
|
||
<view class="center" :style="{ background: a.shang_color }">{{ a.shang_title }}</view>
|
||
<view class="align-center mt10">
|
||
<view class="title hang1">
|
||
{{ a.goodslist_title }}
|
||
</view>
|
||
<view class="num">×1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</template>
|
||
|
||
<detail-button v-if="pageData" :pageData="pageData" :isWuxian="true" @button-click="confirmSubmit"
|
||
@button-wx-click="wuxianchou"></detail-button>
|
||
|
||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view class="res-pop common_bg column center" @click="close('resPop')">
|
||
<view class="res-pop-hd"></view>
|
||
<scroll-view class="res-pop-bd" scroll-y>
|
||
<view class="res-list">
|
||
<view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
|
||
<view class="pic center">
|
||
<image :src="item.goodslist_imgurl" lazy-load></image>
|
||
<view class="type-tag center"
|
||
:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
|
||
{{ item.shang_title }}
|
||
</view>
|
||
<view class="num center">{{ item.prize_num || '1' }}</view>
|
||
<view v-if="item.doubling > 1" class="yu-tag-text ziti"
|
||
style="bottom:75%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">
|
||
x{{ item.doubling }}</view>
|
||
</view>
|
||
<view class="title hang1" style="text-align: center;">
|
||
<text> {{ item.goodslist_title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="res-pop-ft">
|
||
<view class="btn-list">
|
||
<view class="ft-btn common_bg justify-center center" :style="{
|
||
backgroundImage: `url(${$img1('common/quhegui.png')})`
|
||
}" @click="toBag">
|
||
<text>去发货</text>
|
||
</view>
|
||
|
||
<view class="ft-btn common_bg justify-center center" :style="{
|
||
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
||
}" @click="confirmSubmit([0, buyNum])">
|
||
<text>继续抽</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="r-draw common_bg justify-center" :style="{
|
||
backgroundImage: `url(${$img1('common/chongzhi.png')})`
|
||
}" @click="$c.noDouble(doReDraw)">
|
||
<text class="draw-num">
|
||
重置×{{ prizeData && prizeData.data.length }}
|
||
</text>
|
||
<text class="num">(余{{ prizeData.item_card_count }})</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="bossPop" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view v-if="bossCardData && bossCardData.king_user" class="boss-pop relative">
|
||
<view class="boss-pop-title">
|
||
<text>领主接力</text>
|
||
</view>
|
||
|
||
|
||
<view @click="close('bossPop')" class="close flex">
|
||
<image class="img100" :src="$img1('index/close.png')"></image>
|
||
</view>
|
||
|
||
|
||
<view class="boss-avatar relative">
|
||
<image :src="bossCardData.king_user.headimg"></image>
|
||
<image :src="$img1('index/king.png')"></image>
|
||
|
||
<view class="boss-name hang1">
|
||
{{ bossCardData.king_user.nickname }}
|
||
</view>
|
||
|
||
<view class="boss-pop-guize align-center" @click="open('playPop')">
|
||
<image :src="$img1('common/ic_rule.png')" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="flex row center" style="font-size: 20rpx; color: #999999; margin-top: 24rpx;">
|
||
|
||
<text>挑战领主获得UU币奖励</text>
|
||
|
||
<text class="get-money-one">玩家每挑战一发,领主可获得</text>
|
||
<!-- <image class="get-money-two" :src="$img('/static/img/pay_type2.png')" mode="widthFix"></image> -->
|
||
<text class="get-money-three">{{ bossCardData.goods.lingzhu_fan }}币</text>
|
||
|
||
</view>
|
||
|
||
<view class="boss-tab">
|
||
<view class="boss-tab-item" v-for="(item, i) in bossTab" :key="i" :class="{
|
||
act: bossTabCur == i
|
||
}" @click="bossTabChange(i)">
|
||
|
||
<text>{{ item.title }}</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<child-scroll class="list-wrap" height="350rpx" ref="bossScroll" :fixed="false" :size="20"
|
||
@up="getBossData">
|
||
<view class="boss-list">
|
||
<template v-for="(item, i) in bossList">
|
||
<view v-if="bossTab[bossTabCur].id == 1" class="people-item mt30" :key="i">
|
||
<view class="avatar flex">
|
||
<image class="img100" :src="item.headimg"></image>
|
||
</view>
|
||
<view class="name hang1">{{ item.nickname }}</view>
|
||
</view>
|
||
|
||
<view v-if="bossTab[bossTabCur].id == 2" class="boss-log">
|
||
<view class="flex center">
|
||
<view class="avatar flex" style="width: 52rpx; height: 52rpx;">
|
||
<image class="img100" :src="item.headimg"></image>
|
||
</view>
|
||
<view class="name hang1">{{ item.nickname }}</view>
|
||
</view>
|
||
|
||
|
||
<view class="place">
|
||
<text>占领领主{{ item.time }}</text>
|
||
</view>
|
||
|
||
<!-- <view class="time"></view> -->
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</child-scroll>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="playPop" type="center">
|
||
<view v-if="bossCardData" class="play-pop common_bg">
|
||
<view class="close align-center justify-between">
|
||
<view class="close-icon"></view>
|
||
<view class="close-title">玩法规则</view>
|
||
<view class="close-icon flex" @click="close('playPop')">
|
||
<image class="img100" :src="$img1('index/close.png')"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<swiper class="p-swiper">
|
||
<swiper-item class="p-item" v-for="(item, i) in bossCardData.ling_goods_list" :key="i">
|
||
<view class="play-pic flex">
|
||
<image class="img100" :src="item.imgurl"></image>
|
||
</view>
|
||
<view class="play-name hang1">
|
||
{{ item.title }}
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- <view class="line"></view> -->
|
||
<view class="pd30 br20" style="background: #D8D8D8;">
|
||
<scroll-view class="rule-text" scroll-y>
|
||
<view v-html="playRuleData"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="dPop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
|
||
<view v-if="previewData" class="d-pop">
|
||
<view class="pic center relative">
|
||
<image :src="previewData.imgurl" lazy-load></image>
|
||
<view class="flex center">{{ previewData.shang_title }}</view>
|
||
</view>
|
||
<view class="title">
|
||
<text class="hang1">
|
||
{{ previewData.title }}
|
||
</text>
|
||
</view>
|
||
<view class="d-list">
|
||
<view class="d-item">
|
||
<!-- {{ previewData.shang_title }} -->
|
||
概率:{{ previewData.pro }}%
|
||
</view>
|
||
|
||
<view class="d-item">产品类型:{{ optData.type_text }}</view>
|
||
</view>
|
||
<view class="close icon" @click="close('dPop')">
|
||
<image :src="$img('/static/img/close.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
|
||
:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
|
||
:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
|
||
@change-pay="changePay" @toggle-agree="isAgree = !isAgree" @to-coupon="toCoupon"
|
||
@confirm="$c.noDouble1(confirmSubmit, [1, buyNum])"></order-confirm-popup>
|
||
|
||
<view v-if="aniShow" class="ani-pop">
|
||
<image :src="aniSrc" lazy-load></image>
|
||
</view>
|
||
|
||
<buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true])"></buy-notice>
|
||
|
||
<rule-pop ref="rulePop"></rule-pop>
|
||
<coupon-pop ref="couponPop"></coupon-pop>
|
||
<!-- 添加直接引用的预览组件 -->
|
||
<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
|
||
import DetailListItem from '@/components/detail-list-item/detail-list-item.vue'
|
||
import DetailButton from '@/components/detail-button/detail-button.vue'
|
||
export default {
|
||
components: {
|
||
OrderConfirmPopup,
|
||
DetailListItem,
|
||
DetailButton
|
||
},
|
||
data() {
|
||
return {
|
||
userCoupon: null,
|
||
optData: '',
|
||
buyNum: 0,
|
||
useMoney: true,
|
||
useIntegral: true,
|
||
useMoney2: true,
|
||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||
downOption: {
|
||
auto: false
|
||
},
|
||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||
upOption: {
|
||
auto: false,
|
||
page: {
|
||
size: 15 // 每页数据的数量,默认10
|
||
}
|
||
},
|
||
tabList: {
|
||
1: {
|
||
title: '包含以下赠品'
|
||
},
|
||
2: {
|
||
title: '中赏记录'
|
||
}
|
||
},
|
||
tabCur: 1,
|
||
swCur: 0,
|
||
autoplay: false,
|
||
subTab: [],
|
||
subTabCur: 0,
|
||
bossTab: [{
|
||
id: 1,
|
||
title: '挑战人数'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '领主记录'
|
||
}
|
||
],
|
||
bossTabCur: 0,
|
||
pageData: '',
|
||
previewData: '',
|
||
orderData: '',
|
||
prizeData: '',
|
||
sendRuleData: '',
|
||
couponData: '',
|
||
isAgree: true,
|
||
aniShow: false,
|
||
bossCardData: '',
|
||
bossList: [],
|
||
bossTotal: 0,
|
||
playRuleData: '',
|
||
logList: [],
|
||
choujiangloading: false
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
reChooseNum() {
|
||
if (!this.prizeData || this.prizeData.data.length <= 0) {
|
||
return 0
|
||
}
|
||
|
||
const arr = this.prizeData.data.filter(item => item.isChoose)
|
||
console.log(arr.length)
|
||
|
||
return arr.length
|
||
}
|
||
},
|
||
|
||
onShareAppMessage() {
|
||
|
||
if (this.$refs["couponPop"] != null) {
|
||
var co = this.$refs["couponPop"].getfengxiaodata();
|
||
if (co != null) {
|
||
console.log(co);
|
||
return co;
|
||
}
|
||
}
|
||
|
||
return {
|
||
title: this.$config.getAppSetting("app_name") + `${this.pageData.goods.title}系列`,
|
||
imageUrl: this.pageData.goods.imgurl_detail,
|
||
path: '/pages/shouye/detail_wuxian' +
|
||
this.$c.qs({
|
||
goods_id: this.pageData.goods.id,
|
||
goods_num: this.pageData.goods.num,
|
||
pid: uni.getStorageSync('userinfo').ID
|
||
})
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.optData = options
|
||
|
||
uni.$on('chooseCoupon', data => {
|
||
// console.log('data', data)
|
||
|
||
this.couponData = data
|
||
this.confirmSubmit([0, this.buyNum])
|
||
})
|
||
|
||
// uni.getImageInfo({
|
||
// src: this.$img('/static/img/animation.png'),
|
||
// success: ({ path }) => {
|
||
// this.aniSrc = path
|
||
// }
|
||
// })
|
||
//$refs.rulePop.getRule(pageData.danye_id, '购买说明')
|
||
|
||
this.$c.getRule(10).then(res => {
|
||
if (res.status == 1) {
|
||
this.sendRuleData = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
onShow() {
|
||
this.autoplay = true
|
||
},
|
||
|
||
onReady() {
|
||
this.tabChange(this.tabCur)
|
||
|
||
// this.open('resPop')
|
||
// this.open('bossPop')
|
||
// this.open('playPop')
|
||
},
|
||
|
||
onHide() {
|
||
this.autoplay = false
|
||
},
|
||
|
||
onUnload() {
|
||
uni.$off('chooseCoupon')
|
||
},
|
||
|
||
methods: {
|
||
bossTabChange(i) {
|
||
this.bossTabCur = i
|
||
this.bossList = []
|
||
|
||
this.$refs.bossScroll.mescroll.resetUpScroll()
|
||
this.$refs.bossScroll.mescroll.scrollTo(0, 0)
|
||
},
|
||
|
||
previewDetail(item, a) {
|
||
|
||
const obj = {
|
||
imgurl: a.imgurl,
|
||
title: a.title,
|
||
// shang_title: item.shang_title,
|
||
pro: '概率:' + this.$c.removeTrailingZeros(a.real_pro) + '%',
|
||
shang_info: {
|
||
title: item.shang_title,
|
||
color: item.shang_color
|
||
},
|
||
goods_type: a.goods_type,
|
||
id: a.id
|
||
|
||
}
|
||
let goods = {
|
||
id: item.goods_id,
|
||
num: 0,
|
||
};
|
||
// console.log(a);
|
||
|
||
// 使用全局方法调用预览弹窗
|
||
this.$preview({
|
||
productType: this.optData.type_text,
|
||
dataItem: obj,
|
||
goods: goods
|
||
}).then(() => {
|
||
console.log('预览弹窗打开成功');
|
||
});
|
||
// this.previewData = obj
|
||
|
||
// this.open('dPop')
|
||
},
|
||
|
||
doReDraw() {
|
||
if (this.orderData.item_card_count <= 0) {
|
||
this.$c.toast({
|
||
title: '重置卡不足'
|
||
})
|
||
|
||
return
|
||
}
|
||
|
||
const arr = this.prizeData.data.map(item => item.id)
|
||
|
||
if (arr.length <= 0) {
|
||
this.$c.toast({
|
||
title: '请选择重置赏品'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.req({
|
||
url: 'item_card_chou',
|
||
data: {
|
||
goods_id: this.pageData.goods.id,
|
||
order_list_ids: arr.join(',')
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.close('resPop')
|
||
|
||
this.doRefresh()
|
||
this.getPrize(res.data.order_num)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
swChange(e) {
|
||
this.swCur = e.detail.current
|
||
},
|
||
|
||
toggleCollect() {
|
||
this.req({
|
||
url: 'addCollect',
|
||
data: {
|
||
goods_id: this.pageData.goods.id
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.getData()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
toBag() {
|
||
this.close('resPop')
|
||
|
||
this.$c.to({
|
||
type: 3,
|
||
url: '/pages/sangdai/sangdai'
|
||
})
|
||
},
|
||
|
||
toCoupon() {
|
||
this.$c.to({
|
||
url: '/pages/user/coupon',
|
||
query: {
|
||
type: 2,
|
||
total_price: this.orderData.order_total
|
||
}
|
||
})
|
||
},
|
||
|
||
getPrize(order_num) {
|
||
if (!order_num) {
|
||
return
|
||
}
|
||
|
||
setTimeout(() => {
|
||
this.req({
|
||
url: 'infinite_prizeorderlog',
|
||
data: {
|
||
order_num
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
res.data.data.map(item => {
|
||
item.isChoose = false
|
||
})
|
||
|
||
this.prizeData = res.data
|
||
|
||
if (res.data.data.length <= 0) {
|
||
this.getPrize(order_num)
|
||
return
|
||
}
|
||
|
||
|
||
this.bgmCtx.openBgm.play()
|
||
this.open('resPop')
|
||
// }, 1300)
|
||
}
|
||
}
|
||
})
|
||
}, 500)
|
||
},
|
||
|
||
changePay(type) {
|
||
if (type === 'useMoney') {
|
||
this.useMoney = !this.useMoney;
|
||
} else if (type === 'useIntegral') {
|
||
if (this.couponData != null && this.couponData.id != '') {
|
||
this.couponData = null;
|
||
}
|
||
this.useIntegral = !this.useIntegral;
|
||
} else if (type === 'useMoney2') {
|
||
this.useMoney2 = !this.useMoney2;
|
||
}
|
||
this.confirmSubmit([0, this.buyNum]);
|
||
},
|
||
|
||
confirmSubmit([type, num, flag]) {
|
||
this.choujiangloading = true;
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
|
||
let data = {
|
||
goods_id: this.optData.goods_id,
|
||
goods_num: this.pageData.goods.num,
|
||
num: num,
|
||
use_money: this.useMoney ? 1 : 0,
|
||
use_integral: this.useIntegral ? 1 : 0,
|
||
use_money2: this.useMoney2 ? 1 : 0,
|
||
prize_id: this.optData.prize_id,
|
||
};
|
||
|
||
let url = 'infinite_ordermoney'
|
||
console.log(type);
|
||
if (type == 1) {
|
||
url = 'infinite_orderbuy'
|
||
|
||
if (this.$refs.buyNotice.getIsShow() && !flag) {
|
||
this.$refs.buyNotice.getRule(6)
|
||
return
|
||
}
|
||
}
|
||
|
||
this.buyNum = num;
|
||
|
||
let coupon_id = (this.couponData && this.couponData.id) || ''
|
||
if (coupon_id != '' && this.useIntegral) {
|
||
this.useIntegral = false;
|
||
} else if (this.useIntegral && coupon_id != '') {
|
||
this.couponData = null;
|
||
coupon_id = '';
|
||
}
|
||
this.req({
|
||
url,
|
||
data: {
|
||
goods_id: this.pageData.goods.id,
|
||
prize_num: this.buyNum,
|
||
use_money_is: this.useMoney ? 1 : 2,
|
||
use_integral_is: this.useIntegral ? 1 : 2,
|
||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||
coupon_id: coupon_id,
|
||
|
||
// ad_id: uni.getStorageSync('_ad_id')
|
||
},
|
||
success: async res => {
|
||
if (res.status == 1) {
|
||
if (type == 0) {
|
||
if (res.data.coupon_id) {
|
||
this.couponData = {
|
||
id: res.data.coupon_id,
|
||
price: res.data.coupon_price
|
||
}
|
||
}
|
||
this.orderData = res.data
|
||
this.$nextTick(() => {
|
||
if (this.$refs.buyPop) {
|
||
this.$refs.buyPop.open()
|
||
} else {
|
||
console.error('buyPop组件未找到')
|
||
}
|
||
})
|
||
}
|
||
if (type == 1) {
|
||
this.close('buyPop')
|
||
|
||
if (res.data.status == 1) {
|
||
const status = await this.$c.wxMpPay({
|
||
data: res.data.res
|
||
})
|
||
|
||
if (status == 'success') {
|
||
this.getPrize(res.data.order_num)
|
||
this.doRefresh()
|
||
}
|
||
} else {
|
||
this.$c.toast({
|
||
title: res.msg,
|
||
duration: 500,
|
||
success: () => {
|
||
this.getPrize(res.data.order_num)
|
||
this.doRefresh()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
if (type == 1) {
|
||
this.close('buyPop')
|
||
}
|
||
},
|
||
|
||
doRefresh() {
|
||
this.getData()
|
||
|
||
if (this.tabCur == 2) {
|
||
this.tabChange(this.tabCur)
|
||
}
|
||
},
|
||
|
||
subTabChange(i) {
|
||
this.subTabCur = i
|
||
this.logList = []
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.mescroll.resetUpScroll()
|
||
}, 100)
|
||
})
|
||
},
|
||
|
||
tabChange(i) {
|
||
this.tabCur = i
|
||
|
||
switch (Number(i)) {
|
||
case 1:
|
||
this.getData()
|
||
break
|
||
case 2:
|
||
this.subTabChange(this.subTabCur)
|
||
break
|
||
}
|
||
},
|
||
|
||
getBossData({
|
||
num,
|
||
init
|
||
}) {
|
||
this.req({
|
||
url: 'ling_zhu_king',
|
||
data: {
|
||
page: num,
|
||
goods_id: this.optData.goods_id,
|
||
type: this.bossTab[this.bossTabCur].id
|
||
},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.bossCardData = res.data
|
||
console.log(this.bossCardData);
|
||
|
||
if (init) {
|
||
return
|
||
}
|
||
|
||
if (num == 1) {
|
||
this.bossList = []
|
||
}
|
||
|
||
this.bossList = this.bossList.concat(res.data.list.data)
|
||
this.$refs.bossScroll.mescroll.endByPage(
|
||
res.data.list.data.length,
|
||
res.data.list.last_page
|
||
)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getLog({
|
||
num,
|
||
size
|
||
}) {
|
||
if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
|
||
this.req({
|
||
url: 'infinite_shang_log',
|
||
data: {
|
||
page: num,
|
||
goods_id: this.optData.goods_id,
|
||
shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : ''
|
||
},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.subTab = res.data.category
|
||
|
||
if (num == 1) {
|
||
this.logList = []
|
||
}
|
||
|
||
this.logList = this.logList.concat(res.data.data)
|
||
this.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||
|
||
// console.log(this.logList)
|
||
|
||
// setTimeout(() => {
|
||
// console.log(this.logList)
|
||
// }, 1000)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getData() {
|
||
this.req({
|
||
url: 'infinite_goodsdetail',
|
||
data: {
|
||
goods_id: this.optData.goods_id
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
if (res.data.goods.lingzhu_is == 1) {
|
||
this.getBossData({
|
||
num: 1,
|
||
init: true
|
||
})
|
||
}
|
||
res.data.goodslist.forEach(item => {
|
||
this.$set(item, 'open', false)
|
||
})
|
||
this.pageData = res.data
|
||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||
this.useMoney = goodType.pay_balance == 1 ? true : false;
|
||
this.useIntegral = goodType.pay_currency == 1 ? true : false;
|
||
this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
|
||
|
||
console.log(this.pageData);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
close(e) {
|
||
if (e === 'buyPop') {
|
||
if (this.$refs.buyPop) {
|
||
this.$refs.buyPop.close()
|
||
}
|
||
} else {
|
||
this.$refs[e].close()
|
||
}
|
||
if (e == "resPop") {
|
||
if (this.prizeData['user_coupon'] != null) {
|
||
this.$refs["couponPop"].open(this.prizeData['user_coupon']);
|
||
}
|
||
}
|
||
},
|
||
|
||
open(e) {
|
||
this.$refs[e].open()
|
||
|
||
if (e == 'bossPop') {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.bossTabChange(this.bossTabCur)
|
||
}, 200)
|
||
})
|
||
}
|
||
|
||
// if (e == "resPop") {
|
||
// this.$nextTick(() => {
|
||
// setTimeout(() => {
|
||
// this.$refs["couponPop"].open()
|
||
// }, 200)
|
||
// })
|
||
// }
|
||
|
||
if (e == 'playPop') {
|
||
this.$c.getRule(14).then(res => {
|
||
if (res.status == 1) {
|
||
this.playRuleData = res.data
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
// 设置背景颜色
|
||
getBgColor(text) {
|
||
switch (text) {
|
||
case "普通":
|
||
return "#DAFF27";
|
||
break;
|
||
case "黄金":
|
||
return "#9A8EF6";
|
||
break;
|
||
case "欧皇":
|
||
return "#FFEB8E";
|
||
break;
|
||
case "超神":
|
||
return "#FF8E8E";
|
||
break;
|
||
}
|
||
},
|
||
|
||
// 设置文字颜色
|
||
getTextColor(text) {
|
||
switch (text) {
|
||
case "普通":
|
||
return "#86AD46";
|
||
break;
|
||
case "黄金":
|
||
return "#FFFFFF";
|
||
break;
|
||
case "欧皇":
|
||
return "#DA8A50";
|
||
break;
|
||
case "超神":
|
||
return "#FFEFB4";
|
||
break;
|
||
}
|
||
},
|
||
async wuxianchou() {
|
||
this.useMoney = true;
|
||
this.useIntegral = false;
|
||
this.useMoney2 = false;
|
||
if (this.choujiangloading) {
|
||
this.choujiangloading = false;
|
||
|
||
} else {
|
||
this.choujiangloading = true;
|
||
this.wuxianchou1();
|
||
}
|
||
},
|
||
async wuxianchou1() {
|
||
|
||
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
let url = 'infinite_orderbuy'
|
||
this.buyNum = 10;
|
||
const { status, data, msg } = await this.req({
|
||
url,
|
||
data: {
|
||
goods_id: this.pageData.goods.id,
|
||
prize_num: this.buyNum,
|
||
use_money_is: this.useMoney ? 1 : 2,
|
||
use_integral_is: this.useIntegral ? 1 : 2,
|
||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||
coupon_id: 0,
|
||
}
|
||
});
|
||
if (status == 0) {
|
||
this.$c.msg(msg);
|
||
return;
|
||
}
|
||
if (status == 1) {
|
||
if (data.status == 1) {
|
||
const status = await this.$c.wxMpPay({
|
||
data: data.res
|
||
})
|
||
|
||
if (status == 'success') {
|
||
this.getPrize(data.order_num)
|
||
|
||
}
|
||
} else {
|
||
this.$c.toast({
|
||
title: msg,
|
||
duration: 500,
|
||
success: () => {
|
||
this.getPrize(data.order_num)
|
||
setTimeout(() => {
|
||
if (this.choujiangloading) {
|
||
this.close('resPop');
|
||
this.wuxianchou1();
|
||
}
|
||
}, 2000)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.navLeft {
|
||
position: fixed;
|
||
left: 30rpx;
|
||
z-index: 100;
|
||
height: 44px;
|
||
|
||
>view {
|
||
font-weight: 600;
|
||
font-size: 50rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.lingzhu {
|
||
width: 686rpx;
|
||
height: 158rpx;
|
||
margin: 28rpx auto;
|
||
// border: 1rpx solid #9E907D;
|
||
background: #F8F8F8;
|
||
|
||
&-img {
|
||
width: 122rpx;
|
||
height: 106rpx;
|
||
|
||
>image:nth-child(1) {
|
||
width: 75rpx;
|
||
height: 76rpx;
|
||
position: absolute;
|
||
bottom: 4rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
>image:nth-child(2) {
|
||
width: 122rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
top: 5rpx;
|
||
left: 0;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
>view:nth-child(1) {
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
margin-top: 6rpx;
|
||
font-weight: normal;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
>text {
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-lingzhu {
|
||
height: 46rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 0 300rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
.boss-card {
|
||
margin: 0 auto -20rpx;
|
||
width: 690rpx;
|
||
height: 260rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 50rpx 50rpx 0 40rpx;
|
||
|
||
.boss-l {
|
||
flex: 1;
|
||
padding-top: 10rpx;
|
||
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info {
|
||
width: 250rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.btn-text {
|
||
margin-top: 6rpx;
|
||
white-space: nowrap;
|
||
|
||
font-size: 36rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #d0d1ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-list {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 20rpx;
|
||
|
||
.btn {
|
||
width: 110rpx;
|
||
height: 40rpx;
|
||
margin-left: 30rpx;
|
||
|
||
&.large {
|
||
width: 150rpx;
|
||
}
|
||
}
|
||
|
||
.btn {}
|
||
|
||
.large {}
|
||
}
|
||
}
|
||
|
||
.boss-r {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
padding-left: 50rpx;
|
||
|
||
.pic {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
|
||
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
|
||
}
|
||
|
||
.ling {
|
||
width: 142rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
height: 722rpx;
|
||
margin-top: 130rpx;
|
||
background-color: #D8D8D8;
|
||
|
||
&-wuzhe {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
top: 300rpx;
|
||
left: 0;
|
||
}
|
||
|
||
&-goodsTitel {
|
||
position: absolute;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 24rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
&-shoucang {
|
||
width: 65rpx;
|
||
height: 95rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 56rpx;
|
||
box-sizing: border-box;
|
||
// background: url($imgurl+'/common/shoucang.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
>image {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
// margin-top: 22rpx;
|
||
}
|
||
|
||
>text {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 4rpx;
|
||
// line-height: 66rpx;
|
||
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
|
||
}
|
||
}
|
||
|
||
&-suoxiang {
|
||
position: absolute;
|
||
width: 584rpx;
|
||
height: 120rpx;
|
||
background: rgba(0, 0, 0, 0.73);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 390rpx;
|
||
z-index: 2;
|
||
|
||
>image:nth-of-type(1) {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
>image:nth-of-type(2) {
|
||
width: 144rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
>view:nth-of-type(1) {
|
||
width: 140rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
>view:nth-of-type(2) {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
&-title {
|
||
position: absolute;
|
||
padding: 0 20rpx;
|
||
width: 280rpx;
|
||
height: 44rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 78rpx;
|
||
z-index: 10;
|
||
|
||
>text:nth-child(2n+1) {
|
||
font-weight: 400;
|
||
font-size: 18rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-weight: 700;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
&-canyu {
|
||
position: absolute;
|
||
left: 304rpx;
|
||
bottom: 142rpx;
|
||
z-index: 10;
|
||
|
||
&-imgs {
|
||
>image {
|
||
margin-left: -12rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
|
||
&-num {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
margin-left: 8rpx;
|
||
color: #FFFFFF;
|
||
// text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||
}
|
||
}
|
||
|
||
&-footer {
|
||
width: 750rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
&-one {
|
||
width: 186rpx;
|
||
height: 106rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-two {
|
||
width: 224rpx;
|
||
height: 119rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
left: 160rpx;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-three {
|
||
width: 224rpx;
|
||
height: 119rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
right: 160rpx;
|
||
bottom: 0;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-four {
|
||
width: 186rpx;
|
||
height: 106rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-btns {
|
||
width: 690rpx;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 60rpx;
|
||
z-index: 1;
|
||
|
||
.user-num {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
|
||
.user-list {
|
||
display: flex;
|
||
padding-left: 26rpx;
|
||
padding-right: 10rpx;
|
||
|
||
.avatar {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
background: #7f7f7f;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-left: -26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 40rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
&.pd {
|
||
padding-left: 60rpx;
|
||
}
|
||
|
||
&.dis {
|
||
filter: grayscale(1);
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
.icon {}
|
||
}
|
||
}
|
||
}
|
||
|
||
.angry {
|
||
margin: 30rpx auto 0;
|
||
width: 690rpx;
|
||
height: 136rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #3B3941;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
|
||
.icon {
|
||
width: 100rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
.ang-info {
|
||
width: 490rpx;
|
||
|
||
.ang-num {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.progress {
|
||
margin-top: 10rpx;
|
||
|
||
/deep/.cmd-progress-inner {
|
||
border-radius: 0;
|
||
background: #444444;
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
|
||
|
||
.list-item {
|
||
box-sizing: border-box;
|
||
|
||
.list-title {
|
||
height: 52rpx;
|
||
|
||
>view:nth-child(1) {
|
||
>image {
|
||
width: 160rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
margin-top: 25rpx;
|
||
margin-bottom: 5rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 31.5%);
|
||
gap: 30rpx 20rpx;
|
||
|
||
.goods-item {
|
||
display: inline-flex;
|
||
width: 220rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 16rpx;
|
||
// height: 255rpx;
|
||
|
||
.pic {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
background-color: #D8D8D8;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
.yu-tag {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 10rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #894DD3;
|
||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
text-align: left;
|
||
width: 200rpx;
|
||
margin: 20rpx auto 0;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.price {
|
||
width: 200rpx;
|
||
margin: 12rpx auto 24rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-tab {
|
||
white-space: nowrap;
|
||
padding: 10rpx 0 10rpx;
|
||
|
||
.sub-tab-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 88rpx;
|
||
height: 44rpx;
|
||
margin-left: 30rpx;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
background: #F5F5F5;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid rgba(#FFFFFF, 0.7);
|
||
|
||
&.act {
|
||
background: #E6F791;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.log-list {
|
||
padding: 1rpx 30rpx 30rpx;
|
||
|
||
.log-item {
|
||
height: 144rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F8F8F8;
|
||
margin-top: 24rpx;
|
||
|
||
.avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.info {
|
||
width: 230rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.time {
|
||
margin-top: 10rpx;
|
||
white-space: nowrap;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.prize {
|
||
flex: 1;
|
||
padding-left: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pic {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
>view:nth-child(1) {
|
||
padding: 0 20rpx;
|
||
min-width: 68rpx;
|
||
height: 32rpx;
|
||
box-sizing: border-box;
|
||
line-height: 40rpx;
|
||
border-radius: 18rpx;
|
||
font-size: 14rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.title {
|
||
width: 120rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
text-align: right;
|
||
}
|
||
|
||
.num {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* **************************************** */
|
||
/* **************************************** */
|
||
/* **************************************** */
|
||
|
||
.fixed-btns {
|
||
position: fixed;
|
||
z-index: 10;
|
||
right: 20rpx;
|
||
bottom: 300rpx;
|
||
|
||
.btn {
|
||
width: 94rpx;
|
||
height: 110rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
.res-pop {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
.res-pop-hd {
|
||
width: 380rpx;
|
||
height: 104rpx;
|
||
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
.res-pop-bd {
|
||
width: 636rpx;
|
||
height: 760rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
margin: 36rpx auto;
|
||
|
||
.res-list {
|
||
padding: 20rpx 10rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 210rpx);
|
||
gap: 24rpx 10rpx;
|
||
|
||
.res-item {
|
||
width: 180rpx;
|
||
height: 240rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 16rpx;
|
||
|
||
.pic {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
position: relative;
|
||
background: #D8D8D8;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
>image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
z-index: 2;
|
||
width: 68rpx;
|
||
height: 32rpx;
|
||
border-radius: 18rpx;
|
||
// background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
|
||
font-weight: 400;
|
||
font-size: 14rpx;
|
||
// color: #F8F8F8;
|
||
}
|
||
|
||
.num {
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 10rpx;
|
||
min-width: 42rpx;
|
||
height: 28rpx;
|
||
font-weight: 400;
|
||
font-size: 14rpx;
|
||
color: #ffffff;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
border-radius: 18rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
width: 180rpx;
|
||
padding: 22rpx 0;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.exchange {
|
||
padding: 10rpx 10rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.res-pop-ft {
|
||
padding-top: 40rpx;
|
||
|
||
.btn-list {
|
||
width: 750rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
.ft-btn {
|
||
width: 200rpx;
|
||
height: 68rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
>view:nth-child(1) {
|
||
color: #333333;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.r-draw {
|
||
margin: 50rpx auto 0;
|
||
width: 244rpx;
|
||
height: 116rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #0E7792;
|
||
|
||
>text {
|
||
margin-top: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.boss-pop {
|
||
width: 750rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 46rpx 40rpx;
|
||
position: relative;
|
||
background: #F7F7F7;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -62rpx;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 62rpx;
|
||
// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
.boss-pop-title {
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.boss-pop-guize {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
right: 24rpx;
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
|
||
>image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
top: 50rpx;
|
||
right: 36rpx;
|
||
}
|
||
|
||
.boss-avatar {
|
||
margin: 20rpx auto 0;
|
||
width: 686rpx;
|
||
height: 264rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
>image:nth-child(1) {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 112rpx;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
>image:nth-child(2) {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 181rpx;
|
||
height: 173rpx;
|
||
bottom: 80rpx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.boss-name {
|
||
margin: 30rpx auto 0;
|
||
width: 200rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
position: absolute;
|
||
bottom: 32rpx;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.boss-box {
|
||
margin: 70rpx auto 0;
|
||
width: 590rpx;
|
||
position: relative;
|
||
background: #3B3941;
|
||
border-radius: 22rpx;
|
||
padding: 30rpx;
|
||
|
||
.box-title {
|
||
color: #999999;
|
||
|
||
>text:nth-child(1) {
|
||
color: #999999;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.get-money {
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
&-one {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
// &-two {
|
||
// width: 34rpx;
|
||
// height: 34rpx;
|
||
// margin: 0 10rpx;
|
||
// }
|
||
|
||
&-three {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.common_bg {}
|
||
|
||
.boss-tab {
|
||
padding: 30rpx 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.boss-tab-item {
|
||
width: 33%;
|
||
height: 60rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #8A8A8A;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
text-align: center;
|
||
background-color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
|
||
&.act {
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
background-color: #E6F791;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-wrap {
|
||
// height: 350rpx;
|
||
|
||
.boss-list {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
|
||
.people-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 30%;
|
||
|
||
.avatar {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
background: #9d9d9d;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
width: calc(100% - 70rpx);
|
||
box-sizing: border-box;
|
||
padding-left: 10rpx;
|
||
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.hang1 {}
|
||
}
|
||
|
||
.boss-log {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx;
|
||
|
||
.avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: #9d9d9d;
|
||
// border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
width: 100rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 20rpx;
|
||
// font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.place {
|
||
margin-left: 30rpx;
|
||
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
text {
|
||
padding-left: 4rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.boss-money {
|
||
width: 100%;
|
||
padding: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
width: 200rpx;
|
||
margin-left: 20rpx;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.money {
|
||
flex: 1;
|
||
text-align: right;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
text {
|
||
padding-left: 10rpx;
|
||
color: #d0d1ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.play-pop {
|
||
width: 680rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 46rpx 40rpx;
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
// border: 1px solid #7776AD;
|
||
|
||
.play-pop-hd {
|
||
position: relative;
|
||
top: -50rpx;
|
||
margin: 0 auto;
|
||
width: 460rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.close {
|
||
padding: 30rpx 0;
|
||
|
||
.close-title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.p-swiper {
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
|
||
.p-item {
|
||
.play-pic {
|
||
margin: 0 auto 0;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
position: relative;
|
||
|
||
.play-type {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 20rpx;
|
||
z-index: 1;
|
||
width: 120rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: translateX(-50%);
|
||
|
||
text {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-stroke: 1rpx #F42FEA;
|
||
-webkit-text-stroke: 1rpx #F42FEA;
|
||
}
|
||
}
|
||
}
|
||
|
||
.play-ling {
|
||
width: 180rpx;
|
||
height: 60rpx;
|
||
margin: 10rpx auto 0;
|
||
}
|
||
|
||
.play-name {
|
||
width: 310rpx;
|
||
margin: 16rpx auto 0;
|
||
text-align: center;
|
||
|
||
font-size: 20rpx;
|
||
// font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.line {
|
||
margin: 0 auto 0;
|
||
width: 560rpx;
|
||
height: 1px;
|
||
background: #444444;
|
||
}
|
||
|
||
.rule-title {
|
||
width: 118rpx;
|
||
margin-left: 10rpx;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.rule-text {
|
||
width: 560rpx;
|
||
height: 200rpx;
|
||
margin: 20rpx auto 0;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #8A8A8A;
|
||
}
|
||
}
|
||
|
||
.d-pop {
|
||
position: relative;
|
||
width: 564rpx;
|
||
box-sizing: border-box;
|
||
|
||
.pic {
|
||
width: 564rpx;
|
||
height: 564rpx;
|
||
border-radius: 16rpx;
|
||
|
||
>image {
|
||
width: 564rpx;
|
||
height: 564rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
>view {
|
||
width: 68rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 24rpx;
|
||
font-weight: 400;
|
||
font-size: 14rpx;
|
||
color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
background: url($imgurl+'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin: 40rpx auto 0;
|
||
width: 564rpx;
|
||
height: 82rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
// border: 2rpx solid #894DD3;
|
||
border-radius: 12rpx;
|
||
background: #F5F5F5;
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.d-list {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0 0;
|
||
|
||
.d-item {
|
||
margin-top: 14rpx;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translate(-50%, 160%);
|
||
}
|
||
}
|
||
|
||
|
||
.ani-pop {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 88;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #000;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 1624rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.gradient-text {
|
||
background-image: linear-gradient(to right, #FF5722, #FFEB3B);
|
||
/* 从橙色到黄色的渐变 */
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: #FF5722;
|
||
}
|
||
|
||
.yu-tag-text {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 10rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
|
||
}
|
||
|
||
|
||
.item-info {
|
||
padding: 5rpx 0;
|
||
}
|
||
|
||
.item-title {
|
||
padding: 0 2%;
|
||
margin: 10rpx 0rpx 0rpx 0rpx;
|
||
width: 100%;
|
||
font-size: 21rpx;
|
||
text-align: left;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.item-probability {
|
||
padding: 0 2%;
|
||
margin: 1rpx 0;
|
||
width: 100%;
|
||
font-size: 21rpx;
|
||
text-align: left;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
color: #f39205;
|
||
}
|
||
|
||
.item-price {
|
||
padding: 0 2%;
|
||
margin: 1rpx 0;
|
||
width: 100%;
|
||
font-size: 21rpx;
|
||
text-align: left;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
color: #333333;
|
||
}
|
||
</style> |