jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

添加产业光源5个长页

Browse Source
master
yujialong 2 years ago
parent 4ac6a899f8
commit 5b559b9948
7 changed files with 1402 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/mixins/estate/index.js
  2. 197
      src/pages/estate/event/index.vue
  3. 713
      src/pages/estate/index/index.vue
  4. 168
      src/pages/estate/location/index.vue
  5. 133
      src/pages/estate/orgSetup/index.vue
  6. 130
      src/pages/estate/survey/index.vue
  7. 28
      src/router/modules/estate.js

33
src/mixins/estate/index.js
Unescape View File

@ -0,0 +1,33 @@
export default {
data() {
return {
tabs: ['产业光源概况', '大事记', '机构设置', '地理位置'],
}
},
methods: {
// 获取文章详情
getInfo() {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).catch(err => {})
},
// tab回调
tabChange(i) {
this.active = i
// 跳转到固定的长页，这里的id不能变
let path = '/overviewIntro?id=220'
if (i == 1) path = '/overviewDevHistory?id=214'
if (i == 2) path = '/overviewTrailer?id=215'
if (i == 3) path = '/overviewLocation?id=216'
this.$router.push(path + '&siteId=3')
},
}
};

197
src/pages/estate/event/index.vue
Unescape View File

@ -0,0 +1,197 @@
<template>
<!-- 产业光源-大事记 -->
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
</template>
</ul>
<div class="block history">
<div class="inner">
<h2 class="wow fadeInLeft">大事记</h2>
<p class="en">DEVELOPMENT HISTORY</p>
<div v-if="modules[1].list.length" class="event">
<ul class="time">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i" :class="{active: curYear == i}" @click="yearClick(i)">{{ item.title }}</li>
</template>
</ul>
<div class="right">
<h6 class="year">{{ modules[1].list[curYear].title }}</h6>
<ul class="list">
<template v-for="(e, j) in modules[1].list[curYear].list">
<li v-if="e.isEnable" :key="j" :class="{'cursor-pointer': isLink(e.link.linkName)}" @click="openLink(e)">
<div class="texts">
<p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p>
</div>
<img v-if="e.pic" :src="e.pic" alt="" class="pic">
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
return {
active: 1,
curYear: 0
}
},
mounted() {
new WOW().init()
},
methods: {
// 年份点击回调
yearClick(i) {
this.curYear = i
}
}
};
</script>
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.wrap {
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat,
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat;
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.history {
h2 {
position: relative;
font-size: 2.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1C1C1C;
}
.en {
margin: -15px 0 40px;
font-size: 2.2rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #E3E3E3;
}
}
.event {
display: flex;
justify-content: center;
.time {
width: 200px;
padding-right: 10px;
margin-right: 20px;
border-right: 1px solid #ddd;
li {
display: flex;
justify-content: flex-end;
align-items: center;
width: 190px;
padding-right: 45px;
line-height: 60px;
font-size: 1.4rem;
font-weight: 600;
font-family: SFProDisplay-Semibold, SFProDisplay;
color: #666;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
cursor: pointer;
&.active {
font-weight: 800;
color: #1A81F4;
background: linear-gradient(90deg, #FFFFFF 0%, #F3F8FF 100%);
&:before {
content: '';
width: 18px;
height: 18px;
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
margin-right: 20px;
}
}
}
}
.right {
width: 1000px;
}
.year {
margin: 0 0 20px 20px;
font-size: 3.8rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800;
color: #1A81F4;
}
.list {
border-top: 1px solid #ddd;
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
border-bottom: 1px solid #ddd;
}
.texts {
width: 500px;
}
.date {
margin-bottom: 15px;
font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
}
.text {
font-size: 1.1rem;
color: #333;
@include mul-ellipsis(3);
&:before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
margin: 0 10px;
background-color: #666;
transform: rotate(45deg);
}
}
.pic {
width: 350px;
height: 195px;
}
}
}
</style>

713
src/pages/estate/index/index.vue
Unescape View File

