From c3f15d75eb8060861efddb0a7ca4302f50b6170b Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 15 Jun 2023 09:30:44 +0800
Subject: [PATCH] time setting

---
 src/components/DateSetting.vue | 100 +++++++++++++++++++++++++++++++++++++++
 src/components/SettingCard.vue |   4 ++
 src/components/TimeSetting.vue | 104 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 208 insertions(+)
 create mode 100644 src/components/DateSetting.vue
 create mode 100644 src/components/TimeSetting.vue

diff --git a/src/components/DateSetting.vue b/src/components/DateSetting.vue
new file mode 100644
index 0000000..e55d78c
--- /dev/null
+++ b/src/components/DateSetting.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="date_setting_container">
+    <div class="desc_box">
+      <p class="title">日期设置：</p>
+      <p class="content">2023-06-01</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>
+.date_setting_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: 500;
+    color: #ffffff;
+    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>
diff --git a/src/components/SettingCard.vue b/src/components/SettingCard.vue
index 0107090..987fb89 100644
--- a/src/components/SettingCard.vue
+++ b/src/components/SettingCard.vue
@@ -11,6 +11,8 @@
     <div v-else class="info_card_list">
       <AlarmCard />
       <SingleColumnSelect />
+      <TimeSetting />
+      <DateSetting />
       <Tab />
     </div>
   </div>
@@ -20,6 +22,8 @@
 import WarnCard from 'cpns/WarnCard'
 import AlarmCard from 'cpns/AlarmCard'
 import SingleColumnSelect from 'cpns/SingleColumnSelect'
+import DateSetting from 'cpns/DateSetting'
+import TimeSetting from 'cpns/TimeSetting'
 import Tab from 'cpns/Tab'
 const props = defineProps({
   title: {
diff --git a/src/components/TimeSetting.vue b/src/components/TimeSetting.vue
new file mode 100644
index 0000000..d92e405
--- /dev/null
+++ b/src/components/TimeSetting.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="time_setting_container">
+    <div class="desc_box">
+      <p class="title">时间设置：</p>
+      <p class="content">
+        <div class="number">12</div>
+        <p>：</p>
+        <div class="number">21</div>
+      </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>
+.time_setting_container {
+  width: 100%;
+  height: 42px;
+  border-radius: 12px;
+  background: #9DABC2;
+  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: #FFFFFF;
+    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>