wfs 范围查询

suerprisePlus

2024-06-21 fde8e3bedaf5f883f38c3a0ec33d3c6a8748d1c9

 src/views/header/header.vue

@@ -1,17 +1,18 @@
<template>
  <div class="headerBox">
  <div class="headerBox" v-bind:class="{ 'headerBoxActive': !headSwitch }">
    <div class="headerSwitch">
      <el-switch
        v-model="headSwitch"
        active-color="#FFFFFF"
        inactive-color="#FFFFFF"
      >
      <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>
      <div v-show="headSwitch">
        <span>{{ headerLabel }}</span>
        <img class="haerImg"  src="../../assets/img/header/normal_u42.svg" alt="">
        <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>
@@ -22,8 +23,9 @@
export default {
  data() {
    return {
      headSwitch: false,
      headerLabel: "已连接外网"
      headSwitch: true,
      headerLabel: "已连接外网",
      headerLabel1: "已断开外网"
    };
  }
};
@@ -36,11 +38,20 @@
  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;
@@ -48,15 +59,20 @@
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.haerImg{
    width: 15px;
    height: 17px;
    margin-left: 10px;

}

/deep/.el-switch__core:after {
.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>