<template>
|
<div class="detail">
|
<div class="hearder">
|
<van-nav-bar
|
title="数字教材详情"
|
left-text=""
|
right-text=""
|
left-arrow
|
@click-left="onClickLeft"
|
/>
|
</div>
|
<div class="bookInfo" v-if="!loading">
|
<div class="list">
|
<div class="leftBox">
|
<div class="imgBox">
|
<img :src="detailsInfo.icon" alt class="bookImg" />
|
</div>
|
<div class="section">
|
<div
|
class="starSection"
|
v-if="!detailsInfo.isFavourite"
|
@click="collectBook()"
|
>
|
<div style="text-align: center">
|
<img :src="collectIcon.star" alt="" class="stars" />
|
</div>
|
<p>收藏</p>
|
</div>
|
<div
|
class="starSection"
|
v-if="detailsInfo.isFavourite"
|
@click="collectBook()"
|
>
|
<div style="text-align: center">
|
<img :src="collectIcon.selected_star" alt="" class="stars" />
|
</div>
|
<p>已收藏</p>
|
</div>
|
<div @click="contactUs()">
|
<div style="text-align: center">
|
<img
|
src="@/assets/images/textBook/contact3.png"
|
alt=""
|
class="stars"
|
/>
|
</div>
|
<p>联系我们</p>
|
</div>
|
</div>
|
</div>
|
<div class="centerContent">
|
<p class="bookName">{{ detailsInfo.name }}</p>
|
<p class="sameTitle">作者:{{ detailsInfo.tourism_author || "-" }}</p>
|
<p class="sameTitle">ISBN:{{ detailsInfo.tourism_ISBN || "-" }}</p>
|
<p class="sameTitle">
|
出版时间:{{
|
detailsInfo.tourism_publicationDate
|
? moment(
|
detailsInfo.tourism_publicationDate.split(" ")[0]
|
).format("YYYY-MM")
|
: "-"
|
}}
|
</p>
|
|
<p class="sameTitle">教学层次:{{ teachingLevel || "-" }}</p>
|
<p class="sameTitle">专业类型:{{ professionalCategory || "-" }}</p>
|
<p class="sameTitle">专区:{{ zone || "-" }}</p>
|
</div>
|
</div>
|
<div class="priceBox">
|
<span>数字教材: </span>
|
<span v-if="detailsInfo.price > 0" class="price">{{
|
"¥" + tool.toDecimal2(detailsInfo.price)
|
}}</span>
|
<span class="freePrice" v-if="detailsInfo.price == 0">免费</span>
|
<span class="oldPrice" v-if="detailsInfo.oldPrice">{{
|
"¥" + tool.toDecimal2(detailsInfo.oldPrice)
|
}}</span>
|
</div>
|
</div>
|
<!-- tab标签页 -->
|
<div class="tabsBox">
|
<van-tabs v-model="tabActive" class="tabs" @change="tabChange">
|
<van-tab title="目录">
|
<div
|
class="detailBox"
|
v-if="
|
detailsInfo.tourism_catalog &&
|
detailsInfo.tourism_catalog !== '<p></p>'
|
"
|
v-html="detailsInfo.tourism_catalog"
|
></div>
|
<div v-else class="noData">
|
<van-empty description="暂无数据" image-size="100" />
|
</div>
|
</van-tab>
|
<van-tab title="内容简介">
|
<div
|
class="detailBox"
|
v-if="
|
detailsInfo.tourism_content &&
|
detailsInfo.tourism_content !== '<p></p>'
|
"
|
v-html="detailsInfo.tourism_content"
|
></div>
|
<div v-else class="noData">
|
<van-empty description="暂无数据" image-size="100" />
|
</div>
|
</van-tab>
|
<van-tab title="作者简介">
|
<div
|
class="detailBox"
|
v-if="
|
detailsInfo.tourism_authorBrief &&
|
detailsInfo.tourism_authorBrief !== '<p></p>'
|
"
|
v-html="detailsInfo.tourism_authorBrief"
|
></div>
|
<div v-else class="noData">
|
<van-empty description="暂无数据" image-size="100" />
|
</div>
|
</van-tab>
|
<van-tab title="资源统计">
|
<div v-if="!resourceHave" class="noData">
|
<van-empty description="暂无数据" image-size="100" />
|
</div>
|
<div class="detailBox resourceBox">
|
<div class="title">资源分布</div>
|
<div class="echartsBox">
|
<div
|
ref="resourcesChart"
|
style="width: 100%; height: 300px"
|
></div>
|
</div>
|
<div class="title" v-if="resourceData.length > 0">资源明细</div>
|
<div class="resourceList" v-if="resourceData.length > 0">
|
<div
|
v-for="(item, index) in resourceData"
|
:key="index"
|
class="listItem"
|
>
|
<div class="listImg">
|
<img class="autoImg" :src="item.list[0].icon" />
|
</div>
|
<div class="titleCount">
|
<div class="title">
|
{{ item.resourceTypeShow }}
|
</div>
|
<div class="title">{{ item.list.length }} 个</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
<div class="buttom">
|
<ul style="display: flex">
|
<li class="btmBottom">
|
<img
|
src="@/assets/images/textBook/goushuma3.png"
|
alt=""
|
class="btnImg"
|
/>
|
<p @click="useBookCode()" v-if="!isBuy">使用购书码</p>
|
<p v-else class="disable">使用购书码</p>
|
</li>
|
<li class="btmBottom">
|
<img
|
src="@/assets/images/textBook/shiyong3.png"
|
alt=""
|
class="btnImg"
|
/>
|
<p @click="applyBook()" v-if="!isBuy">申请试用</p>
|
<p v-else class="disable">申请试用</p>
|
</li>
|
<li class="btmBottom1">
|
<img
|
src="@/assets/images/textBook/shidu3.png"
|
alt=""
|
class="btnImg"
|
/>
|
<p v-if="isBuy" @click="readBook()">阅读</p>
|
<p v-if="!isBuy" @click="readBook()">试读</p>
|
</li>
|
<li
|
class="btmBottom2"
|
:style="isBuy ? 'background:#999' : 'background:#FF5B77'"
|
>
|
<p @click="payNow()" v-if="!isBuy">立即购买</p>
|
<p v-else>立即购买</p>
|
</li>
|
<li
|
class="btmBottom2"
|
:style="isBuy ? 'background:#999' : 'background:#2E70FF'"
|
>
|
<p @click="addCart()" v-if="!isBuy">加入购物车</p>
|
<p v-else>加入购物车</p>
|
</li>
|
</ul>
|
</div>
|
<van-dialog
|
v-model="dialogCode"
|
title="使用购书码"
|
show-cancel-button
|
@confirm="onConfirm"
|
>
|
<van-field v-model="code" placeholder="请输入购书码" class="message" />
|
</van-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { Toast, SwipeCell, Dialog } from "vant";
|
import { mapState } from "vuex";
|
import toolClass from "@/assets/js/toolClass";
|
import myConfig from "@/assets/js/config";
|
import WeChat from "@/assets/js/weChat/weChat";
|
import axios from "axios";
|
var echarts = require("echarts");
|
// 全局注册
|
Vue.use(Toast);
|
Vue.use(Dialog);
|
Vue.use(SwipeCell);
|
export default {
|
data() {
|
return {
|
token: "",
|
id: "",
|
//加载状态
|
loading: false,
|
// 详情顶部列表
|
detailsInfo: {},
|
teachingLevel: "",
|
professionalCategory: "",
|
zone: "",
|
// 收藏图片
|
collectIcon: {
|
star: require("@/assets/images/textBook/shoucang3.png"),
|
selected_star: require("@/assets/images/tab_collection_pre.png"),
|
},
|
isBuy: false,
|
tabActive: 0,
|
resourceHave: false,
|
resourceData: [],
|
AudioIcon: require("@/assets/images/textBook/Audio3.png"),
|
DIcon: require("@/assets/images/textBook/3D.png"),
|
imgIcon: require("@/assets/images/textBook/img3.png"),
|
PPTIcon: require("@/assets/images/textBook/PPT3.png"),
|
shijuanIcon: require("@/assets/images/textBook/shijuan3.png"),
|
shixunIcon: require("@/assets/images/textBook/shixun3.png"),
|
tuozhanIcon: require("@/assets/images/textBook/tuozhan3.png"),
|
videoIcon: require("@/assets/images/textBook/video3.png"),
|
VRIcon: require("@/assets/images/textBook/VR.png"),
|
ziliaoIcon: require("@/assets/images/textBook/ziliao3.png"),
|
teacherState: "",
|
shoppingCartGetId: [],
|
dialogCode: false,
|
code: "",
|
};
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
created() {
|
var that = this;
|
that.token = toolClass.getCookie(myConfig.tokenKey);
|
that.id = that.$route.query.id;
|
that.getDetail(that.$route.query.id);
|
},
|
methods: {
|
//获取商品详情
|
getDetail(id) {
|
var that = this;
|
that.loading = true;
|
that.MG.store
|
.getProductDetail({
|
storeInfo: that.config.digitalTextBooksGoodsStore,
|
path: "*",
|
queryType: "*",
|
productId: id,
|
favoriteTypes: that.config.refCodes.LinkType.FavoriteTextBook,
|
fields: {
|
tourism_author: [],
|
tourism_publicationDate: [],
|
tourism_format: [],
|
tourism_ISBN: [],
|
tourism_editionImpression: [],
|
tourism_content: [],
|
tourism_catalog: [],
|
tourism_authorBrief: [],
|
tourism_teachingLevel: [],
|
tourism_professionalCategory: [],
|
tourism_zone: [],
|
viewCount: [],
|
},
|
coverSize: {
|
width: 880,
|
},
|
})
|
.then((res) => {
|
console.log(res.datas);
|
this.isBuy = res.datas.alreadyBuy;
|
that.detailsInfo = res.datas;
|
that.loading = false;
|
if (this.detailsInfo.price == 0 && !this.isBuy && this.userInfo) {
|
if (this.detailsInfo.defaultSaleMethodId) {
|
this.MG.store
|
.initOrder({
|
requests: [
|
{
|
saleMethodId: this.detailsInfo.defaultSaleMethodId,
|
count: 1,
|
},
|
],
|
})
|
.then((initRes) => {
|
if (initRes.orderNumber) {
|
this.MG.store
|
.confirmOrder({ orderNum: initRes.orderNumber })
|
.then((aRes) => {
|
if (aRes) {
|
Toast.success("免费领取成功！");
|
this.getDetail(id);
|
}
|
});
|
}
|
});
|
}
|
}
|
that.getProductType();
|
this.getBookResource();
|
});
|
},
|
|
getProductType() {
|
var that = this;
|
this.MG.store
|
.getProductTypeField({
|
refCodes: [
|
"tourism_teachingLevel",
|
"tourism_professionalCategory",
|
"tourism_zone",
|
],
|
})
|
.then((res) => {
|
if (res.length > 0) {
|
res.forEach((element) => {
|
let optionList = JSON.parse(element.config).option;
|
if (element.refCode == "tourism_teachingLevel") {
|
optionList.forEach((item) => {
|
if (that.detailsInfo.tourism_teachingLevel == item.value) {
|
that.teachingLevel = item.name;
|
}
|
});
|
}
|
if (element.refCode == "tourism_professionalCategory") {
|
optionList.forEach((item) => {
|
if (
|
that.detailsInfo.tourism_professionalCategory == item.value
|
) {
|
that.professionalCategory = item.name;
|
}
|
});
|
}
|
if (element.refCode == "tourism_zone") {
|
optionList.forEach((item) => {
|
if (that.detailsInfo.tourism_zone == item.value) {
|
that.zone = item.name;
|
}
|
});
|
}
|
});
|
}
|
});
|
},
|
|
//收藏
|
collectBook() {
|
if (this.detailsInfo.isFavourite) {
|
this.MG.store
|
.delProductLink({
|
productIds: [this.detailsInfo.id],
|
linkType: this.config.refCodes.LinkType.FavoriteTextBook,
|
})
|
.then(() => {
|
this.detailsInfo.isFavourite = false;
|
});
|
} else {
|
let params = {
|
productIds: [this.detailsInfo.id],
|
linkType: this.config.refCodes.LinkType.FavoriteTextBook,
|
};
|
this.MG.store.addProductLink(params).then((res) => {
|
this.detailsInfo.isFavourite = true;
|
});
|
}
|
},
|
//获取教材资源信息
|
getBookResource() {
|
// console.log(
|
// this.config.textBookResourceUrl +
|
// this.detailsInfo.refCode +
|
// "/resource.json"
|
// );
|
try {
|
axios
|
.get(
|
this.config.textBookResourceUrl +
|
this.detailsInfo.refCode +
|
"/resource.json"
|
)
|
.then(async (res) => {
|
if (res.data.length > 0) {
|
res.data.forEach((item) => {
|
if (item.resourceTypeShow == "图片") {
|
item.icon = this.imgIcon;
|
} else if (item.resourceTypeShow == "视频") {
|
item.icon = this.videoIcon;
|
} else if (item.resourceTypeShow == "音频") {
|
item.icon = this.AudioIcon;
|
} else if (item.resourceTypeShow == "PPT") {
|
item.icon = this.PPTIcon;
|
} else if (item.resourceTypeShow == "拓展") {
|
item.icon = this.tuozhanIcon;
|
} else if (item.resourceTypeShow == "资料") {
|
item.icon = this.ziliaoIcon;
|
} else if (item.resourceTypeShow == "试卷") {
|
item.icon = this.shijuanIcon;
|
} else if (item.resourceTypeShow == "3D") {
|
item.icon = this.DIcon;
|
} else if (item.resourceTypeShow == "实训") {
|
item.icon = this.shixunIcon;
|
} else if (item.resourceTypeShow == "VR") {
|
item.icon = this.VRIcon;
|
} else {
|
item.icon = this.ziliaoIcon;
|
}
|
});
|
this.resourceData = await this.groupByResourceTypeShow(res.data);
|
this.resourceHave = true;
|
} else {
|
this.resourceHave = false;
|
}
|
if (this.resourceData.length > 0) {
|
this.resourceHave = true;
|
if (this.$refs.resourcesChart) {
|
this.initChart(this.resourceData);
|
}
|
} else {
|
this.resourceHave = false;
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
this.resourceData = [];
|
this.resourceHave = false;
|
});
|
} catch (error) {
|
this.resourceData = [];
|
this.resourceHave = false;
|
}
|
},
|
|
groupByResourceTypeShow(resources) {
|
const grouped = resources.reduce((acc, item) => {
|
const key = item.resourceTypeShow;
|
if (!acc[key]) {
|
acc[key] = {
|
resourceTypeShow: key,
|
list: [],
|
};
|
}
|
acc[key].list.push(item);
|
return acc;
|
}, {});
|
return Object.values(grouped);
|
},
|
|
initChart(data) {
|
let that = this;
|
// 基于准备好的dom，初始化echarts实例
|
let dataList = [];
|
let num = [];
|
data.forEach((item) => {
|
dataList.push(item.resourceTypeShow);
|
num.push(item.list.length);
|
});
|
var myChart = echarts.init(that.$refs.resourcesChart);
|
// 绘制图表
|
myChart.setOption({
|
tooltip: {},
|
xAxis: {
|
data: dataList,
|
},
|
yAxis: {},
|
series: [
|
{
|
name: "数量",
|
type: "bar",
|
data: num,
|
itemStyle: {
|
color: function (params) {
|
// params.dataIndex是数据项的索引，你可以根据这个索引来设置不同的颜色
|
const colors = [
|
"#5EA1FF",
|
"#FF5A85",
|
"#7E7AFF",
|
"#3CB768",
|
"#FF8F54",
|
"#FF574B",
|
"#3DB0BF",
|
"#FBBB3B",
|
"#3B5EFB",
|
"#B1FB3B",
|
];
|
return colors[params.dataIndex % colors.length];
|
},
|
},
|
},
|
],
|
});
|
},
|
|
tabChange(val) {
|
console.log(val, 1);
|
if (val == 3) {
|
this.resourceHave = true;
|
this.getBookResource();
|
}
|
},
|
|
//使用购书码
|
useBookCode() {
|
if (this.token == "" || this.token == undefined || this.token == null) {
|
Dialog.confirm({
|
title: "温馨提示",
|
message: "请您登录后使用购书码",
|
showCancelButton: true,
|
cancelButtonText: "取消",
|
confirmButtonText: "确定",
|
inputType: "text",
|
inputPlaceholder: "请输入购书码",
|
})
|
.then((res) => {
|
if (res == "confirm") {
|
toolClass.delCookie(myConfig.tokenKey);
|
WeChat.getCode("weChatLogin");
|
return false;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
} else {
|
this.code = "";
|
this.dialogCode = true;
|
}
|
},
|
|
onConfirm() {
|
var that = this;
|
let lock = true;
|
if (that.code == "") {
|
Toast.fail("请输入购书码！");
|
} else {
|
if (lock) {
|
lock = false;
|
that.MG.store
|
.getActiveCode({
|
code: that.code,
|
})
|
.then((res) => {
|
console.log(res);
|
if (res && res.saleMethodList) {
|
if (
|
res.saleMethodList[0].id ==
|
this.detailsInfo.defaultSaleMethodId
|
) {
|
that.MG.store
|
.userActiveCode({
|
code: that.code,
|
})
|
.then((res) => {
|
Toast.success(res == "激活成功" ? "够买成功" : res);
|
lock = true;
|
that.dialogCode = false;
|
that.getDetail(that.id);
|
});
|
} else {
|
Toast.fail("您输入的购书码有误！");
|
}
|
} else {
|
Toast.fail("您输入的购书码有误！");
|
}
|
});
|
}
|
}
|
},
|
|
//到购买页面
|
payNow() {
|
this.MG.store
|
.initOrder({
|
requests: [
|
{
|
saleMethodId: this.detailsInfo.defaultSaleMethodId,
|
count: 1,
|
},
|
],
|
})
|
.then((res) => {
|
this.$router.push({
|
path: "/pay",
|
query: {
|
orderNum: res.orderNumber,
|
shopId: this.id,
|
},
|
});
|
});
|
},
|
|
readBook() {
|
if (this.detailsInfo.refCode) {
|
window.open(
|
this.config.textReaderUrl +
|
"?bookId=" +
|
this.detailsInfo.refCode +
|
"&token=" +
|
this.token
|
);
|
} else {
|
Toast.fail("暂无资源");
|
}
|
},
|
|
async addCart() {
|
let that = this;
|
let query = {
|
start: 0,
|
size: 999,
|
filterList: [],
|
searchList: [],
|
};
|
const res = await this.MG.store.getShoppingCartProductList(query);
|
res.datas.forEach((item) => {
|
that.shoppingCartGetId.push(item.saleMethod.id);
|
});
|
|
if (
|
that.shoppingCartGetId.includes(that.detailsInfo.defaultSaleMethodId)
|
) {
|
Toast.fail("该书已在购物车，请勿重复添加");
|
} else {
|
const data = {
|
requests: [
|
{
|
saleMethodId: this.detailsInfo.defaultSaleMethodId,
|
storeEventId: null,
|
agentCode: "",
|
},
|
],
|
};
|
this.MG.store.addShoppingCart(data).then((res) => {
|
if (res) {
|
Toast.success("加入购物车成功");
|
}
|
});
|
}
|
},
|
|
//申请试用
|
applyBook() {
|
if (this.token == "" || this.token == undefined || this.token == null) {
|
Dialog.confirm({
|
title: "温馨提示",
|
message: "请您登录后申请试用",
|
showCancelButton: true,
|
cancelButtonText: "关闭",
|
confirmButtonText: "确定",
|
inputType: "text",
|
}).then((res) => {
|
if (res == "confirm") {
|
toolClass.delCookie(myConfig.tokenKey);
|
WeChat.getCode("weChatLogin");
|
return false;
|
}
|
});
|
} else {
|
const role = this.userInfo.role;
|
if (role == "Teacher") {
|
this.getAlreadyBookList(this.detailsInfo);
|
} else {
|
Dialog.confirm({
|
title: "温馨提示",
|
message: "您不是教师用户，请进行教师认证后申请试用。",
|
messageAlign: "left",
|
showCancelButton: true,
|
cancelButtonText: "关闭",
|
confirmButtonText: "教师认证",
|
inputType: "text",
|
})
|
.then((res) => {
|
if (res == "confirm") {
|
this.$router.replace({
|
path: "/teacherCertificate",
|
query: { from: "bookDetail", ...this.$route.query },
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
}
|
},
|
|
//获取已申请试用列表
|
getAlreadyBookList(bookData) {
|
const data = {
|
start: 0,
|
size: 9999,
|
topicIdOrRefCode: "applyDigitalBook",
|
appRefCode: this.config.appRefCode,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
};
|
this.MG.ugc.getTopicMessageList(data).then((res) => {
|
if (res.datas.length > 0) {
|
res.datas.map((item) => {
|
if (item.feedBack) {
|
item.feedBack = JSON.parse(item.feedBack);
|
if (item.feedBack.endDate) {
|
let times = new Date(
|
item.feedBack.endDate + " 23:59:59"
|
).getTime();
|
if (times < sessionStorage.currentDate) {
|
item.isExpiry = true;
|
}
|
}
|
}
|
if (item.content) {
|
item.content = JSON.parse(item.content);
|
item.productId = item.content.id;
|
}
|
});
|
let objVal = res.datas.find(
|
(i) =>
|
i.productId == bookData.id &&
|
i.state != "Reject" &&
|
i.state == "WaitAudit"
|
);
|
if (objVal && !objVal.isExpiry) {
|
Dialog.confirm({
|
title: "提示",
|
message: "您已申请试用该书，是否前往查看",
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
}).then(() => {
|
this.$router.push({
|
name: "myApplyBook",
|
});
|
});
|
} else {
|
this.$router.push({
|
name: "bookApply",
|
query: {
|
bookInfo: JSON.stringify(this.detailsInfo),
|
},
|
});
|
}
|
} else {
|
this.$router.push({
|
name: "bookApply",
|
query: {
|
bookInfo: JSON.stringify(this.detailsInfo),
|
},
|
});
|
}
|
});
|
},
|
|
contactUs() {
|
this.$router.push({
|
name: "aboutUs",
|
});
|
},
|
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
},
|
mounted() {
|
//挂载成功后给pop事件绑定一个方法
|
// 如果支持 popstate （一般移动端都支持）
|
if (window.history && window.history.pushState) {
|
// 往历史记录里面添加一条新的当前页面的url
|
history.pushState(null, null, document.URL);
|
// 给 popstate 绑定一个方法用来监听页面返回
|
window.addEventListener("popstate", this.onClickLeft, false); //false阻止默认事件
|
}
|
},
|
|
//组件销毁后清除事件
|
destroyed() {
|
window.removeEventListener("popstate", this.onClickLeft, false); //false阻止默认事件
|
},
|
};
|
</script>
|
|
<style scoped>
|
.detail {
|
padding-bottom: 52px;
|
background: #f4f7fb;
|
}
|
.hearder {
|
width: 100%;
|
position: fixed;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
}
|
|
/* 详情内容 */
|
/* 列表 */
|
.bookInfo {
|
position: relative;
|
height: 305px;
|
margin-top: 40px;
|
}
|
.list {
|
width: 100%;
|
min-height: 240px;
|
display: flex;
|
top: 0;
|
z-index: 2;
|
position: absolute;
|
padding: 15px;
|
background: #eaf5ff;
|
border-radius: 0px 0px 10px 10px;
|
}
|
.priceBox {
|
width: 100%;
|
height: 120px;
|
line-height: 180px;
|
text-align: right;
|
position: absolute;
|
font-size: 16px;
|
color: #fff;
|
bottom: 0;
|
background: linear-gradient(180deg, #6b99fd 0%, #2e70ff 100%);
|
border-radius: 0px 0px 10px 10px;
|
padding: 0 15px;
|
}
|
|
.priceBox .price,
|
.freePrice {
|
font-weight: bold;
|
font-size: 20px;
|
margin-left: 10px;
|
}
|
.priceBox .oldPrice {
|
color: #dfdfdf;
|
text-decoration: line-through;
|
margin-left: 5px;
|
}
|
.imgBox {
|
width: 110px;
|
height: 150px;
|
margin: 0 auto;
|
overflow: hidden;
|
border-radius: 5px;
|
box-shadow: 0 3px 6px 1px #00000029;
|
}
|
.bookImg {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
display: inline-block;
|
}
|
|
.centerContent {
|
margin-left: 20px;
|
}
|
.section {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 15px;
|
color: #979797;
|
}
|
|
.stars {
|
width: 20px;
|
height: 20px;
|
display: inline-block;
|
margin-bottom: 5px;
|
}
|
|
.bookName {
|
color: #333333;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
.sameTitle {
|
margin: 8px 0 5px 0;
|
color: #333;
|
}
|
|
.tabsBox {
|
margin-top: 20px;
|
border-radius: 10px 10px 0 0;
|
background: #fff;
|
overflow: hidden;
|
border: 1px solid #e3ecff;
|
/* height: calc(100vh - 360px); */
|
}
|
|
.detailBox {
|
padding: 15px;
|
height: 470px;
|
overflow: auto;
|
}
|
|
.detailBox {
|
font-size: none;
|
font-family: none;
|
}
|
|
.noData {
|
font-size: 16px;
|
font-weight: bold;
|
color: #999;
|
min-height: 147px;
|
line-height: 147px;
|
text-align: center;
|
}
|
.detailBox .title {
|
margin: 10px 0;
|
font-weight: bold;
|
}
|
|
.resourceList {
|
display: flex;
|
}
|
.listItem {
|
width: calc(100% / 5);
|
display: block;
|
box-sizing: border-box;
|
}
|
.listImg {
|
margin: 0 auto;
|
position: relative;
|
width: 60px;
|
height: 60px;
|
}
|
.autoImg {
|
width: 40px;
|
height: 40px;
|
}
|
|
.titleCount {
|
margin: 0;
|
overflow: hidden;
|
text-align: center;
|
}
|
|
/* 底部按钮 */
|
.buttom {
|
width: 100%;
|
height: 50px;
|
position: fixed;
|
left: 0;
|
bottom: -1px;
|
z-index: 999;
|
border-top: 1px solid #dddddd;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.btmBottom {
|
width: 20%;
|
text-align: center;
|
line-height: 22px;
|
background-color: #fff;
|
border-right: 1px solid #ddd;
|
}
|
.btmBottom1 {
|
width: 15%;
|
text-align: center;
|
line-height: 22px;
|
background-color: #fff;
|
border-right: 1px solid #ddd;
|
}
|
|
.btmBottom2 {
|
width: 25%;
|
text-align: center;
|
color: #fff;
|
line-height: 48px;
|
}
|
.btnImg {
|
margin-top: 5px;
|
height: 20px;
|
width: 20px;
|
}
|
.disable {
|
color: #999;
|
}
|
</style>
|
|
<style>
|
.van-icon-arrow-left::before {
|
color: #2b68cd;
|
font-size: 15px;
|
}
|
|
.van-tab--active {
|
color: #3586ff !important;
|
}
|
|
.van-tabs__line {
|
background-color: #3586ff !important;
|
}
|
</style>
|