@ -0,0 +1,713 @@
<template>
<div class="wrap">
<el-carousel height="991px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
</el-carousel-item>
</template>
</el-carousel>
<div class="block banner-block" id="part1">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[1].form.title }}
<span class="sub">{{ modules[1].form.subTitle }}</span>
</h5>
<span class="more" @click="toAll(modules[2].form)">MORE</span>
</div>
<template v-if="articles.length">
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
<div style="width: 50%;height: 410px;overflow: hidden;" class="newBox">
<img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
</div>
<div class="right">
<h6>{{ curArticle.title }}</h6>
<div class="des" v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
<ul class="inds">
<li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
</ul>
</div>
</div>
<ul class="card">
<template v-for="(item, i) in articles">
<li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic" :src="item.titleImg" alt="">
<div class="texts">
<p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
<div class="des">{{ item.title }}</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
</div>
</li>
</template>
</ul>
</template>
</div>
</div>
<div class="block talent" id="part2">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[3].form.title }}
<span class="sub">{{ modules[3].form.subTitle }}</span>
</h5>
<span class="more" @click="toAll(modules[4].form)">MORE</span>
</div>
<div class="shows">
<div class="left wow fadeInLeft" data-wow-delay="0.5s">
<h6>{{ modules[4].form.title }}</h6>
<div class="text" v-html="modules[4].form.des"></div>
<el-button v-if="isLink(modules[4].form.link.linkName)" type="primary" round @click="openLink(modules[4].form)">这里跳转</el-button>
</div>
<img :src="modules[4].form.pic" alt="" class="pic">
</div>
</div>
</div>
<div class="block conference" id="part3">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[5].form.title }}
<span class="sub">{{ modules[5].form.subTitle }}</span>
</h5>
<span class="more" @click="toAll(modules[6].form)">MORE</span>
</div>
<div class="shows" v-if="articles2.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
<img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
<div class="text">{{ articles2[0].title }}</div>
</div>
<ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
<template v-for="(item, i) in articles2">
<li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
<img class="pic" :src="item.titleImg" alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="sum">{{ item.mainBody }}</p>
<p v-if="item.keynoteSpeaker" class="text">
<img class="icon" src="@/assets/images/mine.png" alt="">
{{ item.keynoteSpeaker }}
</p>
<p v-if="item.activityStartTime" class="text">
<img class="icon" src="@/assets/images/time.png" alt="">
会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
</p>
<p v-if="item.onlineLocation" class="text">
<img class="icon" src="@/assets/images/online.png" alt="">
{{ item.onlineLocation }}
</p>
<p v-if="item.offlineLocation" class="text">
<img class="icon" src="@/assets/images/location.png" alt="">
{{ item.offlineLocation }}
</p>
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="block program" id="part4">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[7].form.title }}
<span class="sub">{{ modules[7].form.subTitle }}</span>
</h5>
<span class="more" @click="toAll(modules[8].form)">MORE</span>
</div>
<template v-if="articles3.length">
<div class="slide" @click="toArtice(articles3[0], modules[8].form)">
<div class="texts">
<h6>{{ articles3[0].title }}</h6>
<div class="des">{{ articles3[0].mainBody }}</div>
<div class="meta">发表日期：{{ articles3[0].releaseTime }} &emsp;浏览量：{{ articles3[0].totalBrowsing }}</div>
</div>
<div class="img-wrap">
<img class="pic" :src="articles3[0].titleImg" alt="">
</div>
</div>
<ul class="list">
<template v-for="(item, i) in articles3">
<li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[8].form)">
<div class="des">{{ item.title }}</div>
<p class="date">{{ item.releaseTime }}</p>
</li>
</template>
</ul>
</template>
</div>
</div>
<div class="tools">
<div class="logo">
<img src="@/assets/images/logo.png" alt="">
</div>
<ul class="nav">
<li v-for="(item, i) in navs" :key="i" class="column" @click="toAnchor(item)">{{ item.name }}</li>
</ul>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
mixins: [mixins],
data() {
return {
navs: [],
articles: [],
articles1: [],
articles2: [],
articles3: [],
curInd: 0,
curArticle: {},
}
},
mounted() {
new WOW().init()
},
methods: {
// 获取文章详情
getInfo() {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
// 获取文章列表
if (json[2].form.column.length) {
const { column, articleNum } = json[2].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 7))
this.curArticle = this.articles[0]
}).catch(err => {})
}
if (json[6].form.column.length) {
const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => {})
}
if (json[8].form.column.length) {
const { column, articleNum } = json[8].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => {})
}
// 获取页面的所有标题，展示到左侧导航
const navs = []
let id = 0
json.forEach((e, i) => {
if (i % 2 && e.form.title) navs.push({
id: ++id,
name: e.form.title
})
})
this.navs = navs
this.modules = json
this.carouselInterval()
}
}).catch(err => {})
},
// 自动轮播
carouselInterval() {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.curInd++
if (this.curInd > 3) this.curInd = 0
this.curArticle = this.articles[this.curInd] || {}
}, 5000)
},
// 手动轮播切换
switchCarousel(i) {
if (this.curInd !== i) {
this.curInd = i
this.curArticle = this.articles[this.curInd] || {}
}
},
// 左侧导航点击回调
toAnchor(e) {
const el = document.querySelector(`#part${e.id}`)
el && el.scrollIntoView()
}
}
};
</script>
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.title {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 25px;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
h5 {
padding-left: 16px;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 1;
border-left: 6px solid #2B96EF;
}
.sub {
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #AFB7BF;
}
.more {
font-size: .8rem;
color: #666;
cursor: pointer;
}
}
/deep/.articles {
width: 50%;
.el-carousel__indicators--horizontal {
bottom: 20px;
left: 804px;
}
}
.banner-block {
background: url(../../../assets/images/sfel/2.png) 0 0/cover no-repeat;
}
.sfel-banner {
display: flex;
cursor: pointer;
.pic {
transition: .5s;
&:hover {
transform: scale(1.3);
}
}
.right {
position: relative;
width: 50%;
padding: 50px 50px 30px;
background: #1583FF;
color: #fff;
&:hover {
background: #465f85;
h6, .des, .meta {
color: #fff;
transform: translateY(15px);
}
}
}
.inds {
position: absolute;
bottom: 40px;
left: 60px;
display: flex;
li {
width: 10px;
height: 10px;
margin-right: 12px;
background: #FFFFFF;
border-radius: 50%;
transition: .2s;
&.active {
width: 30px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
}
}
}
h6 {
font-size: 1.3rem;
transition: .3s;
}
.des {
margin: 30px 0;
font-size: .9rem;
line-height: 24px;
transition: .3s;
}
.meta {
font-size: .8rem;
transition: .3s;
}
}
.card {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
li {
width: calc((100% - 56px) / 3);
margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
border-radius: 6px;
transition: .3s;
background-color: #fff;
&:hover {
transform: scale(1.05);
}
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
height: 259px;
}
.texts {
padding: 40px 30px;
}
.meta {
font-size: .9rem;
color: #666;
}
.des {
height: 60px;
margin: 10px 0;
font-size: 1.1rem;
font-family: SFProDisplay;
font-weight: 500;
color: #333;
line-height: 28px;
-webkit-line-clamp: 2;
}
.arrow {
width: 36px;
}
}
.talent {
.shows {
display: flex;
color: #fff;
background: #1A2844;
border-radius: 0px 100px 0px 100px;
.left {
width: 50%;
padding: 120px 0 0 5%;
}
h6 {
font-size: 1.6rem;
}
.text {
margin: 20px 0;
font-size: 1rem;
line-height: 2;
}
.pic {
width: 50%;
height: 500px;
}
}
}
.conference {
background: url(../../../assets/images/sfel/4.png) 0 0/cover no-repeat;
.shows {
display: flex;
}
.left {
position: relative;
width: 550px;
// min-width: 550px;
height: 550px;
margin-right: 20px;
cursor: pointer;
overflow: hidden;
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 12px;
line-height: 3rem;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.57);
}
.pic {
transition: .5s;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
}
.card-list {
width: 600px;
li {
display: flex;
align-items: center;
padding: 6px;
margin-bottom: 7px;
background-color: #fff;
cursor: pointer;
transition: .3s;
&:last-child {
margin-bottom: 0;
}
&:hover {
transform: translateX(20px);
}
}
.pic {
width: 167px;
height: 167px;
margin-right: 36px;
}
.texts {
width: calc(100% - 210px);
}
h6 {
margin-bottom: 10px;
font-size: 1.2rem;
color: #333;
@include ellipsis;
}
.sum {
margin-bottom: 6px;
font-size: 1rem;
color: #666;
@include ellipsis;
}
.text {
display: flex;
align-items: center;
margin: 10px 0;
font-size: .9rem;
@include ellipsis;
}
.icon {
margin-right: 5px;
}
}
}
.program {
background: #fff;
.slide {
display: flex;
margin-bottom: 14px;
cursor: pointer;
}
.texts {
width: 51%;
padding: 56px;
background: #FBFBFB;
h6 {
font-size: 1.3rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.des {
margin: 35px 0 25px;
font-size: 1rem;
color: #666;
line-height: 32px;
}
.meta {
font-size: .9rem;
color: #666;
}
}
.img-wrap {
width: 49%;
height: 430px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
.list {
display: flex;
li {
width: calc((100% - 28px) / 3);
height: 204px;
padding: 36px 22px;
margin-right: 14px;
background: url(../../../assets/images/sfel/7.png) no-repeat center;
transition: .5s;
cursor: pointer;
&:nth-child(2) {
background-image: url(../../../assets/images/sfel/8.png);
}
&:nth-child(3) {
margin-right: 0;
background-image: url(../../../assets/images/sfel/9.png);
}
&:hover {
transform: translateY(20px);
}
}
.des {
height: 90px;
margin-bottom: 30px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 30px;
}
.date {
font-size: .9rem;
font-family: LaoSangamMN;
color: #FFFFFF;
}
}
}
.tools {
z-index: 9;
position: fixed;
top: 200px;
left: 0;
width: 180px;
text-align: center;
.logo {
padding: 15px 0;
background: #0C60BE;
box-shadow: 0px 0px 20px 0px rgba(184,191,200,0.3);
}
.nav {
li {
padding: 0 10px;
font-size: 1.1rem;
line-height: 50px;
color: #fff;
background-color: #1D1D1D;
cursor: pointer;
@include ellipsis;
&.active {
background-color: #1583FF;
}
&:hover {
background-color: #1583FF;
}
}
}
}
@media (max-width: 1520px) {
.conference .card-list {
width: 734px;
.texts {
width: 460px;
}
}
}
@media (max-width: 1200px) {
.sfel-banner{
flex-direction: column;
.newBox{
width: 100% !important;
}
.right{
margin-top: 10px;
width: 100%;
height: 410px;
}
}
.card {
flex-direction: column;
li {
width: 100%;
margin-top: 20px;
}
}
.shop-shows{
flex-direction: column;
.left{
width: 100%;
}
.right{
width: 100%;margin-top: 20px;
}
}
.shows{
flex-direction: column;
.left{
width: 100%;
}
.card-list{
width: 100%;margin-top: 20px;
li {
flex-direction: column;
.pic{
width: 100% !important;
margin-right: 0;
}
.texts{
margin-top: 20px;
width: 100%;
}
}
}
}
.media-wrap{
flex-direction: column;
.left{
width: 100%;
}
.right {
width: 100%;
margin-top: 20px;
}
}
.news{
flex-direction: column;
li {
margin-top: 30px;
width: 100%;
}
}
.slide , .list{
flex-direction: column;
.texts , .img-wrap{
width: 100%;
}
}
.list {
li {
width: 100% !important; margin-top: 20px;
}
}
.slides{
div{
flex: 1;
}
}
#part6 {
.slide{
.texts{
height: 430px;
}
}
}
}
</style>

168
src/pages/estate/location/index.vue
Unescape View File

@ -0,0 +1,168 @@
<template>
<!-- 产业光源-地理位置 -->
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
</template>
</ul>
<div class="tab-content">
<div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
<div class="img-wrap">
<img class="pic" :src="modules[1].form.pic" alt="">
</div>
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div>
</div>
</div>
<div class="item wow bounceInRight" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<div class="img-wrap">
<img class="pic" :src="modules[2].form.pic" alt="">
</div>
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div>
</div>
</div>
<div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
<div class="img-wrap">
<img class="pic" :src="modules[3].form.pic" alt="">
</div>
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
return {
active: 3
}
},
mounted() {
new WOW().init()
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
width: 80%;
max-width: 1504px;
padding-bottom: 100px;
margin: 30px auto 0;
.item {
display: flex;
padding: 42px;
margin-bottom: 36px;
color: #333;
background: #F5F5F5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
transition: .5s;
&:nth-child(even) {
justify-content: space-between;
flex-direction: row-reverse;
background-position: 30% 100%;
.texts {
padding-left: 0;
}
}
&:hover {
// color: #fff;
// background: #005388;
.pic {
transform: scale(1.1);
}
}
}
.img-wrap {
height: 465px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
}
.texts {
width: 707px;
padding: 98px 72px 30px 80px;
}
h6 {
margin-bottom: 24px;
font-size: 2.4rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
}
.des {
font-size: 1rem;
line-height: 33px;
-webkit-line-clamp: 8;
}
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content{
padding: 20px 0;
.org{
width: 100%;
padding:15px;
flex-direction: column;
.left{
width: 100%;
}
}
}
}
</style>

