|
|
|
|
@ -1,141 +1,87 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="$router.push('list')" |
|
|
|
|
:content="form.mall.productName"></el-page-header> |
|
|
|
|
<el-page-header @back="$router.push('list')" :content="form.mall.productName"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="top"> |
|
|
|
|
<el-carousel class="pics" |
|
|
|
|
: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"> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="item" /> |
|
|
|
|
<el-carousel class="pics" :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"> |
|
|
|
|
<img class="pic" :src="item" /> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> |
|
|
|
|
<div class="right" |
|
|
|
|
id="fields"> |
|
|
|
|
<div class="right" 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/img/product/1.png" |
|
|
|
|
alt=""> 适用专业： |
|
|
|
|
<el-tooltip class="text" |
|
|
|
|
effect="dark" |
|
|
|
|
:visible-arrow="false" |
|
|
|
|
:content="form.goodsRes.professionalName" |
|
|
|
|
placement="bottom"> |
|
|
|
|
<img src="@/assets/img/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/img/product/2.png" |
|
|
|
|
alt=""> 适用场景： |
|
|
|
|
<div v-if="form.mall.applicationScenario" class="field"> |
|
|
|
|
<img src="@/assets/img/product/2.png" alt=""> 适用场景： |
|
|
|
|
<div class="text">{{ form.mall.applicationScenario }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.mall.matchingCourse" |
|
|
|
|
class="field"> |
|
|
|
|
<img src="@/assets/img/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/img/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/img/product/4.png" |
|
|
|
|
alt=""> 预计课时： |
|
|
|
|
<div v-if="form.mall.courseHours" class="field"> |
|
|
|
|
<img src="@/assets/img/product/4.png" alt=""> 预计课时： |
|
|
|
|
<div class="text">{{ form.mall.courseHours }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.goodsRes.typeName" |
|
|
|
|
class="field"> |
|
|
|
|
<img src="@/assets/img/product/5.png" |
|
|
|
|
alt=""> 产品类型： |
|
|
|
|
<div v-if="form.goodsRes.typeName" class="field"> |
|
|
|
|
<img src="@/assets/img/product/5.png" alt=""> 产品类型： |
|
|
|
|
<div class="text">{{ form.goodsRes.typeName }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<button v-if="!form.goodsRes.logoOfOurSchool" |
|
|
|
|
class="btn" |
|
|
|
|
@click="toTrail">试用体验</button> |
|
|
|
|
<button v-else-if="isCourse || withLink" |
|
|
|
|
class="btn entry" |
|
|
|
|
@click="toStation">进入{{ isDataforward ? '系统' : '实验' }}</button> |
|
|
|
|
<button v-else-if="isValueModule" |
|
|
|
|
class="btn entry" |
|
|
|
|
@click="toSystem">进入系统</button> |
|
|
|
|
<button v-if="!form.goodsRes.logoOfOurSchool" class="btn" @click="toTrail">试用体验</button> |
|
|
|
|
<button v-else-if="isCourse || withLink" class="btn entry" @click="toStation">进入{{ isDataforward ? '系统' : '实验' |
|
|
|
|
}}</button> |
|
|
|
|
<button v-else-if="isValueModule" class="btn entry" @click="toSystem">进入系统</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="course" |
|
|
|
|
id="part0"> |
|
|
|
|
<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> |
|
|
|
|
<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 v-if="isCourse" |
|
|
|
|
class="chapter" |
|
|
|
|
id="part1" |
|
|
|
|
v-for="(item, i) in chapterList" |
|
|
|
|
:key="i"> |
|
|
|
|
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
|
|
|
|
<div v-if="isCourse" 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" |
|
|
|
|
@click="toPreview(i, 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" @click="toPreview(i, j)"> |
|
|
|
|
<div class="sectionName" :title="section.name"> |
|
|
|
|
<div class="val"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" |
|
|
|
|
src="@/assets/img/exts/ppt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" |
|
|
|
|
src="@/assets/img/exts/video.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" |
|
|
|
|
src="@/assets/img/exts/txt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" |
|
|
|
|
src="@/assets/img/exts/pdf.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else |
|
|
|
|
src="@/assets/img/exts/pic.png" |
|
|
|
|
alt=""> |
|
|
|
|
src="@/assets/img/exts/word.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
|
{{ section.name }} |
|
|
|
|
</div> |
|
|
|
|
<i v-if="!form.goodsRes.logoOfOurSchool && j" |
|
|
|
|
class="icon el-icon-lock"></i> |
|
|
|
|
<i v-if="!form.goodsRes.logoOfOurSchool && j" class="icon el-icon-lock"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -145,33 +91,20 @@ |
|
|
|
|
<div class="products"> |
|
|
|
|
<h6>热门产品推荐</h6> |
|
|
|
|
<ul class="product"> |
|
|
|
|
<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/img/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/img/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> |
|
|
|
|
@ -181,20 +114,11 @@ |
|
|
|
|
</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> |
|
|
|
|
@ -334,13 +258,18 @@ export default { |
|
|
|
|
window.open('https://www.wjx.top/vm/wFCPCFp.aspx') |
|
|
|
|
}, |
|
|
|
|
// 跳转实验台 |
|
|
|
|
toStation () { |
|
|
|
|
async 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 + '&admin=1') |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
await this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`) |
|
|
|
|
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.productName + '&mallId=' + this.id + '&admin=1') |
|
|
|
|
} else if (this.withLink) { // 如果没有绑定产品，并且有设置关联链接，则弹框选择链接 |
|
|
|
|
this.linkVisible = true |
|
|
|
|
const links = this.form.mallNonAssociatedLinks |
|
|
|
|
// 链接只有一条，则直接进入 |
|
|
|
|
if (links.length === 1) { |
|
|
|
|
window.open(links[0].url) |
|
|
|
|
} else { |
|
|
|
|
this.linkVisible = true |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 进入系统 |
|
|
|
|
@ -379,295 +308,350 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap { |
|
|
|
|
padding: 24px; |
|
|
|
|
margin: -24px; |
|
|
|
|
background: url(../../../assets/img/product/bg1.png) 0 373px no-repeat, url(../../../assets/img/product/bg2.png) bottom right no-repeat; |
|
|
|
|
background-color: #f3f6fa; |
|
|
|
|
|
|
|
|
|
.inner { |
|
|
|
|
width: 1146px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top { |
|
|
|
|
display: flex; |
|
|
|
|
padding: 24px; |
|
|
|
|
margin: -24px; |
|
|
|
|
background: url(../../../assets/img/product/bg1.png) 0 373px no-repeat, url(../../../assets/img/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: #64c25a; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
border: 0; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.9; |
|
|
|
|
} |
|
|
|
|
&:first-child { |
|
|
|
|
margin-left: 11px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.entry { |
|
|
|
|
background: #007eff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 592px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.tab { |
|
|
|
|
z-index: 100; |
|
|
|
|
position: sticky; |
|
|
|
|
top: 0; |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
.courses { |
|
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
|
|
.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: #64c25a; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
border: 0; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-left: 11px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.entry { |
|
|
|
|
background: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tab { |
|
|
|
|
z-index: 100; |
|
|
|
|
position: sticky; |
|
|
|
|
top: 0; |
|
|
|
|
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: PingFang SC !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sectionName { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
padding: 12px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #666; |
|
|
|
|
cursor: pointer; |
|
|
|
|
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: 155px; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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: PingFang SC !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
.sectionName { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
padding: 12px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #666; |
|
|
|
|
cursor: pointer; |
|
|
|
|
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: 155px; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
