Skip to content

P
project-www-pc
提交 d5912c44 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

校友寄语\公开课\校友故事修改

上级 97420138
隐藏空白字符变更
内嵌 并排
正在显示 包含 1138 行增加 和 22 行删除
components/Head.vue
浏览文件 @ d5912c44
...@@ -104,6 +104,16 @@ export default { ...@@ -104,6 +104,16 @@ export default {
isShow: false, isShow: false,
path: '/about/news' path: '/about/news'
}, },
{
name: this.$t('menu.aboutChild.msg'),
isShow: false,
path: '/about/message'
},
{
name: this.$t('menu.aboutChild.openLesson'),
isShow: false,
path: '/about/lesson'
},
{ {
name: this.$t('menu.aboutChild.contact'), name: this.$t('menu.aboutChild.contact'),
isShow: false, isShow: false,
...@@ -252,6 +262,11 @@ export default { ...@@ -252,6 +262,11 @@ export default {
name: this.$t('menu.alumniChild.alumni'), name: this.$t('menu.alumniChild.alumni'),
isShow: false, isShow: false,
path: '/alumnus' path: '/alumnus'
},
{
name: this.$t('menu.alumniChild.alumniStory'),
isShow: false,
path: '/alumnus/story'
} }
] ]
}, },
......
components/about/tabNav.vue
浏览文件 @ d5912c44
...@@ -32,6 +32,16 @@ export default { ...@@ -32,6 +32,16 @@ export default {
goPath: '/about/news', goPath: '/about/news',
pathActive: ['/about/news', '/about/news-detail'] pathActive: ['/about/news', '/about/news-detail']
}, },
{
name: this.$t('menu.aboutChild.msg'),
goPath: '/about/message',
pathActive: ['/about/message', '/about/message-detail']
},
{
name: this.$t('menu.aboutChild.openLesson'),
goPath: '/about/lesson',
pathActive: ['/about/lesson', '/about/lesson-detail']
},
{ {
name: this.$t('menu.aboutChild.contact'), name: this.$t('menu.aboutChild.contact'),
goPath: '/about/contact', goPath: '/about/contact',
......
components/alumnus/tabNav.vue
浏览文件 @ d5912c44
...@@ -2,12 +2,14 @@ ...@@ -2,12 +2,14 @@
<ul class="tab-content"> <ul class="tab-content">
<li <li
v-for="(item, index) in dataNav" v-for="(item, index) in dataNav"
:class="item.pathActive.findIndex(path => { :class="
return path === $route.path item.pathActive.findIndex(path => {
}) !== -1 && 'active'" return path === $route.path
}) !== -1 && 'active'
"
:key="index" :key="index"
@click="goPage(item.goPath)" @click="goPage(item.goPath)"
> >
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
...@@ -21,12 +23,16 @@ export default { ...@@ -21,12 +23,16 @@ export default {
name: this.$t('alumni.title'), name: this.$t('alumni.title'),
goPath: '/alumnus', goPath: '/alumnus',
pathActive: ['/alumnus'] pathActive: ['/alumnus']
},
{
name: this.$t('menu.alumniChild.alumniStory'),
goPath: '/alumnus/story',
pathActive: ['/alumnus/story']
} }
] ]
} }
}, },
mounted() { mounted() {},
},
methods: { methods: {
goPage(path) { goPage(path) {
this.$router.push({ this.$router.push({
...@@ -37,13 +43,13 @@ export default { ...@@ -37,13 +43,13 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-content{ .tab-content {
width: 160px; width: 160px;
height: 110px; height: fit-content;
background: #fff; background: #fff;
padding-top: 35px; padding-top: 35px;
padding-bottom: 43px; padding-bottom: 43px;
li{ li {
position: relative; position: relative;
width: 100%; width: 100%;
height: 40px; height: 40px;
...@@ -53,12 +59,12 @@ export default { ...@@ -53,12 +59,12 @@ export default {
color: #777777; color: #777777;
margin-bottom: 60px; margin-bottom: 60px;
cursor: pointer; cursor: pointer;
&:last-child{ &:last-child {
margin: 0; margin: 0;
} }
&.active{ &.active {
color: rgba(170, 25, 65, 1); color: rgba(170, 25, 65, 1);
&::after{ &::after {
content: ''; content: '';
width: 8px; width: 8px;
height: 40px; height: 40px;
...@@ -70,4 +76,4 @@ export default { ...@@ -70,4 +76,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
components/home/alumniStories.vue
浏览文件 @ d5912c44
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<app-link :item="{ <app-link :item="{
news: { news: {
data: item, data: item,
path: '/about/news' path: '/alumnus/story'
} }
}"> }">
<img :src="item.web_img_uri"> <img :src="item.web_img_uri">
......
components/home/headmasterMsg.vue
浏览文件 @ d5912c44
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="line"></div> <div class="line"></div>
<div class="text">{{ $t('home.msg.title') }}</div> <div class="text">{{ $t('home.msg.title') }}</div>
</div> </div>
<div class="right-text" @click="$router.push({ path: '/about/news', query: { type: 'img_text_school' } })"> <div class="right-text" @click="$router.push({ path: '/about/message', query: { type: 'img_text_school' } })">
{{ $t('viewMore') }} {{ $t('viewMore') }}
</div> </div>
</div> </div>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }"> <app-link :item="{ news: { data: item, path: '/about/message' } }">
<img :src="item.web_img_uri"> <img :src="item.web_img_uri">
</app-link> </app-link>
</div> </div>
......
components/home/openClass.vue
浏览文件 @ d5912c44
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="line"></div> <div class="line"></div>
<div class="text">{{ $t('home.openLesson.title') }}</div> <div class="text">{{ $t('home.openLesson.title') }}</div>
</div> </div>
<div class="right-text" @click="$router.push({ path: '/about/news', query: { type: 'article_publish_class' } })"> <div class="right-text" @click="$router.push({ path: '/about/lesson', query: { type: 'article_publish_class' } })">
{{ $t('viewMore') }} {{ $t('viewMore') }}
</div> </div>
</div> </div>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<app-link :item="{ <app-link :item="{
news: { news: {
data: listData.first, data: listData.first,
path: '/about/news' path: '/about/lesson'
} }
}"> }">
<img :src="listData.first.web_img_uri" alt="" class="banner"> <img :src="listData.first.web_img_uri" alt="" class="banner">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<app-link :item="{ <app-link :item="{
news: { news: {
data: item, data: item,
path: '/about/news' path: '/about/lesson'
} }
}"> }">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
......
langs/en-US.js
浏览文件 @ d5912c44
...@@ -9,6 +9,8 @@ export default { ...@@ -9,6 +9,8 @@ export default {
about: 'ZIJING PROFILE', about: 'ZIJING PROFILE',
culture: 'CULTURAL PHILOSOPHY', culture: 'CULTURAL PHILOSOPHY',
news: 'NEWS', news: 'NEWS',
msg: 'President’s Message',
openLesson: 'Open Lesson',
contact: 'CONTACT US' contact: 'CONTACT US'
}, },
servicesChild: { servicesChild: {
...@@ -53,7 +55,8 @@ export default { ...@@ -53,7 +55,8 @@ export default {
} }
}, },
alumniChild: { alumniChild: {
alumni: 'ALUMNI' alumni: 'ALUMNI',
alumniStory: 'Alumni Spotlight'
} }
}, },
home: { home: {
......
langs/zh-CN.js
浏览文件 @ d5912c44
...@@ -9,6 +9,8 @@ export default { ...@@ -9,6 +9,8 @@ export default {
about: '紫荆简介', about: '紫荆简介',
culture: '文化理念', culture: '文化理念',
news: '新闻中心', news: '新闻中心',
msg: '校长寄语',
openLesson: '公开课',
contact: '联系我们' contact: '联系我们'
}, },
servicesChild: { servicesChild: {
...@@ -53,7 +55,8 @@ export default { ...@@ -53,7 +55,8 @@ export default {
} }
}, },
alumniChild: { alumniChild: {
alumni: '校友会' alumni: '校友会',
alumniStory: '校友故事'
} }
}, },
home: { home: {
......
pages/about/lesson/_id.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="detail-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>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/lesson/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/about/lesson' })">查看更多</div>
</div>
</div>
</template>
<script>
import tab from '@/components/about/tabNav'
export default {
components: {
tab
},
data() {
return {
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
})
const params = {
project_id: process.env.projectId,
type_tag: 'article_publish_class',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.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;
// line-height: 100%;
padding-bottom: 10px;
}
.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;
}
}
</style>
pages/about/lesson/index.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/lesson' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_publish_class',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_publish_class',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
pages/about/message/_id.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="detail-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>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/message/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/about/message' })">查看更多</div>
</div>
</div>
</template>
<script>
import tab from '@/components/about/tabNav'
export default {
components: {
tab
},
data() {
return {
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
})
const params = {
project_id: process.env.projectId,
type_tag: 'img_text_school',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.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;
// line-height: 100%;
padding-bottom: 10px;
}
.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;
}
}
</style>
pages/about/message/index.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/message' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'img_text_school',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'img_text_school',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
pages/alumnus/story/_id.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="detail-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>
<div class="recommend-content">
<div class="titles">
<div class="line"></div>
<div class="text">相关推荐</div>
</div>
<ul class="list-box">
<li v-for="(item, index) in listData" :key="index">
<a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/alumnus/story/${item.id}`">
<img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div>
</a>
</li>
</ul>
</div>
<div class="more-btn" @click="$router.push({ path: '/alumnus/story' })">查看更多</div>
</div>
</div>
</template>
<script>
import tab from '@/components/alumnus/tabNav'
export default {
components: {
tab
},
data() {
return {
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
})
const params = {
project_id: process.env.projectId,
type_tag: 'article_alumni',
is_recommend: 1,
page: 1,
limit: 3
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
return res.data.data
})
},
mounted() {},
methods: {
goPage(item) {
if (item.source === '') {
// this.$router.push({
// path: '/about/news-detail',
// query: {
// id: item.id
// }
// })
window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
} else {
window.open(item.source)
}
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.detail-content-box {
width: 1000px;
background: #fff;
padding: 50px 50px 94px;
box-sizing: border-box;
margin-bottom: 100px;
.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;
// line-height: 100%;
padding-bottom: 10px;
}
.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;
}
}
</style>
pages/alumnus/story/index.vue 0 → 100644
浏览文件 @ d5912c44
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/alumnus/story' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/alumnus/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_alumni',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_alumni',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论