From 632d9708a23f9c5837810a0b0613f721768ea3e7 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Fri, 4 Aug 2023 17:32:56 +0800
Subject: [PATCH] add user

---
 src/components/Setting/components/Date.vue |   2 +-
 src/components/Setting/components/User.vue | 158 ++++++++++++++++++++---------
 2 files changed, 112 insertions(+), 48 deletions(-)

diff --git a/src/components/Setting/components/Date.vue b/src/components/Setting/components/Date.vue
index 47f6ff3..6cc894b 100644
--- a/src/components/Setting/components/Date.vue
+++ b/src/components/Setting/components/Date.vue
@@ -11,7 +11,7 @@
       <div class="btn">设置</div>
     </div>
     <!-- <DatePicker /> -->
-    <TimePicker />
+    <!-- <TimePicker /> -->
   </div>
 </template>
 
diff --git a/src/components/Setting/components/User.vue b/src/components/Setting/components/User.vue
index c889e98..7c2125d 100644
--- a/src/components/Setting/components/User.vue
+++ b/src/components/Setting/components/User.vue
@@ -1,68 +1,89 @@
 <template>
   <div class="user_manage_container">
-    <div class="title_wrap">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="122.5126953125"
-        height="29"
-        viewBox="0 0 122.5126953125 29"
-      >
-        <g>
+    <div v-if="userFormVisible" class="add_user_form">
+      <p class="title">添加新用户</p>
+      <div class="form_wrap"></div>
+      <div class="btns">
+        <div class="btn" @click="returnList">返回</div>
+        <div class="btn">添加</div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="title_wrap">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="122.5126953125"
+          height="29"
+          viewBox="0 0 122.5126953125 29"
+        >
           <g>
             <g>
