Skip to content

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

update

上级 5c165e3d
隐藏空白字符变更
内嵌 并排
正在显示 包含 373 行增加 和 145 行删除
api/index.js
浏览文件 @ 94b2ff73
......@@ -37,3 +37,17 @@ export function postNes(data) {
export function submit(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data)
}
/**
* 获取文章列表
*/
export function getArticleList(params) {
return httpRequest.get('/api/cms/api/v1/articles', { params })
}
/**
* 获取图文列表
*/
export function getImgTextList(params) {
return httpRequest.get('/api/cms/api/v1/img-text', { params })
}
components/ArticleList.vue 0 → 100644
浏览文件 @ 94b2ff73
<template>
<div class="article-list">
<article-list-item v-for="(item, index) in dataList" :data="item" :to="to" :key="index"></article-list-item>
<el-pagination
class="article-list-pagination"
layout="prev, pager, next"
:page-size="page.size"
:total="page.total"
:current-page.sync="page.currentPage"
@current-change="fetchList"
:hide-on-single-page="true"
>
</el-pagination>
</div>
</template>
<script>
import ArticleListItem from './ArticleListItem.vue'
export default {
name: 'ArticleList',
components: { ArticleListItem },
props: {
remote: { type: Object, default: () => ({}) },
// 是否含有翻页
hasPagination: { type: Boolean, default: true },
// 每页多少条数据
limit: { type: Number, default: 20 },
// 页面跳转地址
to: { type: Function }
},
data() {
return {
loading: false,
params: this.remote.params || {},
dataList: this.data,
page: { total: 0, size: this.limit, currentPage: 1 }
}
},
watch: {
'remote.params': {
immediate: true,
handler(data) {
this.params = data || {}
}
}
},
async fetch() {
await this.fetchList()
},
methods: {
fetchList() {
/**
* @param function httpRequest api接口
* @param function beforeRequest 接口请求之前
* @param function callback 接口请求成功回调
*/
const { httpRequest, beforeRequest, callback } = this.remote
if (!httpRequest) {
return
}
// 参数设置
let params = this.params
// 翻页参数设置
if (this.hasPagination) {
params.page = this.page.currentPage
params.limit = this.page.size
}
// 接口请求之前
if (beforeRequest) {
params = beforeRequest(params)
}
for (const key in params) {
if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
delete params[key]
}
}
console.log(params)
this.loading = true
return httpRequest(params)
.then(res => {
const { data = [], total = 0 } = res.data || {}
this.page.total = total
this.dataList = callback ? callback(data) : data
})
.catch(() => {
this.page.total = 0
this.dataList = []
})
.finally(() => {
this.loading = false
})
}
}
}
</script>
<style lang="scss">
.article-list-pagination {
padding: 20px;
text-align: center;
}
</style>
\ No newline at end of file
components/ArticleListItem.vue 0 → 100644
浏览文件 @ 94b2ff73
<template>
<div class="article-item">
<new-link :data="data" v-bind="$attrs">
<div class="article-item-inner">
<img :src="data.web_img_uri" class="article-item-pic" />
<div class="article-item-content">
<div class="article-item-content__date">{{ formatDate(data.start_time) }}</div>
<div class="article-item-content__title">{{ data.title }}</div>
<div class="article-item-content__text">{{ data.abstract }}</div>
</div>
</div>
</new-link>
</div>
</template>
<script>
export default {
name: 'ArticleItem',
props: { data: { type: Object, required: true } },
methods: {
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss">
.is-pc {
.article-item {
border-bottom: 1px solid #e6e6e6;
padding: 36px 0;
margin: 0 50px;
cursor: pointer;
}
.article-item-inner {
display: flex;
}
.article-item-pic {
width: 320px;
height: 210px;
object-fit: cover;
}
.article-item-content {
flex: 1;
overflow: hidden;
margin-left: 30px;
}
.article-item-content__date {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
padding-top: 13px;
}
.article-item-content__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;
}
.article-item-content__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: 4;
-webkit-box-orient: vertical;
}
}
.is-h5 {
.article-list-inner {
display: flex;
}
.article-item {
margin: 0.2rem;
background-color: #fff;
}
.article-item-pic {
display: block;
width: 100%;
// height: 2.99rem;
object-fit: cover;
}
.article-item-content {
padding: 0.18rem;
}
.article-item-content__date {
font-size: 0.1rem;
color: #aa1941;
line-height: 0.16rem;
}
.article-item-content__title {
margin-top: 0.1rem;
font-size: 0.14rem;
font-weight: 500;
color: #333;
line-height: 0.24rem;
}
.article-item-content__text {
margin-top: 0.2rem;
font-size: 0.1rem;
line-height: 0.2rem;
}
}
</style>
\ No newline at end of file
components/NewLink.vue 0 → 100644
浏览文件 @ 94b2ff73
<template>
<a :href="data.uri" :target="target" v-if="data.uri">
<slot />
</a>
<nuxt-link :to="to(data)" v-else-if="to">
<slot />
</nuxt-link>
<div v-else>
<slot />
</div>
</template>
<script>
export default {
name: 'Link',
props: {
data: { type: Object, required: true },
to: { type: Function },
target: { type: String, default: '_blnak' }
}
}
</script>
components/appFrame.vue
浏览文件 @ 94b2ff73
<template>
<div class="frame-content-box">
<ul class="tab-content">
<li
v-for="(item, index) in data.slider"
:class="item.pathActive.findIndex(path => {
return $route.path.includes(path)
}) !== -1 && 'active'"
:key="index"
@click="goPage(item.path)"
>
{{ item.name }}
<div class="main-page">
<ul class="main-page-nav">
<li v-for="(item, index) in data.slider" :key="index" :class="{ 'is-active': isAcitve(item) }">
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</li>
</ul>
<div class="right-content">
<img v-if="data.banner" :src="data.banner" alt="" class="banner">
<div class="content-mian">
<div class="main-page-content">
<img v-if="data.banner" :src="data.banner" class="main-page-banner" />
<div class="main-content-html">
<slot></slot>
</div>
</div>
......@@ -24,75 +17,85 @@
export default {
name: 'appFrame',
props: {
data: {
type: Object
}
},
data() {
return {
}
},
mounted() {
data: { type: Object }
},
methods: {
goPage(path) {
this.$router.push({
path: path
})
isAcitve(item) {
return this.$route.fullPath.includes(item.path)
}
}
}
</script>
<style lang="scss" scoped>
.frame-content-box{
width: 1200px;
margin: 0 auto;
padding: 56px 0 100px;
display: flex;
justify-content: space-between;
.right-content{
width: 1000px;
.banner{
width: 100%;
display: block;
height: 320px;
}
.content-mian{
background: #fff;
}
<style lang="scss">
.is-pc {
.main-page {
width: 1200px;
margin: 0 auto;
padding: 56px 0 100px;
display: flex;
}
.tab-content{
.main-page-nav {
width: 160px;
height: fit-content;
background: #fff;
padding-top: 35px;
padding-bottom: 43px;
li{
padding: 35px 0 44px;
margin-right: 40px;
align-self: flex-start;
li {
position: relative;
width: 100%;
height: 40px;
font-size: 22px;
line-height: 40px;
text-align: center;
color: #777777;
margin-bottom: 60px;
cursor: pointer;
&:last-child{
margin: 0;
}
&.active{
color: rgba(170, 25, 65, 1);
&::after{
&.is-active {
color: #aa1941;
&::after {
content: '';
width: 8px;
height: 40px;
background: rgba(170, 25, 65, 1);
background: #aa1941;
position: absolute;
top: 0;
left: 0;
}
}
}
li + li {
margin-top: 60px;
}
}
.main-page-content {
flex: 1;
background-color: #fff;
overflow: hidden;
}
.main-page-banner {
display: block;
height: 320px;
object-fit: cover;
}
}
.is-h5 {
.main-page-nav {
display: flex;
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
}
}
.main-page-banner {
display: block;
height: 1.2rem;
object-fit: cover;
}
.main-page-content {
background-color: #fff;
}
}
</style>
\ No newline at end of file
pages/alumni/sharing/index.vue
浏览文件 @ 94b2ff73
<template>
<div class="sharing">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/alumni-sharing-banner.png',
slider: [
......@@ -38,15 +29,18 @@ export default {
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'alumni-sharing-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
},
to(item) {
return `/alumni/sharing/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.news-item {
padding-top: 43px;
}
</style>
\ No newline at end of file
pages/apply/problem.vue
浏览文件 @ 94b2ff73
......@@ -95,8 +95,6 @@ export default {
</script>
<style lang="scss" scoped>
.problem-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 54px 104px 90px 87px;
.problem-item-box {
......@@ -110,7 +108,6 @@ export default {
ul {
padding-top: 30px;
li {
width: 808px;
margin-bottom: 15px;
.pro-tit {
font-size: 16px;
......
pages/apply/relevant.vue
浏览文件 @ 94b2ff73
......@@ -49,8 +49,6 @@ export default {
</script>
<style lang="scss" scoped>
.rele-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
img {
width: 900px;
......
pages/apply/support.vue
浏览文件 @ 94b2ff73
......@@ -48,8 +48,6 @@ export default {
</script>
<style lang="scss" scoped>
.rele-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding-top: 46px;
padding-bottom: 106px;
......
pages/news/hot/index.vue
浏览文件 @ 94b2ff73
<template>
<div class="hot-content-box">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/news-banner.png',
slider: [
......@@ -38,19 +29,18 @@ export default {
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'news-hot-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
},
to(item) {
return `/news/hot/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.hot-content-box {
width: 1200px;
margin: 0 auto;
.news-item {
padding-top: 43px;
}
}
</style>
</script>
\ No newline at end of file
pages/news/interview/index.vue
浏览文件 @ 94b2ff73
<template>
<div class="hot-content-box">
<app-frame :data="frameParams">
<newsItem :data="newsList" class="news-item" @onClick="handleClick" />
</app-frame>
</div>
<app-frame :data="frameParams">
<article-list v-bind="listOptions"></article-list>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import newsItem from '@/components/news/newsItem'
import ArticleList from '@/components/ArticleList'
import { getArticleList } from '@/api'
export default {
layout: 'normal',
components: {
appFrame,
newsItem
},
async fetch() {
const params = { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
},
components: { appFrame, ArticleList },
data() {
return {
newsList: [],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/news-banner2.png',
slider: [
......@@ -39,19 +29,19 @@ export default {
}
}
},
methods: {
handleClick(item) {
this.$router.push({ name: 'news-interview-id', params: { id: item.id } })
computed: {
listOptions() {
return {
remote: {
httpRequest: getArticleList,
params: { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
},
to(item) {
return `/news/interview/${item.id}`
}
}
}
}
}
</script>
<style lang="scss" scoped>
.hot-content-box {
width: 1200px;
margin: 0 auto;
.news-item {
padding-top: 43px;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论