|
|
|
|
@ -1,126 +1,78 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<Breadcrumb ref="breadcrumb" |
|
|
|
|
:data.sync="routes" /> |
|
|
|
|
<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-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"> |
|
|
|
|
<div class="right fadeInRight" id="fields"> |
|
|
|
|
<h6>{{ form.mall.productName }}</h6> |
|
|
|
|
<div v-if="isCourse" |
|
|
|
|
class="meta"> |
|
|
|
|
<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="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"> |
|
|
|
|
<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 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 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 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 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> |
|
|
|
|
<button v-if="!GTA" class="btn" @click="showQrcode">会员价采购</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="course" |
|
|
|
|
id="part0"> |
|
|
|
|
<div class="course" id="part0"> |
|
|
|
|
<div class="detail"> |
|
|
|
|
<ul class="tab fadeInDown"> |
|
|
|
|
<li v-for="(tab, i) in tabs" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: curTab === tab.id}" |
|
|
|
|
@click="tabChange(tab)">{{ tab.name }}</li> |
|
|
|
|
<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 fadeInUp"> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="form.mall.detailedIntroduction"></div> |
|
|
|
|
<div class="chapter" |
|
|
|
|
id="part1" |
|
|
|
|
v-for="(item, i) in chapterList" |
|
|
|
|
:key="i"> |
|
|
|
|
<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="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-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=""> |
|
|
|
|
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> |
|
|
|
|
@ -132,33 +84,20 @@ |
|
|
|
|
<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=""> |
|
|
|
|
<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 :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 v-if="item.selected" type="danger" effect="dark"> |
|
|
|
|
官方精选 |
|
|
|
|
</el-tag> |
|
|
|
|
<div v-if="item.isCourse" |
|
|
|
|
class="meta">{{ item.learningCount }}人学过</div> |
|
|
|
|
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
@ -168,34 +107,18 @@ |
|
|
|
|
</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"> |
|
|
|
|
<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> |
|
|
|
|
<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"> |
|
|
|
|
<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=""> |
|
|
|
|
<img width="100%" src="@/assets/images/occupationlab.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -476,352 +399,421 @@ export default { |
|
|
|
|
|
|
|
|
|
<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: 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; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
|
|
.pics { |
|
|
|
|
width: 484px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 592px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.tab { |
|
|
|
|
z-index: 100; |
|
|
|
|
position: sticky; |
|
|
|
|
top: 20px; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
font-size: 24px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2e2d31; |
|
|
|
|
} |
|
|
|
|
.course { |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
.detail { |
|
|
|
|
width: calc(100% - 294px); |
|
|
|
|
padding: 20px 24px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.courses { |
|
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
|
|
.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: 14px; |
|
|
|
|
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; |
|
|
|
|
/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; |
|
|
|
|
} |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.products { |
|
|
|
|
width: 270px; |
|
|
|
|
margin-left: 24px; |
|
|
|
|
& > h6 { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&: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; |
|
|
|
|
} |
|
|
|
|
margin: 5px 0; |
|
|
|
|
|
|
|
|
|
.url { |
|
|
|
|
color: #007eff; |
|
|
|
|
text-decoration: underline; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.buy { |
|
|
|
|
text-align: center; |
|
|
|
|
.tips { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 85%; |
|
|
|
|
} |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
.wrap { |
|
|
|
|
.tab { |
|
|
|
|
position: static; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
