<template>
|
<div class="headerBox" v-bind:class="{ 'headerBoxActive': !headSwitch }">
|
<div class="headerSwitch">
|
<el-switch v-model="headSwitch" class="headSwitch" v-bind:class="{ 'headSwitchActive': !headSwitch }"
|
active-color="#FFFFFF" inactive-color="#FFFFFF">
|
</el-switch>
|
</div>
|
<div class="headerContent">
|
<div v-show="headSwitch">
|
<span>{{ headerLabel }}</span>
|
<img class="haerImg" src="../../assets/img/header/normal_u42.svg" alt="">
|
</div>
|
<div v-show="!headSwitch">
|
<span>{{ headerLabel1 }}</span>
|
<img class="haerImg" src="../../assets/img/header/normal_u42.svg" alt="">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
data() {
|
return {
|
headSwitch: true,
|
headerLabel: "已连接外网",
|
headerLabel1: "已断开外网"
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.headerBox {
|
width: 100%;
|
height: 100%;
|
background: #63a103;
|
display: flex;
|
}
|
|
.headerBoxActive {
|
width: 100%;
|
height: 100%;
|
background: red;
|
display: flex;
|
}
|
|
.headerSwitch {
|
padding-left: 16px;
|
display: flex;
|
align-items: center;
|
}
|
|
.headerContent {
|
flex: 1;
|
font-family: "微软雅黑", sans-serif;
|
color: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
}
|
|
.haerImg {
|
width: 15px;
|
height: 17px;
|
margin-left: 10px;
|
}
|
|
.headSwitch /deep/.el-switch__core:after {
|
background-color: #63a103 !important;
|
}
|
|
.headSwitchActive /deep/.el-switch__core:after {
|
background-color: red !important;
|
}
|
</style>
|
