parent
2857302ae7
commit
4188d35f66
29 changed files with 1573 additions and 0 deletions
|
Before Width: | Height: | Size: 436 KiB |
|
Before Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 270 KiB |
|
Before Width: | Height: | Size: 604 KiB |
|
Before Width: | Height: | Size: 219 KiB |
|
Before Width: | Height: | Size: 285 KiB |
|
Before Width: | Height: | Size: 256 KiB |
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 330 B |
|
After Width: | Height: | Size: 243 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 244 B |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 667 B |
|
After Width: | Height: | Size: 451 B |
|
After Width: | Height: | Size: 581 B |
|
After Width: | Height: | Size: 490 B |
|
After Width: | Height: | Size: 585 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 398 B |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,842 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-carousel :interval="6000" |
||||
:height="carouselHeight"> |
||||
<template v-for="(item, i) in banners"> |
||||
<el-carousel-item :key="i"> |
||||
<div :class="['banner-item', {'cursor-pointer': item.url}]" |
||||
@click="openLink(item)"> |
||||
<img :src="item.banner" |
||||
alt="" |
||||
:style="{height: carouselHeight}"> |
||||
<!-- <img src="https://huoran.oss-cn-shenzhen.aliyuncs.com/20230726/png/1684091617063493632.png" |
||||
alt="" |
||||
:style="{height: carouselHeight}"> --> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="sub">{{ item.subheading }}</p> |
||||
</div> |
||||
</div> |
||||
</el-carousel-item> |
||||
</template> |
||||
</el-carousel> |
||||
|
||||
<div class="inner-wrap"> |
||||
<div class="inner"> |
||||
<div class="type-wrap"> |
||||
<div> |
||||
<img src="@/assets/images/hot.png" |
||||
alt=""> |
||||
<img class="m-l-5 m-r-10" |
||||
src="@/assets/images/type.png" |
||||
alt=""> |
||||
<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> |
||||
<div class="search"> |
||||
<img class="icon" |
||||
src="@/assets/images/search.png" |
||||
alt=""> |
||||
<input type="text" |
||||
placeholder="请输入产品名称" |
||||
v-model="form.productName"> |
||||
</div> |
||||
</div> |
||||
<div class="filter"> |
||||
<dl v-if="curTab == 1" |
||||
style="align-items: center;"> |
||||
<dt>学科专业</dt> |
||||
<div class="vals"> |
||||
<dd :class="{active: categoryId === ''}" |
||||
@click="catetoryClick('')">全部</dd> |
||||
<dd :class="{active: categoryId === 1}" |
||||
style="margin-right: 20px" |
||||
@click="catetoryClick(1)">不限</dd> |
||||
<div v-for="(item, i) in category" |
||||
:key="i" |
||||
:class="['category-item', {active: item.disciplineId == categoryId}]"> |
||||
<span class="name" |
||||
@click="nameClick(item, i)">{{ item.val.length ? item.name : item.categoryName }}</span> |
||||
<el-cascader :class="{active: item.disciplineId == categoryId}" |
||||
:ref="'category' + i" |
||||
v-model="item.val" |
||||
:options="item.list" |
||||
:props="{ checkStrictly: true }" |
||||
placeholder="" |
||||
@change="id => categoryChange(id, item, i)"></el-cascader> |
||||
</div> |
||||
</div> |
||||
</dl> |
||||
<dl v-if="curTab == 3"> |
||||
<dt>产品标签</dt> |
||||
<div class="vals"> |
||||
<dd :class="{active: form.tagId === ''}" |
||||
@click="filterChange('', 'tagId')">全部</dd> |
||||
<dd v-for="(item, i) in labels" |
||||
:key="i" |
||||
:class="{active: form.tagId === item.tagsId}" |
||||
@click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd> |
||||
</div> |
||||
</dl> |
||||
<template v-if="curTab == 4"> |
||||
<dl> |
||||
<dt>方案分类</dt> |
||||
<div class="vals"> |
||||
<dd :class="{active: form.productClassification === ''}" |
||||
@click="filterChange('', 'productClassification')">全部</dd> |
||||
<dd v-for="(item, i) in classifications" |
||||
:key="i" |
||||
:class="{active: form.productClassification === item.id}" |
||||
@click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>方案名称</dt> |
||||
<div class="vals"> |
||||
<dd :class="{active: form.websiteMallId === ''}" |
||||
@click="filterChange('', 'websiteMallId')">全部</dd> |
||||
<dd v-for="(item, i) in schemes" |
||||
:key="i" |
||||
:class="{active: form.websiteMallId === item.id}" |
||||
@click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd> |
||||
</div> |
||||
</dl> |
||||
</template> |
||||
<dl> |
||||
<dt>产品类型</dt> |
||||
<div class="vals"> |
||||
<dd :class="{active: form.productType === ''}" |
||||
@click="filterChange('', 'productType')">全部</dd> |
||||
<dd v-for="(item, i) in types" |
||||
:key="i" |
||||
:class="{active: form.productType === item.typeId}" |
||||
@click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>购买状态</dt> |
||||
<dd v-for="(item, i) in status" |
||||
:key="i" |
||||
:class="{active: form.purchaseStatus === item.id}" |
||||
@click="filterChange(item.id, 'purchaseStatus')">{{ item.name }}</dd> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div class="filter m-t-20"> |
||||
<dl> |
||||
<dd v-for="(item, i) in sorts" |
||||
:key="i" |
||||
:class="{active: form.sort === item.id}" |
||||
@click="filterChange(item.id, 'sort')">{{ item.name }}</dd> |
||||
<dd :class="{active: form.sort === 2 || form.sort === 5}" |
||||
@click="sort">发布时间</dd> |
||||
<span class="caret" |
||||
@click="sort"> |
||||
<i :class="['asc', {active: form.sort === 2}]"></i> |
||||
<i :class="['desc', {active: form.sort === 5}]"></i> |
||||
</span> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div class="courses"> |
||||
<template v-if="list.length"> |
||||
<ul> |
||||
<li v-for="(item, i) in list" |
||||
: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"> |
||||
<el-tooltip effect="dark" |
||||
:visible-arrow="false" |
||||
:content="item.productName" |
||||
placement="bottom"> |
||||
<div class="title">{{ item.productName }}</div> |
||||
</el-tooltip> |
||||
<div class="desc" |
||||
v-html="item.productIntroduction"></div> |
||||
<div class="tags"> |
||||
<el-tooltip v-if="item.tagsName" |
||||
class="item" |
||||
effect="dark" |
||||
:visible-arrow="false" |
||||
:content="item.tagsName" |
||||
placement="bottom"> |
||||
<div> |
||||
<el-tag v-for="(tag, i) in item.tagsName.split(',')" |
||||
:key="i" |
||||
class="tag">{{ tag }}</el-tag> |
||||
</div> |
||||
</el-tooltip> |
||||
</div> |
||||
<div :class="['metas']"> |
||||
<el-tag v-if="item.selected" |
||||
type="danger" |
||||
effect="dark"> |
||||
官方精选 |
||||
</el-tag> |
||||
<el-tag v-if="item.typeName" |
||||
effect="dark"> |
||||
{{ item.typeName }} |
||||
</el-tag> |
||||
<div v-if="item.isCourse" |
||||
class="meta">{{ item.learningCount }}人学过</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
layout="total, prev, pager, next" |
||||
:page-size="pageSize" |
||||
:total="total" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page"></el-pagination> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from "element-ui"; |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data () { |
||||
const that = this |
||||
return { |
||||
carouselHeight: '533px', |
||||
banners: [], |
||||
timer: null, |
||||
curTab: '', |
||||
tabs: [ |
||||
{ |
||||
id: '', |
||||
name: '全部' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '学科专业' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '官方精选' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '热门标签' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '解决方案' |
||||
}, |
||||
], |
||||
form: { |
||||
isShelves: 0, |
||||
hotTag: 1, |
||||
productType: '', |
||||
productName: '', |
||||
purchaseStatus: '', |
||||
sort: 0, |
||||
tagId: '', |
||||
productClassification: '', |
||||
websiteMallId: '' |
||||
}, |
||||
categoryId: '', |
||||
professionalCategoryId: '', |
||||
professionalId: '', |
||||
category: [], |
||||
labels: [], |
||||
subjectList: [], //专业学科 |
||||
professionalClassList: [], //专业类 |
||||
professionalList: [], //专业 |
||||
categoryName: '', |
||||
professionalCategoryName: '', |
||||
professionalName: '', |
||||
types: [], |
||||
classifications: [], |
||||
status: [ |
||||
{ |
||||
id: '', |
||||
name: '全部' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '已购买' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '未购买' |
||||
}, |
||||
], |
||||
sorts: [ |
||||
{ |
||||
id: 0, |
||||
name: '综合排序' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '热销排行' |
||||
}, |
||||
], |
||||
list: [], |
||||
keyword: '', |
||||
total: 0, |
||||
page: 1, |
||||
pageSize: 12, |
||||
searchTimer: null, |
||||
loadIns: null |
||||
}; |
||||
}, |
||||
watch: { |
||||
'form.productName': function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.carouselHeight = parseInt(window.innerWidth / 3.6) + 'px' |
||||
// this.getBanner() |
||||
this.getSubject() |
||||
this.getLabel() |
||||
this.getClassification() |
||||
this.getSchemes() |
||||
this.getClass() |
||||
this.initData() |
||||
}, |
||||
methods: { |
||||
// 获取banner |
||||
getBanner () { |
||||
this.$post(this.api.listMarketing, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
isOpen: 0 |
||||
}).then(({ page }) => { |
||||
this.banners = page.records |
||||
}).catch(res => { }) |
||||
}, |
||||
// 获取列表 |
||||
getData () { |
||||
this.loadIns = Loading.service() |
||||
this.$post(this.api.listOfGoods, { |
||||
...this.form, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
categoryId: this.categoryId, |
||||
professionalCategoryId: this.categoryId ? this.professionalCategoryId : '', |
||||
professionalId: this.categoryId ? this.professionalId : '', |
||||
}).then(({ page }) => { |
||||
const list = page.records |
||||
list && 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.list = list ? list : [] |
||||
this.total = page.total |
||||
this.loadIns.close() |
||||
}).catch(res => { |
||||
this.loadIns.close() |
||||
}) |
||||
}, |
||||
initData () { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
|
||||
// 获取产品标签 |
||||
getLabel () { |
||||
this.$get(this.api.tagsList).then(res => { |
||||
this.labels = res.tagsList |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取方案分类 |
||||
getClassification () { |
||||
this.$get(this.api.goodsSchemeClassification).then(({ data }) => { |
||||
this.classifications = data |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取方案名称 |
||||
getSchemes () { |
||||
this.$post(this.api.schemeList, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
}).then(({ data }) => { |
||||
this.schemes = data.records |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取学科类别 |
||||
async getSubject () { |
||||
// 学科类别 |
||||
this.$get(this.api.subjectCategoryCited).then(({ list }) => { |
||||
const result = [] |
||||
const promises = [] |
||||
list = list.filter(e => e.disciplineId != 1) |
||||
list.map((e, i) => { |
||||
// 专业类 |
||||
e.professionalClasses.map(e => { |
||||
e.value = e.professionalClassId |
||||
e.label = e.professionalClassName |
||||
|
||||
// 专业 |
||||
e.professionals.map(e => { |
||||
e.value = e.professionalId |
||||
e.label = e.professionalName |
||||
}) |
||||
e.children = e.professionals |
||||
}) |
||||
result.push({ |
||||
val: [], |
||||
disciplineId: e.disciplineId, |
||||
name: e.disciplineName, |
||||
categoryName: e.disciplineName, |
||||
list: e.professionalClasses |
||||
}) |
||||
}) |
||||
|
||||
Promise.all(promises).then(_ => { |
||||
console.log("🚀 ~ file: index.vue:378 ~ this.$get ~ result:", result) |
||||
this.category = result |
||||
}) |
||||
}).catch(err => { }) |
||||
}, |
||||
nameClick (item, i) { |
||||
this.categoryId = item.disciplineId |
||||
this.professionalCategoryId = '' |
||||
this.professionalId = '' |
||||
this.$refs['category' + i][0].toggleDropDownVisible() |
||||
this.clearCategory() |
||||
this.initData() |
||||
}, |
||||
// 清除所有学科所选 |
||||
clearCategory () { |
||||
const list = this.category |
||||
list.map(e => { |
||||
e.val = [] |
||||
}) |
||||
}, |
||||
categoryChange (val, item, i) { |
||||
const name = this.$refs['category' + i][0].getCheckedNodes()[0].pathLabels |
||||
console.log("🚀 ~ file: index.vue:431 ~ categoryChange ~ val, item:", val, item, name) |
||||
item.name = item.categoryName + '/' + name.join('/') |
||||
this.clearCategory() |
||||
item.val = val |
||||
this.categoryId = item.disciplineId |
||||
this.professionalCategoryId = val[0] || '' |
||||
this.professionalId = val[1] || '' |
||||
this.initData() |
||||
}, |
||||
// 返回学科name |
||||
handleCategoryName () { |
||||
if (this.subjectList.length) { |
||||
const id = this.categoryId |
||||
const list = this.subjectList |
||||
if (list.length) { |
||||
if (id === '' || id === 1) { |
||||
this.categoryName = list[0].disciplineName |
||||
} else { |
||||
const item = list.find(e => e.disciplineId == id) |
||||
this.categoryName = item ? item.disciplineName : '' |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (this.professionalClassList.length) { |
||||
const id = this.professionalCategoryId |
||||
const list = this.professionalClassList |
||||
if (list.length) { |
||||
if (id === '' || id === 1) { |
||||
this.professionalCategoryName = list[0].professionalClassName |
||||
} else { |
||||
const item = list.find(e => e.professionalClassId == id) |
||||
this.professionalCategoryName = item ? item.professionalClassName : '' |
||||
} |
||||
} |
||||
} |
||||
if (this.professionalList.length) { |
||||
const id = this.professionalId |
||||
const list = this.professionalList |
||||
if (list.length) { |
||||
if (id === '' || id === 1) { |
||||
this.professionalName = list[0].professionalName |
||||
} else { |
||||
const item = list.find(e => e.professionalId == id) |
||||
this.professionalName = item ? item.professionalName : '' |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
// 学科点击回调 |
||||
catetoryClick (id) { |
||||
this.categoryId = id |
||||
this.professionalCategoryId = id |
||||
this.professionalId = id |
||||
this.clearCategory() |
||||
this.initData() |
||||
}, |
||||
// 获取产品类型 |
||||
getClass () { |
||||
this.$get(this.api.productTypeList).then(res => { |
||||
this.types = res.typeList |
||||
}).catch(err => { }) |
||||
}, |
||||
// banner点击 |
||||
openLink (item) { |
||||
item.url && window.open(item.url) |
||||
}, |
||||
// tab切换 |
||||
tabChange ({ id }) { |
||||
this.curTab = id |
||||
this.form.hotTag = 1 |
||||
this.form.selection = '' |
||||
this.form.tagId = '' |
||||
this.form.productClassification = '' |
||||
this.form.websiteMallId = '' |
||||
if (id === 3) { |
||||
this.form.hotTag = 2 |
||||
} else if (id === 2) { |
||||
this.form.selection = 1 |
||||
} |
||||
this.initData() |
||||
}, |
||||
// 类型切换 |
||||
filterChange (id, prop) { |
||||
this.form[prop] = id |
||||
this.initData() |
||||
}, |
||||
// 发布时间排序 |
||||
sort () { |
||||
this.form.sort = this.form.sort === 2 ? 5 : 2 |
||||
this.initData() |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
// 跳转详情 |
||||
toDetail (id) { |
||||
this.$router.push(`show?id=${id}`); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
margin: -24px; |
||||
.banner-item { |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 188px; |
||||
color: #fff; |
||||
transform: translateY(-50%); |
||||
} |
||||
h6 { |
||||
margin-bottom: 25px; |
||||
font-size: 44px; |
||||
} |
||||
.sub { |
||||
font-size: 22px; |
||||
} |
||||
} |
||||
.inner-wrap { |
||||
padding: 18px 0; |
||||
background: url(../../../assets/images/product/bg1.png) 0 159px no-repeat, |
||||
url(../../../assets/images/product/bg2.png) bottom right no-repeat; |
||||
background-color: #f3f6fa; |
||||
} |
||||
.inner { |
||||
width: 1146px; |
||||
margin: 0 auto; |
||||
} |
||||
.type-wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 18px; |
||||
.left { |
||||
display: inline-flex; |
||||
} |
||||
.tab { |
||||
display: inline-flex; |
||||
li { |
||||
position: relative; |
||||
margin: 0 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: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.search { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 410px; |
||||
height: 48px; |
||||
padding: 0 18px; |
||||
background-color: #fff; |
||||
border-radius: 31px; |
||||
input { |
||||
height: 40px; |
||||
margin-left: 7px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
border: 0; |
||||
outline: none !important; |
||||
} |
||||
} |
||||
.filter { |
||||
padding: 5px 30px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
dl { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin: 20px 0; |
||||
dt { |
||||
min-width: 60px; |
||||
padding: 5px 0; |
||||
margin-right: 30px; |
||||
color: #666; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
white-space: nowrap; |
||||
} |
||||
dd { |
||||
padding: 5px 15px; |
||||
color: #333; |
||||
font-size: 14px; |
||||
white-space: nowrap; |
||||
cursor: pointer; |
||||
&.active { |
||||
font-weight: 600; |
||||
color: #9278ff; |
||||
} |
||||
} |
||||
.category { |
||||
margin: 5px 10px 0; |
||||
} |
||||
/deep/.category-item { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 20px; |
||||
.name { |
||||
position: relative; |
||||
font-size: 14px; |
||||
color: #333; |
||||
cursor: pointer; |
||||
& + .el-cascader { |
||||
width: 30px; |
||||
} |
||||
} |
||||
&.active { |
||||
.name { |
||||
color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
/deep/.el-cascader { |
||||
width: auto; |
||||
.el-input { |
||||
.el-input__inner { |
||||
font-size: 14px; |
||||
color: #333; |
||||
border: 0; |
||||
} |
||||
} |
||||
&.active { |
||||
.el-input .el-input__inner { |
||||
color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.vals { |
||||
display: inline-flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
width: 920px; |
||||
} |
||||
.caret { |
||||
position: absolute; |
||||
top: 4px; |
||||
left: 250px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
i { |
||||
position: absolute; |
||||
width: 0; |
||||
height: 0; |
||||
border: 5px solid transparent; |
||||
} |
||||
.asc { |
||||
top: 0; |
||||
border-bottom-color: #c0c4cc; |
||||
&.active { |
||||
border-bottom-color: #409eff; |
||||
} |
||||
} |
||||
.desc { |
||||
top: 12px; |
||||
border-top-color: #c0c4cc; |
||||
&.active { |
||||
border-top-color: #409eff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.courses { |
||||
position: relative; |
||||
margin-top: 24px; |
||||
ul { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 66px) / 4); |
||||
min-height: 250px; |
||||
margin: 0 22px 22px 0; |
||||
cursor: pointer; |
||||
border-radius: 10px; |
||||
background-color: #fff; |
||||
transition: all 0.3s; |
||||
overflow: hidden; |
||||
&:nth-child(4n) { |
||||
margin-right: 0; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 140px; |
||||
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; |
||||
} |
||||
.tags { |
||||
height: 24px; |
||||
margin-top: 10px; |
||||
overflow: hidden; |
||||
} |
||||
.tag { |
||||
margin-right: 8px; |
||||
color: #9278ff; |
||||
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; |
||||
&.not-selected { |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
.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); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 1500px) { |
||||
.wrap { |
||||
.banner-item { |
||||
h6 { |
||||
font-size: 35px; |
||||
} |
||||
.sub { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,687 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<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> |
||||
</div> |
||||
</el-card> |
||||
<div class="inner"> |
||||
<div class="top"> |
||||
<div class="pics" |
||||
v-if="form.mall.coverDrawing"> |
||||
<el-image :class="['cover', {full: !form.interfaceDiagrams}]" |
||||
:src="form.mall.coverDrawing" |
||||
:preview-src-list="form.pics"> |
||||
</el-image> |
||||
<div v-if="form.interfaceDiagrams" |
||||
class="interface"> |
||||
<div class="pic" |
||||
v-for="(pic, i) in form.interfaceDiagrams" |
||||
:key="i"> |
||||
<el-image :src="pic" |
||||
:preview-src-list="form.pics"> |
||||
</el-image> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right" |
||||
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="!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"> |
||||
<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"> |
||||
<template v-if="!curTab"> |
||||
<div class="des" |
||||
v-html="form.mall.detailedIntroduction"></div> |
||||
</template> |
||||
<template v-else> |
||||
<div class="chapter" |
||||
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" |
||||
:class="{active: curLink === `${item.name}${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> |
||||
<i v-if="!form.goodsRes.logoOfOurSchool" |
||||
class="icon el-icon-lock"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<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/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> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Util from "@/libs/util" |
||||
import Setting from "@/setting" |
||||
export default { |
||||
data () { |
||||
return { |
||||
id: this.$route.query.id, |
||||
curTab: 0, |
||||
tabs: [ |
||||
{ |
||||
id: 0, |
||||
name: '详情介绍' |
||||
}, |
||||
], |
||||
form: { |
||||
classificationIds: [], |
||||
mall: { |
||||
coverDrawing: '' |
||||
}, |
||||
goodsRes: {} |
||||
}, |
||||
chapterList: [], |
||||
hots: [], |
||||
linkVisible: false, |
||||
height: '' |
||||
}; |
||||
}, |
||||
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 () { |
||||
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.chapterList = '' |
||||
e.mall.associatedProduct && this.getChapter() |
||||
this.$nextTick(() => { |
||||
this.height = document.querySelector('#fields').clientHeight + 'px' |
||||
}) |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取章节小节 |
||||
async getChapter () { |
||||
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct) |
||||
this.chapterList = res.chapterList |
||||
}, |
||||
// tab切换 |
||||
tabChange ({ id }) { |
||||
this.curTab = id |
||||
}, |
||||
// 跳转播放资源 |
||||
toPreview (i, j) { |
||||
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 => { }) |
||||
}, |
||||
// 跳转试用体验 |
||||
toTrail () { |
||||
window.open('https://f.wps.cn/g/0sJLI4NA/') |
||||
}, |
||||
// 跳转实验台 |
||||
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.listOfGoods, { |
||||
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(`show?id=${id}`) |
||||
this.id = id |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 24px; |
||||
margin: -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 { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 502px; |
||||
margin-right: 20px; |
||||
.cover { |
||||
width: 370px; |
||||
height: 278px; |
||||
margin-right: 10px; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
&.full { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 114px; |
||||
height: 86px; |
||||
margin-bottom: 10px; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
.el-image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
.tab { |
||||
display: inline-flex; |
||||
margin-left: 10px; |
||||
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: 835px; |
||||
padding: 20px 24px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
.courses { |
||||
margin-top: 40px; |
||||
/deep/.des { |
||||
div, |
||||
p, |
||||
span { |
||||
font-family: PingFangSC-Regular !important; |
||||
} |
||||
} |
||||
.chapters { |
||||
margin-top: 16px; |
||||
max-height: calc(100% - 53px); |
||||
overflow: auto; |
||||
} |
||||
.chapter { |
||||
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; |
||||
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: 295px; |
||||
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; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,27 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "product-"; |
||||
|
||||
export default { |
||||
path: "/product", |
||||
name: "product", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `list`, |
||||
component: () => import("@/pages/product/list"), |
||||
meta: { title: "产品中心" } |
||||
}, |
||||
{ |
||||
path: `show`, |
||||
component: () => import("@/pages/product/show"), |
||||
meta: { title: "产品详情" } |
||||
}, |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue