Skip to content

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

Fixed sider theme

parent 13424f55
Showing with 141 additions and 124 deletions
src/components/layout/LayoutMain.vue
<template>
<a-layout class="layout">
<sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
<sider-menu :menus="menus" theme="light" :collapsed="collapsed" :collapsible="true"></sider-menu>
<a-layout>
<!-- layout header -->
......@@ -77,38 +77,58 @@
}
}
.logo {
height: 64px;
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
z-index: 10;
img {
height: 32px;
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 32px;
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
}
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
&.light {
background-color: #fff;
box-shadow: 2px 0px 8px 0px rgba(29,35,41,0.05);
.logo {
background: #fff;
h1 {
color: #1890ff;
}
}
.ant-menu-light {
border-right-color: transparent;
}
}
}
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
}
.header {
......
src/components/menu/SiderMenu.vue
<template>
<a-layout-sider :class="['sider', isMobile ? null : 'shadow' ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div class="logo">
<router-link :to="{name:'dashboard'}">
<img src="~@/assets/logo.svg" alt="logo">
<h1>Ant Design Pro</h1>
</router-link>
</div>
<s-menu :collapsed="collapsed" :menu="menus" @select="onSelect" style="padding: 16px 0px;"></s-menu>
<s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
</template>
......@@ -17,6 +17,11 @@
name: "SiderMenu",
components: { ALayoutSider, SMenu },
props: {
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
......@@ -46,8 +51,4 @@
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
</script>
\ No newline at end of file
src/router/index.js
......@@ -249,13 +249,13 @@ export const asyncRouterMap = [
{
path: 'center',
name: 'center',
component: () => import('@/views/user/Index'),
component: () => import('@/views/account/Index'),
meta: { title: '个人中心' }
},
{
path: 'settings',
name: 'settings',
component: () => import('@/views/user/Index'),
component: () => import('@/views/account/Index'),
meta: { title: '个人设置' }
}
]
......
src/views/user/Index.vue → src/views/account/Index.vue
<template>
<layout-main>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card :style="{ padding: '0 15%' }">
<a-row :gutter="16">
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card :style="{ padding: '0 15%' }">
<a-row :gutter="16">
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
</a-col>
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</a-card>
</page-layout>
</layout-main>
<img :src="option.img"/>
</div>
</a-col>
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</a-card>
</page-layout>
</template>
<script>
......
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