+              <g>
+                <path
+                  d="M41.47275634765625,7.72L41.47275634765625,14.92C41.47275634765625,17.74,41.27275634765625,21.32,39.07275634765625,23.78C39.49275634765625,24.02,40.27275634765625,24.64,40.55275634765625,25.0231C42.03275634765625,23.38,42.75275634765625,21.12,43.09275634765625,18.9L47.71275634765625,18.9L47.71275634765625,24.7L49.61275634765625,24.7L49.61275634765625,18.9L54.492756347656254,18.9L54.492756347656254,22.5C54.492756347656254,22.88,54.35275634765625,23,53.97275634765625,23C53.61275634765625,23.02,52.25275634765625,23.04,50.97275634765625,22.96C51.23275634765625,23.46,51.532756347656246,24.3,51.59275634765625,24.78C53.45275634765625,24.8003,54.65275634765625,24.78,55.392756347656245,24.48C56.11275634765625,24.18,56.37275634765625,23.62,56.37275634765625,22.52L56.37275634765625,7.72L41.47275634765625,7.72ZM43.35275634765625,9.52L47.71275634765625,9.52L47.71275634765625,12.36L43.35275634765625,12.36L43.35275634765625,9.52ZM54.492756347656254,9.52L54.492756347656254,12.36L49.61275634765625,12.36L49.61275634765625,9.52L54.492756347656254,9.52ZM43.35275634765625,14.12L47.71275634765625,14.12L47.71275634765625,17.1L43.27275634765625,17.1C43.33275634765625,16.34,43.35275634765625,15.62,43.35275634765625,14.94L43.35275634765625,14.12ZM54.492756347656254,14.12L54.492756347656254,17.1L49.61275634765625,17.1L49.61275634765625,14.12L54.492756347656254,14.12ZM64.85275634765625,11.16L74.87275634765625,11.16L74.87275634765625,14.8L64.83275634765624,14.8L64.85275634765625,13.84L64.85275634765625,11.16ZM68.33275634765624,6.69312C68.71275634765625,7.51531,69.15275634765625,8.61812,69.37275634765625,9.4L62.87275634765625,9.4L62.87275634765625,13.84C62.87275634765625,16.8206,62.65275634765625,20.985,60.31275634765625,23.8881C60.772756347656255,24.1084,61.632756347656255,24.6891,61.97275634765625,25.0494C63.83275634765625,22.7269,64.51275634765625,19.4434,64.75275634765624,16.56L74.87275634765625,16.56L74.87275634765625,17.7616L76.81275634765625,17.7616L76.81275634765625,9.4L70.31275634765625,9.4L71.39275634765625,9.07937C71.15275634765625,8.29719,70.65275634765625,7.13406,70.19275634765626,6.21187L68.33275634765624,6.69312ZM84.99275634765624,14.46L84.99275634765624,24.925L86.91275634765626,24.925L86.91275634765626,24.3L96.07275634765625,24.3L96.07275634765625,24.9047L97.95275634765625,24.9047L97.95275634765625,19.86L86.91275634765626,19.86L86.91275634765626,18.68L96.89275634765625,18.68L96.89275634765625,14.46L84.99275634765624,14.46ZM96.07275634765625,22.88L86.91275634765626,22.88L86.91275634765626,21.28L96.07275634765625,21.28L96.07275634765625,22.88ZM89.55275634765624,10.7181C89.75275634765626,11.0988,89.97275634765626,11.5394,90.13275634765625,11.94L82.69275634765626,11.94L82.69275634765626,15.34L84.51275634765625,15.34L84.51275634765625,13.38L97.43275634765625,13.38L97.43275634765625,15.34L99.37275634765625,15.34L99.37275634765625,11.94L92.05275634765624,11.94C91.85275634765625,11.4394,91.55275634765624,10.8384,91.23275634765625,10.3778L89.55275634765624,10.7181ZM86.91275634765626,15.86L95.03275634765626,15.86L95.03275634765626,17.28L86.91275634765626,17.28L86.91275634765626,15.86ZM84.19275634765626,6.21281C83.67275634765625,7.94,82.77275634765624,9.66,81.65275634765625,10.76C82.11275634765624,10.96,82.91275634765626,11.38,83.27275634765624,11.62C83.85275634765625,10.98,84.41275634765626,10.14,84.91275634765626,9.22L86.01275634765625,9.22C86.49275634765624,9.96,86.93275634765625,10.84,87.13275634765625,11.42L88.73275634765625,10.86C88.57275634765625,10.42,88.23275634765625,9.8,87.87275634765625,9.22L90.69275634765626,9.22L90.69275634765626,7.88L85.55275634765624,7.88C85.73275634765625,7.45844,85.89275634765625,7.01625,86.03275634765626,6.57438L84.19275634765626,6.21281ZM92.71275634765625,6.23281C92.35275634765625,7.67937,91.65275634765625,9.12,90.73275634765625,10.0406C91.17275634765625,10.2606,91.95275634765625,10.6609,92.29275634765625,10.9212C92.71275634765625,10.4409,93.09275634765625,9.88062,93.45275634765625,9.24L94.59275634765625,9.24C95.19275634765626,9.98062,95.81275634765625,10.9012,96.05275634765624,11.4816L97.59275634765625,10.7812C97.39275634765625,10.3609,97.01275634765625,9.78062,96.57275634765625,9.24L99.81275634765625,9.24L99.81275634765625,7.88L94.09275634765625,7.88C94.27275634765624,7.45844,94.43275634765625,7.01625,94.55275634765624,6.57438L92.71275634765625,6.23281ZM111.95275634765625,12.54L114.59275634765625,12.54L114.59275634765625,14.74L111.95275634765625,14.74L111.95275634765625,12.54ZM116.21275634765625,12.54L118.79275634765625,12.54L118.79275634765625,14.74L116.21275634765625,14.74L116.21275634765625,12.54ZM111.95275634765625,8.84L114.59275634765625,8.84L114.59275634765625,11.02L111.95275634765625,11.02L111.95275634765625,8.84ZM116.21275634765625,8.84L118.79275634765625,8.84L118.79275634765625,11.02L116.21275634765625,11.02L116.21275634765625,8.84ZM108.57275634765625,22.54L108.57275634765625,24.26L121.51275634765625,24.26L121.51275634765625,22.54L116.35275634765625,22.54L116.35275634765625,20.14L120.85275634765625,20.14L120.85275634765625,18.42L116.35275634765625,18.42L116.35275634765625,16.36L120.59275634765625,16.36L120.59275634765625,7.22L110.23275634765625,7.22L110.23275634765625,16.36L114.43275634765625,16.36L114.43275634765625,18.42L110.05275634765626,18.42L110.05275634765626,20.14L114.43275634765625,20.14L114.43275634765625,22.54L108.57275634765625,22.54ZM102.71275634765625,21L103.17275634765625,22.94C104.99275634765625,22.34,107.35275634765625,21.54,109.53275634765625,20.8L109.21275634765625,19L107.11275634765624,19.68L107.11275634765624,15.12L109.05275634765626,15.12L109.05275634765626,13.38L107.11275634765624,13.38L107.11275634765624,9.36L109.35275634765625,9.36L109.35275634765625,7.6L102.93275634765625,7.6L102.93275634765625,9.36L105.31275634765625,9.36L105.31275634765625,13.38L103.13275634765625,13.38L103.13275634765625,15.12L105.31275634765625,15.12L105.31275634765625,20.245C104.35275634765625,20.54,103.45275634765625,20.8,102.71275634765625,21Z"
+                  fill="#06518B"
+                  fill-opacity="1"
+                />
+              </g>
+            </g>
+            <g>
               <path
