From 68def051059fe1c6e9538b59e156f8c8b94034b7 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 14 Jun 2023 09:38:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E5=88=97=E4=BF=A1=E6=81=AF=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlarmCard.vue          | 134 ++++++++++++++++++++++++++++++++++
 src/components/SettingCard.vue        |   4 +
 src/components/SingleColumnSelect.vue | 100 +++++++++++++++++++++++++
 3 files changed, 238 insertions(+)
 create mode 100644 src/components/AlarmCard.vue
 create mode 100644 src/components/SingleColumnSelect.vue

diff --git a/src/components/AlarmCard.vue b/src/components/AlarmCard.vue
new file mode 100644
index 0000000..6d50830
--- /dev/null
+++ b/src/components/AlarmCard.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="alarm_card_container">
+    <div class="type_box">流量上限报警</div>
+    <div class="forbidden_box">禁用</div>
+    <p class="or">或</p>
+    <div class="number_box">
+      <p class="number">8.2 LPM</p>
+      <div class="oper_wrap">
+        <div class="top">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="10"
+            height="6"
+            viewBox="0 0 10 6"
+          >
+            <g>
+              <path
+                d="M8.25717,5.699L5.00531,2.45252L1.75345,5.699Q1.60468,5.8495,1.41339,5.92475Q1.2221,6,1.0255,6Q0.828905,6,0.642933,5.92475Q0.456961,5.8495,0.308183,5.699Q0,5.398,0,4.97876Q0,4.55951,0.308183,4.25851L4.21892,0.334784Q4.36769,0.184285,4.57492,0.0982851Q4.78215,0.0122857,4.99469,0.00153571Q5.20723,-0.00921425,5.40383,0.0552853Q5.60043,0.119785,5.72795,0.270284L9.70244,4.25851Q10,4.55951,10,4.97876Q10,5.398,9.70244,5.699Q9.55367,5.8495,9.36238,5.92475Q9.17109,6,8.9745,6Q8.7779,6,8.59192,5.92475Q8.40595,5.8495,8.25717,5.699Z"
+                fill="#E7E7E7"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
+        </div>
+        <div class="bottom">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="10"
+            height="6"
+            viewBox="0 0 10 6"
+          >
+            <g transform="matrix(-1,0,0,-1,20,12)">
+              <path
+                d="M18.257170000000002,11.699L15.00531,8.45252L11.75345,11.699Q11.60468,11.849499999999999,11.41339,11.92475Q11.2221,12,11.025500000000001,12Q10.828905,12,10.642933,11.92475Q10.456961,11.849499999999999,10.308183,11.699Q10,11.398,10,10.978760000000001Q10,10.55951,10.308183,10.258510000000001L14.21892,6.334784Q14.36769,6.184285,14.574919999999999,6.0982851Q14.78215,6.0122857,14.99469,6.00153571Q15.20723,5.99078575,15.40383,6.0552853Q15.60043,6.119785,15.72795,6.270284L19.70244,10.258510000000001Q20,10.55951,20,10.978760000000001Q20,11.398,19.70244,11.699Q19.55367,11.849499999999999,19.36238,11.92475Q19.17109,12,18.9745,12Q18.777900000000002,12,18.591920000000002,11.92475Q18.40595,11.849499999999999,18.257170000000002,11.699Z"
+                fill="#E7E7E7"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.alarm_card_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  .type_box {
+    width: 157px;
+    height: 38px;
+    border-radius: 10px;
+    background: #5f6f8a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 350;
+    line-height: 22px;
+    color: #dcdcdc;
+    margin-right: 7px;
+  }
+  .forbidden_box {
+    width: 56px;
+    height: 38px;
+    border-radius: 10px;
+    background: #9dabc2;
+    font-size: 18px;
+    font-weight: 500;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 6px;
+  }
+  .or {
+    font-size: 18px;
+    font-weight: 350;
+    color: #dcdcdc;
+    margin-right: 6px;
+  }
+  .number_box {
+    padding-left: 20px;
+    width: 146px;
+    height: 38px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    background: rgba(220, 221, 221, 0.16);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    .number {
+      font-size: 18px;
+      font-weight: 350;
+      line-height: 22px;
+      color: #15d0a1;
+    }
+    .oper_wrap {
+      height: 100%;
+      width: 19px;
+      background: #d8d8d8;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .top {
+        flex: 1;
+        width: 19px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .bottom {
+        width: 19px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/SettingCard.vue b/src/components/SettingCard.vue
index 16f8428..0107090 100644
--- a/src/components/SettingCard.vue
+++ b/src/components/SettingCard.vue
@@ -9,6 +9,8 @@
       <WarnCard />
     </div>
     <div v-else class="info_card_list">
+      <AlarmCard />
+      <SingleColumnSelect />
       <Tab />
     </div>
   </div>
@@ -16,6 +18,8 @@
 
 <script setup>
 import WarnCard from 'cpns/WarnCard'
+import AlarmCard from 'cpns/AlarmCard'
+import SingleColumnSelect from 'cpns/SingleColumnSelect'
 import Tab from 'cpns/Tab'
 const props = defineProps({
   title: {
diff --git a/src/components/SingleColumnSelect.vue b/src/components/SingleColumnSelect.vue
new file mode 100644
index 0000000..1c201a3
--- /dev/null
+++ b/src/components/SingleColumnSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="single_column_select_container">
+    <div class="desc_box">
+      <p class="title">屏幕亮度设置：</p>
+      <p class="content">300 nit</p>
+    </div>
+    <div class="oper_wrap">
+      <div class="top">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="10"
+          height="6"
+          viewBox="0 0 10 6"
+        >
+          <g>
+            <path
+              d="M8.25717,5.699L5.00531,2.45252L1.75345,5.699Q1.60468,5.8495,1.41339,5.92475Q1.2221,6,1.0255,6Q0.828905,6,0.642933,5.92475Q0.456961,5.8495,0.308183,5.699Q0,5.398,0,4.97876Q0,4.55951,0.308183,4.25851L4.21892,0.334784Q4.36769,0.184285,4.57492,0.0982851Q4.78215,0.0122857,4.99469,0.00153571Q5.20723,-0.00921425,5.40383,0.0552853Q5.60043,0.119785,5.72795,0.270284L9.70244,4.25851Q10,4.55951,10,4.97876Q10,5.398,9.70244,5.699Q9.55367,5.8495,9.36238,5.92475Q9.17109,6,8.9745,6Q8.7779,6,8.59192,5.92475Q8.40595,5.8495,8.25717,5.699Z"
+              fill="#E7E7E7"
+              fill-opacity="1"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="bottom">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="10"
+          height="6"
+          viewBox="0 0 10 6"
+        >
+          <g transform="matrix(-1,0,0,-1,20,12)">
+            <path
+              d="M18.257170000000002,11.699L15.00531,8.45252L11.75345,11.699Q11.60468,11.849499999999999,11.41339,11.92475Q11.2221,12,11.025500000000001,12Q10.828905,12,10.642933,11.92475Q10.456961,11.849499999999999,10.308183,11.699Q10,11.398,10,10.978760000000001Q10,10.55951,10.308183,10.258510000000001L14.21892,6.334784Q14.36769,6.184285,14.574919999999999,6.0982851Q14.78215,6.0122857,14.99469,6.00153571Q15.20723,5.99078575,15.40383,6.0552853Q15.60043,6.119785,15.72795,6.270284L19.70244,10.258510000000001Q20,10.55951,20,10.978760000000001Q20,11.398,19.70244,11.699Q19.55367,11.849499999999999,19.36238,11.92475Q19.17109,12,18.9745,12Q18.777900000000002,12,18.591920000000002,11.92475Q18.40595,11.849499999999999,18.257170000000002,11.699Z"
+              fill="#E7E7E7"
+              fill-opacity="1"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.single_column_select_container {
+  width: 100%;
+  height: 42px;
+  border-radius: 12px;
+  background: rgba(220, 221, 221, 0.16);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-left: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  .desc_box {
+    font-size: 20px;
+    font-weight: 350;
+    color: #dcdcdc;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .title {
+    }
+    .content {
+    }
+  }
+  .oper_wrap {
+    height: 100%;
+    width: 21px;
+    background: #d8d8d8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .top {
+      flex: 1;
+      width: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .bottom {
+      width: 19px;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>