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"> +  + </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