提交 1095d5bb authored 作者: pengxiaohui's avatar pengxiaohui

增加学校简介模块

上级 09bee018
...@@ -51,6 +51,7 @@ export default { ...@@ -51,6 +51,7 @@ export default {
navList: [ navList: [
{ title: '首页', path: '/index' }, { title: '首页', path: '/index' },
{ title: '项目介绍', path: '/project' }, { title: '项目介绍', path: '/project' },
{ title: '学校简介', path: '/schoolIntro' },
{ title: '视频中心', path: '/videoCenter' }, { title: '视频中心', path: '/videoCenter' },
{ title: '招生信息', path: '/recruit' }, { title: '招生信息', path: '/recruit' },
{ title: '教学模块', path: '/teaching' }, { title: '教学模块', path: '/teaching' },
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<ul class="tap-btn"> <ul class="tap-btn">
<li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">本科1+2项目</li> <li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">本科1+2项目</li>
<li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">硕士直通车项目</li> <li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">硕士直通车项目</li>
<li :class="showIndex === 3 ? 'active' : ''" @click="tap(3)">学校简介</li>
</ul> </ul>
</div> </div>
<div class="tap-item-box"> <div class="tap-item-box">
...@@ -14,9 +13,6 @@ ...@@ -14,9 +13,6 @@
<div class="t-item2 con970" v-show="showIndex === 2"> <div class="t-item2 con970" v-show="showIndex === 2">
<news :data="newsData2"></news> <news :data="newsData2"></news>
</div> </div>
<div class="t-item2 con970" v-show="showIndex === 3">
<news :data="newsData3"></news>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -32,14 +28,12 @@ export default { ...@@ -32,14 +28,12 @@ export default {
return { return {
newsData2: [], newsData2: [],
newsData: [], newsData: [],
newsData3: [],
showIndex: 1 showIndex: 1
} }
}, },
mounted() { mounted() {
this.getData(1) this.getData(1)
this.getData(2) this.getData(2)
this.getData(3)
}, },
methods: { methods: {
tap(n) { tap(n) {
...@@ -62,7 +56,7 @@ export default { ...@@ -62,7 +56,7 @@ export default {
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png' image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
} }
] ]
} else if (n === 2) { } else {
requestType = [ requestType = [
{ {
name: '硕士-项目简介', name: '硕士-项目简介',
...@@ -77,21 +71,6 @@ export default { ...@@ -77,21 +71,6 @@ export default {
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png' image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
} }
] ]
} else {
requestType = [
{
name: '瑞士酒店管理大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
},
{
name: '瑞士恺撒里兹大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
},
{
name: '瑞士蒙特勒工商管理大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
}
]
} }
requestType.map((item, index) => { requestType.map((item, index) => {
this.request(item, index, n) this.request(item, index, n)
...@@ -109,7 +88,7 @@ export default { ...@@ -109,7 +88,7 @@ export default {
image: item.image image: item.image
}) })
this.newsData = this.newsData.sort((a, b) => a.id - b.id) this.newsData = this.newsData.sort((a, b) => a.id - b.id)
} else if (n === 2) { } else {
this.newsData2.push({ this.newsData2.push({
id: index, id: index,
title: item.name, title: item.name,
...@@ -117,14 +96,6 @@ export default { ...@@ -117,14 +96,6 @@ export default {
image: item.image image: item.image
}) })
this.newsData2 = this.newsData2.sort((a, b) => a.id - b.id) this.newsData2 = this.newsData2.sort((a, b) => a.id - b.id)
} else {
this.newsData3.push({
id: index,
title: item.name,
content: json === null ? '' : json[0].content,
image: item.image
})
this.newsData3 = this.newsData3.sort((a, b) => a.id - b.id)
} }
}) })
.catch(e => { .catch(e => {
......
<template>
<div>
<div class="modul1">
<ul class="tap-btn">
<li v-for="(item, index) in tabs" :key="index" :class="showIndex === index ? 'active' : ''" @click="tap(index)">{{item.name}}</li>
</ul>
</div>
<div class="tap-item-box">
<div class="module">
<div class="left-txt" v-html="newsData[showIndex].content"></div>
<img
src="https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png"
alt=""
class="exh"
/>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
components: {
news
},
data() {
return {
tabs: [
{
name: '瑞士酒店管理大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
},
{
name: '瑞士恺撒里兹大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
},
{
name: '瑞士蒙特勒工商管理大学',
image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
}
],
showIndex: 0,
newsData: []
}
},
mounted() {
this.getData()
},
methods: {
tap(n) {
this.showIndex = n
},
getData() {
this.tabs.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(() => {})
}
}
}
</script>
<style lang="scss" scoped>
.con970 {
width: 970px;
margin: 0 auto;
}
.modul1 {
position: relative;
width: 100%;
height: 190px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
background-size: cover;
.tap-btn {
width: 970px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
display: flex;
li {
width: 188px;
height: 36px;
background: #bf0927;
margin-right: 2px;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
&.active {
color: #bf0927;
background: #fff;
}
}
}
}
.tap-item-box {
width:970px;
margin: 0 auto;
.module {
padding-top: 30px;
padding-bottom: 60px;
display: flex;
.left-txt {
width: 670px;
}
.exh {
margin-left: auto;
// display: block;
width: 235px;
height: 300px;
}
}
}
.new-style {
padding-bottom: 60px;
.top-cont {
width: 970px;
margin: 0 auto;
display: flex;
.left {
width: 434px;
height: 496px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9ca050bb75b08a232433f570bcac652d.png);
background-size: 100% 100%;
.txt {
font-size: 16px;
font-weight: bold;
color: #ffffff;
line-height: 29px;
width: 353px;
margin: 180px auto 0;
text-indent: 2em;
}
}
ul {
margin-left: auto;
li {
transition: all 0.5s;
width: 464px;
height: 50px;
background: #f1f2f3;
padding: 0;
margin-bottom: 14px;
&.br {
&:hover {
height: 163px;
}
}
&:hover {
height: 143px;
background: #d83c56;
.dis-b {
display: none;
}
.dis-n {
display: block;
}
}
.dis-b {
display: flex;
align-items: center;
height: 100%;
.d {
width: 8px;
height: 8px;
background: #bf0927;
margin-left: 30px;
border-radius: 50%;
}
.txt {
font-size: 18px;
color: #bf0927;
line-height: 25px;
margin-left: 10px;
}
}
}
}
}
.dis-n {
margin-left: 50px;
display: none;
.title {
font-size: 24px;
font-weight: bold;
color: #ffffff;
line-height: 33px;
padding-top: 30px;
margin-bottom: 36px;
}
.txt {
font-size: 14px;
font-weight: bold;
color: #ffffff;
line-height: 20px;
}
}
}
.content {
position: relative;
width: 100%;
height: 350px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/3ec70f7e95c722cc38d5b38749768b87.png);
background-size: 100% 100%;
.title {
font-size: 24px;
font-weight: bold;
color: #ffffff;
line-height: 33px;
padding-top: 60px;
text-align: center;
}
.p1 {
text-align: center;
font-size: 14px;
font-weight: bold;
color: #ffffff;
line-height: 20px;
margin-top: 10px;
}
.box-cont {
width: 1000px;
height: 155px;
border: 1px solid rgba(216, 60, 86, 0.5);
// border: 1px solid #D83C56;
margin: 35px auto 0;
position: relative;
.le-tj {
position: absolute;
top: 0;
left: 0;
width: 198px;
height: 155px;
background: rgba(255, 255, 255, 0.2);
font-size: 18px;
font-weight: bold;
color: #ffffff;
line-height: 155px;
text-align: center;
}
// .txt-box{
// position: absolute;
// top: 0;
// left: 50%;
// -webkit-transform: translateX(-50%);
// padding-top: 33px;
// .pp1{
// font-size: 14px;
// font-weight: bold;
// color: #FFFFFF;
// line-height: 20px;
// margin-bottom: 15px;
// }
// }
}
.txt-box {
position: absolute;
top: 30%;
left: 50%;
-webkit-transform: translateX(-50%);
padding-top: 33px;
.pp1 {
font-size: 20px;
font-weight: bold;
color: #ffffff;
line-height: 20px;
margin-bottom: 30px;
}
}
}
.zs-cont {
padding-top: 60px;
}
</style>
...@@ -12,6 +12,10 @@ export default [ ...@@ -12,6 +12,10 @@ export default [
path: '/project', // 项目介绍 path: '/project', // 项目介绍
component: () => import('@/pages/project/index.vue') component: () => import('@/pages/project/index.vue')
}, },
{
path: '/schoolIntro', // 项目介绍
component: () => import('@/pages/schoolIntro/index.vue')
},
{ {
path: '/recruit', // 招生信息 path: '/recruit', // 招生信息
component: () => import('@/pages/recruitInfo/index.vue') component: () => import('@/pages/recruitInfo/index.vue')
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论