802 lines
21 KiB
Vue
802 lines
21 KiB
Vue
<template>
|
||
<view style="background-color: #fff;padding: 30rpx;">
|
||
<z-nav-bar title="电子书详情"></z-nav-bar>
|
||
<view class="book_neir">
|
||
<img :src="bookMessage.images" class="bn_img">
|
||
<b class="leiXing" v-if="bookMessage.isVip==1" style="background: #c79119;">VIP</b>
|
||
<b class="leiXing" v-if="bookMessage.isVip==2" style="background: #c74119;">付费</b>
|
||
<view class="bn_nes">
|
||
<view style="font-weight: bold;margin-bottom: 30rpx;">
|
||
{{bookMessage.name}}
|
||
</view>
|
||
<view style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
|
||
<p @click="onAuCHJump(bookMessage.authorId,1)" style="margin-bottom: 20rpx;">
|
||
{{bookMessage.authorName}} [著] >
|
||
</p>
|
||
<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookMessage.publisherNIList">
|
||
{{item.title}} >
|
||
</p>
|
||
</view>
|
||
<view v-if="this.bookMessage.chapterNum!=null"
|
||
style="color: #cdcdcd;font-size: 20rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 36rpx;">
|
||
上次阅读到{{this.bookCatalogue[this.bookMessage.chapterNum-1].chapterName}}
|
||
</view>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<view class="book_dredge" @click="onPageJump('../peanut/opeVip')" v-if="bookMessage.isVip!=0&&this.userMes.vip==0">
|
||
<image src="../../static/icon/mine_p.png" alt=""></image>
|
||
开通会员，免费读本书
|
||
<b>></b>
|
||
</view>
|
||
<view class="book_dredge book_vip" v-if="this.userMes.vip==1">
|
||
<image src="../../static/icon/mine_v.png" alt=""></image>
|
||
尊享会员权益中
|
||
</view>
|
||
<view class="book_tab">
|
||
<view>
|
||
<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
|
||
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}"></u-tabs>
|
||
</view>
|
||
<view class="bt_cont">
|
||
<view v-if="tab_muJian==0" class="bt_jian">
|
||
<text>
|
||
{{bookMessage.description}}
|
||
</text>
|
||
</view>
|
||
<view v-if="tab_muJian==1">
|
||
<p style="text-align: right;color: #a5a5a5;margin-bottom: 10rpx;">
|
||
共{{bookCatalogue.length}}章</p>
|
||
<view class="bt_nulu" v-for='(item,index) in bookCatalogue'>
|
||
<!-- 最近阅读的 -->
|
||
<view @click="onBokReadJump(index)" v-if="bookMessage.isBuy==1" style="display: flex;justify-content: space-between;">
|
||
{{item.chapterName}}
|
||
<font v-if="bookMessage.chapterId==index">最近阅读</font>
|
||
</view>
|
||
<view v-if="bookMessage.isBuy==0">
|
||
<view @click="onBokReadJump(index)" v-if="index<bookMessage.freeChapterCount">
|
||
{{item.chapterName}}
|
||
<font v-if="bookMessage.chapterId==index">最近阅读</font>
|
||
</view>
|
||
<view v-if="index>=bookMessage.freeChapterCount" @click="collectFee()">
|
||
<!-- 不是会员显示锁 -->
|
||
<font style=" color:#bfa853;margin-left: 20rpx;">
|
||
<u-icon name="lock" color="#ccc" size="20" v-if="bookMessage.isBuy!==1"></u-icon>
|
||
</font>
|
||
{{item.chapterName}}
|
||
</view>
|
||
<view
|
||
</view>
|
||
</view>
|
||
<view style="height: 60rpx;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="book_caozuo">
|
||
<view v-if="this.bookMessage.flag" style="color: #aaa;">已加入书架</view>
|
||
<view v-if="!this.bookMessage.flag" @click="joInshelf">加入书架</view>
|
||
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId==null">开始阅读</view>
|
||
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId!=null">
|
||
继续阅读
|
||
</view>
|
||
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0">开始试读</view>
|
||
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum!=null&&this.bookMessage.freeChapterCount!=0">继续试读</view>
|
||
<view v-if="this.bookMessage.isBuy==0&&this.bookMessage.freeChapterCount==0">购买阅读</view>
|
||
<view @click="buyShowFun" v-if="bookMessage.isBuy==0" style="background-color: #d85f54;">立即购买</view>
|
||
<view v-if="bookMessage.isBuy==1&&bookMessage.isVip!=0" style="background-color: #bfa853;">已购买</view>
|
||
<view v-if="bookMessage.isVip==0">本书免费</view>
|
||
</view>
|
||
|
||
|
||
<!-- 购买 -->
|
||
<u-popup :show="buyShow" :round="10" @close="buyShow=false" :closeable='true'>
|
||
<view class="tanchu">
|
||
<view class="by_title">购买</view>
|
||
<view class="by_package">
|
||
<view v-if="userMes.vip==0" :class="typeFen== 1?'Tab_by by_fen':'by_fen'" @click="chBuyType(1)">
|
||
<view class="biao">开通会员</view>
|
||
<view class="wenz">
|
||
连续包月
|
||
<text>节省{{bookMessage.salePrice}}疯币</text>
|
||
</view>
|
||
</view>
|
||
<br>
|
||
<view :class="typeFen== 2?'Tab_by by_fen':'by_fen'" @click="chBuyType(2)">
|
||
<view class="biao" v-if="userMes.vip==0">直接购买</view>
|
||
<view class="biao" v-if="userMes.vip==1">会员权益购买</view>
|
||
<view class="benl">
|
||
<b v-if="useCouponAmount != ''">{{useCouponAmount}}</b>
|
||
<span v-else>
|
||
<b v-if="bookMessage.isSale==1">{{bookMessage.salePrice}}</b>
|
||
<b v-if="bookMessage.isSale==0||bookMessage.isSale==null">{{bookMessage.price}}</b></span>
|
||
疯币
|
||
<text>{{bookMessage.price}}疯币</text>
|
||
</view>
|
||
</view>
|
||
<!-- 优惠券 ------------------------>
|
||
<view class="yq_youhui" @click="CyouhuiShow" style="margin-top:20px;">
|
||
<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
|
||
优惠券
|
||
<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
|
||
<text class="dagnqian"
|
||
v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}张</text>
|
||
<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
|
||
style="background-color: #999;">暂无优惠券</text>
|
||
<text class="dagnqian" v-if="youhuiContent.id!=undefined">
|
||
- ￥{{youhuiContent.coupons.couponAmount}}</text>
|
||
</view>
|
||
</view>
|
||
<view style="height: 1px;width: 100%;background-color: #eee;margin-top: 50rpx;"></view>
|
||
<view style="margin: 40rpx 10rpx 20rpx 10rpx;font-size: 30rpx;">
|
||
<view style="float: left;">余额</view>
|
||
<view style="float: right;color: #999;">
|
||
{{userMes.peanutCoin}} 疯币
|
||
<view class="chongBtn" @click="buPoint()">充值疯币</view>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
|
||
<view style="color: #c3c3c3;font-size: 20rpx;margin: 30rpx 0;">支付成功后，立即解锁已购内容</view>
|
||
|
||
<view @click="buyVip()" v-if="typeFen== 1" class="by_btn">查看套餐开通VIP</view>
|
||
<view @click="buyMoneTip()" v-if="typeFen== 2" class="by_btn">购买本书</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-modal :show="buysignShow" :content="buysignContent" :showCancelButton="true" @cancel="cancelMoney"
|
||
@confirm="buyMoney">
|
||
</u-modal>
|
||
|
||
<view>
|
||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||
</view>
|
||
<!-- 优惠券弹1出 -->
|
||
<u-popup :show="youhuiShow" :round="10" @close="hideyouhui">
|
||
<view class="tanchu">
|
||
<view class="dp_title">请选择优惠券</view>
|
||
<view style="max-height: 1000rpx;overflow-y: scroll;">
|
||
<span @click="clearYouhui" style="font-size: 14px; display:inline-block;border: 1px solid #c74119; border-radius: 5px; float: right; color:#c74119; padding: 5px; margin-bottom: 10px;">不使用优惠券</span>
|
||
<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
|
||
v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
|
||
<view style="width: 25%;color:#fd6004;text-align: center;">
|
||
<text>￥</text>
|
||
<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
|
||
<text
|
||
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">满{{item.coupons.useLevel}}元可用</text>
|
||
</view>
|
||
<view style="width: 68%;padding-left: 5%;">
|
||
<text>{{item.coupons.couponName}}</text>
|
||
<text
|
||
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间：{{item.coupons.expirationDate}}</text>
|
||
</view>
|
||
<view style="width: 7%;">
|
||
<text
|
||
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
|
||
v-if="youhuiIndex !== index"></text>
|
||
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
|
||
</u-icon>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
youhuiShow:false,
|
||
youhuiIndex:'',
|
||
youhuiList:[], // 优惠券列表
|
||
couponMz: 0, // 优惠券钱数
|
||
useCouponAmount: '' , // 使用的优惠券金额
|
||
bookJiageA: 0,
|
||
youhuiContent: {
|
||
coupons:{
|
||
id:'0'
|
||
}
|
||
},
|
||
scrollTop: 0,
|
||
tab_list: [{
|
||
name: '简介',
|
||
}, {
|
||
name: '目录',
|
||
}],
|
||
userMes: {},
|
||
bokMesDet: {},
|
||
tab_muJian: 0,
|
||
bookId: '',
|
||
bookMessage: {
|
||
flag: false
|
||
},
|
||
bookCatalogue: [],
|
||
bgiStyle: {
|
||
background: '#2ab58833'
|
||
},
|
||
iconStyle: {
|
||
fontSize: '40rpx',
|
||
fontWeight: 'bold',
|
||
color: '#54a966',
|
||
},
|
||
typeFen: 1,
|
||
buyShow: false,
|
||
buysignShow: false,
|
||
buysignContent: ''
|
||
};
|
||
},
|
||
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
|
||
//第一次加载
|
||
onLoad(e) {
|
||
this.bookId = e.Id
|
||
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
this.getData();
|
||
},
|
||
//方法
|
||
methods: {
|
||
getData() {
|
||
// 获取电子书详情
|
||
this.$http
|
||
.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
|
||
.then(res => {
|
||
this.bookMessage = res.book
|
||
this.bokMesDet.bookId = res.book.id
|
||
this.bokMesDet.bookName = res.book.name,
|
||
this.bokMesDet.images = res.book.images
|
||
if (this.bookMessage.isSale == 1) {
|
||
this.buysignContent = '您确定要花费' + this.bookMessage.salePrice + '疯币购买' + this.bokMesDet
|
||
.bookName + '吗？'
|
||
} else {
|
||
this.buysignContent = '您确定要花费' + this.bookMessage.price + '疯币购买' + this.bokMesDet
|
||
.bookName + '吗？'
|
||
}
|
||
|
||
this.bokMesDet.userId = this.userInfo.id
|
||
|
||
if (this.bookMessage.publisherName.indexOf(',') > 0) {
|
||
this.bookMessage.publisherName = this.bookMessage.publisherName.split(',')
|
||
this.bookMessage.publisherId = this.bookMessage.publisherId.split(',')
|
||
this.bookMessage.publisherNIList = []
|
||
for (let i in this.bookMessage.publisherName) {
|
||
this.bookMessage.publisherNIList.push({
|
||
title: this.bookMessage.publisherName[i]
|
||
})
|
||
}
|
||
for (let j in this.bookMessage.publisherId) {
|
||
this.bookMessage.publisherNIList[j].id = this.bookMessage.publisherId[j]
|
||
}
|
||
} else {
|
||
this.bookMessage.publisherNIList = []
|
||
this.bookMessage.publisherNIList.push({
|
||
'title': this.bookMessage.publisherName,
|
||
'id': this.bookMessage.publisherId
|
||
})
|
||
}
|
||
});
|
||
|
||
// 获取电子目录
|
||
this.$http
|
||
.post('book/book/getBookCatalogue', {
|
||
'bookid': this.bookId
|
||
})
|
||
.then(res => {
|
||
this.bookCatalogue = res.bookCatalogue
|
||
});
|
||
|
||
|
||
|
||
// 用户详情
|
||
if (this.userInfo.id != undefined) {
|
||
this.$http
|
||
.post('book/user/info/' + this.userInfo.id)
|
||
.then(res => {
|
||
this.userMes = res.user
|
||
if (this.userMes.vip != 0) {
|
||
this.typeFen = 2
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
// 加入书架
|
||
joInshelf() {
|
||
const that = this;
|
||
$http.request({
|
||
url: "book/bookshelf/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: that.bokMesDet,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(function(res) {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '加入书架成功'
|
||
})
|
||
that.bookMessage.flag = true
|
||
}
|
||
}).catch(function(error) {
|
||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
// 点击tab
|
||
tab_click(e) {
|
||
this.tab_muJian = e.index
|
||
},
|
||
CyouhuiShow(){
|
||
this.youhuiShow = true
|
||
this.getCourpe()
|
||
this.buyShow = false // 隐藏购买弹窗
|
||
},
|
||
buyShowFun(){
|
||
this.buyShow = true
|
||
this.getCourpe()
|
||
},
|
||
hideyouhui(){
|
||
this.youhuiShow = false,
|
||
this.buyShow = true // 隐藏购买弹窗
|
||
},
|
||
clearYouhui(){
|
||
this.youhuiContent = {}
|
||
this.youhuiIndex = ''
|
||
this.useCouponAmount = ''
|
||
this.getData()
|
||
this.youhuiShow = false
|
||
this.buyShow = true // 隐藏购买弹窗
|
||
//this.couponMz = 0
|
||
|
||
},
|
||
|
||
// 选择优惠券
|
||
choseYouhui(e) {
|
||
this.youhuiIndex = e
|
||
this.youhuiContent = this.youhuiList[this.youhuiIndex]
|
||
console.log(this.youhuiContent, 'youhuiContent')
|
||
//this.couponMz = this.youhuiContent.coupons.couponAmount
|
||
|
||
if (this.bookMessage.isSale == 0) {
|
||
this.useCouponAmount = this.bookMessage.price - this.youhuiContent.coupons.couponAmount
|
||
} else {
|
||
this.useCouponAmount = this.bookMessage.salePrice - this.youhuiContent.coupons.couponAmount
|
||
}
|
||
this.buysignContent = '您确定要花费' + this.useCouponAmount + '疯币购买' + this.bokMesDet.bookName + '吗？'
|
||
// this.getData()
|
||
this.youhuiShow = false
|
||
this.buyShow = true // 隐藏购买弹窗
|
||
|
||
},
|
||
// 获取优惠券列表
|
||
getCourpe() {
|
||
let bookJiage = 0
|
||
if (this.bookMessage.isSale == 0) {
|
||
bookJiage = this.bookMessage.price
|
||
} else {
|
||
bookJiage = this.bookMessage.salePrice
|
||
}
|
||
this.bookJiageA = bookJiage
|
||
this.$http
|
||
.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.bookJiageA + '&type=1' )
|
||
.then(res => {
|
||
this.youhuiList = res.userCoupons
|
||
});
|
||
},
|
||
// 跳转
|
||
onPageJump(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
|
||
},
|
||
// 电子书阅读跳转
|
||
onBokReadJump(e) {
|
||
const that = this;
|
||
|
||
// 加入阅读记录
|
||
$http.request({
|
||
// 存数据
|
||
url: "book/bookbrowserecords/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: that.bokMesDet,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(function(res) {
|
||
if (res.code == 0) {
|
||
console.log(res,'========');
|
||
if (res.browseRecordsId) {
|
||
$http.request({
|
||
// 更新
|
||
url: "book/bookbrowserecords/update",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
'bookShelfId': res.browseRecordsId
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(function(res) {
|
||
if (res.code == 0) {
|
||
uni.navigateTo({
|
||
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
|
||
});
|
||
}
|
||
}).catch(function(error) {
|
||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
|
||
});
|
||
}
|
||
}
|
||
}).catch(function(error) {
|
||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
// 信息介绍跳转
|
||
onAuCHJump(id, e) {
|
||
uni.navigateTo({
|
||
url: './bookMessage?Id=' + id + '&typ=' + e
|
||
});
|
||
},
|
||
|
||
// 提示购买
|
||
collectFee() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请购买本书'
|
||
})
|
||
},
|
||
|
||
// 充值疯币
|
||
buPoint() {
|
||
uni.navigateTo({
|
||
url: '../peanut/reCharge'
|
||
});
|
||
},
|
||
|
||
// 选择vip还是直接购买
|
||
chBuyType(e) {
|
||
let that = this
|
||
that.typeFen = e
|
||
},
|
||
|
||
// 开通VIP
|
||
buyVip() {
|
||
uni.navigateTo({
|
||
url: '../peanut/opeVip'
|
||
});
|
||
},
|
||
|
||
// 购买本书
|
||
buyMoneTip() {
|
||
let bookJiage = 0
|
||
if (this.bookMessage.isSale == 0) {
|
||
bookJiage = this.bookMessage.price
|
||
} else {
|
||
bookJiage = this.bookMessage.salePrice
|
||
}
|
||
// this.bookJiageA = bookJiage
|
||
if (bookJiage > this.userMes.peanutCoin) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '余额不足，请充值'
|
||
})
|
||
} else {
|
||
this.buysignShow = true
|
||
this.buyShow = false
|
||
}
|
||
|
||
},
|
||
buyMoney() {
|
||
let couponId = ''
|
||
if(this.youhuiContent.coupons.id != 0){ // 使用了优惠券
|
||
couponId = this.youhuiContent.coupons.id
|
||
}else{ // 未使用
|
||
couponId = '0'
|
||
}
|
||
console.log(this.youhuiIndex, this.youhuiContent.coupons.id, couponId)
|
||
this.$http
|
||
.post('book/user/buyEbook?bookId=' + this.bokMesDet.bookId + '&userId=' + this.userInfo.id + '&couponId=' + couponId)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
if (res.status == 'error') {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '购买成功'
|
||
})
|
||
this.buyShow = false
|
||
this.buysignShow = false
|
||
this.getData();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
cancelMoney() {
|
||
this.buysignShow = false
|
||
this.buyShow = true
|
||
},
|
||
|
||
|
||
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
.yq_youhui {
|
||
.yqLeft {
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.yqRight {
|
||
float: right;
|
||
}
|
||
|
||
.dagnqian {
|
||
float: right;
|
||
font-size: 22rpx;
|
||
background-color: #dd1919;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 5rpx 10rpx;
|
||
}
|
||
}
|
||
.yq_yunfei {
|
||
.yqLeft {
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
text {
|
||
float: right;
|
||
}
|
||
}
|
||
.book_neir {
|
||
margin: 20rpx 0 0 0;
|
||
position: relative;
|
||
|
||
|
||
.bn_img {
|
||
float: left;
|
||
width: 250upx;
|
||
height: 320upx;
|
||
}
|
||
|
||
.bn_nes {
|
||
float: left;
|
||
font-size: 36rpx;
|
||
margin-left: 40rpx;
|
||
|
||
view {
|
||
margin: 20rpx 0 0 0;
|
||
}
|
||
}
|
||
|
||
.leiXing {
|
||
display: block;
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-weight: normal;
|
||
background: #27b386;
|
||
position: absolute;
|
||
left: -15upx;
|
||
top: 10upx;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
|
||
.book_dredge {
|
||
font-size: 26rpx;
|
||
color: #e4b58a;
|
||
margin: 40rpx 0 0 0;
|
||
padding: 20rpx 30rpx 25rpx 30rpx;
|
||
background-image: url('../../static/icon/mine_back.png');
|
||
background-size: 100% auto;
|
||
|
||
image {
|
||
width: 46rpx;
|
||
height: 40rpx;
|
||
display: inline-block;
|
||
vertical-align: text-bottom;
|
||
margin: 0 10rpx 0 0;
|
||
}
|
||
|
||
b {
|
||
float: right;
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.book_vip{
|
||
background: url('../../static/icon/mine_card.png') top center no-repeat;
|
||
color: #87510d;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
|
||
.book_tab {
|
||
margin: 20rpx 0 0 0;
|
||
|
||
.bt_cont {
|
||
font-size: 26rpx;
|
||
line-height: 42rpx;
|
||
color: #666;
|
||
padding: 0 10rpx;
|
||
|
||
.bt_jian {
|
||
padding-top: 30rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.bt_nulu {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 20rpx 0;
|
||
|
||
font {
|
||
color: #54a966;
|
||
float: right;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.book_caozuo {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
|
||
view {
|
||
display: inline-block;
|
||
width: 33.3%;
|
||
text-align: center;
|
||
padding: 28rpx 0;
|
||
font-size: 35rpx;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
view:nth-child(3) {
|
||
background-color: #54a966;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
|
||
.tanchu {
|
||
padding: 30rpx 50rpx 60rpx 50rpx;
|
||
|
||
.by_title {
|
||
font-size: 32rpx;
|
||
margin: 0 0 80rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.by_package {
|
||
font-size: 28rpx;
|
||
|
||
.by_fen {
|
||
box-shadow: 0 0 20rpx 0 #0000001a;
|
||
padding: 20rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.biao {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.wenz {
|
||
color: #b1b1b1;
|
||
margin-top: 20rpx;
|
||
|
||
text {
|
||
color: #fe6e09;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.benl {
|
||
margin-top: 20rpx;
|
||
color: #d75f54;
|
||
font-size: 31rpx;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
text-decoration: line-through;
|
||
color: #c1c1c1;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.Tab_by {
|
||
box-shadow: 0 0 20rpx 0 #fe700bcc;
|
||
color: #7b4c0a;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.by_btn {
|
||
background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
|
||
color: #fff;
|
||
width: 100%;
|
||
margin: 50rpx auto 0 auto;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
padding: 20rpx 0;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
.chongBtn {
|
||
background-color: #54a966;
|
||
color: #fff;
|
||
margin-left: 20rpx;
|
||
border-radius: 10rpx;
|
||
padding: 2rpx 10rpx;
|
||
font-size: 20rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.youhuiItem {
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 10rpx;
|
||
margin: 25rpx 0 0 0;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.youhuiItem>view {
|
||
float: left;
|
||
}
|
||
|
||
.youhuiItem.youItem_style {
|
||
border-color: #fd6004;
|
||
}
|
||
</style>
|