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