Skip to content

Commit

Permalink
调整个人设置页面布局 优化小屏幕显示
Browse files Browse the repository at this point in the history
  • Loading branch information
@edenleung
edenleung committed Dec 15, 2019
1 parent 6ef5d94 commit 31c1b75
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 148 deletions.
102 changes: 58 additions & 44 deletions src/views/account/settings/BaseSetting.vue
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,47 @@
<template>
<div class="account-settings-info-view">
<div class="account-settings-info-right">
<div class="account-settings-info-view-left">

<a-form layout="vertical" :form="form" @submit="handleSubmit">
<a-form-item
label="邮箱"
:required="true"
>
<a-input v-decorator="['email', { rules: [{ required: true, message: '请输入您的邮箱!' }] }]" />
</a-form-item>

<a-form-item
label="昵称"
>
<a-input v-decorator="['nickname', { rules: [{ required: true, message: '请输入您的昵称!!' }] }]"/>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" :loading="updating">更新基本信息</a-button>
</a-form-item>
</a-form>
<div class="account-settings-info-view-left">
<a-form layout="vertical" :form="form" @submit="handleSubmit">
<a-form-item
label="邮箱"
:required="false"
>
<a-input v-decorator="['email', { rules: [{ required: true, message: '请输入您的邮箱!' }] }]" />
</a-form-item>

