parent
05da260225
commit
c9d0d17779
8 changed files with 2152 additions and 376 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,819 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="inner"> |
||||||
|
<Breadcrumb ref="breadcrumb" :data.sync="routes" /> |
||||||
|
<div class="top"> |
||||||
|
<el-carousel class="pics fadeInLeft" :interval="6000" height="278px" |
||||||
|
:arrow="form.pics.length > 1 ? 'hover' : 'never'" :indicator-position="form.pics.length > 1 ? '' : 'none'"> |
||||||
|
<el-carousel-item v-for="(item, i) in form.pics" :key="i"> |
||||||
|
<el-image class="pic" :src="item" :preview-src-list="form.pics"> |
||||||
|
</el-image> |
||||||
|
</el-carousel-item> |
||||||
|
</el-carousel> |
||||||
|
<div class="right fadeInRight" id="fields"> |
||||||
|
<h6>{{ form.mall.productName }}</h6> |
||||||
|
<div v-if="isCourse" class="meta"> |
||||||
|
共 <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目   |
||||||
|
已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 |
||||||
|
</div> |
||||||
|
<div class="des" v-html="form.mall.productIntroduction"></div> |
||||||
|
<div class="fields"> |
||||||
|
<div class="field"> |
||||||
|
<img src="@/assets/images/product/1.png" alt=""> 适用专业： |
||||||
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.goodsRes.professionalName" |
||||||
|
placement="bottom"> |
||||||
|
<div> |
||||||
|
{{ form.goodsRes.professionalName }} |
||||||
|
</div> |
||||||
|
</el-tooltip> |
||||||
|
</div> |
||||||
|
<div v-if="form.mall.applicationScenario" class="field"> |
||||||
|
<img src="@/assets/images/product/2.png" alt=""> 适用场景： |
||||||
|
<div class="text">{{ form.mall.applicationScenario }}</div> |
||||||
|
</div> |
||||||
|
<div v-if="form.mall.matchingCourse" class="field"> |
||||||
|
<img src="@/assets/images/product/3.png" alt=""> 匹配课程： |
||||||
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.mall.matchingCourse" |
||||||
|
placement="bottom"> |
||||||
|
<div class="text"> |
||||||
|
{{ form.mall.matchingCourse }} |
||||||
|
</div> |
||||||
|
</el-tooltip> |
||||||
|
</div> |
||||||
|
<div v-if="form.mall.courseHours" class="field"> |
||||||
|
<img src="@/assets/images/product/4.png" alt=""> 预计课时： |
||||||
|
<div class="text">{{ form.mall.courseHours }}</div> |
||||||
|
</div> |
||||||
|
<div v-if="form.goodsRes.typeName" class="field"> |
||||||
|
<img src="@/assets/images/product/5.png" alt=""> 产品类型： |
||||||
|
<div class="text">{{ form.goodsRes.typeName }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if="!GTA" class="btn" @click="showQrcode">会员价采购</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="course" id="part0"> |
||||||
|
<div class="detail"> |
||||||
|
<ul class="tab"> |
||||||
|
<li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{ |
||||||
|
tab.name }}</li> |
||||||
|
</ul> |
||||||
|
<div class="courses"> |
||||||
|
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
||||||
|
<div class="chapter" id="part1" v-for="(item, i) in chapterList" :key="i"> |
||||||
|
<div class="chapterName">{{ item.name }}</div> |
||||||
|
<div class="section" v-if="item.subsectionList.length"> |
||||||
|
<div v-for="(section, j) in item.subsectionList" :key="j"> |
||||||
|
<div class="sectionName" :title="section.name"> |
||||||
|
<div class="val"> |
||||||
|
<img v-if="section.fileType === 'pptx'" src="@/assets/images/exts/ppt.png" alt=""> |
||||||
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/images/exts/video.png" alt=""> |
||||||
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
||||||
|
src="@/assets/images/exts/word.png" alt=""> |
||||||
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/images/exts/txt.png" alt=""> |
||||||
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/images/exts/pdf.png" alt=""> |
||||||
|
<img v-else src="@/assets/images/exts/pic.png" alt=""> |
||||||
|
{{ section.name }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="products"> |
||||||
|
<h6 class="fadeInUp">热门产品推荐</h6> |
||||||
|
<ul class="product fadeInDown"> |
||||||
|
<li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)"> |
||||||
|
<img :src="item.coverDrawing" alt="" /> |
||||||
|
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt=""> |
||||||
|
<div class="texts"> |
||||||
|
<div class="title">{{ item.productName }}</div> |
||||||
|
<div :class="['desc', { 'not-tag': !item.tagsName }]" v-html="item.productIntroduction"></div> |
||||||
|
<div v-if="item.tagsName" class="tags"> |
||||||
|
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> |
||||||
|
</div> |
||||||
|
<div class="metas"> |
||||||
|
<el-tag v-if="item.selected" type="danger" effect="dark"> |
||||||
|
官方精选 |
||||||
|
</el-tag> |
||||||
|
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 选择链接 --> |
||||||
|
<el-dialog title="请选择链接" :visible.sync="linkVisible" width="420px" center :close-on-click-modal="false"> |
||||||
|
<div v-if="withLink" class="buy"> |
||||||
|
<div v-for="(link, i) in form.mallNonAssociatedLinks" :key="i" class="link-line"> |
||||||
|
{{ link.urlName }}： |
||||||
|
<a class="url" :href="link.url" target="_blank">{{ link.url }}</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog title="" :visible.sync="qrcodeVisible" width="500px" center :top="qrcodeTop" custom-class="qrcode-dia"> |
||||||
|
<div> |
||||||
|
<img width="100%" src="@/assets/images/occupationlab.png" alt=""> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Util from "@/libs/util" |
||||||
|
import Setting from "@/setting" |
||||||
|
import Breadcrumb from '@/components/breadcrumb' |
||||||
|
import ScrollReveal from 'scrollreveal' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
routes: {}, |
||||||
|
curTab: 0, |
||||||
|
tabs: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '详情介绍' |
||||||
|
}, |
||||||
|
], |
||||||
|
form: { |
||||||
|
pics: [], |
||||||
|
classificationIds: [], |
||||||
|
mall: { |
||||||
|
coverDrawing: '' |
||||||
|
}, |
||||||
|
goodsRes: {} |
||||||
|
}, |
||||||
|
chapterList: [], |
||||||
|
hots: [], |
||||||
|
linkVisible: false, |
||||||
|
height: '', |
||||||
|
qrcodeVisible: false, |
||||||
|
qrcodeTop: '100px' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Breadcrumb, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 是否没关联产品或者产品类型是数据前瞻，并且设置了链接 |
||||||
|
withLink () { |
||||||
|
const links = this.form.mallNonAssociatedLinks |
||||||
|
const id = this.form.classificationIds |
||||||
|
return (this.form.mall.isAssociatedProduct || (id && id[0] == 5)) && links && links.length |
||||||
|
}, |
||||||
|
// 课程 |
||||||
|
isCourse () { |
||||||
|
let id = this.form.classificationIds |
||||||
|
if (id) { |
||||||
|
id = id[0] |
||||||
|
const isCourse = (id == 1 || id == 2) && this.form.mall.isAssociatedProduct === 0 |
||||||
|
this.tabs = [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '详情介绍' |
||||||
|
}, |
||||||
|
] |
||||||
|
isCourse && this.tabs.push({ |
||||||
|
id: 1, |
||||||
|
name: '课程目录' |
||||||
|
}) |
||||||
|
return isCourse |
||||||
|
} |
||||||
|
return false |
||||||
|
}, |
||||||
|
// 职站增值应用 |
||||||
|
isValueModule () { |
||||||
|
let id = this.form.classificationIds |
||||||
|
if (id) return id[0] == 3 |
||||||
|
return false |
||||||
|
}, |
||||||
|
// 数据前瞻 |
||||||
|
isDataforward () { |
||||||
|
let id = this.form.classificationIds |
||||||
|
if (id) return id[0] == 5 |
||||||
|
return false |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
const height = (window.innerHeight - 758) / 2 |
||||||
|
this.qrcodeTop = (height > 0 ? height : 0) + 'px' |
||||||
|
this.getData() |
||||||
|
this.getHot() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 产品详情 |
||||||
|
getData () { |
||||||
|
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => { |
||||||
|
const e = res.orderDetails |
||||||
|
e.pics = [e.mall.coverDrawing] |
||||||
|
if (e.mall.interfaceDiagram) { |
||||||
|
const pics = e.mall.interfaceDiagram.split(',').slice(0, 3) |
||||||
|
e.pics.push(...pics) |
||||||
|
e.interfaceDiagrams = pics |
||||||
|
} |
||||||
|
this.form = e |
||||||
|
this.routes = [ |
||||||
|
{ |
||||||
|
name: '职站商城', |
||||||
|
path: '/index', |
||||||
|
query: { |
||||||
|
id: 13, |
||||||
|
siteId: 1 |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: e.mall.productName |
||||||
|
} |
||||||
|
] |
||||||
|
this.chapterList = '' |
||||||
|
e.mall.associatedProduct && this.getChapter() |
||||||
|
this.$nextTick(() => { |
||||||
|
this.height = document.querySelector('#fields').clientHeight + 'px' |
||||||
|
this.initAnimate() |
||||||
|
}) |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 获取章节小节 |
||||||
|
async getChapter () { |
||||||
|
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct) |
||||||
|
this.chapterList = res.chapterList |
||||||
|
}, |
||||||
|
// 初始化动画 |
||||||
|
initAnimate () { |
||||||
|
const sr = ScrollReveal() |
||||||
|
sr.reveal('.animate', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
// origin: 'bottom', // 动画开始的方向 |
||||||
|
distance: '50px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
sr.reveal('.fadeInUp', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: 'top', // 动画开始的方向 |
||||||
|
distance: '100px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
sr.reveal('.fadeInDown', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: 'bottom', // 动画开始的方向 |
||||||
|
distance: '100px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
ScrollReveal().reveal('.fadeInDown0', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: 'bottom', // 动画开始的方向 |
||||||
|
distance: '150px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
ScrollReveal().reveal('.fadeInDown1', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: 'bottom', // 动画开始的方向 |
||||||
|
distance: '150px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
delay: 100, |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
ScrollReveal().reveal('.fadeInDown2', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: 'bottom', // 动画开始的方向 |
||||||
|
distance: '150px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
delay: 200, |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
sr.reveal('.fadeInLeft', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向 |
||||||
|
distance: '100px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
|
||||||
|
sr.reveal('.fadeInRight', { |
||||||
|
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） |
||||||
|
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向 |
||||||
|
distance: '100px',//移动距离 |
||||||
|
duration: 1000, // 动画持续时间 |
||||||
|
// scale: 0.8, |
||||||
|
// viewFactor: 100, |
||||||
|
}) |
||||||
|
}, |
||||||
|
// tab切换 |
||||||
|
tabChange ({ id }) { |
||||||
|
this.curTab = id |
||||||
|
document.querySelector(`#part${id}`).scrollIntoView({ |
||||||
|
behavior: 'smooth' |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 跳转播放资源 |
||||||
|
toPreview (i, j) { |
||||||
|
this.qrcodeVisible = true |
||||||
|
// this.form.goodsRes.logoOfOurSchool ? |
||||||
|
// this.$router.push(`/station/preview?courseId=${this.form.mall.associatedProduct}&curriculumName=${this.form.mall.productName}&mallId=${this.id}&chapter=${i}§ion=${j}&admin=1`) : |
||||||
|
// this.toTrail() |
||||||
|
}, |
||||||
|
// 勾选/取消勾选学习进度 |
||||||
|
studySection (item) { |
||||||
|
item.whetherToStudyOrNot ? |
||||||
|
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
||||||
|
this.getChapter() |
||||||
|
}).catch(res => { }) : |
||||||
|
this.$post(this.api.saveLearningProgress, { |
||||||
|
cid: this.form.mall.associatedProduct, |
||||||
|
projectId: item.projectId, |
||||||
|
}).then(res => { |
||||||
|
this.getChapter() |
||||||
|
}).catch(res => { }) |
||||||
|
}, |
||||||
|
// 弹框显示小程序二维码 |
||||||
|
showQrcode () { |
||||||
|
this.qrcodeVisible = true |
||||||
|
}, |
||||||
|
// 跳转实验台 |
||||||
|
toStation () { |
||||||
|
if (this.isCourse) { // 如果是课程，直接进入实验台 |
||||||
|
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => { |
||||||
|
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.productName + '&mallId=' + this.id) |
||||||
|
}).catch(res => { }) |
||||||
|
} else if (this.withLink) { // 如果没有绑定产品，并且有设置关联链接，则弹框选择链接 |
||||||
|
this.linkVisible = true |
||||||
|
} |
||||||
|
}, |
||||||
|
// 进入系统 |
||||||
|
toSystem () { |
||||||
|
this.$router.push(`/match`) |
||||||
|
}, |
||||||
|
// 热门产品 |
||||||
|
getHot () { |
||||||
|
this.$post(this.api.websiteProductList, { |
||||||
|
hotTag: 1, |
||||||
|
sort: 1, |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 2, |
||||||
|
}).then(({ page }) => { |
||||||
|
const list = page.records |
||||||
|
list.forEach(e => { |
||||||
|
// 简介去掉标签图片 |
||||||
|
const el = document.createElement('div') |
||||||
|
el.innerHTML = e.productIntroduction |
||||||
|
e.productIntroduction = el.innerText |
||||||
|
const cid = e.classificationId |
||||||
|
e.isCourse = (cid === 1 || cid === 2) && !e.isAssociatedProduct |
||||||
|
}) |
||||||
|
this.hots = list |
||||||
|
}).catch(res => { }) |
||||||
|
}, |
||||||
|
// 跳转详情 |
||||||
|
toDetail (id) { |
||||||
|
this.$router.push(`/index/show?id=${id}`) |
||||||
|
this.id = id |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.wrap { |
||||||
|
padding: 24px; |
||||||
|
background: url(../../../assets/images/product/bg1.png) 0 373px no-repeat, |
||||||
|
url(../../../assets/images/product/bg2.png) bottom right no-repeat; |
||||||
|
background-color: #f3f6fa; |
||||||
|
|
||||||
|
.inner { |
||||||
|
width: 1146px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.top { |
||||||
|
display: flex; |
||||||
|
padding: 24px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 10px; |
||||||
|
|
||||||
|
.pics { |
||||||
|
width: 484px; |
||||||
|
margin-right: 20px; |
||||||
|
|
||||||
|
.pic { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
width: 592px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 600; |
||||||
|
color: #2e2d31; |
||||||
|
} |
||||||
|
|
||||||
|
.meta { |
||||||
|
margin: 10px 0; |
||||||
|
font-size: 12px; |
||||||
|
color: #2e2d31; |
||||||
|
|
||||||
|
.val { |
||||||
|
color: #007eff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.des { |
||||||
|
margin-bottom: 15px; |
||||||
|
font-size: 14px; |
||||||
|
color: #666; |
||||||
|
line-height: 20px; |
||||||
|
@include mul-ellipsis(3); |
||||||
|
} |
||||||
|
|
||||||
|
.field { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin: 0 20px 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
color: #2e2d31; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.label { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
max-width: 160px; |
||||||
|
@include ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.fields { |
||||||
|
display: flex; |
||||||
|
// justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
height: 60px; |
||||||
|
margin: 10px 0 10px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 119px; |
||||||
|
height: 46px; |
||||||
|
color: #fff; |
||||||
|
background: #007eff; |
||||||
|
border-radius: 6px; |
||||||
|
border: 0; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
opacity: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
margin-left: 11px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tab { |
||||||
|
z-index: 100; |
||||||
|
position: sticky; |
||||||
|
top: 90px; |
||||||
|
display: flex; |
||||||
|
padding: 10px 10px 20px; |
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
li { |
||||||
|
position: relative; |
||||||
|
margin-right: 20px; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 25px; |
||||||
|
color: #0b1d30; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
bottom: -10px; |
||||||
|
left: 50%; |
||||||
|
width: 53px; |
||||||
|
height: 4px; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
&.active:after { |
||||||
|
background-color: #007eff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.course { |
||||||
|
display: flex; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
.detail { |
||||||
|
width: calc(100% - 294px); |
||||||
|
padding: 20px 24px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.courses { |
||||||
|
padding-top: 10px; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
/deep/.des { |
||||||
|
div, |
||||||
|
p, |
||||||
|
span { |
||||||
|
font-family: PingFangSC-Regular !important; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.chapters { |
||||||
|
margin-top: 16px; |
||||||
|
max-height: calc(100% - 53px); |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.chapter { |
||||||
|
padding-top: 60px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.chapterName { |
||||||
|
padding: 0 12px; |
||||||
|
margin-bottom: 15px; |
||||||
|
color: #333; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.sectionName { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 12px; |
||||||
|
font-size: 14px; |
||||||
|
color: #666; |
||||||
|
border-radius: 8px; |
||||||
|
@include ellipsis; |
||||||
|
|
||||||
|
img { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: #007eff; |
||||||
|
background: #f6fbff; |
||||||
|
} |
||||||
|
|
||||||
|
.val { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
font-size: 18px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.products { |
||||||
|
width: 270px; |
||||||
|
margin-left: 24px; |
||||||
|
|
||||||
|
&>h6 { |
||||||
|
font-size: 16px; |
||||||
|
color: #0b1d30; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.product { |
||||||
|
margin-top: 11px; |
||||||
|
|
||||||
|
li { |
||||||
|
position: relative; |
||||||
|
margin-bottom: 15px; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 10px; |
||||||
|
background-color: #fff; |
||||||
|
transition: all 0.3s; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 140px; |
||||||
|
transition: 0.3s; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.my-school { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
width: 57px; |
||||||
|
height: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.texts { |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #0b1d30; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
word-wrap: break-word; |
||||||
|
word-break: break-all; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.desc { |
||||||
|
min-height: 34px; |
||||||
|
color: #757f92; |
||||||
|
font-size: 12px; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&.not-tag { |
||||||
|
-webkit-line-clamp: 3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tags { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.tag { |
||||||
|
margin-right: 8px; |
||||||
|
color: #007eff; |
||||||
|
background-color: #f9f9f9; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.type { |
||||||
|
display: inline-block; |
||||||
|
padding: 4px 11px; |
||||||
|
font-size: 12px; |
||||||
|
color: #666; |
||||||
|
border: 1px solid #dadada; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.metas { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.meta { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
color: #b5bfd5; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 14px; |
||||||
|
max-height: 14px; |
||||||
|
margin-right: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), |
||||||
|
0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
||||||
|
|
||||||
|
img { |
||||||
|
transform: scale(1.05); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.link-line { |
||||||
|
margin: 5px 0; |
||||||
|
|
||||||
|
.url { |
||||||
|
color: #007eff; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.buy { |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.tips { |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 85%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.qrcode-dia { |
||||||
|
.el-dialog__header, |
||||||
|
.el-dialog__body { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__headerbtn .el-dialog__close { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1200px) { |
||||||
|
.wrap { |
||||||
|
.inner { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.top { |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.pics { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-image__preview { |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.course { |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.detail { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.products { |
||||||
|
width: 100%; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 480px) { |
||||||
|
.wrap { |
||||||
|
.tab { |
||||||
|
position: static; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue