You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
622 lines
16 KiB
622 lines
16 KiB
<template>
|
|
<div>
|
|
<div class="news">
|
|
<el-row :gutter="38">
|
|
<el-col :span="12">
|
|
<div class="news__header">
|
|
<div class="news__header--diamond">热点资料</div>
|
|
<div class="news__header--line">
|
|
<span @click="toList({ sort_name: 'dianjiliang' })">更多<i class="el-icon-d-arrow-right" style="font-weight: 600;"></i></span>
|
|
</div>
|
|
</div>
|
|
<el-skeleton animated :loading="loading">
|
|
<template #template>
|
|
<div class="news__list">
|
|
<el-skeleton-item v-for="i in 5" variant="text" style="width: 60%" :style="{ 'margin-top': i !== 1 ? '20px' : '' }"/>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<ul class="news__list">
|
|
<li class="news__list--item" v-for="i in details.hot">
|
|
<el-dropdown trigger="click" placement="bottom-start">
|
|
<div @click="getDetail(i)">{{ i.biaoti }}</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu v-if="load">
|
|
<div style="width: 100px;position: relative;height: 60px;">
|
|
<Spin fix></Spin>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
<el-dropdown-menu v-else>
|
|
<template v-if="uploadsList.length > 0">
|
|
<el-dropdown-item :command="item" v-for="item in uploadsList">
|
|
<div style="display: flex;align-items: center;">
|
|
<p style="flex: 1;">{{ item.name }}</p>
|
|
<div class="list__item--btn" @click="open(item)">预览</div>
|
|
<i class="el-icon-download" @click="down(item)"></i>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-dropdown-item disabled>
|
|
暂无内容
|
|
</el-dropdown-item>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div>{{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</el-skeleton>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="news__header">
|
|
<div class="news__header--diamond">最新资料</div>
|
|
<div class="news__header--line">
|
|
<span @click="toList({ sort_name: 'created_at' })">更多<i class="el-icon-d-arrow-right" style="font-weight: 600;"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<el-skeleton animated :loading="loading">
|
|
<template #template>
|
|
<div class="news__list">
|
|
<el-skeleton-item v-for="i in 5" variant="text" style="width: 60%" :style="{ 'margin-top': i !== 1 ? '20px' : '' }"/>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<ul class="news__list">
|
|
<li class="news__list--item" v-for="i in details.last">
|
|
<el-dropdown trigger="click" placement="bottom-start">
|
|
<div @click="getDetail(i)">{{ i.biaoti }}</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu v-if="load">
|
|
<div style="width: 100px;position: relative;height: 60px;">
|
|
<Spin fix></Spin>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
<el-dropdown-menu v-else>
|
|
<template v-if="uploadsList.length > 0">
|
|
<el-dropdown-item :command="item" v-for="item in uploadsList">
|
|
<div style="display: flex;align-items: center;">
|
|
<p style="flex: 1;">{{ item.name }}</p>
|
|
<div class="list__item--btn" @click="open(item)">预览</div>
|
|
<i class="el-icon-download" @click="down(item)"></i>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-dropdown-item disabled>
|
|
暂无内容
|
|
</el-dropdown-item>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div>{{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</el-skeleton>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div class="department">
|
|
<div class="department__title">
|
|
<div class="department__title--linear"></div>
|
|
<div class="department__title--center">
|
|
<div>部门</div>
|
|
<div>Department</div>
|
|
</div>
|
|
<div class="department__title--linear"></div>
|
|
</div>
|
|
|
|
<el-skeleton :loading="loading" animated>
|
|
<template #template>
|
|
<div class="department__list">
|
|
<el-skeleton-item v-for="i in 3" class="department__list--item" variant="rect"></el-skeleton-item>
|
|
<div class="department__list--item">
|
|
<div @click="$router.push('/index/department')">更多...</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<div>
|
|
<div class="department__list">
|
|
<div v-for="item in departments" class="department__list--item" @click="toList({ dept:item })">
|
|
<p>{{ item.name }}</p>
|
|
</div>
|
|
<div class="department__list--item">
|
|
<div @click="$router.push('/index/department')">更多...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
</div>
|
|
|
|
<el-skeleton animated :loading="loading">
|
|
<template #template>
|
|
<div>
|
|
<div class="label">
|
|
<div class="label__first" @click="$router.push('/index/label')">
|
|
<el-image
|
|
style="width: 49px; height: 49px; margin-bottom: 29px"
|
|
:src="require('@/assets/reception/icon-light.png')"
|
|
></el-image>
|
|
<div>标签</div>
|
|
</div>
|
|
|
|
<div class="label-group" style="margin-left: 20px;">
|
|
<el-skeleton-item variant="rect" style="height: 100%;"></el-skeleton-item>
|
|
<el-skeleton-item variant="rect" style="height: 100%;margin-left: 20px;"></el-skeleton-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<div>
|
|
<div class="label">
|
|
<div class="label__first" @click="$router.push('/index/label')">
|
|
<el-image
|
|
style="width: 49px; height: 49px; margin-bottom: 29px"
|
|
:src="require('@/assets/reception/icon-light.png')"
|
|
></el-image>
|
|
<div>标签</div>
|
|
</div>
|
|
|
|
<div class="label-group" v-for="(group, index) in labelGroup">
|
|
<div
|
|
:class="
|
|
index % 2
|
|
? 'label-group__left--single'
|
|
: 'label-group__left--complex'
|
|
"
|
|
>
|
|
<div
|
|
v-for="(item, index2) in group.left"
|
|
:style="{ background: labelColor(index2) }"
|
|
:class="
|
|
index % 2 ? 'single-item label-item' : 'complex-item label-item'
|
|
"
|
|
@click="toList({ tag:item })"
|
|
>
|
|
<p>{{ item.mingcheng }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="label-group__right label-item"
|
|
:style="{ background: labelColor(index + 3) }"
|
|
v-if="group.right"
|
|
@click="toList({ tag:item })"
|
|
>
|
|
<p>{{ group.right.mingcheng }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { download } from '@/utils/downloadRequest'
|
|
import {home, tags, departments, detail} from '@/api/reception';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
load: false,
|
|
uploadsList: [],
|
|
loading: false,
|
|
departments: [],
|
|
labels: [
|
|
"学籍管理",
|
|
"人才",
|
|
"补助",
|
|
"培养方案",
|
|
"综合科技",
|
|
"党建工作创新奖",
|
|
"处置",
|
|
"党建工作创新奖",
|
|
"处置",
|
|
"党建工作创新奖",
|
|
"处置",
|
|
],
|
|
labelGroup: [],
|
|
details: { hot: [], last: [] }
|
|
};
|
|
},
|
|
methods: {
|
|
open (e) {
|
|
window.open(e.url)
|
|
},
|
|
down (e) {
|
|
download (e.url, 'get', {}, e.name)
|
|
},
|
|
|
|
async getDetail (i) {
|
|
this.load = true
|
|
const res = await detail({
|
|
table_name: 'materials',
|
|
id: i.id
|
|
})
|
|
this.uploadsList = res.detail?.id_material_fujian_uploads_material_id_relation || []
|
|
this.load = false
|
|
},
|
|
|
|
async getInfo () {
|
|
this.loading = true;
|
|
this.details = await home();
|
|
const res1 = await tags({table_name: 'tags'})
|
|
this.labels = res1.tags.slice(0,10)
|
|
const res2 = await departments({table_name: 'departments'})
|
|
this.departments = res2.department.slice(0,14)
|
|
this.loading = false
|
|
},
|
|
|
|
labelsHandler() {
|
|
let groups = Math.ceil(this.labels.length / 4);
|
|
for (let i = 0; i < groups; i++) {
|
|
let group = this.labels.slice(i * 4, i * 4 + 4);
|
|
this.labelGroup.push({
|
|
left: group.slice(0, 3),
|
|
right: group[3] ? group[3] : false,
|
|
});
|
|
}
|
|
console.log(this.labelGroup);
|
|
},
|
|
|
|
toList ({ tag, dept, leixing, sort_name }) {
|
|
console.log(111, sort_name, leixing)
|
|
tag?.id ? this.$store.commit('reception/SET_SELECTED',{ key: 'tag_id', value: tag.id, refresh: true }) : ''
|
|
dept?.id ? this.$store.commit('reception/SET_SELECTED',{ key: 'dept_id', value: dept.id, refresh: true }) : ''
|
|
leixing ? this.$store.commit('reception/SET_SELECTED',{ key: 'leixing', value: leixing }) : ''
|
|
sort_name ? this.$store.commit('reception/SET_SELECTED',{ key: 'sort_name', value: sort_name, refresh: true }) : ''
|
|
this.$router.push(`/index/list1?${this.$store.getters.select}`)
|
|
}
|
|
},
|
|
computed: {
|
|
labelColor() {
|
|
let color = ["#85CBC8", "#67BCE6", "#5F97CA", "#7792C4"];
|
|
|
|
return function (index) {
|
|
return color[index % 4];
|
|
};
|
|
},
|
|
},
|
|
async created() {
|
|
await this.getInfo();
|
|
this.labelsHandler();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.news {
|
|
padding: 33px 18.75% 38px 18.75%;
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
&--diamond {
|
|
width: 108px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
|
|
z-index: 1;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #cad8e4;
|
|
transform: skewX(20deg);
|
|
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #3c7ac0;
|
|
transform: skewX(-20deg);
|
|
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
&--line {
|
|
flex: 1;
|
|
color: #999;
|
|
text-align: right;
|
|
border-bottom: 1px solid #c7d9e5;
|
|
|
|
margin-left: 10px;
|
|
& > span {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__list {
|
|
padding: 34px 0 0 26px;
|
|
|
|
&--item {
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
transition: all 0.2ms;
|
|
|
|
position: relative;
|
|
|
|
&:hover {
|
|
color: #3c7ac0;
|
|
|
|
& > div:nth-child(2) {
|
|
color: #333;
|
|
}
|
|
&::before {
|
|
background: #3c7ac0;
|
|
}
|
|
}
|
|
& > div {
|
|
font-size: 13px;
|
|
|
|
&:nth-child(2) {
|
|
color: #999999;
|
|
transition: all 0.2s;
|
|
}
|
|
}
|
|
&::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 6px;
|
|
background: #cad8e4;
|
|
transition: all 0.2s;
|
|
|
|
position: absolute;
|
|
top: calc(50% - 3px);
|
|
left: -12px;
|
|
}
|
|
|
|
& + li {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.department {
|
|
background: url("../../../assets/reception/department-bkg.png") no-repeat
|
|
center;
|
|
background-size: cover;
|
|
|
|
margin-top: 37px;
|
|
padding: 32px 18.7% 19px 18.7%;
|
|
|
|
&__title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&--linear {
|
|
background: #fff;
|
|
height: 2px;
|
|
flex: 1;
|
|
}
|
|
&--center {
|
|
font-weight: 500;
|
|
font-size: 21px;
|
|
line-height: 21px;
|
|
color: #fff;
|
|
text-align: center;
|
|
width: 144px;
|
|
|
|
margin: 0 14px;
|
|
position: relative;
|
|
& > div:nth-child(1) {
|
|
padding: 2px 0 7px 0;
|
|
}
|
|
& > div:nth-child(2) {
|
|
font-size: 13px;
|
|
line-height: 13px;
|
|
color: #b6cef0;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 20px;
|
|
height: 24px;
|
|
border-top: 3px solid #fff;
|
|
border-left: 3px solid #fff;
|
|
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
width: 20px;
|
|
height: 24px;
|
|
border-bottom: 3px solid #fff;
|
|
border-right: 3px solid #fff;
|
|
|
|
position: absolute;
|
|
bottom: -3px;
|
|
right: -3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-gap: 17px;
|
|
|
|
margin-top: 41px;
|
|
|
|
&--item {
|
|
background: #fff;
|
|
//width: 176px;
|
|
height: 80px;
|
|
color: #1a5ca3;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2ms;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
|
|
margin-bottom: 20px;
|
|
padding: 0 10px;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: url("../../../assets/reception/department-item1.png")
|
|
no-repeat 0 0;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
padding: 42px 18.7% 39px 18.7%;
|
|
|
|
& > div:nth-child(1) {
|
|
height: 161px;
|
|
width: 140px;
|
|
background: #f29d5b;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
& > div {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&-group {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.label-item {
|
|
flex: 1;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.4s;
|
|
|
|
&:hover {
|
|
transform: scale(1.05, 1.05);
|
|
}
|
|
}
|
|
&__left--single {
|
|
flex: 2.2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
|
|
.single-item {
|
|
height: calc(50% - 6px);
|
|
|
|
margin-left: 12px;
|
|
}
|
|
& > div:only-child {
|
|
height: 100%;
|
|
}
|
|
& > div:nth-last-child(1) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
&__left--complex {
|
|
flex: 2.2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
|
|
.complex-item {
|
|
height: calc(50% - 6px);
|
|
|
|
margin-left: 12px;
|
|
}
|
|
& > div:only-child {
|
|
height: 100%;
|
|
}
|
|
& > div:nth-child(1) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
&__right {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
.list__item--btn {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: #247EC3;
|
|
border-radius: 30px;
|
|
border: 1px solid #247EC3;
|
|
line-height: 20px;
|
|
transition: all .2s;
|
|
|
|
padding: 5px 17px;
|
|
margin: 0 20px;
|
|
&:hover {
|
|
color: #fff;
|
|
background: #247EC3;
|
|
}
|
|
}
|
|
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
|
|
background: none!important;
|
|
color: #247EC3!important;
|
|
}
|
|
@media screen and (max-width: 900px) {
|
|
.label-item > p {
|
|
font-size: 12px;
|
|
width: 20px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|