|
|
|
@ -7,19 +7,20 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div class="right"> |
|
|
|
<h6>{{ form.mall.productName }}</h6> |
|
|
|
<h6>{{ form.mall.productName }}</h6> |
|
|
|
<div class="meta"> |
|
|
|
<div v-if="isCourse" class="meta"> |
|
|
|
共 <span class="val">48</span> 个实验项目  已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 |
|
|
|
共 <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目   |
|
|
|
|
|
|
|
已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="des" v-html="form.mall.productIntroduction"></div> |
|
|
|
<div class="des" v-html="form.mall.productIntroduction"></div> |
|
|
|
<div class="field">适用专业：{{ form.goodsRes.disciplineName }}</div> |
|
|
|
<div class="field">适用专业：{{ form.goodsRes.professionalName }}</div> |
|
|
|
<div class="fields"> |
|
|
|
<div class="fields"> |
|
|
|
<div v-if="form.mall.applicationScenario" class="field"><span class="label">适用场景：</span>{{ form.mall.applicationScenario }}</div> |
|
|
|
<div v-if="form.mall.applicationScenario" class="field"><span class="label">适用场景：</span>{{ form.mall.applicationScenario }}</div> |
|
|
|
<div v-if="form.mall.matchingCourse" class="field"><span class="label">匹配课程：</span>{{ form.mall.matchingCourse }}</div> |
|
|
|
<div v-if="form.mall.matchingCourse" class="field"><span class="label">匹配课程：</span>{{ form.mall.matchingCourse }}</div> |
|
|
|
<div v-if="form.mall.courseHours" class="field"><span class="label">预计课时：</span>{{ form.mall.courseHours }}</div> |
|
|
|
<div v-if="form.mall.courseHours" class="field"><span class="label">预计课时：</span>{{ form.mall.courseHours }}</div> |
|
|
|
<div v-if="form.goodsRes.typeName" class="field"><span class="label">产品类型：</span>{{ form.goodsRes.typeName }}</div> |
|
|
|
<div v-if="form.goodsRes.typeName" class="field"><span class="label">产品类型：</span>{{ form.goodsRes.typeName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button v-if="form.goodsRes.logoOfOurSchool" class="btn" @click="toTrail">试用体验</button> |
|
|
|
<button v-if="!form.goodsRes.logoOfOurSchool" class="btn" @click="toTrail">试用体验</button> |
|
|
|
<button v-else class="btn entry" @click="toStation">进入实验</button> |
|
|
|
<button v-else-if="isCourse || withLink" class="btn entry" @click="toStation">进入实验</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="course"> |
|
|
|
<div class="course"> |
|
|
|
@ -29,26 +30,27 @@ |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div class="courses"> |
|
|
|
<div class="courses"> |
|
|
|
<template v-if="!curTab"> |
|
|
|
<template v-if="!curTab"> |
|
|
|
<h6>课程介绍</h6> |
|
|
|
|
|
|
|
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
|
|
|
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<div v-for="(item, i) in chapterList" :key="i"> |
|
|
|
<div class="chapter" v-for="(item, i) in chapterList" :key="i"> |
|
|
|
<h6>{{ item.name }}</h6> |
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
<ul v-if="item.subsectionList.length" class="list"> |
|
|
|
<div class="section" v-if="item.subsectionList.length"> |
|
|
|
<li v-for="(section, i) in item.subsectionList" :key="i" @click="toPreview(item, section)"> |
|
|
|
<div v-for="(section, j) in item.subsectionList" :key="j" @click="toPreview(i, j)"> |
|
|
|
<p class="name"> |
|
|
|
<div class="sectionName" :title="section.name" :class="{active: curLink === `${item.name}${section.name}`}"> |
|
|
|
|
|
|
|
<div class="val"> |
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.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 === '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 === '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 === '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-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
{{ section.projectName }} |
|
|
|
{{ section.name }} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<i :class="['status', section.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item, section)"></i> |
|
|
|
<i v-if="!form.goodsRes.logoOfOurSchool" class="icon el-icon-lock"></i> |
|
|
|
</li> |
|
|
|
</div> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -61,28 +63,18 @@ |
|
|
|
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/img/my-school.png" alt=""> |
|
|
|
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/img/my-school.png" alt=""> |
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<div class="title">{{ item.productName }}</div> |
|
|
|
<div class="title">{{ item.productName }}</div> |
|
|
|
<div class="desc" v-html="item.productIntroduction"></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"> |
|
|
|
<div class="metas"> |
|
|
|
<template v-if="item.selected"> |
|
|
|
|
|
|
|
<el-tag |
|
|
|
<el-tag |
|
|
|
|
|
|
|
v-if="item.selected" |
|
|
|
type="danger" |
|
|
|
type="danger" |
|
|
|
effect="dark"> |
|
|
|
effect="dark"> |
|
|
|
官方精选 |
|
|
|
官方精选 |
|
|
|
</el-tag> |
|
|
|
</el-tag> |
|
|
|
<div class="meta">{{ item.learningCount }}学过</div> |
|
|
|
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
|
|
|
|
<div class="meta"> |
|
|
|
|
|
|
|
<img class="icon" src="@/assets/img/eye.png" alt=""> |
|
|
|
|
|
|
|
{{ item.learningCount }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="item.isAssociatedProduct === 0" class="meta"> |
|
|
|
|
|
|
|
<img class="icon" src="@/assets/img/platform.png" alt=""> |
|
|
|
|
|
|
|
平台官方 |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<span class="type">{{ item.courseType == 1 ? '付费' : '免费'}}</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
@ -90,6 +82,16 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
@ -106,19 +108,44 @@ export default { |
|
|
|
id: 0, |
|
|
|
id: 0, |
|
|
|
name: '详情介绍' |
|
|
|
name: '详情介绍' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
|
|
|
|
id: 1, |
|
|
|
|
|
|
|
name: '课程目录' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
form: { |
|
|
|
form: { |
|
|
|
|
|
|
|
classificationIds: [], |
|
|
|
mall: {}, |
|
|
|
mall: {}, |
|
|
|
goodsRes: {} |
|
|
|
goodsRes: {} |
|
|
|
}, |
|
|
|
}, |
|
|
|
chapterList: [], |
|
|
|
chapterList: [], |
|
|
|
hots: [] |
|
|
|
hots: [], |
|
|
|
|
|
|
|
linkVisible: false |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
|
|
|
|
// 是否没关联产品，并且设置了链接 |
|
|
|
|
|
|
|
withLink() { |
|
|
|
|
|
|
|
const links = this.form.mallNonAssociatedLinks |
|
|
|
|
|
|
|
return this.form.mall.isAssociatedProduct && 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 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
this.getHot() |
|
|
|
this.getHot() |
|
|
|
@ -128,37 +155,40 @@ export default { |
|
|
|
getData() { |
|
|
|
getData() { |
|
|
|
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => { |
|
|
|
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => { |
|
|
|
const e = res.orderDetails |
|
|
|
const e = res.orderDetails |
|
|
|
if (e.mall.interfaceDiagram) e.interfaceDiagrams = e.mall.interfaceDiagram.split(',') |
|
|
|
// 图片展示封面+界面图 |
|
|
|
|
|
|
|
e.interfaceDiagrams = [e.mall.coverDrawing] |
|
|
|
|
|
|
|
if (e.mall.interfaceDiagram) e.interfaceDiagrams.push(...e.mall.interfaceDiagram.split(',').slice(0, 3)) |
|
|
|
this.form = e |
|
|
|
this.form = e |
|
|
|
this.getChapter() |
|
|
|
this.chapterList = '' |
|
|
|
|
|
|
|
e.mall.associatedProduct && this.getChapter() |
|
|
|
}).catch(err => {}) |
|
|
|
}).catch(err => {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取章节小节 |
|
|
|
// 获取章节小节 |
|
|
|
async getChapter() { |
|
|
|
async getChapter() { |
|
|
|
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.form.mall.associatedProduct}`) |
|
|
|
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct) |
|
|
|
this.chapterList = res.list |
|
|
|
this.chapterList = res.chapterList |
|
|
|
}, |
|
|
|
}, |
|
|
|
// tab切换 |
|
|
|
// tab切换 |
|
|
|
tabChange({ id }) { |
|
|
|
tabChange({ id }) { |
|
|
|
this.curTab = id |
|
|
|
this.curTab = id |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 跳转播放资源 |
|
|
|
// 跳转播放资源 |
|
|
|
toPreview(item, section) { |
|
|
|
toPreview(i, j) { |
|
|
|
this.form.goodsRes.logoOfOurSchool ? |
|
|
|
this.form.goodsRes.logoOfOurSchool ? |
|
|
|
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName) : |
|
|
|
this.$router.push(`/station/preview?courseId=${this.form.mall.associatedProduct}&curriculumName=${this.form.mall.associatedProductName}&mallId=${this.id}&chapter=${i}§ion=${j}`) : |
|
|
|
this.toTrail() |
|
|
|
this.toTrail() |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 勾选/取消勾选学习进度 |
|
|
|
// 勾选/取消勾选学习进度 |
|
|
|
studySection(item) { |
|
|
|
studySection(item) { |
|
|
|
item.whetherToStudyOrNot ? |
|
|
|
item.whetherToStudyOrNot ? |
|
|
|
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
|
|
|
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
|
|
|
this.getProgress() |
|
|
|
this.getChapter() |
|
|
|
}).catch(res => {}) : |
|
|
|
}).catch(res => {}) : |
|
|
|
this.$post(this.api.saveLearningProgress, { |
|
|
|
this.$post(this.api.saveLearningProgress, { |
|
|
|
cid: this.courseId, |
|
|
|
cid: this.form.mall.associatedProduct, |
|
|
|
projectId: item.projectId, |
|
|
|
projectId: item.projectId, |
|
|
|
}).then(res => { |
|
|
|
}).then(res => { |
|
|
|
this.getProgress() |
|
|
|
this.getChapter() |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 跳转试用体验 |
|
|
|
// 跳转试用体验 |
|
|
|
@ -167,9 +197,13 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 跳转实验台 |
|
|
|
// 跳转实验台 |
|
|
|
toStation() { |
|
|
|
toStation() { |
|
|
|
|
|
|
|
if (this.isCourse) { // 如果是课程，直接进入实验台 |
|
|
|
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => { |
|
|
|
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => { |
|
|
|
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName) |
|
|
|
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName + '&mallId=' + this.id) |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => {}) |
|
|
|
|
|
|
|
} else if (this.withLink) { // 如果没有绑定产品，并且有设置关联链接，则弹框选择链接 |
|
|
|
|
|
|
|
this.linkVisible = true |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 热门产品 |
|
|
|
// 热门产品 |
|
|
|
getHot() { |
|
|
|
getHot() { |
|
|
|
@ -179,12 +213,23 @@ export default { |
|
|
|
pageNum: 1, |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 2, |
|
|
|
pageSize: 2, |
|
|
|
}).then(({ page }) => { |
|
|
|
}).then(({ page }) => { |
|
|
|
this.hots = page.records |
|
|
|
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 => {}) |
|
|
|
}).catch(res => {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 跳转详情 |
|
|
|
// 跳转详情 |
|
|
|
toDetail(id) { |
|
|
|
toDetail(id) { |
|
|
|
this.$router.push(`show?id=${id}`); |
|
|
|
this.$router.push(`show?id=${id}`) |
|
|
|
|
|
|
|
this.id = id |
|
|
|
|
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -222,6 +267,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
.right { |
|
|
|
width: 646px; |
|
|
|
width: 646px; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 24px; |
|
|
|
font-size: 24px; |
|
|
|
@ -251,12 +297,11 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.fields { |
|
|
|
.fields { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
margin: 10px 0 20px; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
margin: 10px 0 10px; |
|
|
|
.field { |
|
|
|
.field { |
|
|
|
margin-right: 50px; |
|
|
|
margin-bottom: 10px; |
|
|
|
&:last-child { |
|
|
|
|
|
|
|
margin-right: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.btn { |
|
|
|
.btn { |
|
|
|
@ -280,6 +325,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.tab { |
|
|
|
.tab { |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
|
|
|
|
margin-left: 10px; |
|
|
|
li { |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
margin-right: 20px; |
|
|
|
margin-right: 20px; |
|
|
|
@ -306,7 +352,7 @@ export default { |
|
|
|
margin-top: 20px; |
|
|
|
margin-top: 20px; |
|
|
|
.detail { |
|
|
|
.detail { |
|
|
|
width: 835px; |
|
|
|
width: 835px; |
|
|
|
padding: 20px 36px; |
|
|
|
padding: 20px 24px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 10px; |
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
|
|
|
|
@ -314,48 +360,49 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.courses { |
|
|
|
.courses { |
|
|
|
margin-top: 40px; |
|
|
|
margin-top: 40px; |
|
|
|
h6 { |
|
|
|
.chapters{ |
|
|
|
|
|
|
|
margin-top: 16px; |
|
|
|
|
|
|
|
max-height: calc(100% - 53px); |
|
|
|
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.chapter{ |
|
|
|
margin-bottom: 20px; |
|
|
|
margin-bottom: 20px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.chapterName{ |
|
|
|
|
|
|
|
padding: 0 12px; |
|
|
|
|
|
|
|
margin-bottom: 15px; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.list { |
|
|
|
.sectionName{ |
|
|
|
height: calc(100vh - 530px); |
|
|
|
position: relative; |
|
|
|
padding-right: 15px; |
|
|
|
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
li { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 12px; |
|
|
|
height: 46px; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
color: #666; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
border-radius: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
@include ellipsis; |
|
|
|
|
|
|
|
img { |
|
|
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
|
|
|
|
color: #007EFF; |
|
|
|
background: #F6FBFF; |
|
|
|
background: #F6FBFF; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.val { |
|
|
|
.name { |
|
|
|
|
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
color: #333; |
|
|
|
|
|
|
|
img { |
|
|
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.icon { |
|
|
|
.status { |
|
|
|
|
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #00c935; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.circle { |
|
|
|
|
|
|
|
width: 18px; |
|
|
|
|
|
|
|
height: 18px; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
border: 1px solid #ccc; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.products { |
|
|
|
.products { |
|
|
|
width: 270px; |
|
|
|
width: 295px; |
|
|
|
margin-left: 24px; |
|
|
|
margin-left: 24px; |
|
|
|
&>h6 { |
|
|
|
&>h6 { |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
@ -406,12 +453,13 @@ export default { |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
&.ie { |
|
|
|
&.not-tag { |
|
|
|
height: 80px; |
|
|
|
-webkit-line-clamp: 3; |
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tags { |
|
|
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
.tag { |
|
|
|
.tag { |
|
|
|
margin-right: 8px; |
|
|
|
margin-right: 8px; |
|
|
|
color: #007EFF; |
|
|
|
color: #007EFF; |
|
|
|
@ -452,4 +500,11 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.link-line { |
|
|
|
|
|
|
|
margin: 5px 0; |
|
|
|
|
|
|
|
.url { |
|
|
|
|
|
|
|
color: #007EFF; |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