-                d="M41.47275634765625,7.72L41.47275634765625,14.92C41.47275634765625,17.74,41.27275634765625,21.32,39.07275634765625,23.78C39.49275634765625,24.02,40.27275634765625,24.64,40.55275634765625,25.0231C42.03275634765625,23.38,42.75275634765625,21.12,43.09275634765625,18.9L47.71275634765625,18.9L47.71275634765625,24.7L49.61275634765625,24.7L49.61275634765625,18.9L54.492756347656254,18.9L54.492756347656254,22.5C54.492756347656254,22.88,54.35275634765625,23,53.97275634765625,23C53.61275634765625,23.02,52.25275634765625,23.04,50.97275634765625,22.96C51.23275634765625,23.46,51.532756347656246,24.3,51.59275634765625,24.78C53.45275634765625,24.8003,54.65275634765625,24.78,55.392756347656245,24.48C56.11275634765625,24.18,56.37275634765625,23.62,56.37275634765625,22.52L56.37275634765625,7.72L41.47275634765625,7.72ZM43.35275634765625,9.52L47.71275634765625,9.52L47.71275634765625,12.36L43.35275634765625,12.36L43.35275634765625,9.52ZM54.492756347656254,9.52L54.492756347656254,12.36L49.61275634765625,12.36L49.61275634765625,9.52L54.492756347656254,9.52ZM43.35275634765625,14.12L47.71275634765625,14.12L47.71275634765625,17.1L43.27275634765625,17.1C43.33275634765625,16.34,43.35275634765625,15.62,43.35275634765625,14.94L43.35275634765625,14.12ZM54.492756347656254,14.12L54.492756347656254,17.1L49.61275634765625,17.1L49.61275634765625,14.12L54.492756347656254,14.12ZM64.85275634765625,11.16L74.87275634765625,11.16L74.87275634765625,14.8L64.83275634765624,14.8L64.85275634765625,13.84L64.85275634765625,11.16ZM68.33275634765624,6.69312C68.71275634765625,7.51531,69.15275634765625,8.61812,69.37275634765625,9.4L62.87275634765625,9.4L62.87275634765625,13.84C62.87275634765625,16.8206,62.65275634765625,20.985,60.31275634765625,23.8881C60.772756347656255,24.1084,61.632756347656255,24.6891,61.97275634765625,25.0494C63.83275634765625,22.7269,64.51275634765625,19.4434,64.75275634765624,16.56L74.87275634765625,16.56L74.87275634765625,17.7616L76.81275634765625,17.7616L76.81275634765625,9.4L70.31275634765625,9.4L71.39275634765625,9.07937C71.15275634765625,8.29719,70.65275634765625,7.13406,70.19275634765626,6.21187L68.33275634765624,6.69312ZM84.99275634765624,14.46L84.99275634765624,24.925L86.91275634765626,24.925L86.91275634765626,24.3L96.07275634765625,24.3L96.07275634765625,24.9047L97.95275634765625,24.9047L97.95275634765625,19.86L86.91275634765626,19.86L86.91275634765626,18.68L96.89275634765625,18.68L96.89275634765625,14.46L84.99275634765624,14.46ZM96.07275634765625,22.88L86.91275634765626,22.88L86.91275634765626,21.28L96.07275634765625,21.28L96.07275634765625,22.88ZM89.55275634765624,10.7181C89.75275634765626,11.0988,89.97275634765626,11.5394,90.13275634765625,11.94L82.69275634765626,11.94L82.69275634765626,15.34L84.51275634765625,15.34L84.51275634765625,13.38L97.43275634765625,13.38L97.43275634765625,15.34L99.37275634765625,15.34L99.37275634765625,11.94L92.05275634765624,11.94C91.85275634765625,11.4394,91.55275634765624,10.8384,91.23275634765625,10.3778L89.55275634765624,10.7181ZM86.91275634765626,15.86L95.03275634765626,15.86L95.03275634765626,17.28L86.91275634765626,17.28L86.91275634765626,15.86ZM84.19275634765626,6.21281C83.67275634765625,7.94,82.77275634765624,9.66,81.65275634765625,10.76C82.11275634765624,10.96,82.91275634765626,11.38,83.27275634765624,11.62C83.85275634765625,10.98,84.41275634765626,10.14,84.91275634765626,9.22L86.01275634765625,9.22C86.49275634765624,9.96,86.93275634765625,10.84,87.13275634765625,11.42L88.73275634765625,10.86C88.57275634765625,10.42,88.23275634765625,9.8,87.87275634765625,9.22L90.69275634765626,9.22L90.69275634765626,7.88L85.55275634765624,7.88C85.73275634765625,7.45844,85.89275634765625,7.01625,86.03275634765626,6.57438L84.19275634765626,6.21281ZM92.71275634765625,6.23281C92.35275634765625,7.67937,91.65275634765625,9.12,90.73275634765625,10.0406C91.17275634765625,10.2606,91.95275634765625,10.6609,92.29275634765625,10.9212C92.71275634765625,10.4409,93.09275634765625,9.88062,93.45275634765625,9.24L94.59275634765625,9.24C95.19275634765626,9.98062,95.81275634765625,10.9012,96.05275634765624,11.4816L97.59275634765625,10.7812C97.39275634765625,10.3609,97.01275634765625,9.78062,96.57275634765625,9.24L99.81275634765625,9.24L99.81275634765625,7.88L94.09275634765625,7.88C94.27275634765624,7.45844,94.43275634765625,7.01625,94.55275634765624,6.57438L92.71275634765625,6.23281ZM111.95275634765625,12.54L114.59275634765625,12.54L114.59275634765625,14.74L111.95275634765625,14.74L111.95275634765625,12.54ZM116.21275634765625,12.54L118.79275634765625,12.54L118.79275634765625,14.74L116.21275634765625,14.74L116.21275634765625,12.54ZM111.95275634765625,8.84L114.59275634765625,8.84L114.59275634765625,11.02L111.95275634765625,11.02L111.95275634765625,8.84ZM116.21275634765625,8.84L118.79275634765625,8.84L118.79275634765625,11.02L116.21275634765625,11.02L116.21275634765625,8.84ZM108.57275634765625,22.54L108.57275634765625,24.26L121.51275634765625,24.26L121.51275634765625,22.54L116.35275634765625,22.54L116.35275634765625,20.14L120.85275634765625,20.14L120.85275634765625,18.42L116.35275634765625,18.42L116.35275634765625,16.36L120.59275634765625,16.36L120.59275634765625,7.22L110.23275634765625,7.22L110.23275634765625,16.36L114.43275634765625,16.36L114.43275634765625,18.42L110.05275634765626,18.42L110.05275634765626,20.14L114.43275634765625,20.14L114.43275634765625,22.54L108.57275634765625,22.54ZM102.71275634765625,21L103.17275634765625,22.94C104.99275634765625,22.34,107.35275634765625,21.54,109.53275634765625,20.8L109.21275634765625,19L107.11275634765624,19.68L107.11275634765624,15.12L109.05275634765626,15.12L109.05275634765626,13.38L107.11275634765624,13.38L107.11275634765624,9.36L109.35275634765625,9.36L109.35275634765625,7.6L102.93275634765625,7.6L102.93275634765625,9.36L105.31275634765625,9.36L105.31275634765625,13.38L103.13275634765625,13.38L103.13275634765625,15.12L105.31275634765625,15.12L105.31275634765625,20.245C104.35275634765625,20.54,103.45275634765625,20.8,102.71275634765625,21Z"
+                d="M11.4925,15.501C15.1312,15.501,18.0848,12.478,18.0848,8.74952C18.0848,5.020989999999999,15.1312,2,11.4925,2C7.8519,2,4.90025,5.020989999999999,4.90025,8.74952C4.90025,12.478,7.84998,15.501,11.4925,15.501ZM20.574,19.7134C19.0674,17.9513,18.5589,17.344,15.801,17.1821L7.19363,17.1821C4.43389,17.3479,3.92723,17.9513,2.42454,19.7134C0.823965,21.5314,-0.450353,23.841,0.152261,26.6981C0.823965,28.5701,2.63181,29,4.34753,29L18.6529,29C20.3667,29,22.1784,28.5662,22.8501,26.6981C23.4469,23.841,22.1745,21.5333,20.574,19.7134Z"
                 fill="#06518B"
                 fill-opacity="1"
               />
             </g>
           </g>
