Compare commits
No commits in common. '77b09bec49ede8d1c9a2e415a6cbe91eaa9a5541' and 'cb79e228f80d10da64277f3854cc36a97ba1da42' have entirely different histories.
77b09bec49
...
cb79e228f8
@ -1,438 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
import type { UnwrapRef } from 'vue'
|
||||
import {
|
||||
ManOutlined,
|
||||
UserOutlined,
|
||||
WomanOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
|
||||
|
||||
const value1 = ref<string>('a')
|
||||
|
||||
|
||||
interface FormState {
|
||||
name: string
|
||||
delivery: boolean
|
||||
type: string[]
|
||||
resource: string
|
||||
desc: string
|
||||
}
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
name: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
//对话框
|
||||
|
||||
const open = ref<boolean>(false)
|
||||
const confirmLoading = ref<boolean>(false)
|
||||
|
||||
function showModal() {
|
||||
open.value = true
|
||||
}
|
||||
|
||||
function handleOk() {
|
||||
modalText.value = ''
|
||||
confirmLoading.value = true
|
||||
setTimeout(() => {
|
||||
open.value = false
|
||||
confirmLoading.value = false
|
||||
}, 2000)
|
||||
}
|
||||
//覆盖antd样式
|
||||
|
||||
const customButtonStyle = [ {
|
||||
width:'80px',
|
||||
textAlign:'center',
|
||||
borderRadius: '50px',
|
||||
margin:'0 10px',
|
||||
}]
|
||||
const phoneStyle = [{
|
||||
width:'60%',
|
||||
}]
|
||||
const changeStyle = [{
|
||||
border:'none',
|
||||
boxShadow: 'none',
|
||||
color:'#409EFF',
|
||||
}]
|
||||
const labelCol = { style: { width: '100px' } }
|
||||
const wrapperCol = { span: 20 }
|
||||
const activeKey = ref('1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card
|
||||
style="width: 80%; padding: 20px;margin: 20px auto;"
|
||||
default-active-tab-key
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" tab-position="left">
|
||||
<a-tab-pane key="1" tab="资料设置">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
基本资料
|
||||
</p>
|
||||
</div>
|
||||
<p class="pleft">
|
||||
基本信息
|
||||
</p>
|
||||
<div class="datumbox">
|
||||
<div class="form">
|
||||
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="登录账号：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="所属部门：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="员工职务：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="员工工号：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码：">
|
||||
<div class="phonecss">
|
||||
<a-input v-model:value="value" placeholder="输入内容" :style="phoneStyle" />
|
||||
|
||||
<div>
|
||||
<a-button :style="changeStyle" @click="showModal">
|
||||
修改手机号
|
||||
</a-button>
|
||||
<a-modal v-model:open="open" title="修改手机号" :confirm-loading="confirmLoading" @ok="handleOk">
|
||||
<div>
|
||||
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="原手机号码：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码：">
|
||||
<div class="phonecss">
|
||||
<a-input v-model:value="value" placeholder="输入验证码" :style="phoneStyle" />
|
||||
<a-button :style="changeStyle">
|
||||
获取验证码
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="新手机号码：">
|
||||
<a-input v-model:value="value" placeholder="输入新手机号" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="微信账号：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱地址：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item name="出生日期" label="DatePicker" v-bind="config">
|
||||
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
<a-form-item label="性别：">
|
||||
<div>
|
||||
<div>
|
||||
<a-radio-group v-model:value="value1">
|
||||
<div>
|
||||
<a-radio-group v-model:value="value1">
|
||||
<a-radio-button :style="customButtonStyle" value="a">
|
||||
男性<ManOutlined />
|
||||
</a-radio-button>
|
||||
<a-radio-button :style="customButtonStyle" value="b">
|
||||
女性<WomanOutlined />
|
||||
</a-radio-button>
|
||||
<a-radio-button :style="customButtonStyle" value="c">
|
||||
保密
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<p class="pleft">
|
||||
更多信息
|
||||
</p>
|
||||
|
||||
<a-form label-width="100px" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="籍贯：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="学历：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="专业：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="毕业院校：">
|
||||
<a-input v-model:value="value" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item name="毕业时间：" label="DatePicker" v-bind="config">
|
||||
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介：" placeholder="输入内容" name="desc">
|
||||
<a-textarea v-model:value="formState.desc" />
|
||||
</a-form-item>
|
||||
<a-form-item label="">
|
||||
<button class="save">
|
||||
保存
|
||||
</button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="usepic">
|
||||
<div class="idpic">
|
||||
<a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</div>
|
||||
<div class="change">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture"
|
||||
:max-count="1"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined />
|
||||
修改头像
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
|
||||
<a-tab-pane key="2" tab="修改密码">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
修改密码
|
||||
</p>
|
||||
</div>
|
||||
<div class="datumbox">
|
||||
<div class="form">
|
||||
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="验证码：">
|
||||
<div class="phonecss">
|
||||
<a-input v-model:value="value" placeholder="输入内容" :style="phoneStyle" />
|
||||
<a-button :style="changeStyle">
|
||||
获取验证码
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="原密码：">
|
||||
<a-input v-model:value="value" placeholder="输入原密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="新密码：">
|
||||
<a-input v-model:value="value" placeholder="输入新密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="新密码：">
|
||||
<a-input v-model:value="value" placeholder="输入确认新密码" />
|
||||
</a-form-item>
|
||||
<button class="save">
|
||||
保存
|
||||
</button>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="登录记录">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
登录记录
|
||||
</p>
|
||||
</div>
|
||||
<!-- 日期 -->
|
||||
<div class="date">
|
||||
{{ `2023-08-22` }}
|
||||
</div>
|
||||
<div class="recordbox">
|
||||
<div class="recordleft">
|
||||
<div>
|
||||
图标
|
||||
</div>
|
||||
<div>
|
||||
登录人和地点时间
|
||||
</div>
|
||||
</div>
|
||||
<div class="recordright">
|
||||
<span>图标</span>{{ `具体时间` }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="4" tab="系统通知">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
系统通知
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="信息设置">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
信息设置
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" tab="公司列表">
|
||||
<div class="datum">
|
||||
<div class="datumtop">
|
||||
<p>
|
||||
<span>▋</span>
|
||||
公司列表
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="less">
|
||||
.ant-tabs-nav-list{
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab .ant-tabs-tab-active{
|
||||
padding: 8px 24px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.datum{
|
||||
//右边内容
|
||||
width: 100%;
|
||||
margin-left: 20px;
|
||||
color: #666;
|
||||
|
||||
.datumtop{
|
||||
p{
|
||||
margin-bottom: 15px;
|
||||
font-size:18px;
|
||||
font-weight:700;
|
||||
|
||||
span{
|
||||
font-size:14px;
|
||||
color:#409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.datumbox{
|
||||
display: flex;
|
||||
|
||||
.form{
|
||||
width: 40%;
|
||||
|
||||
|
||||
.save{
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
margin-left: 100px;
|
||||
color: aliceblue;
|
||||
background-color: #409EFF;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.phonecss{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.usepic{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 150px;
|
||||
|
||||
.change{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pleft{
|
||||
margin: 20px ;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.date{
|
||||
padding: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.recordbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90px;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #a1a0a0;
|
||||
|
||||
.recordleft{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:where(.css-dev-only-do-not-override-176pxz6).ant-picker{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-176pxz6).ant-input {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-176pxz6).ant-input .phone{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-176pxz6).ant-radio-button-wrapper:not(:first-child)::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue