964 lines
24 KiB
Vue
964 lines
24 KiB
Vue
<template>
|
||
<view class="content" :style="'background: url('+ z_imgPath + 'card_bg.png'+ ') no-repeat 0 0 / 100% auto;'">
|
||
<view class="head">
|
||
<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
|
||
<view class="header_title">
|
||
<view @click="back()">
|
||
<!-- <image :src="z_imgPath + 'back.png'"></image> -->返回
|
||
</view>
|
||
<view class="hang1">详情</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_title">
|
||
<view class="content_title_price hang1" :style="'background: url('+ z_imgPath + 'img1.png'+ ') no-repeat 0 0 / 100% auto;'">{{detailInfo.title}} <text>¥{{detailInfo.show_price}}</text></view>
|
||
<view class="content_title_tips hang1" :style="'background: url('+ z_imgPath + 'img2.png'+ ') no-repeat 0 0 / 100% auto;'">{{detailInfo.card_notice}}</view>
|
||
</view>
|
||
<view class="content_main">
|
||
<view class="content_main_zhu animated fadeInUp" v-if=" !isHebing" >
|
||
<image class="image1 imgStyle" :src="z_imgPath+'zhu1.png'" :animation="animationData1"></image>
|
||
<image class="image2" :src="z_imgPath+'zhu2.png'" :animation="animationData1"></image>
|
||
<image class="image3" :src="z_imgPath+'zhu3.png'" :animation="animationData2"></image>
|
||
<image class="image4" :src="z_imgPath+'zhu4.png'" :animation="animationData"></image>
|
||
<image class="imageUrl" :src="'https://hdyfs.languowangluo.cn'+detailInfo.imgurl_detail" :animation="animationData2" mode="aspectFill"></image>
|
||
</view>
|
||
<view v-if="isHebing" >
|
||
<image :src="z_imgPath+'hebing.png'" class="image5" :animation="animationData4"></image>
|
||
</view>
|
||
<image class="content_main_zuo" :src="z_imgPath+'zuo1.png'"></image>
|
||
</view>
|
||
<view class="content_lt">
|
||
<image :src="z_imgPath+'img3.png'" @click="gotoPage('tujian?id='+detailInfo.id)"></image>
|
||
<image :src="z_imgPath+'img4.png'" @click="$refs.shuoming.open()"></image>
|
||
<image :src="z_imgPath+'img5.png'" @click="gotoPage('/pages/user/myCaDetail?caId='+detailInfo.id)"></image>
|
||
<image :src="z_imgPath+'img6.png'" @click="getjilv"></image>
|
||
<image :src="z_imgPath+'img7.png'" @click="tokefu"></image>
|
||
</view>
|
||
<view class="content_bom">
|
||
<!-- @click="order_money('left_count')" -->
|
||
<image :src="z_imgPath+'bom1.png'" class="bom1" @click="order_money('left_count')"></image>
|
||
<image :src="z_imgPath+'bom2.png'" class="bom2" @click="order_money('center_count')"></image>
|
||
<image :src="z_imgPath+'bom3.png'" class="bom3" @click="order_money('right_count')"></image>
|
||
<view class="shang1 shangStyle">必出{{detailInfo.card_set.center_shang_name}}</view>
|
||
<view class="shang2 shangStyle">必出{{detailInfo.card_set.right_shang_name}}</view>
|
||
</view>
|
||
<!-- 确认订单 -->
|
||
<uni-popup ref="dingdan" type="bottom">
|
||
<view class="ckjl animated fadeInUp">
|
||
<view class="ckjl_title">
|
||
<image :src="z_imgPath + 'order_p.png'"></image>
|
||
<view class="ca" @click="$refs.dingdan.close()">×</view>
|
||
</view>
|
||
<view class="ckjl_title_con1" :style="'background: url('+ z_imgPath + 'title_con1_bg.png'+ ') no-repeat 0 0 / 100% 100%;height:320rpx'">
|
||
<view class="order_pic" v-if="pay_news.goods">
|
||
<view style="width: 100%;">
|
||
<view style="font-size: 35rpx;">{{detailInfo.title}}</view>
|
||
<view style="margin-top: 40rpx;">类型：1包</view>
|
||
<view style="margin-top: 10rpx;width: 100%;">
|
||
<text>单价：<text style="color: #FEFF00;">{{detailInfo.price}}元</text></text>
|
||
<text>×{{pay_news.goods.first_num}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_num">
|
||
<view style="font-size: 28rpx;" v-if="pay_news.goods">数量:{{pay_news.goods.prize_num}}张</view>
|
||
<view>
|
||
小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_title_con1" v-if="goods.box_type!=1" :style="'background: url('+ z_imgPath + 'title_con2_bg.png'+ ') no-repeat 0 0 / 100% 100%;height:240rpx'">
|
||
<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
|
||
<!-- 一番赏 -->
|
||
<template>
|
||
<view class="fangshi" @click="change_yuan_index(1)" style="padding-bottom: 15rpx;">
|
||
<view class="flex_center">
|
||
<image :src="z_imgPath+'bi.png'" style="width: 30rpx;height:30rpx;"></image>
|
||
<view>
|
||
使用星钻抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
|
||
</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'yuan'+ (bi?'_sel':'') +'.png'"></image>
|
||
</view>
|
||
<view class="fangshi" @click="change_yuan_index(2)" style="border-top: 1px solid rgba(255, 255, 255, .2);padding-top: 15rpx;">
|
||
<view class="flex_center">
|
||
<image :src="z_imgPath + 'yue.png'" style="width: 33rpx;height: 28rpx;"></image>
|
||
<view>
|
||
使用星钻抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
|
||
</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'yuan'+ (yue?'_sel':'') +'.png'"></image>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
<view style="font-size: 24rpx;margin:20rpx 10rpx;">
|
||
下单购买即表示同意
|
||
<text style="color: #FEFF00;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
|
||
</view>
|
||
<view class="order_title_btn">
|
||
<view>
|
||
总计:￥<text
|
||
style="font-size: 40rpx;color:#FEFF00;">{{pay_news.order_total}}</text>
|
||
</view>
|
||
<view class="zhifu" @click="pay()" :style="'background: url('+ z_imgPath + 'zhifu.png'+ ') no-repeat 0 0 / 100% 100%;'"></view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 奖品弹窗 -->
|
||
<uni-popup ref="jp_show" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view class="pop_jp">
|
||
<image class="pop_gongxi" :src="z_imgPath + 'jp_img.png'"></image>
|
||
<view class="jp_title animated zoomIn">
|
||
<view class="jp_title_1">
|
||
<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'>
|
||
<view class="list_img">
|
||
<image :src="'https://hdyfs.languowangluo.cn'+v.goodslist_imgurl"></image>
|
||
<view>{{v.goodslist_title}}</view>
|
||
</view>
|
||
<!-- <view class="hang1">{{v.goodslist_title}}</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="dhbtmbox" :src="z_imgPath + 'dong_bottom.png'" style="margin-top: 35rpx;"></image>
|
||
<view class="jp_btn">
|
||
<image @click="tosangdai()" class="animated fadeInLeft" :src="z_imgPath + 'qsd.png'"></image>
|
||
<image @click="$refs.jp_show.close()" class="animated fadeInRight" :src="z_imgPath + 'jixu.png'"></image>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 抽卡记录 -->
|
||
<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
|
||
<view class="ckjl animated fadeInUp">
|
||
<view class="ckjl_title">
|
||
<image :src="z_imgPath + 'ckjl.png'"></image>
|
||
<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
|
||
</view>
|
||
<view class="jilv_title">
|
||
<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)" :class="shang_id==item.id?'selActive':''">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height:900rpx;">
|
||
<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
|
||
<view>
|
||
<view class="flex_center ">
|
||
<image :src="item.user_info.headimg"></image>
|
||
<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 24rpx;">{{item.addtime}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="flex_center">
|
||
<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
|
||
<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
|
||
</view>
|
||
<view style="font-size: 26rpx;">X{{item.prize_num}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 购买说明 -->
|
||
<uni-popup ref="shuoming" type="center">
|
||
<view class="popGm" :style="'background: url('+ z_imgPath + 'gmsm_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
||
<view class="pop_con">
|
||
<scroll-view scroll-y="true" style="max-height: 630rpx;">
|
||
<view v-html="news"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
z_imgPath: this.$z_img1 + 'chouka/',
|
||
shang_cate:[],
|
||
shang_id:0,
|
||
bi: true, // 1:是否币支付,
|
||
yue: true, // 2:星钻支付
|
||
pay_news: {}, // 订单信息
|
||
goods: {},
|
||
animationData: {},
|
||
animationData1: {},
|
||
animationData2: {},
|
||
animationData4: {},
|
||
isHebing:false,
|
||
detailId:'',
|
||
detailInfo:{},
|
||
page_num:1,
|
||
mixTotal: 0, // 统计信息总页数
|
||
type:'',
|
||
// 支付失效
|
||
pay_status: false,
|
||
jp_arr:[],
|
||
jl_Arr:[],
|
||
news:''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.detailId=e.goods_id
|
||
},
|
||
onShow() {
|
||
this.getDeatil()
|
||
},
|
||
onShareAppMessage(e) {
|
||
let that = this;
|
||
return {
|
||
title: "枫岚云赏" + that.detailInfo.title + '卡册',
|
||
imageUrl: 'https://hdyfs.languowangluo.cn'+that.detailInfo.imgurl_detail,
|
||
path: "/pages/DrawCard/cardDetail?goods_id=" + that.detailId + '&pid=' + uni.getStorageSync(
|
||
'userinfo').ID
|
||
};
|
||
},
|
||
methods: {
|
||
tosangdai() {
|
||
uni.setStorageSync('page', this.$mp.page.route)
|
||
uni.switchTab({
|
||
url: '../sangdai/sangdai'
|
||
})
|
||
},
|
||
getDeatil(){
|
||
let that = this;
|
||
that.req({
|
||
url: 'card_goods_detail',
|
||
data:{
|
||
goods_id:that.detailId
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.detailInfo=res.data
|
||
}
|
||
}
|
||
})
|
||
that.req({
|
||
url: 'card_level',
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.shang_cate=res.data
|
||
if(res.data.length>0){
|
||
that.shang_id=res.data[0].id
|
||
}
|
||
}
|
||
}
|
||
})
|
||
that.req({
|
||
url: 'card_rule',
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.news=res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
tokefu() {
|
||
// #ifdef MP-WEIXIN
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: uni.getStorageSync('wx_link') //客服地址链接
|
||
},
|
||
corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
|
||
success(res) {
|
||
console.log(res, 1)
|
||
},
|
||
fail(res) {
|
||
console.log(res, 2)
|
||
},
|
||
})
|
||
// #endif
|
||
},
|
||
order_money(type) {
|
||
let that = this;
|
||
that.type=type;
|
||
that.req({
|
||
url: 'buy_money',
|
||
data: {
|
||
card_id: that.detailId,
|
||
type: that.type,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.pay_news = res.data
|
||
that.$refs.dingdan.open()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
pay() {
|
||
let that = this;
|
||
let info = {
|
||
card_id: that.detailId,
|
||
type: that.type,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2
|
||
}
|
||
if (that.pay_status) {
|
||
return
|
||
}
|
||
if (info) {
|
||
that.pay_status = true
|
||
that.req({
|
||
url: 'card_goods_buy',
|
||
data: info,
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.jp_arr = []
|
||
if (res.data.status == 1) {
|
||
that.info = {}
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.res.timeStamp,
|
||
nonceStr: res.data.res.nonceStr,
|
||
package: res.data.res.package,
|
||
signType: 'MD5',
|
||
paySign: res.data.res.paySign,
|
||
complete(ress) {
|
||
if (ress.errMsg == 'requestPayment:fail cancel') {
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'loading',
|
||
duration: 1000
|
||
})
|
||
}
|
||
if (ress.errMsg == 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
that.$refs.dingdan.close()
|
||
that.req({
|
||
url: 'prize_log',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
// that.jp_news = aa.data.user_info
|
||
that.jp_arr = aa.data
|
||
that.dakai();
|
||
// that.$refs.jp_show.open()
|
||
// that.loadData(1)
|
||
}
|
||
}
|
||
})
|
||
}, 1500)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
that.info = {}
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
that.$refs.dingdan.close()
|
||
that.req({
|
||
url: 'prize_log',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
|
||
// that.jp_news = aa.data.user_info
|
||
that.jp_arr = aa.data
|
||
setTimeout(() => {
|
||
that.dakai();
|
||
},300)
|
||
console.log(that.jp_arr)
|
||
// that.loadData(1)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
if (res.status == 0) {
|
||
|
||
}
|
||
},
|
||
complete() {
|
||
that.pay_status = false
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
},
|
||
// 中赏记录
|
||
change_shang_id(e) {
|
||
this.shang_id = e
|
||
this.page_num = 1
|
||
this.jl_Arr = []
|
||
this.getjilv()
|
||
},
|
||
getjilv() {
|
||
let that = this;
|
||
console.log(that.page_num, this.mixTotal)
|
||
if (this.page_num !== 1 && this.page_num > this.mixTotal) {
|
||
return
|
||
}
|
||
that.req({
|
||
url: 'card_reward_log',
|
||
Loading: true,
|
||
data: {
|
||
page: that.page_num,
|
||
category_id:that.shang_id ,
|
||
card_id: that.detailId
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
// that.shang_cate = res.data.category;
|
||
that.mixTotal = res.data.last_page
|
||
if (that.page_num === 1) {
|
||
that.jl_Arr = res.data.data;
|
||
} else {
|
||
that.jl_Arr = that.jl_Arr.concat(res.data.data)
|
||
}
|
||
console.log(that.jl_Arr)
|
||
that.page_num += 1
|
||
that.$refs.jilv.open()
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
back() {
|
||
var pages = getCurrentPages();
|
||
if (pages.length == 1 && pages[0].route == "pages/DrawCard/cardDetail") {
|
||
uni.redirectTo({
|
||
url: '/pages/DrawCard/index'
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
},
|
||
dakai(){
|
||
//下移
|
||
var animation = uni.createAnimation({
|
||
duration: 300,
|
||
timingFunction: 'ease'
|
||
})
|
||
animation.translateY(-90).step(),
|
||
this.animationData = animation.export()
|
||
|
||
//上移
|
||
var animation1 = uni.createAnimation({
|
||
duration: 400,
|
||
timingFunction: 'ease'
|
||
})
|
||
animation1.translateY(90).step(),
|
||
this.animationData1 = animation1.export()
|
||
// 遮罩变小
|
||
var animation2 = uni.createAnimation({
|
||
duration: 400,
|
||
timingFunction: 'ease'
|
||
})
|
||
animation2.opacity(0).step(),
|
||
this.animationData2 = animation2.export()
|
||
// return;
|
||
setTimeout(() => {
|
||
//合并后转圈
|
||
var that=this;
|
||
this.isHebing=true;
|
||
var animation4 = uni.createAnimation({
|
||
duration: 1500,
|
||
timingFunction: 'ease-in'
|
||
})
|
||
setTimeout(() => {
|
||
animation4.rotate(2160).step(),
|
||
this.animationData4 = animation4.export()
|
||
|
||
},300)
|
||
//动画结束，奖品弹窗
|
||
setTimeout(() => {
|
||
that.$refs.jp_show.open()
|
||
setTimeout(() => {
|
||
this.isHebing=false;
|
||
animation.translateY(0).step()
|
||
this.animationData = animation.export()
|
||
animation1.translateY(0).step()
|
||
this.animationData1 = animation1.export()
|
||
animation2.opacity(1).step(),
|
||
this.animationData2 = animation2.export()
|
||
animation4.rotate(0).step({duration: 0})//恢复转圈
|
||
this.animationData4 = animation4.export()
|
||
},300)
|
||
},1600)
|
||
// this.yincang();
|
||
},300)
|
||
},
|
||
yincang(){
|
||
var that=this;
|
||
this.isHebing=true;
|
||
var animation4 = uni.createAnimation({
|
||
duration: 1500,
|
||
timingFunction: 'ease-in'
|
||
})
|
||
setTimeout(() => {
|
||
animation4.rotate(1800).step(),
|
||
this.animationData4 = animation4.export()
|
||
},300)
|
||
setTimeout(() => {
|
||
that.$refs.jp_show.open()
|
||
this.isHebing=false;
|
||
animation4.rotate(0).step({duration: 0})
|
||
this.animationData4 = animation4.export()
|
||
},1600)
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding-top: calc(var(--status-bar-height) + 140rpx);
|
||
color: #fff;
|
||
.head {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 20;
|
||
.header_title {
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
>view:nth-of-type(1) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
>view:nth-of-type(2) {
|
||
width: 520rpx;
|
||
text-align: center;
|
||
/* margin: auto; */
|
||
}
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
&_title{
|
||
margin: 0 39rpx 37rpx;
|
||
color: #fff;
|
||
&_price{
|
||
width: 672rpx;
|
||
height: 68rpx;
|
||
font-size: 36rpx;
|
||
line-height: 68rpx;
|
||
text-align: center;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
text{
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
&_tips{
|
||
width: 601rpx;
|
||
height: 47rpx;
|
||
margin: 18rpx auto 0;
|
||
font-size: 22rpx;
|
||
line-height: 47rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
&_main{
|
||
position: relative;
|
||
margin: 0 auto;
|
||
|
||
&_zhu{
|
||
text-align: center;
|
||
width: 750rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
.imgStyle{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
// z-index: 2;
|
||
}
|
||
.image1{
|
||
width: 480rpx;
|
||
height: 287rpx;
|
||
}
|
||
.image2{
|
||
width: 165rpx;
|
||
height:165rpx;
|
||
position: absolute;
|
||
top: 133rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 5;
|
||
}
|
||
.image3{
|
||
width: 478rpx;
|
||
height:721rpx;
|
||
position: absolute;
|
||
top: 88rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 2;
|
||
}
|
||
.image4{
|
||
width: 480rpx;
|
||
height: 286rpx;
|
||
position: absolute;
|
||
top: 600rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 1;
|
||
}
|
||
.imageUrl{
|
||
width: 219rpx;
|
||
height: 407rpx;
|
||
position: absolute;
|
||
top: 264rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
.image5{
|
||
width: 507rpx;
|
||
height: 507rpx;
|
||
position: absolute;
|
||
top:191rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 1;
|
||
}
|
||
&_zuo{
|
||
width: 750rpx;
|
||
height: 370rpx;
|
||
position: absolute;
|
||
top: 613rpx;
|
||
}
|
||
}
|
||
&_lt{
|
||
position: fixed;
|
||
right: 10rpx;
|
||
bottom: 300rpx;
|
||
z-index: 6;
|
||
image{
|
||
width: 114rpx;
|
||
height: 114rpx;
|
||
display: block;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
}
|
||
&_bom{
|
||
.bom1{
|
||
width: 286rpx;
|
||
height: 132rpx;
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
z-index: 5;
|
||
}
|
||
.bom2{
|
||
width: 329rpx;
|
||
height: 132rpx;
|
||
position: fixed;
|
||
bottom: 73rpx;
|
||
left: 210rpx;
|
||
z-index: 5;
|
||
}
|
||
.bom3{
|
||
width: 286rpx;
|
||
height: 132rpx;
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 460rpx;
|
||
z-index: 5;
|
||
}
|
||
.shangStyle{
|
||
background: rgba(17,17,17,0.8);
|
||
// border-style:inset;
|
||
// border: 6rpx solid #19A353;
|
||
font-size: 22rpx;
|
||
// -webkit-text-stroke: 1rpx #19C761;
|
||
// text-stroke: 1rpx #19C761;
|
||
color: #fff;
|
||
padding:8rpx 15rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: inset 0 0 20rpx #19A353;
|
||
}
|
||
.shang1{
|
||
position: fixed;
|
||
bottom: 210rpx;
|
||
left: 310rpx;
|
||
z-index: 5;
|
||
}
|
||
.shang2{
|
||
position: fixed;
|
||
bottom: 166rpx;
|
||
right: 52rpx;
|
||
z-index: 5;
|
||
}
|
||
}
|
||
.popGm{
|
||
width: 562rpx;
|
||
height: 896rpx;
|
||
padding-top: 150rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.ckjl{
|
||
width: 750rpx;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
border-radius: 30rpx 30rpx 0px 0px;
|
||
border-top: 5rpx solid #35ED85;
|
||
border-bottom: none;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 10rpx 30rpx 50rpx;
|
||
box-sizing: border-box;
|
||
color: #FFFFFF;
|
||
&_title {
|
||
font-size: 50rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
position: relative;
|
||
text-align: right;
|
||
>image {
|
||
width: 172rpx;
|
||
height: 37rpx;
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top:20rpx;
|
||
}
|
||
}
|
||
.jilv_title {
|
||
font-size: 30rpx;
|
||
color: #F7F7F7;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin: 20rpx auto;
|
||
overflow-x: scroll;
|
||
>view{
|
||
background: #444444;
|
||
border-radius: 10rpx;
|
||
padding: 15rpx 25rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.selActive{
|
||
background: linear-gradient(0deg, #1AC762 0%, #35ED85 100%);
|
||
border-radius: 10rpx;
|
||
color: #222;
|
||
}
|
||
}
|
||
.jilv_list{
|
||
width: 690rpx;
|
||
height: 160rpx;
|
||
border: 2rpx solid #C5FADC;
|
||
margin: 20rpx auto;
|
||
padding: 12rpx 20rpx 24rpx 21rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
>view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #F7F7F7;
|
||
}
|
||
image:nth-of-type(1) {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
margin-right: 18rpx;
|
||
}
|
||
image:nth-of-type(2) {
|
||
width: 69rpx;
|
||
height: 69rpx;
|
||
border-radius:10rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.order_pic {
|
||
display: flex;
|
||
>view:nth-of-type(2) {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
padding-top: 14rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
>view>view:nth-of-type(3) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 410rpx;
|
||
}
|
||
}
|
||
.order_num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1rpx solid #333333;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 0;
|
||
>view:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
}
|
||
text {
|
||
font-size: 32rpx;
|
||
color:#FEFF00;
|
||
}
|
||
}
|
||
.order_title_con1{
|
||
width: 690rpx;
|
||
margin-top: 28rpx;
|
||
padding: 20rpx 30rpx 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.fangshi {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
align-items: center;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
>view>image {
|
||
margin-right: 20rpx;
|
||
}
|
||
text {
|
||
color: #FEFF00;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.order_title_btn {
|
||
width: 690rpx;
|
||
height: 98rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
.zhifu {
|
||
width: 332rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.pop_gongxi {
|
||
width: 750rpx;
|
||
height: 197rpx;
|
||
display: block;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.jp_title {
|
||
box-sizing: border-box;
|
||
padding: 0rpx 50rpx;
|
||
.jp_title_1 {
|
||
width: 100%;
|
||
max-height: 680rpx;
|
||
overflow-y: scroll;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin: auto;
|
||
color: #FFFFFF;
|
||
padding-bottom: 15rpx;
|
||
>view:nth-child(3n-1) {
|
||
margin: 20rpx 30rpx 0 30rpx;
|
||
}
|
||
.jp_list {
|
||
font-size: 24rpx;
|
||
width: 190rpx;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
.list_img {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
border: 1px solid #C5FADC;
|
||
>image {
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
>view {
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
background: #1AC762;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-radius: 0 10rpx 0 0;
|
||
text-align: left;
|
||
padding: 0 20rpx 0 12rpx;
|
||
box-sizing: border-box;
|
||
color: #222;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.jp_btn {
|
||
margin-top: 125rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
>image{
|
||
width: 292rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
.dhbtmbox{
|
||
width: 750rpx;
|
||
height: 32rpx;
|
||
}
|
||
.ckjl_title_con1{
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.pop_con{
|
||
height: 630rpx;
|
||
margin: auto;
|
||
padding: 2rpx 36rpx 0;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
overflow-y: scroll;
|
||
}
|
||
}
|
||
</style>
|