1148 lines
30 KiB
Vue
1148 lines
30 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, 0.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.$config.getAppSetting("app_name") + 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>
|