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.
123 lines
2.9 KiB
123 lines
2.9 KiB
<template>
|
|
<div class="public_service_statistic">
|
|
|
|
<el-tabs class="content_tab" v-model="activeName" @tab-click="changeTabs">
|
|
<el-tab-pane label="公众服务统计分析" name="first" class="con_tab first_tab">
|
|
<TopComponent class="line_01"/>
|
|
<div class="line_02">
|
|
<ChannelAnalytics class="unit" />
|
|
<EventTypeAnalysis class="unit" />
|
|
<NucleusThrough class="unit2" />
|
|
<!-- <PostTrendsDay class="unit" /> -->
|
|
</div>
|
|
<div class="line_03">
|
|
<PostTrendsMonth class="unit" />
|
|
<PostTrendsDay class="unit" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="公众服务统计查询" name="second" class="con_tab">
|
|
<Record />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TopComponent from "./components/topComponent";
|
|
import ChannelAnalytics from "./components/channelAnalytics";
|
|
import EventTypeAnalysis from "./components/eventTypeAnalysis";
|
|
import AuditAnalytics from "./components/auditAnalytics";
|
|
import PostTrendsDay from "./components/postTrendsDay";
|
|
import PostTrendsMonth from "./components/postTrendsMonth";
|
|
import NucleusThrough from "./components/nucleusThrough";
|
|
import Record from "./components/record";
|
|
|
|
export default {
|
|
name: "publicService",
|
|
components: {
|
|
Record,
|
|
TopComponent,
|
|
ChannelAnalytics,
|
|
EventTypeAnalysis,
|
|
AuditAnalytics,
|
|
PostTrendsDay,
|
|
PostTrendsMonth,
|
|
NucleusThrough,
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: "first",
|
|
};
|
|
},
|
|
methods: {
|
|
changeTabs() {},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-tabs__item {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
min-width: 128px;
|
|
position: relative;
|
|
// left: 10px;
|
|
}
|
|
|
|
::v-deep .el-tabs__active-bar {
|
|
min-width: 128px;
|
|
}
|
|
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
background-color: #133242;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.public_service_statistic {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 15px;
|
|
display: flex; justify-content: stretch; align-items: stretch;
|
|
// position: relative;
|
|
z-index: 6;
|
|
color: white;
|
|
overflow: hidden;
|
|
|
|
.content_tab{
|
|
display: flex; flex-direction: column; flex: 1;
|
|
::v-deep .el-tabs__header{}
|
|
::v-deep .el-tabs__content{ flex: 1;}
|
|
}
|
|
|
|
.con_tab{
|
|
width: 100%; height: 100%;
|
|
}
|
|
.first_tab{
|
|
display: flex; flex-direction: column;
|
|
.line_01 {
|
|
flex-basis: 140px; margin-bottom: 16px;
|
|
}
|
|
.line_02{
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
.unit{ margin-right: 16px; flex: 1; width: 0;}
|
|
.unit2{width: 50%;margin-left:-4px}
|
|
.unit:last-child{ margin-right: 0;}
|
|
}
|
|
.line_03{
|
|
height: 0;
|
|
flex: 1;
|
|
display: flex; align-items: stretch;
|
|
.unit{ margin-right: 16px; flex: 1; }
|
|
.unit:last-child{ margin-right: 0;}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|