Skip to content

P
project-online-old
提交 70a5fb94 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

修改关于我们模块

上级 85768c75
隐藏空白字符变更
内嵌 并排
正在显示 包含 365 行增加 和 77 行删除
src/pages/presence/index.vue
浏览文件 @ 70a5fb94
<template> <template>
<div> <div>
<banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab> <div class="modul1">
<div class="pre-mian center97"> <ul class="tap-btn">
<div class="list-box"> <li v-for="(item, index) in tabs" :key="index" :class="showIndex === index ? 'active' : ''" @click="tap(index)">{{item.name}}</li>
<list :data="listData[0]" v-if="activeIndex == 0"></list> </ul>
<list :data="listData[1]" v-if="activeIndex == 1"></list> </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>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b998e6153f6814da345834d585fe28b7.png" alt="" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import cAction from '@action' import cAction from '@action'
import bannerTab from '@/components/news/tab/bannerTab.vue' import news from '@/components/news/news.vue'
import list from '@/components/news/newsList.vue'
export default { export default {
components: { components: {
bannerTab, news
list
}, },
data() { data() {
return { return {
bannerTabData: { tabs: [
menu: ['关于我们', '联系我们'], {
imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/b61c3355f53391b163a388d18d18aa62.png' name: '关于我们',
}, image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
activeIndex: 0, },
requestParam: { {
page: 1, name: '联系我们',
per_page: 100, image: 'https://zws-imgs-pub.ezijing.com/static/public/b9045c3182307689d0371bece5b2bf3a.png'
type: 81, }
project_id: 1014 ],
}, showIndex: 0,
listData: { newsData: []
0: [],
1: []
}
} }
}, },
mounted() { mounted() {
this.request(0) this.getData()
}, },
methods: { methods: {
changeTab(index) { tap(n) {
const key = { this.showIndex = n
0: 81, },
1: 54 getData() {
} this.tabs.map((item, index) => {
this.requestParam.type = key[index] this.request(item, index)
this.request(index) })
this.activeIndex = index
}, },
request(n) { request(item, index) {
cAction.reportAction cAction.reportAction
.getNews(this.requestParam) .getContent(item.name)
.then(json => { .then(json => {
if (Array.isArray(json)) { this.newsData.push({
json.length && (this.listData[n] = json) id: index,
console.log(this.listData) 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 => { .catch(e => {
this.$message.error(e.message) this.$message.error(e.message)
...@@ -69,19 +74,42 @@ export default { ...@@ -69,19 +74,42 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-box { .con970 {
width: 700px; width: 970px;
margin: 0 auto;
} }
.pre-mian { .modul1 {
padding: 30px 0 60px; position: relative;
display: flex; width: 100%;
img { height: 190px;
width: 235px; background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
height: 300px; background-size: cover;
margin-left: auto; .tap-btn {
width: 970px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
display: flex;
li {
width: 150px;
height: 36px;
background: #bf0927;
margin-right: 2px;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
&.active {
color: #bf0927;
background: #fff;
}
}
} }
} }
.cont-mian { .tap-item-box {
width:970px;
margin: 0 auto;
.module { .module {
padding-top: 30px; padding-top: 30px;
padding-bottom: 60px; padding-bottom: 60px;
...@@ -89,7 +117,7 @@ export default { ...@@ -89,7 +117,7 @@ export default {
.left-txt { .left-txt {
width: 670px; width: 670px;
} }
img { .exh {
margin-left: auto; margin-left: auto;
// display: block; // display: block;
width: 235px; width: 235px;
...@@ -97,37 +125,164 @@ export default { ...@@ -97,37 +125,164 @@ export default {
} }
} }
} }
.center97 { .new-style {
width: 970px; padding-bottom: 60px;
margin: 0 auto; .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;
}
}
} }
.top-nav { .content {
.center97 { position: relative;
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;
} }
img { .p1 {
width: 100%; text-align: center;
display: block; font-size: 14px;
font-weight: bold;
color: #ffffff;
line-height: 20px;
margin-top: 10px;
} }
.menu { .box-cont {
position: absolute; width: 1000px;
bottom: 0; height: 155px;
left: 0; border: 1px solid rgba(216, 60, 86, 0.5);
display: flex; // border: 1px solid #D83C56;
li { margin: 35px auto 0;
width: 128px; position: relative;
line-height: 36px; .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; text-align: center;
color: #fff;
font-size: 16px;
margin-right: 2px;
cursor: pointer;
background: #bf0927;
&.active {
background: #fff;
color: #c70025;
}
} }
// .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> </style>
src/pages/presence/index_old.vue 0 → 100644
浏览文件 @ 70a5fb94
<template>
<div>
<banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
<div class="pre-mian center97">
<div class="list-box">
<list :data="listData[0]" v-if="activeIndex == 0"></list>
<list :data="listData[1]" v-if="activeIndex == 1"></list>
</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b998e6153f6814da345834d585fe28b7.png" alt="" />
</div>
</div>
</template>
<script>
import cAction from '@action'
import bannerTab from '@/components/news/tab/bannerTab.vue'
import list from '@/components/news/newsList.vue'
export default {
components: {
bannerTab,
list
},
data() {
return {
bannerTabData: {
menu: ['师资力量', '学生风采'],
imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/b61c3355f53391b163a388d18d18aa62.png'
},
activeIndex: 0,
requestParam: {
page: 1,
per_page: 100,
type: 81,
project_id: 1014
},
listData: {
0: [],
1: []
}
}
},
mounted() {
this.request(0)
},
methods: {
changeTab(index) {
const key = {
0: 81,
1: 54
}
this.requestParam.type = key[index]
this.request(index)
this.activeIndex = index
},
request(n) {
cAction.reportAction
.getNews(this.requestParam)
.then(json => {
if (Array.isArray(json)) {
json.length && (this.listData[n] = json)
console.log(this.listData)
}
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
}
}
}
</script>
<style lang="scss" scoped>
.list-box {
width: 700px;
}
.pre-mian {
padding: 30px 0 60px;
display: flex;
img {
width: 235px;
height: 300px;
margin-left: auto;
}
}
.cont-mian {
.module {
padding-top: 30px;
padding-bottom: 60px;
display: flex;
.left-txt {
width: 670px;
}
img {
margin-left: auto;
// display: block;
width: 235px;
height: 300px;
}
}
}
.center97 {
width: 970px;
margin: 0 auto;
}
.top-nav {
.center97 {
position: relative;
}
img {
width: 100%;
display: block;
}
.menu {
position: absolute;
bottom: 0;
left: 0;
display: flex;
li {
width: 128px;
line-height: 36px;
text-align: center;
color: #fff;
font-size: 16px;
margin-right: 2px;
cursor: pointer;
background: #bf0927;
&.active {
background: #fff;
color: #c70025;
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论