-          <g>
-            <path
-              d="M11.4925,15.501C15.1312,15.501,18.0848,12.478,18.0848,8.74952C18.0848,5.020989999999999,15.1312,2,11.4925,2C7.8519,2,4.90025,5.020989999999999,4.90025,8.74952C4.90025,12.478,7.84998,15.501,11.4925,15.501ZM20.574,19.7134C19.0674,17.9513,18.5589,17.344,15.801,17.1821L7.19363,17.1821C4.43389,17.3479,3.92723,17.9513,2.42454,19.7134C0.823965,21.5314,-0.450353,23.841,0.152261,26.6981C0.823965,28.5701,2.63181,29,4.34753,29L18.6529,29C20.3667,29,22.1784,28.5662,22.8501,26.6981C23.4469,23.841,22.1745,21.5333,20.574,19.7134Z"
-              fill="#06518B"
-              fill-opacity="1"
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-    <div class="user_content">
-      <div class="user_line">
-        <p class="username">username</p>
-        <div class="operator_wrap">
-          <div class="btn">删除用户</div>
-          <div class="btn mb">设为管理员</div>
-          <div class="btn">修改密码</div>
-        </div>
+        </svg>
       </div>
-      <div class="user_line">
-        <p class="username">username</p>
-        <div class="operator_wrap">
-          <div class="btn">删除用户</div>
-          <div class="btn mb">设为管理员</div>
-          <div class="btn">修改密码</div>
+      <div class="user_content">
+        <div class="user_line">
+          <p class="username">username</p>
+          <div class="operator_wrap">
+            <div class="btn">删除用户</div>
+            <div class="btn mb">设为管理员</div>
+            <div class="btn">修改密码</div>
+          </div>
         </div>
