From fde8e3bedaf5f883f38c3a0ec33d3c6a8748d1c9 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期五, 21 六月 2024 18:02:44 +0800
Subject: [PATCH] wfs 范围查询
---
src/views/header/header.vue | 50 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 33 insertions(+), 17 deletions(-)
diff --git a/src/views/header/header.vue b/src/views/header/header.vue
index 79d8c22..0d29e7c 100644
--- a/src/views/header/header.vue
+++ b/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>
--
Gitblit v1.9.3