12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016 |
- <template>
- <div class="bookItem">
- <Header
- :headerBg="headerBg"
- :headerBorder="headerBorder"
- :userBg="userBg"
- :LoginNavIndex="LoginNavIndex"
- ref="header"
- />
- <div class="navBar" v-if="info">
- <div class="navBar-left">
- <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>{{info.study_phase_name}}版</a>
- <div class="border"></div>
- <p>{{info.name||info.iss_name}}</p>
- </div>
- <!-- <div class="navBar-right">
- <a @click="handleShare">
- <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
- <span>分享</span>
- </a>
- <a @click="handlelike">
- <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
- <span>收藏</span>
- </a>
- </div> -->
- </div>
- <div class="main-top" v-if="info">
- <div class="main-top-inner">
- <el-carousel class="swiper-container" trigger="click" arrow="never" height="414px">
- <!-- <el-carousel-item v-for="(item1, index) in data.imgList" :key="index"> -->
- <el-image
- class="image"
- :src="info.cover_image_url||info.iss_cover_url?info.cover_image_url||info.iss_cover_url:bookType==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
- :fit="'cover'">
- </el-image>
- <!-- </el-carousel-item> -->
- </el-carousel>
- <div class="book-info-right">
- <h1 class="title">{{info.name||info.iss_name}}</h1>
- <!-- <b class="org">{{data.org}}</b><span class="date">2023.07.01-2023.07.21</span> -->
- <div class="sales-box" v-if="isBuy==='false'">
- <div class="sales-left">
- <span>优惠价</span>
- <span class="OPPOSans">¥{{info.hasOwnProperty('price_discount')||info.hasOwnProperty('iss_price_sell')?info.price_discount||info.iss_price_sell:info.price||info.iss_price_org|cutMoneyFiter}}</span>
- <span class="old-price" v-if="(info.hasOwnProperty('price_discount')&&info.price_discount!==info.price)||(info.hasOwnProperty('iss_price_sell')&&info.iss_price_sell!==info.iss_price_org)">¥{{info.price||info.iss_price_org|cutMoneyFiter}}</span>
- </div>
- <span class="sales-right" v-if="sales>=1000">累计销售 {{salesCn}}</span>
- </div>
- <div class="label-box">
- <label v-for="(itemL,indexL) in info.label_name_list||info.info_tag_data" :key="indexL" :style="{background:tagBg[indexL%3],color:tagColor[indexL%3]}">
- {{ '# ' + itemL }}
- </label>
- </div>
- <!-- <div class="book-describe">
- <h2 class="title">{{data.describe.title}}</h2>
- <span class="author">{{'BY '+data.describe.author}}</span>
- <p class="describe">{{data.describe.describe}}</p>
- </div> -->
- <div class="info-box" v-if="bookType==='baozhi'">
- <div class="info-item">
- <label>出版社</label>
- <span>{{info.vendor_name?info.vendor_name:'21世纪报社'}}</span>
- </div>
- <!-- <div class="info-item">
- <label>字数</label>
- <span>78291</span>
- </div> -->
- <div class="info-item">
- <label>发行时间</label>
- <span>{{info.release_date}}</span>
- </div>
- <div class="info-item">
- <label>语种</label>
- <span>中英双语</span>
- </div>
- <div class="info-item">
- <label>期数</label>
- <span>{{info.iss_no}} 期</span>
- </div>
- <div class="info-item">
- <label>学段</label>
- <span>{{info.study_phase_name}}</span>
- </div>
- <!-- <div class="info-item">
- <label>版本</label>
- <span>基础版</span>
- </div> -->
- </div>
- <div class="info-box" v-if="bookType==='LB'">
- <div class="info-item">
- <label>出版社</label>
- <span>{{info.org_name}}</span>
- </div>
- <div class="info-item" v-if="bookType==='LB'">
- <label>教师</label>
- <span>{{info.teacher_name_list.join('、')}}</span>
- </div>
- <div class="info-item">
- <label>类型</label>
- <span>录播课</span>
- </div>
- <div class="info-item">
- <label>课时</label>
- <span>{{courseList.length+' 课时'}}</span>
- </div>
- <div class="info-item">
- <label>有效期</label>
- <span>{{info.effective_month_count + ' 个月'}}</span>
- </div>
- <div class="info-item">
- <label>学段</label>
- <span>{{info.study_phase_name}}</span>
- </div>
- </div>
- <div class="btn-box">
- <a class="continue" v-if="isBuy==='true'" @click="handleLink">继续学习</a>
- <template v-else>
- <a class="el-button" @click="handleChangeWay('wei')" :loading="createOrderLoading">立即购买</a>
- <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a>
- </template>
- </div>
- </div>
- </div>
- </div>
- <div class="main-center" v-if="info">
- <el-tabs type="card" style="margin-bottom:24px;">
- <el-tab-pane label="简介">
- <div v-html="info.intro||info.iss_note"></div>
- </el-tab-pane>
- </el-tabs>
- <el-tabs type="card">
- <!-- <el-tab-pane :label="bookType==='course'?'课程简介':'简介'">
-
- </el-tab-pane> -->
- <el-tab-pane label="目录" v-if="bookType==='baozhi'">
- <tree-list
- :data="issueChnList"
- :isBuy="isBuy==='true'"
- :headerBg="headerBg"
- :headerBorder="headerBorder"
- :userBg="userBg"
- :LoginNavIndex="LoginNavIndex"
- :cardType="bookType">
- </tree-list>
- </el-tab-pane>
- <el-tab-pane label="目录" v-if="bookType==='huakan'">
- <!-- <div class="list">
- <div
- v-for="(item,index) in guessList"
- :key="index+'todayNew'"
- :style="{
- marginLeft:index==0||index%5==0?'0':'37px',
- }"
- >
- <BookCard
- :item="item"
- :headerBg="headerBg"
- :headerBorder="headerBorder"
- :userBg="userBg"
- :LoginNavIndex="LoginNavIndex"
- :previousPage="previousPage"
- />
- </div>
- </div> -->
- <tree-list
- :data="data.treeLists"
- :isBuy="isBuy==='true'"
- :headerBg="headerBg"
- :headerBorder="headerBorder"
- :userBg="userBg"
- :LoginNavIndex="LoginNavIndex"
- :cardType="bookType">
- </tree-list>
- </el-tab-pane>
- <el-tab-pane label="课程目录" v-if="bookType==='LB'">
- <course-list
- :data="courseList"
- :isBuy="isBuy==='true'"
- :headerBg="headerBg"
- :headerBorder="headerBorder"
- :userBg="userBg"
- :LoginNavIndex="LoginNavIndex"
- :cardType="info.type">
- </course-list>
- </el-tab-pane>
- </el-tabs>
- <div class="banner-box-close" v-if="bannerFlag">
- <a v-if="1==2" href="#" target="_blank">
- <img class="banner-item" src="../../assets/banner4.png" />
- </a>
- <img v-else class="banner-item" src="../../assets/banner4.png" />
- <div class="close-box">
- <a class="close-btn" @click="bannerFlag=false"><i class="el-icon-close"></i></a>
- <span class="close-tips">广告</span>
- </div>
- </div>
- </div>
- <el-dialog
- :visible.sync="paymentShow"
- :show-close="false"
- :close-on-click-modal="false"
- width="712px"
- class="bookItem-dialog"
- v-if="paymentShow">
- <Payment :data="info" :payWay="payWay" @handleClose="handleClose" :orderId="orderId" :qr_code_url="qr_code_url" :order_amount="order_amount" />
- </el-dialog>
- </div>
- </template>
- <script>
- //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
- //例如:import 《组件名称》from ‘《组件路径》';
- import Header from "../../components/Header.vue";
- import BookCard from "@/components/common/BookCard.vue"
- import Payment from "./components/Payment.vue"
- import TreeList from "./components/TreeList"
- import CourseList from "./components/CourseList.vue"
- import { cutMoneyFiter } from '@/utils/defined';
- import { getLogin, getNoToken } from "@/api/ajax";
- import { getToken } from '@/utils/auth'
- export default {
- //import引入的组件需要注入到对象中才能使用
- components: { Header, BookCard, Payment, TreeList, CourseList },
- props: [],
- filters:{
- cutMoneyFiter
- },
- data() {
- //这里存放数据
- return {
- config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
- LoginNavIndex: 0,
- userBg: 'rgba(0, 0, 0, 0.24)',
- headerBorder: '#5C5C5C',
- headerBg: '#1F1F1F',
- previousPage: '商城',
- data:{
- navTitle: '第 815 期 Celebrating new King',
- title: '第 815 期 Celebrating new King',
- org: '二十一世纪英文报',
- tagList: ['中英双语','经典读物','初中必读'],
- imgList:[
- require('../../assets/img1.png'), require('../../assets/bookcard-image.png'),
- ],
- describe:{
- title: 'Bring books up to date',
- author: 'TEENS',
- describe: 'Should childrenn read the original or adapted version? 英国童书再版遭大量删改引争议 词数 372 测试见IV版 建议阅读时间 5分钟 Puffin ...'
- },
- price: '3.9',
- oldPrice: '5.99',
- isBuy: this.$route.query.isBuy?this.$route.query.isBuy:false,
- treeList: [
- {
- number: '1',
- title: 'FRONTPAGE',
- children:[
- {
- number:'1.1',
- title:'Meeting Foreigners at an Airport'
- }
- ]
- },
- {
- number: '2',
- title: 'OUR WORLD',
- children:[
- {
- number:'2.1',
- title:'Out in the fields'
- },
- {
- number:'2.2',
- title:'IN BRIEF 新闻速览'
- },
- {
- number: '2.3',
- title:'XI’S WORDS 英语学习'
- },
- {
- number:'2.4',
- title:'WORLD LENS 图行天下'
- },
- {
- number: '2.5',
- title:'4,200'
- }
- ]
- },
- {
- number: '3',
- title: 'SCIENCE STUDY',
- children: [
- {
- number: '3.1',
- title:'Listened to by aliens'
- },
- {
- number: '3.2',
- title: 'Wearable mushrooms'
- },
- {
- number:'3.3',
- title:'Lend a helping fin'
- }
- ]
- },
- {
- number: '4',
- title: 'READING & WRITING',
- children: [
- {
- number: '4.1',
- title:'What’s the word 短文填空'
- },
- {
- number: '4.2',
- title: '任务型阅读:我的身体我做主'
- }
- ]
- }
- ],
- treeLists: [
- {
- number: '1',
- title: 'Nature',
- children:[
- {
- number:'1.1',
- title:'‘King’ of the desert'
- }
- ]
- },
- {
- number: '2',
- title: 'My works',
- children:[
- {
- number:'2.1',
- title:'I love summer'
- }
- ]
- },
- {
- number: '3',
- title: 'Front page',
- children: [
- {
- number: '3.1',
- title:'2023年3月画刊完整音频'
- }
- ]
- },
- {
- number: '4',
- title: 'Art zone',
- children: [
- {
- number: '4.1',
- title:'Art zone'
- }
- ]
- }
- ],
- },
- guessList: [{
- src: require('../../assets/bookcard-image.png'),
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
- price: "3.00",
- oldprice: "3.00",
- author: "作者",
- score: 3,
- progress: "90%"
- },
- {
- src: require('../../assets/bookcard-image.png'),
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
- price: "3.00",
- oldprice: "3.00",
- author: "作者",
- score: 3,
- },
- {
- src: require('../../assets/bookcard-image.png'),
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
- price: "3.00",
- oldprice: "3.00",
- author: "作者",
- score: 3,
- },
- {
- src: require('../../assets/bookcard-image.png'),
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
- price: "3.00",
- oldprice: "3.00",
- author: "作者",
- score: 3,
- },
- {
- src: require('../../assets/bookcard-image.png'),
- name: "名称名称名称名称名称名称名称名称名称名称名称名称",
- price: "3.00",
- oldprice: "3.00",
- author: "作者",
- score: 3,
- }
- ],
- tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
- tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
- paymentShow: false, // 支付弹窗
- payWay:this.$route.query.paywei?this.$route.query.paywei:'dui',
- bookType: this.$route.query.cardType?this.$route.query.cardType:'baozhi', // 书籍类型
- bannerFlag: true, // 是否展示广告
- id: this.$route.query.id?this.$route.query.id:'',
- info: null, // 信息
- courseList:[],
- sales: null,
- salesCn: '',
- isBuy: 'false',
- userMessage: getToken()?JSON.parse(getToken()):null,
- orderId: '',
- qr_code_url: '',
- pre_play_cs_item_id: '', //上次阅读课节id
- pre_play_index: null, // 上次阅读索引
- issueChnList:[],
- order_amount: null,
- createOrderLoading: false
- }
- },
- //计算属性 类似于data概念
- computed: {},
- //监控data中数据变化
- watch: {},
- //方法集合
- methods: {
- // 分享
- handleShare(){
- },
- // 收藏
- handlelike(){
- },
- handleChangeWay(type){
- if(!this.userMessage){
- this.$refs.header.handleLogin('/bookItem?headerConfig='+this.$route.query.headerConfig+'&cardType='+this.bookType+'&id='+this.id+'&paywei='+type,'url')
- return false
- }
- this.payWay = type;
- this.handleOrder()
- },
- // 关闭弹窗
- handleClose(){
- this.paymentShow = false
- this.getInfo()
- },
- // 详情
- getInfo(){
- let MethodName = "/CourseServer/Client/LBCourseQuery/GetLBCourseInfo";
- let data = null
- if(this.bookType==='LB'){
- data = {
- id: this.id,
- is_contain_cs_item: "true",
- cs_item_sort_mode: "ASCE"
- }
- }else if(this.bookType==='baozhi'){
- MethodName = '/PaperServer/Client/Issue/GetIssueBriefInfo'
- data = {
- id: this.id,
- }
- }
- getLogin(MethodName, data)
- .then((res) => {
- if(res.status===1){
- if(this.bookType==='LB'){
- this.info = res.lb_course
- if(res.my_play_record.pre_play_cs_item_id){
- this.pre_play_cs_item_id = res.my_play_record.pre_play_cs_item_id
- }
- this.courseList = this.handleCourseLength(res.cs_item_list)
- }else if(this.bookType==='baozhi'){
- this.info = res.data
- this.issueChnList = res.data.chn_art_data
- }
- }
- })
- .catch(() => {
-
- });
- if(this.userMessage){
- getLogin('/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus', {
- goods_type: this.bookType==='LB'?0:this.bookType==='baozhi'?2:null,
- goods_id: this.id
- })
- .then((res) => {
- if(res.status===1){
- this.isBuy = res.buy_info.is_buy
- this.sales = res.data.sold_count
- if(this.sales<1000){
- this.salesCn = ''
- }else if(1000<=this.sales&&this.sales<10000){
- this.salesCn = this.sales.toString().substring(0,1)+'000+'
- }else if(10000<=this.sales&&this.sales<100000){
- this.salesCn = this.sales.toString().substring(0,1)+'万+'
- }else if(100000<=this.sales&&this.sales<1000000){
- this.salesCn = this.sales.toString().substring(0,1)+'0万+'
- }else if(1000000<=this.sales&&this.sales<10000000){
- this.salesCn = this.sales.toString().substring(0,1)+'00万+'
- }else if(10000000<=this.sales&&this.sales<100000000){
- this.salesCn = this.sales.toString().substring(0,1)+'000万+'
- }else if(100000000<=this.sales){
- this.salesCn = this.sales.toString().substring(0,1)+'亿+'
- }
- }
- })
- .catch(() => {
-
- });
- }else{
- getNoToken('/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus', {
- goods_type: this.bookType==='LB'?0:this.bookType==='baozhi'?2:null,
- goods_id: this.id
- }, 'VOID')
- .then((res) => {
- if(res.status===1){
- this.isBuy = res.buy_info.is_buy
- this.sales = res.data.sold_count
- if(this.sales<1000){
- this.salesCn = ''
- }else if(1000<=this.sales&&this.sales<10000){
- this.salesCn = this.sales.toString().substring(0,1)+'000+'
- }else if(10000<=this.sales&&this.sales<100000){
- this.salesCn = this.sales.toString().substring(0,1)+'万+'
- }else if(100000<=this.sales&&this.sales<1000000){
- this.salesCn = this.sales.toString().substring(0,1)+'0万+'
- }else if(1000000<=this.sales&&this.sales<10000000){
- this.salesCn = this.sales.toString().substring(0,1)+'00万+'
- }else if(10000000<=this.sales&&this.sales<100000000){
- this.salesCn = this.sales.toString().substring(0,1)+'000万+'
- }else if(100000000<=this.sales){
- this.salesCn = this.sales.toString().substring(0,1)+'亿+'
- }
- }
- })
- .catch(() => {
-
- });
- }
- },
- // 处理授课时长 小于1分钟的按1分钟 之后个位数四舍五入
- handleCourseLength(list){
- let listArr = JSON.parse(JSON.stringify(list))
- listArr.forEach((item,index) => {
- if(item.file_media_duration){
- if(item.file_media_duration<60){
- item.timeCn = '1分钟'
- }else if(item.file_media_duration<600){
- item.timeCn = Math.ceil(item.file_media_duration/60)+'分钟'
- }else{
- let first = Math.ceil(item.file_media_duration/60).toString().substring(0,Math.ceil(item.file_media_duration/60).toString().length-1)*1
- let last = Math.ceil(item.file_media_duration/60).toString().substring(Math.ceil(item.file_media_duration/60).toString().length-1)*1
- if(last<5){
- item.timeCn = first+'0分钟'
- }else{
- item.timeCn = (first+1)+'0分钟'
- }
-
- }
- }else{
- item.timeCn = '-'
- }
- if(item.id===this.pre_play_cs_item_id){
- this.pre_play_index = index
- }
- });
- return listArr
- },
- // 生成订单
- handleOrder(){
- this.createOrderLoading = true
- let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
- let data = {
- goods_type: this.bookType==='LB'?0:this.bookType==='baozhi'?2:null,
- goods_id_list: [this.id],
- pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:this.payWay==='dui'?5:null
- }
- getLogin(MethodName, data)
- .then((res) => {
- this.createOrderLoading = false
- if(res.status === 1){
- this.order_amount = res.order_amount
- if(this.order_amount<=0){
- this.getInfo()
- }else{
- this.orderId = res.id
- this.qr_code_url = res.qr_code_url
- this.paymentShow = true;
- }
- }
- }).catch(()=>{
- this.createOrderLoading = false
- })
- // this.paymentShow = true;
- },
- // 跳转
- async handleLink(){
- let url = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
- if(this.bookType==='baozhi'){
- let articleId = ''
- if(this.info.last_read_art_id){
- articleId = this.info.last_read_art_id
- }else{
- for(let i = 0; i<this.issueChnList.length; i++){
- if(articleId){
- break
- }
- if(this.issueChnList[i].arts&&this.issueChnList[i].arts.length>0){
- for(let j=0; j<this.issueChnList[i].arts.length;j++){
- if(this.issueChnList[i].arts[j].id){
- articleId = this.issueChnList[i].arts[j].id
- break
- }
- }
- }
-
- }
- }
- let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
- let data = {
- iss_id: this.$route.query.id,
- art_id: articleId
- }
- await getLogin(MethodName, data)
- .then((res) => {
- })
- this.$router.push({
- path: "/articleDetail",
- query: {
- headerConfig: encodeURIComponent(url),
- id: articleId,
- iss_id: this.$route.query.id
- },
-
- });
- }else{
- this.$router.push({
- path: this.info.type===1?"/courseDetail":"/videoDetail",
- query: {
- headerConfig: encodeURIComponent(url),
- index: this.pre_play_index,
- id: this.id
- },
- });
- }
- }
- },
- //生命周期 - 创建完成(可以访问当前this实例)
- created() {
- if(this.config){
- let arr = this.config.split('&&&')
- this.LoginNavIndex = arr[0] * 1
- this.userBg = arr[1] ? arr[1] : 'rgba(0, 0, 0, 0.24)'
- this.headerBorder = arr[2] ? arr[2] : '#5C5C5C'
- this.headerBg = arr[3] ? arr[3] : '#1F1F1F'
- this.previousPage = arr[4] ? arr[4] : '商城'
- }
- this.getInfo()
- if(this.$route.query.paywei){
- this.handleOrder()
- }
- },
- //生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {
- },
- //生命周期-创建之前
- beforeCreated() { },
- //生命周期-挂载之前
- beforeMount() { },
- //生命周期-更新之前
- beforUpdate() { },
- //生命周期-更新之后
- updated() { },
- //生命周期-销毁之前
- beforeDestory() { },
- //生命周期-销毁完成
- destoryed() { },
- //如果页面有keep-alive缓存功能,这个函数会触发
- activated() { }
- }
- </script>
- <style lang="scss" scoped>
- /* @import url(); 引入css类 */
- .bookItem {
- background: #F7F8FA;
- min-height: 100%;
- .main-top {
- background: #FFFFFF;
- padding: 48px 0;
- margin-top: 56px;
- &-inner{
- width: 1200px;
- margin: 0 auto;
- display: flex;
- .swiper-container{
- width: 416px;
- height: 440px;
- text-align: center;
- .el-image{
- width: 297px;
- height: 414px;
- border: 1px solid #F3F3F3;
- }
- }
- .book-info-right{
- flex: 1;
- padding-left: 88px;
- .title{
- color: #2F3742;
- font-weight: 500;
- font-size: 32px;
- line-height: 44px;
- margin: 0 0 16px 0;
- }
- .org,.date{
- font-weight: 500;
- font-size: 14px;
- line-height: 22px;
- color: rgba(0, 0, 0, 0.4);
- }
- .date{
- margin-left: 32px;
- line-height: 24px;
- }
- .label-box{
- display: flex;
- flex-flow: wrap;
- margin: 16px 0;
- label{
- margin: 0 8px 8px 0;
- border-radius: 20px;
- padding: 4px 12px;
- font-weight: 400;
- font-size: 14px;
- line-height: 22px;
- }
- }
- .book-describe{
- border-top: 1px solid #E5E6EB;
- border-bottom: 1px solid #E5E6EB;
- padding: 16px 0;
- .title{
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
- color: #000000;
- margin-bottom: 8px;
- }
- .author{
- font-weight: 400;
- font-size: 12px;
- line-height: 20px;
- color: #000000;
- margin-bottom: 8px;
- display: block;
- }
- .describe{
- font-weight: 400;
- font-size: 14px;
- line-height: 22px;
- color: #000000;
- margin: 0;
- }
- }
- .price-box{
- padding: 20px 0 16px 0;
- display: flex;
- align-items: flex-end;
- .price{
- font-weight: 500;
- font-size: 32px;
- line-height: 40px;
- color: #EA5939;
- }
- .oldPrice{
- padding: 0 0 2px 7px;
- font-weight: 500;
- font-size: 14px;
- line-height: 22px;
- color: rgba(0, 0, 0, 0.4);
- text-decoration-line: line-through;
- }
- }
- .info-box{
- display: flex;
- flex-flow: wrap;
- border-bottom: 1px solid #EBEBEB;
- margin-bottom: 24px;
- .info-item{
- width: 50%;
- margin-bottom: 15px;
- font-size: 14px;
- line-height: 22px;
- display: flex;
- label{
- color: #C2C2C2;
- font-weight: 400;
- margin-right: 16px;
- width: 58px;
- display: block;
- text-align:justify;
- text-justify:distribute-all-lines;
- text-align-last:justify;
- -moz-text-align-last:justify;
- -webkit-text-align-last:justify;
- }
- }
- }
- .btn-box{
- display: flex;
- .el-button{
- width: 112px;
- height: 40px;
- background: #EA5939;
- box-shadow: 0px 8px 16px rgba(234, 89, 57, 0.24);
- border-radius: 4px;
- font-weight: 500;
- font-size: 16px;
- color: #FFFFFF;
- border: none;
- }
- .svg-icon{
- margin-left: 7px;
- }
- .continue{
- width: 112px;
- height: 40px;
- background: #175DFF;
- border-radius: 4px;
- font-weight: 500;
- font-size: 16px;
- line-height: 40px;
- color: rgba(255, 255, 255, 1);
- display: block;
- text-align: center;
- box-shadow: 0px 8px 16px rgba(23, 93, 255, 0.24);
- }
- .upgrade{
- margin-left: 16px;
- display: block;
- padding: 0px 24px;
- height: 40px;
- background: #E9E9E9;
- box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
- border-radius: 4px;
- color: #595959;
- font-weight: 500;
- font-size: 16px;
- line-height: 40px;
- text-align: center;
- width: 130px;
- }
- }
- }
- }
- }
- .main-center{
- width: 1200px;
- margin: 0 auto;
- padding: 40px 0;
- .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
- border-color: #E7E7E7;
- }
- }
- .main-bottom{
- width: 1200px;
- margin: 0 auto;
- padding-bottom: 40px;
- &-top{
- display: flex;
- justify-content: space-between;
- p{
- margin: 0;
- font-weight: 500;
- font-size: 24px;
- line-height: 32px;
- color: #1F2C5C;
- font-family: initial;
- }
- .right{
- color: rgba(0, 0, 0, 0.88);
- font-weight: 400;
- font-size: 16px;
- line-height: 24px;
- cursor: pointer;
- a{
- margin-right: 8px;
- }
- }
- }
- }
- .list {
- margin-top: 24px;
- display: flex;
- flex-wrap: wrap;
- > div {
- width: 200px;
- border-radius: 8px;
- overflow: hidden;
- background: #ffffff;
- margin-bottom: 24px;
- }
- }
- }
- .banner-box-close{
- margin-top: 40px;
- }
- .sales-box{
- display: flex;
- width: 592px;
- padding: 16px;
- border-radius: 4px;
- background: #F5F5F5;
- justify-content: space-between;
- align-items: flex-end;
- color: #ADADAD;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- .OPPOSans{
- margin: 0 8px 0 16px;
- color: #EA5939;
- font-size: 32px;
- font-weight: 500;
- line-height: 40px;
- }
- .old-price{
- color: rgba(0, 0, 0, 0.40);
- font-size: 14px;
- font-weight: 500;
- line-height: 22px;
- text-decoration: line-through;
- }
- }
- </style>
- <style lang="scss">
- .bookItem{
- .el-carousel__button{
- width: 8px;
- height: 8px;
- background: #D9D9D9;
- opacity: 1;
- border-radius: 4px;
- }
- .el-carousel__indicator.is-active{
- .el-carousel__button{
- background: #5E5E5E;
- }
- }
- .el-tabs__header{
- margin: 0;
- }
- .el-tab-pane{
- background: #F8F8F8;
- border: 1px solid #E7E7E7;
- border-top: none;
- padding: 24px;
- }
- .el-tabs__item{
- width: 160px;
- height: 38px;
- text-align: center;
- font-weight: 500;
- font-size: 14px;
- line-height: 38px;
- color: #1F2C5C;
- &:hover{
- background: #E7E7E7;
- }
- &.is-active{
- // background: #3459D2;
- // color: #EEF3FF;
- border-bottom: none;
- background: #E7E7E7;
- }
- }
- }
- .bookitem-dropdown.el-dropdown-menu{
- padding: 4px;
- .el-dropdown-menu__item{
- font-weight: 500;
- font-size: 16px;
- line-height: 40px;
- color: #000000;
- }
- .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
- background: #FDECEE;
- border-radius: 4px;
- color: #EA5939;
- }
- }
- .bookItem-dialog{
- .el-dialog__header,.el-dialog__body{
- padding: 0;
- }
- .el-dialog{
- border: 1px solid #EBEBEB;
- box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
- border-radius: 8px;
- overflow: hidden;
- }
- }
- </style>
|