|
|
@@ -0,0 +1,976 @@
|
|
|
+<template>
|
|
|
+ <div class="bookItem">
|
|
|
+ <Header
|
|
|
+ :headerBg="headerBg"
|
|
|
+ :headerBorder="headerBorder"
|
|
|
+ :userBg="userBg"
|
|
|
+ />
|
|
|
+ <div class="navBar" v-if="info">
|
|
|
+ <div class="navBar-left">
|
|
|
+ <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>主页</a>
|
|
|
+ <div class="border"></div>
|
|
|
+ <p>{{info.name}}</p>
|
|
|
+ </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.cover_image_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}}</h1>
|
|
|
+ <!-- <b class="org">{{data.org}}</b><span class="date">2023.07.01-2023.07.21</span> -->
|
|
|
+ <div class="sales-box">
|
|
|
+ <div class="sales-left">
|
|
|
+ <span>订阅价格</span>
|
|
|
+ <span class="OPPOSans">￥{{info.price_discount?info.price_discount:info.price|cutMoneyFiter}}</span>
|
|
|
+ <span class="old-price" v-if="info.price_discount&&info.price_discount!==info.price">￥{{info.price|cutMoneyFiter}}</span>
|
|
|
+ <b>元 / 期</b>
|
|
|
+ </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" :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">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>适合年龄</label>
|
|
|
+ <span>{{info.org_name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>期刊页数</label>
|
|
|
+ <span>78291</span>
|
|
|
+ <el-tooltip placement="right">
|
|
|
+ <div slot="content">双刊、特辑、寒暑假合刊除外</div>
|
|
|
+ <el-button class="tooltip-btn"><svg-icon icon-class="icon-mark"></svg-icon></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>出版周期</label>
|
|
|
+ <span>2023-05-15</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>期刊定价</label>
|
|
|
+ <span>中英双语</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>主办单位</label>
|
|
|
+ <span>815 期</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-box order-box">
|
|
|
+ <div class="info-item order-item" style="margin-bottom:16px">
|
|
|
+ <label>订阅学段</label>
|
|
|
+ <div class="order-content">
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in $studyType" :key="item.study_phase" :class="[studyType===item.study_phase?'active':'']" @click="studyType=item.study_phase">
|
|
|
+ {{item.study_phase_name}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item order-item" style="margin-bottom:16px">
|
|
|
+ <label>订阅期数</label>
|
|
|
+ <div class="order-content">
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in orderList" :key="item.value" :class="[orderTotalNumber===item.value?'active':'']" @click="orderTotalNumber=item.value">
|
|
|
+ {{item.label}}
|
|
|
+ </li>
|
|
|
+ <el-tooltip placement="right" style="height:32px">
|
|
|
+ <div slot="content">一次性订阅：<br/>
|
|
|
+ 5 期 9 折 <br/>
|
|
|
+ 10 期 8 折<br/>
|
|
|
+ 20 期 6 折<br/>
|
|
|
+ 40 期 5 折</div>
|
|
|
+ <el-button class="tooltip-btn"><svg-icon icon-class="icon-mark"></svg-icon></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </ul>
|
|
|
+ <div v-if="orderTotalNumber===-1" class="custom-box">
|
|
|
+ <div class="custom-box-top">
|
|
|
+ <h5>{{custonList[customPage].title}}</h5>
|
|
|
+ <div class="btn-box">
|
|
|
+ <a><i class="el-icon-arrow-left"></i></a>
|
|
|
+ <a><i class="el-icon-arrow-right"></i></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="custom-box-bottom">
|
|
|
+ <li v-for="(itemc,indexc) in custonList[customPage].list" :key="indexc" :style="{width:itemc.width?itemc.width*52+'px':'',borderRight:itemc.farRight?'none !important':'',borderBottom:itemc.farBottom?'none !important':''}" :class="[customOrderNumberList.indexOf(itemc.value)>-1?'active':'']" @click="changeCustomOrder(itemc)">
|
|
|
+ {{itemc.label}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <b v-if="orderTotalNumber!==-1">915 期 - 919 期</b>
|
|
|
+ <b v-else>已选 {{customOrderNumberList.length}} 期</b>
|
|
|
+ <el-tooltip placement="bottom" style="height:32px">
|
|
|
+ <div slot="content">
|
|
|
+ <el-table
|
|
|
+ class="order-table"
|
|
|
+ :data="orderTable"
|
|
|
+ max-height="200px"
|
|
|
+ style="width: 317px">
|
|
|
+ <el-table-column
|
|
|
+ label="#"
|
|
|
+ type="index"
|
|
|
+ width="30">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="name"
|
|
|
+ label="期"
|
|
|
+ width="112">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="date"
|
|
|
+ label="发行日期"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="price"
|
|
|
+ label="价格"
|
|
|
+ width="75">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.price|cutMoneyFiter}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-button class="tooltip-btn"><svg-icon icon-class="icon-mark"></svg-icon></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item order-item">
|
|
|
+ <label>有效期</label>
|
|
|
+ <div class="order-content">
|
|
|
+ <b>365天</b>
|
|
|
+ <el-tooltip placement="right">
|
|
|
+ <div slot="content">2023.08.14~2024.08.13</div>
|
|
|
+ <el-button class="tooltip-btn"><svg-icon icon-class="icon-mark"></svg-icon></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item order-item">
|
|
|
+ <label>结算价格</label>
|
|
|
+ <div class="order-content">
|
|
|
+ <span class="OPPOSans">￥{{info.price_discount|cutMoneyFiter}}</span>
|
|
|
+ <span class="old-price">￥{{info.price|cutMoneyFiter}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box">
|
|
|
+ <a class="el-button" @click="handleChangeWay('wei')">立即购买</a>
|
|
|
+ <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "../../components/Header.vue";
|
|
|
+import { cutMoneyFiter } from '@/utils/defined';
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import { mapState } from 'vuex';
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { Header},
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
|
|
|
+ tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
|
|
|
+ paymentShow: false, // 支付弹窗
|
|
|
+ payWay:'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',
|
|
|
+ studyType: null,
|
|
|
+ orderTotalNumber: null,
|
|
|
+ orderList:[
|
|
|
+ {
|
|
|
+ label:'5 期',
|
|
|
+ value: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'10 期',
|
|
|
+ value: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'20 期',
|
|
|
+ value: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'40 期',
|
|
|
+ value: 40
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'自定义',
|
|
|
+ value: -1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ orderTable:[
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'915 期（合刊）',
|
|
|
+ date:'2023-06-26',
|
|
|
+ price:12
|
|
|
+ }
|
|
|
+
|
|
|
+ ],
|
|
|
+ customPage: 0,
|
|
|
+ custonList:[
|
|
|
+ {
|
|
|
+ title: '2019-2020 学年',
|
|
|
+ total: 14,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ label: '759',
|
|
|
+ value: '759',
|
|
|
+ width: 1,
|
|
|
+ number: 1 // 算完下一个去复制上一个是不是末位 如果下一个加起来的number/10有余数那就是下一行了
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '758',
|
|
|
+ value: '758',
|
|
|
+ width: 1,
|
|
|
+ number: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '757',
|
|
|
+ value: '757',
|
|
|
+ width: 1,
|
|
|
+ number: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '756',
|
|
|
+ value: '756',
|
|
|
+ width: 1,
|
|
|
+ number: 4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '755',
|
|
|
+ value: '755',
|
|
|
+ width: 1,
|
|
|
+ number: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '754',
|
|
|
+ value: '754',
|
|
|
+ width: 1,
|
|
|
+ number: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '753',
|
|
|
+ value: '753',
|
|
|
+ width: 1,
|
|
|
+ number: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '752',
|
|
|
+ value: '752',
|
|
|
+ width: 1,
|
|
|
+ number: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '751',
|
|
|
+ value: '751',
|
|
|
+ width: 1,
|
|
|
+ number: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '751',
|
|
|
+ value: '751',
|
|
|
+ width: 1,
|
|
|
+ number: 1,
|
|
|
+ farRight: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '共同战“疫”',
|
|
|
+ value: 'gong',
|
|
|
+ width: 2,
|
|
|
+ number: 1,
|
|
|
+ farBottom: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '750',
|
|
|
+ value: '750',
|
|
|
+ width: 1,
|
|
|
+ number: 1,
|
|
|
+ farBottom: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '769',
|
|
|
+ value: '769',
|
|
|
+ width: 1,
|
|
|
+ number: 1,
|
|
|
+ farBottom: true
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ customOrderNumberList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ ...mapState(['$studyType']),
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 分享
|
|
|
+ handleShare(){
|
|
|
+
|
|
|
+ },
|
|
|
+ // 收藏
|
|
|
+ handlelike(){
|
|
|
+
|
|
|
+ },
|
|
|
+ handleChangeWay(type){
|
|
|
+ this.payWay = type;
|
|
|
+ this.paymentShow = true;
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ handleClose(){
|
|
|
+ this.paymentShow = false
|
|
|
+ },
|
|
|
+ // 详情
|
|
|
+ getInfo(){
|
|
|
+ let MethodName = "/CourseServer/Client/LBCourseQuery/GetLBCourseInfo";
|
|
|
+ let data = {
|
|
|
+ id: '001-202307051147PXIKH4JPGX',
|
|
|
+ is_contain_cs_item: "true",
|
|
|
+ cs_item_sort_mode: "ASCE"
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.info = res.lb_course
|
|
|
+ this.isBuy = res.buy_info.is_buy
|
|
|
+ this.sales = res.buy_info.total_buy_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(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeCustomOrder(item){
|
|
|
+ if(this.customOrderNumberList.indexOf(item.value)>-1){
|
|
|
+ this.customOrderNumberList.splice(this.customOrderNumberList.indexOf(item.value),1)
|
|
|
+ }else{
|
|
|
+ this.customOrderNumberList.push(item.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前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()
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() { },
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() { },
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() { },
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() { },
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() { },
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() { },
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() { }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.bookItem {
|
|
|
+ background: #F7F8FA;
|
|
|
+ min-height: calc(100vh - 135px);
|
|
|
+ .main-top {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 48px 0;
|
|
|
+ margin-top: 56px;
|
|
|
+ min-height: calc(100vh - 135px);
|
|
|
+ &-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;
|
|
|
+ width: 592px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-box{
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding: 24px 0 0;
|
|
|
+ .order-item{
|
|
|
+ margin-bottom: 24px;
|
|
|
+ width: 100%;
|
|
|
+ label{
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ .order-content{
|
|
|
+ line-height: 32px;
|
|
|
+ ul{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ li{
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding: 4px 15px;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 22px;
|
|
|
+ border: 1px solid #F2F3F5;
|
|
|
+ &.active{
|
|
|
+ color: #EA5939;
|
|
|
+ background: #ffffff;
|
|
|
+ border-color: #EA5939;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ background: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .OPPOSans{
|
|
|
+ margin: 0 8px 0 0;
|
|
|
+ color: #EA5939;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .old-price{
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 22px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ b{
|
|
|
+ color: rgba(0, 0, 0, 0.40);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-box{
|
|
|
+ width: 522px;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ background: #FFF;
|
|
|
+ margin: 4px 0 8px 0;
|
|
|
+ &-top{
|
|
|
+ padding: 8px 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ h5{
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ a{
|
|
|
+ margin-left: 6px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #F2F2F2;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ border-top: 1px solid #E5E6EB;
|
|
|
+ li{
|
|
|
+ padding: 8px !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ background: #ffffff !important;
|
|
|
+ border: none !important;
|
|
|
+ min-width: 52px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid #E5E6EB !important;
|
|
|
+ border-bottom: 1px solid #E5E6EB !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ &.active{
|
|
|
+ border-right: 1px solid #F5F5F5 !important;
|
|
|
+ border-bottom: 1px solid #F5F5F5 !important;
|
|
|
+ background: #EA5939 !important;
|
|
|
+ color: #FFF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tooltip-btn{
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 6px;
|
|
|
+ color: #BEBEBE;
|
|
|
+ &:focus,&:hover{
|
|
|
+ color: #BEBEBE;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-table.el-table{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFF;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+.order-table.el-table th.el-table__cell{
|
|
|
+ background: #3E424B !important;
|
|
|
+ padding: 2px 5px;
|
|
|
+}
|
|
|
+.order-table.el-table .el-table__cell{
|
|
|
+ padding: 2px 5px;
|
|
|
+}
|
|
|
+.order-table.el-table thead{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFF;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+.order-table.el-table td.el-table__cell, .order-table.el-table th.el-table__cell.is-leaf{
|
|
|
+ border-bottom-color: #3E424B;
|
|
|
+}
|
|
|
+.order-table.el-table tr,.order-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
|
|
+ background: #1D2129;
|
|
|
+}
|
|
|
+.order-table.el-table .cell{
|
|
|
+ padding: 0 5px !important;
|
|
|
+}
|
|
|
+.order-table.el-table::before{
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+.order-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|
natasha
