<template>
|
<div class="homePage">
|
<div class="infoBox">
|
<div class="contentBox">
|
<div class="crumbs">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ name: 'bookStore' }">数字教材</el-breadcrumb-item>
|
<el-breadcrumb-item>详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="infoTag" v-if="bookInfo.projectTitle">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
:content="bookInfo.projectTitle"
|
placement="top-start"
|
>
|
<div class="tagText">
|
{{ bookInfo.projectTitle }}
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="bookDetail">
|
<div class="bookImg">
|
<img class="autoImg" :src="bookInfo.icon" alt="" />
|
</div>
|
<span class="iconfont icon-tubiaozhizuo"></span>
|
|
<div class="detailBox">
|
<div class="bookTitle">
|
<div class="bookName" :title="bookInfo.name">
|
{{ bookInfo.name }}
|
</div>
|
<div class="bookTag" :title="bookInfo.seriesName">
|
{{ bookInfo.seriesName }}
|
</div>
|
<div class="collectBox">
|
<img
|
@click="collectBook"
|
v-if="bookInfo.isFavourite"
|
class="buyIcon"
|
src="@/assets/images/bookStore/shoucang.svg"
|
style="margin-right: 10px"
|
/>
|
<span
|
@click="collectBook"
|
v-else
|
class="iconfont icon-shoucang"
|
style="margin-right: 10px"
|
>
|
</span>
|
<div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite">
|
已收藏
|
</div>
|
<div class="collectText" @click="collectBook" v-else>收藏</div>
|
</div>
|
</div>
|
<div class="authorBox">
|
<div class="titleBox1">
|
<div>作者：</div>
|
<div>出版时间：</div>
|
</div>
|
<div class="valueBox">
|
<div>
|
{{ bookInfo.author ? bookInfo.author : '-' }}
|
</div>
|
<div>
|
{{
|
bookInfo.publicationDate
|
? moment(bookInfo.publicationDate).format('YYYY-MM-DD')
|
: '-'
|
}}
|
</div>
|
</div>
|
<div class="titleBox1" style="margin-left: 30px">
|
<div>ISBN：</div>
|
<div>版次：</div>
|
</div>
|
<div class="valueBox">
|
<div>
|
{{ bookInfo.isbn ? bookInfo.isbn : '-' }}
|
</div>
|
<div>
|
{{ bookInfo.pubNumber ? bookInfo.pubNumber : '-' }}
|
</div>
|
</div>
|
</div>
|
<div class="authorBox" style="box-sizing: border-box">
|
<div class="titleBox1">
|
<div>一级分类：</div>
|
<div>二级分类：</div>
|
</div>
|
<div class="valueBox">
|
<div>全国高等职业教育预防医学专业规划教材</div>
|
<div>高等职业教育</div>
|
</div>
|
</div>
|
<div class="purchaseBox">
|
<div class="priceBox">
|
<span v-if="bookInfo.price && bookInfo.price > 0">
|
<span>定价：</span><span>￥</span> <span>{{ bookInfo.price || '-' }}</span
|
><span v-if="bookInfo.VirtualPrice">原价：￥{{ bookInfo.VirtualPrice }}</span>
|
</span>
|
|
<span class="price" v-else>
|
<span class="freePrice">免费</span>
|
</span>
|
</div>
|
<div
|
class="buyInfo"
|
v-if="
|
(currentRoute !== 'teachingServices' && bookInfo.paperBookDD) ||
|
bookInfo.paperBookJD ||
|
bookInfo.paperBookTmall
|
"
|
>
|
纸质书其他购买渠道：
|
<span @click="toJDLink" v-if="bookInfo.paperBookJD">
|
<img class="buyIcon" src="@/assets/images/bookStore/京东icon-01.svg" />京东</span
|
>
|
<span @click="toDDLink" v-if="bookInfo.paperBookDD"
|
><img class="buyIcon" src="@/assets/images/bookStore/当当网.svg" />当当</span
|
>
|
<span @click="toTmLink" v-if="bookInfo.paperBookTmall"
|
><img
|
class="buyIcon"
|
src="@/assets/images/bookStore/tianmaologo2.svg"
|
/>天猫</span
|
>
|
</div>
|
</div>
|
<div class="btnBox">
|
<el-button
|
v-if="
|
currentRoute !== 'teachingServices' &&
|
!bookInfo.alreadyBuy &&
|
bookInfo.isSell &&
|
bookInfo.isSell == '1'
|
"
|
type="primary"
|
:disabled="bookInfo.alreadyBuy"
|
@click="gotoOrder"
|
>电子书购买</el-button
|
>
|
<el-button
|
v-if="bookInfo.pdfFreeFile && !bookInfo.alreadyBuy"
|
type="primary"
|
plain
|
style="min-width: 98px"
|
@click="previewBook"
|
>试读</el-button
|
>
|
<el-button
|
v-else-if="bookInfo.pdfFile && bookInfo.alreadyBuy"
|
type="primary"
|
plain
|
style="min-width: 98px"
|
@click="previewBook"
|
>立即阅读</el-button
|
>
|
<el-button
|
v-if="currentRoute == 'teachingServices' && !bookInfo.alreadyBuy"
|
plain
|
@click="addEbook"
|
>电子样书</el-button
|
>
|
<el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook"
|
>纸质样书</el-button
|
>
|
<el-button plain @click="applyTextBook">申请使用</el-button>
|
</div>
|
</div>
|
</div>
|
<el-dialog title="联系编辑" :visible.sync="contactVisible" width="30%" :lock-scroll="false">
|
<div class="contactBox" v-if="bookInfo.editor">
|
<div class="contacItem">
|
<i class="iconfont icon-renwu-ren contacIcon"></i>
|
{{ bookInfo.editor.name }}
|
</div>
|
<div class="contacItem">
|
<i class="iconfont icon-QQ contacIcon"></i>
|
{{ bookInfo.editor.qq }}
|
</div>
|
<div class="contacItem">
|
<i class="iconfont icon-tongxunlu contacIcon"></i>
|
{{ bookInfo.editor.phone }}
|
</div>
|
<div class="contacItem">
|
<i class="iconfont icon-dianhua contacIcon"></i>
|
{{ bookInfo.editor.telephone }}
|
</div>
|
</div>
|
<el-empty v-else description="暂无数据" class="empty" :image-size="100"></el-empty>
|
</el-dialog>
|
<el-dialog title="信息反馈" :visible.sync="dialogVisible" width="50%" :lock-scroll="false">
|
<div class="infoDialog">
|
<el-input
|
type="textarea"
|
:rows="8"
|
placeholder="详细描述您所遇到的问题，有助于快速给您反馈！"
|
v-model="textarea"
|
>
|
</el-input>
|
<div class="subBtn">
|
<el-button type="primary" @click="sendDiscuss">提交</el-button>
|
</div>
|
<div class="infoList">
|
<div class="infoItem" v-for="(item, index) in commentList" :key="index">
|
<div class="infoImg">
|
<img v-if="item.icon" class="autoImg" :src="item.icon" alt="" />
|
<i v-else class="el-icon-user-solid"></i>
|
</div>
|
<div class="infoContent">
|
<div class="infoTitle">
|
<div class="userNameBox">{{ item.content.name }}</div>
|
<div class="userNameBox">
|
{{ moment(item.createDate).format('YYYY-MM-DD') }}
|
</div>
|
</div>
|
<div class="infoText">
|
{{ item.content.content }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
|
<div class="detailContent contentBox">
|
<div class="resourceBox">
|
<div class="tabsBox">
|
<el-tabs v-model="editableTabsValue" type="card" class="demo-tabs">
|
<el-tab-pane
|
v-for="item in editableTabs"
|
:key="item.name"
|
:label="item.title"
|
:name="item.name"
|
>
|
{{ item.content }}
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div v-if="editableTabsValue == '1'" class="textbookInfo">
|
<div class="textbookInfoItem">
|
<div class="titleBorderBox">图书简介</div>
|
<div class="textbookContent" v-if="bookInfo.content" v-html="bookInfo.content"></div>
|
<div v-else>
|
<el-empty description="暂无数据" />
|
</div>
|
</div>
|
<div class="textbookInfoItem">
|
<div class="titleBorderBox">作者简介</div>
|
<div
|
class="authorInfo"
|
v-if="bookInfo.authorIntroduction"
|
v-html="bookInfo.authorIntroduction"
|
></div>
|
<div v-else>
|
<el-empty description="暂无数据" />
|
</div>
|
</div>
|
</div>
|
<div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div>
|
<div v-else-if="editableTabsValue == '6'" class="supportingResources">
|
<div class="resourcesBox">
|
<el-empty v-if="!resourceHave" :image-size="150" description="暂无内容"></el-empty>
|
<div class="distribution" v-if="resourceHave">
|
<div class="title">资源分布</div>
|
<div class="echartsBox">
|
<div class="left">
|
<div id="chartsContent" style="width: 600px; height: 400px"></div>
|
</div>
|
<div class="right">
|
<div>
|
<p>资源种类</p>
|
<p>
|
<span class="num">{{ resourceData.length }}</span
|
>种
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="recommendBox">
|
<div class="recommendTitle">推荐教材</div>
|
<div class="newRecommendList">
|
<div class="recommendItem" v-for="item in recommendBookListData" :key="item.id">
|
<div class="recommendItemImg">
|
<img class="autoImg" :src="item.icon" />
|
</div>
|
<div class="infoBox2">
|
<div class="bookName2">{{ item.name }}</div>
|
<div class="author2">
|
作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
|
</div>
|
<div class="priceBox2">
|
<span class="oldPrice" v-if="item.oldPrice">原价：¥{{ item.oldPrice }}</span>
|
<span class="price" v-if="item.price && item.price > 0">
|
定价：¥
|
<span>{{ item.price }}</span>
|
</span>
|
<span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import moment from 'moment'
|
import axios from 'axios'
|
import * as echarts from 'echarts'
|
import imgIcon from '@/assets/images/digitalTextbooks/img.png'
|
import AudioIcon from '@/assets/images/digitalTextbooks/Audio.png'
|
import DIcon from '@/assets/images/digitalTextbooks/3D.png'
|
import PPTIcon from '@/assets/images/digitalTextbooks/PPT.png'
|
import shijuanIcon from '@/assets/images/digitalTextbooks/shijuan.png'
|
import shixunIcon from '@/assets/images/digitalTextbooks/shixun.png'
|
import tuozhanIcon from '@/assets/images/digitalTextbooks/tuozhan.png'
|
import videoIcon from '@/assets/images/digitalTextbooks/video.png'
|
import VRIcon from '@/assets/images/digitalTextbooks/VR.png'
|
import ziliaoIcon from '@/assets/images/digitalTextbooks/ziliao.png'
|
import { ref, onBeforeMount, inject, reactive, onMounted, watchEffect } from 'vue'
|
const MG = inject('MG')
|
const config = inject('config')
|
import { useRouter, useRoute } from 'vue-router'
|
import { applyBookStore } from '@/store'
|
const route = useRoute()
|
const router = useRouter()
|
let bookInfo = ref({})
|
let digitalTextId = ref('')
|
let resourceData = ref([])
|
let recommendBookListData = ref([])
|
let editableTabsValue = ref('1')
|
let resourceHave = ref(true)
|
var chartDom = null
|
var myChart = {}
|
var option = null
|
const editableTabs = reactive([
|
{
|
title: '教材信息',
|
name: '1',
|
},
|
{
|
title: '目录',
|
name: '2',
|
},
|
{
|
title: '配套资源',
|
name: '3',
|
},
|
{
|
title: '题库',
|
name: '4',
|
},
|
{
|
title: '教师资源',
|
name: '5',
|
},
|
{
|
title: '资源统计',
|
name: '6',
|
},
|
])
|
|
onMounted(() => {
|
digitalTextId.value = route.query.bookId
|
getBookDetail(digitalTextId.value)
|
getRecommendBookList()
|
})
|
|
watchEffect(() => {
|
if (editableTabsValue.value == '6') {
|
getBookResource()
|
}
|
})
|
|
//申请试用
|
const applyTextBook = () => {
|
localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value))
|
router.push({
|
path: '/textBookApply',
|
})
|
}
|
|
const getRecommendBookList = () => {
|
MG.store
|
.getProductList({
|
path: 'recommendedTextbooks',
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
author: [],
|
},
|
})
|
.then((res) => {
|
console.log(res, '推荐教材')
|
recommendBookListData.value = res.datas
|
})
|
}
|
|
const getBookResource = () => {
|
try {
|
axios
|
.get('https://yxjy.pumcp.com/books/resource/' + bookInfo.value.refCode + '/resource.json')
|
.then(async (res) => {
|
console.log(res, 'resource')
|
if (res.data.length > 0) {
|
res.data.forEach((item) => {
|
if (item.resourceTypeShow == '图片') {
|
item.icon = imgIcon
|
} else if (item.resourceTypeShow == '视频') {
|
item.icon = videoIcon
|
} else if (item.resourceTypeShow == '音频') {
|
item.icon = AudioIcon
|
} else if (item.resourceTypeShow == 'PPT') {
|
item.icon = PPTIcon
|
} else if (item.resourceTypeShow == '拓展') {
|
item.icon = tuozhanIcon
|
} else if (item.resourceTypeShow == '资料') {
|
item.icon = ziliaoIcon
|
} else if (item.resourceTypeShow == '试卷') {
|
item.icon = shijuanIcon
|
} else if (item.resourceTypeShow == '3D') {
|
item.icon = DIcon
|
} else if (item.resourceTypeShow == '实训') {
|
item.icon = shixunIcon
|
} else if (item.resourceTypeShow == 'VR') {
|
item.icon = VRIcon
|
} else {
|
item.icon = ziliaoIcon
|
}
|
})
|
resourceData.value = await groupByResourceTypeShow(res.data)
|
resourceHave.value = true
|
console.log(resourceData.value, 'resourceData')
|
initChart(resourceData.value)
|
} else {
|
resourceHave.value = false
|
}
|
})
|
.catch((error) => {
|
console.log(error, 'error1')
|
|
resourceData = []
|
resourceHave = false
|
})
|
} catch (error) {
|
console.log(error, 'error')
|
resourceData = []
|
resourceHave = false
|
}
|
}
|
|
const 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)
|
}
|
|
const initChart = (data) => {
|
let dataList = []
|
let num = []
|
data.forEach((item) => {
|
dataList.push(item.resourceTypeShow)
|
num.push(item.list.length)
|
})
|
chartDom = document.getElementById('chartsContent')
|
console.log(chartDom, 'chartDom')
|
|
myChart = echarts.init(chartDom)
|
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]
|
},
|
},
|
},
|
],
|
})
|
}
|
|
const getBookDetail = (id) => {
|
const query = {
|
path: '*',
|
queryType: '*',
|
productId: id,
|
storeInfo: 'defaultGoodsStore1',
|
coverSize: {
|
height: 300,
|
width: 210,
|
},
|
fields: {
|
author: [],
|
isbn: [],
|
editionPrinting: [],
|
publicationDate: [],
|
content: [],
|
authorIntroduction: [],
|
catalogue: [],
|
probationPage: [],
|
teachingLevel: [],
|
professionalCategory: [],
|
executiveEditor: [],
|
},
|
}
|
MG.store.getProductDetail(query).then((res) => {
|
console.log(res, 'res')
|
bookInfo.value = res.datas
|
console.log(res.datas, 'res')
|
})
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.homePage {
|
min-width: 1220px;
|
min-height: calc(100vh - 61.8%);
|
background-color: #fff;
|
padding-bottom: 100px;
|
}
|
|
.infoBox {
|
width: 100%;
|
height: 530px;
|
padding-top: 10px;
|
background-color: #fff;
|
background-image: url('@/assets/images/xiehe/detail/details_bg.png');
|
}
|
.infoTag {
|
position: relative;
|
width: 0px;
|
height: 0px;
|
border-right: 20px solid #fff;
|
border-left: 503px solid #e50021;
|
border-top: 19px solid #e50021;
|
border-bottom: 19px solid #e50021;
|
}
|
.tagText {
|
position: absolute;
|
left: -480px;
|
top: -9.5px;
|
max-width: 480px;
|
text-overflow: ellipsis;
|
color: #fff;
|
font-size: 18px;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
.bookDetail {
|
display: flex;
|
overflow: hidden;
|
margin-top: 30px;
|
}
|
.bookImg {
|
position: relative;
|
width: 338px;
|
height: 400px;
|
box-shadow: 2px 2px 10px #f2f2f2;
|
}
|
.detailBox {
|
flex: 1;
|
height: 450px;
|
position: relative;
|
margin-top: 20px;
|
overflow: hidden;
|
}
|
.collectBox {
|
position: absolute;
|
right: 80px;
|
font-size: 14px;
|
color: #999999;
|
cursor: pointer;
|
}
|
|
.collectBox span:nth-child(1) {
|
margin-right: 10px;
|
font-size: 16px;
|
}
|
.collectBox span:nth-child(2) {
|
margin-left: 10px;
|
margin-right: 10px;
|
|
font-size: 16px;
|
}
|
.iconfont {
|
font-size: 25px !important;
|
vertical-align: middle;
|
}
|
.bookTitle {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
padding-left: 100px;
|
display: flex;
|
padding-right: 240px;
|
box-sizing: border-box;
|
}
|
.collectText {
|
font-size: 16px;
|
line-height: 25px;
|
display: inline-block;
|
}
|
.bookName {
|
flex: 1;
|
font-size: 26px;
|
color: #333;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
overflow: hidden;
|
}
|
.bookTag {
|
max-width: 200px;
|
font-size: 16px;
|
color: #333;
|
line-height: 36px;
|
margin-left: 15px;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
overflow: hidden;
|
}
|
.authorBox {
|
width: 80%;
|
display: flex;
|
padding: 20px;
|
padding-left: 100px;
|
position: relative;
|
}
|
.valueBox {
|
margin-left: 20px;
|
}
|
.valueBox div {
|
height: 30px;
|
}
|
.titleBox1 div {
|
height: 30px;
|
}
|
.relationBox {
|
position: absolute;
|
right: 50px;
|
color: #999;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
.purchaseBox {
|
margin-left: 100px;
|
padding-top: 20px;
|
}
|
.priceBox {
|
border-bottom: 1px dashed #ececec;
|
background-color: #b2d9c8;
|
height: 50px;
|
line-height: 50px;
|
padding-left: 20px;
|
}
|
.priceBox span:nth-child(1) {
|
color: #000;
|
font-weight: 700;
|
font-size: 16px;
|
padding-right: 20px;
|
}
|
.priceBox span:nth-child(2) {
|
color: #e50021;
|
font-size: 16px;
|
}
|
.priceBox span:nth-child(3) {
|
color: #e50021;
|
font-size: 22px;
|
font-weight: 700;
|
padding-right: 20px;
|
}
|
.priceBox span:nth-child(4) {
|
color: #333;
|
font-size: 16px;
|
padding-right: 20px;
|
text-decoration: line-through;
|
}
|
.buyInfo {
|
padding: 20px 0px;
|
border-bottom: 1px dashed #ececec;
|
cursor: pointer;
|
}
|
.buyInfo img {
|
margin-left: 10px;
|
}
|
.btnBox {
|
margin-left: 100px;
|
margin-top: 30px;
|
}
|
.infoItem {
|
display: flex;
|
margin-top: 40px;
|
}
|
.infoImg {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
border: 1px solid #ccc;
|
background: #efefef;
|
text-align: center;
|
line-height: 60px;
|
position: relative;
|
}
|
.infoImg i {
|
font-size: 28px;
|
}
|
.infoList {
|
margin-top: 20px;
|
overflow: auto;
|
}
|
.infoContent {
|
flex: 1;
|
overflow: hidden;
|
padding: 0 20px 0 10px;
|
}
|
.infoDialog {
|
padding: 20px;
|
}
|
.infoTitle {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
.infoText {
|
margin-top: 24px;
|
line-height: 20px;
|
}
|
.contactBox {
|
padding: 0px 40px;
|
}
|
.contacItem {
|
margin-top: 20px;
|
}
|
.contacIcon {
|
padding-right: 20px;
|
}
|
.subBtn {
|
margin-top: 20px;
|
text-align: right;
|
}
|
.buyIcon {
|
width: 24px;
|
height: 24px;
|
vertical-align: middle;
|
}
|
.crumbs {
|
margin-top: 10px;
|
border-bottom: 1px solid rgba(20, 73, 65, 0.26);
|
padding-bottom: 20px;
|
}
|
|
.detailContent {
|
margin-top: 30px;
|
display: flex;
|
justify-content: space-between;
|
.resourceBox {
|
width: 76%;
|
}
|
.textbookInfo {
|
padding: 20px 0;
|
}
|
}
|
.titleBorderBox {
|
height: 30px;
|
line-height: 30px;
|
font-weight: 700;
|
border-left: 6px solid #019e58;
|
padding-left: 20px;
|
font-size: 18px;
|
}
|
.textbookInfoItem {
|
margin-top: 20px;
|
}
|
|
.distribution {
|
.title {
|
margin: 10px 0;
|
font-weight: bold;
|
}
|
.echartsBox {
|
height: 400px;
|
border-radius: 7px 7px 7px 7px;
|
border: 1px solid #e4e7ed;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
.left {
|
}
|
.right {
|
background: rgba(64, 158, 255, 0.09);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
width: 200px;
|
p {
|
line-height: 30px;
|
}
|
.num {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
.list {
|
display: flex;
|
margin-bottom: 40px;
|
.listItem {
|
width: 100px;
|
display: block;
|
box-sizing: border-box;
|
.imgBox {
|
margin: 0 auto;
|
position: relative;
|
width: 80px;
|
height: 80px;
|
}
|
.bookInfo {
|
margin: 0;
|
overflow: hidden;
|
text-align: center;
|
.title {
|
color: #333;
|
margin: 10px 0;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
}
|
|
.recommendBox {
|
width: 23%;
|
border: 1px solid #e4e7ed;
|
border-radius: 10px;
|
.recommendTitle {
|
height: 50px;
|
line-height: 50px;
|
padding-left: 20px;
|
border-bottom: 1px solid #e4e7ed;
|
color: #333333;
|
font-weight: 700;
|
}
|
}
|
|
.newRecommendList {
|
padding-top: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
.recommendItem {
|
margin-right: 20px;
|
height: 300px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
background-color: #fff;
|
padding-top: 10px;
|
margin-top: 10px;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
.recommendItemImg {
|
width: 150px;
|
height: 200px;
|
position: relative;
|
margin: 0 auto;
|
}
|
.infoBox2 {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.author2 {
|
margin-top: 10px;
|
}
|
.priceBox2 {
|
margin-top: 10px;
|
.oldPrice {
|
font-size: 16px;
|
color: #444444;
|
text-decoration: line-through;
|
margin-right: 20px;
|
}
|
.price {
|
span {
|
font-weight: bold;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
</style>
|
