style: 修改Chrome自动填充的样式

This commit is contained in:
jmal 2023-05-10 12:09:40 +08:00
parent e5a723b6e9
commit cd5b7e2326
2 changed files with 101 additions and 85 deletions

View File

@ -172,3 +172,14 @@ div:focus {
visibility: hidden; visibility: hidden;
} }
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
background-color:transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s;
}
input {
background-color:transparent;
}

View File

@ -11,100 +11,104 @@
<div> <div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本设置" name="1"> <el-tab-pane label="基本设置" name="1">
<div class="config-itme-label">网盘名称: <div v-if="activeName === '1'">
<el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="8" size="medium" <div class="config-itme-label">网盘名称:
:style="{width: inputNetdiskNameWidth+'px'}" <el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="8" size="medium"
@keyup.enter.native="updateNetdiskName" @input="inputNetdiskName"> :style="{width: inputNetdiskNameWidth+'px'}"
<el-button v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button> @keyup.enter.native="updateNetdiskName" @input="inputNetdiskName">
</el-input> <el-button v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button>
</div> </el-input>
<div class="config-itme-label logo">网盘Logo: </div>
<el-upload <div class="config-itme-label logo">网盘Logo:
class="avatar-uploader" <el-upload
:action="uploadUrl" class="avatar-uploader"
:show-file-list="false" :action="uploadUrl"
:on-success="handleAvatarSuccess" :show-file-list="false"
:before-upload="beforeAvatarUpload"> :on-success="handleAvatarSuccess"
<Logo v-model="logoFileName" width="80" class="avatar"></Logo> :before-upload="beforeAvatarUpload">
</el-upload> <Logo v-model="logoFileName" width="80" class="avatar"></Logo>
</div> </el-upload>
<span class="instruction">点击更换Logo</span> </div>
<div class="config-itme-label">启用webp: <span class="instruction">点击更换Logo</span>
<el-switch <div class="config-itme-label">启用webp:
v-model="webpEnabled" <el-switch
active-color="#13ce66" v-model="webpEnabled"
inactive-color="#ff4949" active-color="#13ce66"
@change="webpChange" inactive-color="#ff4949"
> @change="webpChange"
</el-switch> >
</div> </el-switch>
<span class="instruction"> </div>
<span class="instruction">
将图片转换为webp格式存储,在不降低图片质量的情况下,极大降低图片文件的体积,建议开启. 将图片转换为webp格式存储,在不降低图片质量的情况下,极大降低图片文件的体积,建议开启.
<a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a> <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
</span> </span>
<div class="config-itme-label">网盘同步: <div class="config-itme-label">网盘同步:
<el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i
class="el-icon-refresh"></i> class="el-icon-refresh"></i>
</el-button> </el-button>
<span v-show="syncPercent < 100">{{ syncPercent }}%</span> <span v-show="syncPercent < 100">{{ syncPercent }}%</span>
</div>
<span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
<div class="config-itme-label">重置角色、菜单:
<el-button class="sync-button" size="mini" :loading="resetLoading" type="danger"
@click="resetMenuAndRole()">
<i class="el-icon-refresh-left"></i></el-button>
</div>
<span class="instruction">一般用于初始化角色、菜单数据</span>
</div> </div>
<span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
<div class="config-itme-label">重置角色、菜单:
<el-button class="sync-button" size="mini" :loading="resetLoading" type="danger"
@click="resetMenuAndRole()">
<i class="el-icon-refresh-left"></i></el-button>
</div>
<span class="instruction">一般用于初始化角色、菜单数据</span>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="LDAP认证" name="2" class="setting-tab-panel"> <el-tab-pane label="LDAP认证" name="2" class="setting-tab-panel">
<el-form :rules="rules" ref="form" :model="ldapFormData" label-width="120px" size="small" <div v-if="activeName === '2'">
style="width: 450px"> <el-form :rules="rules" ref="form" :model="ldapFormData" label-width="120px" size="small"
<el-form-item label="功能状态" prop="enable"> style="width: 450px" autocomplete="off">
<el-select v-model="ldapFormData.enable"> <el-form-item label="功能状态" prop="enable">
<el-option <el-select v-model="ldapFormData.enable">
v-for="item in ldapStatusOptions" <el-option
:key="item.value" v-for="item in ldapStatusOptions"
:label="item.label" :key="item.value"
:value="item.value"> :label="item.label"
</el-option> :value="item.value">
</el-select> </el-option>
</el-form-item> </el-select>
<el-form-item label="LDAP 服务器" prop="ldapServer"> </el-form-item>
<el-input placeholder="例如: ldap.test.com:389" v-model="ldapFormData.ldapServer"></el-input> <el-form-item label="LDAP 服务器" prop="ldapServer">
</el-form-item> <el-input placeholder="例如: ldap.test.com:389" v-model="ldapFormData.ldapServer"></el-input>
<el-form-item label="Base DN" prop="baseDN"> </el-form-item>
<el-input placeholder="例如: cn=admin,dc=test,dc=com" v-model="ldapFormData.baseDN"></el-input> <el-form-item label="Base DN" prop="baseDN">
</el-form-item> <el-input placeholder="例如: cn=admin,dc=test,dc=com" v-model="ldapFormData.baseDN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input type="password" placeholder="管理员密码" v-model="ldapFormData.password"></el-input> <el-input type="password" placeholder="管理员密码" v-model="ldapFormData.password" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" :disabled="ldapTestBtn" v-loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button> <el-button type="primary" :disabled="ldapTestBtn" v-loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button>
<span v-if="testLdapConfigResult === 0" class="el-icon-check" style="color: #67C23A"></span> <span v-if="testLdapConfigResult === 0" class="el-icon-check" style="color: #67C23A"></span>
<span v-if="testLdapConfigResult > 0" class="el-icon-close" style="color: #F56C6C"></span> <span v-if="testLdapConfigResult > 0" class="el-icon-close" style="color: #F56C6C"></span>
</el-form-item> </el-form-item>
<el-form-item label="登录名" prop="loginName"> <el-form-item label="登录名" prop="loginName">
<el-input placeholder="LDAP服务器中对应个人用户名的字段, 例如: uid" v-model="ldapFormData.loginName"></el-input> <el-input placeholder="LDAP服务器中对应个人用户名的字段, 例如: uid" v-model="ldapFormData.loginName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="默认角色" prop="defaultRoleList"> <el-form-item label="默认角色" prop="defaultRoleList">
<el-select ref="selectRole" v-model="ldapFormData.defaultRoleList" multiple placeholder="请选择角色"> <el-select ref="selectRole" v-model="ldapFormData.defaultRoleList" multiple placeholder="请选择角色">
<el-option <el-option
v-for="item in roleList" v-for="item in roleList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" :disabled="ldapSaveBtn" v-loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button> <el-button type="primary" :disabled="ldapSaveBtn" v-loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -274,7 +278,9 @@ export default {
}, },
getLdapConfig() { getLdapConfig() {
loadLdapConfig().then(res => { loadLdapConfig().then(res => {
this.ldapFormData = res.data; if (res.data) {
this.ldapFormData = res.data;
}
}) })
}, },
inputNetdiskName(input) { inputNetdiskName(input) {
@ -430,7 +436,6 @@ export default {
>>> .el-loading-spinner .circular { >>> .el-loading-spinner .circular {
width: 25px !important; width: 25px !important;
} }
} }
</style> </style>