133
src/pages/estate/orgSetup/index.vue
Unescape View File

@ -0,0 +1,133 @@
<template>
<!-- 产业光源-机构设置 -->
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
</template>
</ul>
<div class="tab-content">
<div class="org">
<div class="left">
<h6>{{ modules[1].form.title }}</h6>
<p class="text" v-html="modules[1].form.des"></p>
</div>
<img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt="">
</div>
<div class="lg-bg">
<img width="100%" :src="modules[2].form.pic" alt="">
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
return {
active: 2
}
},
mounted() {
new WOW().init()
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
padding: 77px 0;
}
.org {
display: flex;
justify-content: space-between;
align-items: center;
width: 1294px;
padding: 9px 86px 29px 116px;
margin: 0 auto 50px;
background: #FCFCFC;
border-radius: 160px;
.left {
width: 705px;
}
h6 {
font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold;
color: #333;
}
.text {
margin-top: 10px;
font-size: 1rem;
color: #020202;
line-height: 2rem;
}
.pic {
width: 320px;
height: 282px;
}
}
.lg-bg {
width: 85%;
margin: 0 auto;
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content{
padding: 20px 0;
.org{
width: 100%;
padding:15px;
flex-direction: column;
.left{
width: 100%;
}
}
}
}
</style>

130
src/pages/estate/survey/index.vue
Unescape View File

