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

fix

Browse Source
master
yujialong 1 year ago
parent 3612e6d8e9
commit a87eb4c3b6
8 changed files with 661 additions and 627 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/components/breadcrumb/index.vue
  2. 98
      src/pages/article/index.vue
  3. 4
      src/pages/contactUs/index.vue
  4. 10
      src/pages/governance/index.vue
  5. 181
      src/pages/iasf/index.vue
  6. 62
      src/pages/lightSources/index.vue
  7. 39
      src/pages/overview/index.vue
  8. 822
      src/pages/talentCenter/index.vue

66
src/components/breadcrumb/index.vue
Unescape View File

@ -1,67 +1,35 @@
<template> <template>
<!-- 面包屑 --> <!-- 面包屑 -->
<div class="breadcrumb"> <div class="breadcrumb">
<el-breadcrumb separator=">"> <span class="back"
<template v-for="(item, i) in data"> @click="$router.back()">返回&emsp;></span>
<el-breadcrumb-item <span v-if="data[1]">{{ data[1].name }}</span>
v-if="i != data.length - 1"
:key="i"
:to="{ path: item.path || '/column', query: item.query }">
{{ item.name | i18nName($i18n)}}
</el-breadcrumb-item>
<el-breadcrumb-item
v-else
:key="i">
{{ item.name }}
</el-breadcrumb-item>
</template>
</el-breadcrumb>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['data'], props: ['data'],
data() { data () {
return { return {
}; };
}, },
methods: { methods: {
}, },
filters: {
i18nName(name,type) {
switch (name) {
case '专利':
return type.t('column.patent')
case '专著':
return type.t('column.monograph')
case '论文':
return type.t('column.paper')
case '科学研究':
return type.t('column.scientificResearch')
default:
return name
}
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.breadcrumb { .breadcrumb {
margin: 4px 0 16px; margin: 4px 0 16px;
/deep/.el-breadcrumb__item { span {
.is-link, .el-breadcrumb__separator { color: #0b1d30;
font-weight: 400;
color: $main-color;
} }
&:last-child { .back {
.is-link { margin-right: 12px;
color: #0B1D30; color: $main-color;
} cursor: pointer;
} }
}
} }
</style> </style>

98
src/pages/article/index.vue
Unescape View File

@ -52,6 +52,7 @@ export default {
return { return {
id: this.$route.query.articleId, id: this.$route.query.articleId,
columnId: +this.$route.query.id, columnId: +this.$route.query.id,
preview: this.$route.query.preview,
loaded: false, loaded: false,
routes: [], routes: [],
form: {}, form: {},
@ -77,54 +78,63 @@ export default {
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo () { getInfo () {
this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => { // 预览直接取缓存数据，不然就调接口
// 设置面包屑 if (this.preview) {
const { columnName, path, id } = this.$route.query const data = localStorage.getItem('article')
this.routes = [ this.form = data
{ if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
name: columnName || data.columnName, if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
path: path ? '/' + path : '', data.releaseTime = data.releaseTime.split(' ')[0]
query: { } else {
id: id || data.columnId this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
// 设置面包屑
const { columnName, path, id } = this.$route.query
this.routes = [
{
name: columnName || data.columnName,
path: path ? '/' + path : '',
query: {
id: id || data.columnId
}
},
{
name: data.title
} }
}, ]
{ // 文章被禁用了就直接返回
name: data.title if (data.isDisable) {
} this.$router.back()
]
// 文章被禁用了就直接返回
if (data.isDisable) {
this.$router.back()
} else {
const temId = data.articleTemplate
let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
if (temId === 25 || temId === 26) { // 会议活动/期刊详情
this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
} else { } else {
if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可 const temId = data.articleTemplate
if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段 let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
data.releaseTime = data.releaseTime.split(' ')[0] if (temId === 25 || temId === 26) { // 会议活动/期刊详情
this.form = data this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
this.columnId = data.columnId } else {
// 如果没上传banner if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
if (!data.bannerImg) { if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
const columns = await this.$post(this.api.listWithTree, { data.releaseTime = data.releaseTime.split(' ')[0]
siteId: this.site, this.form = data
columnName: '', this.columnId = data.columnId
templateId: '', // 如果没上传banner
typeId: '', if (!data.bannerImg) {
isSort: 1 const columns = await this.$post(this.api.listWithTree, {
}) siteId: this.site,
this.getBanner(columns.data) columnName: '',
this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : '' templateId: '',
} typeId: '',
isSort: 1
})
this.getBanner(columns.data)
this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
}
// 浏览量+1 // 浏览量+1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { }) this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
this.loaded = true this.loaded = true
}
} }
} }).catch(err => { })
}).catch(err => { }) }
}, },
// 列表详情 // 列表详情
getColumnInfo () { getColumnInfo () {

4
src/pages/contactUs/index.vue
Unescape View File

@ -17,9 +17,7 @@
<div class="contact"> <div class="contact">
<div class="fields"> <div class="fields">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<p class="text">{{ modules[1].form.address }}</p> <div v-html="modules[1].form.info"></div>
<p class="text">{{ modules[1].form.phone }}</p>
<p class="text">{{ modules[1].form.email }}</p>
</div> </div>
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic"
alt="" alt=""

10
src/pages/governance/index.vue
Unescape View File

@ -29,10 +29,12 @@
<div class="cards"> <div class="cards">
<ul> <ul>
<li v-for="(item, i) in modules[2].list" <template v-for="(item, i) in modules[2].list">
:key="i" <li v-if="item.isEnable"
:class="{active: curYear == i}" :key="i"
@click="depClick(i)">{{ item.title }}</li> :class="{active: curYear == i}"
@click="depClick(i)">{{ item.title }}</li>
</template>
</ul> </ul>
</div> </div>

181
src/pages/iasf/index.vue
Unescape View File

@ -116,83 +116,73 @@
</template> </template>
<ul class="news-carousel"> <ul class="news-carousel">
<li v-if="articles1.length"> <li v-if="articles1.length">
<img class="pic" <el-carousel :interval="5000"
src="http://10.10.11.7/images/iasf/8.png" height="284px"
alt=""> arrow="always">
<div class="texts"> <el-carousel-item v-for="item in articles1"
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6> :key="item">
<div class="des-wrap"> <img class="pic"
<p class="meta">{{ curArticle1.source }}</p> src="http://10.10.11.7/images/iasf/8.png"
<div class="des" alt="">
@click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div> <div class="texts">
</div> <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
<p class="date">{{ curArticle1.releaseTime }}</p> <div class="des-wrap">
</div> <p class="meta">{{ item.source }}</p>
<div class="action"> <div class="des"
<i class="el-icon-arrow-left dir" @click="toArtice(item, modules[6].form)">{{ item.title }}</div>
@click.stop="prevCarousel(1)"></i> </div>
<ul class="inds"> <p class="date">{{ item.releaseTime }}</p>
<li v-for="i in articles1.length > 3 ? 4 : articles1.length" </div>
:key="i" </el-carousel-item>
:class="{active: curInd1 == i - 1}" </el-carousel>
@click.stop="switchCarousel(1, i - 1)"></li>
</ul>
<i class="el-icon-arrow-right dir"
@click.stop="nextCarousel(1)"></i>
</div>
</li> </li>
<li v-if="articles2.length"> <li v-if="articles2.length">
<img class="pic" <el-carousel :interval="5000"
src="http://10.10.11.7/images/iasf/9.png" height="284px"
alt=""> arrow="always">
<div class="texts"> <el-carousel-item v-for="item in articles2"
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6> :key="item">
<div class="des-wrap"> <img class="pic"
<p class="meta">{{ curArticle2.classificationName }}</p> src="http://10.10.11.7/images/iasf/9.png"
<div class="des" alt="">
@click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div> <div class="texts">
</div> <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
<p class="date">{{ curArticle2.releaseTime }}</p> <div class="des-wrap">
</div> <p class="meta">{{ item.classificationName }}</p>
<div class="action"> <div class="des"
<i class="el-icon-arrow-left dir" @click="toArtice(item, modules[7].form)">{{ item.title }}</div>
@click.stop="prevCarousel(2)"></i> </div>
<ul class="inds"> <p class="date">{{ item.releaseTime }}</p>
<li v-for="i in articles2.length > 3 ? 4 : articles2.length" </div>
:key="i" </el-carousel-item>
:class="{active: curInd2 == i - 1}" </el-carousel>
@click.stop="switchCarousel(2, i - 1)"></li>
</ul>
<i class="el-icon-arrow-right dir"
@click.stop="nextCarousel(2)"></i>
</div>
</li> </li>
<li v-if="articles3.length"> <li v-if="articles3.length">
<img class="pic" <el-carousel :interval="5000"
src="http://10.10.11.7/images/iasf/10.png" height="284px"
alt=""> arrow="always">
<div class="texts"> <el-carousel-item v-for="item in articles3"
<h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6> :key="item">
<div class="des-wrap" <img class="pic"
style="margin-top: 16px"> src="http://10.10.11.7/images/iasf/10.png"
<div class="des" alt="">
@click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div> <div class="texts">
</div> <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
<p v-if="curArticle3.activityStartTime" <div class="activity">
class="date">{{ curArticle3.activityStartTime.split(' ')[0] }}</p> <div v-if="item.activityStartTime"
</div> class="date-y">
<div class="action"> <p class="d">{{ item.activityStartTime.split(' ')[0].split('-')[2] }}</p>
<i class="el-icon-arrow-left dir" <p class="y">{{ item.activityStartTime.split(' ')[0].split('-')[0] + '-' + item.activityStartTime.split(' ')[0].split('-')[1] }}</p>
@click.stop="prevCarousel(3)"></i> </div>
<ul class="inds"> <div class="des-wrap">
<li v-for="i in articles3.length > 3 ? 4 : articles3.length" <p class="meta">{{ item.classificationName }}</p>
:key="i" <div class="des"
:class="{active: curInd3 == i - 1}" @click="toArtice(item, modules[8].form)">{{ item.title }}</div>
@click.stop="switchCarousel(3, i - 1)"></li> </div>
</ul> </div>
<i class="el-icon-arrow-right dir" </div>
@click.stop="nextCarousel(3)"></i> </el-carousel-item>
</div> </el-carousel>
</li> </li>
</ul> </ul>
</div> </div>
@ -684,7 +674,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 50px 30px; padding: 50px;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
@ -712,6 +702,49 @@ export default {
.date { .date {
font-size: 16px; font-size: 16px;
} }
.activity {
display: flex;
align-items: center;
margin-top: 10px;
.meta {
margin-bottom: 5px;
}
.des-wrap {
height: auto;
margin: 0;
}
}
.date-y {
margin-right: 20px;
text-align: center;
color: #fff;
.d {
font-size: 28px;
}
.y {
padding-top: 5px;
margin-top: 5px;
font-size: 16px;
border-top: 1px solid #686868;
}
}
/deep/.el-carousel__indicators--horizontal {
bottom: 20px;
.el-carousel__indicator--horizontal {
width: 10px;
height: 10px;
padding: 0;
margin-right: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
&.is-active {
background: #1583ff;
}
}
.el-carousel__button {
width: 0;
}
}
.action { .action {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;

62
src/pages/lightSources/index.vue
Unescape View File

@ -21,14 +21,6 @@
:src="modules[1].form.pic" :src="modules[1].form.pic"
:preview-src-list="[modules[1].form.pic]"> :preview-src-list="[modules[1].form.pic]">
</el-image> </el-image>
<!-- <img class="block-pic br wow fadeInLeft"
data-wow-delay="0.8s"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
width="100%"
height="536"
:src="modules[1].form.pic"
alt=""
@click="openLink(modules[1].form)"> -->
</div> </div>
</div> </div>
@ -46,50 +38,56 @@
<thead> <thead>
<tr> <tr>
<th>光源名称</th> <th>光源名称</th>
<th>国家</th> <th>国家和地区</th>
<th>电子束能量（GeV）</th> <th>地点</th>
<th>能量（GeV）</th>
<th>储存环周长(m)</th> <th>储存环周长(m)</th>
<th>实验站数量</th> <th>光束线/条</th>
<th>代际</th> <th>代际</th>
<th>建成/改造时间</th>
<th>发射度(nm.rad)</th> <th>发射度(nm.rad)</th>
<th>状态</th> <th>状态</th>
<th>建成时间</th>
</tr> </tr>
</thead> </thead>
<tr v-for="(item, i) in modules[2].list" <template v-if="modules[2].list.length">
:key="i"> <tr v-for="(item, i) in modules[2].list"
<td>{{ item.name }}</td> :key="i">
<td>{{ item.country }}</td> <td :class="{link: isLink(item.link.linkName)}"
<td>{{ item.gev }}</td> @click="openLink(item)">{{ item.name }}</td>
<td>{{ item.storage }}</td> <td>{{ item.country }}</td>
<td>{{ item.stations }}</td> <td>{{ item.address }}</td>
<td>{{ item.intergenerational }}</td> <td>{{ item.gev }}</td>
<td>{{ item.time }}</td> <td>{{ item.storage }}</td>
<td>{{ item.emittance }}</td> <td>{{ item.stations }}</td>
<td>{{ item.status }}</td> <td>{{ item.intergenerational }}</td>
</tr> <td>{{ item.emittance }}</td>
<td>{{ item.status }}</td>
<td>{{ item.time }}</td>
</tr>
</template>
</table> </table>
<table v-else <table v-else
class="table"> class="table">
<thead> <thead>
<tr> <tr>
<th>光源名称</th> <th>光源名称</th>
<th>国家</th> <th>国家和地区</th>
<th>地点</th> <th>地点</th>
<th>加速器技术</th> <th>加速器技术</th>
<th>能量/GeV</th> <th>能量/GeV</th>
<th>波长范围/nm</th> <th>波长范围/nm</th>
<th>重复频率/Hz Repetition rate</th> <th>重复频率/Hz</th>
<th>设施长度/m Overall length</th> <th>设施长度/m</th>
<th>线站数量</th> <th>实验站/个</th>
<th>状态</th> <th>状态</th>
<th>出光时间</th> <th>建成时间</th>
</tr> </tr>
</thead> </thead>
<template v-if="modules[3].list.length"> <template v-if="modules[3].list.length">
<tr v-for="(item, i) in modules[3].list" <tr v-for="(item, i) in modules[3].list"
:key="i"> :key="i">
<td>{{ item.name }}</td> <td :class="{link: isLink(item.link.linkName)}"
@click="openLink(item)">{{ item.name }}</td>
<td>{{ item.country }}</td> <td>{{ item.country }}</td>
<td>{{ item.address }}</td> <td>{{ item.address }}</td>
<td>{{ item.accelerator }}</td> <td>{{ item.accelerator }}</td>
@ -204,6 +202,10 @@ export default {
font-size: 0.9rem; font-size: 0.9rem;
text-align: left; text-align: left;
} }
.link {
color: #1583ff;
cursor: pointer;
}
} }
.copyright { .copyright {
margin-top: 10px; margin-top: 10px;

39
src/pages/overview/index.vue
Unescape View File

@ -121,11 +121,17 @@
data-wow-delay="0.5s">{{ modules[8].form.des }}</p> data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<div class="scan-inner"> <div class="scan-inner">
<div class="left"> <div class="left">
<div class="line" <template v-for="(item, i) in modules[9].list">
v-for="(item, i) in modules[9].list" <div v-if="item.isEnable"
:key="i"> class="line"
<p class="text">{{ item.title }}</p> :key="i">
</div> <img v-if="item.pic"
:src="item.pic"
alt=""
class="icon">
<p class="text">{{ item.title }}</p>
</div>
</template>
<ul class="total"> <ul class="total">
<li> <li>
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
@ -350,31 +356,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
&:before { .icon {
content: '';
min-width: 50px;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 20px; margin-right: 20px;
background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
}
&:nth-child(2):before {
background-image: url(http://10.10.11.7/images/overview/8.png);
}
&:nth-child(3):before {
background-image: url(http://10.10.11.7/images/overview/9.png);
}
&:nth-child(4):before {
background-image: url(http://10.10.11.7/images/overview/10.png);
}
&:nth-child(5):before {
background-image: url(http://10.10.11.7/images/overview/11.png);
}
&:nth-child(6):before {
background-image: url(http://10.10.11.7/images/overview/12.png);
}
&:nth-child(7):before {
background-image: url(http://10.10.11.7/images/overview/13.png);
} }
.text { .text {
font-size: 1rem; font-size: 1rem;

822
src/pages/talentCenter/index.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt=""> <img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -10,58 +12,89 @@
<div class="article"> <div class="article">
<div class="left"> <div class="left">
<h6 class="talent-title">{{ modules[1].form.title }}</h6> <h6 class="talent-title">{{ modules[1].form.title }}</h6>
<div class="talent-text" v-html="modules[1].form.des"></div> <div class="talent-text"
v-html="modules[1].form.des"></div>
<ul class="recruit"> <ul class="recruit">
<li> <li>
<img class="pic" :src="modules[2].form.pic" alt=""> <img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<div class="flex j-between a-center"> <div class="flex j-between a-center">
<h6 class="c-title">{{ modules[3].form.title }}</h6> <h6 class="c-title">{{ modules[3].form.title }}</h6>
<div v-if="isLink(modules[3].form.link.linkName)" class="more" @click="openLink(modules[3].form)">查看更多 ></div> <div v-if="isLink(modules[3].form.link.linkName)"
class="more"
@click="openLink(modules[3].form)">查看更多 ></div>
</div> </div>
<div class="des" v-html="modules[3].form.des"></div> <div class="des"
v-html="modules[3].form.des"></div>
<p class="hot">热门岗位</p> <p class="hot">热门岗位</p>
<div class="labels"> <div class="labels">
<p v-for="(item, i) in modules[4].list" :key="i" class="label">{{ item.title }}</p> <template v-for="(item, i) in modules[4].list">
<p v-if="item.isEnable"
:key="i"
class="label">{{ item.title }}</p>
</template>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" :src="modules[5].form.pic" alt=""> <img class="pic"
:src="modules[5].form.pic"
alt="">
<div class="texts"> <div class="texts">
<div class="flex j-between a-center"> <div class="flex j-between a-center">
<h6 class="c-title">{{ modules[6].form.title }}</h6> <h6 class="c-title">{{ modules[6].form.title }}</h6>
<div v-if="isLink(modules[6].form.link.linkName)" class="more" @click="openLink(modules[6].form)">查看更多 ></div> <div v-if="isLink(modules[6].form.link.linkName)"
class="more"
@click="openLink(modules[6].form)">查看更多 ></div>
</div> </div>
<div class="des" v-html="modules[6].form.des"></div> <div class="des"
v-html="modules[6].form.des"></div>
<p class="hot">热门岗位</p> <p class="hot">热门岗位</p>
<div class="labels"> <div class="labels">
<p v-for="(item, i) in modules[7].list" :key="i" class="label">{{ item.title }}</p> <template v-for="(item, i) in modules[7].list">
<p v-if="item.isEnable"
:key="i"
class="label">{{ item.title }}</p>
</template>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<ul class="notice"> <ul class="notice">
<li <li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
:class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }" @click="openLink(modules[8].form)">
@click="openLink(modules[8].form)"> <img class="pic"
<img class="pic" :src="modules[8].form.pic" alt=""> :src="modules[8].form.pic"
<p class="text">{{ modules[8].form.title }}</p> alt="">
<p class="text">{{ modules[8].form.title }}</p>
</li> </li>
<li <li :class="{ 'cursor-pointer': isLink(modules[9].form.link.linkName) }"
:class="{ 'cursor-pointer': isLink(modules[9].form.link.linkName) }" @click="openLink(modules[8].form)">
@click="openLink(modules[8].form)"> <img class="pic"
<img class="pic" :src="modules[9].form.pic" alt=""> :src="modules[9].form.pic"
<p class="text">{{ modules[9].form.title }}</p> alt="">
<p class="text">{{ modules[9].form.title }}</p>
</li> </li>
</ul> </ul>
</div> </div>
<div class="right"> <div class="right">
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree> <el-tree class="column"
ref="column"
:data="columns"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
@node-click="columnTo"></el-tree>
<p class="l-title">{{$t('column.hot')}}</p> <p class="l-title">{{$t('column.hot')}}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)"> <li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
@ -69,7 +102,10 @@
<p class="l-title">{{$t('column.latestNews')}}</p> <p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)"> <li v-for="(item, i) in news"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
@ -88,7 +124,7 @@ import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins, articleMixins], mixins: [mixins, articleMixins],
data() { data () {
return { return {
columnId: '', columnId: '',
form: {}, form: {},
@ -101,13 +137,13 @@ export default {
hots: [] hots: []
} }
}, },
mounted() { mounted () {
this.getColumn() this.getColumn()
this.getArticle() this.getArticle()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { getInfo () {
// 预览/详情 // 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) { if (data.length) {
@ -118,34 +154,34 @@ export default {
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => {}) }).catch(err => { })
}, },
// 资讯 // 资讯
getColumn() { getColumn () {
this.$post(this.api.listWithTreeMenuVisible, { this.$post(this.api.listWithTreeMenuVisible, {
siteId: this.$route.query.siteId || this.$store.state.content.site, siteId: this.$route.query.siteId || this.$store.state.content.site,
columnName: '', columnName: '',
templateId: '', templateId: '',
typeId : '', typeId: '',
isSort: 1 isSort: 1
}).then(({ data }) => { }).then(({ data }) => {
this.columns = data this.columns = data
this.getInfo() this.getInfo()
}).catch(err => {}) }).catch(err => { })
this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => { this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
this.hots = Util.removeTag(data) this.hots = Util.removeTag(data)
}).catch(err => {}) }).catch(err => { })
}, },
// 最新资讯 // 最新资讯
getArticle() { getArticle () {
this.$post(this.api.newlyPublishedArticles, { this.$post(this.api.newlyPublishedArticles, {
pageNum: 1, pageNum: 1,
pageSize: 5, pageSize: 5,
siteId: this.$route.query.siteId || this.$store.state.content.site siteId: this.$route.query.siteId || this.$store.state.content.site
}).then(({ data }) => { }).then(({ data }) => {
this.news = Util.removeTag(data.records) this.news = Util.removeTag(data.records)
}).catch(res => {}) }).catch(res => { })
}, },
} }
}; };
@ -153,443 +189,443 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import '../../styles/page/page.scss';
.wrap { .wrap {
background-color: #F9FAFA; background-color: #f9fafa;
} }
.content { .content {
width: 1400px; width: 1400px;
} }
.article { .article {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 66%; width: 66%;
.talent-title { .talent-title {
padding-bottom: 10px; padding-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: #666;
border-bottom: 1px solid #EAEEF2; border-bottom: 1px solid #eaeef2;
} }
.talent-text { .talent-text {
margin: 20px 0; margin: 20px 0;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
line-height: 28px; line-height: 28px;
p { p {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
}
.recruit {
li {
display: flex;
padding: 20px;
margin-bottom: 24px;
background-color: #fff;
}
.pic {
width: 410px;
height: 250px;
margin-right: 20px;
}
.c-title {
font-size: 1.2rem;
columns: #333;
}
.more {
font-size: .8rem;
color: #0648A8;
cursor: pointer;
}
.des {
margin: 20px 0;
font-size: 1rem;
color: #666;
line-height: 22px;
}
.hot {
margin-bottom: 10px;
font-size: 1.1rem;
color: #333;
}
.labels {
display: flex;
flex-wrap: wrap;
} }
.label { .recruit {
padding: 5px 15px; li {
margin: 0 15px 15px 0; display: flex;
font-size: 1rem; padding: 20px;
border-radius: 22px; margin-bottom: 24px;
border: 1px solid #666; background-color: #fff;
}
.pic {
width: 410px;
height: 250px;
margin-right: 20px;
}
.c-title {
font-size: 1.2rem;
columns: #333;
}
.more {
font-size: 0.8rem;
color: #0648a8;
cursor: pointer;
}
.des {
margin: 20px 0;
font-size: 1rem;
color: #666;
line-height: 22px;
}
.hot {
margin-bottom: 10px;
font-size: 1.1rem;
color: #333;
}
.labels {
display: flex;
flex-wrap: wrap;
}
.label {
padding: 5px 15px;
margin: 0 15px 15px 0;
font-size: 1rem;
border-radius: 22px;
border: 1px solid #666;
}
} }
} .notice {
.notice { display: flex;
display: flex; li {
li { position: relative;
position: relative; width: calc((100% - 20px) / 2);
width: calc((100% - 20px) / 2); height: 300px;
height: 300px; padding: 20px;
padding: 20px; background-color: #fff;
background-color: #fff; }
.pic {
width: 100%;
height: 100%;
}
.text {
position: absolute;
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
font-size: 1.6rem;
line-height: 66px;
text-align: center;
color: #fff;
background: rgba(32, 57, 81, 0.68);
}
} }
.pic { .right {
width: 100%; width: 20%;
height: 100%;
} }
.text { .column {
position: absolute; width: 100%;
bottom: 20px; margin-bottom: 25px;
left: 20px;
width: calc(100% - 40px);
font-size: 1.6rem;
line-height: 66px;
text-align: center;
color: #fff;
background: rgba(32,57,81,0.68);
} }
} /deep/.el-tree-node__content {
.right { height: 44px;
width: 20%; background-color: #e5edf8;
} border-bottom: 2px solid #fff;
.column {
width: 100%;
margin-bottom: 25px;
}
/deep/.el-tree-node__content {
height: 44px;
background-color: #E5EDF8;
border-bottom: 2px solid #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
color: #fff;
background-color: #0f5698;
}
.list {
margin-bottom: 20px;
li {
padding: 16px 0;
border-bottom: 1px solid #D8D8D8;
} }
.text { /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
margin-bottom: 5px; color: #fff;
font-size: 14px; background-color: #0f5698;
cursor: pointer;
&:hover {
color: $main-color;
}
} }
.date { .list {
font-size: 12px; margin-bottom: 20px;
color: #999; li {
padding: 16px 0;
border-bottom: 1px solid #d8d8d8;
}
.text {
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
} }
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.content { .content {
width: 98%; width: 98%;
}
.article {
flex-direction: column;
.left, .right {
width: 100%;
} }
.left { .article {
margin-bottom: 30px; flex-direction: column;
.left,
.right {
width: 100%;
}
.left {
margin-bottom: 30px;
}
} }
}
} }
@media (min-width: 280px) and (max-width: 750px) { @media (min-width: 280px) and (max-width: 750px) {
.article {
.recruit {
li {
flex-direction: column;
}
.pic {
width: 100%;
margin-bottom: 10px;
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
}
@media (max-width: 1200px) {
.content {
.article { .article {
flex-direction: column;
.left {
width: 100%;
.recruit { .recruit {
li { li {
flex-direction: column; flex-direction: column;
.pic {
width: 100%;
} }
.texts { .pic {
margin-top: .8rem; width: 100%;
margin-bottom: 10px;
} }
}
} }
.notice { .notice {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
} }
} }
} }
.right{ }
width: 100%; @media (max-width: 1200px) {
.el-tree { .content {
display: none; .article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
.right {
width: 100%;
.el-tree {
display: none;
}
}
} }
}
} }
}
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 13rem; height: 13rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 7rem; top: 7rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 13rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 13rem; .recruit {
li {
.pic {
height: 13rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 13rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 15rem; height: 15rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 7rem; top: 7rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 15rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 15rem; .recruit {
li {
.pic {
height: 15rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 15rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 18rem; height: 18rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 10rem; top: 10rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 18rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 18rem; .recruit {
li {
.pic {
height: 18rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 18rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 20rem; height: 20rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 12rem; top: 12rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 22rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 22rem; .recruit {
li {
.pic {
height: 22rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 22rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 22rem; height: 22rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 14rem; top: 14rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 26rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 26rem; .recruit {
li {
.pic {
height: 26rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 26rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 26rem; height: 26rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 16rem; top: 16rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 30rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 30rem; .recruit {
li {
.pic {
height: 30rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 30rem;
}
}
}
} }
}
} }
}
} }
}
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 30rem; height: 30rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 18rem; top: 18rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 35rem;
} }
}
} }
.notice { }
li { .content {
height: auto; .article {
.pic { .left {
height: 35rem; .recruit {
li {
.pic {
height: 35rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 35rem;
}
}
}
} }
}
} }
}
} }
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save