web/apsDashboard-1.git

			@@ -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>