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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      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. 824
      src/pages/talentCenter/index.vue

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

@ -1,67 +1,35 @@
<template>
<!-- 面包屑 -->
<div class="breadcrumb">
<el-breadcrumb separator=">">
<template v-for="(item, i) in data">
<el-breadcrumb-item
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>
<span class="back"
@click="$router.back()">返回&emsp;></span>
<span v-if="data[1]">{{ data[1].name }}</span>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
};
},
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
}
}
}
props: ['data'],
data () {
return {
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.breadcrumb {
margin: 4px 0 16px;
/deep/.el-breadcrumb__item {
.is-link, .el-breadcrumb__separator {
font-weight: 400;
color: $main-color;
margin: 4px 0 16px;
span {
color: #0b1d30;
}
&:last-child {
.is-link {
color: #0B1D30;
}
.back {
margin-right: 12px;
color: $main-color;
cursor: pointer;
}
}
}
</style>

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

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

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

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

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

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

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

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

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

@ -21,14 +21,6 @@
:src="modules[1].form.pic"
:preview-src-list="[modules[1].form.pic]">
</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>
@ -46,50 +38,56 @@
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>电子束能量（GeV）</th>
<th>国家和地区</th>
<th>地点</th>
<th>能量（GeV）</th>
<th>储存环周长(m)</th>
<th>实验站数量</th>
<th>光束线/条</th>
<th>代际</th>
<th>建成/改造时间</th>
<th>发射度(nm.rad)</th>
<th>状态</th>
<th>建成时间</th>
</tr>
</thead>
<tr v-for="(item, i) in modules[2].list"
:key="i">
<td>{{ item.name }}</td>
<td>{{ item.country }}</td>
<td>{{ item.gev }}</td>
<td>{{ item.storage }}</td>
<td>{{ item.stations }}</td>
<td>{{ item.intergenerational }}</td>
<td>{{ item.time }}</td>
<td>{{ item.emittance }}</td>
<td>{{ item.status }}</td>
</tr>
<template v-if="modules[2].list.length">
<tr v-for="(item, i) in modules[2].list"
:key="i">
<td :class="{link: isLink(item.link.linkName)}"
@click="openLink(item)">{{ item.name }}</td>
<td>{{ item.country }}</td>
<td>{{ item.address }}</td>
<td>{{ item.gev }}</td>
<td>{{ item.storage }}</td>
<td>{{ item.stations }}</td>
<td>{{ item.intergenerational }}</td>
<td>{{ item.emittance }}</td>
<td>{{ item.status }}</td>
<td>{{ item.time }}</td>
</tr>
</template>
</table>
<table v-else
class="table">
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>国家和地区</th>
<th>地点</th>
<th>加速器技术</th>
<th>能量/GeV</th>
<th>波长范围/nm</th>
<th>重复频率/Hz Repetition rate</th>
<th>设施长度/m Overall length</th>
<th>线站数量</th>
<th>重复频率/Hz</th>
<th>设施长度/m</th>
<th>实验站/个</th>
<th>状态</th>
<th>出光时间</th>
<th>建成时间</th>
</tr>
</thead>
<template v-if="modules[3].list.length">
<tr v-for="(item, i) in modules[3].list"
: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.address }}</td>
<td>{{ item.accelerator }}</td>
@ -204,6 +202,10 @@ export default {
font-size: 0.9rem;
text-align: left;
}
.link {
color: #1583ff;
cursor: pointer;
}
}
.copyright {
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>
<div class="scan-inner">
<div class="left">
<div class="line"
v-for="(item, i) in modules[9].list"
:key="i">
<p class="text">{{ item.title }}</p>
</div>
<template v-for="(item, i) in modules[9].list">
<div v-if="item.isEnable"
class="line"
:key="i">
<img v-if="item.pic"
:src="item.pic"
alt=""
class="icon">
<p class="text">{{ item.title }}</p>
</div>
</template>
<ul class="total">
<li>
<p class="num">{{ modules[10].form.title }}</p>
@ -350,31 +356,10 @@ export default {
display: flex;
align-items: center;
margin-bottom: 30px;
&:before {
content: '';
min-width: 50px;
.icon {
width: 50px;
height: 50px;
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 {
font-size: 1rem;

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

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