From f577c196420715d92a4dfbb11b41a2f311d0cf68 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 28 一月 2022 15:19:14 +0800
Subject: [PATCH] 设备权限管理

---
 src/pages/settings/components/AuthorizationManagement.vue |  132 +++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 129 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/components/AuthorizationManagement.vue b/src/pages/settings/components/AuthorizationManagement.vue
index fb78169..82bf597 100644
--- a/src/pages/settings/components/AuthorizationManagement.vue
+++ b/src/pages/settings/components/AuthorizationManagement.vue
@@ -1,10 +1,136 @@
 <template>
-  <div class="AuthorizationManagement">AuthorizationManagement</div>
+  <div class="AuthorizationManagement">
+    <div class="content">
+      <div class="title">璁惧鎺堟潈绠$悊</div>
+
+      <div class="formArea">
+        <div class="formHeader">
+          <div class="headerItem">鎺堟潈璁惧ID</div>
+          <div class="headerItem">鎺堟潈鏃堕棿</div>
+          <div class="headerItem">瑙i櫎鎺堟潈</div>
+        </div>
+
+        <div class="formBody">
+          <div
+            class="formItem"
+            v-for="(item, index) in authorizationList"
+            :key="index"
+          >
+            <div class="id">
+              {{ item.id }}
+            </div>
+
+            <div class="time">
+              {{ item.time }}
+            </div>
+
+            <div class="unbind iconfont" @click="isShowUnbindBox = true">
+              &#xe7e8;
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <UnbindBox
+      v-if="isShowUnbindBox"
+      @close="isShowUnbindBox = false"
+    ></UnbindBox>
+  </div>
 </template>
 
 <script>
-export default {};
+import UnbindBox from "@/pages/settings/components/UnbindBox";
+
+export default {
+  data() {
+    return {
+      isShowUnbindBox: false,
+      authorizationList: [
+        {
+          id: "DSVAD010120190621",
+          time: "2019-08-02 12:43:43",
+        },
+        {
+          id: "DSVAD010120190621",
+          time: "2019-08-02 12:43:43",
+        },
+        {
+          id: "DSVAD010120190621",
+          time: "2019-08-02 12:43:43",
+        },
+        {
+          id: "DSVAD010120190621",
+          time: "2019-08-02 12:43:43",
+        },
+      ],
+    };
+  },
+  components: {
+    UnbindBox,
+  },
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
+.AuthorizationManagement {
+  position: relative;
+
+  .content {
+    width: 456px;
+    margin: 0 auto;
+  }
+
+  .title {
+    height: 48px;
+    font-size: 16px;
+    line-height: 48px;
+    color: #4f4f4f;
+    font-weight: bold;
+    background: #f2f2f7;
+    border-radius: 8px;
+    margin-bottom: 4px;
+  }
+
+  .formArea {
+    overflow: hidden;
+    margin-top: 4px;
+    background: #f2f2f7;
+
+    .formHeader {
+      margin: 8px 30px 10px 30px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .formBody {
+      padding-bottom: 8px;
+      border-radius: 8px;
+    }
+
+    .formItem {
+      box-sizing: border-box;
+      padding-left: 10px;
+      padding-right: 42px;
+      margin: 0 20px 8px 20px;
+      display: flex;
+      height: 32px;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #333;
+      font-weight: 700;
+      background-color: #fff;
+      border-radius: 20px;
+
+      .unbind {
+        font-size: 24px;
+        color: rgb(78, 148, 255);
+        cursor: pointer;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0