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/AuthorizationSetting.vue | 200 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 3 deletions(-)
diff --git a/src/pages/settings/components/AuthorizationSetting.vue b/src/pages/settings/components/AuthorizationSetting.vue
index 2b19384..5c92711 100644
--- a/src/pages/settings/components/AuthorizationSetting.vue
+++ b/src/pages/settings/components/AuthorizationSetting.vue
@@ -1,10 +1,204 @@
<template>
- <div class="AuthorizationSetting">AuthorizationSetting</div>
+ <div class="AuthorizationSetting">
+ <div class="content">
+ <div class="title">璁惧鎺堟潈閰嶇疆</div>
+
+ <el-form
+ :model="settingForm"
+ :rules="rules"
+ ref="joinForm"
+ class="join-form"
+ >
+ <el-form-item>
+ <div class="row">
+ <div class="item-title">璁惧鎺堟潈绠＄悊鏂瑰紡</div>
+ <div class="inputContain">
+ <el-select
+ v-model="settingForm.authorizationType"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </div>
+ </div>
+ </el-form-item>
+
+ <el-form-item prop="password" v-if="settingForm.authorizationType == 1">
+ <div class="row">
+ <div class="item-title">鎺堟潈瀵嗛挜</div>
+ <div class="inputContain">
+ <el-input
+ v-model="settingForm.password"
+ placeholder="璇疯緭鍏�6浣嶆巿鏉冨瘑閽�"
+ maxlength="6"
+ show-password
+ ></el-input>
+ </div>
+ </div>
+ </el-form-item>
+ </el-form>
+
+ <div class="save">淇濆瓨</div>
+ </div>
+ </div>
</template>
<script>
-export default {};
+export default {
+ data() {
+ return {
+ settingForm: {
+ authorizationType: 0,
+ password: "",
+ },
+ typeOptions: [
+ {
+ label: "濮嬬粓鍏佽",
+ value: 0,
+ },
+ {
+ label: "瀵嗙爜鏍￠獙",
+ value: 1,
+ },
+ ],
+ rules: {
+ password: [
+ { min: 6, max: 6, message: "闀垮害涓�6涓瓧绗�", trigger: "blur" },
+ ],
+ },
+ };
+ },
+};
</script>
-<style>
+<style lang="scss" scoped>
+.AuthorizationSetting {
+ 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;
+ }
+
+ .row {
+ margin: 0 auto;
+ height: 48px;
+ margin-bottom: 4px;
+ background-color: #f2f2f7;
+ border-radius: 8px;
+
+ line-height: 48px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #f2f2f7;
+ border-radius: 8px;
+ padding: 0 20px;
+
+ .item-title {
+ font-size: 14px;
+ color: #4f4f4f;
+ font-weight: 700;
+ }
+
+ .el-select ::v-deep {
+ width: 280px;
+ height: 32px;
+
+ input {
+ border-radius: 20px;
+ border-color: #fff;
+ padding-left: 20px;
+ font-size: 12px;
+ color: #333;
+ font-weight: 700;
+ }
+
+ .popper__arrow,
+ .popper__arrow::after {
+ display: none;
+ }
+
+ .el-select-dropdown {
+ top: 30px;
+ height: 84px;
+ box-shadow: 0px 4px 12px rgba(5, 95, 230, 0.25);
+ border-radius: 8px;
+
+ .el-select-dropdown__item {
+ font-size: 12px;
+ font-weight: 400;
+ color: #333;
+
+ &.selected {
+ span {
+ color: #4e94ff;
+ }
+ }
+ }
+ }
+ }
+
+ .el-input ::v-deep {
+ width: 280px;
+ height: 32px;
+
+ input {
+ height: 32px;
+ border-radius: 20px;
+ border-color: #fff;
+ padding-left: 20px;
+ font-size: 12px;
+ color: #333;
+ font-weight: 700;
+
+ &::-webkit-input-placeholder {
+ /* WebKit browsers */
+ color: #828282;
+ font-weight: normal;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ .save {
+ position: absolute;
+ top: 375px;
+ left: 50%;
+ margin-left: -94px;
+ width: 188px;
+ height: 40px;
+ background: #4e94ff;
+ border-radius: 25px;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 40px;
+ color: #fff;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ .el-form-item {
+ margin-bottom: 0;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0