-      </div>
-      <div class="user_line">
-        <p class="username">username</p>
-        <div class="operator_wrap">
-          <div class="btn">删除用户</div>
-          <div class="btn mb">设为管理员</div>
-          <div class="btn">修改密码</div>
+        <div class="user_line">
+          <p class="username">username</p>
+          <div class="operator_wrap">
+            <div class="btn">删除用户</div>
+            <div class="btn mb">设为管理员</div>
+            <div class="btn">修改密码</div>
+          </div>
+        </div>
+        <div class="user_line">
+          <p class="username">username</p>
+          <div class="operator_wrap">
+            <div class="btn">删除用户</div>
+            <div class="btn mb">设为管理员</div>
+            <div class="btn">修改密码</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="btn_wrap">
-      <div class="add_user">新增用户</div>
+      <div class="btn_wrap">
+        <div class="add_user" @click="addUserFormShow">新增用户</div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+const userFormVisible = ref(false)
+
+const returnList = () => {
+  userFormVisible.value = false
+}
+
+const addUserFormShow = () => {
+  userFormVisible.value = true
+}
+</script>
 
 <style lang="scss" scoped>
 .user_manage_container {
@@ -140,5 +161,48 @@
       color: #ffffff;
     }
   }
+  .add_user_form {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 51px 175px 137px 175px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-size: 20px;
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      color: #06518b;
+      margin-bottom: 56px;
+    }
+    .form_wrap {
+      width: 330px;
+      height: 150px;
+      box-sizing: border-box;
+      margin-bottom: 48px;
+    }
+    .btns {
+      width: 187px;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .btn {
+        width: 87px;
+        height: 45px;
+        border-radius: 23px;
+        background: #06518b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: normal;
+        letter-spacing: 0.1em;
+        color: #ffffff;
+      }
+    }
+  }
 }
 </style>