Skip to content

A
ant-design-pro-vue
Commit e3ab40e4 by Sendya
Options

fixed user/avatar layout

parent 6fbfd656
Showing with 107 additions and 90 deletions
src/views/user/Index.vue
...@@ -20,89 +20,68 @@ ...@@ -20,89 +20,68 @@
</a-row> </a-row>
</div> </div>
<a-card> <a-card :style="{ padding: '0 15%' }">
<a-form> <a-row :gutter="16">
<a-row :gutter="24" :style="{ marginBottom: '24px' }"> <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<a-col :sm="12" :xs="24" :style="{ height: '250px' }"> <div class="ant-upload-preview" >
<vue-cropper <a-icon type="cloud-upload-o" class="upload-icon"/>
style="width: 300px;position: absolute; left: 50%" <div class="mask">
ref="cropper" <a-icon type="plus" />
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="option.info"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
@realTime="realTime"
>
</vue-cropper>
</a-col>
<a-col :sm="12" :xs="24" :style="{ height: '250px' }">
<div class="ant-upload-preview">
<img :src="preview.url" :style="preview.img"/>
</div> </div>
</a-col> <img :src="option.img"/>
</a-row> </div>
</a-col>
<a-form-item <a-col :md="24" :lg="16">
label="昵称"
:labelCol="{span: 7}" <a-form layout="vertical">
:wrapperCol="{span: 10}" <a-form-item
> label="昵称"
<a-input placeholder="给自己起个名字" /> >
</a-form-item> <a-input placeholder="给自己起个名字" />
<a-form-item </a-form-item>
label="Bio" <a-form-item
:labelCol="{span: 7}" label="Bio"
:wrapperCol="{span: 10}" >
> <a-textarea rows="4" placeholder="You are not alone."/>
<a-textarea rows="4" placeholder="You are not alone."/> </a-form-item>
</a-form-item>
<a-form-item
<a-form-item label="电子邮件"
label="电子邮件" :required="false"
:labelCol="{span: 7}" >
:wrapperCol="{span: 10}" <a-input placeholder="exp@admin.com"/>
:required="false" </a-form-item>
> <a-form-item
<a-input placeholder="exp@admin.com"/> label="加密方式"
</a-form-item> :required="false"
<a-form-item >
label="加密方式" <a-select defaultValue="aes-256-cfb">
:labelCol="{span: 7}" <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
:wrapperCol="{span: 10}" <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
:required="false" <a-select-option value="chacha20">chacha20</a-select-option>
> </a-select>
<a-select defaultValue="aes-256-cfb"> </a-form-item>
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option> <a-form-item
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option> label="连接密码"
<a-select-option value="chacha20">chacha20</a-select-option> :required="false"
</a-select> >
</a-form-item> <a-input placeholder="h3gSbecd"/>
<a-form-item </a-form-item>
label="连接密码" <a-form-item
:labelCol="{span: 7}" label="登陆密码"
:wrapperCol="{span: 10}" :required="false"
:required="false" >
> <a-input placeholder="密码"/>
<a-input placeholder="h3gSbecd"/> </a-form-item>
</a-form-item>
<a-form-item <a-form-item>
label="登陆密码" <a-button type="primary">提交</a-button>
:labelCol="{span: 7}" <a-button style="margin-left: 8px">保存</a-button>
:wrapperCol="{span: 10}" </a-form-item>
:required="false" </a-form>
>
<a-input placeholder="密码"/> </a-col>
</a-form-item> </a-row>
<a-form-item :wrapperCol="{span: 10, offset: 7}">
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card> </a-card>
</page-layout> </page-layout>
...@@ -140,7 +119,7 @@ ...@@ -140,7 +119,7 @@
// cropper // cropper
preview: {}, preview: {},
option: { option: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png', img: '/avatar2.jpg',
info: true, info: true,
size: 1, size: 1,
outputType: 'jpeg', outputType: 'jpeg',
...@@ -181,14 +160,51 @@ ...@@ -181,14 +160,51 @@
} }
.ant-upload-preview { .ant-upload-preview {
width: 180px; position: relative;
height: 180px; margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
position: absolute;
top: 50%; .upload-icon {
left: 15%; position: absolute;
margin-top: -90px; top: 0;
overflow: hidden; right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment