提交 6e505570 authored 作者: 王鹏飞's avatar 王鹏飞

新增公开课栏目

上级 be3c8326
......@@ -33,7 +33,8 @@ export default {
name: '最新动态',
children: [
{ name: '热点新闻', path: '/news/hot' },
{ name: '教授采访', path: '/news/interview' }
{ name: '教授采访', path: '/news/interview' },
{ name: '公开课', path: '/news/lesson' }
]
},
{
......
......@@ -3,11 +3,14 @@
<template v-if="!isMobile">
<div class="alumni-content max-width">
<card :title="$t('home.course.title')">
<template #header-aside>
<nuxt-link to="/news/lesson">{{ $t('viewMore') }}</nuxt-link>
</template>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<app-link :data="item" :to="`/news/lesson/${item.id}`">
<img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div>
</app-link>
......@@ -20,11 +23,14 @@
</template>
<template v-else>
<card :title="$t('home.course.title')">
<template #header-aside>
<nuxt-link to="/news/lesson">{{ $t('viewMore') }}</nuxt-link>
</template>
<van-swipe class="my-swipe" :loop="true" :autoplay="5000" :show-indicators="false">
<template v-for="(item, index) in listData">
<van-swipe-item :key="index">
<div class="case">
<app-link :data="item" :to="`/news/hot/${item.id}`">
<app-link :data="item" :to="`/news/lesson/${item.id}`">
<img :src="item.web_img_uri" class="case-pic" />
<p class="case-title">{{ item.title }}</p>
</app-link>
......
......@@ -69,7 +69,8 @@ export default {
path: '/news/hot',
childern: [
{ name: this.$t('menu.newsChild.hot'), path: '/news/hot' },
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' }
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' },
{ name: '公开课', path: '/news/lesson' }
]
},
{
......
<template>
<div>
<div v-if="listData.length">
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
......@@ -38,7 +38,6 @@ export default {
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
console.log(res.data.data)
return res.data.data
})
},
......
......@@ -37,6 +37,10 @@ export default {
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
},
......
......@@ -22,6 +22,10 @@ export default {
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
}
......
......@@ -38,6 +38,10 @@ export default {
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
},
......
......@@ -22,6 +22,10 @@ export default {
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
}
......@@ -42,4 +46,3 @@ export default {
}
}
</script>
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
import recommend from '@/components/recommend'
export default {
layout: 'normal',
components: {
appFrame,
recommend
},
data() {
return {
frameParams: {
slider: [
{
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
},
data: {},
listData: []
}
},
async fetch() {
this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
return res.data
})
},
methods: {
formatDate(value) {
const date = new Date(value * 1000)
console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
::v-deep {
img {
max-width: 100%;
height: auto !important;
}
}
.is-pc {
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
}
.is-h5 {
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 0.25rem 0.25rem 0.47rem;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 0.14rem;
color: #999999;
}
}
.times {
font-size: 0.14rem;
line-height: 100%;
margin: 0.17rem 0 0.08rem;
color: #999999;
}
.titles {
font-size: 0.18rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 0.05rem;
// line-height: 100%;
}
.article-content {
padding-top: 0.13rem;
font-size: 0.12rem;
line-height: 0.14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 0.2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 0.17rem;
.titles {
display: flex;
align-items: center;
.line {
width: 0.03rem;
height: 0.11rem;
background: #aa1941;
}
.text {
font-size: 0.16rem;
color: #333333;
margin-left: 0.05rem;
}
}
.list-box {
margin-top: 0.25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: 0.92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.14rem;
line-height: 0.13rem;
color: #333333;
margin-top: 0.05rem;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 0.82rem;
height: 0.2rem;
border: 1px solid #d3d3d3;
border-radius: 0.04rem;
line-height: 0.2re;
text-align: center;
font-size: 0.14rem;
color: #999999;
margin: 0.25rem auto 0;
cursor: pointer;
}
}
}
</style>
<template>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: { appFrame, ArticleList },
data() {
return {
frameParams: {
banner: 'https://webapp-pub.ezijing.com/project/kelley/news-banner.png',
slider: [
{
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
},
{
name: this.$t('menu.newsChild.interview'),
path: '/news/interview'
},
{
name: '公开课',
path: '/news/lesson'
}
]
}
}
},
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_publish_class' }
},
to(item) {
return `/news/lesson/${item.id}`
}
}
}
},
methods: {}
}
</script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论