<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" :style=" 'min-height:'+ mainInfoHeight "> <div class="account-settings-info-left"> <a-menu :mode="device == 'mobile' ? 'horizontal' : 'inline'" :default-selected-keys="['settings']" :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}" type="inner" @openChange="onOpenChange" > <a-menu-item key="settings"> <a @click="settingsClick()"> 基本设置 </a> </a-menu-item> <a-menu-item key="security"> <a @click="securityClick()">安全设置</a> </a-menu-item> <a-menu-item key="custom"> <a @click="customClick()"> 个性化</a> </a-menu-item> <a-menu-item key="binding"> <a @click="bindingClick()">账户绑定</a> </a-menu-item> <a-menu-item key="notification"> <a @click="notificationClick()">新消息通知</a> </a-menu-item> </a-menu> </div> <div class="account-settings-info-right"> <div class="account-settings-info-title"> <span>{{ title }}</span> </div> <security ref="security" v-if="security"></security> <base-setting ref="baseSetting" v-if="baseSetting"></base-setting> <custom ref="custom" v-if="custom"></custom> <notification ref="notification" v-if="notification"></notification> <binding ref="binding" v-if="binding"></binding> </div> </div> </a-card> </div> </template> <script> import PageLayout from '@/components/page/PageLayout' import RouteView from "@/components/layouts/RouteView" import { mixinDevice } from '@/utils/mixin.js' import security from './Security' import baseSetting from './BaseSetting' import custom from './Custom' import notification from './Notification' import binding from './Binding' export default { components: { RouteView, PageLayout, security, baseSetting, custom, notification, binding }, mixins: [mixinDevice], data () { return { // horizontal inline mode: 'inline', mainInfoHeight:"100%", openKeys: [], defaultSelectedKeys: [], // 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: '', title:"基本设置", security:false, baseSetting:true, custom:false, notification:false, binding:false } }, created () { this.updateMenu() }, mounted(){ this.mainInfoHeight = (window.innerHeight-285)+"px"; }, methods: { onOpenChange (openKeys) { this.openKeys = openKeys }, updateMenu () { let routes = this.$route.matched.concat() this.defaultSelectedKeys = [ routes.pop().path ] }, //update-begin--Author:wangshuai Date:20200729 for:聚合路由错误 issues#1441-------------------- settingsClick(){ this.security=false this.custom=false this.notification=false this.binding=false this.baseSetting=true this.title="基本设置" }, securityClick(){ this.baseSetting=false this.custom=false; this.notification=false this.binding=false this.security=true this.title="安全设置" }, notificationClick(){ this.security=false this.custom=false this.baseSetting=false this.binding=false this.notification=true this.title="新消息通知" }, bindingClick(){ this.security=false this.baseSetting=false this.notification=false; this.custom=false; this.binding=true this.title="账号绑定" }, customClick(){ this.security=false this.baseSetting=false this.notification=false; this.binding=false this.custom=true; this.title="个性化" } //update-end--Author:wangshuai Date:20200729 for:聚合路由错误 issues#1441-------------------- }, } </script> <style lang="less" scoped> .account-settings-info-main { width: 100%; display: flex; height: 100%; overflow: auto; &.mobile { display: block; .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; } } .account-settings-info-left { border-right: 1px solid #e8e8e8; width: 224px; } .account-settings-info-right { flex: 1 1; padding: 8px 40px; .account-settings-info-title { color: rgba(0,0,0,.85); font-size: 20px; font-weight: 500; line-height: 28px; margin-bottom: 12px; } .account-settings-info-view { padding-top: 12px; } } } </style>