提交 334a4135 authored 作者: lihuihui's avatar lihuihui

修改新闻

上级 004c85ad
<template>
<div class="new-box">
<tap class="child-tabs" :menu="data" @changeChildTab="changeChildTab"></tap>
<div class="new-items" v-if="data[dataIndex]">
<div v-html="data[dataIndex].content"></div>
<template v-if="data.type != 'list'">
<div class="no-data" v-if="data[dataIndex].content == ''">暂无数据</div>
</template>
<div class="right-img">
<div class="img-box">
<img :src="data[dataIndex].image" alt="" class="photo">
<div class="line"></div>
</div>
<slot name="imgBtn"></slot>
</div>
</div>
</div>
</template>
<script>
import tap from './tab/changeTab.vue'
export default {
props: {
data: {
type: Array,
default: {}
},
defaultPage: {
type: Number,
default: 0
}
},
components: {
tap,
},
data() {
return {
dataIndex: 0
}
},
mounted() {
},
methods: {
changeChildTab(index) {
this.dataIndex = index
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.no-data{
width: 100%;
text-align: center;
color: #999;
font-size: 26px;
}
.new-box{
width: 100%;
}
.child-tabs{
width: 670px;
margin-bottom: 40px;
}
.new-items{
display: flex;
.img-box{
position: relative;
margin-left: 15px;
}
.right-img{
position: relative;
margin-left: auto;
.line{
position: absolute;
top: 35px;
left: -15px;
width: 213px;
height: 280px;
border: 1px solid #979797;
}
.photo{
position: relative;
z-index: 9;
width: 235px;
height: 300px;
display: flex;
position: relative;
}
}
}
</style>
<template>
<div>
<ul class="child-tab">
<template v-for="(item, index) in menu">
<li
:key="index"
:class="activeIndex == index ? 'active' : ''"
@click="tab(index)"
>{{ item.title }}</li>
</template>
</ul>
</div>
</template>
<script>
export default {
props: {
menu: {
type: Array,
default: []
}
},
data() {
return {
activeIndex: 0
}
},
methods: {
tab(index) {
this.activeIndex = index
this.$emit('changeChildTab', this.activeIndex)
}
},
mounted() {
console.log(this.menu, '===')
this.$route.query.type && (this.activeIndex = this.$route.query.type)
}
}
</script>
<style lang="scss" scoped>
.center97{
width: 970px;
margin: 0 auto;
}
.child-tab{
display: flex;
justify-content: flex-end;
// width: 670px;
border-bottom: 1px solid #979797;
li{
cursor: pointer;
position: relative;
line-height: 42px;
padding: 0 22px;
font-size: 14px;
color: #222;
&.active{
border: 1px solid #979797;
border-bottom: none;
border-top: 2px solid #BF0927;
&::after{
content: '';
width: 100%;
height: 3px;
background: #fff;
position: absolute;
bottom: -1px;
left: 0;
}
}
}
}
</style>
...@@ -11,14 +11,6 @@ ...@@ -11,14 +11,6 @@
</div> </div>
</li> </li>
</template> </template>
<!-- <li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d92feb882caacd44d18f05c996494f14.png" alt="">
<div class="right-txt">
<div class="title">我在紫荆等你来 | 姜华:驶向太平洋彼岸,追求金融知识之光</div>
<div class="cont-txt">2019年7月13日上午,紫荆-索菲亚金融方向工商管理硕士(FMBA)2019夏季学期开学典礼在清华大学五道口金融学院香山基地(香山饭店)盛大举行。来自五湖四海的新学员们,带着对未来的希望和期许,开启了全…</div>
<div class="time">2020.08.18</div>
</div>
</li> -->
</ul> </ul>
</div> </div>
</template> </template>
......
<template>
<div>
<div class="center97 apply-mian">
<news :data="newsData" :defaultPage="defaultPage">
<div class="apply-btn" slot="imgBtn">
<div class="icon"></div>
<div class="txt" @click="goPage">项目申请</div>
</div>
</news>
</div>
</div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
components: {
news
},
data() {
return {
newsData: [],
tabShowItem: 0,
defaultPage: 0
}
},
mounted() {
this.getData()
this.$route.query.type && (this.defaultPage = this.$route.query.type)
},
methods: {
getData() {
const requestType = [
{
name: '申请条件',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
},
{
name: '申请流程',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img2.375edc9f.png'
},
{
name: '常见问题',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img3.409221a3.png'
}
]
requestType.map((item, index) => {
this.request(item, index)
})
},
request(item, index) {
cAction.reportAction.getContent(item.name).then(json => {
this.newsData.push({
id: index,
title: item.name,
content: json === null ? '' : json[0].content,
image: item.image
})
this.newsData = this.newsData.sort((a, b) => a.id - b.id)
}).catch(e => { this.$message.error(e.message) }).finally(() => {})
},
goPage() {
this.$router.push({
path: '/signup/index'
})
},
changeChildTab(index) {
this.tabShowItem = index
}
}
}
</script>
<style lang="scss" scoped>
.center97{
width: 970px;
margin: 0 auto;
}
.apply-mian{
padding-top: 30px;
padding-bottom: 60px;
display: flex;
.apply-left{
width: 670px;
.tab-item{
width: 100%;
margin-top: 40px;
}
}
.apply-right{
margin-left: auto;
.img-box{
width: 235px;
position: relative;
margin-left: 13px;
img{
position: relative;
z-index: 9;
display: block;
width: 100%;
height: 300px;
}
.line{
position: absolute;
top: 35px;
right: 35px;
width: 213px;
height: 280px;
border: 1px solid #979797;
}
}
}
}
.apply-btn{
width: 248px;
height: 48px;
background: #BF0927;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 55px;
cursor: pointer;
.icon{
width: 31px;
height: 31px;
background: url(@/assets/img/recruitInfo/m1-c1-icon1.png);
background-size: 100% 100%;
}
.txt{
font-size: 18px;
color: #fff;
margin-left: 20px;
}
}
</style>
...@@ -2,34 +2,23 @@ ...@@ -2,34 +2,23 @@
<div> <div>
<div class="center97 apply-mian"> <div class="center97 apply-mian">
<div class="apply-left"> <div class="apply-left">
<child-tab <news :data="newsData">
:menu="tabMenu" <div class="apply-btn" slot="imgBtn">
@changeChildTab="changeChildTab" <div class="icon"></div>
></child-tab> <div class="txt" @click="goPage">项目申请</div>
<div class="tab-item" v-if="tabShowItem == 0" v-html="data.module3"></div> </div>
<div class="tab-item" v-if="tabShowItem == 1" v-html="data.module4"></div> </news>
<!-- <div class="tab-item" v-if="tabShowItem == 2" v-html="data.module5"></div> --> <!-- <div class="tab-item" v-if="tabShowItem == 2" v-html="data.module5"></div> -->
</div> </div>
<div class="apply-right">
<div class="img-box">
<div class="line"></div>
<img v-if="tabShowItem == 0" src="../../assets/img/recruitInfo/m2-c1-img1.png" alt="">
<img v-if="tabShowItem == 1" src="../../assets/img/recruitInfo/m2-c1-img2.png" alt="">
<!-- <img v-if="tabShowItem == 2" src="../../assets/img/recruitInfo/m1-c1-img3.png" alt=""> -->
</div>
<div class="apply-btn">
<div class="icon"></div>
<div class="txt">项目申请</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import childTab from '../../components/tab/childTab.vue' import cAction from '@action'
import news from '@/components/news/news.vue'
export default { export default {
components: { components: {
childTab news
}, },
props: { props: {
data: { data: {
...@@ -39,13 +28,47 @@ export default { ...@@ -39,13 +28,47 @@ export default {
}, },
data() { data() {
return { return {
tabMenu: ['学费', '贷款'], newsData: [],
tabShowItem: 0 tabMenu: ['学费', '贷款']
} }
}, },
mounted() {
this.getData()
},
methods: { methods: {
changeChildTab(index) { goPage() {
this.tabShowItem = index this.$router.push({
path: '/signup/index'
})
},
getData() {
const requestType = [
{
name: '学费',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-c1-img1.7b7f69c0.png'
},
{
name: '贷款',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-c1-img2.7985a971.png'
}
]
requestType.map((item, index) => {
this.request(item, index)
})
},
request(item, index) {
console.log(this.newsData, '====123456')
cAction.reportAction.getContent(item.name).then(json => {
if (json !== null) {
this.newsData.push({
id: index,
title: item.name,
content: json === null ? '' : json[0].content,
image: item.image
})
}
this.newsData = this.newsData.sort((a, b) => a.id - b.id)
}).catch(e => { this.$message.error(e.message) }).finally(() => {})
} }
} }
} }
...@@ -60,7 +83,7 @@ export default { ...@@ -60,7 +83,7 @@ export default {
padding-bottom: 60px; padding-bottom: 60px;
display: flex; display: flex;
.apply-left{ .apply-left{
width: 670px; width: 100%;
.tab-item{ .tab-item{
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
...@@ -88,28 +111,28 @@ export default { ...@@ -88,28 +111,28 @@ export default {
border: 1px solid #979797; border: 1px solid #979797;
} }
} }
.apply-btn{ }
width: 248px; }
height: 48px; .apply-btn{
background: #BF0927; width: 248px;
border-radius: 8px; height: 48px;
display: flex; background: #BF0927;
align-items: center; border-radius: 8px;
justify-content: center; display: flex;
margin-top: 55px; align-items: center;
cursor: pointer; justify-content: center;
.icon{ margin-top: 55px;
width: 31px; cursor: pointer;
height: 31px; .icon{
background: url(../../assets/img/recruitInfo/m1-c1-icon1.png); width: 31px;
background-size: 100% 100%; height: 31px;
} background: url(@/assets/img/recruitInfo/m1-c1-icon1.png);
.txt{ background-size: 100% 100%;
font-size: 18px; }
color: #fff; .txt{
margin-left: 20px; font-size: 18px;
} color: #fff;
} margin-left: 20px;
} }
} }
</style> </style>
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
</template> </template>
<script> <script>
import cAction from '@action' import cAction from '@action'
import bannerTab from '../../components/tab/bannerTab.vue' import bannerTab from '@/components/tab/bannerTab.vue'
import apply from './apply.vue' import apply from './components/apply.vue'
import support from './support.vue' import support from './components/support.vue'
export default { export default {
components: { components: {
apply, apply,
...@@ -36,25 +36,25 @@ export default { ...@@ -36,25 +36,25 @@ export default {
} }
}, },
mounted() { mounted() {
this.getData() // this.getData()
}, },
methods: { methods: {
changeTab(index) { changeTab(index) {
this.activeIndex = index this.activeIndex = index
}, },
getData() { // getData() {
const requestType = ['申请条件', '申请流程', '常见问题', '学费', '贷款'] // const requestType = ['申请条件', '申请流程', '常见问题', '学费', '贷款']
requestType.map((item, index) => { // requestType.map((item, index) => {
this.request(item, index) // this.request(item, index)
}) // })
}, // },
request(name, index) { // request(name, index) {
cAction.reportAction.getContent(name).then(json => { // cAction.reportAction.getContent(name).then(json => {
if (json !== null) { // if (json !== null) {
this.content[`module${index}`] = json[0].content // this.content[`module${index}`] = json[0].content
} // }
}).catch(e => { this.$message.error(e.message) }).finally(() => {}) // }).catch(e => { this.$message.error(e.message) }).finally(() => {})
} // }
}, },
} }
</script> </script>
......
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
...@@ -5,42 +5,23 @@ ...@@ -5,42 +5,23 @@
@changeTab="changeTab" @changeTab="changeTab"
></banner-tab> ></banner-tab>
<div class="cont-mian center97"> <div class="cont-mian center97">
<!-- <set-course v-if="activeIndex == 0"></set-course> -->
<div class="module" v-if="activeIndex == 0"> <div class="module" v-if="activeIndex == 0">
<div class="left-txt"> <news :data="newsData"></news>
<child-tab
:menu="tabMenu"
@changeChildTab="changeChildTab"
></child-tab>
<list v-if="childActiveIndex == 0"></list>
<list v-if="childActiveIndex == 1"></list>
</div>
<img src="../../assets/img/teaching/m2-r-img.png" alt="">
</div> </div>
<div class="module wid" v-if="activeIndex == 1"> <div class="module wid" v-if="activeIndex !== 0">
<list></list> <div class="no-data">暂无数据</div>
</div>
<div class="module wid" v-if="activeIndex == 2">
<list></list>
</div>
<div class="module wid" v-if="activeIndex == 3">
<list></list>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import news from '@/components/news/news.vue'
import bannerTab from '../../components/tab/bannerTab.vue' import bannerTab from '../../components/tab/bannerTab.vue'
import childTab from '../../components/tab/childTab.vue'
import teachingList from '../../components/tab/teachingList.vue'
import list from './list.vue'
import cAction from '@action' import cAction from '@action'
export default { export default {
components: { components: {
bannerTab, bannerTab,
childTab, news
list,
teachingList
}, },
data() { data() {
return { return {
...@@ -48,6 +29,20 @@ export default { ...@@ -48,6 +29,20 @@ export default {
menu: ['项目介绍', '宣传片', '教授采访', '学生风采'], menu: ['项目介绍', '宣传片', '教授采访', '学生风采'],
imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/24c97bb61b77949b415adcb06c7e43b1.png' imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/24c97bb61b77949b415adcb06c7e43b1.png'
}, },
newsData: [
{
id: 0,
title: '宣讲会实录',
content: '',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
},
{
id: 1,
title: '项目介绍',
content: '',
image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
}
],
activeIndex: 0, activeIndex: 0,
tabMenu: ['宣讲会实录', '项目介绍'], tabMenu: ['宣讲会实录', '项目介绍'],
childActiveIndex: 0, childActiveIndex: 0,
...@@ -79,13 +74,20 @@ export default { ...@@ -79,13 +74,20 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.no-data{
width: 100%;
text-align: center;
color: #999;
font-size: 26px;
}
.cont-mian{ .cont-mian{
.module{ .module{
width: 100%;
padding-top: 30px; padding-top: 30px;
padding-bottom: 60px; padding-bottom: 60px;
display: flex; display: flex;
.left-txt{ .left-txt{
width: 670px; // width: 670px;
} }
img{ img{
margin-left: auto; margin-left: auto;
......
<template> <template>
<div class="list-box"> <div class="list-box">
<ul> <ul>
<!-- <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
<li>2019招生说明会-教学模块&校园生活-陈雅如</li> <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
<li>2019招生说明会-教学模块&校园生活-陈雅如</li> <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
<li>2019招生说明会-教学模块&校园生活-陈雅如</li> --> <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
<li>2019招生说明会-教学模块&校园生活-陈雅如</li>
</ul> </ul>
</div> </div>
</template> </template>
......
...@@ -51,10 +51,6 @@ export default [ ...@@ -51,10 +51,6 @@ export default [
{ {
path: '/videoCenter', // 视频中心 path: '/videoCenter', // 视频中心
component: () => import('@/pages/videoCenter/index.vue') component: () => import('@/pages/videoCenter/index.vue')
},
{
path: '/videoCenter/details', // 视频中心详情
component: () => import('@/pages/videoCenter/details.vue')
} }
] ]
}, },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论