@ -0,0 +1,130 @@
<template>
<!-- 产业光源-产业光源概况 -->
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
</template>
</ul>
<div class="tab-content">
<div class="survey">
<h6>
{{ modules[1].form.title }}
<img class="title-bg" src="http://10.10.11.7/images/overviewIntro/2.png" alt="">
</h6>
<p class="text" v-html="modules[1].form.des"></p>
</div>
<div class="lg-bg">
<img width="100%" src="http://10.10.11.7/images/estate/3.png" alt="">
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
return {
active: 0
}
},
mounted() {
new WOW().init()
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
padding-top: 70px;
}
.survey {
width: 1294px;
min-height: 500px;
padding: 80px 86px 29px 32%;
margin: 0 auto 200px;
background: url(http://10.10.11.7/images/estate/2.png) 0 0/100% 100% no-repeat;
border-radius: 160px;
h6 {
position: relative;
margin-bottom: 30px;
font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold;
color: #333;
}
.title-bg {
position: absolute;
top: -40px;
left: -20px;
}
.text {
margin-top: 10px;
font-size: 1rem;
color: #020202;
line-height: 2rem;
}
}
.lg-bg {
width: 40%;
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content{
padding: 20px 0;
.org{
width: 100%;
padding:15px;
flex-direction: column;
.left{
width: 100%;
}
}
}
}
</style>

28
src/router/modules/estate.js
Unescape View File

@ -0,0 +1,28 @@
import BasicLayout from '@/layouts/home'
const name = 'estate'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
path: `index`,
component: () => import(`@/pages/${name}/index`),
},
{
path: `event`,
component: () => import(`@/pages/${name}/event`),
},
{
path: `orgSetup`,
component: () => import(`@/pages/${name}/orgSetup`),
},
{
path: `survey`,
component: () => import(`@/pages/${name}/survey`),
},
{
path: `location`,
component: () => import(`@/pages/${name}/location`),
},
]
};
Write Preview
Loading…
Cancel
Save