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.
147 lines
4.5 KiB
147 lines
4.5 KiB
<template>
|
|
<div class="gd-container">
|
|
<div class="top">
|
|
<div
|
|
class="tab-item"
|
|
:class="{ 'select-tab': index == selectTab }"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
@click="changeTab(item, index)"
|
|
>
|
|
{{ item.tabName }}
|
|
</div>
|
|
</div>
|
|
<div class="gd-main">
|
|
<newsTemplate v-if="selectTab == 0" @openCultural="openCultural" :typeCode="typeCode"></newsTemplate>
|
|
<gdPerson v-if="selectTab == 1"></gdPerson>
|
|
</div>
|
|
<commonModal v-model="detaillModal" width="1000" :title="currCultural.title">
|
|
<div class="detail-container">
|
|
<!-- 富文本 -->
|
|
<div class="richText" v-html="currCultural.content" v-if="currCultural.contentType == '0'"></div>
|
|
<!-- 图片列表 -->
|
|
<!-- <carousel-3d
|
|
:autoplay="true"
|
|
:autoplayTimeout="3000"
|
|
:perspective="35"
|
|
:display="3"
|
|
:animationSpeed="1000"
|
|
:width="300"
|
|
:height="270"
|
|
controlsVisible
|
|
:controlsHeight="60"
|
|
v-if="currCultural.contentType == '1'"
|
|
>
|
|
<slide v-for="(item, i) in currCultural.imageList" :index="i" :key="i">
|
|
<template slot-scope="obj">
|
|
<img style="width: 100%; height: 280px" :src="item" />
|
|
</template>
|
|
</slide>
|
|
</carousel-3d> -->
|
|
<div style="width: 100%; display: flex; flex-direction: column;align-items: center;">
|
|
<img :src="item" v-for="(item, index) in currCultural.imageList" :key="index" style="width: 100%;margin-bottom: 10px;"/>
|
|
</div>
|
|
<!-- 视频 -->
|
|
<LivePlayer
|
|
v-if="detaillModal && currCultural.contentType == '2'"
|
|
:videoUrl="currCultural.mediaUrl"
|
|
:live="false"
|
|
fluent
|
|
autoplay
|
|
stretch
|
|
:hide-big-play-button="true"
|
|
:muted="false"
|
|
alt="正在加载中..."
|
|
></LivePlayer>
|
|
</div>
|
|
</commonModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import gdPerson from './gdPerson.vue'
|
|
import newsTemplate from './news-template.vue'
|
|
import commonModal from '@/views/common-components/common-modal.vue'
|
|
|
|
|
|
export default {
|
|
name: "",
|
|
components: {gdPerson, newsTemplate, commonModal},
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
{
|
|
tabName: "规章制度"
|
|
},
|
|
{
|
|
tabName: "公服人员"
|
|
}
|
|
],
|
|
selectTab: 0,
|
|
typeCode: "RULES",
|
|
detaillModal: false,
|
|
currCultural: {}
|
|
};
|
|
},
|
|
watch: {},
|
|
created() {},
|
|
computed: {},
|
|
mounted () {
|
|
},
|
|
beforeDestroy() {},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
changeTab (item, index) {
|
|
if (this.selectTab == index) return
|
|
this.selectTab = index
|
|
},
|
|
openCultural (data) {
|
|
this.detaillModal = true
|
|
this.currCultural = data
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.gd-container {
|
|
width: 100%;
|
|
// height: 100%;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.tab-item {
|
|
width: 200px;
|
|
height: 50px;
|
|
background: url("../../../assets/pbImage/tab-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: PingFang SC;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin-bottom: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.select-tab {
|
|
background: url("../../../assets/pbImage/tab-select.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #a59e68;
|
|
}
|
|
}
|
|
|
|
.gd-main {
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|