</div>
<div class="account-settings-info-view-right">
<dir class="account-settings-info-view-avatar_title">
<span>头像</span>
</dir>
<div class="account-settings-info-view-avatar">
<a-avatar :src="avatar" style="width: 144px;height:144px" />
</div>
<a-upload
name="file"
:multiple="true"
:action="action"
:headers="headers"
:showUploadList="false"
:beforeUpload="beforeUpload"
@change="handleChange"
<a-form-item
label="昵称"
:required="false"
>
<div class="account-settings-info-view-button_view">
<a-button icon="upload">
{{ uploading ? '上传中' : '更换头像' }}
</a-button>
</div>
</a-upload>
<a-input v-decorator="['nickname', { rules: [{ required: true, message: '请输入您的昵称!' }] }]"/>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" :loading="updating">更新基本信息</a-button>
</a-form-item>
</a-form>
</div>
<div class="account-settings-info-view-right">
<dir class="account-settings-info-view-avatar_title">
<span>头像</span>
</dir>
<div class="account-settings-info-view-avatar">
<a-avatar :src="avatar" style="width: 144px;height:144px" />
</div>
<a-upload
name="file"
:multiple="true"
:action="action"
:headers="headers"
:showUploadList="false"
:beforeUpload="beforeUpload"
@change="handleChange"
>
<div class="account-settings-info-view-button_view">
<a-button icon="upload">
{{ uploading ? '上传中' : '更换头像' }}
</a-button>
</div>
</a-upload>
</div>
</div>
</template>
Expand Down Expand Up @@ -121,8 +118,9 @@ export default {
</script>

<style lang="scss" scoped>
.account-settings-info-right {
.account-settings-info-view {
display: flex;
padding-top: 12px;
}
.account-settings-info-view- {
&button_view {
Expand All @@ -139,7 +137,7 @@ export default {
line-height: 22px;
}
&left {
min-width: 307px;
min-width: 224px;
max-width: 448px;
}
&right {
Expand All @@ -156,4 +154,20 @@ export default {
}
}
}
@media screen and (max-width: 1200px) {
.account-settings-info-view {
flex-direction: column-reverse;
}
.account-settings-info-view-avatar_title {
display: none
}
.account-settings-info-view-right {
display: flex;
flex-direction: column;
align-items: center;
max-width: 448px;
padding: 20px;
}
}
</style>
207 changes: 103 additions & 104 deletions src/views/account/settings/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,85 @@
<template>
<div class="page-header-index-wide">
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
<div class="account-settings-info-main" :class="device">
<div class="account-settings-info-left">
<a-menu
:mode="device == 'mobile' ? 'horizontal' : 'inline'"
:style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
:selectedKeys="selectedKeys"
type="inner"
@openChange="onOpenChange"
>
<a-menu-item key="/account/settings/base">
<router-link :to="{ name: 'BaseSettings' }">
基本设置
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/security">
<router-link :to="{ name: 'SecuritySettings' }">
安全设置
</router-link>
</a-menu-item>
<!-- <a-menu-item key="/account/settings/custom">
<router-link :to="{ name: 'CustomSettings' }">
个性化
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/binding">
<router-link :to="{ name: 'BindingSettings' }">
账户绑定
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/notification">
<router-link :to="{ name: 'NotificationSettings' }">
新消息通知
</router-link>
</a-menu-item> -->
</a-menu>
</div>
<div class="account-settings-info-right">
<div class="account-settings-info-title">
<span>{{ $route.meta.title }}</span>
</div>
<route-view></route-view>
</div>
<div class="account-settings-info-main" ref="main">
<div class="account-settings-info-leftMenu">
<a-menu
:mode="mode"
:selectedKeys="selectedKeys"
@openChange="onOpenChange"
>
<a-menu-item key="/account/settings/base">
<router-link :to="{ name: 'BaseSettings' }">
基本设置
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/security">
<router-link :to="{ name: 'SecuritySettings' }">
安全设置
</router-link>
</a-menu-item>
<!-- <a-menu-item key="/account/settings/custom">
<router-link :to="{ name: 'CustomSettings' }">
个性化
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/binding">
<router-link :to="{ name: 'BindingSettings' }">
账户绑定
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/notification">
<router-link :to="{ name: 'NotificationSettings' }">
新消息通知
</router-link>
</a-menu-item> -->
</a-menu>
</div>
<div class="account-settings-info-right">
<div class="account-settings-info-title">
<span>{{ $route.meta.title }}</span>
</div>
</a-card>
<route-view></route-view>
</div>
</div>
</template>

<script>
import { PageView, RouteView } from '@/layouts'
import { mixinDevice } from '@/utils/mixin.js'
export default {
components: {
RouteView,
PageView
},
mixins: [mixinDevice],
data () {
return {
// horizontal inline
mode: 'inline',
openKeys: [],
selectedKeys: [],
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
},
pageTitle: ''
selectedKeys: []
}
},
created () {
this.updateMenu()
},
mounted () {
window.addEventListener('resize', this.resize)
this.resize()
},
methods: {
resize () {
if (!this.$refs.main) {
return
}
console.log('resize')
const { offsetWidth } = this.$refs.main
let mode = 'inline'
if (this.$refs.main.offsetWidth < 641 && offsetWidth > 400) {
mode = 'horizontal'
}
if (window.innerWidth < 768 && offsetWidth > 400) {
mode = 'horizontal'
}
console.log(mode)
this.mode = mode
},
onOpenChange (openKeys) {
this.openKeys = openKeys
},
Expand All @@ -108,48 +97,58 @@ export default {
</script>

<style lang="less" scoped>
.account-settings-info-main {
width: 100%;
display: flex;
height: 100%;
overflow: auto;
&.mobile {
display: block;
.account-settings-info {
&-main {
display: flex;
width: 100%;
height: 100%;
padding-top: 16px;
padding-bottom: 16px;
overflow: auto;
background-color: #fff;
}
.account-settings-info-left {
border-right: unset;
border-bottom: 1px solid #e8e8e8;
width: 100%;
height: 50px;
overflow-x: auto;
overflow-y: scroll;
}
.account-settings-info-right {
padding: 20px 40px;
&-leftMenu {
width: 224px;
border-right: 1px solid #e8e8e8;
:global {
.ant-menu-inline {
border: none;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
font-weight: bold;
}
}
}
.account-settings-info-left {
border-right: 1px solid #e8e8e8;
width: 224px;
&-right {
flex: 1;
padding-top: 8px;
padding-right: 40px;
padding-bottom: 8px;
padding-left: 40px;
}
.account-settings-info-right {
flex: 1 1;
padding: 8px 40px;
&-title {
margin-bottom: 12px;
color: rgba(0,0,0,.85);
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
}
.account-settings-info-title {
color: rgba(0,0,0,.85);
font-size: 20px;
font-weight: 500;
line-height: 28px;
margin-bottom: 12px;
@media screen and (max-width: 768px) {
.account-settings-info {
&-main {
flex-direction: column;
}
.account-settings-info-view {
padding-top: 12px;
&-right {
padding: 40px;
}
&-leftMenu {
width: 100%;
}
}
}
</style>

0 comments on commit 31c1b75

Please sign in to comment.