1361 lines
30 KiB
Vue
1361 lines
30 KiB
Vue
<!-- 盲盒详情 -->
|
||
<template>
|
||
<view class="box-blind-page">
|
||
<view class="nav">
|
||
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
|
||
<view class="nav-title">{{detailData.name}}</view>
|
||
<view class="nav-back"></view>
|
||
</view>
|
||
<view class="box-main">
|
||
<image src="@/static/index/mf.png" mode="" class="cube-img"></image>
|
||
<view class="box-top">
|
||
<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
|
||
</view>
|
||
<view class="box-right">
|
||
<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
|
||
</view>
|
||
<view class="box-bottom">
|
||
<image src="@/static/index/mf.png" mode="" class="box-shop-img"></image>
|
||
</view>
|
||
<view class="box-btn" :style="{'bottom':detailData.price.length === 1 ? '110rpx' : '80rpx'}">
|
||
<view v-if="detailData.price.length === 1" class="btn">
|
||
<view class="btn-main" v-for="(item,index) in detailData.price" @click="sellBox(item)" :key="index">
|
||
<view
|
||
:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
|
||
{{priceTypeObj[item.type]}}</view>
|
||
<view
|
||
:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
|
||
<text class="txt">
|
||
¥{{item.sale}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="detailData.price.length === 2" class="btn-two">
|
||
<view v-for="(item,index) in detailData.price" :key="index" @click="sellBox(item)"
|
||
class="btn-two-main">
|
||
<view
|
||
:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
|
||
{{priceTypeObj[item.type]}}</view>
|
||
<view
|
||
:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
|
||
<text class="txt">
|
||
¥{{item.sale}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="detailData.price.length === 3" class="btn-three">
|
||
<view v-for="(item,index) in detailData.price" :key="index" @click="sellBox(item)"
|
||
class="btn-three-main">
|
||
<view
|
||
:class="{'blue-tip':item.type === 'TRIPLE','red-tip':item.type === 'SINGLE','orange-tip':item.type === 'PENTA'}">
|
||
{{priceTypeObj[item.type]}}</view>
|
||
<view
|
||
:class="{'blue':item.type === 'TRIPLE','red':item.type === 'SINGLE','orange':item.type === 'PENTA'}">
|
||
<text class="txt">
|
||
¥{{item.sale}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- <view class="cue-card">提示卡</view> -->
|
||
<view class="main">
|
||
<!-- 提示卡 -->
|
||
<view class="cue-card" @click="cueCard"></view>
|
||
<view class="probability">
|
||
<view class="probability-title">产出概率</view>
|
||
<view class="probability-list">
|
||
<view class="probability-list-item">
|
||
<image src="@/static/index/pt.png" mode="" class="list-item-img"></image>
|
||
<view class="list-item-num">
|
||
{{detailData.probability && detailData.probability['NORMAL']*100 || 0}}％
|
||
</view>
|
||
</view>
|
||
<view class="probability-list-item">
|
||
<image src="@/static/index/yc.png" mode="" class="list-item-img"></image>
|
||
<view class="list-item-num">
|
||
{{detailData.probability && detailData.probability['HIDDEN']*100 || 0}}％
|
||
</view>
|
||
</view>
|
||
<view class="probability-list-item">
|
||
<image src="@/static/index/xy.png" mode="" class="list-item-img"></image>
|
||
<view class="list-item-num">
|
||
{{detailData.probability && detailData.probability['RARE']*100 || 0}}％
|
||
</view>
|
||
</view>
|
||
<view class="probability-list-item">
|
||
<image src="@/static/index/zz.png" mode="" class="list-item-img"></image>
|
||
<view class="list-item-num">
|
||
{{detailData.probability && detailData.probability['SUPREME']*100 || 0}}％
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="open-box-list-main">
|
||
<view class="open-box-list" v-for="(item,index) in detailData.items" :key="index" @click="goDetail(item)">
|
||
<view class="box-item">
|
||
<image :src="item.coverResource.url" mode="" class="shop-img"></image>
|
||
<view class="grade">
|
||
<image :src="gradeData[item.grade]" mode="" class="box-item-img"></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="box-detail">
|
||
<view class="box-detail-name">{{item.name}}</view>
|
||
<view class="info">
|
||
<view class="point">
|
||
<image src="@/static/mine/jf.png" class="point-img"></image>
|
||
{{item.ponit}}
|
||
</view>
|
||
<view class="box-detail-money">
|
||
<text class="box-detail-symbol">¥ </text>
|
||
{{item.sellPrice}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/index/detail"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import {
|
||
boxesDetail,
|
||
boxOrderApi
|
||
} from '@/API/index.js'
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
statusBarHeight,
|
||
id: "", //盲盒id
|
||
detailData: {
|
||
items: [],
|
||
price: []
|
||
},
|
||
priceTypeObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "三连抽",
|
||
PENTA: "五连抽"
|
||
},
|
||
gradeData: {
|
||
NORMAL: '../../static/index/pt.png',
|
||
HIDDEN: '../../static/index/yc.png',
|
||
RARE: '../../static/index/xy.png',
|
||
SUPREME: '../../static/index/zz.png',
|
||
},
|
||
}
|
||
},
|
||
onLoad(opation) {
|
||
this.id = opation.id
|
||
this.getDetail()
|
||
},
|
||
onPageScroll(res) {},
|
||
methods: {
|
||
// 购买盲盒
|
||
sellBox(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/confirmOrder?boxId=${this.detailData.id}&type=${item.type}`
|
||
})
|
||
},
|
||
// 查看详情
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/product/detail?id=${item.productId}`
|
||
})
|
||
},
|
||
// 获取盲盒详情
|
||
getDetail() {
|
||
boxesDetail({
|
||
id: this.id
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
cueCard(){
|
||
uni.navigateTo({
|
||
url:`/pages/index/card`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.box-blind-page {
|
||
.nav {
|
||
width: 100%;
|
||
height: 172rpx;
|
||
background-image: url('@/static/index/nav.png');
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 23rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
|
||
.nav-back {
|
||
width: 19rpx;
|
||
height: 34rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.box-main {
|
||
margin-top: 172rpx;
|
||
width: 100%;
|
||
height: 749rpx;
|
||
background-image: url('@/static/index/main.png');
|
||
background-size: 100%;
|
||
position: relative;
|
||
|
||
.cube-img {
|
||
position: absolute;
|
||
width: 289rpx;
|
||
height: 261rpx;
|
||
top: 60rpx;
|
||
left: 236rpx;
|
||
}
|
||
|
||
.box-top {
|
||
position: absolute;
|
||
top: 61rpx;
|
||
left: 36rpx;
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
background-image: url('@/static/index/qp.png');
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.box-right {
|
||
position: absolute;
|
||
top: 172rpx;
|
||
right: 0rpx;
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
background-image: url('@/static/index/qp.png');
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.box-bottom {
|
||
position: absolute;
|
||
top: 333rpx;
|
||
left: 58rpx;
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
background-image: url('@/static/index/qp.png');
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn-main {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.blue-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #27B3E8;
|
||
background-image: url('@/static/btn/tip-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.red-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #F83E3E;
|
||
background-image: url('@/static/btn/one-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.orange-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #FF8547;
|
||
background-image: url('@/static/btn/cheng-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.red {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-red.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orange {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-cheng.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.blue {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn-two {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn-two-main {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.blue-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 20rpx;
|
||
color: #27B3E8;
|
||
background-image: url('@/static/btn/tip-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.red-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 20rpx;
|
||
color: #F83E3E;
|
||
background-image: url('@/static/btn/one-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.orange-tip {
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
font-size: 20rpx;
|
||
color: #FF8547;
|
||
background-image: url('@/static/btn/cheng-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.red {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-red.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 14rpx;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orange {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-cheng.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 14rpx;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.blue {
|
||
width: 284rpx;
|
||
height: 184rpx;
|
||
background-image: url('@/static/btn/three-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 14rpx;
|
||
padding-top: 40rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn-three {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn-three-main {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.blue-tip {
|
||
width: 108rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
color: #27B3E8;
|
||
background-image: url('@/static/btn/tip-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.red-tip {
|
||
width: 108rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
color: #F83E3E;
|
||
background-image: url('@/static/btn/one-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.orange-tip {
|
||
width: 108rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
color: #FF8547;
|
||
background-image: url('@/static/btn/cheng-tip.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.red {
|
||
width: 235rpx;
|
||
height: 152rpx;
|
||
background-image: url('@/static/btn/three-red.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 26rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orange {
|
||
width: 226rpx;
|
||
height: 146rpx;
|
||
background-image: url('@/static/btn/three-cheng.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 26rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.blue {
|
||
width: 231rpx;
|
||
height: 149rpx;
|
||
background-image: url('@/static/btn/three-blue.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 26rpx;
|
||
margin-top: -16rpx;
|
||
|
||
.txt {
|
||
font-family: Impacts;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #FE965E;
|
||
background: linear-gradient(0deg, #FFAFAF 0%, #FFFFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.box-shop-img {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.box-btn {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 80rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn {
|
||
width: 254rpx;
|
||
height: 154rpx;
|
||
background-image: url('@/static/index/btn.png');
|
||
background-size: 100%;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
position: relative;
|
||
|
||
.btn-txt {
|
||
position: absolute;
|
||
bottom: 80rpx;
|
||
left: 75rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cue-card{
|
||
// margin: 0 auto;
|
||
// margin-top: -110rpx;
|
||
// background-image: url('../../static/index/tsk.png');
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100%;
|
||
// width: 203rpx;
|
||
// height: 59rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// font-weight: bold;
|
||
// font-size: 28rpx;
|
||
// color: #FFFFFF;
|
||
}
|
||
.main {
|
||
width: 100%;
|
||
// background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon/detail-bg.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-top: -130rpx;
|
||
// margin-top: -50rpx;
|
||
position: relative;
|
||
.cue-card{
|
||
position: absolute;
|
||
top: -40rpx;
|
||
right: 0;
|
||
width: 185rpx;
|
||
height: 85rpx;
|
||
background-image: url('@/static/prize/use.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: fixed;
|
||
padding: 52rpx 32rpx 0 32rpx;
|
||
z-index: 999;
|
||
// background-color: red;
|
||
|
||
.go-back {
|
||
width: 24rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 48rpx;
|
||
color: #000000;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
.headerBack {
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.box {
|
||
box-sizing: content-box;
|
||
margin-top: 54rpx;
|
||
width: 100%;
|
||
height: 500rpx;
|
||
|
||
.swiper {
|
||
height: 500rpx;
|
||
margin: 0 10rpx;
|
||
|
||
.swiper-item {
|
||
width: 500rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/deep/ .uni-swiper-slides {
|
||
inset: 0px 140rpx !important;
|
||
}
|
||
|
||
/deep/ .uni-swiper-slides {
|
||
inset: 0px 140rpx !important;
|
||
top: 0 !important;
|
||
right: 120rpx !important;
|
||
bottom: 0 !important;
|
||
left: 120rpx !important;
|
||
}
|
||
|
||
|
||
.le-img {
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
// width: 312rpx;
|
||
// height: 472rpx;
|
||
display: block;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
background-position: 50%;
|
||
transform: scale(0.8);
|
||
transition: transform 0.3s ease-in-out 0s;
|
||
// border-radius: 4px;
|
||
|
||
&.le-active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.swiper-name {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
transform: translate(0, -25px) scale(0.8);
|
||
transform: translate(0, -25rpx) scale(0.8);
|
||
transition: transform 0.3s ease-in-out 0s;
|
||
|
||
&.name-active {
|
||
transform: translate(0, -10px) scale(1);
|
||
transform: translate(0, -10rpx) scale(1);
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-price {
|
||
text-align: center;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
margin-top: 20rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
}
|
||
|
||
.box-title {
|
||
margin: 12rpx auto 0 auto;
|
||
width: 476rpx;
|
||
height: 92rpx;
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
font-weight: 800;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.hot-content {
|
||
width: 750rpx;
|
||
height: 152rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.hot-main {
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 750rpx;
|
||
height: 152rpx;
|
||
background: rgba(255, 255, 255, 0.3900);
|
||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2000);
|
||
|
||
.hot {
|
||
padding: 12rpx 10rpx 12rpx 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
height: 152rpx;
|
||
background: #70E3DC;
|
||
border-radius: 0px 20rpx 20rpx 0px;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: 400;
|
||
|
||
.hot-arrows {
|
||
width: 20rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
min-width: calc(100% - 60rpx);
|
||
padding-top: 12rpx;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
|
||
.hot-item {
|
||
display: inline-block;
|
||
width: 136rpx;
|
||
margin-left: 40rpx;
|
||
|
||
.boxbind-img {
|
||
width: 136rpx;
|
||
height: 80rpx;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
}
|
||
|
||
.boxblind-txt {
|
||
margin-top: 20rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
color: #000000;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.hot-fixed {
|
||
position: fixed;
|
||
top: 136rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.open {
|
||
width: 100%;
|
||
margin: 44rpx auto 72rpx auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.open-img {
|
||
width: 396rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
|
||
.open-num {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
font-weight: 400;
|
||
font-family: YouSheBiaoTiHei;
|
||
}
|
||
|
||
.price-view {
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx;
|
||
|
||
.price-view-item {
|
||
font-family: YouSheBiaoTiHei;
|
||
flex: 1;
|
||
margin: 0 20rpx;
|
||
padding: 4rpx;
|
||
border: 1px solid red;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.price-view-item-name {
|
||
text-align: center;
|
||
}
|
||
|
||
.price-view-item-price {}
|
||
}
|
||
}
|
||
|
||
.probability {
|
||
margin-top: 80rpx;
|
||
padding: 0 22rpx 50rpx 22rpx;
|
||
|
||
.probability-title {
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.probability-list {
|
||
margin-top: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.probability-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.list-item-img {
|
||
width: 83rpx;
|
||
height: 94rpx;
|
||
}
|
||
|
||
.list-item-num {
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #888888;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.open-box {
|
||
text-align: center;
|
||
margin-top: 26rpx;
|
||
margin-bottom: 48rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
color: #333333;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.open-box-list-main {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
display: grid;
|
||
gap: 25rpx;
|
||
grid-template-rows: 1fr;
|
||
margin: 0px auto;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
padding: 0 22rpx 44rpx 22rpx;
|
||
|
||
.open-box-list {
|
||
.box-item {
|
||
width: 190rpx;
|
||
background-position: 50%;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: relative;
|
||
border-radius: 10rpx;
|
||
|
||
.shop-img {
|
||
width: 340rpx;
|
||
height: 210rpx;
|
||
background: #E2E2E2;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.grade {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 101rpx;
|
||
height: 62rpx;
|
||
border-radius: 10rpx 0 0 0;
|
||
|
||
background-image: url('@/static/index/g-bg.png');
|
||
background-size: 100%;
|
||
|
||
.box-item-img {
|
||
position: absolute;
|
||
left: 18rpx;
|
||
top: 6rpx;
|
||
width: 28rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-detail {
|
||
|
||
// margin-left: 16rpx;
|
||
.box-detail-name {
|
||
width: 320rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
// min-height: 84rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
// display: -webkit-box;
|
||
// -webkit-box-orient: vertical;
|
||
// -webkit-line-clamp: 2;
|
||
}
|
||
|
||
.box-detail-price {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 13rpx;
|
||
.point{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
color: #F0463A;
|
||
.point-img{
|
||
width: 30rpx;
|
||
height: 31rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.box-detail-money {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
text-decoration: line-through;
|
||
margin-left: 12rpx;
|
||
|
||
.box-detail-symbol {
|
||
// font-size: 24rpx;
|
||
// font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 32rpx;
|
||
width: 686rpx;
|
||
height: 104rpx;
|
||
background: #70E3DE;
|
||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.1600);
|
||
border-radius: 52rpx;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
line-height: 104rpx;
|
||
}
|
||
|
||
.box-dlg {
|
||
width: 652rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #707070;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
|
||
.dlg-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: -100rpx;
|
||
|
||
.dlg-img {
|
||
width: 366rpx;
|
||
height: 214rpx;
|
||
}
|
||
}
|
||
|
||
.dlg-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.dlg-main {
|
||
padding: 0 20rpx;
|
||
|
||
.opc {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 38rpx;
|
||
|
||
.dlg-step {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 340rpx;
|
||
height: 110rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #CCCCCC;
|
||
|
||
.step-sub {
|
||
width: 92rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 44rpx;
|
||
color: #BFC2C8;
|
||
border-right: 2rpx solid #C2C2C2;
|
||
}
|
||
|
||
.step-num {
|
||
width: 154rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 44rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.step-add {
|
||
width: 92rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 44rpx;
|
||
color: #000000;
|
||
border-left: 2rpx solid #C2C2C2;
|
||
}
|
||
}
|
||
|
||
.dlg-buy {
|
||
width: 242rpx;
|
||
height: 110rpx;
|
||
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/buy.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 26rpx;
|
||
font-size: 40rpx;
|
||
color: #8DFEF8;
|
||
font-family: YouSheBiaoTiHei;
|
||
}
|
||
}
|
||
|
||
.dlg-type {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 60rpx;
|
||
|
||
.dlg-one {
|
||
width: 310rpx;
|
||
height: 146rpx;
|
||
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/one.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
padding-top: 24rpx;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.one-title {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 40rpx;
|
||
color: #3A4355;
|
||
}
|
||
|
||
.one-price {
|
||
font-size: 24rpx;
|
||
color: #3A4355;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
.dlg-three {
|
||
width: 310rpx;
|
||
height: 146rpx;
|
||
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/three.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
padding-top: 24rpx;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.three-title {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 40rpx;
|
||
color: #A1511E;
|
||
}
|
||
|
||
.three-price {
|
||
font-size: 24rpx;
|
||
font-weight: 800;
|
||
color: #A1511E;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.dlg-five {
|
||
margin-top: 34rpx;
|
||
width: 100%;
|
||
height: 146rpx;
|
||
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/five.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
padding-top: 24rpx;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.five-title {
|
||
color: #FEFACE;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.five-price {
|
||
font-size: 24rpx;
|
||
font-weight: 800;
|
||
color: #FEFACE;
|
||
}
|
||
|
||
}
|
||
|
||
.authorization {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 800;
|
||
padding-bottom: 30rpx;
|
||
|
||
.authorization-select {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.authorization-txt {
|
||
color: #E23C62;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dlg-close {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
bottom: -140rpx;
|
||
left: 50%;
|
||
margin-left: -40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hot-none {
|
||
animation-name: hotNone;
|
||
animation-duration: .5s;
|
||
animation-timing-function: linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes hotNone {
|
||
0% {
|
||
// width: 750rpx;
|
||
}
|
||
|
||
100% {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
.hot-show {
|
||
animation-name: hotShow;
|
||
animation-duration: .5s;
|
||
animation-timing-function: linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes hotShow {
|
||
0% {
|
||
width: 0;
|
||
}
|
||
|
||
100% {
|
||
width: 750rpx;
|
||
}
|
||
}
|
||
</style> |