<template>
|
<div class="caseAnalysis-wrap">
|
<div class="caseAnalysis-inside">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="按领域分析" name="1">
|
<lingyuForm v-if="activeName == '1'"></lingyuForm>
|
</el-tab-pane>
|
<el-tab-pane label="按地域分析" name="2">
|
<diyuForm v-if="activeName == '2'"></diyuForm>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import lingyuForm from "./lingyuForm";
|
import diyuForm from "./diyuForm";
|
export default {
|
name: "caseAnalysis",
|
components: {
|
lingyuForm,
|
diyuForm
|
},
|
data() {
|
return {
|
activeName:'1', //单选按钮
|
|
}
|
},
|
methods: {
|
handleClick(tab, event) {
|
// this.coalName = tab.label
|
|
}
|
}
|
|
}
|
</script>
|
|
|
<style lang="scss">
|
.caseAnalysis-inside{
|
.el-tabs{
|
width: 100%;
|
}
|
.el-tabs__nav-scroll{
|
width: 100%;
|
}
|
.el-tabs__nav{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
.el-tabs__active-bar,.el-tabs__nav-wrap::after{
|
height: 0;
|
}
|
.el-tabs__header{
|
margin-bottom: 0;
|
}
|
.el-tabs__nav .el-tabs__item{
|
background: url("../../../assets/images/tab-bj-normal.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 0.9375rem /* 180/192 */;
|
height: 0.1979rem /* 38/192 */;
|
margin: 0.0104rem /* 2/192 */ 0.15625rem /* 30/192 */ 0 0.15625rem /* 30/192 */;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
border-left:none;
|
border-bottom: 0;
|
color: #2de2ff;
|
&:first-child {
|
margin-left: 0;
|
}
|
&:last-child{
|
margin-right: 0;
|
}
|
}
|
.el-tabs--card>.el-tabs__header .el-tabs__nav{
|
width: 100%;
|
display: flex;
|
border: none;
|
}
|
.el-tabs__item{
|
color: rgba(0,207,249,0.4);
|
}
|
.el-tabs--card>.el-tabs__header,.el-tabs__nav-wrap::after{
|
border-bottom: none;
|
}
|
.el-tabs__header .el-tabs__item.is-active{
|
background: url("../../../assets/images/tab-bj-active.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 0.9375rem /* 180/192 */;
|
height: 0.1979rem /* 38/192 */;
|
margin: 0.0104rem /* 2/192 */ 0.15625rem /* 30/192 */ 0 0.15625rem /* 30/192 */;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
border-left:none;
|
border-bottom: 0;
|
color: #094373;
|
&:first-child {
|
margin-left: 0;
|
}
|
&:last-child{
|
margin-right: 0;
|
}
|
}
|
.el-tabs__item.is-active{
|
color: #FFFFFF;
|
}
|
.el-tabs__content{
|
width: 100%;
|
height: 100%;
|
}
|
.el-tab-pane{
|
height: 100%;
|
}
|
.el-tabs__item{
|
padding:0;
|
}
|
.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child{
|
padding-right: 0;
|
}
|
.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){
|
padding-left: 0;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.caseAnalysis-wrap{
|
width: 100%;
|
height: calc(100% - 0.390625rem /* 100/256 */);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.caseAnalysis-inside{
|
width: 96%;
|
height: 90%;
|
background: url("../../../assets/images/meizhongAnalysis-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
}
|
}
|
</style>
|
