tab

src/components/Modal.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="screen_modal_container">
+    <div class="modal_wrap">
+      <div class="tip_btn">提示</div>
+      <div class="tip_text">
+        是否对<span class="blue">流量/压力</span>传感器校零
+      </div>
+      <div class="btn_group">
+        <div class="ok">是</div>
+        <div class="cancel">否</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.screen_modal_container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  .modal_wrap {
+    width: 460px;
+    height: 349px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    background: #ffffff;
+    padding: 54px 46px 43px 46px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .tip_btn {
+      width: 135px;
+      height: 72px;
+      border-radius: 14px;
+      background: #0052d9;
+      font-size: 36px;
+      font-weight: 500;
+      letter-spacing: 0.2em;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 46px;
+    }
+    .tip_text {
+      font-weight: 400;
+      font-size: 28px;
+      letter-spacing: 1px;
+      color: #3d3d3d;
+      .blue {
+        color: #0052d9;
+      }
+      margin-bottom: 44px;
+    }
+    .btn_group {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .ok {
+        width: 176.78px;
+        height: 51px;
+        border-radius: 305px;
+        background: rgba(72, 89, 122, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26px;
+        font-weight: 350;
+        line-height: 22px;
+        letter-spacing: 0em;
+        color: #3d3d3d;
+        margin-right: 14.22px;
+      }
+      .cancel {
+        width: 176.78px;
+        height: 51px;
+        border-radius: 800px;
+        background: #0052d9;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26px;
+        font-weight: 350;
+        line-height: 22px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

src/components/SettingCard.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="warn_info_box">
+    <div class="warn_card_header">{{ title }}</div>
+    <div class="info_card_list" v-if="!isActive">
+      <WarnCard />
+      <WarnCard />
+      <WarnCard />
+      <WarnCard />
+      <WarnCard />
+    </div>
+    <div v-else class="info_card_list">
+      <Tab />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import WarnCard from 'cpns/WarnCard'
+import Tab from 'cpns/Tab'
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  isActive: {
+    type: Boolean,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.warn_info_box {
+  flex: 1;
+  background: #3f4f6f;
+  border-radius: 18px;
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .warn_card_header {
+    height: 56px;
+    background: #d8d8d8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: bold;
+    letter-spacing: 0em;
+    color: #3d3d3d;
+  }
+  .info_card_list {
+    flex: 1;
+    padding: 0 10px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    position: relative;
+  }
+}
+</style>

src/components/Tab.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="tab_container">
+    <div class="tab_box">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="38"
+        height="38"
+        viewBox="0 0 38 38"
+      >
+        <g>
+          <path
+            d="M35.465,22.798L32.396,22.798C32.1045,23.8321,31.6952,24.8293,31.176,25.77L33.328,27.922C34.3228,28.917,34.3228,30.53,33.328,31.525L31.528,33.325C30.5328,34.3192,28.9202,34.3192,27.925,33.325L25.772,31.173C24.841,31.692,23.846,32.1,22.8,32.393L22.8,35.466C22.7994,36.8657,21.6646,38,20.265,38L17.731,38C16.3313,38,15.1966,36.8656,15.196,35.466L15.196,32.393C14.1258,32.0898,13.0955,31.6601,12.127,31.113L9.912,33.328C8.91802,34.3224,7.30598,34.3224,6.312,33.328L4.512,31.528C3.51788,30.5331,3.51788,28.9209,4.512,27.926L6.765,25.673C6.27186,24.7621,5.88243,23.7987,5.604,22.801L2.534,22.801C1.13455,22.7971,0.001647,21.6625,0,20.263L0,17.73C0.000552177,16.3303,1.13535,15.196,2.535,15.196L5.604,15.196C5.9,14.149,6.309,13.155,6.824,12.224L4.512,9.912C3.51701,8.91825,3.51701,7.30575,4.512,6.312L6.312,4.513C7.30598,3.51856,8.91802,3.51856,9.912,4.513L12.224,6.825C13.155,6.305,14.15,5.897,15.196,5.604L15.196,2.534C15.1966,1.13435,16.3314,0,17.731,0L20.265,0C21.6646,0,22.7994,1.13435,22.8,2.534L22.8,5.603C23.806,5.889,24.77,6.275,25.672,6.764L27.925,4.512C28.9202,3.51777,30.5328,3.51777,31.528,4.512L33.328,6.312C34.3223,7.30564,34.3223,8.91737,33.328,9.911L31.113,12.126C31.6632,13.093,32.0931,14.1236,32.393,15.195L35.465,15.195C36.8646,15.195,37.9995,16.3293,38,17.729L38,20.263C38,21.663,36.865,22.798,35.465,22.798ZM19,11.398C14.8026,11.398,11.4,14.8006,11.4,18.998C11.4,23.1954,14.8026,26.598,19,26.598C23.1974,26.598,26.6,23.1954,26.6,18.998C26.6,14.8006,23.1974,11.398,19,11.398ZM19,22.798C16.9,22.798,15.2,21.098,15.2,18.998C15.2,16.898,16.9,15.198,19,15.198C21.1,15.198,22.8,16.898,22.8,18.998C22.8,21.098,21.1,22.798,19,22.798Z"
+            fill="#15D0A1"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="tab_box">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="38"
+        height="37.52723693847656"
+        viewBox="0 0 38 37.52723693847656"
+      >
+        <g>
+          <path
+            d="M26.4914,10.6735C27.146,11.2489,28.1423,11.1854,28.719,10.5308L31.7965,7.03247C32.3725,6.37863,32.3095,5.3816,31.6556,4.80555C31.0018,4.2295,30.0048,4.29257,29.4287,4.94642L26.3476,8.44356C26.0391,8.79419,25.9021,9.26364,25.9735,9.72516C26.0275,10.0812,26.2001,10.4169,26.4914,10.6735ZM19.0536,11.2238L18.9157,11.2238L18.9157,11.2226C13.5634,11.2239,9.22515,15.5621,9.22515,20.9131L9.22515,32.8204L21.6384,32.8204C22.0707,29.0062,24.9641,25.9327,28.7453,25.2711L28.7453,20.9131C28.744,15.5615,24.4053,11.2238,19.0536,11.2238ZM26.0455,22.0209C25.5867,22.0202,25.2148,21.6488,25.2134,21.1901C25.2095,17.8281,22.4851,15.1037,19.1231,15.0998L18.9852,15.0998C18.5267,15.0998,18.155,14.728,18.155,14.2695C18.155,13.811,18.5267,13.4393,18.9852,13.4393L19.1231,13.4393C23.3983,13.4393,26.8739,16.9161,26.8739,21.1901C26.8739,21.6492,26.5022,22.0209,26.0455,22.0209ZM36.1844,15.0602L31.5747,15.7615C30.713,15.8926,30.1206,16.6975,30.2517,17.5593C30.3828,18.421,31.1877,19.0133,32.0495,18.8822L36.6568,18.1809C37.519,18.051,38.1125,17.2464,37.982,16.3842C37.8515,15.522,37.0465,14.9291,36.1844,15.0602ZM6.61878,6.43903L9.52966,10.0788C10.0741,10.7601,11.0678,10.8708,11.7488,10.3259C12.4297,9.78111,12.5398,8.7873,11.9946,8.10667L9.08368,4.46807C8.54019,3.786,7.54597,3.67529,6.86575,4.2211C6.18305,4.76424,6.07228,5.75901,6.61878,6.43903ZM8.05384,33.7879L6.82619,37.5272L22.438,37.5272C21.8742,36.3612,21.5808,35.0831,21.5796,33.7879L8.05384,33.7879ZM11.8687,36.8319L7.87521,36.8319L8.64729,34.4785L14.2221,34.4785L11.8687,36.8319ZM17.6581,6.47739C17.7803,7.28817,18.5028,7.87046,19.321,7.81766C20.1393,7.76486,20.7809,7.09454,20.798,6.27478L20.7848,1.61473C20.805,0.743371,20.115,0.020627,19.2436,0.000432213C18.3722,-0.0197624,17.6495,0.67024,17.6293,1.54159L17.6401,6.20165C17.6389,6.29516,17.6449,6.38748,17.6581,6.47739ZM7.6654,17.0276C7.83668,16.1721,7.2823,15.3398,6.42696,15.1681L1.85802,14.2509C1.01211,14.0992,0.20018,14.6519,0.0311329,15.4945C-0.137914,16.3371,0.398012,17.1602,1.237,17.3465L5.80714,18.2648C6.66204,18.4368,7.49434,17.8826,7.6654,17.0276Z"
+            fill="#D8D8D8"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="tab_box">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="28.717952728271484"
+        height="32"
+        viewBox="0 0 28.717952728271484 32"
+      >
+        <g>
+          <path
+            d="M28.592,26.0322C28.4404,26.2642,28.1931,26.4002,27.9218,26.4002L0.797896,26.4002C0.218873,26.4008,-0.167105,25.8011,0.0719316,25.2723L2.3663,20.0941C2.91016,18.8675,3.19119,17.5394,3.19119,16.1958L3.19119,11.508C3.19119,5.46024,7.84374,0.269243,13.8692,0.0116539C16.9998,-0.131851,20.0456,1.05525,22.2577,3.28113C24.3638,5.40104,25.5286,8.20893,25.5286,11.2008L25.5286,16.1958C25.5286,17.539,25.8094,18.8661,26.3534,20.0933L28.6478,25.2715C28.7595,25.5203,28.7356,25.8082,28.592,26.0322ZM17.5509,28.8001C17.5509,29.6561,17.2159,30.4561,16.6175,31.064C16.0112,31.664,15.2135,32,14.3599,32C12.5968,32,11.1688,30.5681,11.1688,28.8001C11.1688,28.3601,11.5278,28.0002,11.9666,28.0002L16.7532,28.0002C17.1919,28.0002,17.5509,28.3601,17.5509,28.8001Z"
+            fill="#D8D8D8"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+    </div>
+    <div class="tab_box">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="33"
+        height="26"
+        viewBox="0 0 33 26"
+      >
+        <g>
+          <rect
+            x="0"
+            y="0"
+            width="33"
+            height="26"
+            rx="6"
+            fill="#D8D8D8"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.tab_container {
+  width: 420px;
+  height: 56px;
+  background: #ffffff;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 19px;
+  .tab_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 67px;
+    height: 47px;
+    border-radius: 47px;
+    background: rgba(21, 208, 161, 0.1);
+  }
+}
+</style>

src/pages/Home.vue

@@ -278,18 +278,10 @@
             <p class="name">紧急模式</p>
           </div>
         </div>
-        <div class="warn_info_box">
-          <div class="warn_card_header">历史报警信息</div>
-          <div class="info_card_list">
-            <WarnCard />
-            <WarnCard />
-            <WarnCard />
-            <WarnCard />
-            <WarnCard />
-          </div>
-        </div>
+        <SettingCard title="常规设置" :isActive="true" />
       </div>
     </div>
+    <!-- <Modal /> -->
   </div>
 </template>
 
@@ -297,8 +289,13 @@
 import Header from 'cpns/Header'
 import BigCard from 'cpns/BigCard'
 import SmallCard from 'cpns/SmallCard'
-import WarnCard from 'cpns/WarnCard'
+import SettingCard from 'cpns/SettingCard'
 import Battery from 'cpns/Battery'
+import Modal from 'cpns/Modal'
+import { ref, onMounted } from 'vue'
+// 刚开机时
+const initialBoot = ref(true)
+onMounted(() => {})
 </script>
 
 <style lang="scss" scoped>
@@ -434,32 +431,6 @@ import Battery from 'cpns/Battery'
           }
         }
       }
-      .warn_info_box {
-        flex: 1;
-        background: #3f4f6f;
-        border-radius: 18px;
-        overflow: hidden;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        .warn_card_header {
-          height: 56px;
-          background: #d8d8d8;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 24px;
-          font-weight: bold;
-          letter-spacing: 0em;
-          color: #3d3d3d;
-        }
-        .info_card_list {
-          flex: 1;
-          padding: 0 10px;
-          padding-bottom: 10px;
-          box-sizing: border-box;
-        }
-      }
     }
   }
 }