From fa12c005942f5db43b298400438480a3b1270d1c Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 9 Nov 2023 17:36:40 +0800
Subject: [PATCH] home card air

---
 src/assets/img/air/1.png                | Bin 0 -> 758 bytes
 src/assets/img/air/2.png                | Bin 0 -> 736 bytes
 src/components/Operator.vue             |  18 +++-
 src/components/info/AirSwitchConfig.vue | 141 ++++++++++++++++++++++++++++++++
 4 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/air/1.png
 create mode 100644 src/assets/img/air/2.png
 create mode 100644 src/components/info/AirSwitchConfig.vue

diff --git a/src/assets/img/air/1.png b/src/assets/img/air/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..268c3bc4c0fba551a3d0614ce4029b34dfe86f7f
GIT binary patch
literal 758
zcmV<S0tx+zP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrph-kQR5*>DmAg*dKoo}m@pv_!crVBXDFw8MC{+sV
zCT-fK1}RM*g9jiFf)r|ahBRi2RFM!Z6iDojyk48J<rz<k$eXqI!jix9nKR#9j^{rF
zYZOJ%VUi?g#+aco=16Pp005;lCxqNlO0T=!?o}9u_p9cUcHs8*_Wf)&yC{m{E9cyH
zT^F2lP)Y#+Wm%#q3P>rDWtn1(UG{pt^B@SG)`CZ)(Wl8|a>E$g-`(9sr_)(?p!p&~
z2uLX(ecvA*A0Pi(0*^+cPtVWKKX-O^-g%z45!jXx0&yI_?CtG+uHmFUz7S&6@AvoL
z3SERJN%H7<-f<8FPc{G~N%Ea@z62$Nz;PTnjx)bwtu^vIN1o>}#>{g)&qGlZ`?J~X
z0>C#CMbY78GWmUQa9}UqsbyIh3<j`md*u$5QkYJssH$onE6WlO4-d-s{f}0XBxkPc
zHlT!%jZgrvZ5xBZ0EGOjf2Y#{=iE-y^wcuO3_0hGNsi-egf7Az$7#e|*M-*l#Hy<5
z17mCnysg@~oO2jsj;yMxSo?pi3$=~fxs+09tsQG?!W(5#N^`AsBiR1lq;_sumY|g8
z79r$LO4%69^L%S?JGUqb5JK)OLdZ>)WlPCQsaK&&sU@(K5|q+wtKaYckW#9$Ea!v9
z7)+<rjqv(`EWW<7ERkiI>UO(VRv3o&jIqn{c-)v+RTbhmMw+HjO2HTdV+@p1NYfN?
z95-Ga@YgRGW0zqV-rE4s>-Els5MP844ZkqPKuU>r4OXePPtWtt0l)%)APAm(-yg<t
z{33*S6|xE%$MK8r`@`DsR~mioblVvHcsxc?6zh$?)?#aNUDxKEgE2N=L~C8QB}gf^
oYfX!aqUbP9(^IYW$^SIdKL84X!g+t9KL7v#07*qoM6N<$f;iw`UH||9

literal 0
HcmV?d00001

diff --git a/src/assets/img/air/2.png b/src/assets/img/air/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..63a97c65fedd9a278c19c2ad75bf409efb3293b1
GIT binary patch
literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrib+I4R5*>5m9b76K@f)jncef*hd7j=C=sSXNQfv^
zigdJTO$}0-Jc6Y(JOC+>{1Ql^hG$5Zf+`Y1LTPM71Qa&p&Ud#vlLBz=Ol-_wo@PGH
z%-%mkn4soad(Fpo8^kSTtb<Vp00@R8IDyKc8MuSqYUlKS`859F)vqsa%slU^<xiA(
zOQ{280;mE2)DRFbG&InLb>w8<-^kA8%HG99@KUe+UK+I{<g(2D9Pl!!p*tCd!~qbR
zE~k0xyxBQ^1YYX3-}@;1PJfDs2l;g1m?W-2=Yqr}*~SB$M(r<{A4uHtbD?E8BHQ(S
z|KW0F@4^Crndh&_{9`B+G_uf!g$8`rVj-Z^ff5IZ{tF%C5X;MEo_7I!rsi3D%`JvM
z&F|D!W@-qsSRVn$MTLN`hk(~o4#U50ID4JFV;|dXN?jGo)1d&M0Yet+0GHn13n=r}
z$99WB+@j1^lOj76T83+6tDU3{Al_s!y+u*|t+Y`Mo(dm}rAz?EIxA~P<vHC~GBbEQ
zRu#&q&rW!zm;^&m)!9@$;kYTWY6v74G6W|YRtu-p%?=)q4HyudFjS5nJwW1Ss+tP9
zGfKJQ&;TljYzFR|hQ`5^sul%b52wOM29c^kv|*hYxC8F3c23F3zAV(LnO?zHLvTL_
z<pL-G1t=GAKL=lpxekED0m#XIZ?$u30l?qLj#)4tC9YNXg(&E@0NoZ(jz!`c5Sp&<
z`yBva0JvP)yWli$>0FRVT$@gq0M)r5;WTeOEd0@6&zqfNlVlr+Y*$`{sLXtl3`1Vl
zfyj2tyBK)tG^Nf`=7B;mawicq<hxZGn%PcMS@*|u3&fjXtn2+TCBYCg9Miv@=1w_F
S(@<jo0000<MNUMnLSTY<Y(_T#

literal 0
HcmV?d00001

diff --git a/src/components/Operator.vue b/src/components/Operator.vue
index cf0f32b..85983a5 100644
--- a/src/components/Operator.vue
+++ b/src/components/Operator.vue
@@ -8,6 +8,9 @@
         <div class="card">
           <EnvironmentInfo :cardType="1" />
         </div>
+        <div class="long_card">
+          <AirSwitchConfig />
+        </div>
         <!-- <div class="card">
           <EnvironmentInfo :cardType="2" />
         </div>
@@ -487,6 +490,7 @@ import EnvirPicker from 'cpns/dialogs/EnvirPicker'
 import PreInstallPicker from 'cpns/dialogs/PreInstallPicker'
 import DisinfectModal from 'cpns/dialogs/DisinfectModal'
 import WarnModal from 'cpns/dialogs/WarnModal'
+import AirSwitchConfig from 'cpns/info/AirSwitchConfig'
 import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
 import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
 import { ref, watch, onMounted, onUnmounted } from 'vue'
@@ -655,9 +659,8 @@ onUnmounted(() => {
       width: 726px;
       height: 470px;
       box-sizing: border-box;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
+      display: flex;
+      flex-wrap: wrap;
       column-gap: 20px;
       row-gap: 20px;
       margin-bottom: 20px;
@@ -667,6 +670,15 @@ onUnmounted(() => {
         border-radius: 17.5px;
         background: #06518b;
       }
+      .long_card {
+        width: 726px;
+        height: 225px;
+        border-radius: 17.5px;
+        opacity: 1;
+        background: #06518b;
+        box-sizing: border-box;
+        padding: 16px;
+      }
     }
     .warn_wrap {
       display: flex;
diff --git a/src/components/info/AirSwitchConfig.vue b/src/components/info/AirSwitchConfig.vue
new file mode 100644
index 0000000..98c0af5
--- /dev/null
+++ b/src/components/info/AirSwitchConfig.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="air_switch_config_container">
+    <div class="header">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="28"
+        height="28"
+        viewBox="0 0 28 28"
+      >
+        <g>
+          <path
+            d="M14,0C6.26801,0,0,6.26802,0,14C0,21.732,6.26801,28,14,28C21.732,28,28,21.732,28,14C28,6.26802,21.732,0,14,0ZM9.10859,20.4807C9.097,21.0081,8.66847,21.431,8.14073,21.4356C7.6131,21.4405,7.17713,21.0253,7.15599,20.4979L7.15599,14.4761C7.15421,13.9358,7.59264,13.4974,8.1329,13.4992C8.39231,13.4979,8.64147,13.6004,8.8248,13.784C9.00814,13.9674,9.11035,14.2167,9.10859,14.4761L9.10859,20.4807ZM9.11277,16.4831L10.5775,16.4831L10.5775,13.9308C10.5771,12.598,11.3513,11.3866,12.5608,10.827C12.5414,10.7319,12.5318,10.635,12.5322,10.5379L12.5322,9.02199L8.39528,9.02199C8.06546,9.02229,7.74915,8.89097,7.51653,8.65716C7.2839,8.42333,7.15414,8.10636,7.15602,7.77653C7.15499,7.44753,7.2848,7.13161,7.51685,6.89839C7.74891,6.66514,8.06422,6.53379,8.39324,6.53331L19.6047,6.53331C19.935,6.53331,20.2516,6.66514,20.4843,6.89948C20.717,7.13381,20.8465,7.45138,20.844,7.78166C20.8444,8.46656,20.2895,9.02198,19.6047,9.02198L15.4668,9.02198L15.4668,10.5421C15.467,10.639,15.4581,10.7358,15.4401,10.831C16.6497,11.3886,17.4242,12.5989,17.4235,13.9308L17.4235,16.4831L18.8842,16.4831L18.8842,14.4761C18.8842,13.9363,19.3218,13.4987,19.8614,13.4987C20.4013,13.4987,20.8389,13.9363,20.8389,14.4761L20.8389,20.4847C20.8414,21.0244,20.4058,21.4641,19.8661,21.4667C19.3263,21.4691,18.8867,21.0336,18.8842,20.4939L18.8842,18.9728L18.8893,18.9728L18.8893,16.4831L18.8842,16.4831L18.8842,18.9697L17.2923,18.9697C16.8744,20.4411,15.5307,21.4564,14.001,21.4564C12.4714,21.4564,11.1276,20.441,10.7096,18.9697L9.11274,18.9697"
+            fill="#FFFFFF"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="title">选择空气阀配置</p>
+    </div>
+    <div class="opers_box">
+      <div class="left_container">
+        <div
+          :class="activeTab == '1' ? 'tab mb active' : 'tab mb'"
+          @click="changeTab('1')"
+        >
+          <p class="text">上管道</p>
+          <div class="percent">10%</div>
+          <img :src="activeTab == 1 ? A2 : A1" class="icon" alt="" />
+        </div>
+        <div
+          :class="activeTab == '2' ? 'tab active' : 'tab'"
+          @click="changeTab('2')"
+        >
+          <p class="text">下管道</p>
+          <div class="percent">10%</div>
+          <img :src="activeTab == 2 ? A2 : A1" class="icon" alt="" />
+        </div>
+      </div>
+      <div class="right_container"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import A1 from '@/assets/img/air/1.png'
+import A2 from '@/assets/img/air/2.png'
+import { ref } from 'vue'
+
+const activeTab = ref('1')
+
+const changeTab = tab => {
+  activeTab.value = tab
+}
+</script>
+
+<style lang="scss" scoped>
+.air_switch_config_container {
+  box-sizing: border-box;
+  .header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    .title {
+      margin-left: 8px;
+      font-family: 思源黑体;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.06em;
+      color: #ffffff;
+    }
+  }
+  .opers_box {
+    display: flex;
+    align-items: center;
+    height: 151px;
+    justify-content: space-between;
+    .left_container {
+      width: 337px;
+      height: 151px;
+      .tab {
+        width: 337px;
+        height: 68px;
+        border-radius: 6px;
+        background: #1f6397;
+        box-sizing: border-box;
+        padding-left: 25px;
+        padding-right: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .text {
+          font-family: 思源黑体;
+          font-size: 16px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0.06em;
+          color: #ffffff;
+        }
+        .percent {
+          width: 69px;
+          height: 36px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Source Han Sans;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.06em;
+          font-feature-settings: 'kern' on;
+          color: #ffffff;
+        }
+        .icon {
+          width: 22px;
+          height: 22px;
+        }
+      }
+      .active {
+        .percent {
+          background: #06518b;
+        }
+      }
+      .mb {
+        margin-bottom: 15px;
+      }
+    }
+    .right_container {
+      width: 339px;
+      height: 146px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      background: #fff;
+    }
+  }
+}
+</style>