| | |
| | | <template> |
| | | <div class="createUser"> |
| | | <header> |
| | | <!-- <header> |
| | | <div class="headerTitle">新增账户</div> |
| | | <div class="headerTip"> |
| | | <span>*</span> |
| | | <label>为必填项</label> |
| | | </div> |
| | | </header> |
| | | </header> --> |
| | | <main> |
| | | <div class="mainTitle">基础信息</div> |
| | | <!-- <div class="mainTitle">基础信息</div> --> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | |
| | | </el-form-item> |
| | | <!-- 当前职务 --> |
| | | <el-form-item class="optionItem" label="当前职务:" prop="jobTitle"> |
| | | <el-select v-model="user.work" placeholder="请选择当前职务"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-input v-model="user.work" placeholder="请输入当前职务" ></el-input> |
| | | </el-form-item> |
| | | <!-- 填写所属mac地址 --> |
| | | <!-- <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | |
| | | <!-- <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input> |
| | | </el-form-item> --> |
| | | <el-form-item class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交</el-button> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交</el-button> |
| | | <el-button class="btn reset">重置</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | |
| | | header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | padding: 0 20px; |
| | | border: 1px solid #fff; |
| | | // header { |
| | | // display: flex; |
| | | // justify-content: space-between; |
| | | // height: 60px; |
| | | // line-height: 60px; |
| | | // padding: 0 20px; |
| | | // border: 1px solid #fff; |
| | | |
| | | .headerTitle { |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | | } |
| | | // .headerTitle { |
| | | // color: #4b9bb7; |
| | | // font-weight: 600; |
| | | // } |
| | | |
| | | .headerTip span { |
| | | color: #ff3b6c; |
| | | } |
| | | // .headerTip span { |
| | | // color: #ff3b6c; |
| | | // } |
| | | |
| | | .headerTip label { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | // .headerTip label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | // } |
| | | |
| | | main { |
| | | border: 1px solid #fff; |
| | | // border: 1px solid #fff; |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | |
| | | .mainTitle { |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | | line-height: 100px; |
| | | font-size: 14px; |
| | | } |
| | | padding-bottom: 50px; |
| | | padding-top: 20px; |
| | | // .mainTitle { |
| | | // color: #4b9bb7; |
| | | // font-weight: 600; |
| | | // line-height: 100px; |
| | | // font-size: 14px; |
| | | // } |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | |
| | | margin-top: 50px; |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 80px; |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |